@keyframes rocktheboat{
  0% {
    transform:  translate(0px,0px)  scaleY(1.00) ;
  }
  25% {
    transform:  translate(-12px,12px)  scaleY(0.98) ;
  }
  51% {
    transform:  translate(1px,0px)  scaleY(1.00) ;
  }
  78% {
    transform:  translate(4px,19px)  scaleY(0.99) ;
  }
  100% {
    transform:  translate(0px,0px)  scaleY(1.00) ;
  }
}

@-moz-keyframes rocktheboat{
  0% {
    -moz-transform:  translate(0px,0px)  scaleY(1.00) ;
  }
  25% {
    -moz-transform:  translate(-12px,12px)  scaleY(0.98) ;
  }
  51% {
    -moz-transform:  translate(1px,0px)  scaleY(1.00) ;
  }
  78% {
    -moz-transform:  translate(4px,19px)  scaleY(0.99) ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  scaleY(1.00) ;
  }
}

@-webkit-keyframes rocktheboat {
  0% {
    -webkit-transform:  translate(0px,0px)  scaleY(1.00) ;
  }
  25% {
    -webkit-transform:  translate(-12px,12px)  scaleY(0.98) ;
  }
  51% {
    -webkit-transform:  translate(1px,0px)  scaleY(1.00) ;
  }
  78% {
    -webkit-transform:  translate(4px,19px)  scaleY(0.99) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  scaleY(1.00) ;
  }
}

@-o-keyframes rocktheboat {
  0% {
    -o-transform:  translate(0px,0px)  scaleY(1.00) ;
  }
  25% {
    -o-transform:  translate(-12px,12px)  scaleY(0.98) ;
  }
  51% {
    -o-transform:  translate(1px,0px)  scaleY(1.00) ;
  }
  78% {
    -o-transform:  translate(4px,19px)  scaleY(0.99) ;
  }
  100% {
    -o-transform:  translate(0px,0px)  scaleY(1.00) ;
  }
}

@-ms-keyframes rocktheboat {
  0% {
    -ms-transform:  translate(0px,0px)  scaleY(1.00) ;
  }
  25% {
    -ms-transform:  translate(-12px,12px)  scaleY(0.98) ;
  }
  51% {
    -ms-transform:  translate(1px,0px)  scaleY(1.00) ;
  }
  78% {
    -ms-transform:  translate(4px,19px)  scaleY(0.99) ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  scaleY(1.00) ;
  }
}

.journey { text-align: center; position: relative; overflow: hidden; }
  .journey .bg { background: rgba(0,0,0,0.6); position: absolute; left: 0; bottom: 0; top: 0; right: 0; z-index: 1; }
  .journey .sections { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; }
  .journey .section { position: relative; z-index: 5; padding: 15rem 18rem 1rem; }

  @media(max-width: 750px) {
    .journey .section { padding-left: 0; padding-right: 3rem; }
    .journey h2 { font-size: 2.5rem; }
  }

  .journey .menu { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); -moz-transform: translateY(-50%); z-index: 10; }
    .journey .menu .fa.fa-circle { display: none; }
    .journey .menu .active .fa.fa-circle { display: block; }
    .journey .menu .active .fa.fa-circle-o { display: none; }
    .journey .menu a { color: white; text-decoration: none; outline: 0; font-size: 1.3rem; position: absolute; top: 0; left: 0; display: block; }
    .journey .menu li { padding: 18px 0; position: relative; width: 25px; }
    .journey .menu em { display: block; width: 1px; height: 17px; background: white; position: absolute; left: 5px; bottom: 2px; }
    .journey .menu i { position: absolute; top: 1px; left: 0; }

  .journey .boat {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../img/boat.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    height: 50%;
    z-index: 1;
    animation: rocktheboat ease-in-out 8s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: rocktheboat ease-in-out 8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: rocktheboat ease-in-out 4s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: rocktheboat ease-in-out 4s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: rocktheboat ease-in-out 4s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;
  }
  @media (orientation: landscape) { 
    .journey .boat { background-position: center center; }
  }
  @media (orientation: portrait) { 
    .journey .boat { background-position: center bottom; }
  }

  /* .journey .dark * { color: #111; } */

  .journey p { font-size: 1.4rem; line-height: 2rem; }
  .journey .tight { width: 50%; margin: auto; }