/* Loader Animation Styles */
.page-load-animation {
  position: relative;
  z-index: 1000;
}

.center-content {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  z-index: 13;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  opacity: 1;
  will-change: transform;
  -webkit-animation: fade-in 500ms ease-in 0s 1, rorate 2.5s linear 0s 1, fade-out 500ms ease-out 2s 1;
  animation: fade-in 500ms ease-in 0s 1, rorate 2.5s linear 0s 1, fade-out 500ms ease-out 2s 1;
}

.curtain-container {
  position: fixed;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10;
}

.curtain {
  will-change: transform;
  -webkit-transition: width 500ms ease-out;
  transition: width 500ms ease-out;
  background-color: #000;
  width: 50%;
}

.curtain-container.animate-curtains .curtain {
  width: 0;
}

.flash-line {
  position: absolute;
  top: 0;
  width: 3px;
  background-color: #fff;
  background-color: #eee;
  will-change: transform, opacity;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transition: transform 1000ms ease-out;
  transition: transform 1000ms ease-out;
  z-index: 99999;
  height: 100%;
}

.flash-line.animate-flash {
  -webkit-animation: fade-in 500ms ease-in 0s 1, fade-out 200ms ease-out 1000ms 1;
  animation: fade-in 500ms ease-in 0s 1, fade-out 200ms ease-out 1000ms 1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

@-webkit-keyframes rorate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rorate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}