<style>
h1, h2, h3 {                                            /* The star indicates pagewide defaults */
   font-family: Arial, Helvetica, sans-serif;  /* Fonts in order of preference */
   box-sizing: content-box;                     /* Borders, padding, text all outside textbox */
   font-size: 20px;
   }
   
body {
   background-color: #F8F8F8;
   font-family: Arial, Helvetica, sans-serif;  /* Fonts in order of preference */
   color:  #000000;
   }

/*  Now, prepare to have multiple boxes that appear side-by-side on a wide display but stacked on */
/*  top of each other on a narrow display. */

.banner {                                        /* The dot means that this element is invoked as a class */
   background-color: #F8F8F8;
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;  /* Fonts in order of preference */
   width: 100%;
   text-align: center;
   }

.menu {                                        /* The dot means that this element is invoked as a class */
   background-color: #F8F8F8;
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;  /* Fonts in order of preference */
   text-align: center;
   }

.latlonFromAddr {
   background-color: #F8F8F8;
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;  /* Fonts in order of preference */
   text-align: left;
   padding-left: 10%;
   font-size: 24px;
   }
   
.endNote {                                        /* The dot means that this element is invoked as a class */
   background-color: #F8F8F8;
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;  /* Fonts in order of preference */
   text-align:center;
   font-size: 18px;
   }
   
.ads {                                        /* The dot means that this element is invoked as a class */
   background-color: #D0F8D0;
   width: 100%;
   height: 800px;
   padding: 2vw; 
   color: #FFFF88;
   font-family: Arial, Helvetica, sans-serif;  /* Fonts in order of preference */
   word-wrap:break-word;
   text-align:center;
   align:middle;
   }
   
   

.button,.pseudobutton  {
  background-color: #008000; /* Green */
  border: none;
  color: #FFFFFF;
  padding: 2vw 3vw;
  margin: 1vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
}

.button:active {
  background-color: #c0c0c0; /* Grey */
  border: 2px;
  color: #006400;
  }

.buttonInBox  {
  background-color: #C0C000; /* Gold */
  border: none;
  color: #000000;
  padding: 2vw 2vw;
  margin: 2vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 4vw;
}
 
.card  {
  background-color: #400080; /* Blue-Violet */
  border: none;
  color: #FFFFFF;
  padding: 2vw 4vw;
  margin: 4vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 4vw;
} 

@media screen and (max-width: 800px) {
   .banner, .services, .ads, .results .button .card {
      width: 100%;
	  align: middle;
    }
}

   
  
</style>
