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

	body {

		background-color: #CAC0A7;

	}

  

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

  .content-utama {
	  font-family: calibri, sans-serif;
	  margin-top: 10px;
	  margin-right: 10px;
	  padding: 0;
	  float: left;
  }
  .content-video {
	width: 1040px;
	float: left;
	position: relative;
	margin-bottom: 20px;
	background-color: #E2E3DE;
  }

  .play-video {
	width: 700px;
	float: left;
	background-color: black;
	border-radius: 20px;
	margin-bottom: 10px;
  }

  .play-video iframe {
	margin: 10px;
	box-shadow: 3px 3px 6px -3px black, -3px -3px 6px -3px black;
	border-radius: 20px;
  }

  .play-list {
	width: 330px;
	height: 407px;
	float: right;
	background-color: #E2E3DE;
	border: solid 1px #B5AE9C;
	border-radius: 20px;
  }

  .play-list > h1 {

	font: bold 20px arial, calibri, san-serif;
	width: 310px;
	padding: 10px;
	float: left;
	background-color: #CCCBC4;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;

  }

  .play-list > p {
	font: normal 18px arial, calibri, sans-serif;
	width: 310px;
	padding: 0 10px 10px;
	float: left;
	background-color: #CCCBC4;

  }

  .play-list > section {	
	height: 330px;
	overflow-y: scroll;
	float: left;
	background-color: #E2E3DE;
  }

  .play-list > section > a > div {
	width: 310px;
	height: 90px;
	float: left;

  }

  .play-list h2 {

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

	width: 170px;

	height: 80px;

	color: black;

	margin-top: 10px;

	float: left;

	overflow: hidden;

  }

  .play-list img {

	width: 110px;

	height: 80px;

	margin: 10px;

	float: left;

  }

  .play-list img {

	-webkit-transition: 0.4s ease;

	-moz-transition: 0.4s ease;

	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .play-list img:hover {

	-webkit-transform: scale(1.1);

	-moz-transform: scale(1.1);

	-o-transform: scale(1.1);

	transform: scale(1.1);

  }



   /* =====DESKRIPSI VIDEO===== */

  .box-deskripsi {

  	width: 100%;

  	background-color: white;

  	position: relative;

  	float: left;

  	margin: 0;

  }

  .deskripsi-video {

	width: 680px;

	float: left;

	margin: 0;

	position: relative;

  }

  .deskripsi-video > div > h1 {

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

	float: left;

	margin: 10px;

	width: 650px;

  }

  .bagikan-artikel {

	margin: 5px 10px 10px;

	width: 640px;

	float: left;

	border-bottom: 1px solid #CCCBC4;

  }

  .bagikan-artikel p {

	font: bold 22px calibri;

	letter-spacing: 0.1px;

	float: left;

	line-height: 30px;

	margin-right: 20px;

  }

  .share_medsos {

	width: 30px;

	height: 30px;

	padding: 2px;

	float: left;

  }

  .teks-deskripsi {

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

	width: 640px;

	text-align: justify;

	margin: 5px 10px 5px;

	float: left;

  }

  .more {

	margin: 5px 10px;

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

	float: left;

	color: black;

	text-decoration: none;

	border-top: 1px solid black;

   }

   .more:hover {

	color: #EB3F1A;

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

	border-top: 2px solid #EB3F1A;

   }

  .baca-lainnya {

	width: 600px;

	margin: 10px 20px;

	float: left;

	border: 1px solid #CCCBC4;

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

  }

  .baca-lainnya > h1 {

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

	margin: 10px;

	color: blue;

  }

  .kolom-baca-lainnya > h2 {

	font: 600 16px calibri, arial, tahoma, sans-serif;

	width: 160px;

	margin: 0px 10px 10px;

	padding: 5px;

	border-right:  1px solid #D1BFB3;

	float: left;

  }

  .kolom-baca-lainnya a {

	color: black;

	font-size: 18px;

	text-decoration: none;

  }

  .kolom-baca-lainnya a:hover {

	color: #EB3F1A;

  }

  

  /*======SIDEBAR VIDEO PILIHAN=====*/

  

  .video-pilihan-sidebar {

  	float: left;

  	margin: 0;

  	padding: 0;

  	width: 350px;

  }

  .video-sidebar {

	position: relative;

	right: 0;

	width: 360px;

	margin: 0;

	float: right;

  }

  .list-video-sidebar {

	width: 100%;

	height: 450px;

	float: left;

  }

  .list-video-sidebar div {

  	width: 100%;

  	float: left;

  	margin: 0;

  }

  .video-sidebar img {

	width: 140px;

	height: 90px;

	margin: 10px;

	float: left;

  }

  .video-sidebar img {

	-webkit-transition: 0.4s ease;

	-moz-transition: 0.4s ease;

	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .video-sidebar img:hover {

	-webkit-transform: scale(1.12);

	-moz-transform: scale(1.12);

	-o-transform: scale(1.12);

	transform: scale(1.12);

  }

  .video-sidebar h2 {

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

	float: left;

	margin: 10px 5px;

	width: 185px;

	color: black;

  }



   /* =====BACA JUGA & ARTIKEL PILIHAN===== */

  

  .baca-juga {

		width: 100%;

		margin-top: 0;

		position: relative;

		padding: 0;

  }

  .baca-juga > .box-judul {

	width: 680px;

  }

  .baca-juga > article {

		width: 680px;

		margin: 5px;

		float: left;

  }

  .video-pilihan-sidebar {

  	position: absolute;

  	right: 0;

  	top: 0;

  }

   .artikel-pilihan-content a {

   	text-decoration: none;

   }

	

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

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

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

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





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

	

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

  .content-utama {

  	margin-right: 0;

  }

  .content-video {

	width: 100%;

  }

  .play-video {

	width: 100%;

  }

  .play-video iframe {

	width: 96%;

	height: 235px;

  }

  .play-list {

	width: 100%;

	border: none;

  }

  .play-list > h1 {

	width: 94.5%;

  }

  .play-list > p {

	width: 94.5%;

  }

  .play-list > section > a > div {

	width: 100%

  }

  .play-list h2 {

	width: 62%;

  }



   /* =====DESKRIPSI VIDEO===== */

  .box-deskripsi {

  	width: 100%;

  }

  .deskripsi-video {

	width: 100%;

  }

  .deskripsi-video > div > h1 {

	width: 95%;

  }

  .bagikan-artikel {

	width: 94.5%;

  }

  .teks-deskripsi {

	width: 94.5%;

  }

  .baca-lainnya {

	width: 90%;

  }

  .kolom-baca-lainnya > h2 {

	width: 90%;

	border-right: none;

	border-left:  1px solid blue;

	text-decoration: none;

  }

  .kolom-baca-lainnya a {

	color: black;

	text-decoration: none;

  }

  .kolom-baca-lainnya a:hover {

	color: #EB3F1A;

  }

  

  /*======SIDEBAR VIDEO PILIHAN=====*/

  

  .video-pilihan-sidebar {

  	float: left;

  	margin: 0;

  	padding: 0;

  	width: 350px;

  }

  .video-sidebar {

	position: relative;

	right: 0;

	width: 360px;

	margin: 0;

	float: right;

  }

  .list-video-sidebar {

	width: 100%;

	height: 450px;

	float: left;

  }

  .list-video-sidebar div {

  	width: 100%;

  	float: left;

  	margin: 0;

  }

  .video-sidebar img {

	width: 140px;

	height: 90px;

	margin: 10px;

	float: left;

  }

  .video-sidebar img {

	-webkit-transition: 0.4s ease;

	-moz-transition: 0.4s ease;

	-o-transition: 0.4s ease;

	transition: 0.4s ease;

  }

  .video-sidebar img:hover {

	-webkit-transform: scale(1.12);

	-moz-transform: scale(1.12);

	-o-transform: scale(1.12);

	transform: scale(1.12);

  }

  .video-sidebar h2 {

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

	float: left;

	margin: 10px 5px;

	width: 185px;

	color: black;

  }



   /* =====BACA JUGA & ARTIKEL PILIHAN===== */

  

  .baca-juga {

		width: 100%;

  }

  .baca-juga > .box-judul {

	width: 100%;

  }

  .baca-juga > article {

		width: 100%;

  }

  .video-pilihan-sidebar {

  	position: relative;

  	right: 0;

  	top: 0;

  }

   .artikel-pilihan-content a {

   	text-decoration: none;

   }

}