.wrapper {
  min-height: 460px;
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; }

.scene,
.layer {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; }

.scene {
  min-height: 460px;
  position: relative;
  overflow: hidden; }

.layer {
  position: absolute; }
  .layer div {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; }

.title {
  /*text-shadow: 0 8px 6px rgba(0, 0, 0, 0.6);*/
  position: absolute;
  width: 100%; }

.lighthouse {
  -webkit-transform-origin: 50% 90%;
  -moz-transform-origin: 50% 90%;
  transform-origin: 50% 90%;
  -webkit-animation: lighthouse 8s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: lighthouse 8s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: lighthouse 8s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  margin: 0px -64px;
  background-size: 128px 224px;
  height: 224px;
  width: 128px;
  background-image: url(../img/parallax/ship.png);
  background-repeat: no-repeat;
  bottom: 10%;
  position: absolute;
  left: 45%; }

.wave {
  background: transparent repeat-x;
  position: absolute;
  width: 300%;
  left: -100%; }
  .wave:after {
    position: absolute;
    display: block;
    content: "";
    height: 800px;
    width: 100%;
    top: 100%;
    left: 0; }
  .wave.plain {
    background-image: url(../img/parallax/water_2.png); }
  .wave.paint {
    background-image: url(../img/parallax/water_1.png); }
  .wave.marine {
    background-image: url(../img/parallax/marine.png); }

.wave.depth-50 {
  -webkit-animation: wave 6.22222s 0.1s infinite linear;
  -moz-animation: wave 6.22222s 0.1s infinite linear;
  animation: wave 6.22222s 0.1s infinite linear;
  bottom: 60px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 100%;
  height: 80px; }
  .wave.depth-50:after {
    height: 80px; }

.wave.depth-60 {
  -webkit-animation: wave 5.77778s 0.1s infinite linear;
  -moz-animation: wave 5.77778s 0.1s infinite linear;
  animation: wave 5.77778s 0.1s infinite linear;
  bottom: 40px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 100%;
  height: 96px; }
  .wave.depth-60:after {
    height: 64px; }

.wave.depth-70 {
  -webkit-animation: wave 5.33333s 0.1s infinite linear;
  -moz-animation: wave 5.33333s 0.1s infinite linear;
  animation: wave 5.33333s 0.1s infinite linear;
  bottom: 20px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 100%;
  height: 112px; }
  .wave.depth-70:after {
    height: 48px; }

.wave.depth-80 {
  -webkit-animation: wave 4.88889s 0.1s infinite linear;
  -moz-animation: wave 4.88889s 0.1s infinite linear;
  animation: wave 4.88889s 0.1s infinite linear;
  bottom: 0px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 100%;
  height: 128px; }
  .wave.depth-80:after {
    height: 32px; }

.wave.depth-90 {
  -webkit-animation: wave 4.44444s 0.1s infinite linear;
  -moz-animation: wave 4.44444s 0.1s infinite linear;
  animation: wave 4.44444s 0.1s infinite linear;
  bottom: -20px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 100%;
  height: 144px; }
  .wave.depth-90:after {
    height: 16px; }

.wave.depth-100 {
  -webkit-animation: wave 4s 0.1s infinite linear;
  -moz-animation: wave 4s 0.1s infinite linear;
  animation: wave 4s 0.1s infinite linear;
  bottom: -40px;
  margin: 0px 0px;
  background-position: center bottom;
  background-size: auto 100%;
  height: 160px; }
  .wave.depth-100:after {
    height: 0px; }


@media all and (max-width: 400px) {

  .wave.depth-50 {
    bottom: 90px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 120px; }
  .wave.depth-50:after {
    height: 120px; }

  .wave.depth-60 {
    bottom: 60px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 144px; }
  .wave.depth-60:after {
    height: 96px; }

  .wave.depth-70 {
    bottom: 30px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 168px; }
  .wave.depth-70:after {
    height: 72px; }

  .wave.depth-80 {
    bottom: 0px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 192px; }
  .wave.depth-80:after {
    height: 48px; }

  .wave.depth-90 {
    bottom: -30px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 216px; }
  .wave.depth-90:after {
    height: 24px; }

  .wave.depth-100 {
    bottom: -60px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 240px; }
  .wave.depth-100:after {
    height: 0px; }
}


@media all and (min-width: 400px) {

  .wrapper {
    min-height: 360px;
  }

  .scene {
    min-height: 360px;
  }

  .wave.depth-50 {
    bottom: 90px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 120px; }
  .wave.depth-50:after {
    height: 120px; }

  .wave.depth-60 {
    bottom: 60px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 144px; }
  .wave.depth-60:after {
    height: 96px; }

  .wave.depth-70 {
    bottom: 30px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 168px; }
  .wave.depth-70:after {
    height: 72px; }

  .wave.depth-80 {
    bottom: 0px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 192px; }
  .wave.depth-80:after {
    height: 48px; }

  .wave.depth-90 {
    bottom: -30px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 216px; }
  .wave.depth-90:after {
    height: 24px; }

  .wave.depth-100 {
    bottom: -60px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 240px; }
  .wave.depth-100:after {
    height: 0px; }
}

@media all and (min-width: 600px) {

  .lighthouse {
    background-size: 50em 80em;
    height: 80em;
    width: 50em;
    bottom: 5%;
  }

  .wave.depth-50 {
    bottom: 90px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 120px; }
    .wave.depth-50:after {
      height: 120px; }

  .wave.depth-60 {
    bottom: 60px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 144px; }
    .wave.depth-60:after {
      height: 96px; }

  .wave.depth-70 {
    bottom: 30px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 168px; }
    .wave.depth-70:after {
      height: 72px; }

  .wave.depth-80 {
    bottom: 0px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 192px; }
    .wave.depth-80:after {
      height: 48px; }

  .wave.depth-90 {
    bottom: -30px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 216px; }
    .wave.depth-90:after {
      height: 24px; }

  .wave.depth-100 {
    bottom: -60px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 240px; }
    .wave.depth-100:after {
      height: 0px; }
}

@media all and (min-width: 800px) {
  .lighthouse {
    background-size: 50em 70em;
    height: 70em;
    width: 50em;
    bottom: 5%;
  }
}

@media all and (min-width: 900px) {

  .lighthouse {
    background-size: 32em 50em !important;
    height: 50em !important;
    width: 32em !important;
    bottom: 10%;
  }

  .wave.depth-50 {
    bottom: 102px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 136px; }
    .wave.depth-50:after {
      height: 136px; }

  .wave.depth-60 {
    bottom: 68px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 163px; }
    .wave.depth-60:after {
      height: 108.8px; }

  .wave.depth-70 {
    bottom: 34px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 190px; }
    .wave.depth-70:after {
      height: 81.6px; }

  .wave.depth-80 {
    bottom: -1px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 218px; }
    .wave.depth-80:after {
      height: 54.4px; }

  .wave.depth-90 {
    bottom: -35px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 245px; }
    .wave.depth-90:after {
      height: 27.2px; }

  .wave.depth-100 {
    bottom: -68px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 272px; }
    .wave.depth-100:after {
      height: 0px; }
}


@media all and (min-width: 1200px) {

  .lighthouse {
    background-size: 35em 50em !important;
    height: 50em !important;
    width: 35em !important;
    bottom: 5%;
  }

  .wave.depth-50 {
    bottom: 108px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 144px; }
    .wave.depth-50:after {
      height: 144px; }

  .wave.depth-60 {
    bottom: 72px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 173px; }
    .wave.depth-60:after {
      height: 115.2px; }

  .wave.depth-70 {
    bottom: 36px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 202px; }
    .wave.depth-70:after {
      height: 86.4px; }

  .wave.depth-80 {
    bottom: -1px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 230px; }
    .wave.depth-80:after {
      height: 57.6px; }

  .wave.depth-90 {
    bottom: -36px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 259px; }
    .wave.depth-90:after {
      height: 28.8px; }

  .wave.depth-100 {
    bottom: -72px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 288px; }
    .wave.depth-100:after {
      height: 0px; }
}

@media all and (min-width: 1400px) {

  .lighthouse {
    background-size: 45em 60em !important;
    height: 60em !important;
    width: 45em !important;
    bottom: 5%;
  }
}

@media all and (min-width: 1600px) {

  .lighthouse {
    background-size: 35em 50em !important;
    height: 50em !important;
    width: 35em !important;
    bottom: 5%;
  }
}

@media all and (min-width: 2000px) {

  .lighthouse {
    background-size: 30em 50em;
    height: 50em;
    width: 30em;
    bottom: 5%;
  }

  .wave.depth-50 {
    bottom: 108px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 350px; }
  .wave.depth-50:after {
    height: 144px; }
/*144*/

  .wave.depth-60 {
    bottom: 72px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 400px; }
  .wave.depth-60:after {
    height: 115.2px; }

  .wave.depth-70 {
    bottom: 36px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 430px; }
  .wave.depth-70:after {
    height: 86.4px; }

  .wave.depth-80 {
    bottom: -1px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 390px; }
  .wave.depth-80:after {
    height: 57.6px; }

  .wave.depth-90 {
    bottom: -36px;
    margin: 0px 0px;
    background-position: center bottom;
    background-size: auto 100%;
    height: 300px; }
  .wave.depth-90:after {
    height: 28.8px; }
}

@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-moz-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@-ms-keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }
@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } }

@-webkit-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(5%,0,0) rotateZ(1deg);
    -moz-transform: translate3d(5%,0,0) rotateZ(1deg);
    transform: translate3d(5%,0,0) rotateZ(1deg); }
  100% {
    -webkit-transform: translate3d(-5%,0,0) rotateZ(-1deg);
    -moz-transform: translate3d(-5%,0,0) rotateZ(-1deg);
    transform: translate3d(-5%,0,0) rotateZ(-1deg); } }
@-moz-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(5%,0,0) rotateZ(1deg);
    -moz-transform: translate3d(5%,0,0) rotateZ(1deg);
    transform: translate3d(5%,0,0) rotateZ(1deg); }
  100% {
    -webkit-transform: translate3d(-5%,0,0) rotateZ(-1deg);
    -moz-transform: translate3d(-5%,0,0) rotateZ(-1deg);
    transform: translate3d(-5%,0,0) rotateZ(-1deg); } }
@-ms-keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(5%,0,0) rotateZ(1deg);
    -moz-transform: translate3d(5%,0,0) rotateZ(1deg);
    transform: translate3d(5%,0,0) rotateZ(1deg); }
  100% {
    -webkit-transform: translate3d(-5%,0,0) rotateZ(-1deg);
    -moz-transform: translate3d(-5%,0,0) rotateZ(-1deg);
    transform: translate3d(-5%,0,0) rotateZ(-1deg); } }
@keyframes lighthouse {
  0% {
    -webkit-transform: translate3d(5%,0,0) rotateZ(1deg);
    -moz-transform: translate3d(5%,0,0) rotateZ(1deg);
    transform: translate3d(5%,0,0) rotateZ(1deg); }
  100% {
    -webkit-transform: translate3d(-5%,0,0) rotateZ(-1deg);
    -moz-transform: translate3d(-5%,0,0) rotateZ(-1deg);
    transform: translate3d(-5%,0,0) rotateZ(-1deg); } }