/* //////////////////////////////////////////////////////////// */
/* // Type , vars, main */
/* //////////////////////////////////////////////////////////// */
html {
	scroll-behavior : smooth;
	font-family     : 'Gotham Book';
}

:target:before {
	content : "";
	display : block;
}


/* Fluid font size variables, for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vw, 1rem)) {
	:root {
		--step-7 : clamp(0.68rem, 0.74vw + 0.51rem, 1.04rem);
		--step-6 : clamp(0.81rem, 0.88vw + 0.61rem, 1.25rem);
		--step-5 : clamp(0.97rem, 1.06vw + 0.74rem, 1.5rem);
		--step-4 : clamp(1.17rem, 1.27vw + 0.88rem, 1.8rem);
		--step-3 : clamp(1.4rem, 1.53vw + 1.06rem, 2.16rem);
		--step-2 : clamp(1.68rem, 1.83vw + 1.27rem, 2.59rem);
		--step-1 : clamp(2.02rem, 2.2vw + 1.53rem, 3.11rem);
		--step-0 : clamp(2.43rem, 2.64vw + 1.83rem, 3.73rem);
	}
}

/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
	:root {
		--step-7 : 0.68rem;
		--step-6 : 0.81rem;
		--step-5 : 0.97rem;
		--step-4 : 1.17rem;
		--step-3 : 1.4rem;
		--step-2 : 1.68rem;
		--step-1 : 2.02rem;
		--step-0 : 2.43rem;
	}

	@media screen and (min-width : 1152px) {
		:root {
			--step-7 : 1.04rem;
			--step-6 : 1.25rem;
			--step-5 : 1.5rem;
			--step-4 : 1.8rem;
			--step-3 : 2.16rem;
			--step-2 : 2.59rem;
			--step-1 : 3.11rem;
			--step-0 : 3.73rem;
		}
	}
}

/*
https://www.fluid-type-scale.com/calculate?minFontSize=15&minWidth=360&minRatio=1.2&maxFontSize=22&maxWidth=1152&maxRatio=1.2&steps=7%2C6%2C5%2C4%2C3%2C2%2C1%2C0&baseStep=6&prefix=step&decimals=2&includeFallbacks=on&useRems=on&remValue=16&previewFont=Libre+Baskerville */


:root {
	--white              : #FFF;
	--black              : rgba(0, 0, 0, 0.18);
	--primary            : #D0E8FB;
	--primary-lighter    : #000;
	--primary-darker     : #b0deff;
	--secondary          : grey;
	--secondary-lighter  : #000;
	--secondary-darker   : #000;
	--tertiary           : #000;
	--tertiary-lighter   : #000;
	--tertiary-darker    : #000;
	--preloader-bg       : #fff;
	--preloader-circle   : rgba(30, 30, 30, 0.1);
	--form-error         : #ff3a44;
	--input-label        : #000;
	--input-color        : #000;
	--input-placeholder  : #000;
	--input-bg           : white;
	--input-borders      : #000;
	--header-size-large  : 0px;
	--header-size-medium : 0px;
	--header-size-small  : 0px;
	--swiper-theme-color : #FFF;
	--swiper-bullet      : #FFF;
	--swiper-bullet-off  : #000;
	--swiper-bullet-on   : #FFF;
	--nav-large          : 0px;
	--nav-small          : 0px;
	--alt-font           : 'Domaine Display';
	--popup-bg           : #000;
	--popup-colour       : #FFF;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-weight : 500;
}


h1, .h1 {
	font-size     : var(--step-2);
	line-height   : var(--step-1);
	margin-bottom : 1.5rem;
	font-family   : var(--alt-font);
	position      : relative;
}

h2, .h2 {
	font-size     : var(--step-3);
	line-height   : var(--step-2);
	margin-bottom : 1.3rem;
	font-family   : var(--alt-font);
	position      : relative;
}

h3, .h3 {
	font-size     : var(--step-4);
	line-height   : var(--step-3);
	margin-bottom : 1.1rem;
	font-family   : var(--alt-font);
}

.generic p.alt-font,
h4, .h4 {
	font-size     : var(--step-5);
	line-height   : var(--step-4);
	margin-bottom : 1rem;
}

h5, .h5 {
	font-size     : var(--step-6);
	line-height   : var(--step-5);
	margin-bottom : 1rem;
}

body,
.generic {
	font-size   : 14px;
	line-height : 21px;
}

/* //////////////////////////////////////////////////////////// */
/* // Header and Main Navigation */
/* //////////////////////////////////////////////////////////// */
.nav-holder {
	position   : fixed;
	right      : 15px;
	top        : 15px;
	z-index    : 30;
	text-align : right;
	overflow   : hidden;
}

.nav-2,
.nav-2 *,
.nav-holder,
.nav-holder * {
	transition : all 0.5s ease-in-out;
}

.nav-holder {
	background-color : transparent;
	color            : #000;
	max-height       : 70px;
	max-width        : 90px;
	padding          : 20px 30px 30px 30px;
}

.nav-holder .inner ul {
	padding    : 20px 0 9px 0;
	margin     : 0 0 0 0;
	list-style : none;
}

.nav-holder .inner ul li {
	padding : 0 0 0 0;
	margin  : 0 0 0 0;
	display : block;
}

.nav-holder .inner ul li a {
	padding   : 6px 0;
	display   : inline-block;
	font-size : 16px;
	position  : relative;
}

.nav-holder .inner {
	/*padding  : 20px 30px 20px 30px;*/
	overflow : hidden;
}

.nav-holder.on {
	background-color : var(--primary);
	max-height       : 500px;
	max-width        : 500px;
	overflow         : hidden;
}

.burger-b {
	text-align : right;
	width      : 31px;
	height     : 31px;
	display    : inline-block;
	transition : all 0.5s ease-in-out;
	opacity    : 0;
	visibility : hidden;
}

.burger-b img {
	width  : 100%;
	height : 100%;
}

.nav-holder .burger-b img {
	filter : contrast(0);
}

.nav-holder.on .burger-b img {

}

.nav-holder .burger-cross {
	display : none;
}

.nav-holder.on .burger-cross {
	display : block;
}

.nav-holder.on .burger-lines {
	display : none;
}

.nav-holder .burger-lines {
	display : block;
}


.nav-2 ul {
	padding    : 0;
	margin     : 0 0 0 0;
	list-style : none;
}

.nav-2 ul li {
	padding : 0 0 0 0;
	margin  : 0 10px 0 10px;
	display : inline-block;
}

.nav-2 ul li a {
	padding   : 10px;
	display   : inline-block;
	font-size : 16px;
	position  : relative;
}


/* //////////////////////////////////////////////////////////// */
/* // Content */
/* //////////////////////////////////////////////////////////// */
.content ul,
.generic ul {
	padding-left : 17px;
}


h2.generic,
.sub-heading {
	font-size     : 16px;
	font-family   : 'Gotham Bold';
	font-weight   : bold;
	position      : relative;
	margin-bottom : 30px;
}

h2.generic div,
.sub-heading div {
	border-bottom : 4px solid var(--primary);
	bottom        : -17px;
	position      : absolute;
	width         : 100%;
}

dl hr {
	width   : 100%;
	display : block;
}

dl {
	width    : 100%;
	overflow : hidden;
	padding  : 0;
	margin   : 0;
	/*	font-size   : 90%;
		line-height : 18px;*/
}

dt {
	padding    : 8px 0px;
	float      : left;
	text-align : left;
	clear      : both;
}

dd {
	padding    : 8px 0px;
	float      : right;
	text-align : right;
}

dd.text {
	text-align : left;
	float      : left;
	padding    : 0 0 8px 0;
	margin     : -4px 0 0 0;
}

section {
	overflow : hidden;
}

.magnific-beta {
	transition : all 0.5s ease-in-out;
}

.magnific-beta {
	filter : saturate(0.01);
}

.magnific-beta:hover {
	filter : saturate(1);
}

.arrow-down {
	animation      : updown2 3s infinite ease-in-out;
	position       : absolute;
	bottom         : 0px;
	left           : 0;
	right          : 0;
	text-transform : capitalize;
}

.button-holder {
	height : 130px;
}

section.bg-black > .flex > div > .inner {
	color : var(--primary);
}

button em {
	color : #000 !important;
}

.footer-contents,
.footer-contents p:not(.h5) {
	font-size : 12px;
}

@keyframes updown2 {
	0% {
		padding-bottom : 10px;
		/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/
	}

	50% {
		padding-bottom : 0px;
		/*box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/
	}

	100% {
		padding-bottom : 10px;
		/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/
	}
}

/* //////////////////////////////////////////////////////////// */
/* // Footer */
/* //////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////// */
/* // Buttons */
/* //////////////////////////////////////////////////////////// */
.button-submit {

	transition       : all 0.5s ease-in-out;
	background-color : var(--primary);
	color            : #000;
	padding          : 15px 40px;
	font-family      : var(--alt-font);
	font-size        : 17px;
}

.button-submit:hover {
	background-color : var(--primary-darker);
	color            : #000;
}

/* //////////////////////////////////////////////////////////// */
/* // Forms */
/* //////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////// */
/* // Custom */
/* //////////////////////////////////////////////////////////// */


.artist-impression {
	bottom      : 2px !important;
	left        : 6px !important;
	color       : #FFF;
	font-size   : 10px;
	position    : absolute;
	z-index     : 8;
	margin      : 0 !important;
	text-align  : right;
	opacity     : 0.5;
	text-shadow : 0px 0px 3px #000000;
}

.coming-soon{
	top: 15px;
	right: 15px;
	padding: 5px 15px;
	display: inline-block;
	background: var(--primary-darker);
	z-index: 20;
}

.max-w-7xl {
	max-width : 90rem;
}

.gr-1 {
	display               : grid;
	grid-template-columns :  32% 1fr 1fr;
	grid-gap              : 70px;
}

.gr-2 {
	display               : grid;
	grid-template-columns :  26% 1fr 1fr;
	grid-gap              : 80px;
}
.gr-3 {
	display               : grid;
	grid-template-columns :  1fr 2fr;
	grid-gap              : 35px;
}

.gr-4 {
	display               : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap              : 70px;
}

.gr-contact {
	display               : grid;
	grid-template-columns :  35% 1fr;
	grid-gap              : 80px;
}

.gr-team {
	display               : grid;
	grid-template-columns : 170px 1fr;
	grid-gap              : 30px;
}

.gr-pro {
	display               : grid;
	grid-template-columns : 300px 1fr;
	grid-gap              : 80px;
	grid-template-areas   :	"pro-text pro-images";
}


.bg-image-absolute {
	position   : absolute;
	left       : 0;
	top        : 0;
	object-fit : cover;
	width      : 100%;
	height     : 100%;
}

.vimeo-wrapper {
	position       : absolute;
	top            : 0;
	left           : 0;
	width          : 100%;
	height         : 100%;
	z-index        : 0;
	pointer-events : none;
	overflow       : hidden;
}

.vimeo-wrapper iframe {
	width      : 100vw;
	height     : 56.25vw;
	min-height : 100vh;
	min-width  : 177.77vh;
	position   : absolute;
	top        : 50%;
	left       : 50%;
	transform  : translate(-50%, -50%);
}

.inner-ani > div,
.inner-ani > img {
	filter : drop-shadow(0px 0px 5px #0000002F);
}

.bg-black em {
	color : var(--primary);
}

h1.has-line {
	margin-bottom : 100px;
}

h1.has-line div {
	position         : absolute;
	background-color : var(--primary);
	width            : 122px;
	height           : 4px;
	left             : 0;
	bottom           : -30px;
}

.white-area {
	background-color : rgba(255, 255, 255, 0.8);
	padding          : 50px 80px;
	max-width        : 80%;
	margin-left      : auto;
	width            : 622px;
}

.white-area-2 {
	background-color : rgba(255, 255, 255, 1);
	padding          : 50px 80px;
}


.blue-line {
	position         : absolute;
	top              : -10px;
	left             : 0;
	height           : 2px;
	width            : 100%;
	background-color : var(--primary);
}

.white-line {
	position         : absolute;
	top              : -10px;
	left             : 0;
	height           : 2px;
	width            : 100%;
	background-color : #fff;
}

.swiper-button-next {
	top     : 30px;
	display : inline-block;
	width   : auto;
	height  : auto;
}

.project-slider-section .swiper-button-next {
	top : 18px;
}

.swiper-button-next::after {
	content : none;
}

.slider_1,
.slider_2 {
	width : calc(100% - 100px);
}

.pro-text {
	grid-area : pro-text;
}

.pro-images {
	grid-area : pro-images;
}

.img-1 {
	grid-area : img-1;
}

.img-2 {
	grid-area : img-2;
}

.img-3 {
	grid-area : img-3;
}

.gr-pro-img-1 {
	display             : grid;
	grid-gap            : 15px;
	grid-template-areas :
			"img-1 img-2"
			"img-1 img-3";
}


.gr-pro-img-2 {
	display             : grid;
	grid-gap            : 15px;
	grid-template-areas :
			"img-1 img-2";
}

.gr-pro-img-3 {
	display             : grid;
	grid-gap            : 15px;
	grid-template-areas :
			"img-1 img-2 img-3";
}

.gr-pro-img-1 img,
.gr-pro-img-2 img,
.gr-pro-img-3 img {
	height     : 100%;
	object-fit : cover;
}

.text-black .swiper-button-next {
	color : #000;
}

.text-white .fancy,
.text-white .fancy em {
	color : #fff;
}

.fancy {
	font-weight   : bold;
	padding       : 8px 8px 8px 0px !important;
	border-top    : 4px solid var(--primary);
	border-bottom : 4px solid var(--primary);
	display       : inline-block;
	margin        : 40px 0 0 0;
}

section.bg-black .swiper-button-next,
section.bg-black .swiper-button-next em {
	color : #fff;
}

/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////// */

@media (min-width : 1600px) {

}

@media (min-width : 1500px) {
	.fix-3 {

	}
}

@media (min-width : 1200px) {

	.button-holder {
		height : 150px;
	}
}


@media (min-width : 769px) {
	body.scrolled.show-burger .burger-b {
		opacity    : 1;
		visibility : visible;
	}

	.nav-2 .n,
	.nav-holder .n {
		background   : #fff;
		height       : 2px;
		width        : 0%;
		position     : absolute;
		left         : 0;
		right        : 0;
		margin-right : auto;
		margin-left  : auto;
		bottom       : 2px;
		transition   : all 0.5s ease;
	}

	.nav-2 .n {
		background : #000;
	}

	.nav-holder .active .n, .nav-holder li:hover .n {
		width : calc(100% + 15px);
	}

	.nav-2 li:hover .n {
		width : calc(100%);
	}
}

@media (max-width : 1300px) {

	.gr-footer {
		grid-template-columns : 22% 1fr;
	}
}

@media (max-width : 1200px) {

	.white-area-2 {
		padding : 30px 30px;
	}
}

@media (max-width : 1100px) {

	.gr-footer {
		grid-template-columns : 11% 1fr;
	}
}

@media (max-width : 1024px) {

	.slider_1,
	.slider_2 {
		width : 100%;
	}

	.gr-pro {
		display               : grid;
		grid-template-columns : 300px 1fr;
		grid-gap              : 30px;
	}

	.gr-pro-img-1 {
		display             : grid;
		grid-gap            : 15px;
		grid-template-areas :
			"img-1"
			"img-2"
			"img-3";
	}

	.gr-pro-img-2 {
		grid-template-areas :
			"img-1"
			"img-2";
	}

	.gr-pro-img-3 {
		grid-template-areas :
			"img-1"
			"img-2"
			"img-3";
	}

	.project-slider-section .swiper-button-next {
		top   : -57px;
		right : -5px;
	}

	.gr-contact {
		grid-template-columns : 1fr;
		grid-gap              : 30px;
	}

}

@media (max-width : 768px) {

	.fix-4 {

	}

	.fix-5 {

	}

	body.scrolled .burger-b {
		opacity    : 1;
		visibility : visible;
	}


	.fancy {
		padding : 8px 8px 8px 8px !important;
		display : block;
		margin  : 0px auto 0px auto;
		width   : 214px;
	}

	.white-area {
		padding : 40px 40px;
	}

	.gr-1,
	.gr-2,
	.gr-3,
	.gr-4 {
		grid-template-columns :  1fr;
		grid-gap              : 50px;
		grid-gap              : 0px;
	}

	body, .generic {
		line-height : var(--step-4);
	}

	h1.has-line {
		margin-bottom : 60px;
	}

	.swiper-button-next {
		top   : -30px;
		right : -5px;
	}

	.swiper-button-next em {
		display : none;
	}

	.project-slider-section .swiper-button-next {
		top : -30px;
	}

	.gr-pro {
		display               : grid;
		grid-template-columns : 1fr;
		grid-gap              : 30px;
		grid-template-areas   :
			"pro-images"
			"pro-text";
	}

	p.alt-font.pb-6 {
		padding-bottom : 0rem;
	}

	.fix-4 img {
		margin-top : 30px;
	}

}

@media (max-width : 640px) {
	body, .generic {
		font-size   : 15px;
		line-height : 20px;
	}

	.generic p.alt-font, h5, .h5 {
		font-size   : var(--step-4);
		line-height : var(--step-2);
	}

	.gr-team {
		display               : grid;
		grid-template-columns : 1fr;
		grid-gap              : 30px;
	}

}

@media (max-width : 480px) {

	.white-area {
		padding : 30px;
	}
}