/* https://www.danielefavi.com/css-wave-generator/ */
#wave-container
{
  position:relative;
  height:59px;
  margin-top:10px;
  margin-bottom:20px;
  width:308px;
}
.dot
{
  transform-origin:50% 50%;
  height:9px;
  width:9px;
  border-radius:50%;
  top:0;
  /* background-color: var(--color-red); */
  background-color: gray;
  position:absolute;
  -webkit-animation:vertical-movement 0.8s infinite ease-in-out;
  -moz-animation:vertical-movement 0.8s infinite ease-in-out;
  -ms-animation:vertical-movement 0.8s infinite ease-in-out;
  -o-animation:vertical-movement 0.8s infinite ease-in-out;
  animation:vertical-movement 0.8s infinite ease-in-out;
}
#d1
{
  left:14px;
  -webkit-animation-delay:-0.1s;
  -moz-animation-delay:-0.1s;
  -ms-animation-delay:-0.1s;
  -o-animation-delay:-0.1s;
  animation-delay:-0.1s;
  opacity:0.01
}
#d2
{
  left:28px;
  -webkit-animation-delay:-0.2s;
  -moz-animation-delay:-0.2s;
  -ms-animation-delay:-0.2s;
  -o-animation-delay:-0.2s;
  animation-delay:-0.2s;
  opacity:0.05
}
#d3
{
  left:42px;
  -webkit-animation-delay:-0.3s;
  -moz-animation-delay:-0.3s;
  -ms-animation-delay:-0.3s;
  -o-animation-delay:-0.3s;
  animation-delay:-0.3s;
  opacity:0.2
}
#d4
{
  left:56px;
  -webkit-animation-delay:-0.4s;
  -moz-animation-delay:-0.4s;
  -ms-animation-delay:-0.4s;
  -o-animation-delay:-0.4s;
  animation-delay:-0.4s;
  opacity:0.3
}
#d5
{
  left:70px;
  -webkit-animation-delay:-0.5s;
  -moz-animation-delay:-0.5s;
  -ms-animation-delay:-0.5s;
  -o-animation-delay:-0.5s;
  animation-delay:-0.5s;
  opacity:0.4
}
#d6
{
  left:84px;
  -webkit-animation-delay:-0.6s;
  -moz-animation-delay:-0.6s;
  -ms-animation-delay:-0.6s;
  -o-animation-delay:-0.6s;
  animation-delay:-0.6s;
  opacity:0.5
}
#d7
{
  left:98px;
  -webkit-animation-delay:-0.7s;
  -moz-animation-delay:-0.7s;
  -ms-animation-delay:-0.7s;
  -o-animation-delay:-0.7s;
  animation-delay:-0.7s;
  opacity:0.6
}
#d8
{
  left:112px;
  -webkit-animation-delay:-0.8s;
  -moz-animation-delay:-0.8s;
  -ms-animation-delay:-0.8s;
  -o-animation-delay:-0.8s;
  animation-delay:-0.8s;
  opacity:0.7
}
#d9
{
  left:126px;
  -webkit-animation-delay:-0.9s;
  -moz-animation-delay:-0.9s;
  -ms-animation-delay:-0.9s;
  -o-animation-delay:-0.9s;
  animation-delay:-0.9s;
  opacity:0.8
}
#d10
{
  left:140px;
  -webkit-animation-delay:-1s;
  -moz-animation-delay:-1s;
  -ms-animation-delay:-1s;
  -o-animation-delay:-1s;
  animation-delay:-1s;
  opacity:0.9
}
#d11
{
  left:154px;
  -webkit-animation-delay:-1.1s;
  -moz-animation-delay:-1.1s;
  -ms-animation-delay:-1.1s;
  -o-animation-delay:-1.1s;
  animation-delay:-1.1s;
  opacity:1
}
#d12
{
  left:168px;
  -webkit-animation-delay:-1.2s;
  -moz-animation-delay:-1.2s;
  -ms-animation-delay:-1.2s;
  -o-animation-delay:-1.2s;
  animation-delay:-1.2s;
  opacity:0.9
}
#d13
{
  left:182px;
  -webkit-animation-delay:-1.3s;
  -moz-animation-delay:-1.3s;
  -ms-animation-delay:-1.3s;
  -o-animation-delay:-1.3s;
  animation-delay:-1.3s;
  opacity:0.8
}
#d14
{
  left:196px;
  -webkit-animation-delay:-1.4s;
  -moz-animation-delay:-1.4s;
  -ms-animation-delay:-1.4s;
  -o-animation-delay:-1.4s;
  animation-delay:-1.4s;
  opacity:0.7
}
#d15
{
  left:210px;
  -webkit-animation-delay:-1.5s;
  -moz-animation-delay:-1.5s;
  -ms-animation-delay:-1.5s;
  -o-animation-delay:-1.5s;
  animation-delay:-1.5s;
  opacity:0.6
}
#d16
{
  left:224px;
  -webkit-animation-delay:-1.6s;
  -moz-animation-delay:-1.6s;
  -ms-animation-delay:-1.6s;
  -o-animation-delay:-1.6s;
  animation-delay:-1.6s;
  opacity:0.5
}
#d17
{
  left:238px;
  -webkit-animation-delay:-1.7s;
  -moz-animation-delay:-1.7s;
  -ms-animation-delay:-1.7s;
  -o-animation-delay:-1.7s;
  animation-delay:-1.7s;
  opacity:0.4
}
#d18
{
  left:252px;
  -webkit-animation-delay:-1.8s;
  -moz-animation-delay:-1.8s;
  -ms-animation-delay:-1.8s;
  -o-animation-delay:-1.8s;
  animation-delay:-1.8s;
  opacity:0.3
}
#d19
{
  left:266px;
  -webkit-animation-delay:-1.9s;
  -moz-animation-delay:-1.9s;
  -ms-animation-delay:-1.9s;
  -o-animation-delay:-1.9s;
  animation-delay:-1.9s;
  opacity:0.2
}
#d20
{
  left:280px;
  -webkit-animation-delay:-2s;
  -moz-animation-delay:-2s;
  -ms-animation-delay:-2s;
  -o-animation-delay:-2s;
  animation-delay:-2s;
  opacity:0.05
}
#d21
{
  left:294px;
  -webkit-animation-delay:-2.1s;
  -moz-animation-delay:-2.1s;
  -ms-animation-delay:-2.1s;
  -o-animation-delay:-2.1s;
  animation-delay:-2.1s;
  opacity:0.02
}
.last-dot
{
  transform-origin:50% 50%;
  height:9px;
  width:9px;
  border-radius:50%;

}
#head-dot
{
  height:6px;
  width:6px;
  border-radius:50%
}
@-webkit-keyframes vertical-movement
{
  0%,100%
  {
    -webkit-transform:translateY(0%);
  }
  50%
  {
    -webkit-transform:translateY(50px);
  }
}
@keyframes vertical-movemen
{
  0%,100%
  {
    -webkit-transform:translateY(0%);
    -moz-transform:translateY(0%);
    -ms-transform:translateY(0%);
    -o-transform:translateY(0%);
    transform:translateY(0%);
  }
  50%
  {
    -webkit-transform:translateY(50px);
    -moz-transform:translateY(50px);
    -ms-transform:translateY(50px);
    -o-transform:translateY(50px);
    transform:translateY(50px);
  }
}