* {
    box-sizing: border-box;
  }
  
  .page-preloader {
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999999;
    transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), height 0s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
.preloader-open {
  display: flex;
}  
  .page-preloader .preloader__icon {
    width: 140px;
    height: 135px;
    padding: 20px;
    border-radius: 500px;
    background-color: white;
  }
  .page-preloader svg {
    width: 100px;
    height: 87px;
  }
  .page-preloader #ship {
    animation: ship 3s ease-in-out infinite;
  }
  .page-preloader #ship polygon {
    fill: #1c2f4e;
  }
  .page-preloader #wave1 {
    transform: translate3d(25px, 360px, 0) scale(0.8);
    animation: wave1 4s ease-in-out infinite;
  }
  .page-preloader #wave1 polygon {
    fill: #6eb2d6;
  }
  .page-preloader #wave2 {
    transform: translate3d(75px, 400px, 0) scale(0.8);
    animation: wave2 4s 1s ease-in-out infinite;
  }
  .page-preloader #wave2 polygon {
    fill: #4797bf;
  }
  
  @keyframes ship {
    0% {
      transform: translate3d(65px, 0, 0);
    }
    50% {
      transform: translate3d(75px, 5px, 0) rotate(1deg);
    }
    100% {
      transform: translate3d(65px, 0, 0);
    }
  }
  @keyframes wave1 {
    0% {
      transform: translate3d(25px, 360px, 0) scale(0.8);
    }
    50% {
      transform: translate3d(50px, 360px, 0) scale(0.8);
    }
    100% {
      transform: translate3d(25px, 360px, 0) scale(0.8);
    }
  }
  @keyframes wave2 {
    0% {
      transform: translate3d(75px, 400px, 0) scale(0.8);
    }
    50% {
      transform: translate3d(50px, 400px, 0) scale(0.8);
    }
    100% {
      transform: translate3d(75px, 400px, 0) scale(0.8);
    }
  }