@charset "UTF-8";

/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */

[class*=loader] {
    position: relative;
    margin: 0 auto;
    cursor: wait;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.loader-gears {
    width: 3em;
    height: 3em;
    overflow: hidden;
    border-radius: 0.25em;
    box-shadow: 0 0 0 0.1em #083D56, inset 0 0 0 3em rgba(8, 61, 86, 0.5);
}

#toggle:checked~#sect .loader-gears {
    filter: drop-shadow(0.5em 0.5em 0.25em rgba(0, 0, 0, 0.25));
}

.loader-gears:before,
.loader-gears:after {
    content: "";
    z-index: 1;
    display: block;
    position: absolute;
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
    border: 0.16em dashed #081E3F;
    box-shadow: inset 0 0 0 0.9em #081E3F;
    -webkit-animation: gear-rotate infinite linear 3s forwards;
    animation: gear-rotate infinite linear 3s forwards;
}

.loader-gears:before {
    left: -0.7em;
    top: 1.1em;
}

#toggle:not(:checked)~#sect .loader-gears:before {
    filter: drop-shadow(0 0 1.15em #19a6cf);
}

#toggle:checked~#sect .loader-gears:before {
    -webkit-animation: gear-rotate infinite linear 3s forwards, gear-glow infinite linear 6s forwards;
    animation: gear-rotate infinite linear 3s forwards, gear-glow infinite linear 6s forwards;
}

.loader-gears:after {
    left: 1.15em;
    top: -0.85em;
    animation-direction: reverse;
}

@-webkit-keyframes gear-rotate {
    to {
        transform: rotate(359deg);
    }
}

@keyframes gear-rotate {
    to {
        transform: rotate(359deg);
    }
}

@-webkit-keyframes gear-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(25, 166, 207, 0));
    }
    60% {
        filter: drop-shadow(0 0 1.75em #19a6cf);
    }
}

@keyframes gear-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(25, 166, 207, 0));
    }
    60% {
        filter: drop-shadow(0 0 1.75em #19a6cf);
    }
}

*:focus {
    outline: 0;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}