/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */


.fadeout {
  animation: fadeOut .6s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

.fadein {
  animation: fadeIn .6s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

#loading {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(40, 40, 40, .5);
  transition: all .5s linear;
}

.hidden {
  z-index: -999999 !important;
  opacity: 0;
  background-color: transparent;
  transition: all .5s linear;
  display: none;
}

.formLoader {
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot-spin {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: transparent;
  color: transparent;
  box-shadow: 0 -18px 0 0 rgba(255,215,51, 1), 12.727926px -12.727926px 0 0 rgba(255,215,51, 1), 18px 0 0 0 rgba(255,215,51, 1), 12.727926px 12.727926px 0 0 rgba(255,215,51, 0), 0 18px 0 0 rgba(255,215,51, 0), -12.727926px 12.727926px 0 0 rgba(255,215,51, 0), -18px 0 0 0 rgba(255,215,51, 0), -12.727926px -12.727926px 0 0 rgba(255,215,51, 0);
  animation: dot-spin 2s infinite linear;
}

@keyframes dot-spin {

  0%,
  100% {
    box-shadow: 0 -18px 0 0 rgba(255,215,51, 1), 12.727926px -12.727926px 0 0 rgba(255,215,51, 1), 18px 0 0 0 rgba(255,215,51, 1), 12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), 0 18px 0 -5px rgba(255,215,51, 0), -12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), -18px 0 0 -5px rgba(255,215,51, 0), -12.727926px -12.727926px 0 -5px rgba(255,215,51, 0);
  }

  12.5% {
    box-shadow: 0 -18px 0 -5px rgba(255,215,51, 0), 12.727926px -12.727926px 0 0 rgba(255,215,51, 1), 18px 0 0 0 rgba(255,215,51, 1), 12.727926px 12.727926px 0 0 rgba(255,215,51, 1), 0 18px 0 -5px rgba(255,215,51, 0), -12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), -18px 0 0 -5px rgba(255,215,51, 0), -12.727926px -12.727926px 0 -5px rgba(255,215,51, 0);
  }

  25% {
    box-shadow: 0 -18px 0 -5px rgba(255,215,51, 0), 12.727926px -12.727926px 0 -5px rgba(255,215,51, 0), 18px 0 0 0 rgba(255,215,51, 1), 12.727926px 12.727926px 0 0 rgba(255,215,51, 1), 0 18px 0 0 rgba(255,215,51, 1), -12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), -18px 0 0 -5px rgba(255,215,51, 0), -12.727926px -12.727926px 0 -5px rgba(255,215,51, 0);
  }

  37.5% {
    box-shadow: 0 -18px 0 -5px rgba(255,215,51, 0), 12.727926px -12.727926px 0 -5px rgba(255,215,51, 0), 18px 0 0 -5px rgba(255,215,51, 0), 12.727926px 12.727926px 0 0 rgba(255,215,51, 1), 0 18px 0 0 rgba(255,215,51, 1), -12.727926px 12.727926px 0 0 rgba(255,215,51, 1), -18px 0 0 -5px rgba(255,215,51, 0), -12.727926px -12.727926px 0 -5px rgba(255,215,51, 0);
  }

  50% {
    box-shadow: 0 -18px 0 -5px rgba(255,215,51, 0), 12.727926px -12.727926px 0 -5px rgba(255,215,51, 0), 18px 0 0 -5px rgba(255,215,51, 0), 12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), 0 18px 0 0 rgba(255,215,51, 1), -12.727926px 12.727926px 0 0 rgba(255,215,51, 1), -18px 0 0 0 rgba(255,215,51, 1), -12.727926px -12.727926px 0 -5px rgba(255,215,51, 0);
  }

  62.5% {
    box-shadow: 0 -18px 0 -5px rgba(255,215,51, 0), 12.727926px -12.727926px 0 -5px rgba(255,215,51, 0), 18px 0 0 -5px rgba(255,215,51, 0), 12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), 0 18px 0 -5px rgba(255,215,51, 0), -12.727926px 12.727926px 0 0 rgba(255,215,51, 1), -18px 0 0 0 rgba(255,215,51, 1), -12.727926px -12.727926px 0 0 rgba(255,215,51, 1);
  }

  75% {
    box-shadow: 0 -18px 0 0 rgba(255,215,51, 1), 12.727926px -12.727926px 0 -5px rgba(255,215,51, 0), 18px 0 0 -5px rgba(255,215,51, 0), 12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), 0 18px 0 -5px rgba(255,215,51, 0), -12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), -18px 0 0 0 rgba(255,215,51, 1), -12.727926px -12.727926px 0 0 rgba(255,215,51, 1);
  }

  87.5% {
    box-shadow: 0 -18px 0 0 rgba(255,215,51, 1), 12.727926px -12.727926px 0 0 rgba(255,215,51, 1), 18px 0 0 -5px rgba(255,215,51, 0), 12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), 0 18px 0 -5px rgba(255,215,51, 0), -12.727926px 12.727926px 0 -5px rgba(255,215,51, 0), -18px 0 0 -5px rgba(255,215,51, 0), -12.727926px -12.727926px 0 0 rgba(255,215,51, 1);
  }
}