/* MOBILE FIRST LAYOUT */
/* Copyright a.buckley */

/* RESET */
html, body, header, nav, section, footer, p, h1,h2 {
	margin:0;
	padding:0;
}
header, nav, main, footer, aside, #share {
	padding:1rem 2rem 0 2rem;
}
* {
   box-sizing: border-box;
 }

/* CORE */
html {
	font-family: sans-serif;
	color:#fff;
	font-size:1em;
}

body {
	min-height:100vh;
}

a {
	color:#fff;
}
a:hover {
	color:#e7e7e7;
	text-decoration:underline;
}
h2 {
	margin-bottom:.3em;
}



/* HEADER */
header {
	padding:.5rem 0 0 .75rem;
}
header h1 img {
	width:60px;
	height:auto;
	margin:.5rem;
}

/* NAVIGATION */
nav {
	padding-right:0;
	text-align:right;
}
	nav a:first-child img {
		width:70px;
		height:auto;
		float:right;
		position: relative;
		z-index: 99;
	}

	nav ul {
		display:none;
		clear:right;
		list-style: none;
		background:#fff;
		padding:70px 0 0 0;
		position: absolute;
		top:0;
		right:0;
		z-index:98;
		width:100vw;
		height: 90vh;
		margin:0;
	}

	nav > a:last-child {
	    position: absolute;
	    right: 0;
	    top: 0;
	    z-index: 99;
	    display: none;
	    text-decoration:none;
	    font-size:.5rem;
	    text-transform: uppercase;
	    width:110px;
	    height:80px;
	    text-align: left;
	}

	nav > a:last-child img {
		width:30px;
		margin-top:30px;
	}

	nav picture:active + ul, nav ul:hover, nav a:focus + ul,
	nav picture:active ~ a, nav a:focus ~ a {
		display: block;
	}

	nav ul li {
		color:#c6c6c6;
		padding:.5em 1em;
		border-bottom: 1px solid #f1f1f2;
		text-align: center;
	}

	nav ul a {
		text-decoration: none;
		color:#888;
		display: inline-block;
		padding:.2em;
	}

	nav ul span:active {
		display: none;
	}

/* MAIN - OTHER */
body.no-aside main {
	text-align:left;
	min-height: 60vh;
}

body.no-aside.error main {
	text-align:center;
}

body.no-aside main p {
	margin-bottom:.5rem;
}



/* MAIN - ARTICLE */
section {
	margin:2.5rem 0;
}


article, h2 {
	font-family: CrimsonText, serif;
    letter-spacing: .1rem;	
}
article {
	text-align: center;
    margin:0;
}
	article p {
		font-size:2.75rem;
		font-weight: 700;
		line-height: 120%;
	}
	article p:before {
	   content: "\201C";
	}
	article p:after {
	   content: "\201D";
	}
		article.quote-s p {
			font-size:2.5rem;
		}
		article.quote-m p {
			font-size:2.4rem;
		}
		article.quote-l p {
			font-size:2.3rem;
		}

		article.quote-xl p {
			font-size:2rem;
		}
	article address {
		font-weight: 400;
		font-size:1.3rem;
		margin:1rem;
	}
	article address a {
		text-decoration:none;
		vertical-align:super;
		font-size:1rem;
	}
	article address:before {
		content: "\2014 \2002";
	}

	body.no-aside article p {
		font-size:1.15rem;
	}

	body.no-aside article address {
		font-size:.85rem;
	}

/* Ensuring only the first displays to help prevent flashes */
/* Every sibling thereafter will be hidden */
main section article ~ article,
#share > .twitter ~ .twitter,
#share .facebook ~ .facebook,
#share > .link ~ .link {
    display: none !important;
}


/* ASIDE */
aside {
	background-color:#00000025;
	text-align:center;
	padding:1rem 0 4rem 0;
	margin-top:1rem;
	margin-bottom:-3.5rem;
	display: grid;
	align-content:center;
}

	#ad1, #ad2 {
		height:50px;
		width:320px;
		margin:auto;
	}

	#ad1 {
		margin-bottom:.5rem;
	}

/* Social */
	#share .share {
		display: inline-block;
		margin:.2rem;
		width:76px;
		height:28px;
		border-radius:5px;
		overflow:hidden;
	}
		/* reset facebook offset */
		#share .share span, #share .share iframe {
	  		vertical-align: text-top !important;

		}

		#share .share.facebook {
			background:#1877f2;
		}
		#share .share.twitter {
			background:#000;		
		}
		#share .share.link {
			background:#005EB9;
		}


/* FOOTER */
footer {
	text-align:center;
	font-size:.75rem;
}

body.no-aside footer {
	font-size:.55rem;
}


/* Background Color Guide */
body.no-aside {
	background-color:#607d8b;
}
body.no-aside.error {
	background-color:#ff5722;
}
body, body.qmd-e0, body.qmd-e12 {
	background-color:#000000;
}
body.qmd-e1 {
	background-color:#FF0000;
}
body.qmd-e2 {
	background-color:#FF8000;
}
body.qmd-e3 {
	background-color:#FFBA00;
}
body.qmd-e4 {
	background-color:#88AB23;
}
body.qmd-e5{
	background-color:#117911;
}
body.qmd-e6 {
	background-color:#00ACFE;
}
body.qmd-e7 {
	background-color:#2D5DEE;
}
body.qmd-e8 {
	background-color:#9400D3;
}
body.qmd-e9 {
	background-color:#C05B9F;
}
body.qmd-e10 {
	background-color:#AF5021;
}
body.qmd-e11 {
	background-color:#808080;
}

/* Background Nav Color Guide */
body.qmd-e1 nav li a{
	color:#FF0000;
}
body.qmd-e2 nav li a{
	color:#FF8000;
}
body.qmd-e3 nav li a {
	color:#FFBA00;
}
body.qmd-e4 nav li a {
	color:#88AB23;
}
body.qmd-e5 nav li a {
	color:#117911;
}
body.qmd-e6 nav li a {
	color:#00ACFE;
}
body.qmd-e7 nav li a {
	color:#2D5DEE;
}
body.qmd-e8 nav li a {
	color:#9400D3;
}
body.qmd-e9 nav li a {
	color:#C05B9F;
}
body.qmd-e10 nav li a {
	color:#AF5021;
}
body.qmd-e11 nav li a {
	color:#808080;
}



/* LAYOUT */

header {
	grid-area:header;
}

nav {
	grid-area:nav;
}
main {
	grid-area:main;
}

aside {
	grid-area:aside;
}

footer {
	grid-area:footer;
}
#share {
	grid-area:share;
	text-align: center;
}


body {
	display:grid;
	grid-template-columns: 4fr 4fr 4fr;
	grid-template-areas:"header share nav"
						"main main main"
						"aside aside aside"
						"footer footer footer";
}

body.no-aside {
	grid-template-areas:"header share nav"
						"main main main"
						"footer footer footer" !important;
}


/* MEDIA QUERIES */
@media screen and (min-width: 768px) {
	nav img {
		width:75px;
		margin-right:1em;
	}

	nav > a:last-child {
		width:140px;
		margin-right:.1rem;
	}

	nav > a:last-child img {
		margin-top:1.3rem;
	}	

	header {
		padding:.75rem 0 0 .75rem;
	}

	header h1 img {
		width:200px;
		margin:0;
	}

	footer {
		font-size:.5rem;
	}	

	#share {
		text-align:right;
		min-width:35vw;
		padding:1.4rem 0 0 0;
	}

	#share img, #share .share {
		margin-left:.2rem;
		float:right;
	}
	#share .share.link img {
		margin-left:0rem;
	}
}


@media screen and (min-width: 768px) {
	html {
		font-size:1.5em;
	}

	body {
		grid-template-areas:"header header share"
							"main main main"
							"aside aside aside"
							"footer footer footer";
	}

	nav {
		position: absolute;
		right:0;
	}

	#share {
		margin-right:120px;
	}

	#ad1, #ad2 {
		height:90px;
		width:728px;
	}	

}

@media screen and (min-width: 1300px) {
	html {
		font-size:2em;
	}

	header h1 img {
		width:350px;
	}	

	header {
		padding:1.25rem 0 0 1.25rem;
	}	

	body {
		grid-template-areas:"header share aside"
							"main main aside"
							"footer footer aside";
	}

	aside {
		margin:0;
		padding-top:120px;
	}

	footer {
		margin:0;
		padding:.8rem;
	}

	#ad1, #ad2 {
		height:250px;
		width:300px;
	}		
}

@media screen and (min-width: 1920px) {
	html {
		font-size:2.5em;
	}

	footer {
		font-size:.4rem;
	}

	#ad1 {
		height:600px;
		width:300px;
	}
	#ad2 {
		height:250px;
		width:300px;
	}	
}