.loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 111;
    display: none;
    width: 100%;
    background-color: rgb(255 255 255 / 85%)
}
.loader .loadercolumn{
    position: absolute;
    margin: -25px 0 0 -25px;
    box-sizing: border-box;
    overflow: hidden;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    background: transparent;
}
.loadercontainer {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
}
.loadercontainer.animation-1 {
  transform: rotate(45deg);
}
.loadercontainer.animation-2, .loadercontainer.animation-3, .loadercontainer.animation-4 {
  -webkit-animation: rotation 1s infinite;
          animation: rotation 1s infinite;
}
.loadercontainer.animation-3 .shape1 {
  border-top-left-radius: 10px;
}
.loadercontainer.animation-3 .shape2 {
  border-top-right-radius: 10px;
}
.loadercontainer.animation-3 .shape3 {
  border-bottom-left-radius: 10px;
}
.loadercontainer.animation-3 .shape4 {
  border-bottom-right-radius: 10px;
}
.loadercontainer .shape {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 1px;
}
.loadercontainer .shape.shape1 {
  left: 0;
  background-color: #FF6363;
}
.loadercontainer .shape.shape2 {
  right: 0;
  background-color: #F8B400;
}
.loadercontainer .shape.shape3 {
  bottom: 0;
  background-color: #069A8E;
}
.loadercontainer .shape.shape4 {
  bottom: 0;
  right: 0;
  background-color: #3463ff;
}
@-webkit-keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animation-3 .shape1 {
  -webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
          animation: animation3shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape1 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(5px, 5px);
  }
}
@keyframes animation3shape1 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(5px, 5px);
  }
}
.animation-3 .shape2 {
  -webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
          animation: animation3shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape2 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-5px, 5px);
  }
}
@keyframes animation3shape2 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-5px, 5px);
  }
}
.animation-3 .shape3 {
  -webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
          animation: animation3shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape3 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(5px, -5px);
  }
}
@keyframes animation3shape3 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(5px, -5px);
  }
}
.animation-3 .shape4 {
  -webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
          animation: animation3shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape4 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-5px, -5px);
  }
}
@keyframes animation3shape4 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-5px, -5px);
  }
}