.loader-overlay {
  background: rgba(255, 255, 255, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;

  visibility: hidden;
  opacity: 0;

  transition: 0.4s ease;

  &.is-first-launch {
    // if loader is shown for the first time, we will
    // remove opacity and hide the entire site contents
    background: #f2efeb;
  }

  &.is-active {
    opacity: 1;
    visibility: visible;
  }
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
  width: 153px;
  height: 153px;

  &__cube {
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 50px;
    height: 50px;
    background: rgba(35, 35, 35, 0.6);
    display: inline-block;
    animation-iteration-count: infinite;
    animation-duration: 0.5s;
    animation-timing-function: linear;

    &--1 {
      margin: 0 0 0 0;
      animation-name: cube1;
    }

    &--2 {
      margin: 0 0 0 051px;
      animation-name: cube2;
    }

    &--3 {
      margin: 0 0 0 102px;
      animation-name: cube3;
    }

    &--4 {
      margin: 51px 0 0 0;
      animation-name: cube4;
    }

    &--5 {
      margin: 051px 0 0 051px;
    }

    &--6 {
      margin: 51px 0 0 102px;
      animation-name: cube6;
    }

    &--7 {
      margin: 102px 0 0 0;
      animation-name: cube7;
    }

    &--8 {
      margin: 102px 0 0 051px;
      animation-name: cube8;
    }
  }
}

@keyframes cube1 {
  25% {
    margin: 0 0 0 0;
  }
  50% {
    margin: 0 0 0 51px;
  }
  75% {
    margin: 0 0 0 51px;
  }
  100% {
    margin: 0 0 0 51px;
  }
}

@keyframes cube2 {
  25% {
    margin: 0 0 0 51px;
  }
  50% {
    margin: 0 0 0 102px;
  }
  75% {
    margin: 0 0 0 102px;
  }
  100% {
    margin: 0 0 0 102px;
  }
}

@keyframes cube3 {
  25% {
    margin: 51px 0 0 102px;
  }
  50% {
    margin: 51px 0 0 102px;
  }
  75% {
    margin: 51px 0 0 102px;
  }
  100% {
    margin: 51px 0 0 102px;
  }
}

@keyframes cube4 {
  25% {
    margin: 51px 0 0 0;
  }
  50% {
    margin: 51px 0 0 0;
  }
  75% {
    margin: 0 0 0 0;
  }
  100% {
    margin: 0 0 0 0;
  }
}

@keyframes cube6 {
  25% {
    margin: 102px 0 0 102px;
  }
  50% {
    margin: 102px 0 0 102px;
  }
  75% {
    margin: 102px 0 0 102px;
  }
  100% {
    margin: 102px 0 0 51px;
  }
}

@keyframes cube7 {
  25% {
    margin: 102px 0 0 0;
  }
  50% {
    margin: 102px 0 0 0;
  }
  75% {
    margin: 51px 0 0 0;
  }
  100% {
    margin: 51px 0 0 0;
  }
}

@keyframes cube8 {
  25% {
    margin: 102px 0 0 51px;
  }
  50% {
    margin: 102px 0 0 51px;
  }
  75% {
    margin: 102px 0 0 51px;
  }
  100% {
    margin: 102px 0 0 0;
  }
}