/* ------------------------------------------------------------------
/*	a. spinner
		Masking the page
	b. loader
		Adapted from:
		A PEN BY Dave McCarthy - https://codepen.io/AsLittleDesign/pen/ZbVVwa
/* ------------------------------------------------------------------ */

#spinner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    z-index: 9999;
    height: 100%;
}
.slow-connection-warning {
    position: fixed;
    top: 60%;
    text-align: center;
    color: rgba(255,255,255,0.8);
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.4s;
    white-space: nowrap;
    animation: fadein 0.5s linear 4s infinite alternate;
    font-weight: bold;
}
.loader {
    overflow: hidden;
}
.loader--dot {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 45%;
    left: -20%;
    border-radius: 50%;
}
.loader--dot:first-child {
    background-color: #8cc759;
    animation: move 2s infinite cubic-bezier(.2,.64,.81,.23);
}
.loader--dot:nth-child(2) {
    background-color: #8c6daf;
    animation: move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23);
}
.loader--dot:nth-child(3) {
    background-color: #ef5d74;
    animation: move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23);
}
.loader--dot:nth-child(4) {
    background-color: #f9a74b;
    animation: move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23);
}
.loader--dot:nth-child(5) {
    background-color: #60beeb;
    animation: move 2s 600ms infinite cubic-bezier(.2,.64,.81,.23);
}
@keyframes move {
    0% { left: -20%; }
    100% { left: 120%; }
}
@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}