
/********************************************/
/*
/* 02 Spinners
/*
/********************************************/
.valign-wrapper{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
 .valign-wrapper .valign{display:block}
 
.spinner-dot-in,
.spinner-dot-stick,
.spinner-double-dot-stick,
.spinner-dot-out,
.spinner-double-dot-out,
.spinner-double-dot-in,
.spinner-wave-out,
.spinner-wave-in,
.spinner-double-wave-out,
.spinner-double-wave-in,
.spinner-huge-wave-out,
.spinner-huge-wave-in,
.spinner-section,
.spinner-section-in,
.spinner-double-section-in,
.spinner-section-out,
.spinner-double-section-out,
.spinner-section-far,
.spinner-double-section-far,
.spinner-double-section {
  display: block;
  float: left;
  width: 60px;
  height: 60px;
  border: 3.75px solid #9e9e9e;
  border-radius: 50%;
  animation: spinner 2s linear infinite;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.spinner-dot-in,
.spinner-dot-stick,
.spinner-double-dot-stick,
.spinner-dot-out,
.spinner-double-dot-out,
.spinner-double-dot-in {
  position: relative;
}


.spinner-dot-in::before,
.spinner-dot-stick::before,
.spinner-double-dot-stick::before,
.spinner-dot-out::before,
.spinner-double-dot-out::before,
.spinner-dot-in::after,
.spinner-dot-stick::after,
.spinner-double-dot-stick::after,
.spinner-dot-out::after,
.spinner-double-dot-out::after,
.spinner-double-dot-in::before,
.spinner-double-dot-in::after {
  position: absolute;
  top: 7.5px;
  left: 26.25px;
  width: 7.5px;
  height: 7.5px;
  background: #fff;
  border-radius: 50%;
  content: '';
}


.spinner-dot-in::after,
.spinner-dot-stick::after,
.spinner-double-dot-stick::after,
.spinner-dot-out::after,
.spinner-double-dot-out::after,
.spinner-double-dot-in::after {
  top: auto;
  bottom: 7.5px;
}


.spinner-dot-in::after {
  display: none;
}


.spinner-dot-stick::before,
.spinner-dot-stick::after,
.spinner-double-dot-stick::before,
.spinner-double-dot-stick::after {
  top: -7.5px;
}


.spinner-dot-stick::after,
.spinner-double-dot-stick::after {
  top: auto;
  bottom: -7.5px;
}


.spinner-dot-stick::after {
  display: none;
}


.spinner-dot-out::before,
.spinner-dot-out::after,
.spinner-double-dot-out::before,
.spinner-double-dot-out::after {
  top: -15px;
}


.spinner-dot-out::after,
.spinner-double-dot-out::after {
  top: auto;
  bottom: -15px;
}


.spinner-dot-out::after {
  display: none;
}


.spinner-wave-out {
  box-shadow: -1.875px -1.875px 0 1.875px #fff;
}


.spinner-wave-in {
  box-shadow: inset -1.875px -1.875px 0 1.875px #fff;
}


.spinner-double-wave-out {
  box-shadow: -1.875px -1.875px 0 1.875px #fff, 1.875px 1.875px 0 1.875px #fff;
}


.spinner-double-wave-in {
  box-shadow: inset -1.875px -1.875px 0 1.875px #fff, inset 1.875px 1.875px 0 1.875px #fff;
}


.spinner-huge-wave-out {
  box-shadow: -1.875px -1.875px 0 7.5px #fff;
}


.spinner-huge-wave-in {
  box-shadow: inset -1.875px -1.875px 0 7.5px #fff;
}


.spinner-section,
.spinner-section-in,
.spinner-double-section-in,
.spinner-section-out,
.spinner-double-section-out,
.spinner-section-far,
.spinner-double-section-far,
.spinner-double-section {
  position: relative;
}


.spinner-section::before,
.spinner-section-in::before,
.spinner-double-section-in::before,
.spinner-section-out::before,
.spinner-double-section-out::before,
.spinner-section-far::before,
.spinner-double-section-far::before,
.spinner-section::after,
.spinner-section-in::after,
.spinner-double-section-in::after,
.spinner-section-out::after,
.spinner-double-section-out::after,
.spinner-section-far::after,
.spinner-double-section-far::after,
.spinner-double-section::before,
.spinner-double-section::after {
  position: absolute;
  top: -3.75px;
  left: -3.75px;
  display: block;
  width: 60px;
  height: 60px;
  border: 3.75px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  content: '';
}


.spinner-section::after,
.spinner-section-in::after,
.spinner-double-section-in::after,
.spinner-section-out::after,
.spinner-double-section-out::after,
.spinner-section-far::after,
.spinner-double-section-far::after,
.spinner-double-section::after {
  border-top-color: transparent;
  border-bottom-color: #fff;
}


.spinner-section::after {
  display: none;
}


.spinner-section-in::before,
.spinner-section-in::after,
.spinner-double-section-in::before,
.spinner-double-section-in::after {
  top: 0;
  left: 0;
  width: 52.5px;
  height: 52.5px;
}


.spinner-section-in::after {
  display: none;
}


.spinner-section-out::before,
.spinner-section-out::after,
.spinner-double-section-out::before,
.spinner-double-section-out::after {
  top: -7.5px;
  left: -7.5px;
  width: 67.5px;
  height: 67.5px;
}


.spinner-section-out::after {
  display: none;
}


.spinner-section-far::before,
.spinner-section-far::after,
.spinner-double-section-far::before,
.spinner-double-section-far::after {
  top: -11.25px;
  left: -11.25px;
  width: 75px;
  height: 75px;
}


.spinner-section-far::after {
  display: none;
}

.spinner-container {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #191919;
}

.spinner-container > div {
  -webkit-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 1;
}

.spinner-container.hide-spinner {
  top: 50%;
  height: 0;
}

.spinner-container.hide-spinner > div {
  opacity: 0;
}
