* {
	box-sizing: border-box;
	-webkit-appearance: none;
	text-rendering: auto;
	border-radius: 0;
}

html {
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
	font-family: 'Avenir', sans-serif;
}

a {
	text-decoration: none;
	cursor: pointer;
}

::selection {
	background: rgba(0, 0, 238, 1);
	color: #FFFFFF;
}

::-moz-selection {
	background: rgba(0, 0, 238, 1);
	color: #FFFFFF;
}

::placeholder {
	color: rgba(0, 0, 0, 0.5);	
}

input:focus,select:focus,textarea:focus,button:focus {
	outline: none;
}

input, textarea {
	border-radius: 0;
}

img { border: none; }

/* -------------------- HEADERS -------------------- */

#header {
	display: flex;
	align-items: flex-end;
	padding: 0 50% 2vw 4vw;
	min-width: 100%;
	height: 48vw;
	width: 100%;
/* */
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

#title {
	display: block;
/* */
	text-transform: uppercase;
	font-family: 'SwiftNeue', sans-serif;
	font-size: 5vw;
	line-height: 0.9;
	color: #FFFFFF;
}

#author {
	display: block;
	margin: 1vw 0 0 0.2vw;
/* */
	font-family: 'SFMono', monospace;
	font-weight: 300;
	font-size: 1vw;
	color: rgba(255, 255, 255, 0.5);
}

#strip {
	display: block;
	height: 15vw;
	width: 100%;
/* */
	background: url(../img/strip.jpg) no-repeat center center;
	background-size: cover;
}

/* -------------------- BLOG -------------------- */

.pad {
	margin-top: 1vw;
}

#blog {
	position: absolute;
	width: 58vw;
	right: 8vw;
	top: 51vw;
}

#blog p {
	margin-bottom: 1vw;
/* */
	letter-spacing: .02vw;
	font-family: 'Swift', sans-serif;
	font-size: 1.7vw;
	line-height: 1.6;
	color: #333333;
}

#blog p a {
	display: inline-block;
/* */
	border-bottom: 1px solid rgba(0, 0, 238, 1);
	color: #000000;
}

#blog p a:after {
	content: " \2318\FE0E";
}

#blog p a:hover {
	color: rgba(0, 0, 238, 1);
}

.subtitle {
	text-transform: uppercase;
	font-family: 'SwiftNeue', sans-serif;
	font-size: 3.5vw;
	color: #000000;
}

.subtitle:hover {
	color: rgba(0, 0, 238, 1);
}

.divider {
	margin-bottom: 5vw;
	display: block;
	height: 0.5vw;
	width: 10vw;
/* */
	background: #EEEEEE;
}

.start {
	padding: 0 0.5vw;
/* */
	text-transform: uppercase;
	font-family: 'Avenir', sans-serif !important;
	font-weight: 700 !important;
/* */
	background: rgba(0, 0, 238, 1) !important;
	color: #FFFFFF !important;
}

.pause {
	text-transform: uppercase;
	font-family: 'SwiftNeue', sans-serif !important;
	font-size: 3vw !important;
	color: #000000 !important;
}

.quote {
	padding-left: 2vw;
        margin: 2vw 5vw 2vw 1vw;
/* */
        font-style: italic !important;
        font-weight: 500 !important;
	font-size: 1.5vw !important;
        color: #777777 !important;
/* */
	border-left: 1vw solid #EFEFEF;
}

.cited {
	padding-left: 2vw;
        margin: 2vw 5vw 2vw 1vw;
/* */
	font-family: 'Avenir', sans-serif !important;
        font-style: normal !important;
        font-weight: 300 !important;
	font-size: 1.2vw !important;
        color: rgba(0, 0, 238, 1) !important;
/* */
	border-left: 0.5vw solid #EFEFEF;
}

.code {
	display: block;
	padding: 2vw 3vw;
/* */
	font-family: 'SFMono', monospace !important;
	font-weight: 100 !important;
	font-size: 1.2vw !important;
	line-height: 1.5 !important;
	color: #FFFFFF !important;
/* */
	border-radius: 0.5vw;
	background: #222222;
}

.embed {
	width: 100%;
}

#end {
	display: block;
	margin-top: 1vw;
	padding: 3vw 3vw 3vw 12vw;
/* */
	font-family: 'Avenir', sans-serif;
	font-size: 1.7vw;
	line-height: 1.5;
	color: #FFFFFF;
/* */
	background-color: rgba(0, 0, 238, 1);
	background-image: url(../img/heart.svg);
	background-position: 4vw center;
	background-repeat: no-repeat;
	background-size: 5vw 5vw;
}

/* -------------------- PAGE -------------------- */

#page {
	position: absolute;
	width: 58vw;
	right: 8vw;
	top: 16.5vw;
/* */
	font-weight: 300;
	font-size: 1.5vw;
	line-height: 1.5;
	color: #000000;
}

.lnk {
	display: inline-block;
/* */
	border-bottom: 1px solid rgba(0, 0, 238, 1);
	color: #000000;
}

.lnk:after {
	content: " \2318\FE0E";
}

.lnk:hover {
	color: rgba(0, 0, 238, 1);
}

.section {
	display: block;
	padding-top: 0.5vw;
/* */
	text-transform: uppercase;
	font-family: 'SwiftNeue', sans-serif;
	font-size: 3vw;
	color: #000000;
/* */
	background: linear-gradient(135deg, #CCCCCC 0%, #CCCCCC 100%) no-repeat;
	background-size: 7vw 0.5vw;
	font-weight: 700;
}

.indent {
	margin-left: 2vw;
}

.break {
	display: block;
	height: 4vw;
}

.foot {
	display: block;
	height: 8vw;
}

/* -------------------- SERVICES -------------------- */

.question {
	margin-bottom: 3vw;
/* */
	font-weight: 500;
	font-size: 2.2vw;
	line-height: 1.3;
	color: #888888;
}

.service {
	display: block;
/* */
	font-weight: 300;
	font-size: 1.6vw;
	line-height: 1.7;
}

.heading {
	display: block;
	margin-bottom: 0.3vw;
/* */
	font-weight: 700;
	font-size: 1.5vw;
	color: rgba(0, 0, 238, 1);
}

.prodpic {
	float: left;
	margin: -2vw 0 0 -15vw;
	display: inline-block;
	height: 12vw;
	width: 12vw;
/* */
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 12vw 12vw;
}

.prodname {
	display: block;
/* */
	font-family: 'SFMono', monospace;
	font-size: 3vw;
	color: #999999;
}

.product p {
	display: block;
	margin-top: 0.5vw;
	width: 75%;
/* */
	font-size: 1.5vw !important;
	color: #999999;
}

/* -------------------- LEADERSHIP -------------------- */

.details {
	display: block;
	min-height: 12vw;
	padding: 2vw 0 0 15vw;
	margin-bottom: 4vw;
}

.details p {
	font-size: 1vw;
	color: #222222;
}

.fullname {
	display: block;
/* */
	font-weight: 100;
	font-size: 2.5vw;
	line-height: 1.2;
	color: rgba(0, 0, 238, 1);
}

.position {
	display: block;
/* */
	text-transform: uppercase;
	font-weight: 300;
	font-size: 0.7vw;
	line-height: 1;
	color: #999999;
}

.library {
	display: block;
	margin-top: 1.5vw;
	width: 75%;
/* */
	font-weight: 300;
	font-size: 0.8vw;
	line-height: 1.5;
	color: #999999;
}

.library a {
	color: #777777;
	font-weight: 700;
}

.photo {
	float: left;
	margin: -2vw 0 0 -15vw;
	display: inline-block;
	height: 12vw;
	width: 12vw;
/* */
	border-radius: 50%;
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 12vw 12vw;
}

/* -------------------- PRIVACY -------------------- */

.privacy {
	margin-bottom: 4vw;
	width: 95%;
/* */
	font-weight: 300;
	font-size: 2.5vw;
	line-height: 1.4;
/* */
	color: rgba(0, 0, 238, 1);
}

/* -------------------- MESSAGING -------------------- */

#premier {
	display: none;
}

#message {
	width: 100%;
	height: 15vw;
/* */
	font-family: 'SFMono', monospace;
	font-weight: 100;
	font-size: 1.5vw;
	line-height: 1.5;
	color: rgba(0, 0, 238, 1);
/* */
	border: 1px solid #CCCCCC;
	resize: none;
}

#connect {
	width: 49%;
	height: 3.5vw;
	padding: 0.5vw 1vw;
/* */
	font-family: 'SFMono', monospace;
	font-weight: 100;
	font-size: 1.3vw;
	line-height: 3.5vw;
	color: rgba(0, 0, 238, 1);
/* */
	border: 1px solid #CCCCCC;
	resize: none;
}

#submit {
	float: right;
	width: 50%;
	height: 3.5vw;
	padding: 0 0.5vw 0.2vw 0.5vw;
/* */
	font-weight: 700;
	font-size: 1.5vw;
	color: rgba(0, 0, 238, 1);
/* */
	border: 1px solid rgba(0, 0, 238, 1);
	background: none;
}

#submit:hover {
	cursor: pointer;
	background: rgba(0, 0, 238, 1);
	color: #FFFFFF;
}

#count {
	position: absolute;
	right: 1vw;
	top: 30vw;
/* */
	text-align: right;
	font-weight: 700;
	font-size: 1vw;
	line-height: 1.2;
	color: rgba(0, 0, 238, 1);
}

/* -------------------- NAVIGATION -------------------- */

.mob {
	display: none;
}

#menu {
	display: block;
	position: absolute;
	padding-top: 3vw;
	width: 22vw;
	left: 4vw;
/* */
	font-weight: 300;
	font-size: 1.2vw;
	line-height: 1.5;
	color: #777777;
}

.stky {
	position: fixed !important;
	top: 0 !important;
}

.nav {
	display: block;
	padding: 0.5vw 1vw;
	margin-bottom: 1vw;
/* */
	font-weight: 300;
	font-size: 1.2vw;
	line-height: 1;
	color: #222222;
}

.nav:hover {
	font-weight: 700;
}

.sel {
	background: linear-gradient(135deg, #0000EE 0%, #0000EE 100%) no-repeat;
	background-size: 0.5vw 100%;
	font-weight: 700;
}

.soc {
	margin-bottom: 4vw;
	height: 1.4vw;
}

#twt {
	margin-bottom: 0.1vw;
	display: inline-block;
	height: 90%;
	width: 1.5vw;
/* */
	background: url(../img/twt.svg) no-repeat top left;
	background-size: contain;
	opacity: 0.25;
}

#twt:hover {
	opacity: 0.45;
}

#you {
	margin: 0 0 0.1vw 1vw;
	display: inline-block;
	height: 90%;
	width: 1.8vw;
/* */
	background: url(../img/you.svg) no-repeat top left;
	background-size: contain;
	opacity: 0.25;
}

#you:hover {
	opacity: 0.45;
}

#ptn {
        margin-left: 1.2vw;
        display: inline-block;
        height: 100%;
        width: 4.2vw;
/* */
        background: url(../img/ptn.svg) no-repeat top left;
        background-size: contain;
        opacity: 0.25;
}

#ptn:hover {
        opacity: 0.45;
}

#rss {
	margin: 0 0 0.1vw 1.2vw;
	display: inline-block;
	height: 90%;
	width: 1.5vw;
/* */
	background: url(../img/rss.svg) no-repeat top left;
	background-size: contain;
	opacity: 0.25;
}

#rss:hover {
	opacity: 0.45;
}	

/* -------------------- RESPONSIVE MOBILE -------------------- */

@media only screen
and (orientation: portrait) {

	#header {
		padding: 0 35% 2vw 4vw;
	}

	#title {
		font-size: 7vw;
	}

	#author {
		font-weight: 700;
		font-size: 2vw;
	}

	#blog {
		padding-bottom: 5vw;
		width: 84vw;
		top: 53vw;
	}

	#blog p {
		font-size: 3.5vw;
	}

	.subtitle {
		font-size: 6vw;
	}

	.pause {
		font-size: 4vw !important;
	}

	.quote {
        	margin: 5vw 5vw 5vw 1vw;
		font-size: 3.5vw !important;
	}

	.cited {
        	margin: 5vw 5vw 5vw 1vw;
		font-size: 2vw !important;
	}

	.code {
		font-size: 2vw !important;
	}

	#end {
		font-size: 2.7vw;
		padding: 3vw 3vw 3vw 14vw;
		background-position: 4.5vw center;
		background-size: 6vw 6vw;
	}

	#page {
		top: 20vw;
		width: 84vw;
		font-size: 3vw;
	}

	#menu {
		display: none;
	}

}

/* -------------------- RESPONSIVE HIRES -------------------- */

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

	#blog p {
		font-size: 40px;
	}

	.subtitle {
		font-size: 50px;
	}

	.pause {
		font-size: 50px !important;
	}

	.quote {
		font-size: 40px !important;
	}

	.cited {
		font-size: 30px !important;
	}

	.code {
		font-size: 30px !important;
	}

	#page {
		font-size: 50px;
	}

}

/* -------------------- PRINT -------------------- */

@media print {

	body {
		background: #FFFFFF;
	}

	#header, #menu {
		display: none;
	}

	#blog, #page {
		width: 90%;
		left: 5%;
		top: 0;
	/* */
		font-weight: 100;
		font-size: 1vw;
		line-height: 1.3;
	}

	.subtitle {
		font-size: 2vw;
	}

}