/* Group 1 */

.gr-1 .el-1 {
  width: 25px;
}

.gr-1 .el-2 {
  width: 45px;
}

.gr-1 .el-3 {
  width: 25px;
}

/* Group 2 */

.gr-2 .el-1 {
  margin-left: -9px;
  width: 50px;
}

.gr-2 .el-2 {
  width: 20px;
  margin-left: 11px;
}

.gr-2 .el-3 {
  margin-left: -9px;
  width: 50px;
}

/* Group 3 */

.gr-3 .el-1 {
  margin-left: 7px;
  width: 35px;
}

.gr-3 .el-2 {
  width: 40px;
  margin-left: -3px;
}

.gr-3 .el-3 {
  margin-left: 7px;
  width: 35px;
}

/* Group 4 */

.gr-4 .el-1 {
  margin-left: 8px;
  width: 30px;
}

.gr-4 .el-2 {
  width: 35px;
  margin-left: 4px;
}

.gr-4 .el-3 {
  margin-left: 8px;
  width: 30px;
}

.loader {
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: #f4f4f4;
  z-index: 999;
}

.loader .l_main {
  position:absolute;
  top:50%;
  left: 50%;
  width:172px;
  height:128px;
  margin:0;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

.done {
  transition: .5s;
  opacity: 0;
  visibility: hidden;
}

/* @media (max-width:550px){.loader{-webkit-transform:scale(0.75);transform:scale(0.75)}}
@media (max-width:440px){.loader{-webkit-transform:scale(0.5);transform:scale(0.5)}} */
.l_square{position:relative}
.l_square:nth-child(1){margin-left:0px;}
.l_square:nth-child(2){margin-left:44px}
.l_square:nth-child(3){margin-left:88px}
.l_square:nth-child(4){margin-left:132px}
.l_square span{position:absolute;top:0px;left:0px;height:30px;width:36px;border-radius:5px;background-color: #cebf3b}
.l_square span:nth-child(1){top:0px}
.l_square span:nth-child(2){top:50px}
.l_square span:nth-child(3){top:94px}
.l_square:nth-child(1) span{-webkit-animation:animsquare1 2s infinite ease-out;animation:animsquare1 2s infinite ease-out}
.l_square:nth-child(2) span{-webkit-animation:animsquare2 2s infinite ease-out;animation:animsquare2 2s infinite ease-out}
.l_square:nth-child(3) span{-webkit-animation:animsquare3 2s infinite ease-out;animation:animsquare3 2s infinite ease-out}
.l_square:nth-child(4) span{-webkit-animation:animsquare4 2s infinite ease-out;animation:animsquare4 2s infinite ease-out}
.l_square span:nth-child(1){-webkit-animation-delay:.0s;animation-delay:.0s}
.l_square span:nth-child(2){-webkit-animation-delay:.15s;animation-delay:.15s}
.l_square span:nth-child(3){-webkit-animation-delay:.30s;animation-delay:.30s}
@-webkit-keyframes animsquare1{0%,5%,95%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}30%,70%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare1{0%,5%,95%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}30%,70%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}}
@-webkit-keyframes animsquare2{0%,10%,90%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}35%,65%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare2{0%,10%,90%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}35%,65%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}}
@-webkit-keyframes animsquare3{0%,15%,85%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}40%,60%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare3{0%,15%,85%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}40%,60%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}}
@-webkit-keyframes animsquare4{0%,20%,80%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}45%,55%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare4{0%,20%,80%,100%{-webkit-transform:translate(0px,0px) rotate(0deg);transform:translate(0px,0px) rotate(0deg)}45%,55%{-webkit-transform:translate(-40px,0px) rotate(-90deg);transform:translate(-40px,0px) rotate(-90deg)}}

.loading-text {
  font-size: 18px;
  position: absolute;
  top: 170px;
  width: 100%;
  text-align: center;
  /* display: none; */
}