/* =====SLIDE SHOW ==== */
  .judul {
	  padding: 0 10px;
	  position: absolute;
	  bottom: 20px;
  }
  .judul p {
  	color: white;
  }
  .judul > a > h1 {
	font: bold 28px arial, calibri, sans-serif;
	width: 650px;
  }
  .judul h1:hover {
	  color: #EB3F1A;
  }
  section.artikel-utama {
	  width: 680px;
	  height: 570px;
	  float: right;
	  overflow: hidden;
	  position: relative;
  }
  section a {
	  text-decoration: none;
	  color: white;
  }
 .artikel-utama img {
	  width: 680px;
	  height: 400px;
	  margin: 0;
	  float: left;
  }
  p.teks-artikel-utama {
	 font: normal 18px calibri, arial, sans-serif;
	 width: 300px;
	 height: 180px;
	 overflow: hidden;
	 float: left;
	 margin-top: 20px;
  }
  .more-utama {
	  width: 150px;
	  height: 20px;
	  margin: 20px;
	  padding-left: 20px;
	  border: 2px solid white;
	  background-color: #EB3F1A;
	  z-index: 2;
	  float: right;
	  border-radius: 10px;
  }
   .more-utama:hover {
	  width: 150px;
	  height: 20px;
	  margin: 20px;
	  padding-left: 20px;
	  border: 2px solid white;
	  background-color: green;
	  z-index: 2;
	  float: right;
	  border-radius: 10px;
  }
  .more-utama {
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;
  }
  .more-utama:hover {
	-webkit-transform: scale(1.08);
	-moz-transform: scale(1.08);
	-o-transform: scale(1.08);
	transform: scale(1.08);
  }
  .isi-slideshow {
	width: 680px;
	height: 390px;
	float: left;
	background-image: radial-gradient(farthest-side circle at top left, #A5EEF0, #31DEE6);
  }
  #slideshow {
	
	width: 7000px;
	height: 390px;
	float: left;
	position: relative;
	
	/*pengaturan durasi lama tampil gambar bisa di atur di bawah ini*/
	animation-name:slider;
	animation-duration:30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
	-webkit-animation-name:slider;
	-webkit-animation-duration:30s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:slider;
	-moz-animation-duration:30s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count:infinite;
	-o-animation-name:slider;
	-o-animation-duration:30s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count:infinite;
  }

  #box-control-slide {
  	width: 100%;
  	height: 180px;
  	position: absolute;
  	top: 390px;
  	background-color: blue;
  }
  #box-control-slide div a {
  	width: 145px;
  	height: 160px;
  	padding: 10px 10px;
  	border-right: 1px solid white;
  	float: left;
  	display: block;
  	z-index: 100;
	opacity: 1;
	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;

  }
  #img-thumbslide {
  	width: 130px;
  	height: 80px;
  	margin: 0;
  	padding: 0 5px;
  }
  #box-control-slide div a h2 {
  	float: left;
  	width: 130px;
  	height: 70px;
  	font: normal 14px calibri, arial, sans-serif;
  	margin: 0;
  	padding: 0 5px;
  	color: white;
  	overflow: hidden;
	opacity: 1;
	transition: opacity 2s ease-in 10ms;
	-webkit-transition: opacity 2s ease-in 10ms;
	-o-transition: opacity 2s ease-in 10ms;
	-moz-transition: opacity 2s ease-in 10ms;
  }
  #prev, #next {
	width: 30px;
	height: 50px;
	position: absolute;
	top: 65px;
	margin: 0;
	padding: 0;
	z-index: 20;
	opacity: 0;
	transition-duration: 0.5s;
	transition-timing-function: ease-in;
  }
  #dot-marks {
  	width: 145px;
  	font: bold 60px/110px arial, calibri;
  	color: white;
  	padding: 0;
  	margin: 0;
  	text-align: center;
  	position: absolute;
	top: 100px;
  }
  #prev:hover, #next:hover {
  	opacity: 1;
  }
  #prev {
  	left: 10px;
  }
  #next {
  	right: 10px;
  }

  #slideshow:hover {
	/*saat gambar di hover oleh cursor mouse maka berhenti slide*/
	-webkit-animation-play-state:paused; 
	-moz-animation-play-state:paused; 
	-o-animation-play-state:paused; 
	animation-play-state:paused;
	
  }
  .artikel-utama:after {
	-webkit-transition: 1s all ease-in-out; 
	-moz-transition: 1s all ease-in-out;
	-o-transition: 1s all ease-in-out;
	transition: 1s all ease-in-out;
  }
  .artikel-utama img {
	-webkit-transition: 0.4s ease;
	-moz-transition: 0.4s ease;
	-o-transition: 0.4s ease;
	transition: 0.4s ease;
  }
  .artikel-utama img:hover {
	-webkit-transform: scale(1.12);
	-moz-transform: scale(1.12);
	-o-transform: scale(1.12);
	transform: scale(1.12);
  }
  
  @-moz-keyframes slider {     
	0% {
		left: 0; opacity: 1; 
	}     
	2% {
		opacity: 1; 
	}     
	9% {
		left: 0; opacity: 1; 
	}     
	10% {
		opacity: 0; 
	}     
	11% {
		left: -680px; opacity: 1; 
	}       
	19% {
		left: -680px; opacity: 1; 
	}      
	20% {
		opacity: 0; 
	}     
	21% {
		left: -1360px; opacity: 1; 
	}     
	29% {
		left: -1360px; opacity: 1; 
	}     
	30% {
		opacity: 0; 
	}     
	31% {
		left: -2040px; opacity: 1; 
	}   	
	39% {
		left: -2040px; opacity: 1; 
	}     
	40% {
		opacity: 0; 
	}     
	41% {
		left: -2720px; opacity: 1; 
	}     
	49% {
		left: -2720px; opacity: 1; 
	}   
	50% {
		opacity: 0; 
	}     
	51% {
		left: -3400px; opacity: 1; 
	}     
	59% {
		left: -3400px; opacity: 1;
	}    
	60% {
		opacity: 0; 
	}     
	61% {
		left: -4080px; opacity: 1; 
	}     
	69% {
		left: -4080px; opacity: 1;
	}    
	70% {
		opacity: 0; 
	}     
	71% {
		left: -4760px; opacity: 1; 
	}     
	79% {
		left: -4760px; opacity: 1;
	}    
	80% {
		opacity: 0; 
	}     
	81% {
		left: -5440px; opacity: 1; 
	}     
	88% {
		left: -5440px; opacity: 1;
	}
	90% {
		opacity: 0; 
	}
	91% {
		left: -6120px; opacity: 1; 
	}     
	98% {
		left: -6120px; opacity: 1;
	}
	100% {
		opacity: 0; 
	}          
} 

@-webkit-keyframes slider {     
	0% {
		left: 0; opacity: 1; 
	}     
	2% {
		opacity: 1; 
	}     
	9% {
		left: 0; opacity: 1; 
	}     
	10% {
		opacity: 0; 
	}     
	11% {
		left: -680px; opacity: 1; 
	}       
	19% {
		left: -680px; opacity: 1; 
	}      
	20% {
		opacity: 0; 
	}     
	21% {
		left: -1360px; opacity: 1; 
	}     
	29% {
		left: -1360px; opacity: 1; 
	}     
	30% {
		opacity: 0; 
	}     
	31% {
		left: -2040px; opacity: 1; 
	}   	
	39% {
		left: -2040px; opacity: 1; 
	}     
	40% {
		opacity: 0; 
	}     
	41% {
		left: -2720px; opacity: 1; 
	}     
	49% {
		left: -2720px; opacity: 1; 
	}   
	50% {
		opacity: 0; 
	}     
	51% {
		left: -3400px; opacity: 1; 
	}     
	59% {
		left: -3400px; opacity: 1;
	}    
	60% {
		opacity: 0; 
	}     
	61% {
		left: -4080px; opacity: 1; 
	}     
	69% {
		left: -4080px; opacity: 1;
	}    
	70% {
		opacity: 0; 
	}     
	71% {
		left: -4760px; opacity: 1; 
	}     
	79% {
		left: -4760px; opacity: 1;
	}    
	80% {
		opacity: 0; 
	}     
	81% {
		left: -5440px; opacity: 1; 
	}     
	88% {
		left: -5440px; opacity: 1;
	}
	90% {
		opacity: 0; 
	}
	91% {
		left: -6120px; opacity: 1; 
	}     
	98% {
		left: -6120px; opacity: 1;
	}
	100% {
		opacity: 0; 
	}      
}  


@-o-keyframes slider {     
	0% {
		left: 0; opacity: 1; 
	}     
	2% {
		opacity: 1; 
	}     
	9% {
		left: 0; opacity: 1; 
	}     
	10% {
		opacity: 0; 
	}     
	11% {
		left: -680px; opacity: 1; 
	}       
	19% {
		left: -680px; opacity: 1; 
	}      
	20% {
		opacity: 0; 
	}     
	21% {
		left: -1360px; opacity: 1; 
	}     
	29% {
		left: -1360px; opacity: 1; 
	}     
	30% {
		opacity: 0; 
	}     
	31% {
		left: -2040px; opacity: 1; 
	}   	
	39% {
		left: -2040px; opacity: 1; 
	}     
	40% {
		opacity: 0; 
	}     
	41% {
		left: -2720px; opacity: 1; 
	}     
	49% {
		left: -2720px; opacity: 1; 
	}   
	50% {
		opacity: 0; 
	}     
	51% {
		left: -3400px; opacity: 1; 
	}     
	59% {
		left: -3400px; opacity: 1;
	}    
	60% {
		opacity: 0; 
	}     
	61% {
		left: -4080px; opacity: 1; 
	}     
	69% {
		left: -4080px; opacity: 1;
	}    
	70% {
		opacity: 0; 
	}     
	71% {
		left: -4760px; opacity: 1; 
	}     
	79% {
		left: -4760px; opacity: 1;
	}    
	80% {
		opacity: 0; 
	}     
	81% {
		left: -5440px; opacity: 1; 
	}     
	88% {
		left: -5440px; opacity: 1;
	}
	90% {
		opacity: 0; 
	}
	91% {
		left: -6120px; opacity: 1; 
	}     
	98% {
		left: -6120px; opacity: 1;
	}
	100% {
		opacity: 0; 
	}      
}


/*******************************************
 *******************************************
 ***********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: 60%;
    }
    
    /* =====CONTENT UTAMA===== */
    .content-utama {
	  width: 100%;
    }
    .header {
      width: 100%;
    }
  section.artikel-utama {
	  width: 100%;
      height: 250px; 
	  float: left;
	  overflow: hidden;
	  position: relative;
  }
  .judul {
	width: 100%;
	padding-right: 5px;
  }
  .judul > a {

  }
  .judul > a > h1 {
	font: bold 18px arial, calibri, sans-serif;
	margin-top: 5px;
	width: 350px;
    height: 50px;
    overflow: hidden;
    margin-left: 0;
  }
 .artikel-utama img {
	  width:  100%;
      height: 250px;
	  float: left;
  }
  .teks-artikel-utama {
	 width: 368px;
	 height: 70px !important;
	 overflow: hidden;
	 float: left;
	 margin-left: 20px;
  }
  .more-utama {
      margin-right: 60px;
  }
  .isi-slideshow {
	width: 408px;
	height: 400px;
	float: left;
	background-color: blue;
  }
  #slideshow {
	
	width: 4080px;
	height: 250px;
	float: left;
	position: relative;
	
	/*pengaturan durasi lama tampil gambar bisa di atur di bawah ini*/
	animation-name:slider;
	animation-duration:30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
	-webkit-animation-name:slider;
	-webkit-animation-duration:30s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:slider;
	-moz-animation-duration:30s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count:infinite;
	-o-animation-name:slider;
	-o-animation-duration:30s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count:infinite;
  }
  #slideshow:hover {
	/*saat gambar di hover oleh cursor mouse maka berhenti slide*/
	-webkit-animation-play-state:paused; 
	-moz-animation-play-state:paused; 
	-o-animation-play-state:paused; 
	animation-play-state:paused;
	
  }
  .artikel-utama:after {
	-webkit-transition: 1s all ease-in-out; 
	-moz-transition: 1s all ease-in-out;
	-o-transition: 1s all ease-in-out;
	transition: 1s all ease-in-out;
	background-color: red;
  }
  
  @-moz-keyframes slider {     
	0% {
		left: 0; opacity: 1; 
	}     
	2% {
		opacity: 1; 
	}     
	9% {
		left: 0; opacity: 1; 
	}     
	10% {
		opacity: 0; 
	}     
	11% {
		left: -408px; opacity: 1; 
	}
	19% {
		left: -408px; opacity: 1; 
	}      
	20% {
		opacity: 0; 
	}     
	21% {
		left: -816px; opacity: 1; 
	}     
	29% {
		left: -816px; opacity: 1; 
	}     
	30% {
		opacity: 0; 
	}     
	31% {
		left: -1224px; opacity: 1; 
	}   	
	39% {
		left: -1224px; opacity: 1; 
	}     
	40% {
		opacity: 0; 
	}     
	41% {
		left: -1632px; opacity: 1; 
	}     
	49% {
		left: -1632px; opacity: 1; 
	}   
	50% {
		opacity: 0; 
	}     
	51% {
		left: -2040px; opacity: 1; 
	}     
	59% {
		left: -2040px; opacity: 1;
	}    
	60% {
		opacity: 0; 
	}     
	61% {
		left: -2448px; opacity: 1; 
	}     
	69% {
		left: -2448px; opacity: 1;
	}    
	70% {
		opacity: 0; 
	}     
	71% {
		left: -2856px; opacity: 1; 
	}     
	79% {
		left: -2856px; opacity: 1;
	}    
	80% {
		opacity: 0; 
	}     
	81% {
		left: -3264px; opacity: 1; 
	}     
	88% {
		left: -3264px; opacity: 1;
	}
	90% {
		opacity: 0; 
	}
	91% {
		left: -3672px; opacity: 1; 
	}     
	98% {
		left: -3672px; opacity: 1;
	}
	100% {
		opacity: 0; 
	}          
} 

@-webkit-keyframes slider {     
	0% {
		left: 0; opacity: 1; 
	}     
	2% {
		opacity: 1; 
	}     
	9% {
		left: 0; opacity: 1; 
	}     
	10% {
		opacity: 0; 
	}     
	11% {
		left: -408px; opacity: 1; 
	}
	19% {
		left: -408px; opacity: 1; 
	}      
	20% {
		opacity: 0; 
	}     
	21% {
		left: -816px; opacity: 1; 
	}     
	29% {
		left: -816px; opacity: 1; 
	}     
	30% {
		opacity: 0; 
	}     
	31% {
		left: -1224px; opacity: 1; 
	}   	
	39% {
		left: -1224px; opacity: 1; 
	}     
	40% {
		opacity: 0; 
	}     
	41% {
		left: -1632px; opacity: 1; 
	}     
	49% {
		left: -1632px; opacity: 1; 
	}   
	50% {
		opacity: 0; 
	}     
	51% {
		left: -2040px; opacity: 1; 
	}     
	59% {
		left: -2040px; opacity: 1;
	}    
	60% {
		opacity: 0; 
	}     
	61% {
		left: -2448px; opacity: 1; 
	}     
	69% {
		left: -2448px; opacity: 1;
	}    
	70% {
		opacity: 0; 
	}     
	71% {
		left: -2856px; opacity: 1; 
	}     
	79% {
		left: -2856px; opacity: 1;
	}    
	80% {
		opacity: 0; 
	}     
	81% {
		left: -3264px; opacity: 1; 
	}     
	88% {
		left: -3264px; opacity: 1;
	}
	90% {
		opacity: 0; 
	}
	91% {
		left: -3672px; opacity: 1; 
	}     
	98% {
		left: -3672px; opacity: 1;
	}
	100% {
		opacity: 0; 
	}      
}  


@-o-keyframes slider {     
	0% {
		left: 0; opacity: 1; 
	}     
	2% {
		opacity: 1; 
	}     
	9% {
		left: 0; opacity: 1; 
	}     
	10% {
		opacity: 0; 
	}     
	11% {
		left: -408px; opacity: 1; 
	}
	19% {
		left: -408px; opacity: 1; 
	}      
	20% {
		opacity: 0; 
	}     
	21% {
		left: -816px; opacity: 1; 
	}     
	29% {
		left: -816px; opacity: 1; 
	}     
	30% {
		opacity: 0; 
	}     
	31% {
		left: -1224px; opacity: 1; 
	}   	
	39% {
		left: -1224px; opacity: 1; 
	}     
	40% {
		opacity: 0; 
	}     
	41% {
		left: -1632px; opacity: 1; 
	}     
	49% {
		left: -1632px; opacity: 1; 
	}   
	50% {
		opacity: 0; 
	}     
	51% {
		left: -2040px; opacity: 1; 
	}     
	59% {
		left: -2040px; opacity: 1;
	}    
	60% {
		opacity: 0; 
	}     
	61% {
		left: -2448px; opacity: 1; 
	}     
	69% {
		left: -2448px; opacity: 1;
	}    
	70% {
		opacity: 0; 
	}     
	71% {
		left: -2856px; opacity: 1; 
	}     
	79% {
		left: -2856px; opacity: 1;
	}    
	80% {
		opacity: 0; 
	}     
	81% {
		left: -3264px; opacity: 1; 
	}     
	88% {
		left: -3264px; opacity: 1;
	}
	90% {
		opacity: 0; 
	}
	91% {
		left: -3672px; opacity: 1; 
	}     
	98% {
		left: -3672px; opacity: 1;
	}
	100% {
		opacity: 0; 
	}     
}
#box-control-slide{
	top: 510px;
	overflow-x: scroll;
}
#thumb-slide {
	width: 1830px;
	height: 180px;
}
}