/**@viewport only works in IE10 at present. Zoom = meta tag initial scale*/
@-ms-viewport {
width: device-width;
/*zoom: 1.0;*/            
}

@viewport {
width: device-width;
/*zoom: 1.0;*/        
}

/* For Tablets Landscape 1024px and fewer*/
@media only screen and (max-width: 1024px) {
    .wrapper {
        width: 90%;
    }
     
    ul.topnav li {
    width: auto;
    }
    ul.topnav li a {
        padding: 14px 8px;
    }  
    ul.topnav li.icon a:hover {
    padding-left: 13px;
    padding-bottom: 22px;
    }
} 


/*Tablet Portrait 800px*/
@media only screen and (max-width: 800px) {
    ul.topnav li a {
        font-size: 0.8em;
    }      
     #logos {
            padding:  25px 0;
    }   

        #logo1 {
            width: 30%;
        }
        #logo2 {
    
           width: 20%;      
        }

        #logo3  {
            width: 30%;
        }      
        #xmascontainer, #xmascontainer2 {
            width: 100%;
        }
        #eastercontainer {
            float: none;
            width: 340px;
            margin: 0 auto;
        }
        

         .col1 {
            width: 65%; 
           }

    .col2 {
        width: 30%;
    }

    #branch_nav a {
        padding: 10px 10px;
    }
}

/*High End Smartphone Landscape 680px*/
@media only screen and (max-width: 680px) {
        
     th, td {
        padding: 10px 10px;
    }

    #branch_nav a {
        font-size: 0.8em;
    }

/* When the screen is less than 680 pixels wide, hide all list items, except for the second one ("Rates"). Show the list item that contains the link to open and close the topnav (li.icon) */
    ul.topnav li:not(:nth-child(2)) {
        display: none;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
    ul.topnav li.icon a:hover {
        padding-left: 13px;
        padding-bottom: 22px;
    }
    ul.topnav li.icon a {
        padding-left: 13px;
        padding-bottom: 22px;
    }

/*"responsive" class is added to the topnav with JavaScript when the user clicks on the icon.*/
    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
    }
    ul.topnav.responsive li {
        display: block;
        text-align: left;
    }
       #xmascontainer2 {
    float: none;
    width:  100%;
    margin: 0 0 20px;
    }
    .col3, .col4 {
    float: none;
    width:  100%;
    margin: 0 0 20px;
}
    #googleMap, #googleMap2, #googleMap3, #googleMap4, #googleMap5 {
        width: 100vw;
        height: 100vw; /*same as width*/
}
} 


/* smartphone portrait 420px*/
@media only screen and (max-width: 420px) {
 .wrapper {
    width:  95%;
}

    #xmascontainer, #xmascontainer2, .col1, .col2, .col3, .col4 {
    float: none;
    width:  100%;
    margin: 0 0 20px;
}
    .hidden {
    display: none;
}
    h1 {
    font-size: 1.25em;
}
    p {
    font-size: 0.8em;
}
    table {
    margin: 20px 0;
}    

    th, td {
    padding:  5px 5px;
    font-size: 0.8em;
}
    branch_nav ul {
    margin: 0px auto;
}
  
  #branch_nav a{
    padding: 3px 2px;
    font-size: 0.6em;
}
    #googleMap, #googleMap2, #googleMap3, #googleMap4, #googleMap5 {
        width: 100vw;
        height: 100vw; /*same as width*/
}
}