@charset "UTF-8";
/* CSS Document */
*{box-sizing:border-box;}
body {background-color: #3f2860; color: #40407A; margin:0;}
header {background-color: #40407a; 
background-image:url("images/sunrise.jpg");
	background-size: 100%;
	color: #FFFFFF;
	font-size: 90%;
	margin-top: 50px;
	min-height:200px
	;
}
header a {text-decoration: none;}
header a:link{color: #fff}
header a:visited {color: #fff}
header a:hover {color: #EDF5F5;}
.home {height:20vh; padding-top: 2em; padding-left: 10%;}
.content {height:20vh; padding-top: 2em; padding-left: 10%;}

nav {padding-top:0.5em; width:100%; position:fixed; top: 0; left:0; text-align: right; background-color: white; margin:0; padding-right: 0; z-index: 9999;}

nav a {text-decoration: none; display:block;}

nav a:link {color: #3f2680}
nav a:visited {color: #497777}
nav a:hover {color: #a26100;}
nav ul {list-style-type: none; display: flex; flex-wrap: wrap; margin:0; font-size: 1.2em;}
nav li {width: 40%; padding: 0 1em; display:inline;}

.studio{font-style:italic;}
section {padding: 0 0.5em;}
#mathero {background-image:url(images/yogamat.jpg);
background-repeat: no-repeat;
height: 300px;
background-size: cover;
display: none;}

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

#mobile {display: inline;}
#desktop {display: none;}

/*This is an id - with a # and a made up name (can only be used one time per web page)*/
/*these are the properties needed to center the page*/
#wrapper {width: 80%; 
	margin-left:auto; 
	margin-right:auto;
	background-color:#f5f5f5;
	padding:2em;}
footer {font-size: .60em; font-style: italic; text-align: center;}

@media (min-width: 600px) {
	nav ul {display: flex; flex-wrap: none; justify-content: flex-end}
	nav li {width: 7em};
	section {padding: 0.2em;}
	#mobile {display: none;}
	#desktop {display: inline;}
	#mathero {display: block;padding-bottom: 1em;}
	#loungehero {display: block; padding-bottom: 1em;}
	#flow {display: flex; flex-direction: row;}
}

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