* { box-sizing: border-box}

nav a 	{
    text-decoration: none;
	width: 100%;
	}

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

header 	{
    background-color: #40407a;
	color: #ffffff;
	background-image: url(sunrise.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
    text-decoration: none;
    font-size: 90%;
    min-height: 200px;
	}

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

.content {height: 20vh;
	padding-top: 2em;
	padding-left: 10%;
	}
	
nav	{
    text-align: right;
	font-weight: bold;
	color:#40407a;
	margin: 0;
	background-color: #ffffff;
	padding-right: 0;
    padding-top: .5em;
	padding-bottom: 1em;
    position:fixed;
    z-index: 9999;
    width: 100%;
    height: auto;
    align-content: center;
	}

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

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

nav a:link{
    color: #3f2860;
    }

nav a:visited{
    color: #497777;
    }

nav a:hover{
    color: #a26100;
    }

h2	{background-color:#f5f5f5;
	color:#40407a;
	margin: 0
	}

body	{
    font-family: verdana, arial, or sans serif;
	color:#40407a;
	background-color:#40407a;
	margin: 0
	}

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

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

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

footer	{
    color:#40407a;
	text-align: center;
	}

#flow{  
    display: block;
    }

@media  screen and (min-width: 600px){
    nav ul{
        display:flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        }
    section{
        padding-left: 2em;
        padding-right: 2em;
        flex: 1;
        }
    #mathero {
        display: block;
        margin-bottom: 1em;
        }
    
    #loungehero{
        display: block;
        margin-bottom: 1em;
        }
    
    #flow{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        }
}

@media and screen(min-width: 1024px){
    header{
        font-size: 120%;
        }
    .home{
        height: 50%;
        padding-top: 5em;
        padding-left: 8em;
        }
    .content{
        height: 30%;
        padding-top: 2em;
        padding-left: 8em;
        }
    #wrapper{
        margin: auto;
        width: 80%;
    }
}