/***** BRANDING *****/

header { 
    background-color:#eca74d;
	width: 100%;
	height: 90px;
	/*margin-top: 40px;*/
	position: absolute;
	top: 40px;
	z-index: 100;
}

#masthead {		/*Logo + Nav*/
	width: 1260px;
	margin: 0 auto;
	}

/*Logo*/	

.icon {		
	float: left;
	width: 400px;
	height: 50px;
	padding: 20px;
	background-repeat: no-repeat;
  	background-image: url("images/RWW-logo-1440.png");  
  	background-size: contain; 
	margin: 25px 0 0 25px;
}

.icon a:hover, a:active { 
	background-color: #eca74d;
}



#logo-mobile {display: none;}
	
/*Navigation*/

nav {
	float: right;
	font-family: 'ralewaybold', sans-serif;
	font-size: 16px; 1rem;
	padding: 0 3% 0 0;
}

nav ul {	
    list-style-type: none;
    margin: 0;
    padding: 0;
	position: relative;   /* for dropdown absolute position */	
}


nav ul li a:link, a:visited  {
    display: block;
    text-decoration: none;
}

nav ul li a:hover, a:active { 
	text-decoration: none;
	}

.dropdown {   /* Main Links */	
   display: inline-block;     
}

a.dropbtn, a.dropbtn:visited { /* main nav style */	
	height: 90px;	 
    cursor: pointer;
	padding: 43px 30px;
	color: #ffffff;
	font-size: 16px; 1rem;
	background-color: #eca74d;
}

a.dropbtn:hover, a.dropbtn:active { 
	background-color: #202020;
	transition: ease 250ms;
}

.dropdown-content {     /* Hide dropdown by default */	
	display: none;
    position: absolute;
    background-color: #202020;
    z-index: 200;	
}

.dropdown-content.about {	
	width: 200px;
	left: 0;
}

.dropdown-content.workshop {	
	width: 650px;
	right: 0;
	overflow: hidden;
}

.dropdown-content ul { 	
	padding: 25px;
	/* padding: 30px; reduce to accomodate Creative Journeys*/
}

.dropdown-content ul.row-ws  { 
 	float: left;
	width: 33%;	
}

.dropdown-content a:link, a:visited {    /* Yellow Links */
	display: block;
	color: #eca74d;
	line-height: normal;
    padding: 15px 15px 15px 5px;
    text-decoration: none;
	border-bottom: 1px solid #494949;	
}

.dropdown-content a:hover, a:active { 
	background-color: #494949;
	transition: ease 250ms;
}

.dropdown-content ul.row-ws p {	
	font-family: 'ralewaybold', sans-serif;
	color: #ffffff;
	padding-bottom: 10px;
	}
	
.dropdown-content ul.row-ws:first-child {
	background-color: #494949;
	height: 17em;
	/*height: 21em;*/
	width:33%;
	}
	
.dropdown-content ul.row-ws:first-child a {
	border-bottom: 1px solid #202020;
	}

.dropdown-content ul.row-ws:first-child a:hover {
	background-color: #202020;
	transition: ease 250ms;
	}

.dropdown:hover .dropdown-content { 	
    display: block;
}

.dropdown:hover .dropbtn { 
	background-color: #202020;
	color: #ffffff;
}


/*** PAGE HEADER ***/

#page-header {		
	width: 100%;
}

#page-header .title {		
	width: 1260px;
	height: 400px;
	margin: 0 auto;	
	position: relative;
	padding: 0 3%;	
}

#page-header h1 {	
	font-family: 'ralewayextralight', sans-serif;
	color: #ffffff;
	font-size: 52px; 3.25rem;
	line-height: 56px; 3.5rem;
	text-shadow:2px 2px 2px #000000;
	position: absolute;
	bottom: 0.8em;
}

#page-header .about { 
	background:url(images/page-header-about.jpg) no-repeat; 
	height: 100%; 
	background-position: 30% top; 
	background-size: cover; 
}


#page-header .contact { 
	background:url(images/page-header-contact.jpg) no-repeat; 
	height: 100%; 
	background-position: 20% top; 
	background-size: cover; 
}


#page-header .workshops { 
	background:url(images/page-header-workshops.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: center top; 
	background-size: cover; 
}


#page-header .for-students { 
	background:url(images/page-header-for-students.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: 80% top; 
	background-size: cover; 
}


#page-header .for-teachers { 
	background:url(images/page-header-for-teachers.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: center top; 
	background-size: cover; 
}


#page-header .one-to-one { 
	background:url(images/page-header-one-to-one.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: center top; 
	background-size: cover; 
}

#page-header .nature-nurture { 
	background:url(images/page-header-nature-nurture.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: center top; 
	background-size: cover; 
}

#page-header .gratitude { 
	background:url(images/page-header-gratitude.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: center top; 
	background-size: cover; 
}

#page-header .sustenance { 
	background:url(images/page-header-sustenance.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: 60% top; 
	background-size: cover; 
}

#page-header .mindfulness { 
	background:url(images/page-header-mindfulness.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: 65% top; 
	background-size: cover; 
}

#page-header .movement { 
	background:url(images/page-header-movement.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: 90% top; 
	background-size: cover; 
}

#page-header .storytelling { 
	background:url(images/page-header-storytelling.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: center top; 
	background-size: cover; 
}

#page-header .handpan { 
	background:url(images/page-header-handpan.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: 80% top; 
	background-size: cover; 
}


#page-header .drumming { 
	background:url(images/page-header-drumming.jpg) no-repeat, #000000; 
	height: 100%; 
	background-position: center top; 
	background-size: cover; 
}