body {
  background-color: white;
  color: black;
  font-family: Montserrat, regular;
  overflow: hidden;
  background-image: url( 'svgs/map-min.svg' );
  margin: 0;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: contain; 
}

.notification {
  padding-top:20px;
  max-width: 600px;
  width:80%;
  display: none;
  margin: 0 auto;
  white-space: pre-line;
  font-size: 16px;
  color: orange;
  font-family: 'arial,sans-serif';
}

.pow-loading-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
}

.pow-animation-text {
  display: flex;
  height: 175px;
  overflow: hidden;
}

.pow-black-bg {
  background-color: black;
  color: #e68722;
}


@keyframes shake {
  0% {
    transform: translateY(-1575px);
  }
  50% {
    transform: translateY(-0px);
  }
  100% {
    transform: translateY(-1575px);
  }
}

@keyframes blink {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes blink2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slotline{
  animation-duration:  6s;
  animation-name: blink2;
}

.pow-progress {
  width: 450px;
  background-color: #424242;
  border-radius: 20px;
  margin-block: 20px;

}

.pow-bar {
  width: 1%;
  height: 10px;
  background-color:  #ff9700;
  border-radius: 20px;
  -webkit-box-shadow: 8px 0px 24px 0px #717171;
  -moz-box-shadow: 8px 0px 24px 0px #717171;
  box-shadow: 8px 0px 24px 0px #717171;
  transition: width .5s ease-in-out;
}

.pow-letter {
    font-weight: 600;
}

.pow-delimiter{
  font-size: 32px;
  font-weight: 900;
  margin: auto;
  color: #717171;
  animation-duration: 5s ;
  animation-name: grey_to_orange;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.pow-delimiter img {
  height: 25px;
}

@keyframes grey_to_orange {
  0% {
    color: #717171;
  }
  50% {
    color: #ff9700;
  }
  100% {
    color: #717171;
  }
}

.shelupon {
  position: absolute;
  opacity: 0.5;
  animation-duration: 4s ;
  animation-name: blink;
  animation-iteration-count: infinite;
}

.shelupon-1 {
  top: 7%;
  left: 3%;
  animation-delay: 100ms;
}
.shelupon-2 {
  top: 89%;
  left: 3%;
  animation-delay: 500ms;
}
.shelupon-3 {
  top: 7%;
  left: 10%;
  animation-delay: 900ms;
}
.shelupon-4 {
  top: 90%;
  left: 86%;
  animation-delay: 1600ms;
}
.shelupon-5 {
  top: 90%;
  left: 80%;
  animation-delay: 1900ms;
}

.gradient {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-image: -webkit-radial-gradient(top 0% left 0% , 500px, rgba(255,255,255,.2), rgba(0,0,0,0)), -webkit-radial-gradient(bottom 0% right 0%, 500px,  rgba(255,255,255,.2), rgba(0,0,0,0))
}


.shyfr {
    margin-top: 20px;
    font-size: 24px;
    margin-inline: 20%;
    text-align: center;
    height: 100px;
}


.fadeout {
  animation-duration: 1s ;
  animation-name: fadeout;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}


@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.fadein {
  animation-duration: 1s ;
  animation-name: fadein;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}


@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.pla1 {
  top: 40%;width: 100%;
}

.pla2 {
  top: 80%;width: 100%;
}

@media screen and (max-width:767px) {

  .pla1 {
    top: 40%;width: 100%;
  }
  
  .pla2 {
    top: 60%;width: 100%;
  }


  .shyfr {
    font-size: 16px;
  }
  .pow-animation-text {
    height: 100px;
    /* default height 175px */
  }

  .pow-animation-text img {
    height: 100px;
    /* default height 175px */
  }

  .pow-delimiter img {
    height: 15px;
    /* default height 25px */

  }

  .pow-progress {
    width: 70%;
  }


  .shelupon-1 img {
    height: 30px;
  }
  .shelupon-2 img {
    height: 60px;
  }
  .shelupon-3 img {
    height: 30px;
  }
  .shelupon-3 {
    left: 15%;
  }
  .shelupon-4 img {
    height: 60px;
  }
  .shelupon-5 img {
    height: 30px;
  }
  .shelupon-5 {
    left: 75%;
  }

}