#canvas {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
}
#time-container {
    width: 555px;
    height: 555px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}
.numbers-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#time-container span {
    color: #FFFFFF;
    position: absolute;
    z-index: 2;
}
.clock-number {
    font-family: 'Josefin Sans', sans-serif;/*100 300 400 600*/
    font-weight: 300;
    font-size: 350%;
}
.clock-label {
    font-family: 'Exo 2', sans-serif;
    font-weight: 300;
}
#ticker {
    font-size: 100%;
    left: 245px;
    top: 155px;
}
#timelable {
    font-size: 85%;
    left: 245px;
    top: 335px;
}
#timeleft_ {
    font-size: 190%;
    left: 70px;
    top: 325px;
}
#timeleft_2 {
    font-size: 190%;
    left: 70px;
    top: 325px;
}
@media only screen and (max-device-width: 351px) {
    #timeleft_ {
        font-size: 190%;
        left: 0px;
        top: 150px;
    }
    #timeleft_2 {
        font-size: 190%;
        left: 0px;
        top: 150px;
    }
    img{
        width: 50%;
    }
}
@media only screen and (min-width: 352px) and (max-width: 1024px) {
    #timeleft_ {
        font-size: 190%;
        left: 5px;
        top: 200px;
    }
    #timeleft_2 {
        font-size: 190%;
        left: 5px;
        top: 200px;
    }
    img{
        width: 50%;
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1366px) {
    #timeleft_ {
        font-size: 190%;
        left: 15px;
        top: 255px;
    }
    #timeleft_2 {
        font-size: 190%;
        left: 15px;
        top: 255px;
    }
    img{
        width: 50%;
    }
}