/* CSS Document for Screens */

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

/* font is from online google font library. set base font size for page in pixels then rest of fonts on site are set in ems */
body {font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #555; margin: 0; padding: 0;} 

/* Set maximum page width.  Auto margin for left and right magin centers page. */
#page {max-width: 1200px; margin: 0 auto; position: relative;}


/*Text */

h1 {margin: 0 0 1em; font-size: 2.8em; font-weight: 700;}
h2 {margin: 0 0 .5em; font-size: 1.6em; font-weight: 700; line-height: 1.1em;}
h3 {margin: 0 0 .5em; font-size: 1.3em; font-weight: 700;}
h4 {margin: 0 0 1.5em; font-size: 1.0em; font-weight: 700;}

p {margin: 0 0 1em 0;}

a {color: #007eff;}
a: visited {color: #65b1ff;}
/*sets text in hero area with a button */
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*/

header {height: 430px; background: #14b323 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 - this sets 3 colums in the asides content */
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: #456565; padding-top: 30px; padding-bottom: 30px; color: #fff;}

section.atmosphere article {padding:0 20px 0 515px; background: url(../images/groupexc.jpg) no-repeat 0 5px; min-height: 220px;}

/* Section How-To */
section.how-to {background-color: #CDD6C9; 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: -1px; left: 0;}

/* Navigation - set nav postion at top of page and as wide as parent div */
nav {
	background-color: rgba(0,0,0,.65);
	position: relative;
	padding: 50px 0 0 0;
	
}
/* use pseudo element to clear out floats */
nav::after {content:''; display: block; clear: both;}

nav a.mobile_menu {
	width: 32px; height: 32px;
	background: url(../images/icon_menu.svg) no-repeat 0 0;
	background-size: contain;
	position: absolute; top:22px; left: 50%; margin-left: -16px;
	display: none;
}

nav ul{list-style: none; margin: 0 0 0 0; padding: 0 0 0 0;}

/* top level hover state */
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;}
/* change color of inline block behind nave text */
nav ul li a:hover {background-color: #036303;}

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   elements */

/* only target ul list if it is imediate of child of nav element */
nav > ul {padding-left: 200px;}

/*set top level nav to float horizontally */
nav > ul > li {float: left;}

nav > ul > li > a {width:auto; padding: 10px 20px 15px 20px;}

/* check for aria-haspopup to add arrow to right in nav */
nav a[aria-haspopup="true"]::after {
	content:'';
	display: block; width: 0px; height: 0px;
	position: absolute;
	top: 16px; right: 15px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #fff;
}

/* now make arrow point down in nav */
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 for screen widths */

/* rules apply take effect to sceens upto 1000pixels */
@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;}	
	
}

/* rules apply take effect to sceens upto 825pixels */
@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;}
	
}
/* rules apply take effect to sceens upto 760pixels */
@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: 140px; left: 48%;}
	
	/*Section 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;}
	
}

/* rules apply take effect to sceens upto 625pixels */
@media screen and (max-width: 625px) {
	
	h1 {font-size: 1em;}
	h3 {margin-bottom: 0px;}
	a.btn {font-size: .9em;}
	
	/*Header */
	header {height: auto; min-height: 160px; background-image: url(../images/banner_625.jpg); background-position: left top; }
	header a.logo {
		width: 125px; height: 52px;
		left: 10px; top: 10px;
	}
	header div.hero {width: 300px; top: 85px; left: 130px;}
	header div.hero h1 {margin-bottom: 10px;}
	
	/* Section Main */
	/* Vertically stack the 3 asides */
	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: 50px 50px;
		background-position: 20px 5px;
	
	}
	
	/* Section - Atmosphere - Move Text Under the Image */
	section.atmosphere article {padding: 160px 20px 0px 0px; background-size: 300px auto; min-height: initial;}
	
	/* Section How-To */
	/*move images to left side of text */
	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: 30px; left: 0px;
	}
	
	section.how-to blockquote {
		margin: 0 20px 0 40px;
		width: 90%;
		padding: 1px 0px 20px 0px;
		position: relative;
	}
	
	section.how-to blockquote p.credit {margin-bottom: 0;}
	
	
	/*Navigation - set from absolute to static*/
	nav {padding: 50px 15px 20px 15px; background-color: #338D0B; height: 0px; overflow: hidden;}
	nav a.mobile_menu {display: block;}
	
	/* Define nav under 625 pixels */
	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: 6px 15px 6px 2px;
		border-bottom: 1px solid rgba(255,255,255,.25);
		
	}
	
	nav ul 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;}
	
	/*remove triangles from navigation*/
	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;}	
	
}
	
/* rules apply take effect to sceens upto 425pixels */
@media screen and (max-width: 425px) {

	/* Header */
		header {min-height: 125px; background-image: url(../images/banner_425.jpg); min-width: 330px;
		background-position: left bottom;
	}
	
	header a.logo {
	width: 126px; height: 26px; background: #14b323 background-image: url(../images/logo_small.svg);
	top: 15px;
	}
	
	header div.hero {width: 100%; left: 0px; top: 58px; 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;}
	
	/* Section - How-To */
	
	section.how-to aside div.content { padding: 140px 20px 20px 0px;}
	
	section.how-to aside div.content img {width: auto; height: 100px; top: 30px;}
	
	section.how-to blockquote {margin: 10px 40px 0 20px;}
	
	/* Nav */
	
	nav {padding-top: 30px;}
	nav a.mobile_menu {left: auto; right: 40px; top: 8px; margin-left: 0px;}
	
	/* Footer */
	
	footer::after {content:''; display: block; clear: both;}
	
	footer div.content a {
		display: inline-block; margin: 0 0 10px 0;
		float: left;
		clear: both;
	}	
	
}