/***********************************
PAGE LOAD ANIMATION
***********************************/
// #page-load-animaiton {
//   width: 100%;
//   height: 100%;
//   display: flex;
//   z-index: 9999;
//   padding: 20px;
//   position: fixed;
//   align-items: center;
//   align-content: center;
//   justify-content: center;

//   display: none;

//   &:after {
//       width: 100%;
//       height: 100%;
//       content: "";
//       z-index: -1;
//       opacity: 0.99;
//       line-height: 450px;
//       position: absolute;
//       backdrop-filter: blur(9px);
//       background-color: $dark_white;
//       -webkit-backdrop-filter: blur(9px);
//       --webkit-backdrop-filter: blur(9px); 
//   }
// }

.preloader {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  cursor: default;
  position: fixed;
  z-index: 9999999;
  align-items: center;
  justify-content: center;

  .animation-preloader {
      z-index: 1000;

      .spinner {
          animation: spinner 1s infinite linear;
          border-radius: 50%;
          border: 3px solid rgba(0, 0, 0, 0.2);
          border-top-color: #342;
          height: 9em;
          margin: 0 auto 3.5em auto;
          width: 9em;

          @media (max-width: 767px) {
              width: 7.5em;
              height: 7.5em;
              margin: 0 auto 1.5em auto;
          }
      }

      .txt-loading { 
          font-size: 80px;
          line-height: 118px;
          text-align: center;
          user-select: none;
          font-weight: 700;

          @media (max-width: 767px) {
            font-size: 50px;
            line-height: 77px;
          }

          @media (max-width: 575px) {
            font-size: 36px;
            line-height: 58px;
        }

          .letters-loading {
              color: $red;
              position: relative;

              &:nth-child(2):before {
                  animation-delay: 0.2s;
              }

              &:nth-child(3):before {
                  animation-delay: 0.4s;
              }

              &:nth-child(4):before {
                  animation-delay: 0.6s;
              }

              &:nth-child(5):before {
                  animation-delay: 0.8s;
              }

              &:nth-child(6):before {
                  animation-delay: 1s;
              }

              &:nth-child(7):before {
                  animation-delay: 1.2s;
              }

              &:nth-child(8):before {
                  animation-delay: 1.4s;
              }

              &::before {
                  animation: letters-loading 4s infinite;
                  color: $primary;
                  content: attr(data-text-preloader);
                  left: 0;
                  opacity: 0; 
                  position: absolute;
                  top: -3px;
                  transform: rotateY(-90deg);
              }
          }
      }
  }

  p {
      font-size: 15px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 8px;
      color: $textcolor;
  }

  .loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 0;
      z-index: 1;
      pointer-events: none;

      .row {
          height: 100%;
      }

      .loader-section {
          padding: 0px;

          .bg {
              background-color: #fff;
              height: 100%;
              left: 0;
              width: 100%;
              transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
          }
      }
  }

  &.loaded {
      .animation-preloader {
          opacity: 0;
          transition: 0.3s ease-out;
      }

      .loader-section {
          .bg {
              width: 0;
              transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
          }
      }
  }
}