/* ====GLOBAL STYLE==== */

	body {
		background-color: #E6F4FF;
	}

   #container {

      width: 1040px;

      margin: 0 auto;

      padding: 0;

    }

	#container {

		position: relative;

		top: 45px;

	}

    .clear {

      clear: both;

    }

	main {

		padding-bottom: 20px;

	}

	em {

		font-style: italic;

	}

	strong {

		font-weight: bold;

	}

	a {

		color: blue;

	}

	#edit-artikel a {

   	text-decoration: none;

   	color: blue;

   }

   #edit-artikel a:hover {

   	color: #EB3F1A;

   	text-decoration: underline;

   }

	

	/* =====BOX LOGIN=====*/

	.box-nav-login {
		margin: 0;
		width: 100%;
		position: fixed;
		height: 46px;
		background-color: white;
		z-index: 10;
		box-shadow: 3px 3px 6px -3px #D1BFB3, -3px -3px 6px -3px #D1BFB3;
	}
	.nav-login {
		width: 1040px;
		margin: 0 auto;
	}
	.box-login {
		padding: 0 15px;
		height: 25px;
		margin: 5px;
		float: right;
		border-radius: 25px;
		text-align: center;
		position: relative;
		width: 100%;
	}

	.login {
		height: 30px;
		margin: 2px 0;
		padding: 2px 0;
		float: right;
		background-color: #B5ECF7;
		border-radius: 20px;
		text-align: center;
	}

	.masuk, .daftar, .email-log {
		text-decoration: none;
		background-color: #0288B8;
		color: white;
		font: bold 14px/15px arial, calibri, sans-serif;
		border-radius: 20px;
		margin: 4px 2.5px;
		padding:  7px 15px;
		float: right;
	}

	.daftar {
		background-color: #0A0962;
	}

	.email-log {
	    height: 30px;
		background-color: white;
		padding: 0;
	}

	.email-log img {
	    height: 90%;
	    border-radius: 7px;
	}

	.login a {
		font: bold 14px/30px arial, calibri, san-serif;
		color: #777EA8;
	}
	.nama-user {
		font: bold 14px/20px arial, calibri, san-serif;
		color: #777EA8;
		float: right;
		margin-right: 5px;
	}
	.logout {
		float: left;
		position: absolute;
		top: 20px;
		margin-left: 35px;
		margin-top: 1px;
	}
	.img-profile {
		width: 30px !important;
		height: 30px;
		float: left;
		margin: 0 2px 5px 0px;
		border: 1px solid white;
		border-radius: 15px;
		background-color: #ADC3D9;
	}

	.logout a {
		font: normal 12px calibri, arial, sans-serif;
		color: #A1A690;
	}

	.tambah-artikel, .home-user {
		padding: 2px 20px;
		height: 30px;
		margin: 0 5px;
		float: right;
		background-color: #B5ECF7;
		border-radius: 20px;
		text-align: center;
		font: bold 14px/30px arial, calibri, san-serif;
		color: #777EA8;
		text-decoration: none;
	}

	.nav-user, .nav-user-close {
		position: absolute;
		top: 1px;
		display: none;
		float: left;
	}

	#tombol-nav-user, #tombol-close-nav-user{
		width: 30px;
		height: 30px;
	}
	#box-tombol-close {
		display: none;
	}

	.cari-artikel {
		padding: 0 10px 0 2px;
		height: 35px;
		float: right;
		background-color: #B5ECF7;
		border-radius: 20px;
		text-align: center;
		font: bold 14px/30px arial, calibri, san-serif;
		color: #777EA8;
		text-decoration: none;
	}
	#cari-artikel {
		border: solid 0px white;
		border-radius: 15px;
		width: 160px;
		height: 26px;
		padding: 0 10px;
		margin: 3px;
		float: left;
		background-color: #B5ECF7;
		font: normal 14px/30px arial, calibri, san-serif;
		color: #6B6867;
	}
	#search {
		width: 32px;
		height: 28px;
		margin: 5px 2px;
		padding: 0 5px;
		float: left;
		border: solid 0px #B5ECF7;
	}
	

    /* =====HEADER===== */

	.box-header {

		height: 120px;

		padding: 0;

		border:0;

		margin: 0 auto;

		background-color: ;

		background-image: radial-gradient(farthest-side circle at top left, #b5ecf7, white 15%, #f5f6f7);

		position: relative;

		top: 45px;

	}

    .header {

		width: 1040px;

		height: 120px;

		padding: 0;

		border:0;

		margin: 0 auto;

		position: relative;

	}

	div.logo {

		width: 45%;

		height: 120px;

		margin: 0;

		padding: 0;

		float: left;

	}

	.logo img {

		    width: 165px;

		    height: 65px;

		    margin-top: 25px;

		    margin-left: 20px;

		    float: left;

		    padding: 0;

	}

	.subname-site {

		float: left;

		margin-left: 70px;

		margin-top: -10px;

		padding: 0;

		width: 75%;

		font: bold 20px arial, calibri, sans-serif;

		text-decoration: none;

		color: #2DB8FA;

	}

	

	/********************************************

	 ********************************************

	 NAVIGATION MENU RESPONSIVE PERLU DIPERBAIKI

	*********************************************

	*********************************************/

.navigasi {
    position: relative;
	top: 45px;
    display: block;
    margin: 0;
	padding: 0;
    width: 100%;
	height: 40px;
    background-color: #020210d9;
    list-style-type: none;
	font: 700 18px arial, calibri, sans-serif;    
}
.navigasi > .nav-menu {
    width: 1040px;
    position: relative;
    margin: 0 auto;
    list-style: none;
    background-color: #020210d9;
    color: white;
    transition: all .3s ease;
}
.nav-menu > li {
    display: inline-block;
}
.nav-menu > li:hover {
    background-color: white;
    color: blue;
}
.nav-menu > li > a {
    display: block;
    margin: 0 5px;
    padding: 0 5px;
    line-height: 40px;
    text-decoration: none;
    color: inherit;
}
.btn-responsive {
    position: absolute;
    display: none;
    top: 5px;right: 5px;
    margin: 0;padding: 0;
    width: 50px;height: 50px;
    cursor: pointer;
    z-index: 100;
}
.btn-responsive > .bar {
    position: absolute;
    top: 5px;left: 10px;
    width: 30px;height: 2px;
    background: #fff;
}
.btn-responsive > .bar:nth-child(1) {
    top: 15px;
}
.btn-responsive > .bar:nth-child(2) {
    top: 25px;
}
li.dropdown {
	display: inline-block;
}
.dropdown:hover .submenu {
	display: block;
}
.submenu a:hover {
	color: blue;
}
.submenu {
	position: absolute;
	padding: 5px 20px 10px;
	display: none;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	color: blue;
	background-color: white;
}
.submenu a {
	color: blue;
   text-decoration: none;
}
.submenu li {
	margin: 10px 0;
}
.submenu a:hover {
	color: #EB3F1A;
}

@media only screen and (max-width: 768px) {
    .nav-menu {
        top: 40px;
        max-height: 0;
        overflow: hidden;
    }
    .navigasi > .nav-menu {
    background: #121211;
	}
    .nav-menu > li {
        display: block;
    }
    .btn-responsive {
        display: block;
    }
    #btn-responsive:checked ~ .nav-menu {
        max-height: 600px;
        overflow: visible;
		z-index: 10;
		width: 100%;
    }

}	

	/*--- IKLAN DISINI ---*/

.iklan-header {
		width: 500px;
		height: 100px;
		margin-top: 5px;
		margin-right: 0;
		padding: 0;
		position: absolute;
		right: 0px;
	}

	/*--- IKLAN DISINI ---
	.iklan-sisi-kiri, .iklan-sisi-kanan {
		font: bold 30px/1.2em calibri, sans-serif;
		text-align: center;
		width: 130px;
		height: 550px;
		margin: 10px 0;
		padding: 5px;
		background-color: #698182;
	}

	END IKLAN SIDEBAR----*/	
	.box-iklan {
		position: relative;
	}
	.iklan-sisi-kanan {
		float: right;
	}
	.iklan-sisi-kiri {
		float: left;
	}

  /* =====CONTENT UTAMA===== */
  .content-utama {
	  width: 680px;
	  font-family: calibri, sans-serif;
	  margin-top: 10px;
	  float: left;
  }

  /* ===######==ARTIKEL BACA JUGA==######=== */
  .baca-juga {
		width: 680px;
		margin-top: 10px;
		background-color: white;
		float: left;
  }

  /*========MEDIA QUERY SMARTPHONE======*/



  .next-baca {

		width: 157.5px;

		margin: 5px;

		padding-bottom: 50px;

		float: left;

		position: relative;

		overflow: hidden;

  }

  .next-baca img {

		width: 100%;

		height: 120px;

		float: left;

  }

  .next-baca img {

	-webkit-transition: 0.4s ease;

	-moz-transition: 0.4s ease;

	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .next-baca img:hover {

	-webkit-transform: scale(1.12);

	-moz-transform: scale(1.12);

	-o-transform: scale(1.12);

	transform: scale(1.12);

  }

  .next-baca h2 {

		font: bold 14px arial, calibri, sans-serif;

		text-align: center;

		width: 137.5px;

		height: 50px;

		position: absolute;

		left: 10px;

		top: 100px;

		color: black;

		background-color: white;

		overflow: hidden;

		box-shadow: 3px 3px 6px -3px #D1BFB3, -3px -3px 6px -3px #D1BFB3;

  }

  .next-baca h2:hover {

		color: #EB3F1A;

  }

	

    /* =====CONTENT ===== */

	.box-judul {

	   border-bottom: 3px solid #020210d9;

	   margin: 5px 0 20px 5px;

   }

   .box-judul h1 {

	   font: bold 18px arial, calibri, sans-serif;

	   width: 200px;

	   color: white;

	   height: 15px;

	   line-height: 15px;

	   text-align: left;

	   background-color: #020210d9;

	   padding: 10px 10px 10px 20px;

	   border: 1px solid #020210d9;

	   border-top-right-radius: 20px;

	   border-bottom-left-radius: 20px;

   }

   

  /* ===######==ARTIKEL PILIHAN==######=== */

  

   .content {

	  width: 680px;

	  margin: 10px 0;

	  float: left;

  }

  .content-pilihan {

	  width: 430px;

	  float: right;

	  background-color: #020210d9;

  }  

  .artikel-pilihan {

	  width: 430px;

	  border-top: 1px solid white;

	  float: left;

  }

  .image-pilihan {

	  width: 150px;

	  height: 130px;

	  margin: 0;

	  padding: 0;

	  float: left;

  }

  .image-pilihan img {

	  width: 130px;

	  height: 110px;

	  padding: 10px;

	  float: left;

	  border-radius: 20px;

  }

  .image-pilihan img {

	-webkit-transition: 0.4s ease;

	-moz-transition: 0.4s ease;

	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .image-pilihan img:hover {

	-webkit-transform: scale(1.12);

	-moz-transform: scale(1.12);

	-o-transform: scale(1.12);

	transform: scale(1.12);

  }

  .judul-artikel {

	  margin-top: 10px;

	  font: normal 13px arial, calibri, sans-serif;

	  color: white;

  }

  .judul-artikel h1 {

	  margin: 5px 0 0 10px;

	  padding-right: 10px;

	  font: bold 17px arial, calibri, sans-serif;

	  color: white;

   }

   .judul-artikel h1:hover {

	  margin-top: 5px;

	  font-size: 18px;

	  color: #EB3F1A;

   }

   .selengkapnya {

	   font: normal 14px calibri, arial, sans-serif;

	   width: 110px;

	   margin-top: 10px;

	   float: left;

	   border-top: 1px solid white;

   }

    .selengkapnya p:hover {

	   color: #EB3F1A;

	   width: 140px;

	   font-size: 15px;

   }

   

  

  /* =====CONTENT VIDEO===== */

  

   .video-rekomendasi {

	  width: 240px;

	  float: left;

	  background-color: white;

  }

  #judul-video-rekomendasi {

	width: 170px;

	font-size: 17px;

  }

  div.video-utama {

	  width: 240px;

	  float: left;

	  border-bottom: 1px solid #E0D7CA;

  }

  .video-utama figure {

	width: 220px;

	height: 150px;

	margin: 0 10px 0 10px;

	padding: 0;

	overflow: hidden;

  }

  .video-utama img {

	  width: 220px;

	  height: 150px;

	  margin: 0 10px 0 10px;

	  float: left;

	  border-radius: 10px;

  }

  .video-utama img {

	-webkit-transition: 0.4s ease;

	-moz-transition: 0.4s ease;

	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .video-utama img:hover {

	-webkit-transform: scale(1.12);

	-moz-transform: scale(1.12);

	-o-transform: scale(1.12);

	transform: scale(1.12);

  }

  .video-utama h1 {

	  font: bold 18px calibri, arial, sans-serif;

	  padding: 0 10px 10px 10px;

	  text-align: center;

	  color: black;

  }

  .video-utama h1:hover {

	  padding: 0 10px 10px 10px;

	  text-align: center;

	  font-size: 18px;

	  color: blue;

  }

  .content-video {

	width: 240px;

	float: left;

  }

  .video-pilihan {

	  width: 220px;

	  padding: 10px;

	  float: left;

	  border-bottom: 1px solid #E0D7CA;

	  overflow: hidden;

  }

  .video-pilihan > figure > img {

	  width: 80px;

	  height: 70px;

	  float: left;

  }

  .video-pilihan img {

	-webkit-transition: 0.4s ease;

	-moz-transition: 0.4s ease;

	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .video-pilihan img:hover {

	-webkit-transform: scale(1.12);

	-moz-transform: scale(1.12);

	-o-transform: scale(1.12);

	transform: scale(1.12);

  }

  .video-pilihan > header > h1 {

	  font: bolder 13px arial, calibri, sans-serif;

	  width: 130px;

	  height: 80px;

	  margin-left: 10px;

	  color: black;

	  float: left;

	  overflow: hidden;

  }

  .video-pilihan h1:hover {

	  color: #EB3F1A;

	  font-size: 15px;

  }
  
   
   
   /* =====CONTENT SIDEBAR===== */
   
   .sidebar {
	  width: 350px;
	  margin-top: 10px;
	  padding: 0;
	  float:right;
   }

   /* =====HOT NEWS DISNI===== */
   h1.judul-hot-news {
		color: Black;
		background-color: white;
   }
   section.artikel-hot-news {
	  width: 350px;
	  margin: 0 0 10px;
	  float:right;
	  background-color: #020210d9;
   }
   .judul-hot-news h2 {
	   font: bold 22px calibri, arial, sans-serif;
	   margin: 0 20px 20px 10px;
	   color: white;
   }
   .judul-hot-news h2:hover {
	   color: #EB3F1A;
   }
    .artikel-hot-news img {
	  width: 150px;
	  height: 130px;
	  margin: 0 0 20px 20px;
	  float: left;
	  border-radius: 20px;
   }
   .artikel-hot-news img {
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .artikel-hot-news img:hover {

	-webkit-transform: scale(1.12);

	-moz-transform: scale(1.12);

	-o-transform: scale(1.12);

	transform: scale(1.12);

  }

   .artikel-hot-news p {

	   width: 160px;

	   height: 130px;

	   font: normal 18px calibri, arial, sans-serif;

	   margin: 0 0px 20px 20px;

	   float: right;

	   color: white;

	   overflow: hidden;

   }

   

   /* =====ARTIKEL POPULER DISINI===== */

   .artikel-populer {
	  width: 350px;
	  padding: 0 0 20px 0;
	  float: left;
	  background-color: white;
	  padding-top: 25px;
   }
   .artikel-populer p {

	  font: bold 24px arial, calibri, sans-serif;

	  color: green;

	  width: 40px;

	  height: 44px;

	  line-height: 40px;

	  padding: 6px;

	  margin: 6px 5px 0 0;	  

	  box-shadow: 3px 3px 6px -3px #D1BFB3, -3px -3px 6px -3px #D1BFB3;

	  background-color: #DCFBF5;

	  border: 1px solid white;

	  border-radius: 20px;

	  overflow: hidden;

	  float: left;

   }

   .artikel-populer p:hover {

	  width: 47px;

	  margin: 5px 0;

	  color: white;

	  background-color: green;

   }

   .artikel-populer h2 {

	  font: bold 14px arial, calibri, sans-serif;

	  color: black;

	  width: 270px;

	  height: 40px;

	  padding: 6px;

	  margin: 5px 0px;

	  box-shadow: 3px 3px 6px -3px #D1BFB3, -3px -3px 6px -3px #D1BFB3;

	  border: 1px solid white;

	  border-radius: 20px;

	  overflow: hidden;

	  float: right;

   }

    .artikel-populer h2:hover {

	  background-color: green;

	  color: white;

	  width: 275px;

   }

   

   /* =====ARTIKEL UPDATE DISINI===== */

   

   section.artikel-update {

	width: 350px;

	margin-top: 10px;

	background-color: white;

	float: left;

   }

   article.artikel-update {

		width: 350px;

		float: left;

   }

   .artikel-update img {

		width: 90px;

		height: 80px;

		margin: 10px;

		float: left;

   }

   .artikel-update img {

	-webkit-transition: 0.4s ease;

	-moz-transition: 0.4s ease;

	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .artikel-update img:hover {

	-webkit-transform: scale(1.12);

	-moz-transform: scale(1.12);

	-o-transform: scale(1.12);

	transform: scale(1.12);

  }

   article.artikel-update h1 {

		width: 220px;

		font: bold 16px arial, calibri, sans-serif;

		color: black;

		margin: 10px 10px 0 0;

		float: left;

   }

   article.artikel-update h1:hover {

		color: #EB3F1A;

   }

    



	  

      /* =====FOOTER DISINI===== */



   	.footer {

		width: 1040px;

      margin: 20px auto;

      overflow: hidden;

	  background-image: radial-gradient(farthest-side circle at top left, #131314 15%, blue, #31DEE6);

	 }

	 .footer div {

		width: 1040px;

		margin: 0;

		border-bottom: 1px solid white;

		padding: 10px;

		float: right;

	 }

	 .foot-logo {

		 width: 80px;

		 height: 40px;

		 padding: 0;

		 margin-left: 30px;

	 }

	 .foot-medsos {

		 width: 40px;

		 height: 40px;

		 float: right;

	 }

    .copyright {

      font: normal 18px/20px calibri, arial, sans-serif;

      float: left;

	  margin-left: 20px;

	  margin-bottom: 10px;

	  color: white;

     }

    .footermenu ul, .footermenu li {

      font: normal 18px/18px calibri, arial, sans-serif;

      margin: 0;

      list-style: none;

      float: right;

     }

    .footermenu li a {

      text-decoration: none;

      display: inline-block;

      padding: 0 5px;

      color: white;

    }

    .footermenu li a:hover {

      text-decoration: underline;

	}

	

	

/*******************************************

 *******************************************

 ***********DISINI CSS RESPONSIVE***********

 ******************************************/





	/*========MEDIA QUERY SMARTPHONE======*/

@media only screen and (max-width: 480px) {

    

	body {

		width: 100%;

		}

	#container {

        width: 100%;

    }

    .iklan > img {

        display: none;

    }

    .logo > img {

        width: 60%;

        height: 40%;

    }

    div.logo {

    	width: 100%;

    }

    .subname-site {

		width: 90%;

		margin: 0 20px;

		text-align: center;

		font-size: 18px;

	}

	

	/* =====BOX LOGIN=====*/

	.box-nav-login {

		width: 100%;

		padding: 0;

	}

	.nav-login {

		width: 100%;

		padding: 0;

	}

	.box-login {

		padding: 0;

		margin: 0;

	}

	.login {





	}

	.masuk, .daftar {

		text-decoration: none;

		background-color: #0288B8;

		color: white;

		font: bold 12px/15px arial, calibri, sans-serif;

		border-radius: 20px;

		margin: 7px 2.5px;

		padding:  7px 5px;

		float: right;

	}

	.daftar {

		

		background-color: #0A0962;

	}



	.nama-user {

		padding: 0;

		margin: 0;

		width: 100px;

		height: 18px;

		overflow: hidden;

		

	}

	.home-user {

		margin-top: 3px;

		width: 50px;

		padding: 2px 0;

	}

	.nav-user {

		top: 7px;

		left: 7px;

		display: block;

	}

	.logout {

		margin: 0;

		margin-left: 35px;

		margin-top: -3px;

		padding: 0;

	}

	.img-profile{

		display: block;

		float: left;

		margin-top: 0;

	}

	#box-nav-post {

		position: absolute;

		display: none;

		top: 30px;

		width: 45%;

		z-index: 2;

		left: 15px;

		border-radius: 25px;

		border-top: 15px solid transparent;

		border-left: 15px solid black;

		border-bottom: 10px solid black;

		border-right: 10px solid black;

		transition: block 5s ease-in 100ms;

		-webkit-transition: block 5s ease-in 100ms;

		-o-transition: block 5s ease-in 100ms;

		-moz-transition: block 5s ease-in 100ms;

	}

	.tambah-artikel, .nav-user-close {

		width: 90%;

		margin: 0;

		padding: 0;

		border-radius: 0;

		background-color: black;

		border: 1px solid black;

		color: white;

		text-align: left;

		padding-left: 20px;

	}

	.nav-user-close {

		display: block;

		background-color: transparent;

	}

	#box-tombol-close {

		display: block;

		position: absolute;

		left: 78%;

		top: -7px;

		border: none;

		background-color: transparent;

	}

	#tombol-close-nav-user{

		display: block;

	}

	.cari-artikel {

		padding: 1px 1px 0 2px;

		margin-top: 3px;

		position: absolute;

		left: 45px;

		z-index: 1;

	}

	#cari-artikel {

		width: 70px;

		margin-right: 0;



	}

	#search {

		width: 20px;

		height: 20px;

		color: #777EA8;

		font: 700 16px/10px arial, calibri, san-serif;

		padding: 0 2px;

		border: solid 1px none;

		border-radius: 15px 15px;

		margin-left: 0;

		background-color: none;

	}

    

    /* =====CONTENT UTAMA===== */

    .content-utama {

	  width: 100%;

    }

    .header {

      width: 100%;

    }

  .iklan-header {

  	display: none;

  }



/* ===######==ARTIKEL BACA JUGA==######=== */

  .baca-juga {

      width: 100%;

		padding-bottom: 20px;

		margin-top: 20px;

  }

  .baca-juga > div {

		margin: 5px;

		float: left;

  }

  .next-baca {

		width: 47%;

  }

  .next-baca img {

		width: 100%;

		height: 120px;

  }

  .next-baca h2 {

		width: 87%;

		padding: 2px 3px;

  }

    /* =====CONTENT ===== */

	.box-judul {

	   border-bottom: 3px solid #020210d9;

	   margin: 5px 0 20px 5px;

   }

   .box-judul h1 {

	   font: bold 18px arial, calibri, sans-serif;

	   width: 200px;

	   color: white;

	   height: 15px;

	   line-height: 15px;

	   text-align: left;

	   padding: 10px 10px 10px 20px;

	   border: 1px solid #020210d9;

	   border-top-right-radius: 20px;

	   border-bottom-left-radius: 20px;

   }

   

  /* ===######==ARTIKEL PILIHAN==######=== */

  

   .content {

	  width: 100%;

  }

  .content-pilihan {

	  width: 100%;

  }  

  .artikel-pilihan {

	  width: 100%;

  }

  

  /* =====CONTENT VIDEO===== */

  

   .video-rekomendasi {

	  width: 100%;

  }

  #judul-video-rekomendasi {

	width: 170px;

  }

  div.video-utama {

	  width: 100%;

  }

  .video-utama figure {

	width: 95%;

  }

  .video-utama img {

	  width: 95%;

	  height: 100%;

  }

  .content-video {

	width: 94%;
  }

  .video-pilihan {
	  width: 100%;
  }
  .video-pilihan > figure > img {
	  width: 120px;
	  height: 90px;
  }
  .video-pilihan > header > h1 {
	  width: 200px;
  }

  

   

   /* ====== CONTENT HIGHLIGHT =====*/

   

   section.highlight {
	   width: 94.5%;
	   margin: 0 auto;
	   background-color: #E8F3F8;
	   float: left;
   }
   .highlight-slider {
	  height: 210px;
	  width: 100%;
      height: 210px;
      margin-bottom: 10px;
	  overflow-x: scroll;
   }
   article.highlight {
	   width: 45%;
	   height: 210px;
	   margin: 2% 0 2% 2%;
	   float: left;
	   background-color: white;
   }
   article.highlight > a > p {
		font: bold 20px calibri, arial, sans-serif;
		color: green;
		float: left;
		margin: 5px 10px 0;
   }
   .highlight > header {
		width: 100%;
		float: left;
   }
   .highlight > header > h1{
      width: 100%;
		font: bold 20px arial, calibri, sans-serif;
		margin: 10px 20px 0px;
		float: left;
   }
   .highlight img {
	   width: 100%;
	   height: 110px;
	   margin: 10px 0;
   }
   .highlight h2 {
	   width: 96%;
	   height: 55px;
	   font-size: 16px;
	   text-align: center;
	   color: black;
	   overflow: hidden;
   }
   .highlight h2:hover {
	   width: 96%;
	   height: 55px;
      margin-bottom: 5px;
	   font-size: 16px;
	   text-align: center;
	   color: #EB3F1A;
   }

   

   /* =====CONTENT SIDEBAR===== */

   .sidebar {

	  width: 100%;

	  float:left;

   }

   h1.judul-hot-news {

		color: black;

		background-color: white;

   }

   

     /* =====HOT NEWS DISNI===== */

  

   section.artikel-hot-news {

	  width: 100%;

	  margin: 0;

   }

   

   /* =====ARTIKEL POPULER DISINI===== */

   .artikel-populer {

	  width: 100%;

   }

      

   /* =====ARTIKEL UPDATE DISINI===== */

   

   section.artikel-update {

	width: 100%;

   }

   article.artikel-update {

		width: 100%;

   }

   

      /* =====FOOTER DISINI===== */



   	.footer {

        width: 100%;

        font: normal 12px/12px calibri, arial, sans-serif;

	 }

	 .footer div {

		width: 100%;

	 }

}