* { box-sizing: border-box; }

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

body {background-color: #40407A; 
    margin: 0;
    color: #40407a;
    font-family: Verdana, Arial, sans-serif;}

h2 {margin: 0;}

table {border-style: solid; 
				border: 1px; 
				border-color:#40407A;
				border-bottom: 1em;
				border-collapse: collapse;
			}

td, th {padding: 0.5em;
		border-color:#40407A;}

table:nth-of-type() {background-color: #D7E8E9 }

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

#wrapper {background-color: #F5F5F5;
		   padding: 2em;}

header {background-color: #40407A;
         color: #FFFFFF;
		 font-size: 90%;
		 min-height: 200px;
		 background-image: url(sunrise.jpg);
		 background-size: 100% 100%; 
		 margin-top: 50px;}

header a         {text-decoration: none;}
header a:link    {color: #FFFFFF;}
header a:visited {color: #FFFFFF;}
header a:hover   {color: #EDF5F5;}


nav {position: fixed;
    top: 0;
	left: 0;
	z-index: 9999;
	text-align: right;
    background-color: #FFFFFF;
	margin: 0;
	padding-top: 0.5em;
	padding-bottom: 1em;
	padding-right: 0;
    font-weight: bold; 
	width: 100%;
	height: auto;}

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

nav li {display: inline; 
         padding-left: 4em;}

nav a         {text-decoration: none;}
nav a:link    {color: #3F2860;}
nav a:visited {color: #497777;}
nav a:hover   {color: #A26100;}

footer {font-size: small; font-style: italic; text-align: center; clear: right;}

li, dd {font-size: 90%;}

.home {height: 20vh; padding-top: 2em; padding-left: 10%;}

.content { height: 20vh; padding-top: 2em; padding-left: 10%;}

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

#loungehero {height: 300px; background-image: url(yogalounge.jpg); background-size: 100% 100%; background-repeat: no-repeat; display: none;}

#flow {display: block;}

@media screen and (min-width: 600px) {

nav ul {display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;}

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

#mathero {display: block; margin-bottom: 1em;}
#loungehero {display: block; margin-bottom: 1em;}

#flow {display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;}} 

@media screen and (min-width: 1024px) 
{

header {font-size: 120%;}

.home {height: 50vh;
padding-top: 5em;
padding-left: 8em;}

.content {height: 30vh;
padding-top: 2em;
padding-left: 8em;}

#wrapper {margin: auto;
width: 80%;}
	
}