:root {
	--color-text: #000;
	--header-space: 50px;
	--nav-space: 50px;
	--color-view: #fff;

	--gutter-mobile: 20px;
	--gutter-desktop: 40px;
	--caption-gutter-mobile: 30px;
	--caption-gutter-desktop: var(--gutter-desktop);

	--transition-curve: cubic-bezier(0.5, 0.05, 0, 0.99);
	--swiper-wrapper-transition-timing-function: var(--transition-curve);
}

html {
	box-sizing: border-box;
}

img {
	display: block;
}

a:visited, a:active, a:hover {
	color: var(--color-text);
}

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

html, body {
	height: 100%;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	line-height: 22px;
	color: var(--color-text);
}

@media (min-width: 768px) {
	body {
		font-size: 12px;
		line-height: 24px;
	}
}

.container {
	position: relative;
	height: 100%;
}

.btn {
	border-radius: 999px;
	outline: none;
	background-color: #ededed;
	text-transform: uppercase;
	padding: 9px 24px;
	text-decoration: none;
	color: var(--color-text);
	line-height: 1;
}

.header {
	position: absolute;
	z-index: 3;
	top: 20px;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
	.header-link { }
		.header-link img {
			width: 100px;
			transition: filter .8s var(--transition-curve);
		}
			body.invert .header-link img {
				filter: invert(1);
			}

.contact-btn {
	position: absolute;
	bottom: 60px;
	right: 60px;
	z-index: 2;
	display: none;
	color: var(--color-text);
	transition: color .8s var(--transition-curve), background-color .8s var(--transition-curve);
}
	@media (min-width: 768px) {
		.contact-btn {
			display: block;
		}
	}
	body.invert .contact-btn {
		background-color: #000;
	}

.blockContent {
	transition: color .8s var(--transition-curve);
	color: var(--color-text);
}
	.blockContent p {
		white-space: pre-line;
	}
	.blockContent a {
		font-family: TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif;
		transition: color .8s var(--transition-curve);
		color: var(--color-text);
		text-decoration: underline;
	}
	.blockContent > *:first-child {
		margin-top: 0;
	}
	.blockContent > *:last-child {
		margin-bottom: 0;
	}

.contact-drawer {
	position: fixed;
	z-index: 10;
	width: calc(100% - var(--caption-gutter-mobile));
	max-width: 360px;
	right: 0;
	top: 0;
	bottom: 0;
	transform: translateX(105%);
	transition: transform .8s var(--transition-curve),
							border-color .8s var(--transition-curve);
	background-color: #fff;
	border-left: 1px solid var(--color-text);
	background-color: #FFF;
	
}
	body.contact-drawer--open {
		cursor: pointer;
	}
	body.contact-drawer--open .contact-drawer {
		transform: translateX(0%);
		background-color: #FFF;
	}
	.contact-drawerTitle {
		color: #000;
		transition: color .8s var(--transition-curve);
		text-transform: uppercase;
		padding: 20px;
		margin-top: 8vh;
		margin-bottom: 0;
	}
	.contact-drawerSeparator {
		width: 100%;
		border-top: 1px solid var(--color-text);
		transition: border-color .8s var(--transition-curve);
	}
	.contact-drawerContent {
		color: var(--color-text);
		transition: color .8s var(--transition-curve);
		padding: 20px;
		cursor: auto;
		
	}
	.contact-drawerContent a {
		color: var(--color-text);	
	}

    .contact-drawerTitle {
		color: var(--color-text);	
	}

.nav {
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: 12px 0 14px;
	border-top: 1px solid var(--color-text);
	background-color: var(--color-view);
	transition: background-color .8s var(--transition-curve);
}
	.nav-item {
		display: inline-block;
		text-decoration: none;
		text-transform: uppercase;
		color: var(--color-text);
		border-bottom: 1px solid var(--color-text);
		line-height: 1.1;
		transition: border-color .8s var(--transition-curve), color .8s var(--transition-curve);
	}
	.nav span {
		transition: color .8s var(--transition-curve);
	}
	.nav-item--active {
		text-decoration: none;
		border-bottom-color: transparent;
		cursor: auto;
	}
	.nav-item-wrapper--hidden-mobile {
		display: none;
	}

	@media (min-width: 768px) {
		.nav-item-wrapper--hidden-desktop {
			display: none;
		}

		.nav-item-wrapper--hidden-mobile {
			display: inline-block;
		}

		.nav {
			bottom: 68px;
			right: 50%;
			left: unset;
			padding: unset;
			transform: translateX(50%);
			border-top: none;
			background-color: transparent;
		}
		.nav-contactItem {
			display: none;
		}
	}

/** Views **/
.views {
}
	.view {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity .8s var(--transition-curve);
		background-color: #fff;
		overflow-y: auto;
	}
		.view.view--active {
			opacity: 1;
			z-index: 2;
			pointer-events: auto;
		}
	.view[data-type="homeView"] {
		z-index: 5;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #fff;
		transform: translateY(-120%);
		transition: opacity .8s var(--transition-curve),
			transform .8s var(--transition-curve);
	}
	.view[data-type="homeView"].view--active {
		transform: translateY(0%);
	}

.homeView {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	min-height: 100%;
	padding-top: var(--header-space);
}
	.homeView-ingress {
		text-align: center;
	}
	.homeView-cover {
		display: flex;
		align-items: center;
	}
		.homeView-coverCaptionSpace {
			position: relative;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.homeView-coverCaption {
				white-space: nowrap;
				writing-mode: sideways-lr;
				-webkit-writing-mode: vertical-lr;
				text-transform: uppercase;
				transition: color .8s var(--transition-curve);
				color: var(--color-text);
			}
		.homeView-coverImage {
			width: 100%;
			height: 100%;
			max-height: 75vh;
		}
		.homeView-coverImage img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	.homeView-cover--desktop {
		display: none;
		width: 60%;
		max-width: 1600px;
	}
	@media (min-width: 768px) {
		.homeView-cover--desktop {
			display: flex;
		}
	}

	.homeView-cover--mobile {
		display: flex;
		height: 57vh;
		width: 100%;
	}
		.homeView-cover--desktop .homeView-coverCaptionSpace {
			flex: 0 0 var(--caption-gutter-desktop);
		}
		.homeView-cover--mobile .homeView-coverCaptionSpace {
			flex: 0 0 var(--caption-gutter-mobile);
		}
	@media (min-width: 768px) {
		.homeView-cover--mobile {
			display: none;
		}
	}

.aboutView {
	display: flex;
	align-items: center;
	padding-top: var(--header-space);
	padding-bottom: var(--header-space);
}
	@media (min-width: 1024px) {
		.aboutView {
			justify-content: center;
			height: 100%;
		}
	}
	.aboutView-contentWrapper {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: var(--gutter-mobile);
		padding-top: 0;
		width: 100%;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
		@media (min-width: 1024px) {
			.aboutView-contentWrapper {
				padding: var(--gutter-desktop);
				align-items: flex-start;
				flex-direction: row;
				text-align: left;
			}
		}
		.aboutView-ingress {
			text-transform: uppercase;
			max-width: 253px;
			margin-bottom: 60px;
			margin-top: 30px;
			width: 100%;
		}
			@media (min-width: 1024px) {
				.aboutView-ingress {
					margin-top: 0;
				}
			}
		.aboutView-content {
			max-width: 400px;
			text-align: center;
		}
		.aboutView-counterSpace {
			flex: 1;
			max-width: 253px;
		}


.servicesView {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 100%;
	padding-top: var(--header-space);
	padding-bottom: var(--header-space);
}
	@media (min-width: 768px) {
		.servicesView {
			flex-direction: row-reverse;
			padding-top: 0;
			padding-bottom: 0;
		}
	}
	.servicesView-ingress {
		text-align: center;
		text-transform: uppercase;
		max-width: 577px;
		padding: var(--caption-gutter-mobile);
	}
		@media (min-width: 768px) {
			.servicesView-ingress {
				position: absolute;
				z-index: 2;
				top: calc(var(--header-space) + var(--gutter-desktop));
				left: 50%;
				transform: translateX(-50%);
			}
		}

	.servicesView-media {
		width: 100%;
		display: flex;
		align-items: center;
	}
		@media (min-width: 768px) {
			.servicesView-media {
				width: calc(50% + var(--caption-gutter-desktop));
				height: 100vh;
				flex-shrink: 0;
				flex-grow: 0;
			}
		}
		.servicesView-mediaCaptionSpace {
			flex: 0 0 var(--caption-gutter-mobile);
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.servicesView-mediaCaption {
				white-space: nowrap;
				writing-mode: sideways-lr;
				-webkit-writing-mode: vertical-lr;
				text-transform: uppercase;
				transition: color .8s var(--transition-curve);
				color: var(--color-text);
			}
				@media (min-width: 768px) {
					.servicesView-mediaCaptionSpace {
						flex-basis: var(--caption-gutter-desktop);
					}
					.servicesView-mediaCaptionSpace:last-child {
						display: none;
					}
				}
		.servicesView-image {
			width: 100%;
			height: 100%;
		}
			.servicesView-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
	.servicesView-content {
		width: 100%;
		padding: var(--caption-gutter-mobile);
		text-transform: uppercase;
	}
		@media (min-width: 768px) {
			.servicesView-content {
				padding: 0 var(--caption-gutter-desktop) var(--gutter-desktop) var(--caption-gutter-desktop);
				padding-top: 0;
				width: 50%;
			}
		}


.caseStudiesView {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 100%;
	padding-top: var(--header-space);
	padding-bottom: var(--header-space);
}
	@media (min-width: 768px) {
		.caseStudiesView {
			justify-content: flex-start;
			flex-direction: row;
			padding-top: 0;
			padding-bottom: 0;
		}
	}

	.caseStudiesView-media {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		padding-top: var(--gutter-mobile);
	}
		@media (min-width: 768px) {
			.caseStudiesView-media {
				width: calc(50% + var(--caption-gutter-desktop));
				height: 100vh;
				flex-shrink: 0;
				flex-grow: 0;
				flex-direction: row;
				padding-top: 0;
			}
		}
		.caseStudiesView-mediaCaptionSpace {
			flex: 0 0 var(--caption-gutter-mobile);
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.caseStudiesView-mediaCaption {
				white-space: nowrap;
				writing-mode: sideways-lr;
				-webkit-writing-mode: vertical-lr;
				text-transform: uppercase;
				transition: color .8s var(--transition-curve);
				color: var(--color-text);
			}
				@media (min-width: 768px) {
					.caseStudiesView-mediaCaptionSpace {
						flex-basis: var(--caption-gutter-desktop);
					}
					.caseStudiesView-mediaCaptionSpace:first-child {
						display: none;
					}
				}
		.caseStudiesView-image {
			width: 100%;
			height: 100%;
		}
			.caseStudiesView-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
	.caseStudiesView-contentWrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: var(--caption-gutter-mobile);
	}
		@media (min-width: 768px) {
			padding: 0 var(--caption-gutter-desktop) var(--gutter-desktop) var(--caption-gutter-desktop);
		}
		.caseStudiesView-content {
			width: 100%;
		}
			@media (min-width: 768px) {
				.caseStudiesView-content {
					max-width: 366px;
				}
			}


.brandsView {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: var(--caption-gutter-mobile);
	padding-top: var(--header-space);
	padding-bottom: calc(var(--nav-space) + var(--gutter-mobile));
}
	@media (min-width: 768px) {
		.brandsView {
			flex-direction: row-reverse;
			padding: 0;
		}
	}
	.brandsView-medias {
		width: 100%;
		height: 60vh;
		margin-top: var(--caption-gutter-mobile);
		margin-bottom: var(--caption-gutter-mobile);
	}
		@media (min-width: 768px) {
			.brandsView-medias {
				flex: 0 0 50%;
				height: 100vh;
				margin: 0;
			}
		}
		.brandsView-media {
			height: 100%;
			width: 100%;
		}
			.brandsView-media img {
				object-fit: cover;
				height: 100%;
				width: 100%;
			}

	div.brandsView-contentSlides {
		width: 100%;
		display: none;
	}
		@media (min-width: 768px) {
			div.brandsView-contentSlides {
				display: block;
				position: absolute!important;
				left: 50%;
				top: calc(50% - var(--gutter-desktop));
				transform: translateX(-50%) translateY(-50%);
				max-width: 400px;
			}
		}
		.brandsView-contentSlide {
			text-align: center;
		}
			.brandsView-contentSlideTitle {
				text-transform: uppercase;
				margin: 0;
				transition: color .8s var(--transition-curve);
				color: var(--color-text);
			}
				@media (min-width: 768px) {
					.brandsView-contentSlideTitle {
						margin-bottom: 1rem;
					}
				}
			
	.brandsView-slideMenu {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: var(--gutter-mobile);
		transition: color .8s var(--transition-curve);
		color: var(--color-text);
		display: none;
	}
		@media (min-width: 768px) {
			.brandsView-slideMenu {
				display: flex;
				width: 50%;
				align-items: flex-start;
				justify-content: center;
				padding: var(--gutter-desktop);
				padding-top: 0;
				margin-top: calc(-1 * var(--gutter-desktop));
			}
		}
		.brandsView-slideMenuItem {
			text-decoration: underline;
			text-transform: uppercase;
			cursor: pointer;
		}

	.brandsView-slideAccordion {
	}
		@media (min-width: 768px) {
			.brandsView-slideAccordion {
				display: none;
			}
		}
		.brandsView-slideAccordionHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
		}
		.brandsView-slideAccordionContent {
			display: none;
		}