@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap');
@import url("https://use.typekit.net/dls6xmn.css");
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400,400italic);

h1, h2, h3, h4, h5 { font-weight: 300; margin: 0; }

a { text-decoration: none; color: #131416; text-decoration: underline;}

p { margin: 0; }

html, body { height: 100%; }

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font-family: 'Work Sans', sans-serif;
	font-weight: 400;
	color:#131416;
}



/* START */
.start .journal { position:absolute;
	top:34px;
	left:36px;
	text-align:right;
	text-transform:uppercase;
	font-weight:500;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:1.6px;
	color:#7F8689;
}
	.start .journal:hover { color:#475054; }

.start .links {
	position:absolute;
	top:26px;
	right:36px;
}
	.start .links a {
		display:block;
		width:28px;
		height:28px;
		float:left;
		text-decoration: underline;
		margin-left:12px;
	}
	.start .links a:nth-child(1) { background:url(assets/twitter.jpg); }
	.start .links a:nth-child(2) { background:url(assets/dribbble.jpg); }
	.start .links a:nth-child(3) { background:url(assets/linkedin.jpg); }
	.start .links a:nth-child(4) { background:url(assets/instagram.jpg); }

.start .logo {
	display:block;
	max-width:148px;
	width:94%;
	margin:auto;
	margin-top:120px;
}

.start .role {
	display:block;
	max-width:403px;
	width:86%;
	margin:auto;
	margin-top:60px;
}

.start h2 {
	width:98%;
	margin:auto;
	margin-top:40px;
	font-size:16px;
	text-align:center;
	line-height: 1.5;
}

.start .disclaimer-wrapper {
	text-align:center;
}
	.start .disclaimer {
		display: inline-block;
		margin-top:36px;
		padding:16px;
		background: #F6F7F8;
		font-size:14px;
		text-align:center;
		line-height: 1.5;
		color: #333;
		border-radius: 6px;
	}

.work-and-story {
	width:225px;
	height:43px;
	margin:auto;
	margin-top:44px;
	background:url(assets/work-and-story.jpg);
	cursor:pointer;
	transition:0.2s;
}
.work-and-story:hover { opacity:0.5; }



/* SECTION */
.section {
	font-size:18px;
}

.section h3 {
	font-size:20px;
	font-weight:700;
	letter-spacing:15px;
	text-transform:uppercase;
	margin-bottom:30px;
	color:#333;
}

.section p {
	line-height:1.65;
}

.section .caption {
	text-transform:uppercase;
	font-size:12px;
	font-weight:400;
}



/* ENDURANCE */
#endurance {
	width:100%;
	margin-top:70px;
	padding:60px 0;
	background:url(assets/endurance-background.svg);
	background-size:cover;
	background-position:center;
}

	#endurance p {
		max-width:600px;
		width:94%;
		margin:auto;
		text-align: center;
		color:#FFF;
	}

	#endurance .icons {
		display:block;
		max-width:601px;
		width:90%;
		margin:auto;
		margin-top:50px;
	}

	#endurance .device {
		display:block;
		max-width:1073px;
		width:94%;
		margin:auto;
		margin-top:60px;
	}

	#endurance .caption {
		margin-top:30px;
		text-align:center;
		color:#245768;
	}



/* EXPLORE */
#explore .wrapper {
	max-width:900px;
	width:94%;
	margin:auto;
	padding-top:120px;
	padding-bottom:40px;
}
	#explore .text {
		float:right;
		width:400px;
	}
		#explore h3 {
			padding-top:280px;
		}

		#explore .caption {
			margin-top:50px;
			color:#AFB9BE;
		}

	#explore .design {
		display:block;
		float:left;
		max-width:477px;
		width:100%;
	}



/* PASSENGER */
#passenger {
	width:100%;
	height:600px;
	background:url(assets/everest.jpg);
	background-size:cover;
	background-position:center;
}
	#passenger .wrapper {
		max-width:906px;
		width:94%;
		margin:auto;
	}

	#passenger .text {
		float:left;
		max-width:400px;
		width:90%;
	}
		#passenger .text h3 {
			margin-top:100px;
			color:#DF3D52;
		}
			#passenger h3 span {
				font-family:"Crimson Text", sans-serif;
				font-style:italic;
				font-size:18px;
				color:#40648A;
				text-transform:lowercase;
				letter-spacing:0;
				position:relative;
				top:-6px;
				left:-6px;
				font-weight:normal;
			}

		#passenger .text p {
			margin-top:26px;
			color:#FFF;
		}
			#passenger .text p span { font-style:italic; }

		#passenger .text .caption {
			margin-top:50px;
			color:#40648A;
		}

	#passenger .design {
		display:block;
		float:right;
		max-width:368px;
		width:94%;
		margin-top:-30px;
		border-radius:3px;
		box-shadow:0 30px 60px rgba(0,0,0,0.5);
	}



/* RECORDS */
#records img {
	width:90%;
	max-width:966px;
	display:block;
	margin:auto;
	margin-top:120px;
}

#records .caption {
	width:100%;
	margin:auto;
	color:#CCC;
	text-align:center;
	margin-top:30px;
}



/* CODE */
#code {
	max-width:740px;
	width:86%;
	margin:auto;
	text-align:center;
	padding-top:100px;
	padding-bottom:80px;
}
	#code h3 {
		font-family:"Andale Mono", monospace;
		color:#333;
		text-transform:none;
		font-weight:normal;
		letter-spacing:0;
		font-size:26px;
	}
	#code p {
		margin-top:26px;
	}
		#code p span { font-style:italic; }



.line {
	display:none;
	width:100%;
	height:1px;
	margin-top:40px;
	background:#EEE;
}



/* ADVERDOSE */
#adverdose .wrapper {
	max-width:960px;
	width:94%;
	margin:auto;
}
	#adverdose .text {
		float:right;
		width:400px;
	}
		#adverdose h3 {
			padding-top:240px;
		}

		#adverdose .caption {
			margin-top:50px;
			color:#AFB9BE;
		}

	#adverdose .design {
		display:block;
		float:left;
		max-width:477px;
		width:90%;
	}


/* LETTERGLOW */
#letterglow .wrapper {
	max-width:960px;
	width:94%;
	margin:auto;
	padding-top:90px;
}
	#letterglow .text {
		float:left;
		width:400px;
	}
		#letterglow h3 {
			padding-top:130px;
		}
		#letterglow p {
			margin-top:26px;
		}
		#letterglow .caption {
			margin-top:50px;
			color:#AFB9BE;
		}
			#letterglow .caption span {
				text-transform:none;
			}

	#letterglow .design {
		display:block;
		float:right;
		max-width:477px;
		width:90%;
	}



/* OTHER */
#other {
	width:100%;
	margin-top:60px;
	background:#FBFBFB;
	padding-top:80px;
	padding-bottom:70px;
}
	#other .wrapper {
		max-width:960px;
		width:94%;
		margin:auto;
	}
		#other .wrapper div {
			width:440px;
		}
		#other .wrapper .left {
			float:left;
		}
		#other .wrapper .right {
			float:right;
		}
			#other .wrapper div img {
				display:block;
				margin:auto;
				width:100%;
			}
			#other .wrapper div .caption {
				margin-top:40px;
				text-align:center;
				color:#AAA;
			}



/* LIFE */
#life {
	max-width:960px;
	width:100%;
	margin:auto;
	padding:130px 0;
}
	#life img {
		display:block;
		float:left;
		max-width:399px;
		width:80%;
		margin:auto;
	}
	#life .text {
		float:right;
		width:500px;
		padding-top:20px;
	}
		#life .text p {
			margin-top:26px;
		}


/* GET IN TOUCH */
#get-in-touch {
	width:100%;
	background:#FBFBFB;
	padding:80px 0;
	text-align:center;
}
	#get-in-touch h3 {
		width:94%;
		margin:auto;
		color:#DF5769;
	}
	#get-in-touch p {
		max-width:600px;
		width:94%;
		margin:auto;
		margin-top:26px;
	}

	#get-in-touch .arrow {
		width:59px;
		height:14px;
		margin:auto;
		margin-top:60px;
		cursor:pointer;
		opacity:0.3;
		transition:0.2s;
		background:url(assets/arrow.png);
	}
	#get-in-touch .arrow:hover { opacity:1; }



@media only screen and (max-width: 960px) {
	.section h3 { position:relative; left:6px; }
	#explore { padding-bottom:0 !important; }
	#explore .text, #explore .design { float:none; margin:auto; text-align:center; }
	#explore .text { width:86%; }
	#explore .text h3 { padding-top:0; }
	#explore .caption { margin-top:30px; }
	#explore .design { margin-top:20px; }

	#passenger { height:auto; padding-bottom:50px; margin-top:-100px; }
	#passenger .text, #passenger .design { float:none; margin:auto; text-align:center; }
	#passenger .text { max-width:none; padding-top:0; }
	#passenger .text h3 { padding-top:80px; }
	#passenger .caption { margin-top:30px !important; }
	#passenger .design { margin-top:30px; }

	#adverdose { padding-top:70px; }
	#adverdose .text, #adverdose .design { float:none; margin:auto; text-align:center; }
	#adverdose .text { width:86%; }
	#adverdose .text h3 { padding-top:0; }
	#adverdose .caption { margin-top:30px; }
	#adverdose .design { margin-top:30px; }

	#letterglow { padding-top:30px; }
	#letterglow .text, #letterglow .design { float:none; margin:auto; text-align:center; }
	#letterglow .text { width:86%; }
	#letterglow .text h3 { padding-top:0; }
	#letterglow .caption { margin-top:30px; }
	#letterglow .design { margin-top:30px; }

	#other .wrapper div { float:none !important; max-width:440px; width:94%; margin:auto; }
	#other .wrapper div caption { margin-top:10px; }
	#other .wrapper .right { margin-top:60px; }

	#life { padding-top:60px; padding-bottom:50px; }
	#life img, #life .text { float:none; margin:auto; text-align:center; }
	#life .text { width:88%; }
	#life .text h3 { margin-top:20px; }
}



@media only screen and (max-width: 460px) {
	.start .journal { top:26px; left:24px; }
	.start .links { top:19px; right:20px; }
	.start .role { margin-top:40px; } 
	.start h2 { font-size:14px; margin-top:30px; } 

	.section { font-size:17px; }
	.section .caption { font-size:11px; }

	#explore .wrapper { padding-top:70px; }
	#explore h3 { padding-top:0px; }

	#endurance { padding-bottom:40px; }
	#endurance .icons { margin-top:30px; }
	#endurance .device { margin-top:30px; }
	#endurance .caption { margin-top:30px; }

	#records img { margin-top:40px; }

	#code { padding-top:50px; padding-bottom:0; }

	.line { display:block; }

	#adverdose { padding-top:50px; }
}



/* RETINA */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	.start .links a:nth-child(1) { background:url(assets/twitter@2x.jpg); background-size:100%; }
	.start .links a:nth-child(2) { background:url(assets/dribbble@2x.jpg); background-size:100%; }
	.start .links a:nth-child(3) { background:url(assets/linkedin@2x.jpg); background-size:100%; }
	.start .links a:nth-child(4) { background:url(assets/instagram@2x.jpg); background-size:100%; }
	.work-and-story { background:url(assets/work-and-story@2x.jpg); background-size:100%; }

	#endurance .icons { background:url(assets/endurance-icons@2x.png); background-size:100%; }

	#get-in-touch .arrow { background:url(assets/arrow@2x.png); background-size:100%; }
}



/* COOKIE LAW BAR */
.cookie-law-bar { width:100%; position:fixed; bottom:0; z-index:9999; padding-top:8px; padding-bottom:14px; background:rgba(0,0,0,0.75); text-align:center; color:#FFF; font-size:12px; }
	.cookie-law-bar .inner-wrapper { max-width:960px; width:95%; margin:auto; }
		.cookie-law-bar p { float:left; margin-top:11px; }
		.cookie-law-bar .button { float:right; width:60px; margin:auto; margin-top:5px; padding:6px; background:#333; cursor:pointer; border-radius:3px; }
		.cookie-law-bar .button:hover { opacity:0.75; }
		.cookie-law-bar .button:active { opacity:0.5; }
@media only screen and (max-width : 980px) {
	.cookie-law-bar { padding-bottom:12px; }
	.cookie-law-bar p, .cookie-law-bar .button { float:none; margin:auto; margin-top:10px; }
}