body { background-color: #EAEAEA;
       color: #666666;
       font-family: Verdana, Arial, sans-serif;
       background-image: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%);
}

#wrapper { background-color: unset;
           background-repeat: no-repeat;
           margin: auto;
           width: 80%;
           min-width: 960px;
           max-width: 2048px;

           padding-right: 0;
}

header { background-color: #002171;
         color: #FFFFFF;
 	    font-family: Georgia, serif;
 	    height: 120px;
}

header:link{ text-decoration: none;

}

header:visited{ color: #FFFFFF;

}

header:hover{ color: #90C7E3;

}

h1 { text-align: center;
     padding-top: .5em; 
     font-size: 3em;
     letter-spacing: 0.25em;
}

h2 { color: #1976D2;
     font-family: Georgia, serif; 
}

h3 { font-family: Georgia, serif; 
}

nav { 
     float: unset;
     width: unset;
     padding: unset;
     position: unset;
     font-weight: unset;
     position: unset; 
}

nav ul{ 
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-around;
     flex-direction: row;
     list-style-type: none;
        

}

nav li{
     width: 12em;
     border-bottom: none;
}

nav a:link {color: #5C7FA3;
            text-decoration: none;
}

nav a:visited { color: #344873; 
}

nav a:hover     { color: #A52A2A; 
}

main { background-color: #FFFFFF;
       padding-left: 2em;
       padding-right: 2em;
       display: block; 
       margin-left: unset;
       overflow: auto;}

section { float: left;
          width: 33%;
          padding-left: 2em;
          padding-right: 2em;
}

dt { color: #002171;
     font-weight: bold;
}

table{
     margin: auto;
     border: solid 1px #3399CC;
     width: 90%;
     border-collapse: collapse;
}

td, th{
     padding: 5px;
     border: solid 1px #3399CC;
}

td{
     text-align: center;
}

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

.text{
     text-align: left;
}

.resort { color: #1976D2;
          font-size: 1.2em;
}

#homehero { height: 300px;
            background-image: url(coast.jpg);
  		  background-repeat: no-repeat;
            background-size: 100% 100%; 
            margin-left: unset;
}

#yurthero { height: 300px;
            background-image: url(yurt.jpg);
  		  background-repeat: no-repeat;
            background-size: 100% 100%; 
            margin-left: unset;
       }

#trailhero { height: 300px;
            background-image: url(trail.jpg);
  		  background-repeat: no-repeat;
            background-size: 100% 100%; 
            margin-left: unset;
       }

#mobile{
     display: none;
}

#desktop{
     display: inline;
}

footer { background-color: #FFFFFF;
         font-size: .70em;
         font-style: italic;
 	    text-align: center;
 	    padding: 1em;
         margin-left: unset;
         overflow: auto;

}

*{
     box-sizing: border-box;
}

     @media screen and (max-width: 440px){
          body{
               margin: 0;
               background-color: #90C7E3;
               background-image: unset;
               background-color: white;
          }

          #wrapper{
                background-image: unset;
                margin: unset;
                width: unset;
                min-width: unset;
                max-width: unset;
                box-shadow: unset;
                padding-right: 0;
          }

          header{
               padding: 1em;
               height: unset;

          }

          h1{
               padding-top: unset; 
               font-size: 1.5em;
               letter-spacing: unset;
          }

          nav{
           float: unset;
           width: unset;
           padding: unset;
           position: unset;
           font-weight: unset;
          }

          nav ul{ 
               flex-direction: column;
               background-color: white;
               margin: 0;
               padding-left: 0;
          }

          nav li{
               padding-top: .5em;
               padding-bottom: .5em;
               padding-left: 1em;
               padding-right: 1em;
               width: 100%;
               border-bottom: solid;
               border-width: 1px;
          }


          main{
            background-color: white;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 1em;
            padding-right: 1em;
            margin: unset;
            overflow: unset;

          }

          section { float: none;
               width: unset;
               padding-left: .5em;
               padding-right: .5em;
          }

          #homehero {
                 background-size: 200% 100%; 
                 margin-left: unset;
          }

          #yurthero { 
               background-size: 200% 100%; 
                 margin-left: unset;
          }

          #trailhero { 
               background-size: 200% 100%; 
               margin-left: unset;
          }

          #mobile{
               display: inline;
          }

          #desktop{
               display: none;
          }

          footer{
              margin-left: unset;


          }
     }


@media screen and (min-width: 441px) and (max-width: 1023px){
     
    body{
     background-image: unset;
     background-color: white;
    }

     h1{
          font-size: 2em;
          letter-spacing: .25em;
     }

     #wrapper{
          background-image: white;
          margin: unset;
          width: unset;
          min-width: unset;
          max-width: unset;
          box-shadow: unset;
          padding-right: unset;
          }

     nav{
           float: unset;
           width: unset;
           padding: unset;
           position: unset;
           font-weight: unset;
          }

     nav ul{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-around;
          padding-right: 2em;
     }

     nav li{
          width: 12em;
          border-bottom: none;
     }

     main{
          margin-left: unset;
          background-image: unset;
     }


     section{
          padding-left: 2em;
          padding-right: 2em;
     }

     footer{
          margin-left: unset;
     }

     #flow{
          flex-direction: row;
     }

     #mobile{
          display: none;
     }

     #desktop{
          display: inline;
     }

     #homehero {
          background-size: 100% 100%; 
          margin-left: unset;
     }

     #yurthero { 
          background-size: 100% 100%; 
          margin-left: unset;
     }

     #trailhero { 
          background-size: 100% 100%; 
          margin-left: unset;
     }

}