/* generic classes*/
#swipe{
  display:none;
}

.swipeOverlay {
  display: none;
  position: absolute;
  top: 0;
  background-color:rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
}

.swipeContainer {
  width: 70px;
  height: 200px;
  position: absolute;
  left: 80%;
  top: 50%;
  margin-left: -35px;
  margin-top: -150px;
  /* background: red; */
}


/* animated elements */

span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:100%;
  color: white;
  font-style: bold;
  font-size: 3vw;
  text-align: center;
  opacity: 0;
}

img{
  position:absolute;
  width:0vw;
  top:50vh;
  left:75vw;
  opacity:0;
}

.bigCircle {
  position: absolute;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  opacity: 0;
  left: 50%;
  top: 90%;
  margin-left: -35px;
  margin-top: -35px;
  background: rgba(0, 0, 0, 0);
  border: 7px solid rgb(62,154,204);
}

.smallCircle {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  opacity: 0;
  left: 50%;
  top: 90%;
  margin-left: -25px;
  margin-top: -25px;
  background:  rgb(62,154,204);
  border: 3px solid rgb(62,154,204);
}

.smallBlock {
  width: 40px;
  height: 20px;
  margin-left: -20px;
  margin-top: -10px;
  background:  rgb(191,229,242);
  border: 3px solid rgb(191,229,242);
  opacity: 0;
}

#blockOne {
  position: absolute;
  left: 50%;
  top: 70%;
}

#blockTwo {
  position: absolute;
  left: 50%;
  top: 55%;
}
/* arrows */
.arrow {
  width: 60px;
  height: 80px;
  position: relative;
  display: inline-block;
  opacity: 0;
}
.arrow:before, .arrow:after {
  content: '';
  border-color: transparent;
  border-style: solid;
  position: absolute;
}

.arrow-up:before {
  border: none;
  background-color:rgb(191,229,242);
  height: 70%;
  width: 40px;
  top: 42%;
  left: 15px;
}
.arrow-up:after {
  left: 5px;
  top: -30%;
  border-width: 30px 30px;
  border-bottom-color: rgb(191,229,242);
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fullscreen-bg__video2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* animations */
@media only screen {
  .swipeOverlay { display: block; }
  .swipeOverlay .bigCircle { animation: bigCircleAnimation 2.5s infinite; }
  .swipeOverlay .smallCircle { animation: smallCircleAnimation 2.5s infinite; }
  .swipeOverlay #blockOne { animation: blockOne 2.5s infinite; }
  .swipeOverlay #blockTwo { animation: blockTwo 2.5s infinite; }
  .swipeOverlay .arrow { animation: arrow 2.5s infinite; }
  .swipeOverlay span { animation: pFadeAnimation 2.5s infinite }
  .swipeOverlay img { animation: imgAnimation 2.5s infinite }

}

/*keyframes*/
@keyframes imgAnimation{
  0%{
    opacity: 0;
    width:0vw;
    transform: translateY(0vh);
  }

  25%{
    opacity: 1;
    width:20vw;
    transform: translateY(0vh);
  }

  75%{
    opacity: 1;
  }
  
  100%{
    opacity: 0;
    width:20vw;
    transform: translateY(-60vh);
  }
}
@keyframes pFadeAnimation {
  0% {
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  95% {
    opacity: 0;
  }
}
@keyframes bigCircleAnimation {
  0% {
    opacity: 0;
    transform: scale3d(0.0, 0.0, 0.0) translateY(0px);
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
    transform: scale3d(1.0, 1.0, 1.0) translateY(0px);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.0, 1.0, 1.0) translateY(0px);
  }
  60% {
    opacity: 1;
  }
  85% {
    opacity: 0; 
    transform: scale3d(1.0, 1.0, 1.0) translateY(-150px);
  }
}

@keyframes smallCircleAnimation {
  0% {
    opacity: 0;
    transform: scale3d(0.0, 0.0, 0.0) translateY(0px);
  }
  10% {
    opacity: 0;
    transform: scale3d(0.0, 0.0, 0.0) translateY(0px);
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform: scale3d(1.0, 1.0, 1.0) translateY(0px);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.0, 1.0, 1.0) translateY(0px);
  }
  60% {
    opacity: 1;
  }
  85% {
    opacity: 0; 
    transform: scale3d(1.0, 1.0, 1.0) translateY(-150px);
  }
}

@keyframes blockOne {
  0% { opacity: 0;}
  10% { opacity: 0;}
  35% { opacity: 1.0;}
  55% { opacity: 1.0; }
  75% { opacity: 0.0; }
}

@keyframes blockTwo {
  0% { opacity: 0;}
  15% { opacity: 0;}
  40% { opacity: 1.0;}
  60% { opacity: 1.0; }
  80% { opacity: 0.0; }
}

@keyframes arrow {
  0% { opacity: 0;}
  18% { opacity: 0;}
  50% { opacity: 1.0;}
  65% { opacity: 1.0; }
  85% { opacity: 0.0; }
}


@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.0, 0.0, 0.0);
    transform: scale3d(0.0, 0.0, 0.0);
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1.0, 1.0, 1.0);
    transform: scale3d(1.0, 1.0, 1.0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.0, 0.0, 0.0);
    transform: scale3d(0.0, 0.0, 0.0);
  }

  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1.0, 1.0, 1.0);
    transform: scale3d(1.0, 1.0, 1.0);
  }
}