* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px;
  background: #f1f1f1;
}

html { height: 100%;}

header, nav, main, footer {
  display: block;
}


h1 {
  font-size: 40px;
}

h2 {
  font-size: 27px;
}

h3{
  font-size: 18px;
}

h4{
  font-size: 15px;
}

h5 {
  font-size: 15px;
}

/* div container for nav bar */



/* Header/Blog Title */
.header { 
padding: 2px;
height: 4em;
width: 100%;
padding-right: 10px;
text-align: left;
float: left;
background-color: white;
border-left: 3px solid darkgray;
position: sticky;
top: 0;
}



/* header image1 */
.headerimg1 {
  margin-left: 5px;
  margin-right: 20px;
  padding-top: 6px;
  padding-left: 6px;
  padding-right: 2px;
  padding-bottom: 6px;
  height: 95%;
  width: 10%;
  }

  /* header image2 */
.headerimg2 {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 4px;
  width: 10%;
  height: 100%;
  }

  .navcontainer {
    background-color: black;
    float: left;
    width: 100%;
    height: 5em;
    border-style: groove;
    box-shadow: 1px 5px 2px 2px #ffcc00;
    position: sticky;
    top: 65px;
    z-index: 1;
  }

/* Style the top navigation bar */
.topnav {
  width: 100%;
  height: 100%;
  padding-bottom: .3em;
  overflow: visible;
  /* position: -webkit-sticky;  */ /* Safari */
  position: sticky;
  top: 65px;
}  

/* Style the topnav links */
.topnav a {
  float: left;
  font-size: auto;
  font-weight: bold;
  display: block;
  color: white;
  margin: .1em .1em;
  padding: 1.5em;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  height: 100%;
  color: black;
  box-shadow: 4px 2px 3px 3px darkgray;
}

.topnav a.active {
  background-color: #ffcc00;
  height: 100%;
  color: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li a {
  float: left;
  text-decoration: none;
}

.dropbtn {
  display: block;
  color: rgb(17, 15, 15);
  text-align: left;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color:#ddd;
  box-shadow: 4px 4px 1px 1px darkgray;
}

li.dropdown {
  float: left;
}

div.dropdown-content {
  margin-left: 2em;
  margin-top: 3em;
}

.dropdown-content {
  display: none;
  color: black;
  padding-left: 15px;
  padding-right: 15px;
  background-color:#ddd;
  max-width: 100%;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  display: block;
  float: none;
  font-size: 1em;
  text-align: left;
  text-decoration: none;
  
}

.dropdown-content a:hover {
  background-color: #94938f; 
  color: white;
}
.dropdown:hover .dropdown-content {
  display: block;
}


/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 65%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 35%;
  background-color: #f1f1f1;
  padding-left: 20px;
}





/* First image in left column */

#img1 {
  display: block;
  
}

.img1 {
  height: 100%;
  width: 100%;
  margin: auto;
  padding: 10px;
}

img.img1 {
  width: 80%;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px black;
}

div.img1 {
  background-color: #aaa;
  height: 400px;
  margin: 2rem;
  position: auto;
  width: auto;
  text-align: center;
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px #969696;

}


/* Image in left column second down*/

#img2 {
  display: block;

}
.img2 { 
  height: 95%;
  width: 90%;
  margin: auto;
  padding: 10px;
}

img.img2 {
  width: 80%;
  border-radius: 5px;
  box-shadow: 3px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px black;
}

div.img2 {
  background-color: #aaa;
  height: 400px; 
  margin: 2rem;
  position: auto;
  width: auto;
  text-align: center;
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px #969696;
}


/* image in the top right column - Old store */

#img3 {
  display: block;
}

.img3 {
  margin: 1.6rem;
  margin-top: 0;
  background-color: #aaa;
  width: 85%;
  height: 100%;
  padding: 10px;
  text-align: center;
}

img.img3 {
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px black;
}


div.img3 {
  margin: 1.6rem;
  width: 90%;
  height: 400px; 
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  	-webkit-box-shadow: 4px 3px 8px 1px #969696;
}

/* Image best friend under the hood on bus */
#img4{
  display: block;
}


.img4 {
  background-color: lightblue;
  margin: 1rem;
  width: 85%;
  height: 90%;
  padding: 10px;
  text-align: center;
}

img.img4 {
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px black;
}

div.img4 {
  margin: 1.6rem;
  width: 90%;
  height: 375px; 
  padding-left: 20px; 
  padding-right: 20px;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  	-webkit-box-shadow: 4px 3px 8px 1px #969696;
}

/* Image5 facebook link*/
.img5 {
  background-color: lightblue;
  width: 100%;
  padding: 20px;
  text-align: center;
}

img.img5 {
  border-radius: 5px;
  width: 100%;
}

div.img5 {
  width: 100%;
  height:100%; 
  padding-left: 20px; 
  padding-right: 20px;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  	-webkit-box-shadow: 4px 3px 8px 1px #969696;
}


/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  	-webkit-box-shadow: 4px 3px 8px 1px #969696;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 5px;
  text-align: center;
  background: #ddd;
  margin-top: 5px;
}


/* div for the location list */

.locationhead{
  margin-left: .4rem;
  margin-right: .5rem;
}


div.locations {
  border-style:groove;
  border-width: 5px;
  background-color: rgb(250, 249, 249);
  margin-top: 0; 
  float: left; 
  height: 100%; 
  width: 25%; 
  overflow: scroll;
}


/* styles for the address lists */

ul.cities {
  list-style-type:none;
  padding-left: 0;
}

li.cities {
  font-size: 25px;
}

ul.noindent {
  list-style-type: none;
  padding-left: 50px;
}

li.address {
  font-size: 20px;
  position: relative;
}

li.address a {
    color:#2b2db4;
    position: absolute;
}
.address a:hover {
  padding-top: 1px;
  padding-bottom: 1px;
 background-color: rgb(62, 111, 216);
 color: white;
}


/* div for the map */

#map {
  padding-top: 20em;
  height: 100%;
}

div.mapca {
  border-style:groove;
  border-width: 5px;
  background-color: antiquewhite;
  margin-top: 1em; 
  width:auto; 
  height: 100%;
  margin-left: 10em;
}

div.mapor {
  border-style:groove;
  border-width: 5px;
  background-color: rgb(194, 154, 103);
  margin-top: 0;
  width: auto;
  height: 100%;
  overflow:scroll;
}

div.mapwa {
  border-style:groove;
  border-width: 5px;
  background-color: rgb(194, 154, 103);
  margin-top: 0;
  width: auto;
  height: 100%;
  overflow:scroll;
}

#wrapper {
  height: 100%;
  min-width: 0;
  margin: 4px;
  padding: 0;
}



/* +++++++++++++++++++++++++change for media size 801 to 1024 px wide++++++++++++++++++++++++++++++++++++++++++++++++++++  size change */

@media only screen and (max-width: 1024px) {
    
  body {
    margin: 0;
    padding: 0;
  }

  header {
    padding-top: 0;
  }

  
  h2 {
    font-size: 25px;
  }

  h3{
    font-size: 15px;
  }

  h4{
    font-size: 10px;
  }

  h5 {
    font-size: px;
  }


  main ul {
    margin-left: 1.5em;
  }

  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }


  div.locations {
    margin-top: .1em; 
    padding-right: 1em; 
    float: left; 
    height: 100%; 
    width: auto; 
    overflow: scroll;
  }
  
  div.mapca {
    margin-top: 1em;
    padding-top: 0; 
    width:74%; 
    height: 100%;
    margin-left: 18em;
  
  }
  
  div.mapor {
    margin-top: 1em;
     width: 74%;
      height: 85%;
      margin-left: 18em;
  
  }
  
  div.mapwa {
    margin-top: 1em; 
    width:74%; 
    height: 85%;
    margin-left: 18em;
  
  }


  #map {
    padding-top: 20em;
    height: 100%;
  }


}


/* Responsive layout - google (tablet portrait (768x1024) when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1024px) {


 

  h2 {
    font-size: 20px;
  }

  h3{
    font-size: 18px;
  }

  h4{
    font-size: 14px;
  }

  h5 {
    font-size: 9px;
  }

  .br {
    display: block;
    margin-bottom: -1.2em;
  }

  ul.noindent {
    list-style-type: none;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 0px;
    padding-left: 8px;
    padding-right: 5px;
  }
  
  ul.cities {
    list-style-type:none;
    padding-left: 0;
    font-size: 1em;
  }
  li.cities {
    font-size: 13px;
  }

  li.address {
    font-size: 10px;
  }
  div.locations {
    margin-top: .1em; 
    padding-right: 10px; 
    float: left; 
    height: 100%; 
    width: 35%; 
    overflow: scroll;
  }
  
  div.mapca {
    margin-top: 1em;
    width: 55%;
    height: 100%;
  }
  
  div.mapor {
    margin-top: 1em;
    width: 60%;
    height: 100%;
  }
  
  div.mapwa {
    margin-top: 1em;
    width: 55%;
    height: 100%;
  }



  #map {
    padding-top: 20em;
    height: 100%;
  }
}


/*  ****google small tablet Portrait for media size up to 768 px wide****/

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


    
  h1 {
    font-size: 2em;
    padding-top: 0.25em;
    width: 85%;
    /* text-align: center; */
  }

  h2 {
    font-size: 20px;
  }

  h3{
    font-size: 14px;
  }

  h4{
    font-size: 12px;
  }

  h5 {
    font-size: 9px;
  }

 
   /* header image1 */
.headerimg1 {
  padding: 0;
  width: 28%; 
  }

  /* header image2 */
.headerimg2 {
  padding-bottom: 6px;
  width: 45%; 
  }

  .topnav {
    font-size: 15px;
  }  

  main {
    padding-top: 0;
  }


ul.noindent {
  font-style: normal;
  margin-left: 1px;
  margin-right: 100px;
  padding-left: 8px;
  padding-right: 0px;
}

ul.cities {
  display: block;
 
}

li.cities {
  display: block;
  font-size: 15px;
 
}

div.locations {
  margin-top: .1em; 
  padding-right: 0; 
  float: clear; 
  height: 55%; 
  width: 100%; 
  overflow:scroll;
}

div.mapca {
  margin-top: 0; 
  width:100%; 
  height:100%;
  margin-left: 0;

}

div.mapor {
  margin-top: 2px; 
  width:100%; 
  height:100%;
  margin-left: 2px;
}

div.mapwa {
  margin-top: 2px; 
  width:100%; 
  height:100%;
  margin-left: 2px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 5px;
  margin-top: 5px;
}

/* First image in left column */
.img1 {
  height: 250px;
  width: 100%;
  padding: 10px;
}

div.img1 {
  background-color: #aaa;
  width: 85%;
  height: 300px; 
  padding-left: 1em; 
  padding-right: 1em
}

/* Image in left column second down*/


.img2 { 
  height: 230px;
  width: 100%;
  padding: 10px;
}

img.img2{
  width: 90%;
}

div.img2 {
  background-color: #aaa;
  width: 85%;
  height: 300px; 
  padding-left: 1em; 
  padding-right: 1em
}


/* image in index page the top right column - Old store */
.img3 {
  background-color: #aaa;
  height: 100%;
  width: 95%;
  padding-left: 20px;
  padding-right: 20px;
  
}

img.img3{
  width: 90%;
}
div.img3 {
  width: 85%;
  height:100%; 
  padding: 1rem;
}

#img4{
  display: block;
}


.img4 {
  background-color: lightblue;
  width: 85%;
  height: 90%;
  padding: 10px;
  margin: .8rem;
  text-align: center;
}

img.img4 {
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px black;
}

div.img4 {
  width: 87%;
  height:250px; 
  margin: 1.5rem;
  padding-left: 20px; 
  padding-right: 20px;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  	-webkit-box-shadow: 4px 3px 8px 1px #969696;
}


/* formatting for the about page*/


}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {


 /* Style the topnav links */

h1 {
  font-size: 20px;
}
h2 {
    font-size: 18px;
  }

  h3{
    font-size: 14px;
  }

  h4{
    font-size: 12px;
  }

  h5 {
    font-size: 8px;
  }

 

  .header {
    height: 40px;
  }

  .headerimg1 {
    width: 28%;
  }
  
  .headerimg2 {
    width: 30%;
  }

  /* Adjust Style for the top navigation bar on cellphone */

  .navcontainer {
    height: 40px; 
    top: 40px;
    box-shadow: 2px 2px 2px 2px #ffcc00;
  }


/* Style the topnav links */
.topnav a {
  float: left;
  font-size: 10px;
  font-weight: bold;
  text-align: left;
  color: white;
  margin: .1em .1em;
  padding: .8em 1.2em;
  background-color:black;
}

/* top navigator adjustment for cellphone Change color on hover */

.topnav a:hover {
  box-shadow: 1px 1px 1px 1px darkgray;
}

/* style the locations dropdown menu for cellphone screen */


.dropdown:hover{
  box-shadow: 1px 1px 1px 1px darkgray;
}

li.dropdown {
  display: block;
  float: left;
}

div.dropdown-content {
  width: 20px;
  margin-left: 3px;
  margin-top: .3em;
  padding-left: 0;
  padding-right: 1px;
  max-width: 100%;
  z-index: 1;
}


.card {
  background-color: white;
  padding: 5px;
  margin-top: 5px;
}

.img1 {
  background-color: #aaa;
  height: 165px;
  width: 100%;
  padding: 8px;
}

img.img1 {
width:100%;

}


div.img1 {
  width: 85%;
  height: 220px; 
  margin: 1.5rem;
  padding: 1.5rem;
}

/* Image in left column second down*/


.img2 {
  background-color: #aaa;
  height: 165px;
  width: 100%;
  padding: 8px;
}
img.img2 {
  width:100%;
}

div.img2 {
  width: 85%;
  height: 220px; 
  margin: 1.5rem;
  padding: 1.5rem;
}


/* Image in right column top or third image down in smaller screens*/

.img3 {
  background-color: #aaa;
  width: 220px;
  height: 100%;
  padding: 8px;
  margin: .5rem;
  margin-top: 0;
  text-align: center;
  
}
img.img3{
  width: 90%;
}

div.img3 {
  width: 85%;
  height:220px; 
  margin: 1.5rem;
  padding: 1.5rem;
}

/* Image best friend under the hood on bus */

#img4{
  display: block;
}


.img4 {
  background-color: lightblue;
  width: 95%;
  height: 90%;
  padding: 10px;
  margin: .5rem;
  text-align: center;
}

img.img4 {
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  -webkit-box-shadow: 4px 3px 8px 1px black;
}

div.img4 {
  width: 85%;
  height:250px; 
  padding-left: 20px; 
  padding-right: 20px;
  border-radius: 5px;
  box-shadow: 4px 3px 8px 1px #969696;
  	-webkit-box-shadow: 4px 3px 8px 1px #969696;
}




/* list of cities addresses */

ul.noindent {
  font-style: normal;
  margin-left: 1px;
  margin-right: 100px;
  padding-left: 5px;
  padding-right: 0px;
}

.state{
  font-size: 17px;
}

ul.cities {
  display: block;
 
}

li.cities {
  display: block;
  font-size: 14px;
}

li.address {
  font-size: 13px;
}


div.locations {
  margin-top:0; 
  padding-right: 0; 
  float: clear; 
  height: 55%; 
  width: 100%; 
  overflow:scroll;
}


div.mapca {
  margin-top: 0; 
  width:100%; 
  height:100%;
  margin-left: 0;

}

div.mapor {
  margin-top: 2px; 
  width:100%; 
  height:100%;
  margin-left: 2px;
}

div.mapwa {
  margin-top: 2px; 
  width:100%; 
  height:100%;
  margin-left: 2px;
}

 
}