#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.loader {
    margin: auto;
    position: relative;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    transform-origin: 100% 100%;
    z-index: 1001;
}

.loader1 {
    animation: move1 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move1 {
    from{
        transform: rotate(0) scale(1, 0) translate(-500%, 0) rotate(0);
    }
    20%{
        transform: rotate(0) scale(1, 4) translate(-500%, 0) rotate(0);
    }
    40%{
        transform: rotate(0) scale(1, 4) translate(-600%, 0) rotate(0);
    }
    60%{
        transform: rotate(0) scale(1, 4) translate(-600%, 0) rotate(0);
    }
    80%{
        transform: rotate(0) scale(1, 4) translate(-500%, 0) rotate(0);
    }
    90%{
        transform: rotate(0) scale(1, 0) translate(-500%, 0) rotate(0);
    }
    to{
        transform: rotate(0) scale(1, 0) translate(-500%, 0) rotate(0);
    }
}

.loader2 {
    animation: move2 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move2 {
    from{
        transform: rotate(0) scale(1, 0) translate(-500%, 0) rotate(0);
    }
    20%{
        transform: rotate(0) scale(1, 1) translate(-500%, 0) rotate(0);
    }
    80%{
        transform: rotate(0) scale(1, 1) translate(-500%, 0) rotate(0);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(-500%, 0) rotate(0);
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(-500%, 0) rotate(0);
    } 
}

.loader3 {
    animation: move3 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move3 {
    from{
        transform: rotate(0) scale(1, 0) translate(-300%, 0) rotate(0);
    }
    20%{
        transform: rotate(0) scale(1, 2) translate(-300%, 0) rotate(0);
    }
    40%{
        transform: rotate(0) scale(1, 2) translate(-300%, 0) rotate(0);
    } 
    80%{
        transform: rotate(0) scale(1, 2) translate(-300%, 0) rotate(0);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(-300%, 0) rotate(0);
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(-300%, 0) rotate(0);
    } 
}

.loader4 {
    animation: move4 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move4 {
    from{
        transform: rotate(0) scale(1, 0) translate(-300%, 0) rotate(0);
    }
    20%{
        transform: rotate(0) scale(1, 1) translate(-300%, -200%) rotate(0);
    } 
    40%{
        transform: rotate(0) scale(1, 1) translate(-300%, -300%) rotate(0);
    } 
    60%{
        transform: rotate(0) scale(1, 1) translate(-300%, -300%) rotate(0);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(-300%, 0) rotate(0);
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(-300%, 0) rotate(0);
    } 
}

.loader5 {
    animation: move5 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move5 {
    from{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    }
    20%{
        transform: rotate(0) scale(1, 4) translate(0, 0) rotate(0);
    }
    40%{
        transform: rotate(0) scale(1, 4) translate(-100%, 0) rotate(0);
    } 
    60%{
        transform: rotate(0) scale(1, 4) translate(-100%, 0) rotate(0);
    } 
    80%{
        transform: rotate(0) scale(1, 4) translate(0, 0) rotate(0);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    } 
}

.loader6 {
    animation: move6 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move6 {
    from{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    }
    20%{
        transform: rotate(0) scale(1, 1) translate(0, -300%) rotate(0);
    }
    80%{
        transform: rotate(0) scale(1, 1) translate(0, -300%) rotate(0);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    } 
}

.loader7 {
    animation: move7 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move7 {
    from{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    }
    20%{
        transform: rotate(0) scale(1, 3) translate(0, 0) rotate(0);
    }
    40%{
        transform: rotate(0) scale(1, 3) translate(100%, 0) rotate(0);
    } 
    60%{
        transform: rotate(0) scale(1, 3) translate(100%, 0) rotate(0);
    } 
    80%{
        transform: rotate(0) scale(1, 3) translate(0, 0) rotate(0);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(0, 0) rotate(0);
    } 
}

.loader8 {
    animation: move8 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move8 {
    from{
        transform: rotate(0) scale(1, 0) translate(300%, 0) rotate(0);
    }
    15%{
        transform: rotate(0) scale(1, 4) translate(300%, 0) rotate(0);
    }
    30%{
        transform: rotate(0) scale(1, 4) translate(300%, 0) rotate(0);
    } 
    72%{
        transform: rotate(0) scale(1, 4) translate(300%, 0) rotate(0);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(300%, 0) rotate(0);
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(300%, 0) rotate(0);
    } 
}

.loader9 {
    animation: move9 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move9 {
    from{
        transform: rotate(0) scale(1, 0) translate(300%, 0) rotate(0);
    }
    12%{
        transform: rotate(0) scale(1, 1) translate(300%, -200%) rotate(0);
    }
    24%{
        transform: rotate(0) scale(1, 1) translate(400%, -200%) rotate(0);
    } 
    60%{
        transform: rotate(0) scale(1, 1) translate(400%, -200%) rotate(0);
    } 
    72%{
        transform: rotate(0) scale(1, 1) translate(300%, -200%) rotate(0);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(300%, 0) rotate(0);
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(300%, 0) rotate(0);
    } 
}

.loader10 {
    animation: move10 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    transform-origin: top right;
}

@keyframes move10 {
    from{
        transform: rotate(0) scale(1, 0) translate(300%, 0) rotate(0);
    }
    10%{
        transform: rotate(0) scale(1, 0) translate(300%, -200%) rotate(0);
    }
    20%{
        transform: rotate(0) scale(1, 1) translate(300%, -200%) rotate(0);
    }
    24%{
        transform: rotate(0) scale(1, 1) translate(400%, -200%) rotate(0);
    } 
    35%{
        transform: rotate(0) scale(1, 1) translate(400%, -200%) rotate(180deg);
    } 
    60%{
        transform: rotate(0) scale(1, 1) translate(400%, -200%) rotate(180deg);
    } 
    85%{
        transform: rotate(0) scale(1, 0) translate(400%, 100%) rotate(180deg);
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(400%, 100%) rotate(180deg);
    }     
    to{
        transform: rotate(0) scale(1, 0) translate(400%, 100%) rotate(180deg);
    }  
}

.loader11 {
    animation: move11 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes move11 {
    from{
        transform: rotate(0) scale(1, 1) translate(500%, -300%) rotate(0);
        opacity: 0;
    }
    35%{
        transform: rotate(0) scale(1, 1) translate(500%, -300%) rotate(0);
        opacity: 0;
    }
    36%{
        transform: rotate(0) scale(1, 1) translate(500%, -300%) rotate(0);
        opacity: 1;
    }
    45%{
        transform: rotate(0) scale(1, 1) translate(500%, 0) rotate(0);
        opacity: 1;
    }
    50%{
        transform: rotate(0) scale(1, 2) translate(500%, 0) rotate(0);
        opacity: 1;
    } 
    70%{
        transform: rotate(0) scale(1, 2) translate(500%, 0) rotate(0);
        opacity: 1;
    } 
    90%{
        transform: rotate(0) scale(1, 0) translate(500%, 0) rotate(0);
        opacity: 1;
    } 
    to{
        transform: rotate(0) scale(1, 0) translate(500%, 0) rotate(0);
        opacity: 1;
    } 
}




#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222222;
  z-index: 1000;
  transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  transform: translateY(100%);
  transition: all 0.1s 1s cubic-bezier(0.65, 0, 0.35, 1);
}