.clock{
    display:inline-block;
    margin:30px auto;
}
.countdown-container {
    position: relative;
    top: 50%;

}

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

.clock-canvas {
    background-color: #fff;
    border-radius: 50%;
    height: 0px;
    padding-bottom: 100%;
    box-shadow: inset 0px 0px 0px 5px #c4cbcf;
}

.clock-item{
    width:90px;
    float:left;
    margin-right:30px;
}

.clock-item:last-child{
    margin-right:0px;
}

.clock-content {
    margin-top:0px;
}
.clock-content .val{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: -33px;
    font-size: 45px;
    font-weight: 300;
}
.clock-content .typ{
    font-size:18px;
    font-weight:300;

}


@media (max-width:1200px) {
    .clock {
        margin-top:35px;
    }
    .clock-item{
        width:90px;
        margin-right:20px;
    }
}

@media(max-width: 1000px){
    .clock{
        margin:20px auto;
    }
}

@media (max-width:768px) {
    .clock {
        margin-top:20px;
    }
    .clock-item{
        width:95px;
        margin-right:20px;
        margin-top:15px;
    }

}

@media (max-width:565px) {
    .clock-item{
        width:80px;
        margin-right:20px;
        margin-top:15px;
    }
    .clock-content .val {
        font-size: 21px;
        margin-top: -15px;
    }
    .clock-content .typ {
        font-size:14px;
    }
    .clock-content {
        margin-top: 10px;
    }
}

@media (max-width:480px) {
    .clock{
        max-width:100%;
        margin:0px auto;
        margin-bottom: 15px;
    }
    .clock-item{
        width:70px;
        margin-top:15px;
    }

    .clock-content .val {
        font-size: 24px;
    }
}

@media (max-width:450px) {
    .clock-item{
        width:60px;
    }
}


@media (max-width:370px) {
    .clock-item{
        width:45px;
    }

    .clock-content .val {
        font-size: 22px;
    }
}


.events{
    text-align:center;
}