/* loader  css start */

.box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.3s color, 0.3s border, 0.3s transform, 0.3s opacity;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;  
  z-index: 1111;
}
.loader {
  width: 0.1em;
  height: 0.1em;
  display: inline-block;
  color: inherit;
  vertical-align: middle;
  pointer-events: none;
  font-size: 80px;
  box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8;
  -webkit-animation: loader-animation 6s infinite;
  animation: loader-animation 6s infinite;
}

@-webkit-keyframes loader-animation {
  0% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8;
  }
  8.33% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8;
  }
  16.66% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8;
  }
  24.99% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  33.32% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8;
  }
  41.65% {
    box-shadow: 0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8;
  }
  49.98% {
    box-shadow: 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8;
  }
  58.31% {
    box-shadow: -0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  66.64% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  74.97% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  83.3% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  91.63% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  100% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8;
  }
}

@keyframes loader-animation {
  0% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8;
  }
  8.33% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8;
  }
  16.66% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8;
  }
  24.99% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  33.32% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8;
  }
  41.65% {
    box-shadow: 0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8;
  }
  49.98% {
    box-shadow: 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8;
  }
  58.31% {
    box-shadow: -0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  66.64% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  74.97% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  83.3% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, 0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  91.63% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8, -0.2em 0.2em 0 0.1em #17a2b8;
  }
  100% {
    box-shadow: -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8, -0.2em -0.2em 0 0.1em #17a2b8;
  }
}