/* Global */



@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');



*{

  padding: 0;

  margin: 0;

}



body, html{

  height: 100%;

  font-family: 'Roboto', sans-serif;

}



a{

  text-decoration: none;

  font-family: 'Roboto', sans-serif;

  padding: 0%;

}



.overlay{

background-color: rgba(0, 0, 50, 0.7);

height: 100%;

}



.overlay2{

background-color: rgba(0, 0, 0, 0.5);

height: 100%;

}



.break{

background-color: rgb(0,0,50); 

height:75px;

}



#myNavbar{

  width: 100%;

  margin: auto;

}



#myNavbar a{

margin-top: 10px;

padding:25px;

color: #000;

font-weight: bold;

}



#myNavbar p{

margin-top: 10px;

padding:25px;

font-weight:bold;

}



#myNavbar a:hover{

  color: rgb(150, 0, 0);

}



#myNavbar img{

width:100px;

padding:0px;

margin-right:5px;

}



#mySidebar{

  color: #fff;

  background-color: rgba(50,0,0, 0.9);

  display:none; 

  right:0;

}

/* Home Page */







.bgimg-1 {

  background-position: center;

  background-size: cover;

  background-image: url("../img/boat.jpg");

  height: 100%;

}





.bgimg-5 {

background-position: center;

background-size: cover;

background-image: url("../img/water.jpg");

height: max-content;

}





#home{

  font-family: 'Roboto', sans-serif;

}



#home span{

color:rgb(150, 0, 0);

}



#home a{

width: fit-content;

margin-left: 50px;

}



#homeimgdt{

width:25%;

margin:15px;

}



#homeimgdt2{

  width:20%;

  top:10%;

  }



#homeimgmob{

  width:60%;

  top:10%;

  }



#headerboxdt{ 

padding: 10px 25px; 

bottom:5%;

font-weight: 700;

width: max-content;

background-color: white; 

}



#headerboxdt a{

  margin: 0;

  color: rgb(150,0,0);

}



#headerboxdt img{

  width:25%;

}



#headerboxlt{

padding: 10px 25px; 

bottom:5%;

font-weight: 700;

width: max-content;

background-color: white; 

}



#headerboxlt a{

  margin: 0;

  color: rgb(150,0,0);

}



#cpr{

  background-color: rgb(100, 100, 100);

}



#cprdiv{

  max-width: 1250px;

  margin: auto;

  font-family: 'Roboto', sans-serif;

  color: #fff;

}



#cprdiv img{

  width: 100%;

}



#cprdiv a{

  margin: 25px;

  width: 200px;

  background-color:rgb(150, 0, 0);

}



#dancpr img{

  width: 25%;

}



#veteransdiv{

  max-width: 1100px;

  margin: auto;

  font-family: 'Roboto', sans-serif;

}



#veteransdiv span{

  color: rgb(150,0,0);

}



#veteransdiv img{

  width: 100%;

}





/* Services Section */



#servicebox{

font-family: 'Roboto', sans-serif;

max-width:950px; 

margin: auto;

}



#servicebox img{

width:100%;

margin-bottom: 20px

}





#services p{



font-family: 'Roboto', sans-serif;

background-color: rgba(150,0,0,0.8);

padding: 0 5px;

}



#services h3{

margin-bottom: 24px;

}



#bubblesbox{

max-width:800px;

margin: auto;

font-family: 'Roboto', sans-serif;

}



#bubblesbox video{

width:100%; 

}



#about2{

max-width:1250px; 

margin: auto;

}



#imgdt{

height: 500px;

}



#imgmob{

height: 500px;

padding-top: 20px;

}



#about2 hr{

margin-bottom:15px;

border-width: 2px;

width:75%;

border-color: rgb(150, 0, 0)

}



#show1{

    background-image: url("../img/cliff.jpg");

    background-repeat: no-repeat;

    background-size: contain;

    height: 500px;

    width: 100%;

}



#show2{

  background-image: url("../img/wreck2.jpg");

  background-repeat: no-repeat;

  background-size: contain;

  height: 500px;

  width: 100%;

}



/* Gallery */



.myGrid{

margin:auto; 

max-width: 1000px;

}



.myGrid img{

width: 100%;

}



#photogrid{

  font-family: 'Roboto', sans-serif;

  max-width: 1000px;

  margin: auto;

}

#photogrid img{

margin-bottom: 16px;

}



#slide{

max-width:800px; 

margin:auto;

}



#slide img{

width: 100%;

}



#controls{

width: 100%;

}



#socdiv{

  max-width: 1000px;

  margin: auto;

}

#socdiv a{

  color: rgb(150,0,0);

}

#socdiv2 i{

  padding-left: 15px;

  padding-right: 10px;

}



#socdiv2 img{

  width: 25%;

}



/* About Section */

#about1{

  font-family: 'Roboto', sans-serif;

  height: auto;

}

#about2{

  font-family: 'Roboto', sans-serif;

  height: auto;

}





#about p{

  font-size: 16px;

  font-weight: 400;

}



footer{

  font-family: 'Roboto', sans-serif;

}



footer li {

  list-style: none;

  padding: 5px;

}



footer li a{

  margin: 25px;

}



footer i{

  padding-right: 15px;

}



#foot{

background-color: rgb(0,0,100);

}



#footdiv{

max-width:1250px; margin:auto;

}



#contact{

height: 300px;

}



#contact hr{

border-width: 1px;

width:50%;

border-color: rgb(255,255,255);

}



#hours{

height: 300px;

}



#hours hr{

border-width: 1px;

width:50%;

border-color: rgb(255,255,255);

}



#hoursdiv{

padding-top:5px;

}



#links{

height: 300px;

}



#links hr{

border-width: 1px;

width:50%;

border-color: rgb(255,255,255);

}



.container {

  padding: 5px;

}





/* Dive Center Page */



#aboutus{

  max-width: 60%;

  margin: auto;

}



#aboutusimg img{

  height: 600px;

}





#aboutus img{

  width:100%;

}



#divecenterdiv{

  font-family: 'Roboto', sans-serif;

  max-width: 1250px;

}



#divecenter hr{

  border-width: 2px; 

  width:25%; 

  margin: auto; 

  border-color: rgb(0, 0, 100);

}



#divecenter img{

  width:25%;

}

#shpdiv{

  max-width: 1000px;

  margin: auto;

}

#shpdiv img{

  padding-bottom: 10px;

}



#ssibdg img{

  width: 15%;

  padding-top: 24px;

}





#divedifference{

  font-family: 'Roboto', sans-serif;

  max-width: 1150px;

}



#divedifferencediv{

  font-family: 'Roboto', sans-serif;

}



#divedifferencediv hr{

padding:10px;

border-width: 2px; 

width:25%; 

margin:auto; 

border-color: rgb(0, 0, 100);

}



#divedifferencediv h4{

  border-bottom: rgb(0,0,100);

  border-bottom-style: solid;

  border-width: 1px;

  width: max-content;

}



#divedifferencediv a{

  width: 150px; 

  background-color:rgb(150, 0, 0);

}



#divedifferencediv img{

  width: 45%;

  padding: 10px;

}



#dpmobile1 a{

  background-color: #fff;

}

#dpmobile2 img{

  background-color: #000;

}



#piccollage img{

  width:75%;

}



#picdiv1 img{

  width: 100%;

}



#picdiv2 img{

  width: 100%;

}



#picdiv3 img{

  width: 100%;

}



#picdiv4 img{

  width: 100%;

}



#picdiv5 img{

  width: 100%;

}



#pic{

  background-color: rgb(0,0,50);

}



#sales_div{

  width: 100%;

  margin: auto;

}

#sales_div img{

  width:100%;

  margin: 0 25px;

}



#salesdiv img{

  width:100%;

  height: 175px;

}



#contactdiv1 img{

  width: 50%; 

}



#contactdiv2 img{

  width: 50%; 

}



#contactdiv3 img{

  width: 50%; 

}



#staff{

  font-family: 'Roboto', sans-serif;

  

}



#staffdiv{

  max-width: 1000px;

  padding:128px 16px;

}



#staffdiv hr{

  padding:10px;

  border-width: 2px; 

  width:15%; 

  margin:auto; 

  border-color: rgb(0, 0, 100);

}



#staffcard{

  margin-top:64px;

}



#staffcard img{

  width: 100%;

}





#staff button{

  color: #fff;

  background-color: rgb(150, 0, 0);

  padding:5px 10px;

}



#service{

  width: 75%;

  margin: auto;

  font-family: 'Roboto', sans-serif;

}



#servicediv{

  max-width: 1250px;

}



#servicediv hr{

  border-width: 2px; 

  width:25%; 

  margin: auto; 

  border-color: rgb(0, 0, 100);

}



#branddiv{

  padding-top: 24px;

}



#branddiv img{

  width:175px; 

  height:75px;

}



#trainlogodiv{

  padding-top: 24px;

}



#trainlogodiv img{

  width:100%; 

}





#certdiv{

  padding-top: 24px;

}



#certdiv img{

  width:175px; 

  height:75px;

}



#certdiv a{

  background-color: #fff;

}



#service h4{

  border-bottom: rgb(0,0,100);

  border-bottom-style: solid;

  border-width: 1px;

  width: max-content;

}



#servicetop{

  max-width: 60%;

  margin: auto;

}



#servicetopimg img{

  height:400px;

}



#servicetop img{

  width:100%;

}





/* Training Page*/



#trainer{

  max-width: 60%;

  margin: auto;

}



#training{

  font-family: 'Roboto', sans-serif;

}



#trainerimg img{

  height:400px;

}





#trainer img{

  width:100%;

}



#trainingdiv{

  max-width: 1250px;

}



#trainingdiv hr{

  border-width: 2px; 

  width:25%; 

  margin: auto; 

  border-color: rgb(0,0,75);

}



#trainingdiv img{

  width: 100%;

}



#tryscuba{

  font-family: 'Roboto', sans-serif;

}



#tryscubadiv{

  max-width: 1150px; 

  margin: auto;

}



#classbtn a{

  background-color:rgb(150, 0, 0);

}

#train{

margin: auto;

}



#train img{

  height:300px;

  width:100%;

}



#train2{

  height:300px; 

  background-color:rgb(0,0,100);

}



#train3 img{

  height:300px;

  width:100%;

}



#train4{

  height:300px;

  background-color:rgb(0,0,100);

}



#train5 img{

  height:300px;

  width:100%;

}



#dive{

  font-family: 'Roboto', sans-serif;

}



#divediv{

  max-width: 1250px; 

  margin: auto;

}



#divediv2 p{

  padding-bottom: 24px;

}



#divediv2 li{

  padding-bottom: 12px;

}



#divediv3{

  height: 650px;

}

#divediv3 li{

  padding-bottom: 24px;

}



#divediv3 img{

  width:50%;

}



#ssi2 h4{

  border-bottom: rgb(0,0,100);

  border-bottom-style: solid;

  border-width: 1px;

  width: max-content;

}



#app{

  height: 600px;

}



#app iframe{

  width:100%; 

  height:300px;

}



#app img{

  width: 150px;

}



#appimg img{

  width: 100%;

  height: 600px;

}



#ssilogo img{

  width: 50%;

  height: 100px;

  margin-top: 75px;

  margin-left: 25px;

}



#danlogo img{

  width:50%;

}



#adapt{

background-color: rgb(0, 0, 75);

color: #fff;

font-family: 'Roboto', sans-serif;

}



#adaptdiv{

  margin: auto;

  font-family: 'Roboto', sans-serif;

}



#pirate{

background-position: center;

background-size: cover;

background-repeat: no-repeat;

background-image: url("../img/pirates2.jpg");

height: 500px;

}



#pirate2{

  height:600px;

}



#pirate2 img{

  width: 50%;

}





#ssi{

font-family: 'Roboto', sans-serif;

}



#ssidiv{

  max-width: 1250px; 

  margin: auto;

}



#ssidivimg img{

  width: 50%;

}



#ssidivimg a{

  color:rgb(150,0,0);

}



#ssi2 img{

  width: 100%;

}



#adaptdiv2{

  max-width:500px;

  margin: auto;

}



#adaptdiv2 iframe{

  width: 100%;

  height: 300px;

}





#dp{

background-color:rgb(50, 70, 85);

height: min-content;

font-family: 'Roboto', sans-serif;

}



#dpdiv{

  max-width:1000px; 

  margin: auto; 

  font-family: 'Roboto', sans-serif;

}



#dpdiv iframe{

  width: 100%;

  height: 400px;

}



#dpdiv span{

  color:rgb(150,0,0);

}



#dp2{

  font-family: 'Roboto', sans-serif;

}



#dp3{

  background-color:rgb(0,0,75); 

  color: #fff;

}



#dan{

  font-family: 'Roboto', sans-serif;

}



#dandiv{

  max-width: 1000px;

  margin: auto;

}



#dandivimg img{

  width:50%;

}



#dandivimg p{

  color: red;

}



#dandivimg a{

  color:rgb(150,0,0);

}



#danclass1 img{

  width:100%;

}



#danclass1 p{

  width:100%; 

  color: #fff; 

  background-color: rgba(0,0,75,0.85);

}



#danclass2 img{

  width:100%;

}



#danclass2 p{

  width:100%; 

  color: #fff; 

  background-color: rgba(0,0,75,0.85);

}



#dc2 a{

  color:rgb(150,0,0);

}



#danclass3 img{

  width:100%;

}



#danclass3 p{

  width:100%; 

  color: #fff; 

  background-color: rgba(0,0,75,0.85);

}



#danclass4 img{

  width:100%;

}



#danclass4 p{

  width:100%; 

  color: #fff; 

  background-color: rgba(0,0,75,0.85);

}



#danclass5 img{

  width:100%;

}



#danclass5 p{

  width:100%; 

  color: #fff; 

  background-color: rgba(0,0,75,0.85);

}



#erdidiv{

  max-width: 1000px; 

  margin: auto;

  font-family: 'Roboto', sans-serif;

}



#erdidivimg img{

  width:50%;

}



#erdidivimg a{

  color:rgb(150,0,0);

}



#erdipics{

  max-width: 1250px;

  margin:auto;

}



#erdipics img{

  padding-bottom: 24px;

}



#picserdi img{

  padding-bottom: 24px;

}



#divetravel span{

  color: rgb(150,0,0);

  font-weight: bolder;

}



#bsa{

  font-family: 'Roboto', sans-serif;

  max-width: 1000px;

  margin:auto;

}



#bsadivimg img{

  width:50%;

}



#bsadivimg a{

  color:rgb(150,0,0);

}



#picsbsa img{

  width: 50%;

  padding-bottom: 24px;

}



#picbsa img{

  padding-bottom: 24px;

}



/* Classes Page */



#classes{

width: 85%;

margin: auto;

font-family: 'Roboto', sans-serif;

}



#classimg img{

height: 400px;

}



#classes p{

margin-bottom:20px;

}



#classestitle p{

  margin: 0;

}



#classes hr{

  border-width: 2px; 

  width:25%; 

  margin: auto; 

  border-color: rgb(0,0,75);

}



#classes img{

width: 100%;

}



/* Calender */



#schedule{

  width: 60%;

  margin: auto;

}



#schedule img{

  width: 100%;

}



#scheduleimg img{

  height: 400px;

}



#calendar{

width:85%;

margin: auto;

}



#calendar hr{

  border-width: 2px; 

  width:25%; 

  margin: auto; 

  border-color: rgb(0, 0, 100);

}



#calendar iframe{

width:100%;

height: 550px;

border: 0;

}



#sale p{

  padding-top:15px;

  padding-bottom: 5px;

}



#traindiv p{

  padding-top:15px;

  padding-bottom: 5px;

}



#traindiv a{

  width: 150px; 

  background-color:rgb(150, 0, 0);

}



#consec{

  width: 85%;

  margin: auto;

  font-family: 'Roboto', sans-serif;

}



#contop{

  width:85%;

  margin: auto;

}



#contopimg img{

  height: 400px;

}



#contop img{

  width: 100%;

}



#consec hr{

  border-width: 2px; 

  width:25%; 

  margin: auto; 

  border-color: rgb(0, 0, 100);

}



#consec #consecdiv img{

  width: 65%;

  height: 100px;

}



#bsameritimg img{

  width:75%;

}





#aquaimg{

  filter: invert(1);

}



#aqua2{

  filter: invert(1);

}



#partners{

  max-width: 1000px;

  margin:auto;

  font-family: 'Roboto', sans-serif;

}



#partnersimg img{

  width: 225px;

  height:75px;

}



#foundations img{

  width:75%;

}



#dppart{

  background-color: rgb(0,0,50);

}



#saletop{

  max-width: 60%;

  margin: auto;

  font-family: 'Roboto', sans-serif;

}

 #sales{

  width: 85%;

  margin: auto;

  font-family: 'Roboto', sans-serif;

 }



 #salepg{

  width: 90%;

  margin: auto;

  font-family: 'Roboto', sans-serif;

 }



#saletopimg img{

  height:400px;

}



#saletop img{

  width:100%;

}



#salediv{

  width: 85%;

  margin: auto;

}

#salediv hr{

  border-width: 2px; 

  width:25%; 

  margin: auto; 

  border-color: rgb(0, 0, 100);

}



#travtop{

  width:60%;

  margin: auto;

}



#travtopimg img{

  width: 100%;

  height: 400px;

}



#travdiv{

  max-width: 1000px;

  margin: auto;

  font-family: 'Roboto', sans-serif;

}

#travdiv hr{

  border-width: 2px; 

  width:25%; 

  margin: auto; 

  border-color: rgb(0, 0, 100);

}



#travdiv a{ 

  color:rgb(150, 0, 0);

}



#travelgrid img{

    margin-bottom: 16px;

}



#travelvid{

  max-width: 1100px;

  margin: auto;

}



#travelvid video{

  max-width: 100%;

}



#travtxtdiv{

  max-width: 1000px;

  margin: auto;

  font-family: 'Roboto', sans-serif;

}