.loade-box {

    background: #e7f3dd;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;


    font-size: 70px;



    vertical-align: top;
    transition: 0.3s color, 0.3s border, 0.3s transform, 0.3s opacity;
  }

  [class*=loader-] {
    display: inline-block;
    width: 1em;
    height: 1em;
    color: #386e44;
    vertical-align: middle;
    pointer-events: none;
  }


.loader-16 {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
  }
  .loader-16:before, .loader-16:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    -webkit-animation: 1s spin linear infinite;
            animation: 1s spin linear infinite;
  }
  .loader-16:before {
    transform: rotateX(70deg);
  }
  .loader-16:after {
    transform: rotateY(70deg);
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }

  @-webkit-keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }

  @keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }
  @-webkit-keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
  @keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
  @-webkit-keyframes spin {
    0%, 100% {
      box-shadow: 0.2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: 0.2em 0.2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 0.2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -0.2em 0.2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -0.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -0.2em -0.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -0.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: 0.2em -0.2em 0 0 currentcolor;
    }
  }
  @keyframes spin {
    0%, 100% {
      box-shadow: 0.2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: 0.2em 0.2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 0.2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -0.2em 0.2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -0.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -0.2em -0.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -0.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: 0.2em -0.2em 0 0 currentcolor;
    }
  }







.loader-15 {
    background: currentcolor;
    position: relative;
    -webkit-animation: loader-15 1s ease-in-out infinite;
            animation: loader-15 1s ease-in-out infinite;
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
    width: 0.25em;
    height: 0.5em;
    margin: 0 0.5em;
  }
  .loader-15:after, .loader-15:before {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    background: inherit;
    -webkit-animation: inherit;
            animation: inherit;
  }
  .loader-15:before {
    right: 0.5em;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  .loader-15:after {
    left: 0.5em;
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }

  @-webkit-keyframes loader-15 {
    0%, 100% {
      box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
    }
    50% {
      box-shadow: 0 -0.25em 0 currentcolor, 0 0.25em 0 currentcolor;
    }
  }

  @keyframes loader-15 {
    0%, 100% {
      box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor;
    }
    50% {
      box-shadow: 0 -0.25em 0 currentcolor, 0 0.25em 0 currentcolor;
    }
  }