/* ==========================================================================
   Author's custom styles
   ======================
   Kennard Lim
   www.depixell.com
   
   ========================================================================== */


@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:400,300,700);


/*global*/

html { -webkit-font-smoothing: antialiased; }

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: #1a1a1a;
	position: relative;
	background-color: white;
}

a {
	color: #1a1a1a;
	text-decoration: none;
}

a:hover{
	color: #e40580;
	text-decoration: none;
}


img, object {
	max-width: 100%;
}

[class*="grid-"]{
/*	background-color: #f2f2f2;*/
}


.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

/*typography*/

h1 {
	font-size: 1.750em;
/*	letter-spacing: -1.5px;*/
}

h2 {
	font-weight: 100;
	font-size: 1.500em;
	font-size: 2.5vw;
	color: #e40580;
	font-family: "Open Sans", "Helvetica Neue",Helvetica, sans-serif;
	/*color: #b4c34f;*/

}
h3 {
	font-weight: 700;
	font-size: 1.125em;
	color: #e40580;
	font-family: "Open Sans", "Helvetica Neue",Helvetica, sans-serif;
	/*color: #ed6c85;*/
}


/*header*/
#header{
	padding-top: 20px; 
	position: relative;
	border-bottom: 1px solid #1a1a1a;
}

/*feature*/

#feature{
	position: relative;
	}
	#feature img{

	}

	#feature h1{
		font-family: "Open Sans", "Helvetica Neue",Helvetica, sans-serif;
		color:#DD2A89;
		padding:0;
		margin: 0;
	}
	#feature span{
		color: #fff;
		font-size: .85em;
	}
	#feature .caption{


	}
	#feature .title{
        position:absolute;
        bottom:5px;
        left:0px;	
		width: 95%;
		padding: 1.2% 2.5%;
        background: url("../img/web/bg-transparent.png");      

	}


/*navigation*/

#nav{
	margin-bottom: 10px;
}

#nav ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 10px 4px 7px 0;
  list-style: none;
}
#nav ul li {
  font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.40em;
  text-transform: uppercase;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 7px 9px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#nav ul li:hover {
  background: #ffbae0;
  color: #fff;
}
#nav ul li ul {
  padding: 0;
  position: absolute;
  top: 45px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  z-index: 9999;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#nav ul li ul li { 
  background: #ffbae0; 
  display: block; 
  color: #1a1a1a;
  font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.8em;
}
#nav ul li ul li a { 
  color: #1a1a1a;
}
#nav ul li ul li:hover { background: #ff89ca; }
#nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  color: #fff;
}
#nav ul li:hover ul a:hover{
  color: #e40580;
}

/*
#nav ul {
	width: 100%;
	margin: 0;
	list-style: none;
	padding-left:0;
	}

	#nav ul li {
		float: left;
	    margin-right:2.1em;
	}

	#nav ul li:last-child {
		margin-right: 0;
	}

	#nav ul li a {
		font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, sans-serif;
		font-size: 1.5625em;
		letter-spacing: -1px;
		color: #1a1a1a; 
		display: block;
		text-decoration: none;
		text-transform: uppercase;
	}
 
	#nav ul li a:hover {
		color: #e40580;
	}

	#nav ul li.active a{
		color: #e40580 !important;
	}
*/
.selectnav { display: none; }

/*search*/

.search-form{
	float: right;
	margin-top: 60px;
	width: 100%;
	clear: both;
}

.search-form input[type="text"]{
	line-height: 1.4;
	font-size: .75em;
	padding-left: 0.5em; 
	font-family: "Open Sans";
	width: 80%;
	padding: 1px 0 1px 4px;
	float: left;
	border: 1px solid #bcbcbc;

}

.search-form ::-webkit-input-placeholder {
	line-height: 1.7;
	font-size: .80em;
}

.search-form :-moz-placeholder { /* Firefox 18- */
	line-height: 1.7;
	font-size: .80em;
}

.search-form ::-moz-placeholder {  /* Firefox 19+ */
	line-height: 1.7;
	font-size: .80em;
}

.search-form :-ms-input-placeholder {  
	line-height: 1.7;
	font-size: .80em;
}

.search-form input[type="submit"]{
	line-height: 1;
	height: 1.75em;
	font-size: .75em;
	font-family: "Open Sans";
	width: 15%;
	background-color: #e40580;
	color: #fff;
	border: none;
	margin:0;
	padding: 0;
	float: left;

}

/*content*/

.block-title{
	border-bottom: 1px solid #1a1a1a;
	}
	.block-title span{
		font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, sans-serif;
		font-size: 1.25em;		
		color: #fff;
		padding: 0 3em 0 .5em;
		background-color: #000;
		text-transform: uppercase;
	}

#twitter{
		margin-top: 1em;
	}

/*hottest*/


#hottest ul{
	list-style: none;
	margin: 0;
	padding: 0;
	}

	#hottest ul li{
		font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, sans-serif;
		font-weight: 100;
		font-size: 1.625em;
		padding: .5em 0;
		border-bottom: 1px solid #1a1a1a;
	}

	#hottest ul li a{
		color: #1a1a1a;
	}
	#hottest ul li a:hover{
		color: #e40580;
	}

/*highlights and ourpicks */

.teaser-highlights, .teaser-ourpicks{
	font-size: 1.25em;
	font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, sans-serif;
	text-transform: capitalize;
}

.highlights-block, .ourpicks-block{
	margin-bottom: 20px;
}

/* search */

.search-meta{
	margin:1em 0 2em 0;
}

h3.list-title{
    padding-bottom: 5px;
}

/* article */
.article-block p{
	font-size: 0.875em;
	line-height: 1.5;
}

.article-block a{
	color: #e40580;
	font-weight: 700;
}

.article-block h3{
	margin-top: 0;
	line-height: 1.25;
	text-transform: uppercase;
}

article{
	margin-bottom: 20px;
}

.pageNavi{
	margin: 1em 0;
	text-align: right;
}
/* article-details */

.article-img{
	float: left;
	width:60%;
	margin-right: 5%;
	margin-bottom: 3%;
}

.dropcap { float: left; color: #E40580; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

.article-header h2{
	color: #e40580;
 	font-size: 2.62500em; line-height: 1.14286em; margin-top: 0em; margin-bottom: 0em;
 	letter-spacing: -0.5px;
	font-weight: 700;
	font-family: "Open Sans Condensed", "Helvetica Neue",Helvetica, sans-serif;
    padding-bottom:10px;
}

.caption{
	float: left;
}

.profiler{
	margin-top: 20px;
	margin-bottom: 20px;

	padding: 10px 0;

}


.gambar_profiler{
	float: left;
	width: 20%;
}

.nama_profiler{
	font-weight: bold;
	margin-bottom: 10px;
}

.keterangan_profiler{


}

.detail_profiler{
	float: left;
	width: 70%;
	margin-left: 10px;
}

.column{
	float: right;
	font-size: 16px;
	font-weight: bold;
	text-align: right;
	padding: 10px;
	background-color: #DD2A89;
	color: #fff;
}

.article-meta{
	min-width: 320px;
}

.article-meta-left{

}

.article-meta-right{
	float: right;
}
.view-comment-span{
	font-size: 1.825em;
	line-height: 0.7em;
	vertical-align: top;
	margin: 0 5px 0 10px;
}


.article-header span{
	font-size: 0.875em;
}

.article-content p{
	font-size: 1em;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 1.5em;
	color: #333;
}

.author-bio{
	margin-bottom: 2em;
}

.author-name{
	font-weight: bold
}

.author-desc{
	font-style: italic;
}

/*.article-content > p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
*/

.article-meta{
	margin: 1em 0;
	padding-top: 6px;
	padding-bottom: 6px;
	border-top: 1px solid #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
}

/* Related Post */
/* --------------------------------- */
#related-post{
	margin-bottom:1.5em;
}
#related-post h3 {
	font-family: 'OstrichSansMedium', Arial, sans-serif;
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
#related-post .related {
	width: 100px;
	float: left;
	padding: 10px;
	text-align: center;
}
#related-post .related:hover {
	background-color: #D7E9FD;
}

#related-post .related h3 {
	font: 0.75em "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	border: none;
}
#related-post .related h3 {
	color: #000;
	text-transform:capitalize;
	font-weight:bold;
}


/*comments*/
.comments-block{
	margin-bottom: 1em;
}

.comments{
	padding-top: 1em;
	padding-bottom: 1em;	
	border-bottom: 1px dashed #1a1a1a;
}

.meta-comment{
	font-weight: bold;
}

.content-comment{

}

.comment-pagination{
	margin: 1em 0;
	text-align: right;
}


/*about us*/
.about-us-img{
	width: 100%;
	margin-bottom: 1em;
}


/*footer*/
#footer{
	padding-top: 10px;
}



#footer-nav{

	}

	#footer-nav a:after{
		padding: 0 .5em;
		content: ' | ';
	}

	#footer-nav a:after{
		color: #1a1a1a;
	}

	#footer-nav a:last-child:after{
		content: '';
	}

	#footer-nav a{
		font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, sans-serif;
		font-size: 1.0625em;
		color: #1a1a1a;
		text-transform: lowercase;
	}
	
	#footer-nav a:hover{
		color: #e40580;
	}

	#footer-nav a:first-child{
		padding-left: 0; 
	}

	#footer-nav a:last-child{
		padding-right: 0; 
	}

#copyright{
	font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.0625em;
	text-align: right;
}



/* ads */

#ads-pos-1{
    margin-bottom:1em;
    text-align: center;
}

#ads-pos-2{
    margin-top:1em;
    text-align: center;
}

#ads-pos-3{
    margin-top:1em;
    text-align: center;
}

#ads-pos-4{
    margin-top:1em;
    text-align: center;
}

#ads-pos-5{
    margin-top:1em;
    text-align: center;
}

#ads-pos-6{
    margin-top:1em;
    text-align: center;
}

#ads-pos-7{
    margin-top:1em;
    text-align: center;
}

#ads-pos-8{
    margin-top:1em;
}

#ads-pos-9{
    margin-top:1em;
}



/* blockquote */

blockquote {
  font-size: 1.1em;
  color: #e40580;
  background: #f9f9f9;
  font-weight: bold;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote:after {

}
blockquote p {
  display: inline;
}


/*media queries*/

/* Larger ----------- */
@media screen and (max-width: 1024px) {


	#nav ul li {
	    /*margin-right:1em;*/
	}

	#nav ul li a{
		font-size: 1em;
	}

	#feature .title{
		padding: 1% 2.5%;    
	}

	#feature h1 {
		font-size: 1.5em;
		line-height: 1.5;
	}

	#feature span{
		font-size: .70em;
	}

	#hottest ul li{
		font-size: 1.5em;
		padding: .5em 0;
	}

	#footer-nav a:after{
		padding: 0 .25em;
	}	

}




/* Smaller ----------- */
@media screen and (max-width : 650px) {

	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-6,
	.grid-7,
	.grid-8,
	.grid-9,
	.grid-10,
	.grid-11,
	.grid-12 {
		width:100%;
	}

	#logo {
		width: 100%;
		text-align: center;
	}

	#nav ul li {
	    width: 100%;
        margin-right:2em;
	}

	#nav ul li a{
		font-size: 1.375em;
        margin-top:20px;
	}

    
	.search-form{
	   display:block;
       margin-bottom:20px;
	}
    
	#feature .title{
		padding: 1% 2.5%;    
	}

	#feature h1{
		font-size: 1.375em;
		line-height: 1.1; 
	}

	#feature span{
		font-size: .60em;
	}

	#hottest ul li{
		font-size: 1.375em;
		padding: .5em 0;
	}

	#footer-nav{
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #1a1a1a;
		text-align: center;
	}

	#footer-nav a{
/*		display: block;
		width: 100%;*/
	}

	#footer-nav a:after{
		content: '';
		padding: 0 .25em;
	}

	#copyright{
		margin-top: 10px;
		padding: 10px 0;
		border-top: 1px solid #1a1a1a;
		text-align: center;
	}

  .js #flex-nav { display: none; }
  .js .selectnav { display: block; width: 100%; margin-bottom: 10px; margin-top: 30px; }

  .article-img{
	float: none;
	display: block;
	width:100%;
	margin-right: 0;
	margin-bottom: 1em;
  }

  .article-content p{
  	font-size: 0.875em;
  	line-height: 1.5;
  }

  .highlights-block img, .ourpicks-block img {
  	width: 100% !important;
  }

  .teaser-highlights, .teaser-ourpicks{
	margin-bottom: 1em;
  }

}

.modal-body-scroll{
  padding:20px;
  height: 425px;
  overflow-y: auto;
}

#wthome ol {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
     
    margin: -2px 0 0 0;
    margin-left: 1em;
    padding: 0;
     
    counter-reset: li-counter;
}
#wthome ol > li {
    position: relative;
    padding: 7px;
     
    border-top:1px solid grey;
}
#wthome ol > li:before  {
    position: absolute;
    top: -1px;
    left: -1.17em;
    width: 0.94em;
    height: 0.94em;
    
    padding:7px;
    
    border-top:1px solid grey;
    
    content: counter(li-counter);
    counter-increment: li-counter;
}