@charset "UTF-8";

/* CSS Document */

#content{
	padding-top:20px;
	padding-bottom:20px;
}

.horizontal-navi{
	text-align:center;
	margin-bottom:20px;
	font-size:16px;
}

.horizontal-navi li{
	display:inline-block;
	padding:0 15px;
}

.horizontal-navi li a{
	color:#333;
}

.horizontal-navi li .active{
	font-weight:bold;
}

.horizontal-navi li .active[href="#apply"]{
	color:#e98c22;
}

.horizontal-navi li .active[href="#voting"]{
	color:#1abc9c;
}

.horizontal-navi li .active[href="#review"]{
	color:#3eb6ec;
}

.horizontal-navi li .active[href="#result"]{
	color:#f56954;
}

.boxes{
	
}

.boxes .box{
	width:310px;
	float:left;
	margin-bottom:25px;
}

.boxes .box:nth-child(3n-1){
	margin-left:25px;
	margin-right:25px;
}

.boxes .box a{
	display:block;
	background:#fff;
	color:#333;
}

.boxes .box a img{
	width:100%;
}

.boxes .box .artist_img{
	height:206px;
	overflow:hidden;
	position:relative;
}

.boxes .box .artist_img img{
	min-height:100%;
}

.boxes .box p{
	padding:15px;
}

.boxes .box .artist_name{
	text-overflow:ellipsis;
	line-height:20px;
	white-space:nowrap;
	overflow:hidden;
}

.boxes .box .title{
	font-size:15px;
	font-weight:bold;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	line-height:23px;
}

.boxes .box .description{
	padding-top:0;
	min-height:75px;
	max-height:75px;
}

.boxes .box .type{
	padding:5px 26px;
	color:#fff;
	text-align:right;
	background-position:right 6px top 7px;
	background-repeat:no-repeat;
	background-size:auto 15px;
}

.boxes .box .apply .type{
	background-color:#e98c22;
	background-image:url(https://buzzstage.s3.amazonaws.com/assets/img/icon/apply.png);
}

.boxes .box .voting .type{
	background-color:#1abc9c;
	background-image:url(https://buzzstage.s3.amazonaws.com/assets/img/icon/voting.png);
}

.boxes .box .review .type{
	background-color:#3eb6ec;
	background-image:url(https://buzzstage.s3.amazonaws.com/assets/img/icon/review.png);
}

.boxes .box .result .type{
	background-color:#f56954;
	background-image:url(https://buzzstage.s3.amazonaws.com/assets/img/icon/result.png);
}

.vote-bar{
	background:#555;
}

.vote-bar ul{
	width:1000px;
	padding:0;
}

.vote-bar li{
	float:left;
	border-right:1px solid #414141;
	position:relative;
}

.vote-bar li a{
	display:block;
	padding:15px 0;
	color:#fff;
	font-size:14px;
	width:98px;
	text-align:center;
	border-right:1px solid #616161;
}

.vote-bar li .active{
	background:#131313;
}

.vote-bar li .active:after{
	content:"";
	position:absolute;
	bottom:0;
	left:43%;
	border:0.5em solid transparent;
	border-bottom-color:#efefef;
}

.panel{
	min-height:300px;
	padding:60px 0;
}

.panel-2n:nth-child(2n){
	background:#fff;
}

.panel .left,.panel .right{
	width:470px;
	padding:0 10px;
	position:relative;
	min-height:300px;
}

.panel iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.panel p{
	font-size:14px;
}

.vote-finish{
	font-size:16px;
	color:#748dde;
}

.vote-finish span{
	color:#fff;
}

.section{
	padding:40px 0;
}

.section label{
	display:block;
	margin-bottom:5px;
}

#thanks{
	padding:90px 0;
	text-align:center;
}

#thanks h2{
	font-size:48px;
	margin-bottom:15px;
}

#share{
	padding:90px 0 60px;
	text-align:center;
	background:#fff;
}

#share h3{
	font-size:30px;
	color:#0CF;
	margin-bottom:15px;
}

#share p{
	width:50%;
	margin:0 auto 40px;
}

#share .social-buttons{
	padding:30px;
}

.rule{
	line-height:1.8em;
	font-size:14px;
}

#buzzmessage{
	
}

#buzzmessage h3{
	font-size:18px;
	margin-bottom:20px;
}

.artist-message{
	float:left;
	width:640px;
}

.artist-message p{
	font-size:14px;
	line-height:1.8em;
}

.latest-voter{
	float:right;
	width:300px;
}

.latest-voter > div > div{
	float:left;
	padding:5px;
}

#buzzcomment{
	background:#fff;
}

#buzzcomment h4{
	font-size:18px;
	margin-bottom:20px;
}

.about-contest{
	float:right;
	width:300px;
}

.artist-comment{
	float:left;
	width:640px;
}

.overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	z-index: 10;
	display:none;
}

.vote-inner{
	width:640px;
	height:690px;
	background:#fff;
	box-shadow:rgba(0,0,0,0.65) 0px 0px 6px 3px;
	border-radius:5px;
	position:absolute;
	overflow:hidden;
}

.vote-inner iframe{
	border:0;
}

.winner{
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.winner div{
	width: 80%;
	margin:0 auto 20px;
	text-align: center;
	padding: 3%;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	box-shadow:rgba(255,255,255,0.6) 0px 0px 6px 3px;
}

.submit .form-group{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;

}

.submit .file-img-preview{
  max-width:480px;
  text-align:center;
  margin:auto;
}

.submit .btn-file{
	max-width:480px;
	margin:auto;
}

@media only screen and (max-width:768px){
	.boxes{
		
	}
	
	.boxes .box{
		width:240px;
		float:left;
		margin-bottom:14px;
	}
	
	.boxes .box:nth-child(3n-1){
		margin-left:14px;
		margin-right:14px;
	}
	
	.boxes .box a{
		display:block;
		background:#fff;
		color:#333;
	}
	
	.boxes .box .artist_img{
		height:160px;
	}
	
	.boxes .box p{
		padding:15px;
	}
	
	.boxes .box .title{
		font-size:15px;
		font-weight:bold;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	
	.boxes .box .description{
		padding-top:0;
	}
	
	.vote-bar ul{
		width:auto;
	}
	
	.panel{
		padding:30px 0;
	}
	
	.panel .left,.panel .right{
		float:none;
		width:auto;
		padding:10px 0;
		position:relative;
		min-height:0;
	}
	
	.panel .video{
		padding-top:56.25%;
	}
	
	.panel iframe{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	
	.artist-message{
		width:428px;
	}
	
	.about-contest{
		float:right;
		width:300px;
	}
	
	.artist-comment{
		float:left;
		width:428px;
	}
	
	.winner div{
		margin:0 auto 15px;
		padding: 2%;
		font-size: 16px;
	}
}

@media only screen and (max-width:667px){
	.horizontal-navi{
		font-size:14px;
	}
	
	.horizontal-navi li{
		padding:0 10px;
	}
	
	.boxes{
		/*
		column-count: 2;
		-webkit-column-count: 2;
		-webkit-column-gap: 10px;
		column-gap: 10px;
		*/
		width: 100%;
		min-height: 0;
	}
	
	.boxes .box{
		/*
		width:100%;
		float:none;
		margin-bottom:14px;
		display:inline-block;
		padding:0%;
		*/
		width: 50%;
		float: left;
		margin-bottom: 14px;
		display: inline-block;
		box-sizing: border-box;
		padding: 0 5px;
	}
	
	.boxes .box:nth-child(3n-1){
		margin-left:0;
		margin-right:0;
	}
	
	.boxes .box .artist_img{
		height:auto;
	}
	
	.boxes .box .artist_img img{
		min-height:0;
	}
	
	.boxes .box p{
		padding:7px;
	}
	
	.boxes .box .title{
		font-size:13px;
	}
	
	.boxes .box .description{
		font-size:11px;
	}
	
	.vote-bar li{
		width:25%;
		box-sizing:border-box;
	}
	
	.vote-bar li a{
		width:auto;
	}
	
	#share p{
		width:90%;
	}
	
	#share .social-buttons{
		padding:20px;
		text-align:center;
	}
	
	#share .social-buttons a{
		float:none;
	}
	
	.artist-message{
		float:none;
		width:auto;
		margin-bottom:40px;
	}
	
	.latest-voter{
		float:none;
		width:auto;
	}
	
	.latest-voter > div > div{
		float:none;
		padding:5px;
		display:inline-block;
	}
	
	.about-contest{
		float:none;
		width:auto;
		margin-bottom:40px;
	}
	
	.artist-comment{
		float:none;
		width:auto;
	}
	
	.vote-inner{
		width:90%;
		height:460px;
	}
}