main {
    display: none;
  }
  body.loading {
    overflow: hidden;
    max-height: 100vh;
    padding: 0 0;
  }
  .preloader {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(124deg, #6dd2d2, #fdd31d, #fda6af, #28d425);
    background-size: 5000% 1800%;
  -webkit-animation: rainbow 6s ease infinite;
  -z-animation: rainbow 6s ease infinite;
  -o-animation: rainbow 6s ease infinite;
    animation: rainbow 6s ease infinite;
    overflow: hidden;
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 0;
  }
  @-webkit-keyframes rainbow {
    8%{background-position:0% 0%}
    16%{background-position:33% 0%}
    24%{background-position:33% 0%}
    32%{background-position:74% 0%}
    40%{background-position:74% 0%}
    48%{background-position:100% 0%}
    56%{background-position:100% 0%}
    64%{background-position:74% 0%}
    72%{background-position:74% 0%}
    80%{background-position:33% 0%}
    88%{background-position:33% 0%}
    96%{background-position:0% 0%}

}
@-moz-keyframes rainbow {
  8%{background-position:0% 0%}
    16%{background-position:33% 0%}
    24%{background-position:33% 0%}
    32%{background-position:74% 0%}
    40%{background-position:74% 0%}
    48%{background-position:100% 0%}
    56%{background-position:100% 0%}
    64%{background-position:74% 0%}
    72%{background-position:74% 0%}
    80%{background-position:33% 0%}
    88%{background-position:33% 0%}
    96%{background-position:0% 0%}
}
@-o-keyframes rainbow {
  8%{background-position:0% 0%}
    16%{background-position:33% 0%}
    24%{background-position:33% 0%}
    32%{background-position:74% 0%}
    40%{background-position:74% 0%}
    48%{background-position:100% 0%}
    56%{background-position:100% 0%}
    64%{background-position:74% 0%}
    72%{background-position:74% 0%}
    80%{background-position:33% 0%}
    88%{background-position:33% 0%}
    96%{background-position:0% 0%}
}
@keyframes rainbow { 
  8%{background-position:0% 0%}
    16%{background-position:33% 0%}
    24%{background-position:33% 0%}
    32%{background-position:74% 0%}
    40%{background-position:74% 0%}
    48%{background-position:100% 0%}
    56%{background-position:100% 0%}
    64%{background-position:74% 0%}
    72%{background-position:74% 0%}
    80%{background-position:33% 0%}
    88%{background-position:33% 0%}
    96%{background-position:0% 0%}
}
  .preloader .container,
  .preloader .border {
    width: 10vh;
    height: 10vh;
    background: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    -webkit-clip-path: polygon(0% 50%, 25% 95%, 75% 95%, 100% 50%, 75% 5%, 25% 5%);
    clip-path: polygon(0% 50%, 25% 95%, 75% 95%, 100% 50%, 75% 5%, 25% 5%);
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  }
  .preloader .container .border,
  .preloader .border .border {
    width: 95%;
    height: 95%;
  }
  .preloader .container .border .content,
  .preloader .border .border .content {
    width: 150%;
    height: 100%;
    background: #6dd2d2;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-animation: contentAnimation 2s infinite linear;
    animation: contentAnimation 2s infinite linear;
    transform-origin: center top;
  }
  @-webkit-keyframes contentAnimation {
    0% {
      transform: translateX(-50%) rotate(0deg);
    }
    100% {
      transform: translateX(-50%) rotate(-360deg);
    }
  }
  @keyframes contentAnimation {
    0% {
      transform: translateX(-50%) rotate(0deg);
    }
    100% {
      transform: translateX(-50%) rotate(-360deg);
    }
  }