/* CSS Document for Screens */
/*@import has to be the first line in the css file */
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
@import url(https://fonts.googleapis.com/css?family=Candal);

body { font-family: 'Open Sans', sans-serif; font-size:16px; font-weight:300; color: #555; margin: 0; padding: 0; background-color:#f8f1e7;}

#page { max-width: 1200px; margin: 0 auto; position: static; }

/* Text */

h1{ font-family: 'Open Sans', sans-serif; font-size: 2.2em; margin: 0 0 .1em 0; letter-spacing: .025em;} 

h2 { font-size: 1.6em; color: #f06f2e; line-height: 1.1em; margin: 0 0 .5em 0; } 

h3 { font-size: 1.3em; font-weight: 700; margin: 0 0 .5em 0; } 

h4 { font-size: 1em; font-weight: 700; margin: 0 0 1em 0; } 

p { margin: 0 0 1.4em 0; line-height:1.5em; }

ul.iconlist
{
list-style: none;
margin: 0 0 50px 0;
padding-left: 10;
}

li.bullet {
background: url('../images/bullet.gif');
background-repeat: no-repeat;
background-position: top left ;
padding: 0 0 0 20px;
margin: .4em 0;
}

sup {
vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

a {color: #007eff; }

a.btn { font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 15px; transition: background-color .5s; }

a.btn:hover { background-color: rgba(63, 14, 6, .5 ); }

a.text { color: #f06f2e; text-decoration: underline; }
a.text:hover { color: #a4260f; text-decoration: none; }

/* header */

header { 
	height: 430px; width:100%; 
	background: #cf0004 url(../images/banner_1200.jpg) no-repeat left bottom;  
	position: relative; 
}

header a.logo  {
	z-index: 1;
	position: absolute; 
	display: block; width: 360px; height: 84px;
	background: url(../images/spacer.svg) no-repeat 0 0; 
	background-size: contain;
	top: 15px; left: 20px;
}

header a.logo  span { display: none; }
header div.hero { position: absolute;  width: 500px; top: 150px; left: 400px; }
header div.hero h1 { line-height: 1.2em; margin: 0 100px 10px 0; color: #fff;}

header div.hero h1::before { 
	content:'\201c'; 
	color: #fff; 
	position: absolute;
	top: 10px; left: -40px;
	font-size: 2em;
	font-family: sans-serif;
}

/* Section - All */

section { padding: 0 30px; }
section::after { content:''; display: block; clear: both; } /* psuedo element */

/* Section - Main */

section.main { margin-top: 25px; margin-bottom: 30px; padding: 0; }
section.main aside { width: 33%; float: left; text-align: center; }
section.main .content { margin: 15px; background: no-repeat center top; background-size: 100px 136px; padding-top: 140px; }
section.main aside a { color: #f06f2e; text-decoration: none; }
section.main aside a:hover { color: #a4260f; text-decoration: underline; }
section.main aside .content.lessons { background-image: url(../images/lessons_icon.svg); }
section.main aside .content.photo_gallery { background-image: url(../images/camera_icon.svg);}
section.main aside .content.tools { background-image: url(../images/bass_icon.svg); }

/*  Section - Atmosphere */

section.atmosphere { background-color: #721805; padding-top: 30px; padding-bottom: 30px; color: #fff; }
section.atmosphere article { 
	padding: 0 20px 0 470px; 
	background: url(../images/live_preformance.jpg) no-repeat 0 0px; 
	min-height: 220px; 
}

section.atmosphere article a.text:hover { color: #f8990b; text-decoration: underline; }

/*  Section - How-To */

section.how-to { background-color: #f8f1e8; position: relative }
section.how-to aside { width: 33%; float: left; }
section.how-to aside .content { padding: 30px 30px 20px 0;}
section.how-to aside .content img { display: block; margin-bottom: 15px; width: 70%; border: 1px solid #942709;}
section.how-to aside .content h4 { margin-bottom: 2px; color:#000;}
section.how-to aside .content p { margin-bottom: .5em; }
section.how-to aside .content a { display: inline-block; color: #f06f2e; font-weight:700; }
section.how-to aside .content a:hover { color: #a4260f; }
section.how-to blockquote { 
	margin: 30px 0 0 0; width: 32%; 
	color: # 444;
	border: 1px solid #444;
	background-color: #fff; 
	position: absolute; top: 0px; right: 4%;
 }

section.how-to blockquote p { margin: 30px 30px 20px 50px; }
section.how-to blockquote p.quote { font-style: italic; font-size: 1.2 em; }
section.how-to blockquote p.credit {   
	color: # 777; font-size: .9em; 
	margin-top: 0;
	padding-left: 20px; 
	line-height: 1.3em; 
	position: relative;
}
section.how-to blockquote::before { 
	content:'\201c'; 
	color: #d2bd65; 
	position: absolute;
	top: 10px; left: 8px;
	font-size: 5em;
	font-family: serif;
}
section.how-to blockquote p.quote::after { content:'\201d'; font-family: serif;}
section.how-to blockquote p.credit::before { content:'\2014'; position: absolute; top: -1px; left: 0; font-family: serif;}


/*  Navigation */

nav {
	position: absolute;
	top: 0; left: 20%;
	padding: 0 0 0 0;
	width: auto;
}
nav::after { content: ''; display: block; clear: both;}
nav ul { list-style: none; margin: 0; padding: 0px  }
nav ul li{ list-style: none; margin: 0; padding: 0px  }
nav ul li:hover { background-color: #2b0306; }
nav ul li:hover > ul { display: block; }
nav ul li a { 
	display: inline-block;
	color: #feac75;
	padding: 52px 20px 14px 20px;
	text-decoration: none;
	text-transform: uppercase;
	width: auto;
	position: relative;
  }
nav ul li a:hover { color:#fff; background-color: #430d03; width:100%;}

nav ul ul { position: absolute; top: 100%;  background-color: #2b0306; display: none; }
nav ul ul li { position: relative; }
nav ul ul li a{ padding: 20px 20px 20px 20px; }
nav ul ul ul { left: 100%; top: 0px; }

/* Top-Level navigation rules */
/* this will only target an unordered list if it is immediately the child of a navigation element */
nav > ul { padding-left: 200px;}
nav > ul > li { float: left; }

/* nav > ul > li > a { width: auto; padding: 10px 20px 15px 20px;  }   optional: over-rides the nav ul li a { width: 125px; } above*/
nav a[aria-haspopup="true"]::after {
	content:''; 
	display: block; width: 0px; height: 0px; 
	position: absolute;
	top: 16px; left: 6px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #fff;
}
nav > ul > li > a[aria-haspopup="true"]::after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #fff;
	left: 20px; right: auto;
	bottom: 1px; top: auto;
}

/*  Footer */

footer { font-size: .8em; margin: 40px; color: #777; text-align:center;}
footer .content { display: inline;}
footer a { margin: 0px; }
footer a:visited { color: #777; }
footer a:hover { color: #000; }



/* Media Queries */

@media screen and (max-width:1000px) {
	
	
	/* Header */
	header div.hero { left: 360px; }

	
	/* Section - Atmosphere */
	section.atmosphere article { padding-left: 400px; background-size: 375px auto; min-height: 200px}
	
}

@media screen and (max-width:890px) {


	/* Header */

	header { height: 300px; background-image: url(../images/banner_890.jpg)  }
	header div.hero { left: 40%; top: 120px; width:440px;}
	
	/* Section - Atmosphere */
	section.atmosphere article { padding-left: 325px; background-size: 300px auto; min-height: 100px}
	
	/* Section - How-to */
	section.how-to blockquote p.quote { font-size: .8em; line-height: 1.2em; }
	section.how-to blockquote p.credit { font-size: .8em; }	
	
	/* Navigation */
	nav ul li a { 
		font-size: .9em; 
		padding: 52px 12px 15px 12px;
	  }

	
	/* Section Footer */
	footer div.content span
		{ display:block;
		margin-bottom:4px;}	
	footer div.content span.hide
		{ display:none;}	
}

@media screen and (max-width:760px) {
	h1 { font-size: 1.7em; }
	h2 { font-size: 1.2em; }
	h3 { font-size: 1em; }
	h4 { font-size: .9em; }
	p { font-size: .9em; }

	/* Header */

	header div.hero { left: 40%; top: 140px; width:400px;}
	
	header div.hero h1::before { 
	top: 6px; left: -30px;
	}

	
	/* Section - Main */
	section.main { margin-top: 10px; margin-bottom: 10px; }
	section.main aside div.content { background-size: 55px 75px; padding-top: 80px; }
	
	/* Section - How-to */
	section.how-to aside div.content img { width: 85%; }
	
	/* Navigation */
	nav {
	top: 0; left: 25%;
	}
	
	nav ul li a { 
		font-size: .8em; 
		padding: 52px 10px 16px 10px;
	  }
	
	/* Section Footer */
	footer div.content span
		{ display:block;
		margin-bottom:4px;}	
	footer div.content span.hide
		{ display:none;}	
}

@media screen and (max-width:690px) {

	
	h2 { font-size: 1em; }
	h3 { margin-bottom: 0px; }
	a.btn { font-size: .9em; }
	
	/* Header */
	header { 
		height: 160px; 
		background-image: url(../images/banner_690.jpg);
		background-position: left top;
	}
	header a.logo { 
		width: 100%; height: 66px;
		left: 0px; top: 0px;
	}
	header div.hero { width: 70%; left: 30%; top: 75px;}
	header div.hero h1 { margin-bottom: 14px; font-size: 1.2em;}
	header div.hero h1::before { 
	top: 6px; left: -20px;
	}

	/* Section - Main */

	section.main aside { width: 100%; float: none; text-align: left; }
	section.main aside div.content { 
		margin: 8px 20px 8px 0;
		padding: 5px 0px 10px 85px;
		background-size: 55px 75px;
		background-position: 20px 5px;
	}

	/* Section - Atmosphere */
	section.atmosphere article { padding: 190px 20px 0px 0px; background-size: 300px auto; min-height: initial;}

	
	/* Section - How-To */
	section.how-to { padding-bottom: 10px; }
	section.how-to aside { width: 100%; float: none; margin: 0; position: relative;}
	section.how-to aside div.content { padding: 20px 20px 20px 150px; }
	section.how-to aside div.content p { font-size: .9em;}
	section.how-to aside div.content img { 
		display:inline-block; 
		width: 125px; 
		position: absolute; 
		top: 20px; left: 0px;
	}
	section.how-to blockquote { 
		margin: 0 20px 10px 20px;
		width: 100%;
		padding: 1px 0 px 20px 0px;
		position: relative;
	}


	/* Navigation */
	nav { position: static; width: auto; padding: 20px 15px; background-color: #4b0a0c;}

	nav ul,
	nav ul ul,
	nav ul ul ul { display: block; position: static; }

	nav > ul { padding: 0;}
	nav > ul > li { float: none; margin-top: 25px; }

	nav ul li:hover { background: none;}

	nav ul li a {
		width: auto;
		display: block;
		margin: 8px 10px;
		padding: 8px; 15px;
		border: 1px solid rgba(255, 255, 255, .25);

	}
	nav ul li a:hover { background-color: rgba(255, 255, 255, .25); width:auto;}

	nav ul ul { background: none; }

	nav ul ul li a { margin-left: 30px; padding: 6px 20px 6px 20px;}
	nav ul ul ul li a { margin-left: 60px }

	nav a[aria-haspopup="true"]::after { display: none; }



}


@media screen and (max-width: 425px) {

	/* Header */
	header { height: 110px; background-image: url(../images/banner_425.jpg); }
	header a.logo { 
		height: 70px; 
		background-size: 425px 110px; 	
	}

	header div.hero { position:relative; top: 66px;  left:80px;  width:300px; text-align: center;}
	header div.hero h1 { font-size: .9em;  padding:0px; margin:0 0 4px 0;}
	header div.hero h1::before { 
	top: 3px; left: -1px;
	}
	header div.hero a.btn { padding: 2px 20px; font-size: .8em; }
	
	

	/* Section - How To */
	
	section.how-to aside div.content { padding: 10px 20px 10px 20px; text-align:center; margin: 0px;}
	section.how-to aside div.content img { width: auto; height: 150px; position: static; }
	section.how-to blockquote { margin: 10px 10px 0 10px; width: auto; right: 0px;}

	

}


@media screen and (max-width: 410px) {

	/* Header */
	header { height: 110px; background-image: url(../images/banner_410.jpg); }
	header a.logo { 
		height: 70px; 
		background-size: 300px 110px; 	
	}

	header div.hero { position:relative; top: 66px;  left:10px;  width:300px; text-align: center;}
	header div.hero h1 { font-size: .9em;  padding:0px; margin:0 0 4px 0;}
	header div.hero h1::before { 
	top: 3px; left: -1px;
	}
	header div.hero a.btn { padding: 2px 20px; font-size: .8em; }
	
	

	/* Section - How To */
	
	section.how-to aside div.content { padding: 10px 20px 10px 20px; text-align:center; margin: 0px;}
	section.how-to aside div.content img { width: auto; height: 150px; position: static; }
	section.how-to blockquote { margin: 10px 10px 0 10px; width: auto; right: 0px;}

	

}