.pswp__preloader__icn {
  /*opacity:0.75;*/
  position: absolute;
  right: 54%;
  width: 20px;
  height: 20px;
  -webkit-animation: clockwise 500ms linear infinite;
  animation: clockwise 500ms linear infinite;
  left: 10px;
  top: calc(100% / 2 - 10px);
}

.pswp__preloader__cut {
  position: relative;
  width: 7px;
  height: 20px;
  overflow: hidden;
  
  /*position: absolute;*/
  top: 0;
  /*left: 0;*/
}

.pswp__preloader__donut--fake {
   box-sizing: border-box;

  width: 20px;
	height: 20px;
	
  
  border: 2px solid red;
   border-radius: 50%;
  /*position: absolute;*/
  top: 0;
  /*left: 0;*/
  
	background: none;
	margin:0;
}

.pswp__preloader__donut {
  box-sizing: border-box;

  width: 20px;
	height: 20px;
	
  
  border: 2px solid #FFF;
   border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  
    position: absolute;
  top: 0;
  /*left: 0;*/
 
  
  
	/*position: absolute;*/
  top: 0;
  /*left: 0;*/
  
	background: none;
	margin:0;
  
    -webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
  animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;

}


@-webkit-keyframes clockwise {
  0% { -webkit-transform: rotate(0deg) }
  100% { -webkit-transform: rotate(360deg) }
}
@keyframes clockwise {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
@-webkit-keyframes donut-rotate {
  0% { -webkit-transform: rotate(0) }
  50% { -webkit-transform: rotate(-140deg) }
  100% { -webkit-transform: rotate(0) }
}
@keyframes donut-rotate {
  0% { transform: rotate(0) }
  50% { transform: rotate(-140deg) }
  100% { transform: rotate(0) }
}


/****************page preloader********************/
.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}
/****************page preloader********************/