/*Don't touch the CSS*/
/* line 3, /Users/dannell/Desktop/Desktop/Teaching/Interactive 1/hotel and musuem/full-screen-overlay-hamburger-menu/overlay-menu/styles.scss */
body {
  font-size: 100%; }

/* line 4, /Users/dannell/Desktop/Desktop/Teaching/Interactive 1/hotel and musuem/full-screen-overlay-hamburger-menu/overlay-menu/styles.scss */
img {
  max-width: 100%; }



*{
    color: #535353, #a49078, #74a2b0;
    
    
}


body {
    background-color: #fff;
   }





header {
    background-image: url(images/Artofwood_logohead.png);
    background-repeat: no-repeat;
    background-position: center;
    width:100%;
    height: 184px;
   }
nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    height: 180px;
    align-items: center;
    
}
nav a{
    color: #a49078;
    font-family: 'egosurf_stifflerregular';
    font-size: 1.73em;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
nav a:hover{
    background-color: #535353;
    padding-top: 10px;
    text-decoration: underline;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

   .button_container{
       display: none; 
    }
.wrapper{
   padding: 100px;
    box-sizing: border-box;
    width: 100%;
    margin: auto;
    max-width: 800px;
}

.about{
    
    background-image: url(images/generalblue.jpg);
    background-size: cover;
    margin:auto;
    background-repeat: no-repeat;
    width: 100%;
    height:544px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
p{
    max-width: 900px;
    margin: auto;
    text-align: center;
    font-family:century-gothic, sans-serif; 
    color: #fff;
    line-height: 2;
    
}
h1{
    font-family: 'penelopeannemedium';
    color: #fff;
    font-size: 1.73em;
    margin-top: 100px;
    
}
.button_1{
    font-family: 'penelopeannemedium';
    color:#a49078;
    padding:10px;
    box-sizing: border-box;
    text-decoration: none;
    background-color: #fff;
    text-align: center;
    margin: auto;
    font-size: 1.5em;
    border-radius: 15px;
}
.button_1:hover{
    text-decoration: underline;
    color: #a49078;
}


.woodtypes{
    margin-top: 2px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    background-image: url(images/lightbackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    

}



/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: #fff;
    width: 100%;
    max-width: 200px;
 
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #fff;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color:#a49078;
  width: 100%;
  border-radius: 15px;
  max-width: 160px;
}
h2{
    font-family: 'penelopeannemedium';
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}


.content2 {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color:#74a2b0;
  width: 100%;
  border-radius: 15px;
  max-width: 160px;
}

.collapsible2 {
    margin-top: 100px;
    background-color: #fff;
    width: 100%;
    max-width: 200px;
 
}
.collapsible3 {
    margin-top: 100px;
    background-color: #fff;
    width: 100%;
    max-width: 200px;
 
}
.content3 {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color:#a49078;
  width: 100%;
  border-radius: 15px;
  max-width: 160px;
}
.collapsible4 {
    margin-top: 100px;
    background-color: #fff;
    width: 100%;
    max-width: 200px;
 
}
.content4 {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color:#74a2b0;
  width: 100%;
    border-radius: 15px;
max-width: 160px;
}
video{
    width:70%;
    max-width: 800px;
    height: 600px;
    padding: 10px;
    box-sizing: border-box;
    
}
#one{
    text-align: center;
    font-family: century-gothic, sans-serif;
    color: #a49078;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    line-height: 2;
    max-width: 1200px;
}
ul{
    font-family: century-gothic, sans-serif;
    font-size: 1.5em;
    text-align: center;
    color: #535353;
}
li{
    color: #535353;
    line-height: 1.5;
}

.button_2{
    text-decoration: none;
    padding: 10px;
    box-sizing: border-box;
    font-size: 1.5em;
    font-family: 'penelopeannemedium';
    color: #fff;
    background-color: #74a2b0;
    border-radius: 15px;
}
.button_2:hover{
    text-decoration: underline;
    color:#fff;
}
h3{
    font-family: 'penelopeannemedium';
    color:000;
    font-size:2em;
}
.footer{
    display: flex;
    flex-wrap: wrap;
    background-image: url(images/footerwood.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 342px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
h4{
    text-align: center;
    font-family: 'penelopeannemedium';
    font-size: 2em;
    margin-top: 20px;
}
h5{
    text-align: center;
    font-family: century-gothic, sans-serif;
    color: #535353;
    
}
h6{
    font-family: 'penelopeannemedium';
    margin-bottom: 25px;
    color:000;
    font-size:2em;
}
.whiteline2{
   width: 100%;
    height:60px;
    
}
.whiteline{
   width: 150%;
   height: 45px; 
    
}
.whiteline3{
   width: 100%;
   height: 26px;
    margin-left: 10px;
    
}
.whiteline4{
   width: 100%;
   height: 30px;
    margin-left: 10px;
    
}







/* Dropdown Button */
.dropbtn {
  background-color: #a49078;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
   border-radius: 15px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: rgba(164, 144, 120, 0.67);}


.tickets{
    margin-top: 100px;
    margin-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
  
}
button{
    margin-bottom: 30px;
      
}
.buybutton{
    background-color: #74a2b0;
    text-decoration: none;
    font-family: century-gothic, sans-serif;
    padding: 10px;
    box-sizing: border-box;
    color: #000;
    border-radius: 15px;
}
.buybutton:hover{
    text-decoration: underline;
    color: #fff;
}
.ourlove{
    margin-top: 20px;
    padding: 10px;
    box-sizing: border-box;
        background-image: url(images/generalblue.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    flex-direction: column;
    margin: auto;
   
}


.explore{
    margin-top: 40px;
    
    background-image: url(images/generalblue.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height:544px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  

}
.about{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.hearts{
    
    margin: auto;
    margin-bottom: 20px;
}
.ourlove_info{
 margin-bottom: 40px;
    
}

.gallery{
    background-image: url(images/lightbackground.jpg);
    height: 530px;
    background-size: cover;

    margin: auto;
    padding: 25px;
    box-sizing: border-box;
    
    
}

.gallery img{
    width: 215px;
    margin: auto;
    padding: 5px;
    filter:grayscale(100%);
    transition: 1s;
   
    
}
.gallery img:hover{
    filter: grayscale(0);
    transform: scale(1.1);
}

.explore_container{
    margin: auto;
    margin-top: 150px;
    width:100%; max-width: 1200px;
    display: flex;
    text-align: center;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Tablet */
@media screen and (min-width: 501px) and (max-width: 800px) {

    .button_container{
        display: block;
    }
   .navigation{
        display: none;
    }
    .about{
    background-image: url(images/tabletblue.jpg);
    background-size: cover;
    margin:auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 650px;

}
    p{
        
    }
   .type{
        padding: 20px;
       margin:auto;
        box-sizing: border-box;
    } 
    .footer{
        background-image: url(images/tabletwood.jpg);
        background-size: cover;
        justify-content: space-around;
        background-repeat: no-repeat;
        flex-direction: column;
        height: 662px;
    }
    .tickets{
        flex-direction: column;
    }
    .gallery{
        height: 600px;
        width: 100%;
    }
    .explore{
        background-image: url(images/tabletblue.jpg);
    }
    .ourlove{
      padding: 10px;
       
    }
    .ourlove_info{
        margin: auto;
        padding: 20px;
        box-sizing: border-box;
    }
   
}

/* Mobile */
@media screen and (max-width: 500px) {
    
    .button_container{
        display: block;
    }
   .navigation{
        display: none;
    }
      .about{
    background-image: url(images/mobileblue.jpg);
    background-size: cover;
    margin:auto;
    padding: 10px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    width: 100%;
    height: 850px;    
 
}
    #one{
        padding: 10px;
        box-sizing: border-box;
    }
    p{
      
    }
    .type{
        margin: auto;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .explore_container{
     margin: auto;
   width:100%; max-width: 1200px;
    display: flex;
    margin-top: 110px;
    text-align: center;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
    .footer{
        flex-direction: column;
        background-image: url(images/mobilewood.jpg);
        background-size: cover;
        height: 1029px;
        background-repeat: no-repeat;
    }
      .tickets{
        flex-direction: column;
    }
      .gallery{
        height: 1600px;
        width: 100%;
        margin: auto;
        padding: 5px;
        
        
    }
  
    .gallery img{
        padding: 25px;
        box-sizing: border-box;
    }
    .explore{
       height: 1000px;
      padding: 20px;
    box-sizing: border-box;
        
    }

}


/*# sourceMappingURL=styles.css.map */