@font-face {
  font-family: 'A-Love-of-Thunder';
  src: url('/fonts/A-Love-of-Thunder.ttf.woff') format('woff'), url('/fonts/A-Love-of-Thunder.ttf.svg#A-Love-of-Thunder') format('svg'), url('/fonts/A-Love-of-Thunder.ttf.eot'), url('/fonts/A-Love-of-Thunder.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
/* Default 
*******************/
.hero {
  height: 190px;
  background-color: #CEDD3C;
  background-image: url('/images/home_images/header-zm-boat.png');
  background-position: bottom;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  -webkit-background-size: 290px 69px;
  -moz-background-size: 290px 69px;
  -o-background-size: 290px 69px;
  background-size: 290px 69px;
}
.hero .container {
  text-align: center;
}
.hero .container h1 {
  margin: 20px 0;
  color: #202113;
  font-family: 'A-Love-of-Thunder', sans-serif;
  font-weight: 300;
  font-size: 34px;
  font-size: 2.125rem;
  line-height: 39px;
  text-transform: uppercase;
}
.hero .container h1 span.title-break {
  display: block;
}
.hero .container div.circle-link {
  display: table-cell;
  position: relative;
  bottom: 8px;
  left: -8px;
  height: 92px;
  width: 92px;
  text-transform: uppercase;
  vertical-align: middle;
  background: #EC1E23;
  border-radius: 50%;
}
.hero .container div.circle-link span {
  display: table-cell;
  padding: 10px 0 0;
  color: #fff;
  font-family: 'A-Love-of-Thunder', sans-serif;
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 21px;
  text-align: center;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
.hero .container div.circle-link span a {
  color: #FFF;
}
.hero .container div.circle-link span a:hover {
  text-decoration: underline;
}
.hero-linkbar {
  padding: 25px 20px;
  text-align: center;
  background-color: #000;
}
.hero-linkbar p {
  margin: 0;
  font-family: 'A-Love-of-Thunder', sans-serif;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 20px;
}
.hero-linkbar p a {
  color: #E6E6E6;
}
.hero-linkbar p a:hover {
  text-decoration: underline;
}
/* Default Ends 
*******************/
/* MEDIA QUERIES
//////////////////////////////////////*/
/* Phone - Landscape 
***************************************/
@media screen and (min-width: 23.438em) and (max-width: 41.625em) {
  .hero {
    height: 215px;
    background-position: 25% 100%;
    -webkit-background-size: 340px 74px;
    -moz-background-size: 340px 74px;
    -o-background-size: 340px 74px;
    background-size: 340px 74px;
  }
  .hero .container h1 {
    margin: 35px 0 0;
    width: auto;
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 45px;
  }
  .hero .container h1 span.title-break {
    display: block;
  }
  .hero .container div.circle-link {
    bottom: -10px;
  }
  .hero-linkbar p {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 24px;
  }
}
@media screen and (min-width: 41.688em) and (max-width: 47.938em) {
  .hero {
    height: 215px;
    background-position: 10% 100%;
    -webkit-background-size: 500px 109px;
    -moz-background-size: 500px 109px;
    -o-background-size: 500px 109px;
    background-size: 500px 109px;
  }
  .hero .container h1 {
    margin: 35px 0 0;
    width: auto;
    font-size: 38px;
    font-size: 2.375rem;
    line-height: 43px;
  }
  .hero .container h1 span.title-break {
    display: inline;
  }
  .hero .container div.circle-link {
    float: right;
    bottom: 0;
    margin: 60px 0 0;
  }
  .hero .container div.circle-link span {
    padding: 15px 0 0;
  }
  .hero-linkbar p {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 28px;
  }
}
/* Phone - Landscape End 
***************************************/
/* Tablet Portrait 
***************************************/
@media screen and (min-width: 48em) and (max-width: 61.938em) {
  .hero {
    height: 245px;
    background-position: 10% 100%;
    -webkit-background-size: 600px 131px;
    -moz-background-size: 600px 131px;
    -o-background-size: 600px 131px;
    background-size: 600px 131px;
  }
  .hero .container h1 {
    margin: 35px 0 0;
    width: auto;
    font-size: 42px;
    font-size: 2.625rem;
    line-height: 47px;
  }
  .hero .container h1 span.title-break {
    display: inline;
  }
  .hero .container div.circle-link {
    float: right;
    bottom: 0;
    margin: 80px 0 0;
  }
  .hero .container div.circle-link span {
    padding: 15px 0 0;
  }
  .hero-linkbar p {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 28px;
  }
}
/* Tablet Portrait End 
***************************************/
/* Desktop Narrow/Tablet Landscape 
***************************************/
@media screen and (min-width: 62em) {
  .hero {
    height: 265px;
    background-position: 50% 100%;
    -webkit-background-size: 700px 153px;
    -moz-background-size: 700px 153px;
    -o-background-size: 700px 153px;
    background-size: 700px 153px;
  }
  .hero .container h1 {
    margin: 35px 0 0;
    width: auto;
    font-size: 56px;
    font-size: 3.5rem;
    line-height: 60px;
  }
  .hero .container h1 span.title-break {
    display: inline;
  }
  .hero .container div.circle-link {
    float: right;
    bottom: 0;
    margin: 90px 0 0;
  }
  .hero .container div.circle-link span {
    padding: 15px 0 0;
  }
  .hero-linkbar p {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 28px;
  }
}
/* Desktop Narrow/Tablet Landscape End
***************************************/
/* Desktop Wide 
****************/
/* Desktop Wide End
********************/
