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

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

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

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

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



nav{ 
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    width:100%;
    Height:50px;
	text-align:right;
	background-color:white;
	margin:0;
	padding:.5px 0 1em 1em;
    height:auto;
    padding-right:0;
	
}
nav ul{list-style-type: none;
        margin:0;
        padding-right:2em;
        font-size:1.2em;
        }
nav li {display:inline;
        padding-left:2em;
        width:30%}
section {padding-left:.5em;
        padding-right:.5em;}

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

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

#mathero{
	height:300px;
	background-image:url("yogamat.jpg");
	background-size:cover;
    display: none
}
#loungehero{
	height:300px;
	background-image:url("yogalounge.jpg");
	background-color:100%;
   display: none
}
#flow {display: block}
h2 {margin:0}

nav a {
	text-decoration:none
	}

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

li {font-size:.9em}
dd {font-size:.9em}

@media only screen and (min-width:600px)
{ nav ul {display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;}
    nav li {width:7em}
    section {padding-left:2em;
            padding-right: 2em}
    #mathero {display:block;
            padding-bottom:1em}
    #loungehero {display:block;
            padding-bottom:1em}
    #flow {display: flex;
            flex-direction: row;}}
 
@media only screen and (min-width:1024px)
{header{font-size 120%;}
    nav {font-weight: bold}
    .home {height:50vh;
            padding-top:5em;
            padding-left:8em;}
    .content {height:30vh;
                padding-top:2em;
                padding-left:8em}
    #wrapper {margin:auto;
            width:80%;}}