@layer base {
  html {
    font-family: "Alexandria", system-ui, sans-serif;
  }
}

#hero-image-waves-lg {
  animation-duration: 3s;
  animation-name: waves-lg-animation;
  animation-iteration-count: infinite;
}

#hero-image-waves-md {
  animation-duration: 3s;
  animation-name: waves-md-animation;
  animation-iteration-count: infinite;
}

#hero-image-waves-sm {
  animation-duration: 3s;
  animation-name: waves-sm-animation;
  animation-iteration-count: infinite;
}

#ship-0.animated{
  animation-duration: 8s;
  animation-name: ship-left-animation;
  animation-iteration-count: infinite;
  background-size: cover;
  animation-timing-function: linear;
}

#ship-1.animated{
  animation-duration: 8s;
  animation-name: ship-right-animation;
  animation-iteration-count: infinite;

  background-size: cover;
  animation-timing-function: linear;
}

#ship-2.animated{
  animation-duration: 8s;
  animation-name: ship-left-animation;
  animation-iteration-count: infinite;
  background-size: cover;
  animation-timing-function: linear;
}

#ship-3.animated{
  animation-duration: 8s;
  animation-name: ship-right-animation;
  animation-iteration-count: infinite;
  background-size: cover;
  animation-timing-function: linear;
}

#ship-4.animated{
  animation-duration: 8s;
  animation-name: ship-left-animation;
  animation-iteration-count: infinite;
  background-position: center;
  background-size: cover;
  animation-timing-function: linear;
}

@keyframes waves-lg-animation {
  from {
    left: 0;
  }

  50% {
    left: -12px;
  }

  to {
    left: 0px;
  }
}

@keyframes waves-md-animation {
  from {
    left: 0;
  }

  50% {
    left: -6px;
  }

  to {
    left: 0px;
  }
}

@keyframes waves-sm-animation {
  from {
    left: 0;
  }

  50% {
    left: -2px;
  }

  to {
    left: 0px;
  }
}

@keyframes partners-1-animation {
  0% {
    background-image: url('/static/web/img/partner-11.jpg');
  }

  25% {
    background-image: url('/static/web/img/partner-12.jpg');
  }

  75% {
    background-image: url('/static/web/img/partner-13.jpg');
  }
 
  100% {
    background-image: url('/static/web/img/partner-11.jpg');
  }
}


@keyframes partners-2-animation {
  0% {
    background-image: url('/static/web/img/partner-21.jpg');
  }

  50% {
    background-image: url('/static/web/img/partner-22.jpg');
  }

  100% {
    background-image: url('/static/web/img/partner-23.jpg');
  }
}

@keyframes partners-3-animation {
  0% {
    background-image: url('/static/web/img/partner-31.jpg');
  }

  50% {
    background-image: url('/static/web/img/partner-32.jpg');
  }

  100% {
    background-image: url('/static/web/img/partner-33.jpg');
  }
}

@keyframes partners-4-animation {
  0% {
    background-image: url('/static/web/img/partner-41.jpg');
  }

  50% {
    background-image: url('/static/web/img/partner-42.jpg');
  }

  100% {
    background-image: url('/static/web/img/partner-43.jpg');
  }
}


@keyframes ship-left-animation {
  0% {
    left: 100%;
    opacity: 1;
  }

  80% {
    left: -5%;
    opacity: 1;
  }

  95% {
    left: -5%;
    opacity: 1;
  }

  100% {
    left: -25%;
    opacity: 0;
  }
}

@keyframes ship-right-animation {
  0% {
    right: 100%;
    opacity: 1;
  }

  80% {
    right: -5%;
    opacity: 1;
  }

  95% {
    right: -5%;
    opacity: 1;
  }

  100% {
    right: -25%;
    opacity: 0;
  }
}