@media only screen and (max-width: 37.5em) {

    .responsive li {display:block; }

   

    header > img {
        
        margin-left: 0rem;
    }
  
    h1 {
    
    margin-right: 1rem;
    display: inline-block;
    width: 10%;
    margin-left: -95px;
    
   }
   .subheading {
       margin-left: 0px;
   }

   nav > button {
    margin-top: 15px;
    display: inline-block;
    width: 50%;
    background-color: transparent;
    border: none;
    font-size: 1.6rem;
}
   nav {
       background-color: #d6d3d2;
       display: block;
       
       }

   nav > ul {
       list-style-type: none;
        text-align: center;
       }

 
   li {
       display: none;
       margin-right: 1.5rem;
        /*border: 3px solid #d6d3d2;*/
   }
    

    

    .currentweather {
        display: none;
    }

    .weathersummary {
        position: relative;
    }

    .forecast {
        display: none;
    }

    article > h4 {
        text-align: left;
    }

    .first-article {
    
        width: 100%;
        position: relative;
        text-align: left;
    }
    article {
         
        margin-top: 1.5rem;
        
    }

    article > img {
        display: none;
    }


   section > img {
       position: relative;
    width: 80%;
    margin-bottom: 20px;
   }

   .text-map {
       
       margin-left: 50px;
       margin-top: 150px;
       text-align: center;
       width: 70%;
   }
 /*Clearfix: Force the Element not to collapse*/
   .clearfix:after {
       content:"";
       display:table;
       clear:both;
   }
}