#timer {
    z-index: 10;
}

.caption {
    position: absolute;
    display: inline-block;
    left: 50%;
    top: 10vh;
    transform: translateX(-50%);
    font-size: 8vw;
    color: white;
    text-align: center;
    width: 100vw;

}
.glow {
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}
.timeBlock {
    margin: 2vw;
    display: inline-block;
    color: white;
    text-align: center;
}

.timeNumber {
    display: inline-block;
    font-size: 5vw;
}

.timeNumber.zoom {
    animation: zoomOut 0.5s;
}

.timeText {
    display: inline-block;
    font-size: 1.5vw;
}

.timerHolder {
    position: absolute;
    left: 50%;
    top: 30vh;
    transform: translateX(-50%);
    width: 60vw;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius:5px;
}

@keyframes zoomOut {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.3);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ab6c1f, 0 0 40px #ab6c1f, 0 0 50px #ab6c1f, 0 0 60px #ab6c1f, 0 0 70px #ab6c1f;
    }
    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #e39f2e, 0 0 40px #e39f2e, 0 0 50px #e39f2e, 0 0 60px #e39f2e, 0 0 70px #e39f2e, 0 0 80px #e39f2e;
    }
}


@media (orientation: portrait) {
    .caption {
        font-size: 12vw;
    }

    .timerHolder {
        top: 20vh;
        width: 90vw;
    }

    .timeNumber {
        font-size: 9vw;
    }

    .timeText {
        font-size: 4.5vw;
    }
}