*{

	box-sizing:border-box;
	
}


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

footer{

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

header{

	background-image:url(Images/sunrise.jpg);
	background-size:100% 100%;
	background-color:#40407A;
	color:#FFFFFF;
	line-height:400%;
	text-indent:1em;
	margin-top:50px;
	font-size:90%;
	min-height:200px;
}


nav{

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

nav a{

	text-decoration:none;

}

nav ul{

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

nav li{

	display:inline;
	padding-left:4em;

}

nav a:link{

	color:#3F2860;

}

nav a:visited{

	color:#497777;

}


nav a:focus{

}


nav a:hover{

	color: #A26100;

}


nav a:active{


}


li,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-size:100% 100%;
	background-repeat:no-repeat;
	display:none;
}


#loungehero{

	height:300px;
	background-image:url(Images/yogalounge.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;
	display:none;
	

}


h2{

	margin:0;

}
	

header a{

	text-decoration:none;
}

header a:link{

	color:#FFFFFF;

}
	

header a:visited{	

	color:#FFFFFF;
	
}

header a:focus{

}

header a:hover{

	color:#EDF5F5;

}

header a:active{

}

section{

padding-left:.5em;
padding-right:.5em;

}

#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;
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%;

}


}