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


body, html {
                height: 100%;
                margin:0;
            }
          .img { 
                background-image: url("Osprey1.jpg");
            /* center the background image vertically and horizontally*/
                background-position: center center;
            
            /* removing tilings and repeatition*/
                background-repeat: no-repeat;
            
            /* to scale image to fit the screen */
                background-size: cover;
            
            /* fixed viewport against scroll ups and downs*/
                background-attachment: fixed;
            
                height:100%;
          }
          
          /* for responsiveness: */
 

 

 h1 {
  color: white;	
  font-size: 3em;
  text-align: center;
  padding-top: 50px;
  text-shadow: 2px 2px 4px #000000;
}  
  
  
 .sidenav {
  float: right;	 
  width: 250px;

  margin-top: 35px;
  margin-right: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.5em;
  color: #335DFF;
  display: block;
}

.sidenav a:hover {
  color: #064579;
}


 .sidenav2 {
  float: left;	 
  width: 250px;
  position: fixed;bottom:20px; left:10px    ;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav2 a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.5em;
  color: #335DFF;
  display: block;
}

.sidenav2 a:hover {
  color: #064579;
}


}

		  @media (orientation: portrait) {

body, html {
                height: 100%;
                margin:0;
            }
          .img { 
                background-image: url("Osprey1.jpg");
            /* center the background image vertically and horizontally*/
                background-position: center center;
            
            /* removing tilings and repeatition*/
                background-repeat: no-repeat;
            
            /* to scale image to fit the screen */
                background-size: cover;
            
            /* fixed viewport against scroll ups and downs*/
                background-attachment: fixed;
            
                height:100%;
          }
          
          /* for responsiveness: */
 

h1 {
  color: white;	
  font-size: 8vw;
  text-align: center;
  padding-top: 50px;
  text-shadow: 2px 2px 4px #000000;
}    
  
 .sidenav {
  float: right;	 
  width: 40%;

  margin-top: 35px;
  margin-right: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 3px 2px 6px 10px;
  text-decoration: none;
  font-size: 4.5vw;
  color: #335DFF;
  display: block;
}


 .sidenav2 {
  float: left;	 
  width: 250px;
  position: fixed;bottom:20px; left:10px    ;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav2 a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 4.5vw;
  color: #335DFF;
  display: block;
}

.sidenav2 a:hover {
  color: #064579;
}

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

h1 {
  color: white;	
  font-size: 4vw;
  text-align: left;
  padding-top: 50px;
  margin-left: 10px;
  text-shadow: 2px 2px 4px #000000;
}    
  
 .sidenav {
  float: right;	 
  width: 30%;
  margin-top: -70px;
  margin-right: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 3px 2px 6px 10px;
  text-decoration: none;
  font-size: 2vw;
  color: #335DFF;
  display: block;
}

 .sidenav2 {
  width: 250px;
  position: fixed;bottom:20px;left:10px    ;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav2 a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 2vw;
  color: #335DFF;
  display: block;
}

.sidenav2 a:hover {
  color: #064579;
}

			  
  }