header, main, nav, footer, figure, figcaption, aside, section, article { display: block; }



* { box-sizing: border-box; }

body { background-color:#A31D08; font-family: Verdana, Arial, sans-serif; color: #751506; }

body a { text-decoration: none;  } 

#wrapper { width: 80%; margin: auto; color: #751506; background-color: #F5F5F5; min-width: 550px; max-width: 1280px; }



header { background-color:#FA6750; background-image: url("lilyheader.jpg"); background-position: right; background-repeat: no-repeat; height: 150px; }



nav { text-align: center; font-weight: bold; float: left; width: 190px; padding: 1em; }



nav a { text-decoration: none; text-align: center; font-weight: bold; border-style: outset; border-width: 3px ; border-color: #CCCCCC; padding: 1em; margin-bottom: 1em; display: block; transition: background-color 3s ease-out; }



nav ul { list-style-type: none; padding-left: 0; font-size: 1.2em; }


nav a:link { color: #751506; }

nav a:visited { color: #497777; }

nav a:hover { color: #A26100; border: 3px inset; border-color: #B6D2D3; }



h1 {  padding-top: 50px; padding-left: 2em; display: block; }

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

footer { background-color:#B36154; font-style: italic; font-size: small; text-align: center; padding: 1em; color: #FFE4C4; }

footer a:link { color: #DEB887 }

li { font-size: 90%; }

#mathero { height: 300px; background-image: url("yogamat.jpg"); background-size: 100% 100%; background-repeat: no-repeat; }


#loungehero { height: 300px; background-image: url("yogalounge.jpg"); background-size: 100% 100%; background-repeat: no-repeat; margin-left: 12em; background-color: white; }


.floatleft { margin-right: 4em; }

.clear { clear: both; }


#mobile { display: none; }

#desktop { display: inline; }

label { float: left; display: block; text-align: right; width: 10em; padding-right: 1em; 
}

input { display: block; margin-bottom: 2em;
}

label { display: block; margin-bottom: 2em; 
}

input[type="submit"] { margin-left: 12em;
}

form { padding: 3em; }


audio { margin: 1em; }






@media only screen and (max-width: 64em) {
    
    body { margin: 0; padding: 0; }
    
    #wrapper { min-width: 0; width: auto; margin: 0; }
    
    header { padding-top: 1px; }
    
    main { padding-top: 0; padding-bottom: 2.5em; padding-left: 1em; padding-right: 1em; margin: 0; font-size: 90%; float: none; }
    
    nav { float: none; width: auto; padding-left: 2em; }
    
    nav a { padding: 0.2em; margin-left: 0.3em; float: left; width: 23%; }
    
    h2, h3, p, dl { padding-left: 2em; padding-right: 2em; }
    
    main ul { margin-left: 2em; }
    
    .floatleft { margin-left: 2em; margin-bottom: 1em; }
    
    .clear { padding-left: 2em; }
    
    #mathero, #lounghero { height: 150px; width: 80%; margin-left: auto; margin-right: auto;  }
    
}

table { margin-left: auto; margin-right: auto; width: 60%; border: 1px solid #3F2860; margin-bottom: 1em; border-collapse: collapse; }

td, th { padding: 0.5em; border: 1px solid #3F2860; }

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

caption { margin: 1em; font-weight: bold; font-size: 120%; }



@media only screen and (max-width: 37.5em) {
    
    h1 { font-size: 2em; padding-top: 0.25em; padding-left: 1.5em; width: 85%; text-align: center; }
    
    nav a { padding: 0.5em; width: 45%; float: left; min-width: 6em; margin-left: 0.5em; }
    
    li {font-size: 100%; }
    
    .floatleft {  display: block;
  margin-left: auto;
  margin-right: auto;  }
    
    #mathero, #loungehero { background-image: none; height: 0; }
    
    footer { padding: 0.5em; margin: 0; }
    
    #mobile { display: inline; }
    
    #desktop { display: none; }
    
    label { float: none; text-align: left; 
    }
    
    input[type="submit"] { margin-left: 0;
    }
    
}