// .loader {
//   height: 0;
//   direction: ltr;
//   position: fixed;
//   top: 0;
//   width: 0;
//   margin: 0 auto;
//   .func-start(0);
//   opacity: 0;
//   z-index: 4;
// }

// .load-start ~ .loader {
//   width: 100%;
//   background: var(--config-color-focus);
//   height: 3px;
//   opacity: 1;
//   transition: width .3s ease-out, opacity .5s ease-out;
//   -moz-transition: width .3s ease-out, opacity .5s ease-out;
//   -webkit-transition: width .3s ease-out, opacity .5s ease-out;
//   -o-transition: width .3s ease-out, opacity .5s ease-out;
// }

// .www .load-start ~ .loader {
//   background: #fff;
// }


/*
.load-start > * {
  opacity: 0;
}

.load-end > * {
  opacity: 1;
  transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -webkit-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
}*/

[data-ls-if] {
  display: none;
}

[data-service] {
  opacity: 0;
}

.load-service-start {
  opacity: 0;
}

.load-service-end {
  opacity: 1;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

.load-screen {
  z-index: 100000;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: var(--config-color-background-focus);
  top: 0;
  .func-start(0);

  &.loaded {
    transition: opacity 1s ease-in-out, top 1s .7s;
    opacity: 0;
    top: -100%;
  }

  .animation {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%) translateZ(1px);
    width: 140px;
    height: 140px;
  }

  .animation div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 124px;
    height: 124px;
    margin: 10px;
    border: 10px solid var(--config-color-focus);
    border-radius: 50%;
    animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--config-color-focus) transparent transparent transparent;
  }
  .animation div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .animation div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .animation div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes animation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  // .animation > div {
  //   display: inline-block;
  //   width: 64px;
  //   height: 64px;
  //   margin: 8px;
  //   border-radius: 50%;
  //   background: var(--config-color-focus);
  //   animation: animation 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  // }
  // @keyframes animation {
  //   0%, 100% {
  //     animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  //   }
  //   0% {
  //     transform: rotateY(0deg);
  //   }
  //   50% {
  //     transform: rotateY(1800deg);
  //     animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  //   }
  //   100% {
  //     transform: rotateY(3600deg);
  //   }
  // }

  img {
    position: absolute;
    height: 20px;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}