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

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

header a
    {text-decoration: none;}

header a:link
    {color: white;}

header a:visited
    {color:white;}

header a:visited
    {color: #edf5f5}

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

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

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

nav a
	{text-decoration:none;}

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

nav a:visited
    {color: #497777;}

nav a:hover
    {color:#a26100;}

h2
	{margin:0;}

li
	{font-size:90%;}

dd
	{font-size:90%;}

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

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

.content
	{height:20vh;
	padding-top:2em;
	padding-left:10%;}
	
#mathero
	{height:300px;
	background-image: url(images/yogamat.jpg);
	background-repeat:no-repeat;
	background-size:100% 100%;
    display: none;}

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

section
    {padding: 0 .5em;}

#flow
    {display: block;}

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

@media (min-width:600px)
    {nav ul
        {display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;}

    section
        {padding: 0 2em;
        flex: 1;}

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

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

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

@media (min-width:1024px)
    {header
        {font-size: 120%;}

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

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