/*	*************************************
	WARNA
	_____________________________________
*/	
/*	!

WARNA LOGO:
    Orange cenderung merah: #cc3333;
    Abu-abu cenderung hitam: #333333;
 *  warna dasar/pilihan/: #cc3333;
 *  warna hover: #cc3300;
 */
.warna-logo-ini {
	color: #000;
}
.warna-logo-solusi {
	color: #cc3333;
}
.bg-logo-ini {
	background-color: #000;
}
.bg-logo-solusi {
	background-color: #ff6600;
}
.bg-pilihan {
    background-color: #660000;
}	
a, .btn {
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s; }

a {
	color: #cc3333;
}

a:hover, a:focus, .judul  a:hover, .judul a:focus {
     color: #cc3300;
}



html, body {
  font-family: 'Open Sans', sans-serif;
  font-size: 94%;
  font-weight: 400;
  line-height: 1.5;
  /* font-size: 1.4em; */
  /* color: #191E21; */
  color: #111;
  }
  
/* start sticky footer */
body {
	background: transparent;
	margin-bottom: 160px; /* sesuaikan, tergantung tinggi sticky footer */
  /* min-height: 2000px; */
  /* padding-top: 180px; */
  /* height: 10000px; */
}
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
/* end sticky footer */



/* Tag Cloud << copied from Chingsy
-----------------------------------------------------------------*/

.tagcloud { margin-bottom: -2px; }

.tagcloud a {
	display: block;
	float: left;
	margin-right: 4px;
	margin-bottom: 4px;
	padding: 3px 6px;
	border: 1px solid #E5E5E5;
	font-size: 13px !important;
	color: #666;
	border-radius: 2px;
}

body:not(.device-touch) .tagcloud a {
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.tagcloud a:hover {
	border-color: #1ABC9C !important;
	color: #1ABC9C !important;
}


#parapenulis {
	padding: 3px 0;
	font-size: 110%;
}
#parapenulis a {
	color: #000;
}
#parapenulis a > .nama-lengkap {
	padding-top: 12px; 
	border-bottom: 1px solid #eee; 
	margin-left: -10px;
}
#parapenulis img {
	width: 60px;  
	border-radius: 50%;
}
.judul a {
	color: #000;
	font-family: 'Roboto', sans-serif;
}
.judul-list-1 {
	font-family: 'Roboto', sans-serif;
    font-size: 125%;
    font-weight: 200;
	line-height: 110%;
	text-shadow: 0 0 0 rgba(0, 0, 0, 1);
}
.judul-list-di-kategori {
	font-family: 'Roboto', sans-serif;
    font-size: 170%;
    font-weight: 500;
	line-height: 110%;
	text-shadow: 0 0 0 rgba(0, 0, 0, 1);
	margin-top: 7px;
	margin-bottom: 7px;
}


.list-1 {
  display: inline-block;
  width: 100%;
  }

.list-1 .padding {
    padding: 0 0 10px 10px;
    margin-left: 30%; 
}

.list-1 figure {
    float: left;
    display: inline-block;
    width: 30%;
    height: auto;
    overflow: hidden; 
}
.list-1 figure img {
    width: 100%; 
}


.list-terpopuler {
  display: inline-block;
  width: 100%;
  }
.list-terpopuler li {
    margin-left: -20px;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}


.list_utama {
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 5px;
}
.list_utama #gambar {
	z-index: 1;
}
.list_utama #naskah-ada-gambar {
	margin-top: -80px;
	margin-right: -15px;
	margin-left: -15px;
	padding: 15px 15px 5px 15px;
	background-color: #f8f8f8;
	opacity: 1;
}
.list_utama #naskah-tanpa-gambar {
	margin-top: 0;
	margin-right: -15px;
	margin-left: -15px;
	padding: 50px 15px 5px 15px;
	background-color: #f8f8f8;
}
.list_utama #judul-ada-gambar {
	margin-top: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 200%;
	font-weight: 400;
	line-height: 110%;
	margin-bottom: 20px;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, .9);
 }
 .list_utama #judul-ada-gambar a {
	color: #fff;
 }
.list_utama #judul-tanpa-gambar {
	margin-top: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 200%;
	font-weight: 400;
	line-height: 110%;
	margin-bottom: 10px;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, .1);
 }
.list_utama figure {
	max-height: 200px;
	overflow-y: hidden;
	margin-right: -15px;
	margin-left: -15px;
	z-index: 1;
 }
 .list_utama figure img {
	 width: 100%;
 }
.list_utama .line-rubrik {
  display: inline-block;
  width: 100%;
  background-color:#cc3333;
  height: 1px;
  position: relative;
  }
.list_utama .rubrik a { /* kotak nama rubrik/kategori */
	display: inline-block;
    position: absolute;
	top: 0;
	left: 0;
    font-size: 1.35em;
	font-weight: 300;
	color: #fff;
    background-color: #cc3333;
    text-transform: uppercase;
    padding: 10px 20px 10px 20px;
	border-radius: 0 0 9px 0;
	border-top: none;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	border-left: none;
	text-shadow: 0 1px 0 #eee;
}
.list_utama .rubrik a:hover  {
	background-color: 330000;
	opacity: .5;
	text-decoration: none;
}
.list_utama .naskah {
	background-color: #f3f3f3;
}
.list_kedua #kliksemua {
	color: #000; 
	margin-bottom: 5px;
	padding: 7px 5px 0 5px;
	border-top: 1px solid #eee;
	opacity: .8;
}
.list_kedua #kliksemua a{
	color: #ff6600; 
}

.list-home-terbaru-perkategori {
    padding-top: 15px;
    padding-right: 0;
    padding-bottom: 0;
    border-top: 1px dotted #f1f1f1;
}


.mobile-list-terbaru {
    background-color: #fff;
    margin-top: 5px;
    margin-bottom: 0;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.munib-bg-grad-light {
  background: #f8f9fa; /* For browsers that do not support gradients */ 
  background: -webkit-linear-gradient(left, #f8f8f8, #fff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #f8f8f8, #fff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #f8f8f8, #fff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #f8f8f8, #fff); /* Standard syntax */
}
.munib-bg-gradien-merah-hitam-1 {
  background: #cc3300; /* For browsers that do not support gradients */ 
  background: -webkit-linear-gradient(left, #cc3300, #000 ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #cc3300, #000); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #cc3300, #000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #cc3300, #000); /* Standard syntax */
}
.munib-bg-gradien-merah-hitam-1-inverse {
  background: #000; /* For browsers that do not support gradients */ 
  background: -webkit-linear-gradient(left, #000, #cc3300 ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #000, #cc3300); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #000, #cc3300); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #000, #cc3300); /* Standard syntax */
}


/*	*************************************
	MENU
	_____________________________________
*/	

/* Drop-down Responsive Menu */
		#menu-wrap {
			float: left;
			width: 100% !important;
			background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
			margin: 0;
		}
		#menu-wrap ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#menu-wrap li {
			float: left;
			margin-right: 0;
			position: relative;
		}
		#menu-wrap li:last-child {
			margin-right: 0;
		}
		#menu-wrap a {
			background-color: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
			color: #FFFFFF;
			display: block;
			padding: 15px 15px;
			text-decoration: none;
		}
		#menu-wrap li ul {
			margin: 20px 0 0;
			opacity: 0;
			position: absolute;
			transition:0.5s;
			visibility: hidden;
			width: 220px;
		}
		#menu-wrap li li {
			float: none;
			margin: 0;
		}
		#menu-wrap li:hover > ul{
			transition:0.5s;
			margin: 0;
			visibility: visible;
			opacity: 1;
			z-index:2;
		}
		#menu-wrap li li ul {
			box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3);
			left: 200px;
			margin: 0 0 0 20px;
			top: 0;
		}
		#menu-wrap ul a:hover {
			color: #FFFFFF;
			background-color: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
			background-image: linear-gradient(#04acec, #0186ba);
		}
		#menu-wrap li:hover > a {
			color: #FFFFFF;
			background-image: linear-gradient(#04acec, #0186ba);
			background-color: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
		}
		@media screen and (min-width: 768px){
			#menu-wrap {
				float: left;
				width: 100%;
				background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
				margin: 0;
			}
			#responsive{
				display :none !important;
			}
			#menu-wrap > ul{
				display: block !important;
				width: 100%;
				margin: 0px 50px;
			}
			#menu-wrap li ul {
				margin: 5px 0 0;
				background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
			}
		}
		@media screen and (max-width: 768px) {
			#menu-wrap {
				float: left;
				width: 100% !important;
				background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
				margin: 0 !important;
			}
			#menu-wrap li {
				float: none;
				position: relative;
			}
			#menu-wrap li a{
				margin: 0 0 1px !important;
			}
			#menu-wrap {
				float: none;
				position: relative;
			}
			#menu-wrap > ul {
				display: none;
				padding: 0 !important;
				margin-left: 5px;
				max-height: 400px; /* reset the max-height */
				overflow-y: hidden;
				overflow-y: scroll; /* 1 */
			}
			#menu-wrap li ul {
				margin: 5px 0 0;
			}
			#menu-wrap ul {
				background:transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
				box-shadow: none !important;
				left: 0 !important;
				list-style: none outside none;
				margin: 0 !important;
				opacity: 1 !important;
				padding: 0 0 0 45px;
				position: relative !important;
				top: 0 !important;
				visibility: visible !important;
				width: auto !important;
			}
			#responsive {
				background: transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
				color: #FFFFFF;
				margin: 0 0 2px;
				padding: 10px;
				display :block;
				transition:0.5s;
				cursor: pointer;
			}
			#responsive:hover {
				background-color:transparent linear-gradient(180deg, #FFB400 0%, #FF7E00 100%) repeat scroll 0% 0%;
				background-image:linear-gradient(#04acec, #0186ba);
			}
		}


/* Sticky Menu
	---------------
*/
/* Style the navbar */
#sticky-menu {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 0;
  overflow: hidden;
  z-index: 10;
  opacity: 0.95;
  filter: alpha(opacity=95); /* For IE8 and earlier */
  background-color: #fff;
  border-color: #e7e7e7;
}
#sticky-menu ul {
  margin-top: -20px;
  margin-bottom: 0;
  list-style: none;
}
#sticky-menu  li  a {
  font-family: Roboto;
  font-size: 110%;
  font-weight: 700;
}
#sticky-menu  li  a:last-child {
	border-right: 5px solid #f1f1f1; /* sama dengan background-color class .top2 */
}
#sticky-menu img {
	display: none!important;
}
#sticky-menu a {
  display: inline-block!important;
  color: #000;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 0 0 15% 0;
}
#sticky-menu li a:hover {
  text-decoration:  none;
  background-color:  #cc3333;
  color: #f1f1f1;
  border-radius: 0 0 15% 0;
}
#sticky-menu form {
  margin-top: -20px;
}
/* Page content */
.content {
  padding: 16px;
  float: center;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  right:0;
  left:0;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
  /*
  background-image: url("sticky-menu-images/logo.png");
  background-repeat: no-repeat;
  background-size: 140px auto;
  background-attachment: fixed;
  background-position: 15px 5px;
  */
  /* border-top: 2px solid rgba(0, 0, 0, 0.4); */
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 
}
.sticky #logo-sticky {
	display: block!important;
	max-width: 130px;
	height: auto;
	margin-top: -20px;
}
.sticky #tagline {
	display: block!important;
	margin-left: auto;
	padding-left: 120px;
}
.sticky form {
  display: block !important;
}

/* Add some top padding to the page content to prevent sudden quick movement 
	(as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

/* Menu Samping Sticky 
	--------------------------
*/
.sidenav {
    width: 44px;
    position: fixed;
    z-index: 10;
    top: 45%;
    right: 0;
    background: red;
    overflow-x: hidden;
	border-radius: 5px 0 0 5px;
	padding: 5px 0;
	border: 1px solid rgba(0, 0, 0, 0.5);
}
.sidenav a {
    padding: 5px 10px;
    text-decoration: none;
    font-size: 135%;
    color: #ffffff;
    display: block;
}
.sidenav a:hover {
    color: #fff;
	background-color: #66cc00;
	border-top: 5px solid #66cc00;
	margin-top: -5px;
	border-bottom: 5px solid #66cc00;
	margin-bottom: -5px;
}
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}


/*	*************************************
	FORM & BUTTON
	_____________________________________
*/	
.form-control {
  background-color: #f8f8f8;
  border-radius: 0;
}

.form-control:focus {
  color: #ff6600;
  background-color: #fff;
  border-color: #ff6600;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
}
.form-control::placeholder {
  color: #6c757d;
  opacity: .4;
}
.btn.cari{
	background-color: #cc3333;
	border-radius: 0;
	color: #fff;
}
.btn-outline-esolusi {
  color: #aaa;
  background-color: transparent;
  background-image: none;
  border-color: #e1e1e1;
}

.btn-outline-esolusi:hover {
  color: #fff;
  background-color: #ff6600;
  border-color: #ff6600;
}

.btn-outline-esolusi:focus, .btn-outline-esolusi.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-outline-esolusi.disabled, .btn-outline-esolusi:disabled {
  color: #e1e1e1;
  background-color: transparent;
}

.btn-outline-esolusi:not(:disabled):not(.disabled):active, .btn-outline-esolusi:not(:disabled):not(.disabled).active,
.show > .btn-outline-esolusi.dropdown-toggle {
  color: #fff;
  background-color: #e1e1e1;
  border-color: #e1e1e1;
}

.btn-outline-esolusi:not(:disabled):not(.disabled):active:focus, .btn-outline-esolusi:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-esolusi.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}


/*	*************************************
	TIPOGRAFI
	_____________________________________
*/	
.smaller {
	font-size: 70%;
}
.table-responsive table {
	font-size: 85%;
}
.teks-70 {
	font-size: 70%;
}
.teks-80 {
	font-size: 80%;
}
.teks-90 {
	font-size: 90%;
}
.teks-100 {
	font-size: 100%;
}
.teks-110 {
	font-size: 110%;
}
.teks-120 {
	font-size: 120%;
}
.teks-130 {
	font-size: 130%;
}
.teks-140 {
	font-size: 140%;
}
.teks-150 {
	font-size: 150%;
}
.teks-160 {
	font-size: 160%;
}
.teks-170 {
	font-size: 170%;
}
.teks-180 {
	font-size: 180%;
}
.teks-190 {
	font-size: 190%;
}

.teks-200 {
	font-size: 200%;
}
/*
.detail {
	display: inline-block;
	padding-right: 15px;
	padding-left: 15px;
}
*/




/*	*************************************
	SLIDER
	_____________________________________
*/	
/* Slider Utama
	---------------*/
.slider-utama {
	margin-top: -22px;
	margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
	.slider-utama {
		margin-top: 45px;
	}
}


/*	*************************************
	IKLAN
	_____________________________________
*/	
.iklan-display {
	position: relative;
	background-color: transparent;
}
/* .iklan-display figure{
	margin: .6em 0 .5em 0;
}
*/
.iklan-display.full-width {
	/* max-height: 220px; */
	overflow-y: hidden;
}
.iklan-display.full-width img{
	width: 100%;
	height: auto;
}


/*	*************************************
	LAYOUT
	_____________________________________
*/	
.bawah-header {
	padding-top: 0;
	padding-bottom: 0;
}
.spasi-x-10 {
	height: 10px;
}
.konten .container {
	padding-left: 15px;
	padding-right: 15px; 
	}
@media(min-width: 1200px) {
	.konten .container {
	padding-left: 75px;
	padding-right: 75px; 
	}
}
section, .blok {
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}
.blok .list_kedua {
	border-bottom: 3px solid #eee;
}
.blok-utama-home {
	margin-top: -30px;
}
.blok-samping-home {
	margin-top: -80px;
}
.blok-utama-detail {
	margin-top: 20px;
}
.blok-samping-detail {
	margin-top: 20px;
	border-top: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
}	
.box {
	display: block;
	z-index: 1;
}	
.box .rubrik,
.rubrik {
	margin-bottom: 15px;
}   
.box-padding {
	z-index: 1;
	padding: 20px 15px 0 15px ;
}
.box-border-atas-bawah {
	border-top: 1px dotted #ddd;
	border-bottom: 1px dotted #ddd;
	padding-top: 5px;
	padding-bottom: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.box-bordered {
	border-radius: 2px 0 0 0;
	-webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .1);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .1);
}
.box .nama-rubrik, 
.box-padding .nama-rubrik,
.box-bordered .nama-rubrik,
.nama-rubrik {
	font-family: 'Roboto', sans-serif;
    font-size: 125%;
    font-weight: 700;
	position: relative;
    text-transform: uppercase;
}
 
.box .nama-rubrik,
.box-padding .nama-rubrik,
.box-bordered .nama-rubrik  a {
	color: #000;
}
.box .nama-rubrik:after, 
.box-padding .nama-rubrik:after, 
.box-bordered .nama-rubrik:after {
      content: ' ';
      position: absolute;
      bottom: -7px;
      left: 0;
      width: 30px;
      height: 4px;
      background-color: #cc3333; 
}

.detail #judul {
  margin-top: 30px;
  margin-bottom: 15px;
  font-family: 'Roboto', sans-serif; 
  line-height: 1.1;
  font-size: 250%;
  font-weight: 300;
}
.detail #box-1 {
	border-top: 1px dotted #eee;
	margin: 15px -15px 0 -15px;
	padding:  7px 0;
}
.detail #tanggal {
	margin-bottom: 5px;
}

.detail .author {
	float: left;
	text-align: center;
	border-right: 1px dotted #ddd;
	margin: 5px 20px 5px 0;
	padding: 0 15px 15px 0;
	font-family: 'Roboto', sans-serif; 
	font-size: 75%;
	text-transform: uppercase;
	width: 100px;
}
.detail .author :hover {
	background-color: #ff6600;
	color: #fff;
	display: inline-block;
	border-radius: 4px;
	margin-right: -30px;
	max-width: 100px;
}
.detail .author img {
	height: 50px; 
	width: 50px; 
	border-radius: 50%;
}
.detail .author :hover img{
	height: auto; 
	width: 120px; 
	border-radius: 0;
	margin-right: -15px;
}
.detail .author hr {
	border-top: 1px dotted #ddd;
}
.detail #author-title {
	font-weight: 400;
}
.detail a>#author-name {
	color: #000;
	font-weight: 700;
}
.detail a:hover>#author-name {
	color: #fff;
}

.detail .terkait {
	display: inline-block;
	position: relative;
	padding: 10px 0;
	margin: 15px 0 0 0;
}

.detail #foto-utama {
	margin-right: -15px;
	margin-left: -15px;
}
.detail #foto-utama img{
	width: 100%;
}
.detail #keterangan-foto {
	padding: 5px 10px;
	font-size: 85%;
	color: #aaa;
	line-height: 1.1em;
	/* border-left: 10px solid #eee; */
	/* margin-left: 15px; */
}
.detail #naskah {
	padding-right: 10px;
	padding-left: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 103%;
	color: #222;
	line-height: 170%;
	margin-bottom: 25px;
}

.komentar-disqus {
    background-color: #f8f8f8;
    padding: 15px 15px 0 15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -15px;
}


.content-slider {
	background-color: inherit; 
	margin-top: 280px;
	/*
	margin-bottom: 5px;
	border-top: 0px solid #ddd;
	border-right: 1px solid #22bbff; 
	border-bottom: 1px solid #22bbff; 
	border-left: 1px solid #22bbff; 
	*/
	/* border-radius: 0 0 5px 5px; */
}

.selain-desktop {
  display: none!important;
}
.hanya-desktop {
  display: block!important;
}

#banner-top {
	width: 100%;
	/*
	background-image: url("../../../../images/header_banner_bg_w2000px.jpg"); 
	background-position: center;
    background-repeat: no-repeat;
    */
	background-color: #f5f5f5;
	background-size: cover;
}
#banner-top-logo {
    margin-left: auto;
    margin-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
}

.hubungi {
	font-size: 70%;
	line-height: 1em;
	position: relative;
	float: right;
	text-align: center;
	padding: 15px;
	margin-top: -140px;
	width: 50%;
	max-width: 150px;
	color: #ffffff;
}
@media (max-width: 375px) { /* Iphone X, Iphone 6/7/8 */
	.hubungi {
		font-size: 60%;
		margin-top: -155px;
	}
	#tagline {
		font-size: 80%;
	}
}
.hubungi #icon {
	font-size: 150%;
}
.hubungi #icon a{
	color: #fff;
	padding: 5px 10px;
}
.hubungi #icon a:hover {
	background-color: #66cc00;
	
}
.hubungi h6 {
	color: yellow;
}
.hubungi hr {
	border-top: 1px solid #ddd;
	margin-top: 3px;
	margin-bottom: 3px;
}



.top1 {
	display: inline-block;	
	position: relative;
	font-weight: 200;  
	background-color: #eee;
	width: 100%;
}
.top1 .inner {
	/* border-bottom: 1px solid #ddd; */
    width: 100%; 
}
.top1 .kanan {
    float: right; 
}
.top1 .kanan ul li:last-child a {
	margin-right: 0; 
}
.top1 .kiri {
	float: left; 
}
.top1 .kiri ul li:first-child a {
	margin-left: 0; 
}

.top1 .teks {
	 padding-top: 3px;
}
.top1 ul {
    padding: 0;
    margin: 0;
}

.top1 ul li {
      float: left;
      display: block; 
}
.top1 ul li a {
    margin: 0 0 0 5px;
    padding: 5px;
	border-radius: 3px;
	color: #555;
    display: block;
    text-decoration: none;
    position: relative;
    z-index: 1000;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .5px;
	font-size: 80%;
}

.top1 ul li#youtube a {
	background-color: #C4302B;
    color: #fff;
	font-size: 110%;
	padding:0 8px;
}
.top1 ul li#facebook a {
	background-color: #3b5998;
    color: #fff;
	font-size: 110%;
	padding:0 13px;
}
.top1 ul li#instagram a {
	background-color: #885343;
    color: #fff; 
	font-size: 110%;
	padding:0 10px;
}

.top1 ul li a i {
	display: none; 
	}
      .top1 ul li a:hover {
        color: #22bbff; }
      .top1 ul li.active a:after, .top1 ul li a:hover:after {
        height: 100%; }


/*

.top2 {
  background: #003366; 
  background: -webkit-linear-gradient(left, #003366, #000 );
  background: -o-linear-gradient(right, #003366, #000 ); 
  background: -moz-linear-gradient(right, #003366, #000 );
  background: linear-gradient(to right, #003366 , #000 );
	/*
}
*/


.top2 { 
	padding-top: 10px;
	padding-bottom: 10px;
	border: 0;
	background: #f1f1f1;
}

header .logo {
	max-width: 180px;
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  border: 0;
  margin-top: 30px;
}
.breadcrumb li {
	text-transform: uppercase !important;
    font-size: 80%;
	font-weight: normal; 
}
.breadcrumb li a,
.breadcrumb .icon-caret-right {
	color: #888; /* warna logo #ff6600 */
}
.breadcrumb li a:hover {
	/* color: #F73F52; */
	color: #0099ff; 
}	  
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: ">\00a0";
}
.pagination ul {
    background-color: #ddd;
}
.pagination li a {
  color: #cc3333; }
.pagination li.active a {
  border-color: #ccc;
  /* background-color: #22bbff; */
  background-color: #cc3333;
}
.pagination li.active a:hover, .pagination li.active a:focus {
   border-color: transparent;
   /* background-color: #22bbff; */
   background-color: #cc3333;
}

div.category .namakategori {
  width: 100%;
  display: inline-block;
  text-align: center;
  font-size: 1.8em;
  font-weight: 600;
  font-family: Roboto;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 20px 20px 10px 20px;
  color: #ff3300;
  text-shadow: 1px 1px 2px #555;
  background: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #f8f8f8;
  border-color: #dee2e6 #dee2e6 #fff;
  border-bottom: 2px solid #f8f8f8;
}
.nav-tabs .nav-item {
  margin-bottom: -2px;
}
.nav li a {
    background-color: none;
    padding: 7px 15px;
    border-radius: 0 !important; 
}
.nav li a i:before {
      margin-right: 5px; 
}
.nav li.active a {
    background-color: #f8f8f8;
    color: #ff6600;
    border-bottom: 4px solid #f8f8f8 !important; 
}
.nav li.active i {
   color: #ff6600;
}

.tab-pane {
    border: 1px solid #ddd;
    border-top: none;
    padding: 15px; 
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
  background-color: #f8f8f8;
}


.article-list {
  position: relative; }
  .article-list .badge {
    position: absolute;
    top: 0;
    right: 15px;
    border-radius: 0;
    background-color: #F73F52; }
  .article-list .inner {
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd; }
  .article-list figure {
    width: 250px;
    max-height: 170px;
    overflow: hidden;
    background-color: #000;
    float: left;
    display: inline-block;
    margin-bottom: 0; }
    .article-list figure img {
      width: 100%; }
  .article-list .details {
    padding: 5px;
    margin-left: 265px; }
    .article-list .details .detail .category, .article-list .details .detail time {
      margin: 0 10px 0 0; }
    .article-list .details .detail .category {
      margin: 0; }
    .article-list .details h1 {
      margin: 0;
      margin-top: 5px;
      margin-bottom: 10px;
      font-size: 1.6em;
      line-height: 1.1em; 
    }
      .article-list .details h1 a {
        color: #000;
        text-decoration: none;
        transition: all .5s;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        -o-transition: all .5s; }
        .article-list .details h1 a:hover {
          /* color: #F73F52; */
          color: #0099ff; 
		  }
    .article-list .details p {
      line-height: 26px; }
  .article-list footer {
    margin-top: 0; }




.bg-transparan {
	background-color: transparent;
}
.bg-putih {
	background-color: #fff;
}
.bg-oranye {
	background-color: #ff6600;
}
.terkini {
	background-color: transparent;
	/* border-bottom: 3px solid #eee; */
}
.terkini figure {
	width: 100%;
	height: 100px;
	overflow-y: hidden;
}
.terkini img {
	width: 100%;
	border: 1px solid #ddd;
}
.terkini .kotak-naskah {
	display: block;
	position: relative;
	background-color: #f8f8f8;
	margin: -40px 7px 20px 7px;
	padding: 7px;
	opacity: .90;
	/* height: 160px;  jika naskah tampil*/
	height: 70px;
	overflow-y: auto;
	border: 1px solid #ddd;
	border-left: none;
	border-radius: 2px;
}
.terkini .naskah {
	display: inline-block;
	line-height: 125%;
	z-index: 2;
}

.garis-kategori_kiri-kanan {
	position: relative;
	display: block;
	z-index: 1;
	top: -27px;
  }
.garis-kategori_kiri-kanan:before,
.garis-kategori_kiri-kanan:after  {
	content: '';
      position: absolute;
	  bottom: 0;
      width: 40%;
      height: 2px;
      background-color: #000; 
	  z-index: 1;
	  border-radius: 50%;
	  opacity: .7;
  }  
.garis-kategori_kiri-kanan:before{
      left: 0;
}
.garis-kategori_kiri-kanan:after{
      right: 0;
}

.label-bergaris-1 {
	position: relative;
	display: block;
	z-index: 1;
  }
.label-bergaris-1:before {
	content: '';
      position: absolute;
	  bottom: 0;
      left: 0;
      width: 36%;
      height: 1px;
      background-color: #ccc; 
	  z-index: 1;
  }  
.label-bergaris-1:after {
	content: '';
      position: absolute;
	  bottom: 0;
      right: 0;
      width: 36%;
      height: 1px;
      background-color: #ccc;
	z-index: 1;
}
  
.box .article-mini {
	display: inline-block;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: transparent;
    border-bottom: 1px solid #eee;
}
.box .article-mini:last-child {
    border-bottom: none;
}


.mobile-list-terbaru figure {
    width: 100%;
}
.mobile-list-terbaru > .tanggal {
    margin-top: -20px;
}
.mobile-list-terbaru .judul {
   font-family: 'Roboto', sans-serif;
   font-size: 1.19em;
   font-weight: 500;
   line-height: 110%;
   margin-right: -20px;
}

.article-mini > .list-terpopuler figure,
.article-mini >.list-advertorial figure
{
  margin: 10px 10px 5px 10px;
}
 

 
.article-mini .comment {
    padding: 10px;
	padding-top: 0;
    margin-left: 55px; }	
  
  .article-mini h1 {
    margin: 0;
    margin-top: -10px;
    line-height: 18px;
    /* text-transform: capitalize; */
    font-weight: 700;
    font-size: 14px; }
    .article-mini h1 a {
      color: #000; }
  .article-mini .detail {
    margin-top: 5px; }
    .article-mini .detail .category {
      margin-left: 0; }
      .article-mini .detail .category a {
        text-transform: uppercase;
        color: green; /* #F73F52; */ }

.tags-list {
  margin: 0;
  padding: 0;
  padding-left: 15px; }
  .tags-list li {
    padding: 5px; }
    .tags-list li a {
      color: #000;
      position: relative;
      text-decoration: none;
      transition: all .3s;
      -moz-transition: all .3s;
      -webkit-transition: all .3s;
      -o-transition: all .3s; }
      .tags-list li a:hover {
        opacity: .8; }
      .tags-list li a:before {
        content: '#'; }
      .tags-list li a:after {
        position: absolute;
        content: ' ';
        left: 0;
        bottom: -1px;
        width: 0;
        height: 1px;
        background-color: #F73F52;
        transition: all .3s;
        -moz-transition: all .3s;
        -webkit-transition: all .3s;
        -o-transition: all .3s; }
      .tags-list li a:hover:after {
        width: 100%; }
	
aside {
  margin-top: 20px;
  margin-bottom: 15px;
  width: 100%; }
  aside .aside-title {
	color: #000;
    font-size: 110%;
    position: relative;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    margin-bottom: 30px; }
	aside .namakategori {
		margin-bottom: -37px;
		padding: 10px;
		color: #fff;
        background-color: rgba(0, 0, 0, 0.2); 
	}
    aside .aside-title .all {
      position: absolute;
      right: 0;
      font-size: 12px;
      font-weight: 700;
      color: #383838;
      top: 5px; }
      aside .aside-title .all i {
        color: #22bbff; /* #F73F52; */
        margin-left: 5px; }
    aside .aside-title:after {
      content: ' ';
      position: absolute;
      bottom: -7px;
      left: 0;
      width: 30px;
      height: 4px;
      background-color: #ff6600; }
  aside .article-mini {
	background-color: #fff;
	padding: 0;
    border-bottom: 1px solid #eee;
	}
	aside .article-mini:last-child,
	aside .article-fw:last-child {
    border-bottom: none;
	}    
	aside .article-mini h1, 
	aside .article-mini h2, 
	aside .article-mini h3, 
	aside .article-mini h4, 
	aside .article-mini h5, 
	aside .article-mini h6 {
      padding-top: auto; 
	}
  aside .newsletter {
    padding: 20px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #989898; }
    aside .newsletter .icon {
      text-align: center;
      margin-bottom: 20px; }
      aside .newsletter .icon i:before {
        font-size: 9em; }
      aside .newsletter .icon.spin h1 {
        margin-top: 0; }
      aside .newsletter .icon.spin i:before {
        animation-name: loading;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear; }
      aside .newsletter .icon.success h1 {
        margin-top: 0;
        color: #1abc9c; }
      aside .newsletter .icon.success i:before {
        color: #1abc9c; }
      aside .newsletter .icon.error h1 {
        margin-top: 0;
        color: #F73F52; }
      aside .newsletter .icon.error i:before {
        color: #F73F52; }
      aside .newsletter .icon h1 {
        margin: 0;
        font-size: 24px;
        margin-top: -20px;
        color: #989898; }
    aside .newsletter p {
      margin-top: 10px; }
 


  aside .line {
    margin: 10px 0;
    margin-bottom: 20px; }
  aside .sponsored {
    padding: 0;
    margin: 0 -5px; }
    aside .sponsored li {
      float: left;
      display: inline-block;
      width: 50%;
      padding: 5px; }
      aside .sponsored li a img {
        width: 100%; }
  aside .ads img {
    width: 100%; }
  aside .ads figcaption {
    font-size: 12px;
    margin-top: 3px;
    color: #989898; }



	
@keyframes loading {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(360deg); } }
.article-fw {
  display: inline-block;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #cc3300;
  }
  .article-fw:first-child {
      padding-top: 0;
  }
  .article-fw figure {
    overflow: hidden;
    width: 100%;
    max-height: 160px;
	margin-bottom: 0;
  }
    .article-fw figure img {
      width: 100%; }
  .article-fw .details h1 {
    margin: 0;
    font-size: 24px;
    line-height: 34px; }
    .article-fw .details h1 a {
      color: #000;
      text-decoration: none; }
      .article-fw .details h1 a:hover {
        /* color: green; /* #F73F52; */
		text-decoration: underline;
		}
  .article-fw .details p {
    line-height: 1.4em; }


.comments .media-left {
  width: 70px;
  height: 70px;
  overflow: hidden; }
.comments .media-body p {
  color: #989898;
  font-size: 14px;
  line-height: 22px; }
.comments .detail {
  display: flex;
  font-size: 14px; }
  .comments .detail time {
    display: inline-block;
    margin: 0 5px; }
  .comments .detail .link {
    display: inline-block;
    margin: 0 5px; }
    .comments .detail .link a {
      color: #F73F52; }
  .comments .detail time {
    color: #989898; }
  .comments .detail .divider {
    height: 4px;
    width: 4px;
    background-color: #ddd;
    margin-top: 8px;
    margin-left: 5px;
    margin-right: 5px; }

.carousel#featured .carousel-control {
  background-color: transparent;
  background-image: none;
  bottom: initial;
  width: auto;
  top: 50%;
  transform: translateY(-50%);
  left: initial;
  right: initial;
  opacity: 0;
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s; }
  .carousel#featured .carousel-control span:before {
    font-size: 50px; }
  .carousel#featured .carousel-control.kiri {
    left: 0;
    right: initial; }
.carousel#featured:hover .carousel-control.kiri {
  left: 20px;
  right: initial; }
.carousel#featured .carousel-control.kanan {
  right: 0;
  left: initial; }
.carousel#featured:hover .carousel-control {
  opacity: 1; }
  .carousel#featured:hover .carousel-control.kanan {
    right: 20px;
    left: initial; }

@media screen and (max-width: 767px) {
  .sidebar, header.primary, .menu, .topbar {
    display: none; }

  footer.footer .block {
    margin-bottom: 30px; }
  footer.footer .line {
    margin: 0;
    margin-bottom: 30px; }

  .divider-top {
    margin-top: 50px; }

  .sidebar {
    position: fixed;
    top: 60px;
    bottom: 10px;
    left: 50%;
    box-shadow: 0 1px 2px #ddd;
    transform: translate(-50%, 0);
    overflow: auto;
    z-index: 1992;
    background-color: #fff;
    padding-top: 20px;
    display: none; }

  .trending-tags {
    margin-bottom: 20px; } }
@media screen and (max-width: 425px) {
  .article-list figure {
    width: 100%;
    max-height: 200px;
	overflow-y: hidden;
    margin-bottom: 10px; }
  .article-list .details {
    margin-left: 0; }
    .article-list .details .detail {
      display: inline-flex;
      display: -webkit-inline-box; }

  .line div {
    font-size: 14px; }

  .menu, header.primary, .topbar {
    display: none; }

  .featured {
    height: 200px; }
    .featured .details h1 {
      font-size: 16px; }
    .featured .details .category a {
      font-size: 12px;
      padding: 3px 6px; }

  .sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: none; } }
	
.bawah {
	background-color: #eee;
	color: #111; 
	padding: 20px 0;
	font-weight: 200;
}
.bawah h4,.bawah h5,.bawah h6{
	color: #333; 
}
	
footer.footer {
	background: #cc3333;
	border-top: none; 
	border-right: none; 
	border-bottom: none; 
	border-left: none; 
 	padding: 5px 0;
	font-weight: 200;
	color: #f5f5f5; 
  }
  footer >.container {
     color: #f5f5f5;
	 opacity: .5;
}
 footer.footer a {
     color: #f5f5f5;
}
.judul-footer {
    font-size: 18px;
	font-weight: bold;
}
  footer.footer .social a {
    color: #fff; }
  footer.footer .line {
    background-color: #292929;
    height: 1px;
    margin: 10px 0; }
  footer.footer .block .block-title {
    font-size: 16px;
    position: relative;
    margin: 0;
    color: #449d44; }
    footer.footer .block .block-title .kanan {
      float: right;
      font-size: 14px; }
      footer.footer .block .block-title .kanan a {
        color: #ddd; }
    footer.footer .block .block-title:after {
      content: ' ';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 25px;
      height: 2px;
      background-color: green; /* #F73F52; */ }
  footer.footer .block .block-body {
    margin-top: 30px; }
    footer.footer .block .block-body.no-margin {
      margin: 0; }
  footer.footer .footer-nav-horizontal {
    padding: 0;
    margin: 0; }
    footer.footer .footer-nav-horizontal li {
      display: inline-block; }
      footer.footer .footer-nav-horizontal li a {
        display: block;
        margin: 0 10px;
        margin-bottom: 10px;
        font-size: 12px;
        text-decoration: none;
        float: left;
        transition: all .5s;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        -o-transition: all .5s; }
        footer.footer .footer-nav-horizontal li a:hover {
          color: #F73F52; }
      footer.footer .footer-nav-horizontal li:first-child a {
        margin-left: 0; }
      footer.footer .footer-nav-horizontal li:not(:last-child):after {
        content: '/';
        float: left;
        line-height: 14px; }
  footer.footer .footer-nav {
    padding: 0;
    margin: 0;
    padding-left: 17px; }
    footer.footer .footer-nav li {
      list-style: square; }
      footer.footer .footer-nav li a {
        padding: 3px;
        display: inline-block;
        font-size: 14px;
        transition: all .3s;
        -moz-transition: all .3s;
        -webkit-transition: all .3s;
        -o-transition: all .3s; }
        footer.footer .footer-nav li a:hover {
          color: #F73F52; }
  footer.footer .foot-logo {
    width: 140px;
    margin-bottom: 20px; }
    footer.footer .foot-logo img {
      width: 100%; }
  footer.footer .brand-description {
    line-height: 24px; }
  footer.footer .newsletter .btn {
    margin-top: 3px;
    border-radius: 3px; }
  footer.footer .newsletter .input-group {
    position: relative;
    display: inline-block;
    width: 100%; }
  footer.footer .newsletter .input-group-addon {
    background-color: transparent;
    border-color: transparent;
    position: absolute;
    left: 2px;
    top: 0;
    z-index: 9;
    height: 40px;
    line-height: 26px; }
    footer.footer .newsletter .input-group-addon i:before {
      transform: scale(1.4); }
  footer.footer .newsletter .form-control {
    padding-left: 40px; }
  footer.footer .article-mini .detail time, footer.footer .article-mini .detail .category a {
    color: #848f9a; }
  footer.footer .tags {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap; }
    footer.footer .tags li {
      display: inline-block; }
      footer.footer .tags li a {
        padding: 7px 12px;
        color: #848f9a;
        border: 1px solid #848f9a;
        margin: 0 5px;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 5px;
        transition: all .3s;
        -moz-transition: all .3s;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        font-size: 14px; }
        footer.footer .tags li a:first-child {
          margin-left: 0; }
        footer.footer .tags li a:hover {
          border-color: #F73F52;
          color: #fff; }
  footer.footer .copyright {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 200;
    text-transform: lowercase; }
    footer.footer .copyright div {
      margin-top: 7px; }
      footer.footer .copyright div i {
        color: #e74c3c; }
  footer.footer .article-mini {
    margin-bottom: 10px; }
    footer.footer .article-mini .inner {
      border-bottom: 0; }
    footer.footer .article-mini h1 {
      font-size: 13px; }
      footer.footer .article-mini h1 a {
        color: #ddd; }
    footer.footer .article-mini .detail .category a {
      color: #848f9a; }
  footer.footer .btn-magz {
    border-color: #fff;
    border-radius: 3px;
    font-size: 14px;
    padding-left: 13px;
    padding-right: 13px; }

	

.boks-komentar {
	background-color: #ddd;
	padding: 20px 15px;
	margin-right: -15px;
	margin-bottom: -15px;
	margin-left: -15px;
}		
#respond {
	background-color: #eee;
	margin-right: -15px;
	margin-bottom: -20px;
	margin-left: -15px;
	padding-top: 5px;
	padding-right: 15px;
	padding-left: 15px;
}

 
.article-list>figure {  /* by munibrofiqi@gmail.com */
	margin-top: 15px;
}
	


.table > thead > tr > th {
  vertical-align: bottom;
  background-color: #444;
  color: #f1f1f1;
  font-size: 13px;
}
.table > thead > tr.sub-head > th {
	background-color: #f1f1f1;
	font-size: 11px;
	color: #444;
	border-bottom: 1px solid #ddd;
}

/* RESPONSIVE IMAGE GALLERY */
/* https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive */

/*

div.gallery {
 
	border: none;
	border-radius: 3px;
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
}

div.gallery:hover {
    border: 1px solid #005000;
}

div.gallery img {
    position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
    
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    
	div.gallery {
	width: 200px;
	max-height: 160px;
	overflow: hidden;
	}
	div.gallery img {
	width: 200px;
	max-height: 160;
	}
}



.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
*/


/* Peta Lokasi Google Maps */
#map { /* di footer */
    height: 270px;
    width: 100%;
}
	   
	   
/* Video Responsive CSS */

.video-responsive-embed {

position: relative; 
height: 0; 
overflow: hidden; 
padding-top: 0; 
padding-left: 0; 
padding-right: 0;

}

.video-responsive-embed iframe, 
.video-responsive-embed object, 
.video-responsive-embed embed {

position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
border: 0;

}

.video-responsive-embed, 
.video-responsive-embed.video-responsive-embed-youtube, 
.video-responsive-embed.video-responsive-embed-wistia, 
.video-responsive-embed.video-responsive-embed-vimeo {

padding-bottom: 56.25%;

}

/* RESPONSIVE IMAGE GALLERY */
/* https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive */

div.galeriku {
 
	border: none;
	border-radius: 3px;
	position: relative;
	width: 100%;
	height: 100px;
	overflow: hidden;
}

div.galeriku:hover {
    border: 1px solid #005000;
}

div.galeriku img {
    position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
    
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    
	div.galeriku {
	width: 200px;
	max-height: 160px;
	overflow: hidden;
	}
	div.galeriku img {
	width: 200px;
	max-height: 160;
	}
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* /RESPONSIVE IMAGE GALLERY */


/* RESPONSIVE IMAGE GRID
https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp
*/
.baris {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.kolom {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.kolom img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .kolom {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 320px) {
  .kolom {
    flex: 100%;
    max-width: 100%;
  }
}

/*	*************************************
	MEDIA SOSIAL
	_____________________________________
*/	
/*
.bagikan {
	border-top: 1px solid #f1f1f1;
	text-align: center;
	padding-top: 15px;
	margin-bottom: 15px;
}
*/
.social {
  padding: 0;
  margin: 0; 
  }
  .social li {
    display: inline-block;
	}
    .social li a {		
      display: block;
	  border-radius: 0;
      text-align: center;
      width: 27px;
      height: 27px;
      line-height: 27px;
      margin: 2px; 
      /* margin-bottom: -15px; */
      position: relative;
      transition: all .5s;
      -moz-transition: all .5s;
      -webkit-transition: all .5s;
      -o-transition: all .5s; }
      .social li a svg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0; }
        .social li a svg rect {
          width: inherit;
          height: inherit;
          fill: transparent;
          stroke: transparent;
          stroke-dasharray: 0;
          stroke-width: 3;
          transition: all 1.5s;
          -moz-transition: all 1.5s;
          -webkit-transition: all 1.5s;
          -o-transition: all 1.5s; }
      .social li a i:before {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3); }
      .social li a:first-child {
        margin-left: 0; }
      .social li a:hover {
        opacity: .8; }

.social-2 {
  padding: 0;
  margin: 0; 
  }
  .social-2 li {
    display: inline-block;
	}
    .social-2 li a {		
      display: block;
	  border-radius: 0;
      text-align: center;
      width: 25px;
      height: 25px;
      line-height: 25px;
      margin: 0 3px;
      /* margin-bottom: -15px; */
      position: relative;
      transition: all .5s;
      -moz-transition: all .5s;
      -webkit-transition: all .5s;
      -o-transition: all .5s; }
      .social-2 li a svg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0; }
        .social-2 li a svg rect {
          width: inherit;
          height: inherit;
          fill: transparent;
          stroke: transparent;
          stroke-dasharray: 0;
          stroke-width: 3;
          transition: all 1.5s;
          -moz-transition: all 1.5s;
          -webkit-transition: all 1.5s;
          -o-transition: all 1.5s; }
      .social-2 li a i:before {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3); }
      .social-2 li a:first-child {
        margin-left: 0; }
      .social-2 li a:hover {
        opacity: .8; }
		
a.blogger {
	background-color: #d58512;
    color: #fff;
  }
    a.facebook {
    background-color: #3b5998;
    color: #fff; }
  a.twitter {
    background-color: #4099FF;
    color: #fff; }
  a.youtube {
    background-color: #C4302B;
    color: #fff; }
  a.googleplus {
    background-color: #DE5245;
    color: #fff; }
  a.instagram {
    background-color: #885343;
    color: #fff; }
  a.tumblr {
    background-color: #36465D;
    color: #fff; }
  a.dribbble {
    background-color: #E14C86;
    color: #fff; }
  a.linkedin {
    background-color: #007BB6;
    color: #fff; }
  a.skype {
    background-color: #00AFF0;
    color: #fff; }
  a.rss {
    background-color: #ee802f;
    color: #fff; }
  a.github {
    background-color: #000;
    color: #fff; }
  a.whatsapp {
    background-color: #25D366;
    color: #fff; }
  a.snapchat {
    background-color: #FFFC01;
    color: #000; }
  a.foursquare {
    background-color: #EF4B78;
    color: #fff; }
  a.pinterest {
    background-color: #B82B38;
    color: #fff; }
  a.wordpress {
    background-color: #21759A;
    color: #fff; }
  a.reddit {
    background-color: #1288DF;
    color: #fff; }
  a.hackernews {
    background-color: #FF6600;
    color: #fff; }
  a.designernews {
    background-color: #3275D6;
    color: #fff; }
  a.yahoo {
    background-color: #420297;
    color: #fff; }
  a.buffer {
    background-color: #000000;
    color: #fff; }
  a.vimeo {
    background-color: #1AB7EA;
    color: #fff; }
  a.twitch {
    background-color: #6441A4;
    color: #fff; }