footer {
  min-height: 20px;
  background: #3b00a1;
  color: white;
} 

.allButFooter {
    min-height: calc(100vh - 100px);
}

@media only screen 
  and (min-device-width: 800px)
  and (orientation: landscape) {

 #map{
 width: 100%;
 height:100%;
 }
 
 .myDiv {
  width: 45%;
  display: inline-block;
  margin-left: 25px;
  margin-bottom: 25px;
}
 
 h1 {
	background-color: #3b00a1;	
    color: white;	
  	padding-top: 0.3em;
	padding-bottom: 0.3em;
    width: 80%;
    margin: 0 auto;
    font-size: 1.4em;
    text-align: center;
	text-shadow: 2px 2px 4px #000000;
}

 p {
	padding-top: 0;
	padding-left: 0.2em;
    font-size: 1.2em;
   text-align: left; 
}
 section {
	padding-top: 0;
	padding-left: 1em;
    font-size: 1.2em;
   text-align: left; 
   color: black;
}


 h2 {
	background-color: white;
    color: black;	
  	padding-top: 0.1em;
	padding-bottom: 0.1em;
    width: 100%;
    margin: 0 auto;
    font-size: 1.5em;
    text-align: center;
}
h3 {
	background-color: white;
    color: #3b00a1;	
  	padding-top: 1.0em;
	padding-bottom: 0.2em;
    margin: 0 auto;
    font-size: 1.2em;
    text-align: left;
}
h4 {
    color: black;	
  	padding-top: 1.0em;
	padding-bottom: 0.5em;
    margin: 0 auto;
    font-size: 1.2em;
    text-align: left;
}

table {
	background-color: white;
    color: black;	
  	padding-top: 1.0em;
	padding-bottom: 0.2em;
    margin: 0 auto;
    font-size: 1.1em;
    text-align: left;	
}

ul{
    width: 100%;
	background-color: black;	
  	padding-top: 0.3em;
	padding-bottom: 0.3em;
    margin: 0 auto;
    font-size: 1.2em;
    text-align: left;

}

li {
 display: inline; 
 padding: 5px 30px 5px 30px ;
} 



li a {
    font-family: Arial;
    color: white;	
    margin: 0 auto;
    font-size: 1.0em;
    text-align: left;
    text-decoration:none;


}



}

		  @media (orientation: portrait) {
               .img {
                /* to improve page load speed on mobile internet connections */
                  background-image: url("Osprey2.jpg");
               } 

 #map{
  width: 0;
 height: 0;     
 display: none;
 }
 
   .myDiv {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */
    
  }
 
 h1 {
	background-color: #3b00a1;
    color: white;	
  	padding-top: 0.3em;
	padding-bottom: 0.3em;
    width: 90%;
    margin: 0 auto;
    font-size: 4vw;
    text-align: center;
	text-shadow: 2px 2px 4px #000000;
}

 h2 {
	background-color: white;
    color: #3b00a1;	
  	padding-top: 0.1em;
	padding-bottom: 0.1em;
    margin: 0 auto;
    font-size: 4vw;
    text-align: center;
    width: 100%;
}

h3 {
	background-color: white;
    color: #3b00a1;	
  	padding-top: 0.8em;
	padding-bottom: 0.1em;
    margin: 0 auto;
    font-size: 4vw;
    text-align: left;
}
 p {
	padding-top: 0;
	padding-left: 1em;
    font-size: 3vw;
   text-align: left; 
}

 section {
	padding-top: 0;
	padding-left: 1em;
    font-size: 4vw;
   text-align: left; 
}

img {
	width: 100%;
}

form {
	width: 100%;	
}

table {
	background-color: white;
    color: black;	
  	padding-top: 1.0em;
	padding-bottom: 0.2em;
    margin: 0 auto;
    font-size: 4vw;
    text-align: left;	
}




ul{

	background-color: black;	
  	padding-top: 0.3em;
	padding-bottom: 0.3em;
    width: 100%;
    margin: 0 auto;
    font-size: 3vw;
    text-align: left;

}

li {
 display: inline; 
 padding: 5px 10px 5px 10px ;
} 



li a {
    font-family: Arial;
    color: white;	
    margin: 0 auto;
    font-size: 3vw;
    text-align: left;
    text-decoration:none;

}

			   
		  }
		  
@media   (orientation: landscape) and (hover: none) and (pointer: coarse)  {

 h1 {
	background-color: #3b00a1;
    color: white;	
  	padding-top: 0.3em;
	padding-bottom: 0.3em;
    width: 70%;
    margin: 0 auto;
    font-size: 2.5vw;
    text-align: center;
	text-shadow: 2px 2px 4px #000000;
}

 p {
	padding-top: 0;
	padding-left: 1em;
    font-size: 1.8vw;
   text-align: left; 
}

 section {
	padding-top: 0;
	padding-left: 1em;
    font-size: 2.3vw;
	    width: 100%;
   text-align: left; 
}


 h2 {
	background-color: white;
    color: #3b00a1;	
  	padding-top: 0.1em;
	padding-bottom: 0.1em;
    width: 100%;
    margin: 0 auto;
    font-size: 2vw;
    text-align: center;
}
 h3 {
	background-color: white;
    color: #3b00a1;	
  	padding-top: 0.8em;
	padding-bottom: 0.1em;
    margin: 0 auto;
    font-size: 2vw;
    text-align: left;
}

ul{

	background-color: black;	
  	padding-top: 0.2em;
	padding-bottom: 0.2em;
    width: 100%;
    margin: 0 auto;
    font-size: 3vw;
    text-align: left;

}

li {
 display: inline; 
 padding: 5px 10px 5px 10px ;
} 



li a {
    font-family: Arial;
    color: white;	
    margin: 0 auto;
    font-size: 2vw;
    text-align: left;
    text-decoration:none;

}



			  
  }