@font-face {
    font-family: 'Digital-7';
    src: url('fonts/digital-7.ttf') format('woff2'), b, g, mdrx url('digital-7.woff') format('woff');
}

.clockdate-wrapper {

    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    max-width: 250px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    margin: 0 auto;

}

.carousel-caption {
    position: relative;
}

#clockdate {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 18px;
}

#clock {
    font-family: roboto, 'sans-serif' !important;
    font-size: 90px;
    text-shadow: 0px 0px 1px #fff;
    color: #fff;
}

#clock1 {
    font-family: roboto, 'sans-serif' !important;
    font-size: 90px;
    text-shadow: 0px 0px 1px #fff;
    color: #fff;
}

/* #clock2{
    font-family: roboto, 'sans-serif';
    font-size:90px;
    text-shadow:0px 0px 1px #fff;
    color:#fff;
} */

#clock3 {
    font-family: roboto, 'sans-serif' !important;
    font-size: 90px;
    text-shadow: 0px 0px 1px #fff;
    color: #fff;
}

#clock4 {
    font-family: roboto, 'sans-serif' !important;
    font-size: 90px;
    text-shadow: 0px 0px 1px #fff;
    color: #fff;
}

#clock span {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0px 0px 1px #333;
    font-size: 50px;
    position: relative;
    top: -5px;
    left: 10px;
}

#date {
    letter-spacing: 3px;
    font-size: 14px;
    font-family: arial, sans-serif;
    color: #fff;
}

#date1 {
    letter-spacing: 3px;
    font-size: 14px;
    font-family: arial, sans-serif;
    color: #fff;
}

/* #date2 {
    letter-spacing:3px;
    font-size:14px;
    font-family:arial,sans-serif;
    color:#fff;
} */
#date3 {
    letter-spacing: 3px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif !important;
    color: #fff;
}

#date4 {
    letter-spacing: 3px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif !important;
    color: #fff;
}

@media(max-width:767px) {

    .clockdate-wrapper {

        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        max-width: 250px;
        width: 100%;
        text-align: center;
        border-radius: 5px;
        margin: 0 auto;

    }

    #clock {
        font-family: roboto, 'sans-serif' !important;
        font-size: 30px;/*40px;*/
        text-shadow: 0px 0px 1px #fff;
        color: #fff;
    }

    #date {
        letter-spacing: 3px;
        font-size: 12px;
        font-family: arial, sans-serif;
        color: #fff;
    }

    #clock1 {
        font-family: roboto, 'sans-serif' !important;
        font-size: 30px;/*40px;*/
        text-shadow: 0px 0px 1px #fff;
        color: #fff;
    }

    #date1 {
        letter-spacing: 3px;
        font-size: 12px;
        font-family: arial, sans-serif;
        color: #fff;
    }


    #clock3 {
        font-family: roboto, 'sans-serif' !important;
        font-size: 30px;/*40px;*/
        text-shadow: 0px 0px 1px #fff;
        color: #fff;
    }

    #clock4 {
        font-family: roboto, 'sans-serif' !important;
        font-size: 30px;/*40px;*/
        text-shadow: 0px 0px 1px #fff;
        color: #fff;
    }


    #date3 {
        letter-spacing: 3px;
        font-size: 12px;
        font-family: 'Roboto', sans-serif !important;
        color: #fff;
    }

    #date4 {
        letter-spacing: 3px;
        font-size: 12px;
        font-family: 'Roboto', sans-serif !important;
        color: #fff;
    }

    #clockdate {
        position: absolute;
        bottom: 10px;
        right: -9px;
        color: white;
        font-size: 18px;
    }


}