
.zfolio-preloader-1 {
  width: 15px;
  height: 15px;
  background: rgba(230, 230, 230, 0.9);
  border-radius: 25px;


  position: absolute;
  top: 50%;
  left: 50%;


  /*z-index: 5555;*/

  margin-left: -7px;
  margin-top: -7px;

  animation: zfolio-preloader-1-tween 1.4s infinite linear;
  -webkit-animation: zfolio-preloader-1-tween 1.4s infinite linear;
}

.zfolio-preloader-1-con {

  content: '';
  position: absolute;
  top: 50%;
  left: 50%;

  width: 60px;
  height: 60px;

  margin-left: -30px;
  margin-top: -30px;

  background-color: rgba(10, 10, 10, 0.3);

  border-radius: 50%;


  opacity: 1;
  visibility: visible;

  $transition-property: opacity, visibility;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}

.zfolio-preloader-1-con:before {
  content: '';
  //  position:absolute;
  //
  //
  //  width: 100%;
  //  height: 100%;

}


.zfolio-preloader-1:after {
  position: absolute;
  width: 25px;
  height: 25px;
  border-top: 5px solid rgba(200, 200, 200, 0.5);
  border-bottom: 5px solid rgba(200, 200, 200, 0.5);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 25px;
  content: '';
  top: -10px;
  left: -10px;
  box-sizing: content-box !important;
}

@-webkit-keyframes zfolio-preloader-1-tween {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@keyframes zfolio-preloader-1-tween {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

.zfolio.dzszfl-ready {

  .items {
    //    opacity: 1;
  }

  .zfolio-preloader-1-con {


    opacity: 0;
    visibility: hidden;
  }


}