/*
knk colors:
#468A99 (teal)
#C8F464 (neon-green)
#621A1B (red-dirt)

knk fonts:
futura pt
proxima nova
pt serif
source sans pro
din-condensed-web
*/

@font-face {
  font-family: pt-futura;
  src: url(font/FuturaPTHeavy.otf) format("opentype");
}

@font-face {
  font-family: pt-futura-bold;
  src: url(font/FuturaPTBold.otf) format("opentype");
}

@font-face {
  font-family: pt-futura-light;
  src: url(font/FuturaPTLight.otf) format("opentype");
}

@font-face {
  font-family: pt-serif-reg;
  src: url(font/pt-serif-reg.ttf) format("opentype");
}

@font-face {
  font-family: ge-narrow-bold;
  src: url(font/GreatEscapeW00NarrowBold.otf) format("opentype");
}

@font-face {
  font-family: proxima-nova-reg;
  src: url(font/proxima-nova-reg.otf) format("opentype");
}

@font-face {
  font-family: din-cond-reg;
  src: url(font/DINCond-Regular) format("opentype");
}


a {
      color: #FFFFFF;
      text-decoration: none;   
}
a:hover {
      color: #C8F464;
}

.page {
      text-align: center;
      width: 100%;
      margin: auto;
      padding: 0px;
}
.container {
      /*background-color: #FFFFFF;*/
      text-align: center;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}
.header {
      background-color: #468A99;
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      margin: auto;
      padding: 3px;
}

.left-header-box {
      font-family: pt-futura;
      font-size: 24px;
      color: #FFFFFF;
      text-align: center;
      width: 32%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
      float: left;
      z-index: 0;
}


.front-image {
      /*content: url("/img/Kauai-beach-01.jpg");*/
      text-align: center;
      width: 100%;
}
.front-title {
      font-family: pt-futura-bold;
      font-size: 120px;
      text-shadow: 3px 5px #000000;
      line-height: 0.86;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #FFFFFF;
      text-align: center;
      width: 100%;
      margin: auto;
      padding: 0px;
      z-index: 0;
}
.front-sub-title {
      font-family: pt-futura-light;
      font-size: 32px;
      font-stretch: extra-expanded;
      position: absolute;
      top: 56%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #FFFFFF;
      text-align: center;
      width: 100%;
      margin: auto;
      margin-top: 20px;
      padding: 0px;
      z-index: 9;
}
hr {
      display: block;
      margin-top: 2.5em;
      margin-bottom: 2.5em;
      margin-left: auto;
      margin-right: auto;
      border-style: inset;
      border-width: 1px;
      border-color: #dddddd;
      width: 90%;
}
.divider {
      margin: 0px;
      padding: 0px;
}

.main-content {
      background-color: #FFFFFF;
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      width: 1200px;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}
.content-title {
      background-color: #FFFFFF;
      font-family: pt-futura-bold;
      font-size: 42px;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      margin: auto;
      padding: 20px;
}
.content-sub-title {
      background-color: #FFFFFF;
      font-family: pt-futura-bold;
      font-size: 24px;
      color: #333333;
      text-align: left;
      width: 100%;
      display: inline-block;
      margin: auto;
      margin-top: 20px;
      margin-left: 10px;
      padding: 0px;
}
.content-intro {
      font-family: times;
      background-color: #FFFFFF;
      font-size: 16px;
      color: #333333;
      text-align: left;
      width: 90%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}
.sub-page {
      background-image: url("/img/kauai-q1-01-1200.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
}
.content-left-header {
      font-family: din-cond-reg;
      font-size: 28px;
      margin-bottom: 2%;
}
.content-left {
      font-family: proxima-nova-reg;
      font-size: 18px;
      color: #333333;
      text-align: left;
      width: 36%;
      padding: 2%;
      line-height: 120%;
}
.disclaimer {
      font-family: times;
      background-color: #FFFFFF;
      font-size: 16px;
      color: #333333;
      text-align: left;
      width: 75%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}
.content-header {
      background-color: #468A99;
      font-family: pt-futura-light;
      font-size: 28px;
      color: #ffffff;
      text-align: center;
      width: 100%;
      display: inline-block;
      margin: auto;
      margin-top: 20px;
      margin-bottom: 20px;
      padding: 8px;
}
.leading-cap {
      background-color: #FFFFFF;
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}
.mid-seal {
      width: 100%;
      text-align: center;
}
.moku-menu {
      background-color: #FFFFFF;
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      margin: auto;
      padding: 0px;
}
.moku-item {
      text-align: center;
      width: 13%;
      display: inline-block;
      margin: 5px;
      padding: 0px;
}
.moku-item:hover {
      background-color: #468A99;
      opacity: 0.8;
      box-shadow: 2px 2px #999999;
}
.moku-header {
      text-align: center;
      width: 100%;
      height: 200px;
      display: inline-block;
      margin: 0px;
      padding: 0px;
}

.moku-left-col {
      background-color: #FFFFFF;
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      vertical-align: top;
      width: 18%;
      display: inline-block;
      margin: 10px;;
      padding: 10px;
}
.moku-right-col {
      background-color: #FFFFFF;
      font-family: 'PT Serif';
      font-size: 1.5vw;
      color: #333333;
      text-align: left;
      vertical-align: top;
      width: 70%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
      padding-right: 20px;
}
.moku-map {
      margin: 5%;
      padding: 5%;
      text-align: center;
}

.moku-title {
      color: #666666;
      font-family: futura-pt;
      font-size: 45px;
      font-style: normal;
      font-weight: 700;
}

.moku-content {
      /*background-color: #FFFFFF;*/
      font-family: pt-serif-reg;
      font-size: 16px;
      color: #333333;
      text-align: left;
      width: 100%;
      display: inline-block;
      margin: 20px;
      padding: 0px;
}

.kudos {
      font-family: pt-serif-reg;
      font-size: 16px;
      color: #333333;
}

.ahupuaa-box { /*(per moku)*/
      background-color: #FFFFFF;
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}

.ahupuaa-build-label-kona {
      background-image: url("/img/ahupuaa/kona-ahupuaa-label-blank.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 100%;
      text-align: center;
      margin-top: 3%;
      margin-bottom: 3%;
}
.ahupuaa-build-label-kona:hover {
      box-shadow: 2px 2px #999999;
}
.ahupuaa-build-label-puna {
      background-image: url("/img/ahupuaa/puna-ahupuaa-label-blank.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 100%;
      text-align: center;
      margin-top: 3%;
      margin-bottom: 3%;
}
.ahupuaa-build-label-puna:hover {
      box-shadow: 2px 2px #999999;
}
.ahupuaa-build-label-koolau {
      background-image: url("/img/ahupuaa/koolau-ahupuaa-label-blank.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 100%;
      text-align: center;
      margin-top: 3%;
      margin-bottom: 3%;
}
.ahupuaa-build-label-koolau:hover {
      box-shadow: 2px 2px #999999;
}
.ahupuaa-build-label-halelea {
      background-image: url("/img/ahupuaa/halelea-ahupuaa-label-blank.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 100%;
      text-align: center;
      margin-top: 3%;
      margin-bottom: 3%;
}
.ahupuaa-build-label-halelea:hover {
      box-shadow: 2px 2px #999999;
}
.ahupuaa-build-label-napali {
      background-image: url("/img/ahupuaa/napali-ahupuaa-label-blank.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 100%;
      text-align: center;
      margin-top: 3%;
      margin-bottom: 3%;
}
.ahupuaa-build-label-napali:hover {
      box-shadow: 2px 2px #999999;
}


.ahupuaa-container {
      width: 100%;
      margin-top: 20px;
}
.ahupuaa-left-col {
      /*background-color: #eeddff;*/
      width: 30%;
      text-align: left;
      display: inline-block;
      vertical-align: top;
      float: left;
}
.ahupuaa-right-col {
      width: 65%;
      /*background-color: #eeffdd;*/
      display: inline-block;
      vertical-align: top;
      float: right;
}
.ahupuaa-label { /*also used in moku*/
      font-family: ge-narrow-bold;
      font-size: 24px;
      color: #000000;
      text-align: center;
      width: 80%;
      display: inline-block;
      margin: auto;
      padding: 0px;
      margin-left: 25%;
      margin-top: 10px;
}
.ahupuaa-label-wrapper {
      width:80%;
      margin-left: 10%;
}
.ahupuaa-blurb {
      font-family: pt-serif-reg;
      font-size: 14px;
      color: #333333;
      width:80%;
      margin: 10%;
}
.ahupuaa-moku-box {
      width: 50%;
      margin-left: 24%;
      margin-bottom: 20px;
}
.ahupuaa-left-list {

}
.ahupuaa-map {
      /*background-color: #FFFFFF;*/
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}
.ahupuaa-title {
      /*background-color: #FFFFFF;*/
      font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size:20px;
      font-style:normal;
      color: #333333;
      text-align: left;
      width: 50%;
      float: left;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 0px;
}
.ahupuaa-content {
      /*background-color: #FFFFFF;*/
      font-family: pt-serif-reg;
      font-size: 16px;
      color: #333333;
      text-align: left;
      width: 90%;
      display: inline-block;
      margin: 20px;
      margin-right: 50px;
      padding: 0px;
}


.surf-weather-section {
      background-color: #FFFFFF;
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}
.surf-weather-item {
      background-color: #FFFFFF;
      font-size: 1.5vw;
      color: #333333;
      text-align: center;
      width: 24%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}

.rpt-content {
      font-family: courier;
      font-size: 9px;
      line-height: 100%;
}

.bib-wrapper {
      font-family: pt-serif-reg;
      font-size: 16px;
      width: 80%;
      text-align: left;
      padding: 20px;
}

.bib-inset {
      font-family: courier;
      font-size: 16px;
      width: 80%;
      text-align: left;
      padding: 20px;
}

.bc-title {
      font-family: pt-futura-bold;
      font-size: 42px;
      color: #333333;
      text-align: center;
      width: 100%;
      margin: auto;
      padding: 20px;
}

.bc-row {
      width: 100%;
}

.bc-img {
      width: 20%;
      display: inline-block;
      vertical-align: top;
}
.bc-img-caption {
      font-family: times;
      width: 100%;
      font-size: 12px;
      text-align: center;
}

.bc-intro {
      font-family: times;
      background-color: #FFFFFF;
      font-size: 16px;
      color: #333333;
      text-align: left;
      width: 70%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
      vertical-align: top;
}

.bc-pdf-link {
     width: 20%; 
     display: inline-block;
     font-family: futura-pt;
     font-weight: bold;
     float: left;
     padding: 0.5%;
     padding-bottom: 15px;
     color: #222222;
}
.bc-pdf-link:hover {
     color: #468A99;
}





.footer {
      background-color: #621A1B;
      font-family: pt-futura;
      font-size: 1.5vw;
      color: #ffffff;
      text-align: center;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 30px;
}
.footer-left {
      text-align: center;
      width: 20%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}
.footer-center {
      text-align: center;
      width: 20%;
      display: inline-block;
      margin: auto;
      padding: 0px;
}
.footer-right {
      text-align: center;
      width: 20%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
}


/*Start media queries*/
/* start of desktop styles */

@media screen and (max-width: 1200px) {
/* start of large tablet styles */
      .main-content {
            background-color: #FFFFFF;
            font-size: 1.5vw;
            color: #333333;
            text-align: center;
            width: 100%;
      }
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */

      .front-title {
            font-size: 60px;
            top: 30%;
      }
      .front-sub-title {
            top: 40%;
      }
      .left-header-box {
            font-size: 18px;
            width: 40%;
      }
      .moku-left-col {
            width: 16%;
      }
      .moku-right-col {
            width: 70%;
      }
      .ahupuaa-label { /*also used in moku*/
            font-size: 18px;
      }
      .ahupuaa-blurb {
            font-size: 12px;
      }
      .content-title {
            font-size: 32px;
      }
      .content-left {
            width: 80%;
      }
      .bc-pdf-link {
            font-size:14px;
            width: 24%;
      }
      .surf-weather-item {
            width: 48%;
      }
      .footer {
            font-size: 16px;
            padding: 10px;
      }

}

@media screen and (max-width: 479px) {
/* start of phone styles */

      .front-title {
            font-size: 40px;
            top: 20%;
      }
      .front-sub-title {
            top: 24%;
      }
      .left-header-box {
            font-size: 14px;
            width: 40%;
      }
      .moku-right-col {
            width: 60%;
            padding-right: 9px;
      }
      .content-title {
            font-size: 24px;
      }
      .bc-pdf-link {
            font-size:11px;
      }
      .surf-weather-item {
            width: 80%;
      }
      .moku-item {
            width: 30%;
            margin-bottom: 32px;
      }
      .ahupuaa-label { /*also used in moku*/
            font-size: 14px;
      }
      .footer {
            font-size: 11px;
            padding: 10px;
      }
}