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

    header {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr 1fr;
        justify-items: center;
        text-align: center;
        color: #FFF;
    }

    nav button {
        margin: 0.2rem 2%;
        background-color: transparent;
        border: none;
        font-size: 1.6rem;
        color: #555;
    }
 
    /* navigation */
    nav {
        display: grid;
        align-items: center;
        justify-items: start;
        
    }
    nav ul {
        display: grid;
        grid-template-columns:  100%;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        margin: 0.4rem 2%;
    }
    nav ul.hide {
        display: none;
    }


 header {
     height: 50%;
 }
 .headerMiddle {
     margin-bottom: 2em;
 }
 .headerRight {
     margin-bottom: 2em;
 }
 

 
 
    #backgroundImage {
     width: 100%;
     background-repeat: no-repeat;
     }
 
     .iconLinks {
         margin-bottom: 2em;
     }
 
     #map iframe {
         width: 200px;
         height: 150px;
     }
     #weatherSumBox {
         position: absolute;
         left: 0;
         top: 0;
         width: 200px;
         margin-left: 2em;
         margin-top: 2em;
         padding: 15px;
         background-color: rgba(34, 72, 100, 0.7);
         color: #FFF;
     }
 
    }
 
 @media screen and (max-width: 38em) {
 
     #preFooter{
         display: grid;
         
     }
     #prefootMid {
         display: grid;
         grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr 1fr;
        justify-items: center;
     }
 

 }