/* ==========================================================================
   Loading animation
   ========================================================================== */

#loadingScreen {
    position:           fixed;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    z-index:            10;
    overflow:           hidden;
    background:         #FFF;
    -webkit-transition: opacity .3s, z-index 1s;
    transition:         opacity .3s, z-index 1s;
    opacity:            1;
    display:            flex;
    justify-content:    center;
    align-items:        center;
}

.no-js #loadingScreen {
    display: none;
}

.loaded #loadingScreen {
    opacity: 0;
    z-index: -1;
}

#unload {
    z-index:            -1;
    background:         #FFF;
    opacity:            0;
    position:           fixed;
    top:                0;
    left:               0;
    width:              100%;
    height:             100vh;
    -webkit-transition: opacity .3s;
    transition:         opacity .3s;
}

.unload #unload {
    opacity: 1;
    z-index: 99;
}

.bars,
.bars:before,
.bars:after {
    background:        #961B1D;
    -webkit-animation: load1 1s infinite ease-in-out;
    animation:         load1 1s infinite ease-in-out;
    width:             1em;
    height:            4em;
}

.bars {
    color:                   #961B1D;
    text-indent:             -9999em;
    position:                relative;
    font-size:               11px;
    -webkit-transform:       translateZ(0);
    -ms-transform:           translateZ(0);
    transform:               translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay:         -0.16s;
}

.bars:before,
.bars:after {
    position: absolute;
    top:      0;
    content:  '';
}

.bars:before {
    left:                    -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay:         -0.32s;
}

.bars:after {
    left: 1.5em;
}

@-webkit-keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height:     4em;
    }
    40% {
        box-shadow: 0 -2em;
        height:     5em;
    }
}

@keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height:     4em;
    }
    40% {
        box-shadow: 0 -2em;
        height:     5em;
    }
}