.preloader__holder {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.preloader {
  height: 140px;
  width: 190px;
  position: absolute;
  padding: 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  zoom: 0.5;
}

.preloader__bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.preloader__bg.transparent {
  background-color: rgba(0,0,0, 0.8);
  }

.preloader__bg.opaque {
   background-color: #161521;
}

.text {
  /* position: absolute; */
  /* top: 40px; */
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 26px;
}

.red-part, .green-part {
  width: 157px;
  height: 110px;
  padding: 10px;
  position: relative;
  display: inline-block;
}

.red-part .circle, .green-part .circle {
	 color: #fff;
	 font-size: 30px;
	 position: absolute;
	 box-sizing: border-box;
	 height: 17px;
	 width: 17px;
	 border: 3px solid yellow;
	 background-color: #000;
	 border-radius: 50%;
}

/* .red-part {
  top: 10px;
  background-image: url(/assets/images/logo-red.png);
  background-repeat: no-repeat;
  background-position: center;

.circle5 {top: 50px; left: 6px; animation: 2s linear reversemove5 0.2s infinite;}
.circle4 {top: 113px; left: 41px; animation: 2s linear reversemove4 0.2s infinite;}
.circle3 {top: 21px; left: 81px; animation: 2s linear reversemove3 0.2s infinite;}
.circle2 {top: 105px; left: 125px; animation: 2s linear reversemove2 0.2s infinite;}
.circle1 {top: 3px; left: 156px; animation: 2s linear reversemove 0.2s infinite;} */



.red-part {
	 top: 10px;
	 background-image: url(/assets/images/logo-red.png);
	 background-repeat: no-repeat;
	 background-position: center;
}
 .red-part .circle5 {
	 top: 50px;
	 left: 6px;
	 animation: 2s linear reversemove5 0.2s infinite;
}
 .red-part .circle4 {
	 top: 113px;
	 left: 41px;
	 animation: 2s linear reversemove4 0.2s infinite;
}
 .red-part .circle3 {
	 top: 21px;
	 left: 81px;
	 animation: 2s linear reversemove3 0.2s infinite;
}
 .red-part .circle2 {
	 top: 105px;
	 left: 125px;
	 animation: 2s linear reversemove2 0.2s infinite;
}
 .red-part .circle1 {
	 top: 3px;
	 left: 156px;
	 animation: 2s linear reversemove 0.2s infinite;
}


@keyframes reversemove {
 /*  0% {top: 50px; left: 6px; opacity: 1;}
  20% {top: 113px; left: 41px;}
  40% {top: 21px; left: 81px;}
  60% {top: 105px; left: 125px}
  80% {top: 3px; left: 156px; opacity: 1}
  81% {top: 3px; left: 156px; opacity: 0;}
  100% {top: 50px; left: 6px; opacity: 0;} */
  0% {top: 3px; left: 156px; opacity: 1}
  20% {top: 105px; left: 125px;}
  40% {top: 21px; left: 81px;}
  60% {top: 113px; left: 41px;}
  80% {top: 50px; left: 6px; opacity: 1}
  85% {top: 50px; left: 6px; opacity: 0}
  90% {top: 3px; left: 156px; opacity: 0}

}

@keyframes reversemove2 {
  0% {top: 107px; left: 123px;}
  20% {top: 19px; left: 79px;}
  40% {top: 117px; left: 39px;}
  60% {top: 50px; left: 3px; opacity: 1}
  65% {top: 50px; left: 3px; opacity: 0;}
  80% {top: 0px; left: 154px; opacity: 0;}
  85% {top: 0px; left: 154px; opacity: 1;}
  100% {top: 107px; left: 123px;}
}

@keyframes reversemove3 {
  0% {top: 21px; left: 81px;}
  20% {top: 113px; left: 41px;}
  40% {top: 50px; left: 6px; opacity: 1;}
  45% {top: 50px; left: 6px; opacity: 0;}
  60% {top: 3px; left: 156px; opacity: 0;}
  65% {top: 3px; left: 156px; opacity: 1;}
  80% {top: 105px; left: 125px;}
  100% {top: 21px; left: 81px;}
}

@keyframes reversemove4 {
  0% {top: 117px; left: 39px;}
  20% {top: 50px; left: 3px; opacity: 1;}
  25% {top: 50px; left: 3px; opacity: 0;}
  40% {top: 0px; left: 154px; opacity: 0;}
  45% {top: 0px; left: 154px; opacity: 1;}
  60% {top: 107px; left: 123px;}
  80% {top: 19px; left: 79px;}
  100% {top: 117px; left: 39px;}
}

@keyframes reversemove5 {
  0% {top: 50px; left: 6px; opacity: 1;}
  5% {top: 50px; left: 6px; opacity: 0;}
  20% {top: 3px; left: 156px; opacity: 0;}
  25% {top: 3px; left: 156px; opacity: 1;}
  40% {top: 105px; left: 125px;}
  60% {top: 21px; left: 81px;}
  80% {top: 113px; left: 41px;}
  100% {top: 50px; left: 6px;}
 }


.green-part {
   top: -140px;
	 left: 22px;
	 background-image: url(/assets/images/logo-green.png);
	 background-repeat: no-repeat;
	 background-position: center;
}

 .green-part .circle1 {
	 top: 47px;
	 left: 6px;
	 animation: linear move 2s infinite;
}
 .green-part .circle2 {
	 top: 113px;
	 left: 41px;
	 animation: linear move2 2s infinite;
}
 .green-part .circle3 {
	 top: 21px;
	 left: 81px;
	 animation: linear move3 2s infinite;
}
 .green-part .circle4 {
	 top: 105px;
	 left: 125px;
	 animation: linear move4 2s infinite;
}
 .green-part .circle5 {
	 top: 3px;
	 left: 156px;
	 animation: linear move5 2s infinite;
}


@keyframes move {
  5% {top: 47px; left: 6px; opacity: 1;}
  20% {top: 113px; left: 41px;}
  40% {top: 20px; left: 79px;}
  60% {top: 105px; left: 125px}
  80% {top: 3px; left: 156px; opacity: 1}
  85% {top: 3px; left: 156px; opacity: 0;}
  90% {top: 47px; left: 6px; opacity: 0;}
}

@keyframes move2 {
  0% {top: 113px; left: 41px;}
  20% {top: 20px; left: 79px;}
  40% {top: 105px; left: 125px;}
  60% {top: 3px; left: 156px; opacity: 1;}
  65% {top: 3px; left: 156px; opacity: 0;}
  70% {top: 47px; left: 6px; opacity: 0;}
  75% {top: 47px; left: 6px; opacity: 1;}
  80% {top: 47px; left: 6px;}
  100% {top: 113px; left: 41px;}
}

@keyframes move3 {
  0% {top: 20px; left: 79px;}
  20% {top: 105px; left: 125px;}
  40% {top: 3px; left: 156px; opacity: 1;}
  45% {top: 3px; left: 156px; opacity: 0;}
  50% {top: 47px; left: 6px; opacity: 0;}
  55% {top: 47px; left: 6px; opacity: 1;}
  60% {top: 47px; left: 6px;}
  80% {top: 113px; left: 41px;}
  100% {top: 20px; left: 79px;}
}

@keyframes move4 {
  20% {top: 3px; left: 156px; opacity: 1;}
  25% {top: 3px; left: 156px; opacity: 0;}
  30% {top: 47px; left: 6px; opacity: 0;}
  35% {top: 47px; left: 6px; opacity: 1;}
  40% {top: 47px; left: 6px;}
  60% {top: 113px; left: 41px;}
  80% {top: 20px; left: 79px;}
  100% {top: 105px; left: 125px;}
}

@keyframes move5 {
  0% {top: 3px; left: 156px; opacity: 1;}
  5% {top: 3px; left: 156px; opacity: 0;}
  10% {top: 47px; left: 6px; opacity: 0;}
  15% {top: 47px; left: 6px; opacity: 1;}
  20% {top: 47px; left: 6px;}
  40% {top: 113px; left: 41px;}
  60% {top: 20px; left: 79px;}
  80% {top: 105px; left: 125px;}
  100% {top: 3px; left: 156px;}
 }