
.site-loading > .layout{
    visibility: hidden;
}

.ctl-site-preloader-wrapper{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    
    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}



.ctl-site-preloader-content {
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);    
    transform: translate(-50%,-50%);  
    
    text-align: center; 
    
    display: none;
}

.ctl-site-preloader-wrapper img{
    max-width: 150px !important;
    display: block;
}

.ctl-site-preloader-animation-icon {    
    margin-top: 20px;
}


.ctl-site-preloader-animation-moving-circles-container{
  height: 10px;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

.ctl-site-preloader-animation-moving-circle{
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background-color: black;
    position: absolute;
    /*border: 2px solid white;  */
}

.ctl-site-preloader-animation-moving-circle:first-child {
  animation-delay: 0.5s;
}
.ctl-site-preloader-animation-moving-circle:nth-child(2) {
  animation-delay: 0.4s;
}
.ctl-site-preloader-animation-moving-circle:nth-child(3) {
  animation-delay: 0.3s;
}
.ctl-site-preloader-animation-moving-circle:nth-child(4) {
  animation-delay: 0.2s;
}
.ctl-site-preloader-animation-moving-circle:nth-child(5) {
  animation-delay: 0.1s;
}
.ctl-site-preloader-animation-moving-circle:nth-child(6) {
  animation-delay: 0s;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(90px);
  }
  65% {
    transform: translateX(90px);
  }
  95% {
    transform: translateX(0);
  }
}