.countdown-container {
	/* position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%); */

}

.clock-item .inner {
	height: 0px;
	padding-bottom: 100%;
	position: relative;	
	width: 100%;
}

.clock-canvas {
	background-color:  rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    /* height: 0px; */
    /* padding-bottom: 100%; */
    width: 170px;
    height: 170px;
}

.text {
	color: #fff;
    /* font-size: 15px; */
    font-weight: bold;
    /* margin-top: -50px; */
    position: absolute;
    top: 11%;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    width: 170px;
    /* left: 10%; */
}

.text .val {
	/* font-size: 50px; */
	font-size: 25px;
}

.text .type-time {
	/* font-size: 20px; */
	font-size: 25px;
}

@media (min-width: 768px) and (max-width: 991px) {
	.clock-item {
		margin-bottom: 30px;		
	}

	.clock-canvas {
		width: 100px;
		height: 100px;
	}
	.text {
		top: 16%;
		width: 100px;
	}
	.text .val {
		font-size: 10px;
	}
	
	.text .type-time {
		font-size: 10px;
	}
}


@media (min-width: 460px) and (max-width: 767px) {
/* .clock-item {
		margin: 0px 30px 30px 30px;
	} */
	.clock-canvas {
		width: 80px;
		height: 80px;
	}
	.text {
		top: 13%;
		width: 80px;
	}
	.text .val {
		font-size: 9px;
	}
	
	.text .type-time {
		font-size: 9px;
	}
}
@media (max-width: 460px) {
	/* .clock-item {
		margin: 0px 30px 30px 30px;
	} */
	.clock-canvas {
		width: 50px;
		height: 50px;
	}
	.text {
		top: 14%;
		width: 50px;
	}
	.text .val {
		font-size: 7px;
	}
	
	.text .type-time {
		font-size: 7px;
	}
}