/*--------------------- CLOCK -----------------------*/

.story-circle-line {
    width: 100%;
}

.clock svg,
.clock-side svg { /* svg into : object, img or inline */
    display: block;
}

.clock {
    display: block;
    position: relative;
    text-align: center;
    color: white;
}

.clock-side {
    text-align: center;
    position: fixed;

    left: 50px;
    width: 100px;
    z-index: 51;

    top: 100px;
}

.clock circle {
    fill: rgba(255, 255, 255, 0.25);
    stroke: #EF6155;
    stroke-width: 3.0;

    stroke-dasharray: 30;

    animation: clock-intro 2.0s;
    animation-timing-function: ease-out;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.clock-side circle.clock-gauge {
    fill: transparent;
    stroke: #EF6155;
    stroke-width: 3.0;
    opacity: 1.0;

    stroke-dasharray: 300;
}

.clock-side svg {
    transform: rotate(-90deg);
}

.clock-side circle.clock-gauge-track {
    fill: white;
    stroke: black;
    stroke-width: 1.0;
    opacity: 1.0;
}

@keyframes clock-intro {
    from {
        opacity: 0;
        stroke-dasharray: 0;
    }
    to {
        stroke-dasharray: 410;
        opacity: 0.8;
    }
}

.clock-text-wrapper {
    font-family: "Garamond", serif;
    font-weight: normal;
    color: black;
    position: absolute;

    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10;
}

.clock-side .clock-text-wrapper {
    color: #022347;
}

.clock-text {
    position: absolute;
    width: 100%;
}

.clock-date {
    top: 37%;
    font-size: 2vw;
}

@media (max-width: 768px) {
    .clock-date {
        top: 41%;
        font-size: 3.25vw;
    }
}

.clock-time {
    top: 42%;
    font-size: 2.5vw;
    font-weight: bold;
}

@media (max-width: 768px) {
    .clock-time {
        top: 48%;
        font-size: 4.25vw;
    }
}

.clock .clock-intro {
    top: 51%;
    font-size: 2vw;
    line-height: 0.8;
    font-family: 'Caveat', cursive;
}

.clock-intro-inner {
    width: 16%;
    margin: auto;
}

@media (max-width: 768px) {
    .clock .clock-intro {
        display: none;
    }
}

/* clock side */
.clock-side .clock-text-wrapper {
    font-size: 1em;
}

.clock-side .clock-date {
    top: 25%;
    font-size: 1.2em;
}

.clock-side .clock-time {
    top: 45%;
    font-size: 1.6em;
    font-weight: bold;
}