/*	
                                                                                      
                          @&%###%                                                                          
                       %((((((((((                                                                         
                    (((((    (((#                                                                        
                 &%(((((      %(((                                                                         
                %#((((#      %((((                                                                         
              %####(#      ((((                                                                          
            #####       #(((((                                                                           
           ######     %(#((((((         @#(//                                                         
         ####     %((((((((        %#((//////       &////(  &/**                                         
        ####     #(((((((        &(((((/(((//#     #/////  &/***                                         
       %#####    %##(((((        #((((((  &(///     (////(  #//**                                          
      ######     ###(##         (((((    #///(     (////   &////                                           
     %#####                   &((((    #(///(    @#///    &////%%/#                                        
     #####%                 &(( ((#((((#///(#(//(//( &///////*(                                          
    %#####%               %(((  (((((((  #///////  (///////(                                               
    %#####%            ((      ((((    (////      (////                                                  
     #######&      @%#(((                                                                                  
     ################(#                                                                                    
       #############                                                                                       
          #####                                                                                            
                                                                    

*/

*{
  margin: 0px;
  padding: 0px;
  text-decoration: none;

}



/*Mobile breakpoint for Home*/




@media screen and (max-width:479px) {

body section div.slide img {max-width:100vw;height:auto;display:block;} 



body section div.slide{
  width:100vw;
  height:100%;
  overflow:hidden;
  background-color:white;
  margin-top:22px;
  max-width: 100%
}

body section {
  width:100vw;
  height:auto;
  background-color:white;
}


body h2{
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size:16px;
  color:black;

}

main {
  width:375px;
  height:auto;

   background-color:grey;

}

body aside{
  width:100vw;
  height: 100%;
  background-color:white;
  display: block;
  margin-bottom: 40px;

}

body article{
    width:100%;
    height:100%;
    background-color:white;
}


body #body{

  width:80vw;
  max-height:100%;
  background-color:white;
  display: block;
  margin:35px;
  float: left;
  clear:both;
}

figure{
  width: 375px;
  height: 15%;
  background-color:white;
  overflow:hidden;

}


figcaption{
  height:35%;
  background-color:white;
  object-fit: contain;
  overflow-y: scroll;
}




}

/*Mobile breakpoint for Menu*/

@media screen and (max-width:479px) {

body  #heatlevel{
   width:100vw;
  height: 100vh;
  background-color:blue;
  float:left;
  display: none;


}

body #menu-bar-1{
  width:100vw;
  height:50px;
  background-color:white;
  margin-top:0px;
  
}

body #menu-body{
    width:100vw;
    height: 94.57vh;
    max-height:100%;
    background-color:white;
    float:left;
    display: inline-block;
    margin-left:30px;
    margin-top:5.43vh;


}

body #menu-body-1{
    width:100vw;
    height: 64.57vh;
    max-height:100%;
    background-color:white;
    float:left;
    display: inline-block;
    margin-left:30px;
    margin-top:0px;


}

body #menu-mob{
width:100vw;
height:125px;
background-color:purple;

}







}

/*Mobile breakpoint for Gallery*/

@media screen and (max-width:479px) {

 body #gallery{
  width:350px;
  height:200px;
  margin-left:26px;
  background-color:green;

}

body #gallery-con{
  width:90%;
  height:100vh;
  background-color:white;
  margin: 0 auto;
  clear: both;

}

body #gallery-row{
  height:100%;
  padding-top: 30px;
  width:100%;
  background-color:white;


}

body #gallery:first-child{


margin-left:26px; 




}

body #gallery:last-child{


margin-left:26px; 
float:left;

}


}

/*Mobile breakpoint for About Us*/

@media screen and (max-width:479px) {


body header{
  width:100%;
  height:70px;
  background-color:white;
  display:none;}

ul#top-nav{display:none;}

body #about-img img{

  width:80vw;
}

nav { 
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:30px;
  background-color:white;
  display: none;
}

body #menu-bar{
  width:100vw;
  height:50px;
  background-color:white;
  margin-top:22px;
  
}

body #about-img{
width:100%;
height:500px;
background-color:white;
margin:35px;



}

body #about-text{
width:80%;
height: 90%;
background-color:white;
display: inline-block;
margin-left:35px;
margin-top:0px;
margin-bottom:50px;
font-family: proxima-nova,sans-serif;
font-weight: 400;
font-style: normal;
font-size:24px;
color: black;

}

body #menu-bar-text{
  width:60vw;
  height:45px;
  background-color:white;
  color:#b33000  ;
  margin-top:3px;
  margin-left:20%;
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 38px;
  text-align: center;



}

body img {max-width:100vw;height:auto;display:block;} 

  #mob-nav{
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:auto;
  background-color:#17818d;
  position:fixed;
  top:0;
  left:0;
  display: block;

  
 }

 body section #daves-name{

background-image: url("../img/daves-name.png");
background-repeat: no-repeat;
height:40px;
width:100px;
margin-top:10px;
margin-right: 35%;
float: right;
background-color:#17818d;
display:inline-block;

}

 nav#top-nav{display: none;}

 section#logo{

  display:none;
 }

button{
  font-size:2em;
  padding:25px 10px;
  line-height: 0;
  background-color:#17818d;
  color:#f6cb65;




}

#mob-ul{text-align:left;
    top: 52px;
    position: fixed;
    /*left:0px;*/
    left: -32vw;
    background-color: #17818d;
    /*transition: left 0.5s;*/
    transition: 0.5s transform;


 }

 .slide-the-drawer{
  /*left:20px;*/
  transform: translateX(32vw);

 }

 #mobile-nav-bar { 
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  background-color:white;

}

#mob-li{
  color:orange;
  display: block;
  padding:10px 20px;
}

body #contact-body{
width:100%;
height: 100%;
background-color:white;
display:block;
}

#contact{
   width:100%;
    height:100%;
    background-color:blue;
    clear: both;

}

body p-1{
   font-family: proxima-nova,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:15px;
  color:black;


}

body h3{
  font-family: 'Lobster', cursive;
  color:#b33000  ;
  font-size: 28px;
  margin-top: 0px;

}

aside{
  width:23%;
  height: 100%;
  background-color:white;
  display: inline-block;

}



footer ul{
  margin-left:auto;
  margin-right:auto;
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  margin-top:40px;


}


  #bot-logo{
    height:50px;
   width:50px;
  background-color:black;
  display: inline-block;
  margin-left: auto;


}

#footer-logo{
height: 60%;
width:50px;
background-color:black;
display: inline-block;
margin-left: auto;
margin-top: 1.6%;
float: none;
position: relative;
}

body p{
font-family: proxima-nova,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:9px;
  color:white;
  float:right;
  margin-top: 40px;
  margin-right: 20px;

}

footer li{


  margin-left: 25px;
}


}



/*      */


/*Breakpoint for Tablet About Us*/

@media screen and (min-width:480px ) and (max-width:1365px ){

  nav { 
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:30px;
  background-color:white;
  font-size:14px;

}

#menu-mob{
width:375px;
height:150px;
background-color:purple;
display:none;
}


  #slide-bar{
  height:100px;
  width:100vw;
  background-color:white;
  display: none;
}


  p-1{
   font-family: proxima-nova,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size:18px;
  color:black;


}

h3{
  font-family: 'Lobster', cursive;
  color:#b33000  ;
  font-size: 30px;
  margin-top: 15px;

}

body footer ul{
  margin-left:auto;
  margin-right:auto;
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  margin-top:40px;


}


  #bot-logo{
    height:50px;
   width:50px;
  background-color:black;
  display: inline-block;
  margin-left: auto;


}

#footer-logo{
height: 60%;
width:50px;
background-color:black;
display: inline-block;
margin-left: auto;
margin-top: 1.6%;
float: none;
position: relative;
}

p{
font-family: proxima-nova,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:10px;
  color:white;
  float:right;
  margin-top: 40px;
  margin-right: 50px;

}



#contact-text{
width:38%;
height: 90%;
background-color:white;
display: inline-block;
margin-left:5vw;
margin-top:5.43vh;
margin-bottom: 5.43vh;
font-family: proxima-nova,sans-serif;
font-weight: 500;
font-style: normal;
font-size:30px;
color: black;

}

#contact{
   width:100%;
    height:100%;
    background-color:blue;
    clear: both;

}

article{
    width:100%;
    height:80vh;
    background-color:white;
}



 body footer{
height: 100px;
background-color:black;
width: 100vw;
clear: both;
font-size:10px;

}

#mob-nav{
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:auto;
  background-color:red;
  position:fixed;
  top:0;
  left:0;
  display: none;
  
 }

button{
  font-size:2em;
  padding:25px 10px;
  line-height: 0;
  background-color:#17818d;
  color:#f6cb65;
  display:none;
  border:none;




}

#mob-ul{text-align:left;
    top:52px;
    position: fixed;
    left:0px;
    background-color:#17818d;
    transition: left 0.5s;
    display: none;


 }

  .slide-the-drawer{
  left:20px;
  display:none;


 }

#mob-li{
  color:orange;
  display: block;
  padding:10px 20px;
  display:none;
}

#mobile-nav-bar { 
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:30px;
  background-color:white;
  display: none;
}




}

/*Mobile breakpoint for Contact*/

@media screen and (max-width:479px) {

body .mapouter{

  height:300px;
  width:300px;
}

body .gmap_canvas{
height:300px;
  width:300px;

}

body iframe{
height:300px;
  width:300px;

}

body #contact-map{
width:80%;
height: 90%;
background-color:white;
display: inline-block;
margin:35px;

}

body #contact-text{
width:100vw;
height: 90%;
background-color:white;
display: block;
margin:35px;
font-family: proxima-nova,sans-serif;
font-weight: 500;
font-style: normal;
font-size:30px;
color: black;

}

body #contact{
   width:100%;
    height: 100%;
    background-color:blue;
    clear: both;

}
body #contact-body{
width:100vw;
height: 100%;
background-color:white;
display: inline-block;
}

body h5{
  font-family: proxima-nova,sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size:30px;
  color:#f6cb65 ;

}

body footer li{


  margin-left: 10%;
}

body footer ul{
  margin-left:auto;
  margin-right:auto;
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-top:40px;
  width:200px;


}

}


/*Breakpoint for web*/
@media screen and (min-width:1366px ) and (max-width:1600px ){


#mobile-nav-bar { 
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:30px;
  background-color:white;
  display: none;
}

#menu-mob{
width:375px;
height:150px;
background-color:purple;
display:none;
}


#slide-bar{
  height:100px;
  width:100vw;
  background-color:purple;
  display:none;
}

#mob-nav{
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:auto;
  background-color:red;
  position:fixed;
  top:0;
  left:0;
  display: none;
  
 }

button{
  font-size:2em;
  padding:25px 10px;
  line-height: 0;
  background-color:#17818d;
  color:#f6cb65;
  display:none;





}



#mob-li{
  color:orange;
  display: block;
  padding:10px 20px;
  display:none;
}



}

/*Break*/


/*button{
  font-size:2em;
  padding:25px 10px;
  line-height: 0;
  background-color:#17818d;
  color:#f6cb65;




}*/


img {max-width:100%;height:auto;display:block;} 






header{
  width:100%;
  height:70px;
  background-color:white;
  display: block;

}



#logo{
 
   height:70px;
   width:200px;
  background-color:white;
  display: block;
}

#daves-name{
  height:50px;
background: cover;
background-image: url("../img/daves-hot-yellow.png");

}

#daves{
   margin-top:25px;
}

ul {
  display: block;

}

/* #mob-ul{text-align:left;
    top:52px;
    position: fixed;
    left:0px;
    background-color:#17818d;
    transition: left 0.5s;


 }

 .slide-the-drawer{
  left:20px;


 }

/*#mob-li{
  color:orange;
  display: block;
  padding:10px 20px;
} */

#top-nav{
  float:right;
  text-align: center;
}

li {
    display:inline;
   margin:auto;
   color:#17818d;
   
}

#nav{
    margin-right: 50px;
  
  
}
 /*   #mob-nav{
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:auto;
  background-color:red;
  position:fixed;
  top:0;
  left:0;
  display: block;
  


    } */

nav { 
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:30px;
  background-color:white;

}

#mobile-nav-bar { 
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  width:100vw;
  height:30px;
  background-color:white;

}


main {
  width:100%;
  height:100%;
  position: relative;
   background-color:white;

}

section {
  width:100%;
  height:auto;
  background-color:white;
}

.slide {
  height:100%;
  overflow: hidden;
  max-width:100%;
 

 
 }

article{
    width:100%;
    height:80vh;
    background-color:white;
}

aside{
  width:23%;
  height: 100%;
  background-color:white;
  float:left;
  display: inline-block;

}

figure{
  width: 100%;
  height: 10%;
  background-color:white;
  overflow:hidden;
  background-image: url("../img/board-blue.jpg");
  background-size: cover;

}


figcaption{
  height:40%;
  background-color:white;
  object-fit: contain;
  overflow-y: scroll;
}


 #social {
  width:334px;
  height: 100px;
  background-color:blue;
  float:left;
  display: inline-block;

}

#body{

  width:74%;
  max-height:100%;
  background-color:white;
  float:right;
  display: inline-block;
}

#menu{
    width:100%;
    height: 100vh;
    background-color:white;


}

#heatlevel{
   width:23%;
  height: 100vh;
  background-color:blue;
  float:left;
  display: inline-block;


}


 footer{
height: 100px;
background-color:black;
width: 100vw;
clear: both;

}

footer ul{
  margin-left:auto;
  margin-right:auto;
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-top:40px;


}

footer li{


  margin-left: 50px;
}

  #bot-logo{
    height:50px;
   width:50px;
  background-color:black;
  display: inline-block;


}



#bottom-logo{

width:54px;
display: inline-block;

}

#footer-con{
height: 60%;
width:20%;
background-color:black;
margin: auto 0;
display: inline-block;
float: left;

}

#footer-logo{
height: 50px;
width:50px;
background-color:black;
display: inline-block;
margin-left:25%;
margin-top: 23px;

}

#heat{
height:100%;
max-width: 100%;
object-fit: cover;


}

#menu-body{
    width:33%;
    height: 94.57vh;
    max-height:100%;
    background-color:white;
    float:left;
    display: inline-block;
    margin-left:5.43vw;
    margin-top:5.43vh;


}

#menu-body-1{
    width:33%;
    height: 94.57vh;
    max-height:100%;
    background-color:white;
    float:left;
    display: inline-block;
    margin-left:5.43vw;
    margin-top:5.43vh;


}

#contact-body{
width:50%;
height: 100%;
background-color:white;
display: inline-block;
}

#contact-text{
width:38%;
height: 90%;
background-color:white;
display: inline-block;
margin-left:5vw;
margin-top:5.43vh;
font-family: proxima-nova,sans-serif;
font-weight: 500;
font-style: normal;
font-size:30px;
color: black;

}

#contact-map{
width:80%;
height: 90%;
background-color:white;
display: inline-block;
 margin-left:5.43vw;
  margin-top:5.43vh;

}

#contact{
   width:100%;
    height: 100%;
    background-color:blue;
    clear: both;

}

#about-text{
width:80%;
height: 90%;
background-color:white;
display: inline-block;
margin-left:5vw;
margin-top:5.43vh;
margin-bottom:50px;
font-family: proxima-nova,sans-serif;
font-weight: 500;
font-style: normal;
font-size:30px;
color: black;

}



#menu-bar{
  width:100vw;
  height:75px;
  background-color:#17818d;
  
}

#menu-bar-1{
  width:100vw;
  height:75px;
  background-color:#17818d;

  
}

#menu-bar-text{
  width:50vw;
  height:65px;
  background-color:#17818d;
  color:#f6cb65 ;
  margin-top:10px;
  margin-left:25%;
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 45px;
  text-align: center;



}

#menu-mob{
width:375px;
height:auto;
background-color:purple;

}

#about-img{
width:375px;
height:500px;
background-color:white;
margin:64px;



}

#gallery{
  width:350px;
  height:200px;
  margin-left: 8.5%;
  background-color:green;

}

#gallery-con{
  width:90%;
  height:80vh;
  background-color:white;
  margin: 0 auto;
  clear: both;

}

#gallery-row{
  height:200px;
  padding-top: 8vh;
  width:100%;
  background-color:white;


}

#gallery:first-child{

margin-left: 0px;
float:left;

}

#gallery:last-child{

margin-left: 0px;
float:right;

}

h1{

  font-family: 'Lobster', cursive;
  text-align: center;
  color:#f6cb65  ;
  font-size: 32px;
  margin-top: 3%
}

h2{
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size:18px;
  color:black;

}

h3{
  font-family: 'Lobster', cursive;
  color:#b33000  ;
  font-size: 36px;
  margin-top: 15px;

}

h4{
  font-family: proxima-nova,sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size:14px;
  color:black;
}

h5{
  font-family: proxima-nova,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size:40px;
  color:#f6cb65 ;

}

p{
font-family: proxima-nova,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:15px;
  color:white;
  float:right;
  margin-top: 40px;
  margin-right: 50px;

}


h6{
  font-family: proxima-nova,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:15px;
  color:black;

}

p-1{
   font-family: proxima-nova,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size:24px;
  color:black;


}



li:hover{
  text-decoration:none;
  color:orange;

}



a:active{

  color:#b33000 ;
}

a:visited{
color:#f6cb65;text-decoration:none;


}

#slide-bar{
  height:22px;
  width:100vw;
  background-color:purple;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }