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

/*Selector {declaration property: declaration value;*/
/*Styling for Mobile Devices - Mobile First Design*/

* {box-sizing: border-box;}

body {background-color: #3F2860; 
color: #40407A; 
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";}

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

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

h1 {padding-top:50px; 
Padding-left:2em;} 
/*Descendant Selector - specify an element within the context of it's container (parent) element*/
 
nav {width: 100%; padding-top: 0.5em; 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: #3F2860;}
nav a:visted {color: #4977777;} 
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;}

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

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

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%}

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

section {padding: 0 0.5em;}
/*any code that goes bellow this line must be for the @media 600px*/
@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;}}


/*any code that goes bellow this line must be for the @media 1024px*/
	@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;}}