/* CSS Document for Screens */

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

@import url(https://fonts.googleapis.com/css?family=Nova+Square);

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

/* Text */

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

p { margin: 0 0 1em 0; }

a { color: #65961b; }
a:visited { color: #65961bf; }


/* Global */

a.btn{
	font-size:1.2em;
	font-weight: 700;
	text-decoration: none;
	color: #65961bf;
	border: 1px solid #65961b;
	padding: 4px 15px;
	transition: background-color .3s;
	background-color: rgba(255,255,255,.75);
}

a.btn:hover{
	background-color: rgba(255,255,255,.95); /* 0 red, 0 green, 0 blue, .2 alpha (i.e. transparency) */
}


/* Header */

header { 
	max-width: 600px;
	margin: 0 auto;
	display: block;	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: 50%;	top: 170px;	left: 45%	
}

header div.hero h1 {
	font-family: 'Nova Square', sans-serif; font-size: 2.5em; font-weight: 700;
	line-height: 1em;
	margin: 0 0 30px 0;
	color: #e76719;
}

/* Under Construction Flyer */

img.flyer { margin: 1.5em auto;	max-width: 600px; display: block; position: relative ;}




/* 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%;}
	header div.hero h1 {	margin-bottom: 20px; }
	
	/* 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: 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; }
	
}

@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; }
	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 0;
		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: 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 */
	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,.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); }
	
	header a.logo {
		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; }

	
	/* 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; }
	
	/* Footer */
	
	footer::after {	content:''; 	display: block;	clear: both; }
	
	footer div.content a { 
		display: inline-block;	margin: 0 0 10px 0;
		float: left;
		clear: both;
	
	}
	
}