/* base styles */

html
{
	font-size: 16px;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after
{
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body
{
	background: rgba(255,255,255,1.0);
	color: rgba(0,0,0,1.0);
}

a
{
	color: rgba(0,0,0,1.0);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 0.02em;
}

p, ul, li
{
	font-family: 'founders-grotesk-light';
}

strong
{
	font-family: 'founders-grotesk-medium';
	font-weight: inherit;
}

hr
{
	border: none;
}

img
{
	display: block;
}

li:first-child
{
	margin-top: 1.25rem;
}

li
{
	margin-left: 1rem;
}



/* core z-index styles */

#content
{
	z-index: 2;
}

#upper
{
	z-index: 3;
}

#lower
{
	z-index: 4;
}

*[id^='lightbox']
{
	z-index: 5;
}

*[id^='warning']
{
	z-index: 6;
}

#preloader
{
	z-index: 7;
}


/* loader styles */

#preloader, *[id^='warning']
{
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(255,255,255, 1.0);
}

*[id^='warning']
{
	display: none;
}

#preloader p, *[id^='warning'] p
{
	font-family: 'founders-grotesk-light';
	font-size: 0.875rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: #000000;

	-webkit-animation: blink 0.8s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation: blink 0.8s;
	-moz-animation-iteration-count: infinite;
	-o-animation: blink 0.8s;
	-o-animation-iteration-count: infinite;
}

#preloader img
{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 15rem;
}

@-webkit-keyframes blink {
	0% {
			opacity: 1;
	}
	50% {
			opacity: 0;
	}
	100% {
			opacity: 1;
	}
}

@-moz-keyframes blink {
	0% {
			opacity: 1;
	}
	50% {
			opacity: 0;
	}
	100% {
			opacity: 1;
	}
}

@-o-keyframes blink {
	0% {
			opacity: 1;
	}
	50% {
			opacity: 0;
	}
	100% {
			opacity: 1;
	}
}


/* common styles */

.mobile_only
{
	display: none;
}

centered
{
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.background_green
{
	background: rgba(85,221,136,1.0);
}

.background_purple
{
	background: rgba(187,153,255,1.0);
}

.large, .content p
{
	font-size: 1.5rem;
	line-height: 140%;
}

.centy
{
	text-align: center;
}

.lefty
{
	text-align: left;
}

.padded
{
	padding: 0 10rem;
}

.padded_extra
{
	padding: 0 20rem;
}

.blinker
{
	-webkit-animation: blink 2s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation: blink 2s;
	-moz-animation-iteration-count: infinite;
	-o-animation: blink 2s;
	-o-animation-iteration-count: infinite;
}


/* overlay styles */

#scrollout
{
	width: 100%;
	position: absolute;
	height: 4.375rem;
}

#scrollout div
{
	width: 100%;
	position: absolute;
	top: 0.625rem;
	height: 3.75rem;
}

#scrollout img
{
	position: absolute;
	width: 12.75rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#upper, #lower
{
	position: fixed;	
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 0.625rem;
	pointer-events: none;
}

#upper
{
	top: 0.625rem;
	bottom: auto;
}

#lower
{
	bottom: 2.5rem; // double the upper to account for bottom pos
	top: auto;
}

#upper a, #upper img, #lower a
{
	pointer-events: auto;
}

#upper a, #lower a, .back a
{
	font-family: 'founders-grotesk-regular';
	font-size: 0.875rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.01rem;
}

#upper div:not(:first-child)
{
	margin-left: auto;
}

#lower div:nth-child(2)
{
	margin-left: auto;
}

#upper div:nth-child(1), #lower div:nth-child(2)
{
	transform: rotate(45deg);	
}

#upper div:nth-child(3), #lower div:nth-child(1)
{
	transform: rotate(-45deg);
}

img.brand
{
	content: url('../img/ui/upgrade-logo-mark.svg');
	margin-left: auto;
	margin-right: auto;
	height: 3.75rem;
}

cross
{
	width: 1.875rem;
}

cross img
{
	content: url('../img/ui/cross.svg');
	height: 1.25rem;
	margin-left: auto;
	margin-right: auto;
}


/* slide-specific styles */

#content
{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: auto;
}

.snappy_scroll
{	
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}

.default_scroll
{	
	overflow-y: scroll;
	scroll-snap-type: none;
}

.slide
{
	position: relative;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	z-index: 2; /* inner nested div (content > slide) */
}

.slide p
{
	width: 100%;
}

project
{
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
}

project p
{
	font-family: 'founders-grotesk-regular';
}

project.tall name
{
	width: 62%;
}

project.tall pic
{
	width: 38%;
	height: 100%;
}

project.tall img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

project.wide name, project.wide pic
{
	width: 50%;
}

project.wide img
{
	width: 100%;
}

project.wide
{
	direction: rtl;
}


p.scroll_advice
{
	font-family: 'founders-grotesk-regular';
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-top: 0.625rem;
}

.light
{
	opacity: 0.32;
}

*[id^='slideshow']
{
	display: flex;
	height: 100%;
}

*[id^='slideshow'] img
{
	height: 100%;
}

*[id^='slideshow'] img:not(:first-child)
{
	margin-left: 1px;
}


.bottom
{
	position: absolute;
	top: auto;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
}

.bottom p
{
	font-family: 'founders-grotesk-regular';
	font-size: 0.875rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.bottom img
{
	margin-top: 0.625rem;
	height: 0.875rem;
	margin-left: auto;
	margin-right: auto;
}

.portrait
{
	position: absolute;
	height: 100%;
	width: 34%;
	left: 50%;
	transform: translateX(-50%);
	contain: content;
}

.portrait img
{
	position: absolute;
	height: 100%;
	padding-top: 7.5rem;
	left: 50%;
	transform: translateX(-50%);
}

*[class^='split']
{
	position: absolute;
	width: 33%;
	height: 100%;
}

.split_left
{
	left: 0;
}

.split_right
{
	right: 0;
}

*[class^='split'] p
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



/* footer styles */

footer
{
	position: absolute;
	width: 100%;
	bottom: 1.25rem;
	top: auto;
}

footer p
{
	font-size: 1rem;
	text-align: center;
	margin-top: 0.3125rem;
}

footer img
{
	height: 1.25rem;
	margin: 0 auto;
}



/* carousel (and contrast) transition styles */

*[id^='carousel'] img:nth-of-type(1), *[id^='contrast'] img:nth-of-type(1)
{
	animation-name: fader;
	z-index: 2; /* inner nested div (content > slide > carousel) */
}

*[id^='carousel'] img:nth-of-type(2), *[id^='contrast'] img:nth-of-type(2)
{
	z-index: 1; /* inner nested div (content > slide > carousel) */
}

*[id^='carousel'] img:nth-of-type(n+3), *[id^='contrast'] img:nth-of-type(n+3)
{
	display: none;
}

*[id^='carousel'] img:nth-of-type(1), *[id^='contrast_sync'] img:nth-of-type(1)
{
	animation-delay: 4s;
	animation-duration: 4s;
}

*[id^='contrast_async'] img:nth-of-type(1) /* slower than main carousels */
{
	animation-delay: 8s;
	animation-duration: 8s;
}

@keyframes fader
{
	from	{opacity: 1.0;}
	to		{opacity: 0.0;}
}



/* lightbox pane styles */

*[id^='lightbox']
{
	display: none;
	position: absolute;
	width: 100%;
	background: rgba(255,255,255,1.0);
}

.back
{
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.48);
	width: 100%;
	height: 2.5rem;
	padding: 0 1.25rem;
}

.back a
{
	position: absolute;
	top: 50%;
	white-space: nowrap;
	transform: translateY(-50%);
}

.close
{
	position: fixed;
	top: 0;
	right: 0;
	background: rgba(187,153,255,1.0);
	width: 2.5rem;
	height: 2.5rem;
}

.close img
{
	position: absolute;
	width: 1rem;
	height: 1rem;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.content
{
	padding: 5rem 15rem;
}

.images
{
	width: 100%;
}

.third
{
	float: left;
}

.hundred
{
	width: 100%;
}

heading
{
	display: flex;
	align-items: center;
}

heading p:last-child
{
	margin-left: auto;
}

@keyframes fadeIn
{
	from	{opacity: 0.0;}
	to		{opacity: 1.0;}
}

@keyframes fadeOut
{
	from	{opacity: 1.0;}
	to		{opacity: 0.0;}
}