/*
=========================================
	Base Styles
=========================================
*/

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	color: black;
	background-color: #050505;
	margin: 0;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden!important;
	overflow-y: visible!important;
	-webkit-text-size-adjust: 100%;
}

body.article {
	background-color: white;
}

body:after {
	visibility: hidden;
	height: 0;
	font-size: 0;
	content: 'mobile-portrait';
}

img.template {
	pointer-events: none;
}


/*
=========================================
	Master Layout Grid
=========================================
*/

.container {
	margin: 0 auto;
	background-color: none;
	}

.container-rel {
	position: relative;
	max-width: 1024px;
	margin: 0 auto;
}

/*
=========================================
	Global Styles
=========================================
*/


#hero {
	position: relative;
	padding: 0;
	margin: 0;
	height: initial;
	transition: opacity;
	width: 100%;
	overflow: hidden;
	background-color: #050505;
}

#hero-title {
	position: relative;
	opacity: 0;
	padding-bottom: 0;
	margin-top: 0;
	top: 20px;
	transition:	top 800ms cubic-bezier(.4,1,.5,1) 100ms,
							opacity 800ms cubic-bezier(.93,.68,.72,.88) 100ms;
}

#hero-title.show {
	top: 0;
	opacity: 1;
}

#scroll-label {
	position: relative;
	display: block;
	margin-top: 100px;
}

#scroll-label p {
	display: inline-block;
	color: rgba(255,255,255,0.4);
	margin-bottom: 0px;
}

#body-content {
	background-color: white;
}

.content-block:before {
	content: '';
	display: block;
	position: relative;
	width: 0px;
	height: 0px;
	margin-top: 0px;
}

.content-block {
	position: relative;
	text-align: center;
	top: 0px;
	overflow: hidden;
}

.hide {
	opacity: 0;
	top: 0px;
	transition: opacity 400ms ease-in-out 0ms,
							top 400ms ease-in 0ms;
}

.show {
	opacity: 1;
	top: 0px;
	transition: opacity 800ms ease-in-out 0ms,
							top 800ms ease-out 0ms;
}

.split-block {
	display: flex;
	flex-wrap: nowrap;
}

.split-block-image {
	min-width: 50vw;
	min-height: 50vw;
	background-color: #1D1D1D;
	background-color: #1a1a1a;
}

.split-block-copy {
	min-width: 50vw;
	min-height: 50vw;
	background-color: white;
}

.section-divider {
	display: flex;
	min-height: 100px;
}

.section-divider h3 {
	margin: auto;
	text-align: center;
}

#footer {
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

/*
=========================================
	Section Coloring
=========================================
*/

div .black-bg {
	background-color: #050505;
}

div .white-bg {
	background-color: #FFFFFF;
}

/*
=========================================
	Mobile Portrait
=========================================
*/

.container {
	padding-left: 24px;
	padding-right: 24px;
}

.container-rel, {
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 260px;
}

/* ============================ */

#hero .container {
	padding-bottom: 10vw;
}

#hero-title {
	/* padding-top: 34vw; */
	/* padding-bottom: 6vw; */
	/* padding-top: 32.5vw; */
	padding-top: calc(11.6vw + 80px);
	padding-bottom: 11.2vw;
	max-width: 92vw;
	text-align: left;
}

#hero-title.contact-hero {
	text-align: center;
}

#contact-buttons {
	padding-left: 7vw;
	padding-right: 7vw;
}

#scroll-label {
	position: relative;
	display: block;
	margin-top: 4.6vw;
}

#body-content {
	margin-top: 0px;
}

.content-block {
	padding-top: 0px;
	padding-bottom: 0px;
}

.section {
	padding-left: 0px;
	padding-right: 0px;
}

.section-title {
	text-align: left;
	padding-top: 70px;
	padding-bottom: 120px;
}

.split-block {
	flex-direction: column;
}

.split-block-image {
	width: 100%;
	min-height: 100vw;
	max-height: 100vw;
}

.split-block-copy {
	width: 100%;
	min-height: 50vw;
}

.split-block-copy-container {
	width: 100%;
	padding-top: 44px;
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 64px;
	text-align: left;
	position: relative;
}

.split-block-copy.right {
	order: 1;
	display: flex;
	justify-content: flex-end;
}

.section-divider {
	min-height: 100px;
	padding: 20px;
	text-align: left;
}

.section-divider h3 {
	margin: auto 0px;
	text-align: left;
}

.split-block-image {
  background-position: center;
	background-size: cover;
}

#gallery {
	position: relative;
	background-position: center;
	opacity: 1;
	background-size: cover;
	width: 100%;
	max-height: 100vw;
	background-color: black;
	top: 0;
	height: 100vh;
	transition:
		top 0ms linear 0ms;
}

#gallery-overlay {
	background-color: black;
	width: 100%;
	height: 100%;
	opacity: 0;
}

#scroll-tip {
	background-color: #FFF;
	/* background-color: black; */
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translate(-50%);
	padding: 5px 24px;
	border-radius: 50px;
	opacity: 0;
	/* z-index: -1; */
}

#scroll-tip.reveal {
	bottom: 24px;
	opacity: 1;
	transition:
		bottom 700ms cubic-bezier(.4,1.5,.5,1) 0ms,
		opacity 800ms cubic-bezier(.4,1,.5,1) 0ms;
}

#scroll-tip.hidden {
	bottom: 32px;
	opacity: 0;
	transition:
		opacity 1200ms cubic-bezier(.4,1,.5,1) 0ms;
}


#scroll-tip .scroll-tip-icon {
	display: inline-block;
	position: relative;
	align-self: center;
	width: 16px;
	height: 16px;
	top: 2px;
	left: 0px;
	margin-right: 0px;
	background: url("../icons/down_chev_blk.svg");
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-origin: content-box, padding-box;
}

#body-content.article {
	position: relative;
	background: white;
	/* z-index: 1; */
}

.article-header {
	padding-top: 36vw;
	padding-bottom: 40vw;
	text-align: center;
	margin: 0 auto;
	background-color: rgba(6,6,6,0.4);
}

.article-text {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 24px;
	padding-right: 24px;
}

.article-text img {
	max-width: 100%;
	margin-left: 0px;
	margin-top: 16px;
	margin-bottom: 0px;
}

.video-container {
	max-width: 100vw;
	margin-top: 36px;
	margin-left: 0px;
	margin-right: 0px;
}

.article-text video {
	width: 100%;
}

.image-caption {
	margin-top: 12px;
	margin-bottom: 48px;
}

.article-image-large {
	background-position: center;
	background-size: cover;
	height: 800px;
	max-height: 100vw;
	width: 100%;
	margin: 0 auto;
}

.about-text {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 140px;
	padding-bottom: 100px;
	padding-left: 24px;
	padding-right: 32px;
}

.experience,
.education,
.skills,
.tools,
.patents {
	margin-top: 72px;
}

.experience-entry {
	display: flex;
	flex-direction: column;
}

.experience-header {
	flex-basis: 25%;
	min-width: 140px;
	flex-grow: 1;
	margin-bottom: 14px;
	padding-right: 20px;
}

.experience-header span {
	margin-top: 0px;
}

.experience-body {
	flex-grow: 3;
	margin-bottom: 18px;
}

.experience .experience-entry:last-of-type .experience-body {
	margin-bottom: 0px;
}

.experience .experience-entry:last-of-type .experience-body p {
	margin-bottom: 0px;
}

.column {
	column-count: 2;
	column-gap: 20px;
}


.links-body {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 96px;
	padding-bottom: 40px;
	padding-left: 24px;
	padding-right: 24px;
}

#footer {
	padding-top: 26px;
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 36px;
}


#back-button {
	position: fixed;
	z-index: 2001;
	top: 18px;
	left: 18px;
}

/*
=========================================
	Mobile Landscape
=========================================
*/

@media screen and (min-width: 568px)
							and (max-height: 500px)
							{

	body:after {
		content: "mobile-landscape"
	}

	.container,
	.container-rel {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container-rel {
		margin-top: -30px;
		padding-bottom: 0px;
	}

	#hero-title,
	.section {
		/* width: 480px; */
		width: 100%;
		margin: 0 auto;
	}

	#hero-title,
	.section-title {
		padding-left: 0px;
		padding-right: 0px;
	}

	/* ============================ */

	#hero .container {
		padding-bottom: 8px;
	}

	#hero-title {
		padding-top: 100px;
		padding-bottom: 50px;
		padding-left: 10px;
		padding-right: 10px;
		max-width: 400px;
		text-align: center;
	}

	#hero-title.contact-hero {
		max-width: 100%;
	}

	.article-header {
		padding-top: 56px;
		padding-bottom: 60px;
	}

	#scroll-label {
		position: relative;
		display: block;
		margin-top: 20px;
	}

	.content-block {
		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		text-align: center;
	}

	.section {
		padding-left: 0px;
		padding-right: 0px;
		margin: 0 auto;
	}

	.section-title {
		padding-top: 40px;
		/* padding-bottom: 60px; */
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
	}

	.split-block {
		flex-direction: row;
	}

	.split-block-image {
		min-width: 50vw;
		min-height: 50vw;
		max-height: none;
	}

	.split-block-copy {
		min-width: 50vw;
		min-height: 50vw;
	}

	.split-block-copy-container {
		max-width: 380px;
		padding: 40px;
		padding-top: 50px;
		padding-bottom: 60px;
		text-align: left;
	}

	.split-block-copy.right {
		order: -1;
		display: flex;
		justify-content: flex-end;
	}

	.section-divider {
		min-height: 100px;
		padding: 20px;
		justify-content: center;
	}

	.section-divider h3 {
		margin: auto 0;
		text-align: center;
	}

	.article-text {
		max-width: 540px;
		padding-top: 40px;
		padding-bottom: 80px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.article-text img {
		max-width: 540px;
		margin-left: -20px;
	}

	.video-container {
		max-width: 100vw;
		margin-left: 0px;
		margin-right: 0px;
	}

	.about-text {
		max-width: 80%;
		padding-top: 100px;
		padding-bottom: 80px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.experience-entry {
		display: flex;
		flex-direction: row;
		margin-bottom: 0px;
	}

	.experience-header {
		flex-basis: 25%;
		min-width: 30%;
		flex-grow: 1;
	}

	.experience-header span {
		margin-top: 0px;
	}

	.experience-body {
		flex-grow: 3;
		margin-bottom: 12px;
	}

	.experience .experience-entry:last-of-type .experience-body {
		margin-bottom: 0px;
	}

	.column {
		column-count: 2;
		column-gap: 20px;
	}

	.links-body {
		max-width: 540px;
		padding-top: 110px;
		padding-bottom: 80px;
		padding-left: 20px;
		padding-right: 20px;
	}

	#footer {
		padding-top: 26px;
		padding-bottom: 48px;
	}


	#back-button {
		top: 14px;
		left: 14px;
	}

}

/*
=========================================
	iPhone X/XS (Landscape)
=========================================
*/

@media only screen
    and (device-width: 375px)
		and (device-height: 812px)
    and (-webkit-device-pixel-ratio: 3)
		and (orientation: landscape)
		{

	.container,
	.container-rel {
		margin-left: constant(safe-area-inset-left);
		margin-right: constant(safe-area-inset-left);
		margin-left: env(safe-area-inset-left);
		margin-right: env(safe-area-inset-left);
		padding-left: 0px;
		padding-right: 0px;
	}

	.container-rel {
		position: relative;
		/* max-width: 440px; */
		margin: 0 auto;
		margin-top: -30px;
		padding-bottom: 0px;
	}

	#back-button {
		left: constant(safe-area-inset-left);
		left: env(safe-area-inset-left);
	}

}

/*
=========================================
	iPhone XS Max & XR (Landscape)
=========================================
*/

@media
		only screen
    and (device-width: 414px)
		and (device-height: 896px)
    and (-webkit-device-pixel-ratio: 3)
		and (orientation: landscape),
		only screen
		and (device-width: 414px)
		and (device-height: 896px)
		and (-webkit-device-pixel-ratio: 2)
		and (orientation: landscape)
		{

	.container,
	.container-rel {
		margin-left: constant(safe-area-inset-left);
		margin-right: constant(safe-area-inset-left);
		margin-left: env(safe-area-inset-left);
		margin-right: env(safe-area-inset-left);
		padding-left: 0px;
		padding-right: 0px;
	}

	.container-rel {
		position: relative;
		/* max-width: 540px; */
		margin: 0 auto;
		margin-top: -30px;
		padding-bottom: 0px;
	}

	#back-button {
		left: constant(safe-area-inset-left);
		left: env(safe-area-inset-left);
	}

}

/*
=========================================
	Tablet Portrait
=========================================
*/

@media screen
			and (min-width: 676px)
			and (min-height: 500px)
			{

	body:after {
		content: "tablet-portrait"
	}

	.container {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container-rel {
		padding-left: 40px;
		padding-right: 40px;
		padding-bottom: 0px;
	}

	#hero-title,
	.section {
		max-width: none;
		margin: 0px;
		padding: 0px;
	}

	#hero-title {
		padding-left: 0px;
		padding-right: 0px;
	}

	.section-title {
		padding-left: 40px;
		padding-right: 40px;
	}

	/* ============================ */

	#hero-title {
		margin: 0 auto;
		margin-left: 34px;
		margin-right: 34px;
		max-width: 620px;
		text-align: left;
		/* padding-top: 184px; */
		padding-top: 186px;
	}

	/* #section.contact-section {
		padding-left: 0;
		padding-right: 0;
		margin: 0 auto;
		text-align: center;
	} */

	#hero-title.contact-hero {
		padding-left: 0;
		padding-right: 0;
		margin: 0 auto;
		text-align: center;
		/* background-color: pink; */
	}

	#scroll-label {
		position: relative;
		display: block;
		margin-top: 20px;
	}

	#hero .container {
		/* padding-bottom: 94px; */
		padding-bottom: 140px;
	}

	.article-header {
		padding-top: 34vw;
		padding-bottom: 40vw;
	}

	.section-title {
		padding-top: 80px;
		padding-bottom: 110px;
	}

	.content-block {
		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		text-align: center;
	}

	.section {
		margin: 0 auto;
	}

	.section-title {
		text-align: left;
	}

	.split-block {
		flex-direction: column;
	}

	.split-block-image {
		min-width: 100vw;
		min-height: 72vw;
		max-height: 100vw;
		padding-left: 15vw;
		padding-right: 15vw;
	}

	.split-block-copy {
		width: 100%;
		min-height: 50vw;
	}

	.split-block-copy-container {
		width: 100%;
		padding-top: 48px;
		padding-left: 34px;
		padding-right: 80px;
		padding-bottom: 116px;
		text-align: left;
	}

	.split-block-copy.right {
		order: 1;
		display: flex;
		justify-content: flex-end;
	}

	.section-divider {
		min-height: 100px;
		padding: 40px;
		padding-top: 60px;
		padding-bottom: 60px;
		text-align: left;
	}

	.section-divider h3 {
		margin: auto 0;
		text-align: left;
	}

	#store-title {
		padding-top: 80px;
		padding-bottom: 94px;
	}

	.article-text {
		max-width: 100%;
		padding-top: 80px;
		padding-bottom: 120px;
		padding-left: 80px;
		padding-right: 80px;
	}

	.article-text img {
		max-width: 100%;
		margin-left: 0px;
	}

	.video-container {
		max-width: 100vw;
		margin-top: 36px;
		margin-left: 0px;
		margin-right: 0px;
	}

	.about-text {
		/* max-width: 100%; */
		max-width: 876px;
		padding-top: 140px;
		padding-bottom: 60px;
		padding-left: 34px;
		padding-right: 42px;
		/* padding-left: 80px; */
		/* padding-right: 80px; */
	}

	.experience,
	.education,
	.skills,
	.tools,
	.patents {
		margin-top: 82px;
	}

	.experience-entry {
		display: flex;
		flex-direction: row;
		margin-bottom: 16px;
	}

	.experience-header {
		flex-basis: 25%;
		min-width: 25%;
		flex-grow: 1;
		margin-bottom: 0px;
		/* padding-right: 0px; */
	}

	.experience-header span {
		margin-top: 0px;
	}

	.experience-body {
		flex-grow: 3;
		margin-bottom: 0px;
	}

	.column {
		column-count: 4;
		column-gap: 20px;
	}

	.links-body {
		max-width: 100%;
		padding-top: 120px;
		padding-left: 36px;
		padding-right: 36px;
	}

	#footer {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	#back-button {
		position: fixed;
		z-index: 2001;
		top: 20px;
		left: 20px;
	}

}

/*
=========================================
	Tablet Landscape
=========================================
*/

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

	body:after {
		content: "tablet-landscape"
	}

	.container {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container-rel {
		padding: 0px;
	}

	#hero-title,
	.section {
		max-width: none;
		width: 900px;
		padding-left: 0;
		padding-right: 0;
		margin: 0 auto;
	}

	.section-title {
		padding-left: 0px;
		padding-right: 0px;
		text-align: center;
	}

	/* ============================ */

	#hero-title {
		padding-bottom: 0px;
		text-align: center;
		max-width: 740px;
		/* padding-top: 188px; */
		padding-top: 176px;
	}

	#scroll-label {
		margin-top: 40px;
	}

	#hero .container {
		padding-bottom: 134px;
	}

	.article-header {
		padding-top: 180px;
		padding-bottom: 210px;
	}


	.split-block {
		flex-direction: row;
		padding: 0px;
	}

	.split-block-image {
		display: flex;
		min-width: 50vw;
		min-height: 50vw;
		max-height: 100vw;
		padding-left: 0px;
		padding-right: 0px;
		align-items: center;
	}

	.split-block-image-container {
		width: 50vw;
		height: 50vw;
		margin: auto;
	}

	.split-block-copy {
		min-width: 50vw;
		min-height: 46vw;
		order: 1;
		display: flex;
	}

	.split-block-copy-container {
		display: table-cell;
		vertical-align: middle;
		width: 50vw;
		max-width: 720px;
		padding: 80px;
		padding-top: 6.8vw;
		padding-bottom: 140px;
		padding-right: 130px;
		text-align: left;
	}

	.split-block-copy.right {
		order: -1;
		display: flex;
	}

	.section-divider {
		min-height: 100px;
		padding: 80px;
	}

	.section-divider h3 {
		margin: auto;
		text-align: center;
	}

	#store-title {
		padding-top: 90px;
		padding-bottom: 90px;
	}

	.article-text {
		max-width: 800px;
		padding-top: 100px;
		padding-bottom: 100px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.article-text img {
		max-width: 100%;
		margin-left: 0px;
	}

	.video-container {
		max-width: 100vw;
		margin-top: 32px;
		margin-left: 0px;
		margin-right: 0px;
	}

	.about-text {
		max-width: 800px;
		padding-top: 156px;
		padding-bottom: 100px;
		padding-left: 0px;
		padding-right: 0px;
	}

	/* .experience,
	.education,
	.skills,
	.tools,
	.patents {
		margin-top: 92px;
	} */

	.experience-entry {
		display: flex;
		flex-direction: row;
	}

	.experience-header {
		flex-basis: 25%;
		min-width: 25%;
		flex-grow: 1;
		margin-bottom: 0px;
		padding-right: 0px;
	}

	.experience-header span {
		margin-top: 0px;
	}

	.experience-body {
		flex-grow: 3;
		margin-bottom: 0px;
	}

	.column {
		column-count: 4;
		column-gap: 20px;
	}

	.links-body {
		max-width: 800px;
		padding-left: 0px;
		padding-right: 0px;
	}

	#footer {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	#body-content.article {
		/* margin-top: 400px; */
	}

}

/*
=========================================
	Desktop
=========================================
*/

@media screen and (min-width: 1441px)
							and (orientation : landscape) {

	body:after {
		content: "desktop"
	}

	#hero-title,
	.section {
		width: 1400px;
	}

	.section-title {
		padding-left: 120px;
		padding-right: 120px;
		margin-left: 80px;
		margin-right: 80px;
	}

	/* ============================ */

	#hero-title {
		padding-top: 200px;
		padding-bottom: 40px;
		max-width: 780px;
	}

	.article-header {
		padding-top: 240px;
		padding-bottom: 280px;
	}

	#scroll-label {
		margin-top: 50px;
	}

	#hero .container {
		padding-bottom: 110px;
	}

	.split-block-image {
		min-width: 50vw;
		min-height: 44vw;
		max-height: 60vw;
		padding-left: 0px;
		padding-right: 0px;
	}

	.split-block-image-container {
		max-width: 760px;
		max-height: 760px;
		margin: 0 auto;
	}

	.split-block-copy {
		min-width: 50vw;
		min-height: 680px;
	}

	.split-block-copy-container {
		padding: 100px;
		padding-top: 120px;
		padding-bottom: 120px;
	}

	.section-divider {
		padding: 100px;
	}

	.article-text {
		max-width: 800px;
		padding-top: 100px;
		padding-bottom: 80px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.about-text {
		max-width: 800px;
		padding-top: 160px;
		padding-bottom: 120px;
	}

	.experience,
	.education,
	.skills,
	.tools,
	.patents {
		margin-top: 100px;
	}


	.links-body {
		max-width: 800px;
		padding-top: 140px;
		padding-bottom: 80px;
		padding-left: 0px;
		padding-right: 0px;
	}

}