@charset "UTF-8";
/* CSS Document */
.countdown-container {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index:100;
	max-width:100% !important;
	width:100% !important;
}
#content_top .countdown-container{
	position:relative;
	top:0;
}
#content_top:before, #content_top:after{
	display:block;
	content:" ";
	clear:both;
}
.clock-item{
	width:24%;
	margin:0 0.5%;
	float:left;
}

.clock-item .inner {
	height: 0px;
	padding-bottom: 100%;
	position: relative;	
	width: 100%;
}
.clock.row{
	margin:0 auto;
	max-width:800px;
	width:70%;
}
#content_top .clock.row{
	max-width:100%;
	width:100%;
}
.clock-canvas {
	background-color: rgba(255, 255, 255, .1);
	border-radius: 50%;
	height: 0px;
	padding-bottom: 100%;
}

.text {
	color: #fff;	
	font-size: 30px;
	font-weight: bold;	
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
	top: 50%;
	text-align: center;
	/*text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);*/
	width: 100%;
}

.text .val {
	font-size: 50px;
	margin-bottom:15%;
}

.text .type-time {
	font-size: 20px;
}
@media screen and (max-width: 1440px){
	.clock.row{
		max-width:600px;
	}
}
@media screen and (max-width: 600px){
	.text{
		color: #fff;	
		font-size: 30px;
		font-weight: bold;	
		-webkit-transform: translateY(-35%);
		-moz-transform: translateY(-35%);
		transform: translateY(-35%);
		position: absolute;
		top: 50%;
		text-align: center;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
		width: 100%;
	}
	.text .type-time{
		font-size:15px;
	}
}
@media screen and (max-width: 600px){
	.text .type-time{
		font-size:12px;
	}	
	.text .val{
		font-size:35px;
	}
}