@charset "UTF-8";
/* CSS Document */

body,html{
	margin:0px;
	height:100% !important; 
	width:100% !important;
	background:url(http://www.bectero.com/themes/bectero/assets/images/wall_02.jpg) no-repeat center bottom fixed;
	background-size:100% auto;}
img{max-width:100%}
.top{
	max-width:800px;
	margin:0px auto;
	text-align:center;
	display:block;
	overflow:hidden;
}
.top a{
	display:block;
	vertical-align:middle;
	}
.top a:first-child{float:left}
.top a:last-child{float:right; line-height:105px;}
.page{	
	background:url(../images/sonicbang2014-bg.jpg) #030a10 no-repeat center;
	position:relative;
	margin:0px auto;
	max-width:800px;
	height:600px;
	border-radius:10px;
	-moz-box-shadow: 0 0 3px 3px #82d4ee;
	-webkit-box-shadow: 0 0 3px 3px #82d4ee;
	box-shadow: 0 0 3px 3px #82d4ee;
	}
	
h1 {font-size:16px;
	color:#7bd3eb;}
	
.box01 {width:60%;
		float:left;
		display:block}

#big-video-wrap{display:none;}
.logo{
	display:block;
	text-align:center;
}
.bottom{
/*
	position:absolute;
	bottom:0px;*/
	width:100%;
	text-align:center;
}
.fb{
	position:relative;
	margin:0px auto;
	max-width:280px;
	height:65px;
}
.fb .inner{position:absolute;bottom:7px; width:100%;text-align:center;z-index:9999;}
.pluginButton button{width:60px}
button{cursor:pointer}
.play, .pause{width:30px; height:30px;border:none;outline:none;color:transparent;}
.play{background:url(../images/ic-play.png) no-repeat}
.pause{background:url(../images/ic-mute.png) no-repeat}
.audio{ margin:0px auto;width:30px; height:30px;position:relative;display:none}

.video-yt{
	width:85%;
	height:300px;
	margin:0 auto;	
	text-align:center;	
	}
.vdolist {
	width:85%;
	margin:5px auto;
	padding:0;
	text-align:center}
.vdolist li{
	list-style:none;
	display:inline-block;
	width:100px; 
	margin:0 5px 0;}
	
.video-yt embed{width:100%; height:300px;}

.fixed{ position:fixed; right:0; top:0;z-index:1000}

.rule{
	font-family:tahoma;
	font-size:14px;
	background:#000;
    background:rgba(0, 0, 0, 0.6);
	border-left:solid 1px #048b95;
	width:39%;
	height:600px;
	display: block;
	float:right;
	color:#FFF;
	box-shadow:-1px 0px 30px 0px #7bd3eb;
	}
.rule li{padding-bottom:5px}
.rule a{color:#66ccff}
.rule h1, p{padding:0 10px 0}
	


@media only screen and (max-width: 690px){
	.video-yt embed{height:300px;}
	.box01 {float:none; clear:both; margin:0 auto; width:80%;}
	.rule	{width:100%; background:rgba(0, 0, 0, 1); height:auto;}
	.video-yt{height:300px}
}
@media only screen and (max-width: 600px){
	.video-yt embed{height:300px;}
	.box01 {width:100%;}
	.video-yt{height:300px}
}
@media only screen and (max-width: 415px){
	.vdolist {width:100%}
	.vdolist li{margin:0}
}
@media only screen and (max-width: 390px){
	.top a:first-child,.top a:last-child{float:none; text-align:center;}
	.top a:last-child {line-height:50px}

}
@media only screen and (max-width: 325px){
	.vdolist li{width:80px}
}
/*
@media only screen and (max-width: 460px){
	.video-yt embed{height:200px;}
	.box01 {width:80%;}
	.video-yt{height:200px}
}
@media only screen and (max-width: 365px){
	
}
@media only screen and (max-width: 320px){

}