@font-face{
	font-family:"TitilliumText22L001";
	src: url("fonts/TitilliumText22L001.otf")format("opentype");
	
}


body{
	
	margin:0;
	padding:0;
	background-image:url('../images/bg.png');
	background-size:cover;
	background-position:50%;
	font-family:"TitilliumText22L001";

	
}
div{

	padding:10px;
	display:block;
	
}
ul li{	
	line-height:1.5em;
}
ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
a{
	text-decoration:none;
	color:#fff;
}
a:hover{
	text-decoration:underline;
}

input{
	padding:10px;
}


#wrapper{

	width:1100px;
	margin:auto;
  	
	
}

/* bagian navbar */
#bg_nav{
	position:absolute;
	background:#141415;
	width:100%;
	height:32px;
	left:0;
	padding:10px 0;
	top:0;
	z-index:-99;
}
#navbar{
	
	width:70%;
 	display:inline-table;
}
#navbar ul li a{
	font-weight:bold;
}
#navbar ul li{
	display:inline-table;
	padding:0 20px;
	position:relative;
	border-right:1px solid #383737;
}
#navbar ul li:hover .dropdown{
	opacity:1;
	transition:all 0.5s ease-out;
}
.dropdown{
	width:auto;
	position:absolute;
	background:#111111;
	top:30px;
	z-index:9999;
	opacity:0;
	transition:display 0.5s ease-out;
	
}
.dropdown li{
}
.dropdown li a{
 	float:left;
	width:100%;
	padding:5px 0;
	line-height:1.5em;
	
	
}
 

/* right area */

#right_area a{
	margin-right:20px;
	color:gold;
}
#right_area{
	display:inline-table;
	position:relative;
	left:130px;	
}



/* bagian logoarea */

#logoarea{
 	width:100%;
	padding:0;
	margin-top:20px;
}
p{
	font-size:80%;
}
#logoarea  #logo{
	 
	width:35%;
	font-size:30px;
	font-weight:bold;
	display:inline-table;
	color:gold;
 	 
}
#logoarea  #sponsor img{
  
}
#logoarea  #sponsor{
	padding:0;
	width:60%;
	display:inline-table;
 	position:relative;
	left:30px;
 	 
}
#sponsor ul li{
	display:inline-table;
	margin-right:30px;
	float:right;
}

/* bagian banner */


#banner{

	width:100%;
	padding:0;
 	background:#CCCCCC;
	margin-top:10px;
	height:722px;
	overflow:hidden;
	position:relative;
}
#banner #big_banner img{
	margin:0;
 	width:120%;
 	height:500px;
	background-size:cover;
	position:absolute;
	top:0;
	left:0;
 
}
#banner #big_banner{
	display:inline-block;
	overflow:hidden;
}

#banner #big_banner a{
	
	position:absolute;
	top:400px;
	color:gold;	
	font-size:30px;
	color:#000;
	padding:10px 20px;
	background:#FFF;
	width:94%;
}

#banner #list_banner{
	width:100%;
	position:relative;
	display:block;
	margin-top:480px;
 	padding:0;
 }
 #list_banner .bonu img{
	width:107%;
	height:220px;
	top:-10px;
	left:-10px;
	position:relative;
 	z-index:99;

 }
 #list_banner .bonu{
	position:relative;
	overflow:hidden;
	display:inline;
	width:31.31%;	
	height:200px;	
	float:left;
	border:1px solid #CCCCCC;
 
 }
 .bonu a{
	position:absolute;
	top:160px;
	font-size:18px;
	font-weight:bold;
	z-index:999;
 }
 
 
 /* bagian content */
 
 
 #content{
	padding:0;
 	width:96%;
	background-color:#333333;
	color:#FFF;
	padding:20px;
	margin-top:0px;
 }
 #isi{
	padding:0;
	display:inline-table;
 	width:70%;
 
 }
 p.deskripsi{
	display:block;
	line-height:1.5em;
 }
 #sidebar{
	padding:0;
	display:inline-table;
	width:29%;
  }
 .berita a{
	font-weight:bold;
	color:gold;	
	display:block;
	font-size:18px;
 }
 .berita img{
	width:100%;
	height:200px;
 }
 .berita{
	width:45%;
 	display:inline-table;
	margin-bottom:20px;
	background:#242323;
} 
 
.berita:nth-child(odd){
	margin-right:20px;
 }  
 
 .headline a{
	font-weight:bold;
	color:gold;	
	display:block;
	font-size:18px;
 }
 .headline img{
	width:100%;
	/* height:200px; */
 }
 .headline{
	width:93%;
 	display:inline-table;
	margin-bottom:20px;
	background:#242323;
} 
 
.headline:nth-child(odd){
	margin-right:20px;
 }  
 
 /* bagian sidebar */
 
 .box{
	display:block;
	background:#242323;
	margin-bottom:20px;
	border:1px solid #1c1b1b;

 }
 .box ul li  a:hover{
	
	opacity:0.5;
	
 }
 .box ul li {
	display:inline-table;	
	font-size:24px;
	margin-right:10px;
 }
 .box span{
	widTH:100%;
	display:block;
 	text-align:center;
	margin-bottom:5px;
 }
 .box span.main_event{
	font-size:18px;
	color:gold;
 }
 .box span.date{
	font-size:14px;
 }
 .up_list{
	display:block;
	margin-bottom:10px;
	border-bottom:1px solid #3d3c3c;
 }
 .box .score{
	font-weight:bold;
 }
 .box .team{
 	font-size:16px;
	color:gold;
 }
 .box .judul{
	display:block;
	margin-bottom:10px;
	font-weight:bold;
	font-size:20px;
	color:gold;
	text-align:center;
 }
 
 
 
 /* bagian foooter */
 
 #footer span.date{
	font-size:80%;
	width:200px;
	display:block;
	
 }
 #footer{
	padding:0;
	margin-top:80px;
	margin-bottom:0px;
	width:100%;
	height:300px;
	color:#FFF;
	background-color:#1a1a1a;
 }
 #atas{
	padding:0;
	display:block;
	width:100%;
 	
 }
 #atas #logo_bawah{
	padding:20px;
	width:30%;
	margin:20px;
 	display:inline-table;
 }
 .list_bawah span{
	font-size:20px;
	color:gold;
	margin-bottom:20px;
	display:block;
 }
 p.about{
	font-size:100%;
 }
 .list_bawah{
	position:relative;
	top:-30px;
	font-size:85%;
	color:#FFF;
    width:20%;
 	display:inline-table;
 }
 #network{
	width:10%;
 }
 #footer #bawah_dong{
	width:100%;
	height:40px;
	padding:0;
	background-color:#292929;
 }
 #bawah_dong ul{
	position:relative;
	left:20px;
	top:10px;
 }
 #bawah_dong ul li{
	font-size:70%;
	display:inline-table;
	margin-right:10px;
 	padding:5px;
 }
 
 
 .video{
 
	width:100%;
	height:200px;
 	padding:0;
	border:none;
 }
 a.readmore{
	font-size:12px;
   	width:30%;
 	
	
 }
 iframe {
	border:none;
 }
 
 
 
 /* bagian game list */
 
 #gamelist{
	
	height:50px;
	width:100%;
	background:#303030;
	padding:0;
	margin-bottom:10px;
	margin-top:50px;
 
 }
 #gamelist select:focus{
	border:none;
 }
 #gamelist select option{
	background:#303030;
	margin-bottom:80px;
	height:30px;
 }
 #gamelist select {
    width: 300px;
    padding: 15px 20px;
    font-size: 16px;
	color:gold;
    line-height: 1;
    border: 0;
 	background:#303030;
}
.gamelist img{
	width:110%;
    height:420px;
	position:absolute;
	padding:0;
	top:-1px;
	left:-10px;
}
.gamelist .judul_game small{
	font-size:18px;
	color:#FFF;
}
.gamelist .judul_game{
	position:absolute;
	z-index:9999;
	top:300px;
	left:0px;
	color:gold;
	width:500px;
	font-size:30px;
	background:#000;
	padding:10px 30px;
	opacity:0.8;
}
.gold:hover{
	text-decoration:none;
}
.gold{
	color:gold;
	font-weight:bold;
}
.gamelist{
	overflow:hidden;
	padding:1px;
    width:97%;
    height:400px;
   background:#CCCCCC;
   display:inline-table;
	position:relative;
}
.players{
	overflow:hidden;
	padding:1px;
    width:46%;
    height:400px;
   background:#CCCCCC;
   display:inline-table;
	position:relative;
	
}

.players  img{
	width:105%;
    height:100%;
	position:absolute;
	padding:0;
	top:-1px;
	z-index:99;
	left:-10px;
}
.players .judul_game small{
	font-size:18px;
	color:#FFF;
}
.players .judul_game{
	position:absolute;
	z-index:9999;
	top:300px;
	height:30px;
	left:0px;
	color:gold;
	width:200px;
	font-size:30px;
	background:#000;
	padding:10px 30px;
	opacity:0.8;
 }
.players .judul_game p{
	
	color:#FFF;
	opacity:0;
	position:relative;
	margin-top:40px;
	font-size:14px;
	line-height:1.5em;
	transition:opacity 0.5s ease-out;
}

.players:hover .judul_game p{
	opacity:1;
	transition:opacity 0.5s ease-in;
}
 
.players:hover .judul_game{
	width:90%;
	height:400px;
	top:0;
	
	
}


.player{
	overflow:hidden;
	padding:1px;
    width:97%;
    height:700px;
    background:#CCCCCC;
	display:inline-table;
 	position:relative;
	
}

.player  img{
	width:105%;
    height:100%;
	position:absolute;
	padding:0;
	top:-1px;
	z-index:99;
	left:-10px;
}
.player .judul_game small{
	font-size:18px;
	color:#FFF;
}
.player .judul_game{
	position:absolute;
	z-index:9999;
	top:300px;
	height:30px;
	left:0px;
	color:gold;
	width:200px;
	font-size:30px;
	background:#000;
	padding:10px 30px;
	opacity:0.8;
 }
.player .judul_game p{
	
	color:#FFF;
	opacity:1;
	position:relative;
	margin-top:40px;
	font-size:14px;
	line-height:1.5em;
 }

 
.player .judul_game a{ 
	font-size:40px;
	position:relative;
	top:20px;
}
.player span.sosial a{
	font-size:20px;
}
.player span{
	display:block;
	font-size:18px;
	margin-top:20px;
	color:#FFF;
}
.player .judul_game{
	width:40%;
	height:800px;
	top:-40px;
}



#detail_hardware {
	border:1px solid #CCCCCC;
	margin-top:80px;
	width:95%;
}
#detail_hardware  h2{
	color:gold;
	font-weight:bold;
}
#detail_hardware  ul li img{
	width:100%;
	height:150px;
}
#detail_hardware  ul li{
	text-align:center;
	color:gold;
}
#detail_hardware  ul li{
	width:32.5%;
 	display:inline-table;
	height:150px;
	overflow:hidden;
}