@charset "utf-8";

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}


body{
	font-family: 'Helvetica', arial, sans-serif;
	font-size: 15px;
	background: #dedede;
}

/* START LAYOUT DESKTOP */
@media screen and (min-width: 0px) {
	
.header {
	margin-top: 65px; width: 100%; height: 440px; background: #FFFFFF; position: relative;
}

video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  filter:opacity(90%);
}
.video-wrapper {
  border: 2px solid #000;
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iklan{
	width: 100%; height: 400px; position: relative;
  color: white;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
}

.klasemenview{
	width: 50%; height: 400px; float: left;
}

	
		

	
	
.seconheader {
	width:100%;
	height:98px;
	background:#FFFFFF;
	float: left;
	margin-top: 0px;
	margin-bottom: 10px;
}

.boxseconheader1 {
	width:32%;
	height:95px;
	float:left;
	text-align: center;
	margin:1px 5px 10px 5px;
}

.logomitra {
    width:auto;
    height:90px;
    text-align: left;
}

.boxseconheader2 {
	width:32%;
	height:95px;
	float:left;
	text-align: center;
	margin:1px 5px 10px 5px;
}

.boxseconheader3 {
	width:32%;
	height:95px;
	float:left;
	text-align: center;
	margin:1px 5px 10px 5px;
}
	.mainpage {
	max-width: 1080px;
	min-height: 300px;
	margin: 15px auto;
	background: #fff;
	overflow: hidden;
	padding: 10px;

}

.statistikbox{

	width:100%;

}

.statistikbox1{
	width:32%;
	height:260px;
	background:#F03;
	float:left;
	margin:5px;
	color:#FFFFFF;
	text-align:center;
	padding:18px 5px 5px 5px;
}



.statistikbox2{
	width:32%;
	height:260px;
	background:#096;
	float:left;
	margin:5px;
	color:#FFFFFF;
	text-align:center;
	padding:18px 5px 5px 5px;
}



.statistikbox3{
	width:32%;
	height:260px;
	background:#36C;
	float:left;
	margin:5px;
	color:#FFFFFF;
	text-align:center;
	padding:18px 5px 5px 5px;
}

.gambarkotaklistartikel{
	width:200px;
	height:150px;
	margin-top:15px; 
	margin-bottom:30px; 
	margin-right:5px;
	
}


	
}/* FINISH LAYOUT DESKTOP */


@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	

.header {
	margin-top: 65px; width: 100%; height: 500px;
}

.iklan{
	width: 100%; height: 400px;
}

.klasemenview{
	margin-top: 30px; width: 100%; height: 400px; float: left;
}


	
.seconheader {
	width:100%;
	height:250px;
	background:#FFFFFF;
}

.boxseconheader1 {
	width:99%;
	height:80px;
	border-bottom: 2px solid #CCC;
	margin: 2px;
}

.logomitra {
    width:auto;
    height:80px;
    text-align: center;
}
.boxseconheader2 {
	width:99%;
	height:80px;
	border-bottom: 2px solid #CCC;
	margin: 2px;
}

.boxseconheader3 {
	width:99%;
	height:80px;
	border-bottom: 2px solid #CCC;
	margin: 2px;
}

	.mainpage {
width: 100%;
background: #fff;

}


.statistikbox{padding:0px; margin:0px;}

.statistikbox1{ width:100%; margin:3px 0px 3px 0px;}

.statistikbox2{ width:100%;margin:3px 0px 3px 0px;}

.statistikbox3{width:100%; margin:3px 0px 3px 0px;}

.gambarkotaklistartikel{
	width:100%;
	height:auto;
	margin-top:15px; 
	margin-bottom:10px; 
	
}
	
} /* FINISH LAYOUT MOBILE */