
/* @keyframes loader-show {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes loader-hide {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes loader-move {
    from { opacity: 0; z-index: -1; transform: scale(0); }
    to { opacity: 1; z-index: 100; transform: scale(1); }
}
@keyframes loader-move {
    0%   { z-index: -10; }
    1%   { z-index: 998; }
    100% { z-index: 999; }
} */
@keyframes loader-transform {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
@keyframes loader-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2e4b53;
    overflow: hidden;
    z-index: 999;
    transform: scale(1);
    transition: background-color .5s ease, transform .5s ease-in-out;
}

#loader-container.hidden {
    transform: scale(0);
}
  
#loader-error {
  height: 200px;
  width: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -70px;
  margin-left: -70px;
  font-size: 40px;
  text-align: center;
  color: #f44336;
}

#loader-error > i {
    font-size: 140px;
}

#loader-error.hidden {
    display: none;
}

#loader-animation.hidden {
    display: none;
}

.loader-grid {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -80px;
    width: 160px;
    height: 160px;
}
.loader-grid div {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    animation: loader-grid 1.2s linear infinite;
}
.loader-grid div:nth-child(1) {
    top: 16px;
    left: 16px;
    animation-delay: 0s;
}
.loader-grid div:nth-child(2) {
    top: 16px;
    left: 64px;
    animation-delay: -0.4s;
}
.loader-grid div:nth-child(3) {
    top: 16px;
    left: 112px;
    animation-delay: -0.8s;
}
.loader-grid div:nth-child(4) {
    top: 64px;
    left: 16px;
    animation-delay: -0.4s;
}
.loader-grid div:nth-child(5) {
    top: 64px;
    left: 64px;
    animation-delay: -0.8s;
}
.loader-grid div:nth-child(6) {
    top: 64px;
    left: 112px;
    animation-delay: -1.2s;
}
.loader-grid div:nth-child(7) {
    top: 112px;
    left: 16px;
    animation-delay: -0.8s;
}
.loader-grid div:nth-child(8) {
    top: 112px;
    left: 64px;
    animation-delay: -1.2s;
}
.loader-grid div:nth-child(9) {
    top: 112px;
    left: 112px;
    animation-delay: -1.6s;
}

@keyframes loader-grid {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
/* 
.loader-ltr {
    width: 100%;
    top: 50%;
    margin-top: -3rem;
    height: 6rem;
    position: relative;
    filter: url(#gooey);
}
  
    .loader-ltr > * {
        position: absolute;
        display: inline-block;
        left: 0;
        width: 6rem;
        height: 6rem;
        background: #1EE4F2;
        border-radius: 50%;
        animation: loading 4s infinite;
        transform: scale(.1);
        opacity: 0;
    }
        
        .loader-ltr > *:nth-child(1) {
            animation-delay: .5s;
        }
        .loader-ltr > *:nth-child(2) {
            animation-delay: 1s;
        }
        .loader-ltr > *:nth-child(3) {
            animation-delay: 1.5s;
        }
        .loader-ltr > *:nth-child(4) {
            animation-delay: 2s;
        }


svg {
    display: none;
}

@keyframes loading {
    50% {
        transform: scale(1.25);
        left: 47%;
        opacity: 1;
    }
    100% {
        transform: scale(.1);
        left: 100%;
        opacity: 0;
    }
} */
  