@-ms-viewport { 
    width: device-width;
    height: device-height;
}

.wrapper {
	width:610px;
	margin:0 auto;
}

.clock {
    width:610px;
    margin:0 auto;
    margin-top:20px;
}

.clock_days {
    float:left;
    margin-right:30px;
}
.clock_hours {
    float:left;
    margin-right:30px;
}
.clock_minutes {
    float:left;
    margin-right:30px;
}
.clock_seconds {
    float:left;
}

#canvas_seconds, #canvas_minutes, 
#canvas_hours, #canvas_days {
    height: 130px;
    width: 130px;
}

.bgLayer { 
    background-image:url(../img/bg.png); 
    background-repeat:no-repeat;
    position:relative;
    background-size: contain;
}

.topLayer { 
    position:absolute; 
    background-image:url(../img/top.png); 
    width:130px;
    height:130px;
    background-repeat:no-repeat;
    background-size: contain;
}

.text { position:absolute; top:16px; left:16px; width:100px;  height:100px;}

.val {
    font-size:32px;
    font-weight:bold;
    color:#FFF;
    text-align:center;
    line-height: 24px;
    margin-top: 24px;
    width:100px;
}

.type_days {
    color:#ff6565;
    width:100px;
    text-align:center;
    font-size:13px;
    line-height:20px;
    font-weight:bold;
    text-transform:uppercase;
}

.type_hours {
    color:#378cff;
    width:100px;
    text-align:center;
    font-size:13px;
    line-height:20px;
    font-weight:bold;
    text-transform:uppercase;
}

.type_minutes {
    color:#9cdb7d;
    width:100px;
    text-align:center;
    font-size:13px;
    line-height:20px;
    font-weight:bold;
    text-transform:uppercase;
}

.type_seconds {
    color:#ffdc50;
    width:100px;
    text-align:center;
    font-size:13px;
    line-height:20px;
    font-weight:bold;
    text-transform:uppercase;
}