@charset "UTF-8";
/* CSS Document */

/*Selector {declaration property: declaration value;*/

* {boc-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;
	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;
height: 150px;
background-repeat: no-repeat;
background-position: right;}

header a {text-decoration: none;}
header a:link {color: #FFF;}
header a:visted {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: 0.5em; position: fixed; top:0; left:0; text-align: right; background-color: white; margin:0; padding-right: o; z-index: 9999; }
/*Descendant Selector -specify an element within the context of it's container (parent)elment*/
nav a{text-decoration: none; display:block;}
nav a:link {color: #3F2860;}
nav a:visted {color: #49777;}
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;}


main {padding: 1em 2em 0em 2em; margin-left: 170px;}


#mathhero {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;}
#loungehero 
section {padding: 0 0.5em;}

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


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

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

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



/*Any code THAT GOES BELOW THIS LINE MUST BE FOR THE @MEDI 660PX*/


@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: 1em;}
#loungehero  {display: block;padding: 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;}