.clock__face {
    border: .3em solid #293033;
    border-radius: 50%;
    display: block;
    height: 120px;
    margin: 0 auto 15px;
    position: relative;
    width: 120px
}

@media (min-width:1200px) {
    .clock__face {
        height: 8.5em;
        width: 8.5em
    }
}

.clock__label {
    color: #293033;
    text-align: center;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1.25;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: akzidenz-grotesk, sans-serif;
    font-style: normal;
    font-weight: 400
}

.clock__hands {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.clock__hands:after {
    background: #293033;
    border-radius: 6px;
    content: "";
    display: block;
    height: 6px;
    left: 50%;
    margin: -3px 0 0 -3px;
    position: absolute;
    top: 50%;
    width: 6px
}

.clock__hands__hour,
.clock__hands__minute,
.clock__hands__second {
    background: #293033;
    border-radius: 1em;
    display: block;
    left: 50%;
    position: absolute;
    top: 50%
}

.clock__hands__second {
    height: 42px;
    margin-top: -42px;
    margin-left: -1px;
    -webkit-transform-origin: center 41px;
    transform-origin: center 41px;
    width: 2px
}

.clock__hands__minute {
    height: 36px;
    margin-top: -36px;
    margin-left: -2px;
    -webkit-transform-origin: center 34px;
    transform-origin: center 34px;
    width: 4px
}

.clock__hands__hour {
    height: 26px;
    margin-top: -26px;
    margin-left: -2px;
    -webkit-transform-origin: center 24px;
    transform-origin: center 24px;
    width: 4px
}

.clock__marks span {
    background: #293033;
    border-radius: 4px;
    display: block;
    height: 4px;
    left: 50%;
    margin: -2px 0 0 -2px;
    position: absolute;
    top: 50%;
    width: 4px
}

.clock__marks__1 {
    -webkit-transform: rotate(30deg) translateY(46px);
    transform: rotate(30deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__1 {
        -webkit-transform: rotate(30deg) translateY(3.33em);
        transform: rotate(30deg) translateY(3.33em)
    }
}

.clock__marks__2 {
    -webkit-transform: rotate(60deg) translateY(46px);
    transform: rotate(60deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__2 {
        -webkit-transform: rotate(60deg) translateY(3.33em);
        transform: rotate(60deg) translateY(3.33em)
    }
}

.clock__marks__3 {
    -webkit-transform: rotate(90deg) translateY(46px);
    transform: rotate(90deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__3 {
        -webkit-transform: rotate(90deg) translateY(3.33em);
        transform: rotate(90deg) translateY(3.33em)
    }
}

.clock__marks__4 {
    -webkit-transform: rotate(120deg) translateY(46px);
    transform: rotate(120deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__4 {
        -webkit-transform: rotate(120deg) translateY(3.33em);
        transform: rotate(120deg) translateY(3.33em)
    }
}

.clock__marks__5 {
    -webkit-transform: rotate(150deg) translateY(46px);
    transform: rotate(150deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__5 {
        -webkit-transform: rotate(150deg) translateY(3.33em);
        transform: rotate(150deg) translateY(3.33em)
    }
}

.clock__marks__6 {
    -webkit-transform: rotate(180deg) translateY(46px);
    transform: rotate(180deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__6 {
        -webkit-transform: rotate(180deg) translateY(3.33em);
        transform: rotate(180deg) translateY(3.33em)
    }
}

.clock__marks__7 {
    -webkit-transform: rotate(210deg) translateY(46px);
    transform: rotate(210deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__7 {
        -webkit-transform: rotate(210deg) translateY(3.33em);
        transform: rotate(210deg) translateY(3.33em)
    }
}

.clock__marks__8 {
    -webkit-transform: rotate(240deg) translateY(46px);
    transform: rotate(240deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__8 {
        -webkit-transform: rotate(240deg) translateY(3.33em);
        transform: rotate(240deg) translateY(3.33em)
    }
}

.clock__marks__9 {
    -webkit-transform: rotate(270deg) translateY(46px);
    transform: rotate(270deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__9 {
        -webkit-transform: rotate(270deg) translateY(3.33em);
        transform: rotate(270deg) translateY(3.33em)
    }
}

.clock__marks__10 {
    -webkit-transform: rotate(300deg) translateY(46px);
    transform: rotate(300deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__10 {
        -webkit-transform: rotate(300deg) translateY(3.33em);
        transform: rotate(300deg) translateY(3.33em)
    }
}

.clock__marks__11 {
    -webkit-transform: rotate(330deg) translateY(46px);
    transform: rotate(330deg) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__11 {
        -webkit-transform: rotate(330deg) translateY(3.33em);
        transform: rotate(330deg) translateY(3.33em)
    }
}

.clock__marks__12 {
    -webkit-transform: rotate(1turn) translateY(46px);
    transform: rotate(1turn) translateY(46px)
}

@media (min-width:1200px) {
    .clock__marks__12 {
        -webkit-transform: rotate(1turn) translateY(3.33em);
        transform: rotate(1turn) translateY(3.33em)
    }
}
@media (max-width:1439px) {
    .clock__face {
        border: 0.2em solid #293033;
    }
}
@media (max-width:767px) {
    .clock-info .col-sm-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width:575px) {
    .clock-info .col-sm-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}