/* @override 
	http://ashp.land/main.css */

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

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*
	General
	=======
*/
html{
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-size: 5vmin;
	line-height: 1.5em;
	font-weight: 300;
}

body {
	word-wrap: break-word;
	background-color: #eee;
}

a, a:visited {
	text-decoration: none;
	color: hsl(130, 52.67%, 23.58%); /* base green */
	color: hsl(130, 52.67%, 43.23%); /* bright green */
}

strong {
	font-weight: 400;
}

em {
	font-style: italic;
}

h1{
	font-size: 2.625rem;
	font-weight: bold;
	font-family: 'Enriqueta', serif;
	line-height: 1;

}

section h1 {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 5vw;
	padding-right: 5vw;
}

h2 {
	font-family: 'Enriqueta', serif;
	font-size: 1.625rem;
	font-weight: bold;
	line-height: 1;
	padding-top: 1em;
	padding-bottom: 0.5em;
	padding-left: 5vw;
	padding-right: 5vw;
	color: hsl(130, 52.67%, 23.58%);
}

p {
	padding-bottom: 1em;
	padding-left: 5vw;
	padding-right: 5vw;
	line-height: 1.25em;
}

img{
	max-width: 100%;
}

h2 img {
	width: 1em !important;
	height: 1em;
/* 	padding-left: 5vw; */
}

li {
	margin-bottom: 0.5rem;
}

ol li{
	list-style:decimal;
	margin-left: 1.3rem;
}

ul li{
	list-style: square;
	margin-left: 1.3rem;
}

ol, ul{
	padding: 0 5vw 1em;
}

.horizontal-list {
	text-align: center;
	padding-left: 1em;
}

.horizontal-list li {
	display: inline-block;
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding-left: 0.2em;	
	font-size: 4.8vw;
}

.horizontal-list .fa {
	color: hsl(130, 52.67%, 23.58%);
}

.horizontal-list .selected {
	text-decoration: overline;
}

blockquote{
	background-color: #ddd;
	border-left: solid #aaa;
	border-left-width: 2.6vw;
	padding-top: 1em;
	margin-bottom: 1em;
	font-style: italic;

}

blockquote > *{
	padding-left: 2.4vw !important;
}

blockquote > footer{
	text-align: right;
	padding: 0 3rem 1em 0;
}

figure{
	margin-bottom: 1em;
}

figcaption{
	display: none;
}

.green{
	color: hsl(130, 52.67%, 23.58%); /* base green */
	color: hsl(130, 52.67%, 43.23%); /* bright green */
}

header {
	margin-bottom: 2rem;
}

#homeheader {
	margin-bottom: inherit;
}

nav {
	padding-top: 0.5em;
	position: fixed;
	top: 0;
	width: 100%;
	
}

nav ul {
	padding-bottom: 0;
}


#homeheader nav {
	position: inherit;
}


article{
	background-color: white;
	margin-bottom: 2rem;
	padding-top: 1rem;
}

section, nav{
	background-color: white;
	margin-bottom: 2rem;
	border-bottom: 2px solid hsl(130, 52.67%, 23.58%); /* dark green */
}


section article:last-child{
	margin-bottom: 0;
	border-bottom: none;
}

#stream{
	background-color: inherit;
}

#stream h2{
	background-color: white;
}

/*
	Post Formats
	============
*/	

article > h3:first-child{
	font-size: 1.625rem;
	line-height: 1;
	margin: 0 5vw 1rem;
	padding: 0;

}


/* Photo */

article > h3:first-child img{
	max-width: 100vw;
	margin-left: -5vw;
	margin-top: -5vw;

}

/* Links */


article > h3:first-child > .external_url{
	display: inline-block;
	padding-left: 5vw;
	padding-right: 5vw;
	text-decoration: underline;
	width: 90vw;
	margin-left: -5vw;
	padding-bottom: 1rem;
	font-weight: 700;

}

article > h3:first-child ~ blockquote{
	margin-top: -5vw;
}

/* Blog */

article h1{
	margin: 1rem 5vw 1em;
}

article img{
	max-width: 100vw;
	margin-left: -5vw;
}

article figure img{
	margin-left: 0;
}

article h2{
	border-bottom: 1px solid #aaa;
	padding: 0;
	margin:0 5vw 0.5em;
}



/*
	Footers
	=======
*/	
	
/* 	Index Footer */
	body>footer {
		margin: 0 auto 0;
		font-size: 0.6rem;
		text-align: center;
		color: hsl(130, 52.67%, 23.58%);
	}
	
	body>footer p {
		padding-bottom: 0;
	}
	

/* Article Footer */
	article > footer{
		padding-top: 1rem;
		border-top: 1px solid #aaa;
/* 		border-bottom: 1px solid #aaa; */
		margin-left: 5vw;
		margin-right: 5vw;
	}


/* Authour Footer */
	.p-author .u-photo{
		padding-right: 0.75rem;
		max-height: 3em;
		float: left;
	}
	
	article > footer{
		font-size: 1em;
		line-height: 1em;
	}
	
	article > footer a{
		display: block;
	}
	
	article > footer img {
		margin-left: 0;
		max-width: 3em;
		font-size: 1.25em;
	}


/*
	Index Header
	============
*/	
	header{
		background-color: white;
	}
	
	
	#info{
		margin: 0 auto;	
		padding: 1rem;
		font-size: 1.9em;
	}
	
	#info #subheaderWrapper {
		margin-top: 0.5em;
		margin-left: auto;
		margin-right: auto;
		/*width: 90%;*/		
	}
	
	#info img {
		display: inline-block;
		width: 3em;
		margin: 0;
		padding: 0;
		position: relative;
		top: 0.15em;
	}
	
	#info a, #info a:visited{
		color: inherit;
	}
	
	#info h1{
		font-size: 1.1em;
		line-height: 1;
		text-align: center;
	}
	
	#info ul{
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	#info li{
		text-align: right;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	
	#triangle-green {
		position: relative;
		display: inline-block;
		top: -0.45em;
		right: -1em;
		width: 0;
		height: 0;
		border-left: 1.8em solid transparent;
		border-right: 1.8em solid transparent;
		border-bottom: 3em solid hsl(130, 52.67%, 23.58%);
		
		/* Only displays over certain width (See size classes below) */
		display: none;
		
	}
	
	 
	#triangle-white {
		position: relative;
		display: inline;
		top: 0.32em;
		left:  -1.5em;
		width: 0;
		height: 0;
		border-left: 1.5em solid transparent;
		border-right: 1.5em solid transparent;
		border-bottom: 2.5em solid white;
		
		/* Only displays over certain width (See size classes below) */
		display: none;
		
	}
	
	
	

	
	
/* 	Apps Section */
	
	#apps {
		background-color: inherit;
	}
	
	#apps div {
		background-color: white;
		margin-bottom: 2rem;
		border-bottom: 2px solid hsl(130, 52.67%, 23.58%); /* dark green */
		padding-top: 1rem;
	}
	
	#apps div:last-child{
		margin-bottom: 0;
		border-bottom: none;
	}

	
	#apps h2 {
		border-bottom: 1px solid #aaa;
		padding-top: 0;
		padding-bottom: 0;
/* 		margin:0 5vw 0.5em; */
	}
	
	
	
	.appstore {
		margin-top: 1em;
		margin-left: auto;
		margin-right: auto;
		
	}
	
	.appstore > a > img {
		height: auto;
		width: 8em;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}	


/*@media only screen and (min-width: 375px){
	body{
		font-size: 3vm;
		/*line-height: 1.421em;*!/
	}
}




@media only screen and (min-height: 400px) and (min-width: 400px){
	html{
		font-size: 3vmin;
	}
}
*/

/*@media only screen (min-height: 354px){
	html{
		font-size: 3.2vmin;
		background-color: green;
	}
}*/


@media only screen and (min-width: 512px){

body{
	margin: 0 auto;
	max-width: 30em;
}

nav {
	max-width: 30em;
}

header {
	margin-bottom: 4em;
}

#triangle-green, #triangle-white {
	display: inline-block;
}

#info ul {
	padding-right: 0.5em;
}

.horizontal-list li {
	font-size: 1.5em;
}


#stream > h2{
	margin-left: 0;
	padding-left: 1rem;
	margin-bottom: 1rem;
}

article > h3:first-child{
	margin-left: 1rem;
	margin-right: 1rem;
}

article h1{
	margin: 1rem 1rem 1em;
}

article h2{
	margin:0 1rem 0.5em;
}

article img{
	width: 32rem;
 	margin-left: -2rem;
}

article  > h3:first-child img{
	width: 32rem;
	margin-top: -1.1rem;
	margin-left: -2rem;
}

article figure img{
	width: 32rem;
	margin-left: -1rem;
}

article > h3:first-child > .external_url{
	width: 28rem;
	margin-left: -1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

article > h3:first-child ~ div blockquote{
	margin-top: -1rem;
}

p {
	padding-left: 1rem;
	padding-right: 1rem;
}


h2 {
	margin-left: 1rem;
	margin-right: 1rem;
	
	padding-left: 0;
	padding-right: 1rem;
}

/*
h2 img {
	padding-left: 2rem;
}
*/

ol, ul{
	padding: 0 1.5rem 1em;
}

blockquote{
	width: 31rem;
	margin-left: -1rem;
	border-left-width: 1rem;
}

blockquote > *{
	padding-left: 1.5rem !important;
}

article > footer{
	margin-left: 1rem;
	margin-right: 1rem;
}

#info{
	margin-top: 2rem;
}

#info h1{
	font-size: 1.7em;
}



}


/* Breaks at (512 < width) && (354 < height < 512) */


@media only screen and (min-height: 512px) and (min-width: 512px){
	html{
		font-size: 3.2vmin;
	}
}

@media only screen and (min-height: 625px) and (min-width: 625px){
	html{
		font-size: 2.56vmin;
	}
}

@media only screen and (min-height: 800px) and (min-width: 800px){
	html{
		font-size: 2vmin;
	}
}

@media only screen and (min-height: 1100px) and (min-width: 1100px){
	html{
		font-size: 1.3vmin;
	}
}

@media only screen and (min-height: 1600px) and (min-width: 1600px){
	html{
		font-size: 1vmin;
	}
}

@media only screen and (min-height: 2200px) and (min-width: 2200px){
	html{
		font-size: 0.7272vmin;
	}
}

@media only screen and (min-height: 3000px) and (min-width: 3000px){
	html{
		font-size: 0.53vmin;
	}
}

@media only screen and (min-height: 4150px) and (min-width: 4150px){
	html{
		font-size: 22px;
	}
}










/*
@media only screen and (orientation: landscape) and (max-width: 736px){
		
	body {
		max-width: inherit;
	}
	
	header img {
		position: relative;
		left: 0;
		max-width: 56.34%;
	}
	
	#info{
		position: absolute;
		right: 0.25em;
		top: 30%;
		font-size: 0.85em;
		margin: auto 0;
	}
	
	
}
*/