.pre-loader {width: 100%;display: none;height: 100%;position: fixed;top: 0px;left: 0;background: rgba(255, 255, 255, 0.9);z-index: 5000;}
[state="loggedin"] .pre-loader {width: 100%;display: none;height: 100%;position: fixed;top: 73px;left: 0;background: rgba(255, 255, 255, 0.9);z-index: 99;}
i.fa.fa-cog.rotating-1 {color: #FFF;font-size: 115px;text-shadow: 0px 0px 7px #000;}
i.fa.fa-cog.rotating-2 {color: #FFF;font-size: 66px;right: 25px;position: absolute;top: 25px;text-shadow: 0px 0px 7px #000;}
.init i.fa.fa-cog.rotating-1, .init i.fa.fa-cog.rotating-2 {color: #000;text-shadow: 0px 0px 2px #FFF;}
.pre-loader p {font-size: 20px;color: #FFF;text-align: center;position: relative;bottom: -27px;}
.wrap {width: 104px;margin: 0 auto;position: relative;top: 30%;transform: scale(0.8);}
.spinner {width: 70px;position: absolute;left: calc(50% - 35px);top: 40%;}
.spinner > div {width: 18px;height: 18px;background-color: #1ABB9C;border-radius: 100%;display: inline-block;-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce1 {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}
.spinner .bounce2 {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;}
.yellow .spinner > div{background-color: #FDB45C;}
.red .spinner > div{background-color: #ea5a5a;}
.green .spinner > div{background-color: #1abb9c;}
.blue .spinner > div{background-color: #00ADF9;}
.padding-top-50{padding-top: 50%;}
.modal-open .pre-loader {z-index: 1500;top: 0;}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}