/* GLOBAL : LAYOUT 
----------------------------------------------------------- */


html,
body,
#stage {
	height: 100%;
}


body {
	position: relative;
	background-color: #111;
	color: #FFF;
	font-family: "garamond-premier-pro-display","adobe-garamond-pro", "garamond-premier-pro", "Adobe Garamond Pro", "Adobe Garamond", "Times New Roman", serif;
	font-weight: normal;
	font-size: 1.625rem; /* 26 */
	line-height: 1.230769; /* 32 */	
}

	#stage {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		position: relative;
		max-width: 75rem; /* 1200 */
		padding-left: 3rem;
		padding-right: 3rem;
	}
	
		
		header {
			padding-top: 3rem;
			margin-bottom: 1.5rem; /* 24 */
			-webkit-flex: 1 0 auto;
			flex: 1 0 auto;
		}
		
			header::after {
				content: '\00a0';
				display: block;
				height: 0px;
				visibility: hidden;
			}
			
		section {
			padding-bottom: 1.5rem; /* 24 */
			-webkit-flex: none;
			flex: none;
		}
		
		footer {
			padding-bottom: 3rem;
			-webkit-flex: none;
			flex: none;
		}
		
		
		/* FX */
		
		header,
		section,
		footer {
			-webkit-transition: opacity 1.5s ease-out;
			transition: opacity 1.5s ease-out;
			opacity: 1;
		}
		
		.wf-loading header,
		.wf-loading section,
		.wf-loading footer {
			opacity: 0;
		}
	




/* GLOBAL : LINKS & COLORS
----------------------------------------------------------- */

a {
	color: currentColor;
	text-decoration: none;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
}

a:hover {
	opacity: .5;
}



::-moz-selection { background: #FFF; color: #111; }
::selection { background: #FFF; color: #111; }



/* GLOBAL : SVG ICONS & LOGO(S)
----------------------------------------------------------- */

svg {
	fill: currentColor;
}


/* SVG : ICONS */

svg.icon {
	display: inline-block;
	height: 1em;
	width: 1em;
	vertical-align: -0.15em;
}


/* SVG : LOGO */

svg.logo {
	display: inline-block;
	height: 1em;
	width: 8.895em;
	font-size: 1.125rem;
	vertical-align: baseline;
}


h1#logo strong {
	display: none;
}


/* GLOBAL : TYPO
----------------------------------------------------------- */

h1,
h2,
h3 {
	display: inline;
	font-size: 1em;
	font-weight: 500;
	letter-spacing: 0.025em;
	margin: 0;
}


section p,
footer p {
	font-style: italic;
	font-weight: 300;
	margin: 0;
	font-size: 1.5rem; /* 24 */
	letter-spacing: 0.025em;
	line-height: 1.33333333; /* 32 */
}





/* HEADER / SECTION / FOOTER
----------------------------------------------------------- */

/* Fix IOS Rendering Bug by using "important" */
/* https://css-tricks.com/forums/topic/weird-mobile-safari-font-face-problem-font-doubled-and-offset-to-the-left/ */

section h2,
footer h2 {
	font-weight: 500 !important;
	margin-right: .25em;
	letter-spacing: 0.03em;
}

section p,
footer p {
	display: inline;
}




/* TYPED FX
----------------------------------------------------------- */

.typed {
	display: inline;
}
	
	.typed-target {
		display: none;
	}
	
	.state-typed-done .typed-target,
	.state-typed-active .typed-target {
		display: inherit;
	}

	.typed-content {
		display: inline;
	}
	
		.typed-content p {
			display: inline;
			margin: 0;
		}
		
		.typed-content i {
			display: none;
		}




.typed-cursor {
	display: inline;
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}


.typed-cursor {
	display: none !important;
}

.state-typed-active .typed-cursor {
	display: inline !important;
}






/* MEDIA QUERIES
----------------------------------------------------------- */


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

	html {font-size: 120%;}
	
	#stage {
		padding-left: 3.5rem;
		padding-right: 3.5rem;
	}
	
	header {
		padding-top: 3.5rem;
	}
	
	footer {
		padding-bottom: 3.5rem;
	}
}


@media screen and (min-width: 1680px) and (max-width: 1919px) {

	html {font-size: 110%;}
	
}




@media screen and (max-width: 960px) {

	html {font-size: 95%;}
	
	#stage {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	
	.hyphenate {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
	}
	
	.typed-br {
		display: none;
	}
	
}


@media screen and (max-width: 720px) {

	html {font-size: 90%;}
	
	#stage {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	h3 {
		display: inline;
	}
	


}

@media screen and (max-width: 480px) {

	html {font-size: 80%;}
	
}