/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(fonts/material-icons.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.is-visible{
  display: none;
}

p{
  font-family: 'Merriweather', serif;
}

body{
  overflow-x:hidden;
  font-family: 'Merriweather', serif;
  background-image: url("../images/alt_background-2.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /*background-color: rgba(0,102,102,1);*/

}

a{
  text-decoration: none;
  text-transform: uppercase;
}

a:hover{
  color: rgba(0,102,102,1);
  text-decoration: none;
}

.menu-wrapper{
  position: absolute;
  height: 
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0);
  text-align: center;
  z-index: 50;
  display: block;
}

.menu-button{
  color: rgba(0,102,102,1);
  background: rgba(255,255,255,0.5);
  font-size: 1.25em;
  font-family: 'Overlock', serif;
  text-align: center;
  position: relative;
  width: calc(100% / 7); /*Divide by number of menu items*/
  float: left;
  height: auto;

}

.menu-button:hover{
  background: #fff;
  color: rgba(0,102,102,1);
}

.menu-toggle{
  float: left;
  width: 100%;
  clear: both;
  cursor: pointer;
  padding-top: 1em;
  padding-bottom: 1.25em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

.menu-toggle a:link{
  color: rgba(0,102,102,1);
  text-transform: none;
}

a.menu-toggle{
  color: rgba(0,102,102,1);
  text-transform: none;
}

a.menu-toggle:hover{
  color: rgba(0,0,0,1);
  text-transform: none;
}

.menu-item{
  color: rgba(0,102,102,1);
  background: rgba(255,255,255,0);
  font-size: 1em;
  font-family: 'Oswald', sans-serif;
  position: relative;
  width: 95%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  cursor: pointer;
  float: left;
  padding-top: 1em;
  padding-bottom: 1em;
}

.menu-item:hover{
  color: rgba(255,255,255, 1);
  background: rgba(0,102,102,1);
}

/*Mobile Menu*/
.mobile-menu-wrapper{
  text-align: center;
  float: left;
}
.mobile-menu-button{
  color: #333;
  background: rgba(0,0,0,0.8);
  font-size: 1.5em;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  position: relative;
  width: 100%;
  float: left;
  height: auto;
  border-bottom: rgba(0,102,102,1); 1px solid;
}

.mobile-menu-button:hover{
  color: #333;
}

.mobile-menu-toggle{
  float: left;  
  color: #333;
  background: rgba(255,255,255,1);
  width: 100%;
  clear: both;
  cursor: pointer;
  padding-top: 1em;
  padding-bottom: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}
.mobile-menu-toggle:hover{
  background: rgba(0,102,102,1);;
  color: #FFF;
}

.mobile-menu-item{
  color: rgba(0,102,102,1);;
  background: rgba(255,255,255,0);
  font-size: 1em;
  font-family: 'Oswald', sans-serif;
  position: relative;
  width: 95%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  cursor: pointer;
  float: left;
  padding-top: 1em;
  padding-bottom: 1em;
}

.mobile-menu-item:hover{
  color: rgba(255,255,255, 1);
  background: rgba(27,113, 82, 0.8);
}

/*Sidebar*/
.sidebar{
  position: fixed;
  width: 300px;
  top: 0%; 
  left: -300px; 
  height: 100%;
  background: rgba(255,255,255, 1);
  z-index: 250;
  overflow: scroll;
  padding-top: 6em;
  box-shadow: 2px 0px 3px rgba(0,0,0,0.5)
}

.sidebar-item{
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
  color: rgba(0,0,0, 1);
  border-bottom: rgba(27,113, 82, 1) solid 1px;
  width: 100%;
  text-align: center;
  float: left;
  padding-top: 1em;
  padding-bottom: 1em;
  cursor: pointer;
}

.sidebar-item:hover{
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
  color: rgba(255,255,255, 1);
  border-bottom: rgba(27,113, 82, 1) solid 1px;
  width: 100%;
  text-align: center;
  float: left;
  padding-top: 1em;
  padding-bottom: 1em;
  background: rgba(27,113, 82, 1);
}

.menu{
  position: fixed;
  left: 0.5em;
  text-align: center; 
  color: rgba(0,102,102,1);
  top: 0em;
  z-index: 251;
  cursor: pointer;
}

.menu-close{
  position: fixed;
  left: 0.5em;
  text-align: center; 
  color: rgba(0,102,102,1);
;
  top: 0em;
  /*text-shadow: -1px 1px 2px rgba(0,0,0,0.5);*/
  z-index: 300;
  cursor: pointer;
}

.title{
  font-size: 2.5em;
  font-family: Cinzel;
  color: rgba(255,255,255, 1);
  line-height: 1em;
  margin-top: 15%;
  text-align: center;
}

.imageintext{
  padding-right: 1em;
  float: left;
}

h1{
  color: rgba(0,102,102,1);
  text-align: center;
  font-family: 'Overlock', serif;
}

h2{
  color: rgba(0,102,102,1);
  font-family: 'Overlock', serif;
}

h3{
  font-size: 1.25em;
  color: rgba(0,102,102,1);
  text-align: left;
  font-family: 'Overlock', serif;
}

h4{
  font-size: 1.25em;
  color: rgba(0,102,102,1);
;
  text-align: center;
  background: #fff;
  border-radius: 0.75em;
  font-family: 'Overlock', serif;
}


.logo{
  left: 0em;
  bottom: 0em;
  padding: 0em;
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0);
  border-bottom-left-radius: 0.5em;
  cursor: pointer;
}


.bio-image{
  width: 200px;
  margin-right: 1em;
  margin-bottom: 1em;
  float: left;
  clear: right;
}

.spacer{
  width: 100%;
  float: left;
  height: 2px;
  color: rgba(255,255,255,1);
  /**height: 300px;**/
}

.spacer-text{
  width: 30%;
  padding-left: 10%;
  padding-right: 10%;
  margin-left: 25%;
  margin-right: 25%;
  text-align: center;
  background: rgba(102,183,184,0.5);
  padding-top: 1em;
  padding-bottom: 1em;
  bottom: 0;
  vertical-align: middle;
  float: left;
  z-index: 300;
  position: absolute;
  font-size: 3em;
  font-family: 'Overlock', serif;

}

.fb-holder{
  /*max-width: 400px;*/
  float: left;
  width: auto;
  min-width: 500px;
  padding-left: calc( (50% - 500px) / 2);
  padding-right: calc( (50% - 500px) / 2);
  margin-bottom: 1em;
}

.in-holder{
  float: left;
  width: auto;
  
  min-width: 515px;
  padding-left: calc( (50% - 515px) / 2);
  padding-right: calc( (50% - 515px) / 2);

}
.clear{
  float: left;
  clear: both;
}

.copyright a{
  color: rgba(0,102,102,1);
}

.copyright a:hover{
  color: #fff;
}

.copyright{
  font-size: 1.1em;  
  display: block;
  font-family: 'Oswald', sans-serif;
  position: absolute;
  width: 25%;
  text-align: center;
  padding-left: 2.5%;
  padding-right: 2.5%;
  bottom: 0.1em;
  z-index: 50;
  bottom: 0em;
  left: 0em;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-top-right-radius: 1.5em;
}



.load-screen{
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 200;
    width: 100%;
    position: fixed;
    top: 0;
}

.load-content{
  height: 80%;
  margin-top: 5%;
  overflow-x: hidden;
  overflow-y: hidden;
  float: left;
  position: relative;
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  font-size: 1.5em;
  font-family: 'Oswald', sans-serif;
  color: #333;
  text-align: center;
}

.load-logo{
  width: 50%;
  max-width: 500px
}

.load-gif{
  width: 100%;
  height: 2px;
  z-index: 200;
  top: 0em;
  float: left;
  position: fixed;

}



.section {        
    position:relative;
    z-index:1;
    height:100%;
    width:100%;
    background-attachment:fixed;    /* this keeps the background in place */
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    float: left;
    /*padding-top set in JS*/
}

.footer {        
    padding-left: 5%;
    padding-right: 5%;
    width: 90%;
    position:relative;
    z-index: 100;
    background: rgba(0,102,102,1);
    padding-top: 100px;
    padding-bottom: 100px;
    float: left;
    font-family: 'Merriweather', serif;
    color: #fff
}

.footer-section{
  width: calc(85% / 3);
  padding-left: 2.5%;
  padding-right: 2.5%;
  float: left;
  text-align: center;
}

.footer-section > h5{
  color: #333;
  font-family: 'Overlock', serif;
}

.footer-section > a{
  color: #fff;
}

.footer-section > a:hover{
  color: #333;
}

.content{
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
    position:relative;
    z-index: 100;
    background: rgba(255,255,255,1);
    padding-top: 100px;
    padding-bottom: 100px;
    float: left;
}

.content-full{
    width: 100%;
    position:relative;
    z-index: 100;
    background: rgba(255,255,255,1);
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;

}

.content>p{

}


.box-large{
    float: left;
    margin-right: 2%;
    margin-left: 2%;
    padding-left: 0.5%;
    padding-right: 0.5%;
    width: 60%;  
    color: rgba(115,115,115,1);
    font-size: 1.5em;
    font-weight: bold;
    color: rgba(115,115,115,1);
}

.box-small{
    float: left;
    margin-right: 2%;
    margin-left: 2%;
    padding-left: 0.5%;
    padding-right: 0.5%;
    width: 30%;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 1em;
    background: rgba(0,102,102,1);
    font-weight: bold;
  
}

.box-small > p {
  width: 100%;
  float: left;
  color: rgba(255,255,255,1);
  text-align: center;
  font-family: 'Oswald', sans-serif;
}

.box-small > form {
  width: 100%;
  float: left;
  color: rgba(255,255,255,1);
  text-align: center;
  font-family: 'Oswald', sans-serif;
}

.box-small > p > a{
  width: 100%;
  float: left;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: rgba(255,255,255,1);
  text-align: center;
  font-family: 'Oswald', sans-serif;

}
.box-small > p > a:hover{
  color: rgba(255,204,0,1);
}
.box-small > h5 > a{
  width: 100%;
  float: left;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: rgba(255,204,0,1);
  text-align: center;
  font-family: 'Oswald', sans-serif;
}

.box-small > h5 > a:hover{
  color: rgba(255,204,0,1);
  background: #fff;
}
.top-nav{
  width: 95%;
  float: left;
  background: rgba(0,102,102,1);
  padding-right: 2.5%;
  padding-left: 2.5%;
}

.top-nav > span{
  float: right;
  background: rgba(0,102,102,1);
  padding: 5px;
  margin-left: 0.5em;
  color: #fff;
  font-family: 'Oswald', sans-serif;

}

.top-nav > span:hover{
  background: #333;
  cursor: pointer;
}

.top-nav > span > a{
  color: #fff;
}

.masthead{
  width: 100%;
  position: relative;
  float: left;
  z-index: 100;
  background: #fff;
  /*box-shadow: 0px 2px 5px rgba(0,0,0,0.5);*/
}

.logo{
  width: 15%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  float: left;
  vertical-align: middle;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.menu-holder{
  position: relative;
  width: 80%;
  /*background: rgba(0,0,0,0.5);*/
  float: left;
  vertical-align: middle;
  margin-top: 1em;
}

.overlay-text{
  width: 60%;
  margin-right: 15%;
  margin-left: 15%;
  padding-right: 5%;
  padding-left: 5%;
  background: rgba(255,255,255,0.7);
  color: rgba(0,102,102,1);
  font-family: 'Oswald' , sans-serif;
  float: left;
  text-align: center;
  font-size: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-top: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.overlay-text:hover{
  background: rgba(0,102,102,0.7);
  color: rgba(255,255,255,1);
}

.overlay-text-alt{
  width: 60%;
  margin-right: 15%;
  margin-left: 15%;
  padding-right: 5%;
  padding-left: 5%;
  background: rgba(0,102,102,0.7);
  color: rgba(255,255,255,1);
  font-family: 'Oswald' , sans-serif;
  float: left;
  text-align: center;
  font-size: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-top: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.overlay-text-alt:hover{
  background: rgba(255,255,255,0.7);
  color: rgba(0,102,102,1);
}

.home-final-1{
  float: left;
  width: calc(100% / 4);
  height: 300px;
  background-image: url("../images/gallery.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: relative; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-bottom: 0.25em #fff solid;
}

.home-final-2{
  float: left;
  width: calc((100% / 4) - 0.5em);
  height: 300px;
  background-image: url("../images/store.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: relative; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-bottom: 0.25em #fff solid;
  border-left: 0.25em #fff solid;
  border-right: 0.25em #fff solid;

}

.home-final-3{
  float: left;
  width: calc((100% / 4) - 0.25em);
  height: 300px;
  background-image: url("../images/testimonials.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: relative; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-bottom: 0.25em #fff solid;
  border-right: 0.25em #fff solid;

}


.home-final-4{
  float: left;
  width: calc(100% / 4);
  height: 300px;
  background-image: url("../images/dive_boat-promo.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: relative; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-bottom: 0.25em #fff solid;
}

.scrollto{
  padding: 0.5em;
  float: left;
  font-family: 'Oswald' , serif;
}

.header{
  float: left;
  width: auto;
  width: 100%;
}

.header-alt{
  float: left;
  width: auto;
  width: 100%;
}

.header-text{
  z-index: 200px;
  font-size: 3em;
  position: absolute;
  top: 1em;
  left: 1em;
  color: #fff;
  float: left;
  width: auto;
  padding: 0.5em;
  background: rgba(0,102,102,0.7);
  border-radius: 0em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; 
  max-width: 50%;
  font-family: 'Oswald' , serif;
}

@media screen and (max-width: 1024px){
  .fb-holder{
  /*max-width: 400px;*/
  float: left;
  width: auto;
  min-width: 500px;
  padding-left: calc( (100% - 500px) / 2);
  padding-right: calc( (100% - 500px) / 2);
  margin-bottom: 1em;
  }

  .in-holder{
  float: left;
  width: auto;
  min-width: 515px;
  padding-left: calc( (100% - 515px) / 2);
  padding-right: calc( (100% - 515px) / 2);
  }

  .menu-wrapper{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    display: none;
  }

  .spacer-text{
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  margin-left: 0%;
  margin-right: 0%;
  font-size: 2.5em;
  }
}

@media screen and (max-width: 768px) {
.header-text{
  font-size: 1.5em;
}
.logo{
  width: 50%;
}
.footer-section{
  width: 95%;

}
.home-final-1{
  display: none;
}
.home-final-2{
  display: none;
}
.home-final-3{
  display: none;
}
.home-final-4{
  display: none;
}

.spacer-text{
  width: 95%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  margin-left: 0%;
  margin-right: 0%;
}

  .box-small{
    width: 95%;
  }
  .box-large{
    width: 95%;
  }
  .title{
    font-size: 1.2em;
  }
 

  .sidebar-item{
  font-size: 1.25em;
  font-family: 'Oswald', sans-serif;
  color: rgba(0,0,0, 1);
  border-bottom: rgba(0,102,102,1); solid 1px;
  width: 100%;
  text-align: center;
  float: left;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  cursor: pointer;
  }

  .sidebar-item:hover{
  font-size: 1.25em;
  font-family: 'Oswald', sans-serif;
  color: rgba(255,255,255, 1);
  border-bottom: rgba(0,102,102,1); solid 1px;
  width: 100%;
  text-align: center;
  float: left;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background: rgba(27,113, 82, 1);
  }

  .sidebar-contact{
    font-size: 1.25em;
    font-family: 'Oswald', sans-serif;
    color: rgba(0,0,0, 1);
    width: 100%;
    text-align: center;
    float: left;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    cursor: pointer;
  }





  .content{
    padding-left: 2.5%;
    padding-right: 2.5%;
    width: 95%;
    position:relative;
    z-index: 100;
    background: rgba(255,255,255,1);
    padding-top: 100px;
    padding-bottom: 100px;
    float: left;
  }

}