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

#wrapper { background-color: #FFFFFF; }

header { margin-bottom: 2em; padding: .3em; background-color: #1d1d1e; color: #FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size: .5em; }

#logo { width: 100%; height: 125px; text-align: center; }
#logo img { height: 120px; }

a { color: #212222; text-decoration: none; }
a:hover { color: rgb(137, 36, 36); }

nav { display: flex; font-size: .9em; text-align: left; background-color: #FFFFFF; margin-top: 10px; margin-bottom:10px; }
nav a { box-shadow: inset 0 0 0 0 #303030; color: #212222; margin: 0 -.25rem; padding: 0 .25rem; transition: color .3s ease-in-out, box-shadow .3s ease-in-out; text-decoration: none; }
nav a:hover { box-shadow: inset 100px 0 0 0 #303030; color: white; }
nav ul { padding: 0px; display: flex; flex-direction: column; list-style-type: none; border: 0px solid black; width: 100% }
nav li { padding: .5em; border-bottom: solid 1px; text-align: center; }

section { padding-left: .5em; padding-right: .5em; text-align: center;}
section img { box-shadow: 7px 7px 10px grey; border-radius: 10px; }
section h2 { font-size: .9em }
section p { font-size: .9em }

#homehero2 { margin-top:70px; width: 100%; height:200px; background-image: url(../images/homehero2.jpg); background-size: 100% 150%; background-repeat: no-repeat; }
#armshero { margin-top:30px; width: 100%; height:300px; background-image: url(../images/armshero.jpg); background-position: center; background-size: 100%; background-repeat: no-repeat; }
#chesthero { margin-top:30px; width: 100%; height:300px; background-image: url(../images/chesthero.jpg); background-position: center 20%; background-size: 100%; background-repeat: no-repeat; }
#legshero { margin-top:30px; width: 100%; height:300px; background-image: url(../images/legshero.jpg); background-position: center; background-size: 100%; background-repeat: no-repeat; }
#shouldershero { margin-top:30px; width: 100%; height:300px; background-image: url(../images/shouldershero.jpg); background-position: center 40%; background-size: 100%; background-repeat: no-repeat; }
#backhero { margin-top:30px; width: 100%; height:300px; background-image: url(../images/backhero.jpg); background-position: center 17%; background-size: 100%; background-repeat: no-repeat; }
#abshero { margin-top:30px; width: 100%; height:300px; background-image: url(../images/abshero.jpg); background-position: center; background-size: 100%; background-repeat: no-repeat; }

h1 { text-align: center; font-size: 1.5em; font-family:Arial, Helvetica, sans-serif; }
h2 { color: #1f2020; font-family:Arial, Helvetica, sans-serif; margin-bottom: 2em;}
h3 { font-family:Arial, Helvetica, sans-serif; }

main { padding-left: 1em; padding-right: 1em; display: block; padding-top: 0px; padding-bottom: 0px; }

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

footer { font-size: .70em; font-style: italic; text-align: center; padding: 1em; background-color: #FFFFFF; }

.resort { color: #1976D2; font-size: 1.2em; }
.secnav { padding: 10px; margin-right: 30px; margin-bottom: 30px; width:210px; border: 1px solid rgb(45, 44, 44); float:left }
.secnav span { font-size: .9em; }

#mobile { display: inline; }
#desktop { display: none; }

* { box-sizing: border-box;}

table { margin:auto; border: 1px solid #3399CC; border-collapse: collapse; }
table th { padding: 5px; border: 1px solid #3399CC; text-align: center }
table td { padding: 5px; border: 1px solid #3399CC; text-align: left;}
text { text-align: left; }
table tr:nth-of-type(even) { background-color: #DFEDF8; }

form { display: flex; flex-direction: column; padding-left: 1em; width: 90%; }
input, textarea { margin-bottom: .5em; }

video { float:right; margin: 2em; }

.exerytvid { float:left; margin-right: 30px; margin-bottom: 20px; }
.exerytvid iframe { width: 450px; height: 275px } 

.product { margin-right:20px; margin-bottom: 40px; padding:25px; width: 100%; height: auto; border: 2px solid gray; box-shadow: 7px 7px 10px grey;}
.product img { float: left; width: 100px; height: 130px; margin-right: 20px; margin-bottom: 10px; }
.product h3 { margin-top: 10px; font-size: 1.1em; }
.product span { font-family:Arial, Helvetica, sans-serif; font-size: 1em; }
.product a { font-family:Arial, Helvetica, sans-serif; font-size: .8em; color: blue; line-height: 3em;}

@media (min-width: 650px) { 

   #logo { width: 100%; height: 85px; text-align: center; }
   #logo img { height: 80px; }

   h1 { font-size: 2em; letter-spacing: .25em; }
        
    nav ul { display: flex; flex-flow: row; justify-content: space-around; padding-right: .5em; padding-left: .5em; }
    nav li { width: 0em; border-bottom: 0px; }
    
    #wrapper { margin: auto; width: 80%; }
    
    section { width:100%; border: 0px solid black; padding-left: 2em; padding-right: 2em;  } 
    #flow { display: flex; flex-flow: column;}

    #mobile { display: none; }
    #desktop { display: inline; }

    #homehero1 { margin-top:10px; width: 100%; background-image: url(../images/homehero1.jpg); background-size: 100% 100%; background-repeat: no-repeat; }
    
    form { display: grid; grid-template-columns: 10em 1fr, 10em 1fr; grid-gap: 1em; padding-left: 1em; width: 60%; }
    input[type="submit"] { grid-column: 2/2; width: 9em }

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

 }
@media (min-width: 1024px) { 
   nav ul { padding-left: 10%; padding-right: 10%; }
   #wrapper { margin: auto; width: 100%; }
   #flow { display: flex; flex-flow: row; }
   }

@media (min-width: 1475px) { 
   #wrapper { margin: auto; width: 80%; }
   #homehero1 { margin-left: 30px; margin-top:10px; float:right; width: 450px; height: 600px; background-image: url(../images/homehero1.jpg); background-size: 100% 100%; background-repeat: no-repeat; }
}