@charset "utf-8";
/* CSS Document */
/* styling for mobile Device */
* {box-sizing: border-box;}
body {
	background-color: #3F2860;
	color: #40407A;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; margin:0;}
#wrapper {	background-color: #F5F5F5;
			max-resolution: 1480px;
			padding: 2em;}
header {background-color: #40407A; 
		background-image: url("images/sunrise-1.jpg");
		background-size: 100% 100%;
		color: #fff;
		font-size: 90%;
		margin-top: 50px;
		min-height: 200px;
		text-align: left;}
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 {width: 100%;
	padding-top: .5em;
	position: fixed;
	top:0;
	left:0;
	text-align: right;
	background-color: white;
	margin: 0;
	padding-right: 0;
	z-index: 9999;
	}

/* Descendant Selector ~ specify an element within the context of its containt */

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

nav a:link {color: #3F2860}
nav a:visited {color: #497777}
nav a:hover {color: #A261000;}

nav ul {list-style: 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;}

table {	
		width: 60%;
		border:1px solid #3F2860;
		border-collapse: collapse;
		margin-bottom: 1em;
		}
td,th {	
		padding: 5px;
		border: 1px solid #3F2860;	
		}
tr:nth-of-type(even){
		background-color: #D8E8E9;
}

caption {margin: 1em;
		font-weight: bold;
		font-size: 128%;}


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

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



footer {background-color: #DDA15E;
		color:#40407A;
		font-size: .60em;
		font-style: italic;
		text-align: center;
		padding: 1em;}

@media (min-width: 600px) {
	nav ul {display: flex; flex-wrap: nowrap; 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;}
	
}