body { background-color: #90c7e3;
    color: #666666;
    font-family: Arial, Verdana, sans-serif;
    margin: 0; }

#wrapper { margin: auto;
      
      background-color: #ffffff; }
    
header { padding: 1em;
     
     background-color: #002171;
     
     color: #FFFFFF;
     
     text-align: center;
                  }
                  
header a { text-decoration: none; }
header a:link { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover { color: #90C7E3; }                  

h1   {    margin-bottom: 0;
      margin-top: 0;
      font-size: 1.5em;
      font-family: Georgia, "Times New Roman", serif; }          

nav {     font-size: 1.2em;
    text-align: center;
    background-color: #FFFFFF;              }

nav a { text-decoration: none;    }

nav a:link { color: #5C7FA3; }
nav a:visited {color: #344873; }
nav a:hover {color: #A52A2A; }

nav ul { list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    margin: 0; }
    
nav li { padding-top: .5em;
     padding-bottom: .5em;
     padding-right: 1em;
     padding-left: 1em;
     width: 100%;
     border-bottom: 1px solid;    
                     }
    
main { padding-top: 0;
    padding-bottom: 0;
    padding-left: 1em;
    padding-right: 1em; }
    
section { padding-left: .5em;
      padding-right: .5em; 
                  }    
         
h2 { color: #1976D2;
    font-family: Georgia, "Times New Roman", serif; }
    
h3 { font-family: Georgia, "Times New Roman", serif; }    
    
dt { color: #002171;
        font-weight: bold; }         
        
.resort { color: #1976D2;
             font-size: 1.2em; }
             
footer { font-size: small;
      font-style: italic;
      padding: 1em;
       text-align: center;
       background-color: #FFFFFF; }
       
#homehero {  height: 300px;

    background-image:url(coast.jpg);

    background-size: 200% 100%;

    background-repeat: no-repeat; }
    
#yurthero { height: 300px;

    background-image:url(yurt.jpg);

    background-size: 200% 100%;

    background-repeat: no-repeat;    }
    
#trailhero {height: 300px;

    background-image:url(trail.jpg);

    background-size: 200% 100%;

    background-repeat: no-repeat; }
    
#shophero{height: 300px;

    background-image:url(sunset.jpg);

    background-size: 200% 100%;

    background-repeat: no-repeat; }

#reshero { height: 300px;
         background-image:url(coast.jpg);
         background-size: 200% 100%;
         background-repeat: no-repeat;
                             }
    
* { box-sizing: border-box; }

#mobile { display: inline; }

#desktop {display: none; }

video{float:right;
	margin:2em;}
table { margin: auto;
    border: 1px solid #3399CC;
    width: 90%;
    border-collapse: collapse;
                    }

td { padding: .5em;
     border: 1px solid #3399CC; 
     text-align: center;        }
                     
th { padding: .5em;
      border: 1px solid #3399CC; 
                         }
                     
.text { text-align: left; }

tr:nth-of-type(even) { background-color: #DFEDF8 }

form { display: flex;
    flex-direction: column;
    padding-left: 1em;
    width: 80%;
                }

input, textarea { margin-bottom: .5em; }

         

@media (min-width: 600px) {
    h1 { font-size: 2em;
          letter-spacing: .25em; 
                          }
    nav ul { display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: space-around;
         padding-right: 2em; 
                         }
     
     nav li { width: 12em;
          border-bottom: none;
                      }
     
     section { padding-left: 2em;
           padding-right: 2em;
                       }
     
     #flow { display: flex;
            flex-direction: row;    
                     }
                  
     
     #mobile { display: none; }

    #desktop { display: inline; }

    #homehero { background-size: 100% 100%; }

    #yurthero { background-size: 100% 100%; }
    
    #trailhero { background-size: 100% 100%; }
    
    #shophero { background-size: 100% 100%;}
    form { width: 60%;
        display: grid; 
        grid-gap: 1em;
        grid-template-columns: 10em 1fr;
                            }
    
    input[type="submit"] { grid-column: 2/3;
                width: 9em;
                        }
    
    .reshero { background-size: 100% 100% }
}

@media (min-width: 1024px) {
    body { background-image: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%); 
                                                          }
    nav ul { padding-left: 10%;
         padding-right: 10%; 
                         }
 
     #wrapper {margin: auto;
            width: 80%;    
                    }
}