html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.card-holder {
    position: relative;
    height: 100vh;
    width: 100vw;
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    animation: fadein 3s;
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-moz-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-o-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

.card-holder img {
    display: block;
    max-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
}

#clock {
    position: absolute;
    bottom: 1vw;
    display: block;
    width: 100%;
    text-align: center;
    font-family: Lora, serif;
    font-style: italic;
}

#clock .cd-block {
    display: inline-block;
    min-width: 8.25vh;
    margin: .3vh;
    font-size: 1.5vh;
}

#clock .cd-num {
    padding: .9vh;
    background-color: #fcf8ed;
    border: 2px solid #f0db9c;
    font-size: 4.5vh;
    color: #ba922e;
}

#clock .cd-val {
    text-align: left;
    margin-top: .3vh;
    font-size: 1.65vh;
    text-transform: uppercase;
    color: #ba922e;
   
}

@media screen and (max-width: 768px) {
    #clock {
        bottom: 3vw;
    }
    #clock .cd-block {
        margin: .4vh;
        font-size: 2vh;
        min-width: 11vh;
    }

    #clock .cd-num {
        padding: 1.2vh;
        font-size: 6vh;
    }

    #clock .cd-val {
        margin-top: .4vh;
        font-size: 2.2vh;
    }
}