body {    
    margin: 0;
    background-color: #ede9d8;
}

#footer {
    padding: 10px 10px 0px 10px;
        bottom: 0;
        width: 100%; 
        height: 85px;
        background:#737373;  
        font-family:"Montserrat", Arial, sans-serif;
        color: white;
}

#footer p {
    text-align: center;
    justify-content: center;
    color: white;
}

h1{
    font-family: 'Jost', sans-serif;
    color: #640101;
    text-align: center;
    font-size: 2.5em;
    margin-top:inherit;
    margin-bottom: inherit;
}



p {
    font-family: "Montserrat", Arial, sans-serif;
    color: #000000;
    text-align: center;
    font-size: 1em;
    width: 90%;
    margin: 0 auto;
    line-height: 1.6em;
}



h2{
    text-align: center;
    font-family:'Jost', sans-serif;
    color: #640101;
    margin-top:inherit;
    margin-bottom: inherit;
   }

    
}



.post-container {
    margin: 20px 20px 0 0;  
    border:5px solid #333;
    
}

.text h2{
    text-align: left;
    align-content: left; 
    
    
}

.text p{
    text-align: left;
    align-content: left; 
    
    
}


.post-thumb img {
    float: left;
    clear:left;
    height: 100px;
    width: 150px;
    margin-left: 4em;
    margin-right: 4em;
}


a {
    color: #640101;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    }

    
    .home-specials{
    width:100%;
    }
    
    .home-specials {
    background-image: url(Images/troy-spoelma-pt_2OS8sIzE-unsplash.jpg);
    height: 400px;
    width: 50%;
    background-position: center;
    background-size: cover;
}


.hike-specials{
    width:100%;
    }
    
 .hike-specials {
    background-image: url(Images/troy-spoelma-pt_2OS8sIzE-unsplash.jpg);
    height: 200px;
    width: 50%;
    background-position: center;
    background-size: cover;
}

  
a:link {
    color:#640101;
}

a:visited { 
        color: forestgreen;
    }
a:focus, a:hover, a:active { 
    color:black;
    }

 .text {
        width: 100%;
    }
    


nav {
    display: inline-block;
    text-align: center;  
    float: right;
}

nav ul {
    margin: 10;
    padding: 0;
    list-style-type: none;
}

.nav a{
    display: block;
    color: black;
    text-decoration: none;
    padding: 0.8em 1.8em;
    text-transform: uppercase;
    font-family: "Arial", sans-serif;
    letter-spacing: 2px;
    position: relative;
}

.nav {
    display: inline-block;
    vertical-align: top;
    border-radius: 10px;
}

.nav li{
    position: relative;
}

.nav > li{
    float: left;
    margin-right: 1px;
    background-color: gainsboro;
    
}

.nav > li li {
    background-color: gainsboro;
}

.nav > li a {
    margin-bottom: 1px;
}

.nav li:hover a {
    color: darkred;
}

a:visited {
  color: darkgoldenrod;
}

.nav li li a {
    margin-top: 1px;
}

.nav ul {
    position: absolute;
    white-space: nowrap;
    z-index: 1;
    left: -9999em;
}

.nav > li:hover > ul{
    left: auto;
    min-width: 100%;
}

.nav > li li:hover > ul{
    left: 100%;
    margin-left: 1px;
    top: -1px;
}

.nav li a:nth-last-child(2):before {
    content:"";
    border: 5px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: 50%;
    right: 5px;
}

.nav > li > a:nth-last-child(2):before {
    border-top-color: #000;
}

.nav li li > a:nth-last-child(2):before {
    border-left-color: #000;
    margin-top: -5px;
}


.text-img-container {
    display: flex;
}


.img-resize {
    max-width: 100%;
}


.text-img-container {
    display: flex;
}


.home-specials{
        width:100%;
    }

.hike-specials{
        width:100%;
    }

.about-section {
    height: 300px;
    width: 50%;
    background-position: center;
    background-size: cover;
}



.map {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    
}


#hiking {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px;
}

 .photo{ 
    order:-1;
    align-items: center;
    justify-content: center;
    }

article {
    margin: 10px;
    padding: 20px;
    width: 240px;
    display: flex;
    flex-direction: column;
    flex: auto;
}
.title {
  background-color: #ede9d8;
  color:black;
  line-height: 1em;
}

.title h1 {
    color: black;
    font-size: 40px;
    margin: inherit;
}

.title h2 {
    text-align: left;
    line-height: normal;
    font-size: 25px;
    margin-bottom: auto;
    margin-top:inherit;
}
.title p{
    text-align: inherit;
    font-size: 15px;
    line-height: normal;
    margin-left:auto;
    margin-right:auto;
    font-style: italic;
}


.contact{
    font-family:"Josefin Sans", Arial, sans-serif;
    float: right;
    text-align: left; 
}

.demographics p {
    color: #000000;
    font-size: 16px;
    text-align: left;
    float: center; 
}

.demographics h1 {
    text-align:left;
    color: #640101;
    
}

#demographics li {
    padding: 16px;
    font-size: 20px;
}


#contact {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px;
    background-color:#ede9d8;;
    
}

#contact-photo {
    background-image: url(Images/contact.jpg);
    order: -1;
    align-items: center;
    justify-content: center;
}


#google {
    display: block;
    margin-left: 25%;
    margin-right: 30%;
    width: 50%;
    justify-content: center;
    text-align: center;
}




/*******************RESPONSIVE NAV*******************/ 

.closebtn {
    display: none;
}

.open {
    display: none;
}

#mySidenav {
    display: inline;

}

#mySidenav a {
    text-decoration: none;
    padding: 8px 8px 8px 32px;
    font-size: 25px;
}

#mySidenav a:link {
    color:#000000;
}

#mySidenav a:visited { 
        color: wheat;
    }

#mySidenav a:hover { 
    color:cadetblue;
    }

.nav {
    float: right;
    font-family: 'Jost', sans-serif;
}


/********************* HOME PAGE CSS *******************/


#home-hero {
    background-image: url(Images/hero1.jpg);
    width: 100%;
    height: 300px;
    background-position: center;
    background-size: cover;
}


#history-hero {
    background-image: url(Images/hero5.jpg);
    width: 100%;
    height: 300px;
    background-position: center;
    background-size: cover;
}

.logo{
    width: 18%;
    margin-bottom: 0px;
    margin-left: 20px;
    position: relative;
    margin: 10px 15px 15px 10px;
}

#about-hero {
    background-image: url(Images/hero2.jpg);
    width: 100%;
    height: 300px;
    background-position: center;
    background-size:cover;
}


#hiking-hero{
    background-image: url(Images/hero3.jpg);
    height: 300px;
    background-position: center;
    background-size:cover;
}


#contact-hero {
    background-image: url(Images/hero4.jpg);
    height: 300px;
    background-position: center;
    background-size:cover;
}

#contact {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px;
}

#contact li {
    font-family: "Montserrat", Arial, sans-serif;
}


#form{
    border: none;
    background-color: #ede9d8;
    color:  #640101;
    text-align: center;
}

#form h1{
    color:  #640101;
}



.hikinginfo h2 {
    text-align: justify;
    margin-left: 40px;
}

.hikinginfo p {
    text-align: justify;
    margin-left: 50px;
}

.hikeimg {
    width: 100px;
    height: 100px;
    margin: 2em;
    display:inline-block;
    float: left;
}



/********************MEDIA QUERY****************************/ 

@media screen and (min-width: 252px) {
    
   .photo { 
    display: flex;
    align-items: center;
    justify-content: center;
  
}
    
@media screen and (max-width: 768px) {
    
    
/* The side navigation menu */
.sidenav {
  height: 100%; 
  width: 0; 
  position: fixed; 
  z-index: 1; 
  top: 0; 
  left: 0;
  background-color: #640101; 
  overflow-x: hidden; 
  padding-top: 60px; 
  transition: 0.5s; 
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-family:'Jost', sans-serif;
  font-size: 25px;
  color: #ede9d8;
  display: block;
  transition: 0.3s;
}

.sidenav a:link {
    color:#ede9d8;
}

.sidenav a:visited { 
        color: navajowhite;
    }
.sidenav a:focus, a:hover, a:active { 
    color:#640101;
    }


.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px; 
}


#main {
  transition: margin-left .5s;
  padding: 20px;
}
    
.open {
   display: block;
    float: right;
}
    
    .logo {
        18%
    }
    
    .testimonials {
        width: 100%;
    }
    
  
    
    .about-section {
    width: 100%;
   
}
    
.text-img-container {
    display:inline;
}
    
    .text-img-container {
    display:inline;
}
    
    
 .red {
        width: 100%;
    }
    
    
.about-section2 {
    width: 100%;
    position: relative;
    top: -200px;
    
}

    


  
 @media screen and (min-width: 1358px) {
  
     .contact-photo {
   background-image: url(Images/contact.jpg);
    height: 300px;
    background-position: left;
    background-size:cover;
}
    }
    
@media screen and (max-width: 549px) {
   
     }
    

 
@media screen and (max-width: 1022px) {
 .testimonials{
        width: 100%;
    }
    
    
 .red {
        width: 100%;
    }
    
    
.contact-photo {
   background-image: url(Images/contact.jpg);
    height: 300px;
    background-position: left;
    background-size:cover;
}

    
    }
    
    
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}

}


    
    
    @media screen and (min-width: 1030px) { @media screen and (min-width: 554px) {
    }


@media only screen and (min-width: 768px){
    #home-hero {
        height: 100px;
            }
    
    p {
        width: 75%;
    }
    
    #about-hero {
        height: 100px;
            }
    
    #hiking-hero {
        height: 100px;
    }
    
    height: 300px;
    }
}



@media only screen and (min-width: 1024px){
    #home-hero {
        height: 100px;
    }
    
    p{
        width: 80%;
        
    }
    
    .logo {
        width: 18%;
        
    }
    
    .flex-container {
        display: flex;
        width: 45%;
        margin: 0 auto;
    }
    
    .flex-container img {
        width: 25%;
    }
    
    .text-img-container {
        display: flex;
        flex-wrap: wrap;
    }
    
    .text-img-container {
        display: flex;
        flex-wrap: wrap;
    }
    
    #about-hero {
        height: 300px;
            }
    
     #hiking-hero {
        height: 300px;
    }
    
    #contact-hero {
        height: 300px;
    }
    
    .contact-photo {
        float: left;
        align-items: left;
    }
    
         .contact-photo {
   background-image: url(Images/contact.jpg);
    height: 300px;
    background-position: left;
    background-size:cover;
}
    
}
    
@media only screen and (min-width: 771px){
    
    .contact-photo {
   background-image: url(Images/contact.jpg);
    height: 300px;
    background-position: left;
    background-size:cover;
}
    } 
     @media screen and (max-width: 376px) {
         
     }
    
    
    
    @media screen and (max-width: 320px) {
  
    }

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


    }

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

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

#home-hero {
  height: 150px;
}
 #about-hero {
        height: 150px;
            }
         
#hiking-hero {
        height: 150px;
    }

 #contact-hero {
        height: 150px;
    }        
         
 
    }
    
    @media screen and (max-width: 781px) {
   

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

    }
    

    
    @media screen and (max-width: 759px) {
 
    }
    
    @media screen and (max-width: 720px) {
  
    }
    
     @media screen and (max-width: 533px) {
 
    }
    
    @media screen and (max-width: 379px) {
  
        
    }
    
     @media screen and (max-width: 418px) {
 
    }
    
    @media screen and (max-width: 377px) {
 

    }
    
   @media screen and (max-width: 999px) { 
    .logo {
        width: 18%;
       }
       
       
    }
    
     @media screen and (max-width: 1023px) { 
    .logo {
        width: 18%;
       }
    

    }
    
@media screen and (max-width: 1999px) { 
    .logo {
        width: 18%;
       }
    }

@media screen and (max-width: 500px) { 
    .logo {
        width: 18%;
       }
    }
    
    @media screen and (min-width: 554px) {
    
    }