@charset "UTF-8";

section.content { width: 100%; height: 100%; padding: 0 5%; overflow: auto; }
section.separator {
	width: 100%;
	min-height: 10px;
	padding: 1% 2%;
	clear: both;
	background-color: #F3F3F3;
	text-align: center;
	color: #333;
	position: relative;
	z-index: 2;
	overflow: auto;
}
.container { width: 100%; height: 100%; }

.page-header { width: 100%; padding: 2% 5%; font-weight: bold; text-align: center; }

.box { padding: 1%; margin: 0; position: relative; }
.box .box-wrap {
	border: 1px solid #F4F4F4;
	-webkit-border-radius: 2%;
	-moz-border-radius: 2%;
	-ms-border-radius: 2%;
	-o-border-radius: 2%;
	border-radius: 2%;
}
.box .box-header { background-color: #C02026; }
.box .box-header:after {
  content: "";
	display: block;
	width: 100%;
	height: 32px;
	background-image: url('../../../salihin/img/arrow.png');
	background-size: cover;
	background-position: center center;
}
.box .box-header .box-title {
	display: block;
	color: #FFF;
	width: 100%;
	height: 100%;
	padding-top: 8px;
	font-weight: bold;
	font-size: 16px;
	line-height: 16px;
	text-align: center;
}
.box .box-body { height: 400px; }
.box .box-slider {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	overflow: hidden;
	background: #DEDEDE;
}
.box .box-slider .box-slider-item {
	opacity: 0;
	visibility: hidden;
	width: 100%;
	height: 0;
	display: block;
	list-style-type: none;
	transition: 500ms visibility ease-in-out, 500ms opacity ease-in-out;
	padding: 0;
	margin: 0;
}
.box .box-slider .box-slider-item.active { height: 100%; padding: 2%; visibility: visible; opacity: 1; }

/**
* FEATURED ARTICLES
*/
.feature-list {
	height: 505px; 
	max-height: 505px; 
	overflow-y: auto;
	overflow-x: hidden;
	margin-bottom: 10px;
	padding-bottom: 5px;
}
.feature-list.latest { height: 600px; max-height: 600px; }
.feature-item {
	border: 1px solid #C4C4C4;
	position: relative;
	width: 100%;
	height: 245px;
	display: block;
	overflow: hidden;
	padding: 0;
	margin-bottom: 10px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.feature-item .feature-icon {
	background-color: #FFF;
	border-radius: 50%;
	color: #333;
	font-size: 2em;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: 200ms all ease-in-out;
}
.feature-item .feature-icon:hover { color: #C4C4C4; }
.feature-item .feature-img { overflow: hidden; height: 100%; padding: 0; }
.feature-item .feature-content { overflow: hidden; height: 100%; padding: 0; position: relative; }
.feature-item .feature-content .feature-title { width: 100%; padding: 5px 5px 5px 10px; font-weight: bold; }
.feature-item .feature-content .feature-info { width: 100%; color: #C4C4C4; font-weight: normal; font-style: italic; font-size: 0.8em; padding: 2px 5px 2px 10px; }
.feature-item .feature-content .feature-text { width: 100%; padding: 5px 5px 5px 10px; width: 100%; height: 50px; text-indent: 5px; overflow: hidden; }
.feature-item .feature-content .feature-text img { display: none; }
.feature-item .feature-content .feature-menu {
	width: 100%; 
	padding: 0 5px 5px 5px; 
	text-align: center; 
	position: absolute; 
	bottom: 0; 
	background: rgba(255,255,255,0.95); 
	border-top: 1px solid #C4C4C4;
}
.feature-item .feature-content .feature-tags { padding: 2px 5px; text-align: left; color: #C4C4C4; font-style: italic; }
.feature-item .feature-content .feature-tags a { display: inline-block; color: #C4C4C4; }
.feature-item .feature-content .feature-tags a:hover { color: #333; }

.feature-item.fill { height: 100%; overflow: hidden; }
.feature-item.fill .feature-img { height: 200px; }
.feature-item.fill .feature-content { height: 300px; }
.feature-item.fill .feature-content .feature-text { height: 120px; }

@media (max-width: 767px) {
	.feature { overflow: visible !important; }
	.feature-list { max-height: 100% !important; height: 100% !important; overflow: auto; }
	.feature-item { height: 100% !important; }
	.feature-item .feature-content { height: 100% !important; }
	.feature-item .feature-content .feature-text { height: 100px !important; }
}


/**
* LATEST ARTICLES
*/
.latest {  }
.latest-list { margin-bottom: 10px; overflow: hidden;  }
.latest-item { padding: 2%; height: 100%; overflow: auto; }
.latest-item .latest-wrap {
	border: 1px solid #C4C4C4;
	height: 500px;
	width: 100%;
	position: relative;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.latest-item .latest-wrap .latest-icon {
	background-color: #FFF;
	border: 1px solid #333;
	border-radius: 50%;
	color: #333;
	font-size: 2em;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: 200ms all ease-in-out;
}
.latest-item .latest-wrap .latest-icon:hover { color: #C4C4C4; }
.latest-item .latest-wrap .latest-img {
	width: 100%;
	height: 250px;
	background-size: cover;
	background-position: 50% 50%;
}
.latest-item .latest-wrap .latest-content {
	width: 100%;
	height: 250px;
}
.latest-item .latest-wrap .latest-content .latest-title { width: 100%; padding: 5px; font-weight: bold; }
.latest-item .latest-wrap .latest-content .latest-info { width: 100%; color: #C4C4C4; font-weight: normal; font-style: italic; font-size: 0.8em; padding: 2px 5px; }
.latest-item .latest-wrap .latest-content .latest-text {
	width: 100%; 
	padding: 5px; 
	width: 100%; 
	height: 100px; 
	text-indent: 5px; 
	overflow: hidden;
	
}
.latest-item .latest-wrap .latest-menu {
	width: 100%; 
	padding: 5px; 
	text-align: center; 
	position: absolute; 
	bottom: 0;
	left: 0;
	background: rgba(255,255,255,0.95); 
	border-top: 1px solid #C4C4C4;
}
.latest-item .latest-wrap .latest-menu .latest-tags { padding: 2px 5px; text-align: left; color: #C4C4C4; font-style: italic; }
.latest-item .latest-wrap .latest-menu .latest-tags a { display: inline-block; color: #C4C4C4; }
.latest-item .latest-wrap .latest-menu .latest-tags a:hover { color: #333; }

@media (max-width: 767px) {
	
}

/**
* SOCIAL
*/
.social { overflow: hidden; }
.social-card { padding: 10px; }
.social-card .card-header { border: 1px solid #E4E4E4; padding: 10px; color: #FFF; }
.social-card .card-body { border: 1px solid #E4E4E4; height: 420px; overflow: hidden; }

/** TWITTER **/
.social-twitter .card-header { background-color: #55acee; }
/** FACEBOOK **/
.social-facebook .card-header { background-color: #3b5998; }
/** INSTAGRAM **/
.social-instagram .card-header { background-color: #e95950; }

.social-instagram .ig-header { overflow: hidden; margin-bottom: 10px; background-color: #FAFAFA; padding: 5px; }
.social-instagram .ig-header .ig-logo,
.social-instagram .ig-header .ig-name,
.social-instagram .ig-header .ig-follow { height: 30px; line-height: 30px; }
.social-instagram .ig-header .ig-logo img { border: 1px solid #DBDBDB; border-radius: 50%; width: 30px; height: 30px; }
.social-instagram .ig-header .ig-follow { border: 1px solid #3897F0; color: #3897F0; border-radius: 2px; text-align: center; padding:0; }
.social-instagram .ig-body { width: 100%; height: 350px; overflow: auto; }
.social-instagram .ig-item { border: 1px solid #111; margin: 10px; position: relative; }
.social-instagram .ig-item .ig-helper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid red;
	background: rgba(0,0,0,0.5);
	opacity: 0;
}
.social-instagram .ig-item .ig-helper p {
	display: block;
	width: 100%;
	height: 100px;	
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
}
.social-instagram .ig-item .ig-helper p span { color: #FFF; width: 100%; display: block; margin: 5px 0; text-align: center; }
.social-instagram .ig-item:hover .ig-helper { opacity: 1; }

/**
* DISCOVER MORE AND FOOTER
*/
.discover { background-color: rgba(255,255,255,0.9); }
.footer-links { padding: 0 0 5% 0; list-style: none; }
.footer-links h4 { margin-bottom: 5px; }
.footer-links li { list-style: none; display: block; }
.footer { background-color: #C02026; bottom: 0px; color: #fff !important; }
.footer .sns_links { overflow: auto; height: 100%; }
.footer .sns_link_item {
	float: left;
	font-size: 18px;
	padding: 5px;
	margin: 5px;
	border: 1px solid #C02026;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	color: #FFF;
}
.footer .sns_link_item:hover { background-color: rgba(0,0,0,0.5); }