/******************
    - General -
******************/
.circletimer {
	position:relative;
	cursor:default;
	text-align:center;
	font-size:1rem;
	line-height:1.5;
}

.circletimer > img {
	display:none;
	clear:both;
	width:100% !important;
	height:0;
}

.circletimer .time {
    position:relative;
	display:inline-block;
	vertical-align:middle;
	white-space:nowrap;
	height:100%;
	text-align:center;
}

/*****************
    - Expire -
*****************/
.circletimer.onfinish .time {
	opacity:0.2;
}

.circletimer .expire-message {
	position:absolute;
	max-width:100%;
	top:50%;
	left:50%;
	text-align:center;
	font-family:"Open Sans", Helvetica, sans-serif;
	font-size:36px;
	line-height:36px;
	font-weight:bold;
	color:#f00;
	-webkit-transform:translate(-50%, -50%);
	   -moz-transform:translate(-50%, -50%);
			transform:translate(-50%, -50%);
}

/*****************
    - Canvas -
*****************/
.circletimer canvas.bg {
	position:absolute;	
	z-index:1;
}

.circletimer canvas.circle {
	position:relative;
    z-index:2;
}

/****************
    - Count -
****************/
.circletimer .count {
    position:absolute;
	z-index:3;
	top:0;
	left:0;
    text-align:center;
    color:#333;
   	font-family:"Open Sans", Helvetica, sans-serif;
	font-weight:700;
	font-size:30px;
	line-height:30px;
}

/***************
    - Text -
***************/
.circletimer .text {
    position:absolute;
	z-index:4;
	bottom:0;
	left:0;
    text-align:center;
    color:#5f5f5f;
   	font-family:"Open Sans", Helvetica, sans-serif;
	font-weight:400;
	font-size:14px;
	line-height:14px;
}

/****************
    - Media -
****************/
@media (max-width:767px) {
	.circletimer .expire-message {
		font-size:20px;
		line-height:20px;
	}
}