/* CSS Document for Screens */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic, 700italic, 300,700');

body {
	font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #555;
	margin:0; padding:0;}
#page { max-width: 1200px; margin: 0 auto; position:relative; } 	
	
h1 {margin: 0 0 1em 0; font-size: 2.8em; font-weight:700;}
h2	{margin: 0 0 .5 em 0; font-size: 1.6em; font-weight:700; line-height:1.1em;}
h3	{margin: 0 0 .5 em 0; font-size: 1.3em; font-weight:700; }
h4	{margin: 0 0 1.5 em 0; font-size: 1em; font-weight:700; }

p { margin:0 0 1em 0;}
a { color: #007eff; }
a:visited {#65b1ff; }
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(0,0,0,.3); }

header {height: 430px; background: #cf0004 url(../images/banner_1200.jpg) no-repeat center bottom; 
	position:relative;}
header a.logo {
	z-index:1;
	position:absolute; 
	display:block; width: 160px; height:66px;
	background: url(../images/logo.svg) no-repeat 0 0; background-size:contain;
	top: 15px; left: 20px;
}
header a.logo span {display:none; }
header div.hero { position:absolute; width: 42%; top: 130px; left: 55%;}
header div.hero h1 { line-height: 1em; margin: 0 0 30px 0; color: #fff; }

/* Section - All*/
section { padding: 0 30px;}
section::after {content:''; display:block; clear: both; }
/*Section - Main */
section.main { margin-top: 20px; 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: 75px 75px; padding-top: 85px;}
section.main aside h3 a { color: #000; text-decoration:none;  }
section.main aside h3 a:hover { text-decoration:underline;}
section.main aside .content.trending { background-image: url(../images/icon_star.svg); }	 
section.main aside .content.find-it { background-image: url(../images/icon_marker.svg); }
section.main aside .content.tools { background-image: url(../images/icon_gear.svg); } 

/*section - Atmosphere*/

section.atmosphere {background-color: #cc6633; padding-top:30px; padding-bottom: 30px; color: #fff; }
section.atmosphere article { padding: 0 20px 0 515px; background: url(../images/photo_lounge.jpg) 
 no-repeat 0 5px; min-height: 220px;  }
 
/*Section How To */

section.how-to { background-color:#eee9d9; position:relative;}
section.how-to aside {width:30%; float:left; margin-right:10px;}
section.how-to aside .content {padding:30px 30px 20px 0; }
section.how-to aside .content img { display:block; margin-bottom: 15px; width:70%;}

section.how-to aside .content h4 { margin-bottom:0; }
section.how-to aside .content p  { margin-bottom:.5em;  } 
section.how-to aside .content a  { display:inline-block; color:#cc6633; font-weight:700;  }

section.how-to blockquote {
	margin:0; width: 32%; color:#444; background-color: #fff;
	position:absolute; bottom: 0; right:4%; }
	
section.how-to blockquote p {margin:30px 30px 20px 50px;}
section.how-to blockquote p.quote { font-style:italic; font-size:1.2em;  }  
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:-1; left:0;}	

/* Navigation */


nav {
	background-color: rgba(0,0,0,.65);
	position:absolute;
	top:0px; left:0px;
	padding:50px 0 0 0;
	width: 100%;
	} 
nav::after { content:''; display:block; clear:both;   }
nav ul { 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:#fff;
	padding:10px 20px;
	text-decoration:none;
	width:125px;
	position:relative;
}
nav ul li a:visited { color: #fff;  }
nav ul li a:hover { background-color: #6d 0911;  }
nav ul ul { position:absolute; top:100%; background-color:#2b0306; display:none;  }
nav ul ul li { position:relative;  }
nav ul ul ul { left:100%; top:0px;  }


/*Top Level*/
nav > ul { padding-left:200px;}
nav > ul >li {float:left;}	
nav > ul > li > a { width:auto; padding:10px 20px 15px 20px;  }

nav a[aria-haspopup="true"]::after {
	content:'';
	display:block;
	position:absolute;
	top:16px;
	right:15px;
	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:6px;
	 top:auto;
}


/* Footer*/
footer {font-size:.8em; margin:40px; color:#999;}
footer .content {display:inline;}
footer a {margin-left:30px; color:#777;}
footer a:visited {color:#777;  }
footer a:hover {color:#000;  } 


/* Media Queries  */

@media screen and (max-width: 1000px) {
	
	h1 {font-size:2.4em;}
/* Header */
header div.hero {left: 56% }
header div.hero h1 {margin-bottom:20px;

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

@media screen and (max-width: 825px) {
	h1 {font-size:2.2em;}

/* Header */
header {height:300px; background-image: url(../images/banner_825.jpg);}
header div.hero {top:120px; left: 48%; }

/*Section - Atmosphere */
section.atmosphere article { padding-left:325px; background-size:300px auto;}

/*Section  How To */
section.how-to blockquote p.quote {font-size:1.1em; line-height:1.2em;}
section.how-to blockquote p.credit {font-size:.85em;}
}
@media screen and (max-width: 760px) {
h1 {font-size:1.8em;}
h2 {font-size:1.4em;}
h3 {font-size:1.1em;}
a.btn {font-size:1em;}	

/* Header */

header a.logo {width:145px; height:60px;}
header div.hero {
	top:2px;
	left:277px;
}

/*Sectio - Main */
section.main {margin-top:10px; margin-bottom:10px;}
section.main aside div.content { background-size:55px 55px; padding-top:60px;}

/*Section  How To */
section.how-to aside div.content img {width:85%;}

/*Navigation */
nav {padding-top:80px;}
nav > ul {padding-left:10px;}

}
@media screen and (max-width: 625px) {
	h1 {font-size:1em;}
	h3 {margin-bottom:0px;}
	a.btn {font-size:.9em}
	/* Header */
	header {height:160px; background-image:url(../images/banner_625.jpg);
	background-position:left top;}
	
	/* Navigation */
	
	nav {position:static; width:auto; padding:20px 15px; background-color:#4b0a0c;}
	header a.logo {
		width:100%; height:66px;
		left:0px; top:0px;
		background-color:rgba(0,0,0,.65 );
		background-size:112px 46px;
		background-position:20px center;
		}
	header div.hero {width:300px; top:85px; left:130px;}
	header div.hero h1 {margin-bottom:10px;}	
	
	/*Section - Main */
	section.main aside {width:100%; float:none; text-align:left;}
	section.main aside div.content {
		margin:8px 20px 8px 0px;
		padding:5px 0px 10px 85px;
		background-size:50px 50px;
		background-position:20px 5px;
	}
	/* Section - Atmosphere */
	
	section.atmosphere article {padding:160px 20px 0px 0px; background-size:300px auto;
	min-height:initial;}
	
	/*Section - How To */
	section.how-to aside {width:100%; float:none; margin:0px; 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:30px; left:0px;
	}
	
	section.how-to blockquote {
		margin:0px 20px 0px 40px;
		width:90%;
		padding:1px 0px 20px 0px;
		position:relative;
	}
	section.how-to blockquote p.credit {
		margin-bottom:0px;}
		
	
	/*Navigation */
	nav {position:static; width:auto; padding:20px 15px; background-color:#4b0a0d;}
	
	nav ul, nav ul ul,nav ul ul ul{
		display: block; position:static;}
	nav > ul >li {float:none; margin-top:25px;}	
	nav ul li:hover {background:none;}
	
	nav lu li a {
		width:auto;
		display:block;
		margin:8px 10px;
		padding: 8px 15px;
		border:1px solid rgba(255,255,255,.25);
	}
	nav lu li a:hover {background-color:rgba(255,255,255,.2);
	}
	nav ul ul {background:none;}
	nav ul ul li a {margin-left:30px;}
	nav ul ul ul li a {margin-left:60px;}
	nav a[aria-haspopup="true"]::after {display:none;}

	/* Footer */
footer div.content { display:block; margin-top:15px; }

footer div.content a {margin: 0 20px 0 0; }


}	
	@media screen and (max-width: 425px) {
	/* Header */
	header {height:110px; background-image: url(../images/banner_425.jpg; }
	
	
		height:36px; background: rgba(0,0,0,.65) url(../images/logo_small.svg) no-repeat center center;
		background-size:126px 17px;
	}
	header div.hero { width:100%; left:0px; top:46px; text-align:center;}
	
	header div.hero h1 {font-size:1em; margin-bottom:10px;}
	
	header div.hero a.btn {padding:2px 30px; font-size:.8em;}
	
	  header div.hero a.btn span {display:none;}
	}