.indicator-container 
{

  
  position: absolute;
  left: 50.5%;
  transform: translate(-50%,-50%);
  top: 115%;
  width: 2em;
  height: calc(1.7em * 1.75);
  border: calc(2em * 0.1) solid white;
  border-radius: 2em;
  overflow: hidden;
 
}


.indicator-arrow 
{

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}


.indicator-arrow .base 
{
  
  width: calc(2em * 0.1);
  background: white;
  height: calc(2em * 0.33);
  border-radius: calc(6.4em * 0.1);
  
}

.indicator-arrow .arrowpoint 
{

  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(3em * 0.175)  calc(3em * 0.175) 0 calc(3em * 0.175);
  border-color: white transparent transparent transparent;
  margin-top: -10%;

}

.top
{ 

  margin-top: -100%;
  animation: arrowAnimation1 infinite 1.1s ease-in-out;

}

.bottom 
{

  margin-top: 100%;

}



@keyframes arrowAnimation1 
{
    
  from {margin-top: -100%;}
  to {margin-top: 40%;}
  
}