@mixin boat-animation-rules($startX, $startY, $endX, $endY) {
  $crest: -7px;
  $trough: -12px;
  @keyframes animatedBoat {
    0%    { background-position: $startX $startY; bottom: $crest;}
    10%   { bottom: $trough; }
    20%   { bottom: $crest; }
    30%   { bottom: $trough; }
    40%   { bottom: $crest; }
    50%   { bottom: $trough; }
    60%   { bottom: $crest; }
    70%   { bottom: $trough; }
    80%   { bottom: $crest; }
    90%   { bottom: $trough; }
    100%  { background-position: $endX $endY; bottom: $crest; }
  }
  @-moz-keyframes animatedBoat {
    0%    { background-position: $startX $startY; bottom: $crest;}
    10%   { bottom: $trough; }
    20%   { bottom: $crest; }
    30%   { bottom: $trough; }
    40%   { bottom: $crest; }
    50%   { bottom: $trough; }
    60%   { bottom: $crest; }
    70%   { bottom: $trough; }
    80%   { bottom: $crest; }
    90%   { bottom: $trough; }
    100%  { background-position: $endX $endY; bottom: $crest; }
  }
  @-webkit-keyframes animatedBoat {
    0%    { background-position: $startX $startY; bottom: $crest;}
    10%   { bottom: $trough; }
    20%   { bottom: $crest; }
    30%   { bottom: $trough; }
    40%   { bottom: $crest; }
    50%   { bottom: $trough; }
    60%   { bottom: $crest; }
    70%   { bottom: $trough; }
    80%   { bottom: $crest; }
    90%   { bottom: $trough; }
    100%  { background-position: $endX $endY; bottom: $crest; }
  }
  @-ms-keyframes animatedBoat {
    0%    { background-position: $startX $startY; bottom: $crest;}
    10%   { bottom: $trough; }
    20%   { bottom: $crest; }
    30%   { bottom: $trough; }
    40%   { bottom: $crest; }
    50%   { bottom: $trough; }
    60%   { bottom: $crest; }
    70%   { bottom: $trough; }
    80%   { bottom: $crest; }
    90%   { bottom: $trough; }
    100%  { background-position: $endX $endY; bottom: $crest; }
  }
  @-o-keyframes animatedBoat {
    0%    { background-position: $startX $startY; bottom: $crest;}
    10%   { bottom: $trough; }
    20%   { bottom: $crest; }
    30%   { bottom: $trough; }
    40%   { bottom: $crest; }
    50%   { bottom: $trough; }
    60%   { bottom: $crest; }
    70%   { bottom: $trough; }
    80%   { bottom: $crest; }
    90%   { bottom: $trough; }
    100%  { background-position: $endX $endY; bottom: $crest; }
  }
}

$boat-animation: animatedBoat 10s linear infinite;
$source-font: $base;
$inconsolata-font: 'Inconsolata', Fixed, monospace;
$vertical-margin: 25%;
$footer-padding: 4em;
$mobile-maximum-width: 414px;
$tablet-maximum-width: 768px;
$boat-size: 150px;
$gutter: 20px;
$normalWeight: 400;
$lightWeight: 300;
$titleFontSize: 54px;
$bodyFontSize: 18px;
$helmLogoHeight: 79px;
$helmLogoWidth: 170px;
$fishSize: 210px;
$fishDepth: 150px;
$deisLogoWidth: 125px;


.home {
  box-sizing: border-box;
  height: 100%;

  .home-intro-wrap {
    box-sizing: border-box;
    height: 100%;
  }

  h3 {
    color: #f6fbfe;
    font-size: 1.125rem;
    @include klinicBold;
  }

  #helm {
    background: $blue1;
    max-width: 100%;
    position: relative;
    z-index: 500;

    &:after {
      z-index: -100;
      display: block;
      height: 850px;
      width: 100%;
      bottom: 0;
      background-color: $blue1;
      position: fixed;
    }

    .billboard {
      background-color: white;
      background: url('../img/pattern-topo.png') left top repeat;
      background-size: 376px;
      padding-top: 230px;
      position: relative;
      text-align: center;

      .helm-logo {
        max-width: 350px;
      }

      h1 {
        @include klinicBold;
        color: $blue1;
        font-size: 2.57rem;
        text-transform: none;
      }

      h2 {
        font-family: $base;
        color: $blue4;
        font-size: 1rem;
        margin-bottom: 30px;
      }

      .helm-logo {
        position: absolute;
        left: 5rem;
        top: 2rem;
      }

      .fa {
        position: absolute;
        font-size: 2.5rem;
        top: 4rem;
        right: 5rem;
        color: $grey4;

        &.fa-twitter {
          right: 9rem;
          color: $blue2;
          @include transition;
        }

        &:hover {
          opacity: 0.7;
        }
      }

      &:after {
        $height: 6px;
        background: url('../img/pattern-waves.png') left top repeat-x;
        background-size: $gutter;
        bottom: 0;
        content: '';
        display: block;
        height: $height;
        position: absolute;
        width: 100%;
      }
    }
  }

  @media only screen and (min-device-width: $mobile-maximum-width + 1) {
    @include boat-animation-rules(-$boat-size, 25%, 145%, 0);
  }

  #boat {
    height: 2em;

    @media only screen and (min-device-width: $mobile-maximum-width + 1) {
      $duration: 20s;
      background: url('../img/boat.png') no-repeat;
      background-size: $boat-size;
      height: 120px; //TODO programmatize this!
      position: relative;
      margin-top: 45px;

      -moz-animation: $boat-animation;
      -webkit-animation: $boat-animation;
      -ms-animation: $boat-animation;
      -o-animation: $boat-animation;
      animation: $boat-animation;
      -webkit-animation-duration: $duration;
      -moz-animation-duration: $duration;
      -ms-animation-duration: $duration;
      -o-animation-duration: $duration;
      animation-duration: $duration;
    }
  }

  .home-featured {
    background-color: $blue1;
    padding-top: 20px;
    padding-bottom: 40px;
    min-height: 400px;

    .panels {
      width: 92%;
      max-width: 1140px;
      min-width: 800px;
    }

    .panel {
      background-color: white;
      @include box-shadow(0,1px,4px,$blue4);
      @include border-radius(0.25em,0.25em);
      text-align: center;
      min-height: 125px;
      color: $grey4;

      h3 {
        padding: 0.75rem 0 0.5rem;
        border-bottom: 1px solid $light2;
        margin-bottom: 1rem;
        font-size: 1rem;
        color: $blue3;
        @include klinicBold;
        letter-spacing: 0.02em;
      }

      p {
        line-height: 1.4;
        display: block;
        font-size: 0.925rem;
        padding: 0 3.5% 1rem;
      }
    }
  }
}
