html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	scroll-behavior: smooth;
}

	@media only screen and (min-width: 2048px){
		html{
			font-size: 125%;
		}
	}

/* Normal width */

@font-face {
	font-family: 'szarpen';
	src: url('../fonts/szarpen-medium.woff2') format('woff2'),
		 url('../fonts/szarpen-medium.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'szarpen';
	src: url('../fonts/szarpen-bold.woff2') format('woff2'),
		 url('../fonts/szarpen-bold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}


/* Super width */

@font-face {
	font-family: 'szarpen-wide';
	src: url('../fonts/szarpen-medium-wide.woff2') format('woff2'),
		 url('../fonts/szarpen-medium-wide.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'szarpen-wide';
	src: url('../fonts/szarpen-bold-wide.woff2') format('woff2'),
		 url('../fonts/szarpen-bold-wide.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--white-color: #ffffff;
	--super-gray-color: #f9f9f9;
	--gray-color: #EAEAEC;
	--dark-grey-color: #7E7E87;
	--black-color: #222020;
	--purple-color: #3726F2;
	--green-color: #90b483;

	--xl-object-apperance-animation: all .75s cubic-bezier(0.75, 0.01, 0.25, 1);
	--l-object-apperance-animation: all .5s cubic-bezier(0.55, 0, 0.55, 1);
	--s-object-apperance-animation: all 1s cubic-bezier(0.25,1,0.22,1);

	--primary-font-weight: 400;
	--primary-font-family: "szarpen", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--secondary-font-family: "szarpen-wide", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

	--responsive--alignwide: min(calc(56vw - 8 * var(--global--spacing-horizontal)), 1240px) !important;

	--h1-font-weight: 600;
	--h2-font-weight: 400;
	--p-font-weight: 400;
}


/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	margin-top: 0 !important;
}

*, body {
	line-height: 1;
	font-family: var(--primary-font-family);
	color: var(--font-black-color);
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-family: var(--primary-font-family) !important;
}


/* WordPress theme fixes */

header .site-avatar img{
	border-radius: 100rem;
	width: 64px !important;
	height: 64px !important;
}

header .site-avatar,
header .site-branding{
	margin: 0;
	text-align: left;
}

header.new-site-header{
	padding: 2rem;
}

	@media only screen and (max-width: 481px) {
		header.new-site-header{
			padding: 1rem;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		header.new-site-header{
			padding: 2rem;
		}
	}

	.site-main{
		padding: 0 !important;
		margin: 0 !important;
	}

.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
	background: none !important;
	color: inherit !important;
	text-decoration: none;
	outline: 0;
}


/* GLOBAL -- Header */

header{
	padding: 2rem;
	position: fixed;
	z-index: 2;
}

	@media only screen and (max-width: 481px) {
		header{
			position: static;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		header{
			position: static;
		}
	}

	nav.alt a{
		position: relative;
		text-decoration: none;
	}

	nav.alt a.back{
		position: relative;
		z-index: 1;
		height: 64px;
		width: 64px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.4rem;
		font-weight: 400;
		color: var(--black-color);
		opacity: 0;
		transition: var(--s-object-apperance-animation);
		transform: translateY(10%);
	}

		/* Animation  */
		nav.alt.visible a.back{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0s;
		}

	nav.alt a.back .gray{
		position: absolute;
		content: '';
		height: 64px;
		width: 64px;
		background: var(--gray-color);
		border-radius: 100rem;
		z-index: -1;
		transition: var(--s-object-apperance-animation);
	}

	nav.alt a.back:hover .gray{
		transform: scale(1.15);
	}

	.header img{
		width: 64px;
		height: 64px;
		display: block;
		border-radius: 100rem;
		opacity: 0;
		transition: var(--s-object-apperance-animation);
		transform: translateY(10%);
	}

		/* Animation  */
		.header.visible img{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0s;
		}


/* HOME -- Hero section */

.hero{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 50vw;
	/* background: linear-gradient(211.52deg, #EAEAEC 14.86%, #F9F9F9 80.25%), var(--gray-color); */
	position: fixed;
	box-sizing: border-box;
	padding: 8rem 0rem 2rem 8rem;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

	@media only screen and (max-width: 481px) {
		.hero{
			width: 100%;
			position: static;
			padding: 0.25rem 1rem 0;
			margin-bottom: 3.25rem
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.hero{
			width: 100%;
			position: static;
			padding: 0rem 2rem 0;
			margin-bottom: 2.25rem;
		}
	}

	@media only screen and (min-width: 823px) and (max-width: 1124px) {
		.hero{
			width: 42vw;
			padding: 8rem 2rem 0;
		}
	}

	@media only screen and (min-width: 1440px) {
		.hero{
			width: 40vw;}
	}

	@media only screen and (min-width: 2048px){
		.hero{
			width:55vw;
			padding: 16rem 8rem 16rem 16rem;
		}
	}

	.hero h1{
		font-size: 2.4rem;
		line-height: 140%;
		margin: 0 0 2rem 0;
		opacity: 0;
		letter-spacing: 0rem;
		font-weight: var(--h1-font-weight);
		transition: var(--s-object-apperance-animation);
		transform: translateY(7%);
	}

		/* Animation  */
		.hero.visible h1{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.4s;
		}

		@media only screen and (max-width: 481px) {
			.hero h1{
				font-size: 1.8rem;
				margin-bottom: 1rem;
			}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.hero h1{
				font-size: 2.25rem;
				margin-bottom: 1.25rem;
			}
		}

		@media only screen and (min-width: 823px) and (max-width: 1124px) {
			.hero h1{
				font-size: 2.25rem;
			}
		}

	.hero h2{
		font-size: 1.25rem;
		font-weight: var(--h2-font-weight);
		line-height: 160%;
		margin: 0 0 1.25rem 0;
		color: var(--dark-grey-color);
		opacity: 0;
		transition: var(--s-object-apperance-animation);
		transform: translateY(25%);
	}

		/* Animation  */
		.hero.visible h2{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.5s;
		}

		@media only screen and (max-width: 481px) {
			.hero h2{
				font-size: 1rem;
			}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.hero h2{
				font-size: 1.15rem;
			}
		}

		@media only screen and (min-width: 823px) and (max-width: 1124px) {
			.hero h2{
				font-size: 1.15rem;
			}
		}

	.hero a.button{
		margin-top: 0.5rem;
		border: none;
		font-size: 1.25rem;
		color: var(--black-color);
		text-decoration: none;
		opacity: 0;
		transition: var(--s-object-apperance-animation);
		transform: translateY(20%);
	}

		/* Animation  */
		.hero.visible a.button{
			opacity: 1;
			border: none;
			transform: translateY(0%);
			transition-delay: 0.6s;
		}

	@media only screen and (max-width: 481px) {
		.hero a{
			text-align: center;
			font-size: 1rem !important;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.hero a{
			font-size: 1.15rem !important;
		}
	}

	@media only screen and (min-width: 823px) and (max-width: 1124px) {
		.hero a{
			font-size: 1.15rem !important;
		}
	}

.scrollable{
	background-color: var(--white-color);
	display: flex;
	width: 50vw;
	flex-direction: column;
	align-items: flex-end;
	position: absolute;
	top: 0;
	right: 0;
	padding: 5.25rem 5rem 1rem 0;
	opacity: 0;
	transform: translateY(1%);
	transition: var(--xl-object-apperance-animation);
}

	/* Animation  */

	.work_list.scrollable.visible{
		opacity: 1;
		transform: translateY(0%);
		transition-delay: 0s;
	}

	@media only screen and (max-width: 481px) {
		.scrollable{
			width: 100%;
			padding: 1rem;
			align-items: center;
			position: static;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.scrollable{
			width: 100%;
			padding: 2rem;
			align-items: center;
			position: static;
		}
	}

	@media only screen and (min-width: 823px) and (max-width: 1124px) {
		.scrollable{
			margin-top: 0 !important;
			top: 0;
		}
	}

	@media only screen and (min-width: 1440px) {
		.scrollable{
			width: 60vw;
			padding: 6rem 5rem 1rem 0;
			align-items: center;}
	}

	@media only screen and (min-width: 2048px){
		.scrollable{
			width:45vw;
		}
	}

	.work_list.scrollable.visible .work_item{
		transition: var(--l-object-apperance-animation);
	}

		.work_list.scrollable .work_item:nth-child(2){
			position: absolute;
			transform: translateY(calc(0vh - 75vh));
			transition-delay: 0.75s;
			z-index: 2;
		}

			@media only screen and (min-width: 823px) and (max-width: 1124px) {
				.work_list.scrollable .work_item:nth-child(2){
					transform: translateY(calc(0vh - 65vh));
				}
			}

		.work_list.scrollable .work_item:nth-child(3){
			position: absolute;
			transform: translateY(calc(0vh - 155vh));
			transition-delay: .5s;
			z-index: 3;
		}

			@media only screen and (min-width: 823px) and (max-width: 1124px) {
				.work_list.scrollable .work_item:nth-child(3){
					transform: translateY(calc(0vh - 130vh));
				}
			}

		.work_list.scrollable .work_item:nth-child(4){
			position: absolute;
			transform: translateY(calc(0vh - 235vh));
			transition-delay: .25s;
			z-index: 4;
		}

		@media only screen and (min-width: 823px) and (max-width: 1124px) {
			.work_list.scrollable .work_item:nth-child(4){
				transform: translateY(calc( 0vh - 200vh));
			}
		}

		.work_list.scrollable .work_item:nth-child(5){
			position: absolute;
			transform: translateY(calc(0vh - 315vh));
			transition-delay: 0s;
			z-index: 5;
		}

		@media only screen and (min-width: 823px) and (max-width: 1124px) {
			.work_list.scrollable .work_item:nth-child(5){
				transform: translateY(calc( 0vh - 375vh));
			}
		}

		.work_list.scrollable.visible .work_item:nth-child(2),
		.work_list.scrollable.visible .work_item:nth-child(3),
		.work_list.scrollable.visible .work_item:nth-child(4),
		.work_list.scrollable.visible .work_item:nth-child(5){
			transform: initial;
			position: relative;
		}


.work_list{
	margin: 0 !important;
}

.work_list a{
	text-decoration: none;
}

.work_list a:hover img{
	transform: scale(1.15);
}

	@media only screen and (max-width: 481px) {
		.work_list a:hover img{
			transform: scale(1);
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.work_list a:hover img{
			transform: scale(1);
		}
	}

.work_item{
	margin: 0rem 0 6rem;
}

	@media only screen and (min-width: 823px) and (max-width: 1124px) {
		.work_item img{
			margin-top: 4rem;
		}
	}

	.work_item img{
		height: 80vh;
		width: auto;
		transition: transform .5s cubic-bezier(0.75, 0.01, 0.25, 1);
	}

	@media only screen and (max-width: 481px) {
		.work_item img{
				height: auto;
				width: 100%;
			}
		}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.work_item img{
			height: auto;
			width: 100%;
		}
	}

	@media only screen and (min-width: 823px) and (max-width: 1124px) {
		.work_item img{
			height: auto;
			width: 100%;
		}
	}

	.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img{
		outline: none !important;
	}

	.work_item h3{
		color: var(--dark-grey-color);
		text-decoration: none;
		font-size: 1.15rem;
		font-weight: 400;
		margin-top: 1.25rem;
		border-radius: 100rem;
		width: fit-content;
		background: var(--white-color);
		transition: all .5s cubic-bezier(0.75, 0.01, 0.25, 1);
	}

	@media only screen and (max-width: 481px) {
		.work_item h3{
			font-size: 1rem;
			color: var(--black-color);
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.work_item h3{
			font-size: 1.15rem;
			color: var(--black-color);
		}
	}

		.work_list a:hover h3{
			transform: translateY(-3rem);
			padding: .75rem 1.25rem;
			font-size: 1.15rem;
			color: var(--black-color);
		}

		@media only screen and (max-width: 481px) {
			.work_list a:hover h3{
				padding: 0;
				font-size: initial;
				transform: translateY(0);
			}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_list a:hover h3{
				padding: 0;
				font-size: 1.15rem;
				transform: translateY(0);
			}
		}

a.top{
	visibility: hidden;
	position: relative;
	bottom: 2rem;
	z-index: 1;
	height: 64px;
	width: 64px;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--black-color);
	transform: rotate(90deg);
}

	a.top .gray{
		position: absolute;
		content: '';
		height: 64px;
		width: 64px;
		background: var(--gray-color);
		border-radius: 100rem;
		z-index: -1;
		transition: var(--s-object-apperance-animation);
	}

	@media only screen and (max-width: 481px) {
		.scrollable a.top{
			display: flex;
			visibility: visible;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.scrollable a.top{
			display: flex;
			visibility: visible;
		}
	}




/* ABOUT -- page */

.about{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap: nowrap;
	justify-content: space-between;
}

	@media only screen and (max-width: 481px) {
		.about{
			flex-direction: column;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.about{
			flex-direction: column;
		}
	}

	.about_column:nth-child(1) {
		width: 50vw;
		margin: 0 auto;
		padding: 8rem 4rem 4rem 8rem;
	}

		@media only screen and (min-width: 2048px){
			.about_column:nth-child(1){
				padding: 16rem 4rem 16rem 16rem;
			}
		}

	.about_column:nth-child(2) {
		width: 50vw;
		margin: 0 auto;
		padding: 8rem 8rem 4rem 4rem;
	}

		@media only screen and (min-width: 2048px){
			.about_column:nth-child(2){
				padding: 16rem 16rem 16rem 4rem;
			}
		}

		@media only screen and (max-width: 481px) {
			.about_column:nth-child(1),
			.about_column:nth-child(2){
				width: auto !important;
				padding: 0rem 1rem 0rem 1rem;
			}
		}


		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.about_column:nth-child(1),
			.about_column:nth-child(2){
				width: auto !important;
				padding: 0rem 2rem 0rem 2rem;
			}
		}



	.about_intro{
		padding: 0rem 0rem 0rem 0rem;
		box-sizing: border-box;
	}

	.about h1{
		font-size: 2.4rem;
		font-weight: var(--h1-font-weight);
		line-height: 140%;
		margin: 0 0 2rem 0;
		opacity: 0;
		transform: translateY(20%);
		transition: var(--s-object-apperance-animation);
	}

		/* Animation */

		.about.visible h1{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.1s;
		}

		@media only screen and (max-width: 481px) {
			.about h1{
				font-size: 1.8rem;
				margin-bottom: 1rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.about h1{
				font-size: 2.25rem;
				margin-bottom: 1.25rem;
			}
		}



	.about img.photo{
		width: 100%;
		opacity: 0;
		margin: 3.25rem 0;
		transform: translateY(5%);
		transition: var(--l-object-apperance-animation);
	}

		/* Animation  */
		.about.visible img.photo{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.2s;
		}

		@media only screen and (max-width: 481px) {
			.about img.photo{
				margin: 0.5rem 0 2rem 0!important;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.about img.photo{
				margin: 1.25rem 0 2.25rem 0 !important;}
		}

	.about h2{
		font-size: 2rem;
		font-weight: 400;
		line-height: 140%;
		margin: 0 0 1.85rem 0;
		opacity: 0;
		transform: translateY(15%);
		transition: var(--s-object-apperance-animation);
	}

		/* Animation */

		.about.visible h2{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.5s;
		}

		@media only screen and (max-width: 481px) {
			.about h2{
				font-size: 1.35rem;
				margin-bottom: 1rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.about h2{
				font-size: 1.65rem;
				margin-bottom: 1rem;}
		}

	.about h3{
		font-size: 1.85rem;
		font-weight: 400;
		line-height: 140%;
		margin: 3rem 0 1.25rem 0;
	}

	.about p{
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 160%;
		margin: 0 0 1.25rem 0;
		/* color: var(--dark-grey-color); */
		opacity: 0;
		transform: translateY(10%);
		transition: var(--s-object-apperance-animation);
	}

		/* Animation */

		.about.visible p{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: .6s;
		}

		@media only screen and (max-width: 481px) {
			.about p{
				font-size: 1rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.about p{
				font-size: 1.15rem;}
		}

		.about.visible .photo_column p{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: .3s;
		}

	.about ul{
		transition: all .5s ease-in-out;
		transform: translateY(10%);
		margin: 1rem 0;
		padding: 0;
		font-size: 1rem;
		font-weight: 400;
		line-height: 160%;
		opacity: 0;
		transform: translateY(5%);
		transition: var(--s-object-apperance-animation);
	}

		/* Animation */

		.about.visible ul{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.7s;}

		@media only screen and (max-width: 481px) {
			.about ul{
				margin: 0 !important;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.about ul{
					margin: 1rem 0 !important;}
		}

	.about ul h3{
		margin: 0;
		padding: 0;
	}

	.about ul li:first-child{
		font-size: 1.85rem;
		font-weight: 400;
		line-height: 140%;
		margin: 2rem 0 0 0;
	}

	@media only screen and (max-width: 481px) {
		.about ul li:first-child{
			font-size: 1.35rem;
			margin: 1.25rem 0 0 0;}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.about ul li:first-child{
			font-size: 1.65rem;
			margin: 1.25rem 0 0 0;}
	}

	.about ul li:last-child{
		border: none;
	}

	.about ul li{
		border-bottom: 1px solid #000;
		padding: 1rem 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		line-height: 160%;
		align-items: center;
	}

	.about ul li span{
		text-align: right;
		margin-left: 1.6rem;
	}

	.about ul li a{
		text-decoration: none;
		color: inherit;
		font-size: 1rem;
	}

	@media only screen and (max-width: 481px) {
		.about ul li a,
		.about ul li{
			font-size: 1rem;
			padding: 0.5rem 0;
			line-height: 150%;}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.about ul li a,
		.about ul li{
			font-size: 1.15rem;
			padding: 0.5rem 0;
			line-height: 150%;}
	}

/*  WORK - Page ------- */

	/*  Password protected  */

	.password-protected .work_container{
		display: none;
	}

	.password-protected .entry-content{
		margin-top: 10rem;
	}

		@media only screen and (max-width: 481px) {
			.password-protected .entry-content{
				margin-top: 0;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.password-protected .entry-content{
				margin-top: 0;}
		}

	@media only screen and (max-width: 481px) {
		.password-protected .work_cover{
			display: none; }
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.password-protected .work_cover{
			display: none; }
	}

	.nda_gate{
		max-width: var(--responsive--aligndefault-width) !important;
	}

	.nda_gate h1{
		font-size: 2.4rem;
		font-weight: var(--h1-font-weight);
		line-height: 140%;
		margin: 0 0 1.85rem 0;
		opacity: 0;
		transition: var(--s-object-apperance-animation);
		transform: translateY(7%);
	}

		/* Animation  */

		.nda_gate h1.visible{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.4s;
		}

		@media only screen and (max-width: 481px) {
			.nda_gate h1{
				font-size: 1.8rem;
				margin-bottom: 1rem;
				line-height: 140%;
				letter-spacing: 0rem;
			}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.nda_gate h1{
				font-size: 2.25rem;
			}
		}

	.nda_gate p{
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 140%;
		margin: 0 0 1.85rem 0;
		opacity: 0;
		color: var(--dark-grey-color);
		transition: var(--s-object-apperance-animation);
		transform: translateY(25%);
	}

		/* Animation  */

		.nda_gate p.visible{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.5s;
		}

		@media only screen and (max-width: 481px) {
			.nda_gate p{
				font-size: 1rem !important;
			}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.nda_gate p{
				font-size: 1.15rem !important;
			}
		}

	.nda_gate .password-form-inputs{
		display: flex;
		flex-direction: row;
		width: 100%;
		opacity: 0;
		transition: var(--s-object-apperance-animation);
		transform: translateY(25%);
	}

		.nda_gate .password-form-inputs.visible{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.6s;
		}

		@media only screen and (max-width: 481px) {
			.nda_gate .password-form-inputs{
				flex-direction: row;
			}
		}

	.nda_gate input{
		margin: 0 .5rem 0 .5rem !important;
	}

		@media only screen and (max-width: 481px) {
			.nda_gate input{
				margin: 0 0 1rem 0 !important;
			}
		}

		@media only screen and (max-width: 481px) {
		.nda_gate input::placeholder{
				font-size: 1rem;
			}
		}

	.nda_gate input[type="password"]{
		width: auto;
		margin: 1rem 0 0 0;
		border: 0;
		background-color: var(--gray-color) !important;
		color: var(--black-color) !important;
		border-radius: 100rem;
		padding: 1rem 2rem;
	}

		@media only screen and (max-width: 481px) {
			.nda_gate .password-form-inputs input[type="password"]{
				width: 75%;
				margin-right: .5rem !important;}
		}

	.nda_gate input[type="submit"]{
		height: 64px;
		width: 64px;
		background-color: var(--black-color) !important;
		color: var(--white-color) !important;
		border-radius: 100rem;
		border: 0 !important;
		padding: 4px;
		line-height: 100%;
	}

	.nda_gate input[type="submit"]:hover{
		background-color: var(--gray-color) !important;
		color: var(--black-color) !important;
		transition: all 0.25;
		transition-delay: 0s;
	}

	.nda_gate input:focus{
		outline-offset: 0 !important;
		outline: none !important;
	}

	.password-protected .work_content.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
		max-width: none;
	}

	@media only screen and (max-width: 481px) {
		.password-protected .work_content.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
			max-width: none !important;}
		}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.password-protected .work_content.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
			max-width: none !important;}
	}

	@media only screen and (min-width: 823px) and (max-width: 1124px) {
		.password-protected .work_content.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
			 max-width: var(--responsive--aligndefault-width) !important;
		}
	}

/* Work template  */

.work_container{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	align-content: stretch;
	flex-wrap: wrap;
	justify-content: space-between;
}

	@media only screen and (max-width: 481px) {
	.work_container{
		margin-bottom: 1rem !important;}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.work_container{
		margin-bottom: 2rem !important;}
	}

	.work_hero{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: 100%;
		height: auto;
	}

		@media only screen and (max-width: 481px) {
			.work_hero{
				flex-direction: column;
				padding: 0 0 1rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_hero{
			flex-direction: column;
				padding: 0;}
		}

		.work_content{
			padding-bottom: 4rem;
			opacity: 0;
			transform: translateY(1%);
		}

			/* Animation  */

			.work_content.visible{
				opacity: 1;
				transition: var(--s-object-apperance-animation);
				transform: translateY(0%);
				transition-delay: 0.4s;
			}

			@media only screen and (max-width: 481px) {
				.work_content.visible{
					transition-delay: 0.3s;
				}
			}

		@media only screen and (max-width: 481px) {
			.work_content.entry-content{
				padding: 0.25rem 1rem 0 !important;
				width: 100%;
				margin: 0;
			}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_content.entry-content{
				padding-bottom: 0rem !important;
			}
		}

		.work_content.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
			max-width: 820px;
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_content.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
				max-width: auto;
			}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_content{
				padding: 0.25rem 2rem 0 2rem !important;}
		}

	.work_intro{
		padding: 8rem 4rem 8rem 8rem;
		width: 70vw;}

	@media only screen and (max-width: 481px) {
		.work_intro{
			padding: 0;
			width: 100%;}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.work_intro{
			padding: 0;
			width: 100%;}
	}

	@media only screen and (min-width: 2048px){
		.work_intro{
			padding: 16rem 4rem 8rem 16rem;
		}
	}

		.work_intro h1{
			font-size: 2.4rem;
			font-weight: var(--h1-font-weight);
			line-height: 140%;
			padding: 0;
			margin: 0 !important;
			opacity: 0;
			transition: var(--s-object-apperance-animation);
			transform: translateY(7%);}

			/* Animation  */
			.work_intro.visible h1{
				opacity: 1;
				transform: translateY(0%);
				transition-delay: 0.4s;}

		@media only screen and (max-width: 481px) {
			.work_intro h1{
				padding: 0 1rem 0 1rem;
				font-size: 1.8rem;
				line-height: 140%;}
		}


		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_intro h1{
				font-size: 2.25rem;
				padding: 0 2rem 0 2rem;
			}
		}

		/* @media only screen and (min-width: 1440px) {
			.work_intro{
				padding: 8rem 8rem 2rem 8rem;
			}
		} */

	.work_preview{
		width: 30vw;
		padding: 8rem 8rem 8rem 4rem;
		flex-direction: row;
		display: flex;
		justify-content: flex-end;}

		@media only screen and (max-width: 481px) {
			.work_preview{
				padding: 0;
				justify-content: flex-start;
			  width: 100%;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_preview{
				padding: 0;
				justify-content: flex-start;
			  	width: 100%;}
		}

		@media only screen and (min-width: 2048px){
			.work_preview{
				padding: 16rem 16rem 8rem 4rem;}
		}

		.work_preview p{
			font-size: 1.25rem;
			font-weight: 400;
			line-height: 180%;
			margin: .5rem 0;
			padding: 0;
			color: var(--dark-grey-color);
			opacity: 0;
			transition: var(--s-object-apperance-animation);
			transform: translateY(7%);}

			/* Animation  */
			.work_preview.visible p{
				opacity: 1;
				transform: translateY(0%);
				transition-delay: 0.5s;
			}

		@media only screen and (max-width: 481px) {
			.work_preview p{
				padding: 0 1rem 0 1rem;
				line-height: 160%;
				margin: 1.25rem 0 0.5rem;
				font-size: 1rem !important;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_preview p{
				margin: 1.5rem 0 2rem;
				padding: 0 2rem 0 2rem;
				font-size: 1.15rem !important;
			}
		}

	.work_cover{
		padding: 0 2rem 4rem 2rem;
		width: 100%;
	}

		@media only screen and (max-width: 481px) {
			.work_cover{
				width: 100%;
				padding: 0}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_cover{
				width: 100%;
				padding: 0}
		}

	.work_cover figure{
		margin: 0 !important;
		padding: 0;
		max-width: none !important;
		width: 100% !important;
	}

		.work_cover img{
			width: 100%;
			margin-top: 0 !important;
			opacity: 0;
			transition: var(--s-object-apperance-animation);
			transform: translateY(7%);
		}

			/* Animation  */
			.work_cover.visible img{
				opacity: 1;
				transform: translateY(0%);
				transition-delay: 0.6s;
			}

	.work_content .alignfull {
		padding: 4rem 2rem 2rem 2rem;
	}

	.work_content .wp-block-columns{
		margin: 3rem auto;
	}

	@media only screen and (max-width: 481px) {
		.work_content .wp-block-columns{
			max-width: none;
			margin: 1rem auto !important;}
	}
	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.work_content .wp-block-columns{
			max-width: none;
			margin: 2rem auto !important;}
	}

	.work_content figure.wp-block-image{
		margin: 3rem auto;}

	@media only screen and (max-width: 481px) {
		.work_content figure.wp-block-image{
			margin: 1rem auto;}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.work_content figure.wp-block-image{
			max-width: none;
			margin: 2rem auto;
		}
	}

	.work_content p{
		font-size: 1.25rem;
		line-height: 160%;
	}

		@media only screen and (max-width: 481px) {
			.work_content p{
				font-size: 1rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_content p{
				font-size: 1.15rem;}
		}

	.work_content h2{
		font-size: 2.25rem;
		font-weight: var(--h2-font-weight);
	}

		@media only screen and (max-width: 481px) {
			.work_content h2{
				font-size: 1.35rem;
				margin: 2rem 0 1.25rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px){
			.work_content h2{
				font-size: 1.65rem;
						margin-bottom: 1rem;}
		}

	.work_content h3{
		font-size: 2rem;
		font-weight: var(--h2-font-weight);
	}

	.work_content h4{
		font-size: 1.5rem;
		font-weight: var(--h2-font-weight);
	}

		@media only screen and (max-width: 481px) {
			.work_content h4{
				font-size: 1rem;
				font-weight: 600;
				letter-spacing: 0.005rem;
				margin: 0.5rem 0 .75rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_content h4{
				font-size: 1.15rem;
				font-weight: 600;
				letter-spacing: 0.005rem;}
		}

	.work_content ul{
		margin: 2rem 0 2rem;
		padding: 0;
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 160%;
		list-style: none;
	}

	.work_content ol{
		margin: 3rem 0 3rem;
		padding: 0;
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 160%;
	}

		@media only screen and (max-width: 481px) {
			.work_content ol,
			.work_content ul{
				margin: 1rem 0 1rem;
				font-size: 1rem;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_content ol,
			.work_content ul{
				margin: 1.5rem 0 1.5rem;
				font-size: 1.15rem;}
		}

	.work_content ul li::before{
		position: absolute;
		content: "";
		left: 0.75rem;
		background: var(--dark-grey-color);
		width: 0.25rem;
		height: 0.25rem;
		background-position: center;
		top: 1.2rem;
		border-radius: 100%;
	}

		@media only screen and (max-width: 481px) {
			.work_content ul li::before{
				width: 0.25rem;
				top: 0.75rem;
				left: 0.5rem;}
		}

	.work_content ul li{
		position: relative;
		padding: .5rem 0 .5rem 2rem;
		line-height: 140%;
		position: relative;
		padding-left: 2.25rem;
	}

		@media only screen and (max-width: 481px) {
			.work_content ul li{
				padding: .25rem 0 .25rem 1.5rem}
		}

	.work_content ol li{
		padding: 0.5rem 1rem 1rem .75rem;
		margin-left: 1.5rem;
		line-height: 160%;
	}

		@media only screen and (max-width: 481px) {
			.work_content ol li{
				padding: 0.5rem 1rem 1rem .25rem;
				margin-left: 1.25rem;}
		}

	/* Mobile spacer styling  */

	@media only screen and (max-width: 481px) {
		.wp-block-spacer{
			display: none !important;
		}
	}


	/* Mobile images styling  */

	@media only screen and (max-width: 481px) {
		.work_content figure{
			left: -1rem;
			right: -1rem;
			position: relative;
			width: 100%;
			overflow: visible;
		}

		.work_content figure img{
			max-width: none;
			left: 0rem;
			position: relative;
			right: 0rem;
			width: auto !important;
		}
	}

	.wp-block-columns.has-background{
		padding: 3rem;
	}

	@media only screen and (max-width: 481px) {
		figure.columns-no-margin,
		.wp-block-columns.columns-no-margin{
			margin-top: 1rem !important;
			margin-bottom: 1rem !important;
		}
	}

	@media only screen and (max-width: 481px) {
		.wp-block-columns.has-background{
			left: -1rem;
			right: -1rem;
			position: relative;
			width: calc(100% + 2rem);
			max-width: none !important;
			padding: 1rem 1rem;
		}

		.wp-block-columns.has-background .wp-block-column{
			left: 0rem;
			position: relative;
			right: 0rem;
			margin-bottom: 0;
			max-width: none !important;
		}

		.wp-block-columns.has-background .wp-block-column figure{
			left: 0rem;
			right: 0rem;
			position: relative;
			max-width: none !important;
			overflow: visible;
			padding: 0;
			margin: 1rem 0;
		}

		.wp-block-columns.has-background .wp-block-column figure:first-child{
			margin-top: 0!important;
		}

		.wp-block-columns.has-background .wp-block-column figure:last-child{
			margin-bottom: 0!important;
		}

		.wp-block-columns.has-background .wp-block-column figure img{
			width: 100% !important;
		}
	}


	/* Work pagination  */

	.work_pagination{
		margin: 3rem auto 4rem !important;
		align-items: center;
		max-width: 820px;
		display: flex;
		justify-content: center;
		transition: all .5s cubic-bezier(0.75, 0.01, 0.25, 1);
		opacity: 0;
		transition: var(--s-object-apperance-animation);
		transform: translateY(7%);
		align-content: center;}

			/* Animation  */
			.work_pagination.visible {
				opacity: 1;
				transform: translateY(0%);
				transition-delay: 0.2s;}

		@media only screen and (max-width: 481px) {
			.work_pagination{
				margin: 1rem auto 1rem !important;}
		}

		@media only screen and (min-width: 482px) and (max-width: 822px) {
			.work_pagination{
				margin: 2rem auto 2rem !important;}
		}

	.work_pagination .button{
		display: flex;
    flex-direction: row;
    flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-family: inherit;
		transform: translateY(0%);
		margin: 0 !important;}

		.work_pagination h2{
			font-size: 2.4rem;
			font-weight: var(--h1-font-weight);
			color: var(--black-color) !important;
			line-height: 140%;
			padding: 0;
			margin: 0 !important;}

			@media only screen and (max-width: 481px) {
				.work_pagination h2{
					padding: 0 1rem 0 1rem;
					font-size: 1.8rem;
					line-height: 140%;}
			}

			@media only screen and (min-width: 482px) and (max-width: 822px) {
				.work_pagination h2{
					font-size: 2.25rem;
					padding: 0 2rem 0 2rem;
				}
			}

			.work_pagination .label{
				font-size: 1.25rem;
				font-weight: 400;
				line-height: 180%;
				margin: .5rem 0 0;
				padding: 0;
				color: var(--dark-grey-color);}

			@media only screen and (max-width: 481px) {
				.work_pagination .label{
					padding: 1rem 1rem .25rem 1rem;
					line-height: 160%;
					margin: 1.25rem 0 0;
					font-size: 1rem !important;}
			}

			@media only screen and (min-width: 482px) and (max-width: 822px) {
				.work_pagination .label{
					padding: 1rem 2rem .25rem 2rem;
					font-size: 1.15rem !important;
				}
			}



			.work_pagination .back{
				text-decoration: none;
				position: relative;
				z-index: 1;
				height: 64px;
				width: 64px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.4rem;
				margin-left: 2rem;
				font-weight: 400;
				color: var(--black-color);
				opacity: 0;
				transition: var(--s-object-apperance-animation);
				transform: translateY(10%);}

				/* Animation  */
				.work_pagination .back{
					opacity: 1;
					transform: translateY(0%);
					transition-delay: 0s;
				}

				@media only screen and (max-width: 481px) {
						.work_pagination .back{
							margin-right: 1rem;
							margin-left: 0.5rem;
			    		margin-top: 2rem;}
				}

				@media only screen and (min-width: 482px) and (max-width: 822px) {
					.work_pagination .back{
						margin-right: 2rem;
						margin-left: 0rem;
						margin-top: 2rem;}
				}

			.work_pagination .back .gray{
				position: absolute;
				content: '';
				height: 64px;
				width: 64px;
				background: var(--gray-color);
				border-radius: 100rem;
				z-index: -1;
				transition: var(--s-object-apperance-animation);
			}

			.work_pagination .back:hover .gray{
				transform: scale(1.15);
			}




/*  Global - Footer ------- */

footer{
	position: fixed;
	z-index: 10;
	bottom: 2rem;
	right: 2rem;
	padding: 0 !important;
	margin: 0 !important;
	background: #fff;
	border-radius: 100px;
}

	 @media only screen and (max-width: 481px) {
		footer{
			position: relative;
			bottom: 0;
			padding: 0 !important;
			margin: 0 0 1rem 0 !important;
			width: 100% !important;
			left: auto;
			right: auto;
			max-width: none !important;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px){
		footer{
			position: relative;
			padding: 0 !important;
			margin: 1rem 0 0 0 !important;
			width: 100%;
			left: auto;
			right: auto;
			max-width: none !important;
		}
	}

footer .site_update{
	position: relative;
	padding: 0;
	margin: 0;
	border-radius: 100rem;
	display: block;
	text-decoration: none;
	font-size: .96rem;
	color: var(--dark-grey-color);
}

	@media only screen and (max-width: 481px) {
		footer .site_update{
			text-align: center;
			width: 100%;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px){
		footer .site_update{
			text-align: center;
			width: 100%;
		}
	}

	@media only screen and (min-width: 823px) and (max-width: 1124px) {
		footer .site_update{
			text-align: center;
			width: 100%;
		}
	}

footer .site_update img{
	width: 3rem;
	height: 3rem;
	opacity: 0.25;
}

	footer .site_update a:hover img{
		opacity: 1;
	}



/* Cookie notice */

#cookie-notice{
	position: fixed;
	visibility: hidden;
	z-index:1000000;
	box-sizing:border-box;
	color: var(--black-color);
	background-color: var(--white-color);
	border: 1px solid var(--gray-color);
	max-width: 480px;
	left: 2rem;
	bottom: 2rem;
	display: flex;
	flex-direction: row;
	padding: 2rem;
}

	@media only screen and (max-width: 481px){
		#cookie-notice{
			width: 100%;
			max-width: none;
			left: 0;
			bottom: 0;
			border-width: 0;
			box-shadow: 0px -1px 2rem 0 rgb(0 0 0 / 25%);
			padding: 1rem;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px){
		#cookie-notice{
			width: 100%;
			max-width: none;
			left: 0;
			bottom: 0;
			border-width: 0;
			box-shadow: 0px -1px 2rem 0 rgb(0 0 0 / 25%);
		}
	}

	@media only screen and (min-width: 823px) and (max-width: 1124px){
		#cookie-notice{
			max-width: 50vw;
		}
	}

	@media only screen and (min-width: 2048px){
		#cookie-notice{
			max-width: 25vw;
		}
	}

#cookie-notice span{
	font-size: 0.75rem;
	line-height: 1.25rem;
	width: 75%;
}

#cookie-notice button{
	transition: border 0.5s cubic-bezier(0.25,1,0.22,1);
	margin-left: 2rem;
	border: 1px solid;
	background: var(--white-color);
	color: var(--black-color);
	border-color: var(--gray-color);
	font-family: inherit;
	font-size: 0.75em;
	font-weight: 400;
	line-height: 100%;
	padding: 1rem;
	border-radius: 100rem;
	width: 6rem;
	height: fit-content;
}

#cookie-notice button:hover{
	border-color: var(--black-color);
}

#cookie-notice button:focus{
	outline-offset: 0px;
	outline: 0px;
}


/* 404 -- Page */

.four_zero_four{
	padding: 8rem;}

	@media only screen and (max-width: 481px) {
		.four_zero_four{
		padding: 0rem 1rem;}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.four_zero_four{
		padding: 0rem 2rem;}
	}

.four_zero_four h1{
	font-size: 2.4rem;
	line-height: 140%;
	opacity: 0;
		font-weight: var(--h1-font-weight);
		transition: var(--s-object-apperance-animation);
		transform: translateY(7%);
	}

		/* Animation  */
		.four_zero_four.visible h1{
			opacity: 1;
			transform: translateY(0%);
			transition-delay: 0.4s;
		}

	@media only screen and (max-width: 481px) {
		.four_zero_four h1{
			margin-bottom: 1rem;
			font-size: 1.8rem;
		}
	}

	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.four_zero_four h1{
			font-size: 2.25rem;
			margin-bottom: 1.25rem;
		}
	}

.four_zero_four .column{
	width: 50vw;
}

	@media only screen and (max-width: 481px) {
		.four_zero_four .column{
		width: auto;}
	}
	@media only screen and (min-width: 482px) and (max-width: 822px) {
		.four_zero_four .column{
		width: auto;}
	}


/* Element -- Button */

.button {
	cursor: pointer;
	border: none !important;
	margin: 0;
	position: relative;
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 400;
	padding: initial !important;
	background: none;
	transition: var(--s-object-apperance-animation);
	transform: translateY(20%);
}

	.site .button:not(:hover):not(:active):not(.has-background){
		background-color: transparent !important;
	}

	/* Animation  */
	.hero.visible .button{
		opacity: 1;
		transform: translateY(0%);
		transition-delay: .8s;
	}

	.black {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		width: fill-available;
		height: 100%;
		height: fill-available;
		border-radius: 25rem;
		overflow: hidden;
		transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
		background: var(--gray-color);
	}

	.button:hover .black {
		transform: scale3d(1.1,1.1,1);}

	.button .black::before,
	.button .black::after {
		content: '';
		position: absolute;
	}

	.button .black::before,
	.button .black::after {
	  background: #000000;
	}

	.button .black::before {
		width: 110%;
		height: 0;
		padding-bottom: 110%;
		top: 50%;
		left: 50%;
		border-radius: 50%;
		transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
	}

		.button:hover .black::before {
			/* transition: transform 0.4s cubic-bezier(0.75, 0.01, 0.25, 1); */
			transition: var(--s-object-apperance-animation);
			transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
		}

		.button .black::after {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			transition: opacity 0.3s;
		}

		.button:hover .black::after {
			opacity: 1;
			transition-duration: 0.01s;
			transition-delay: 0.3s;
		}

	.button span {
		display: block;
		position: relative;
		padding: 1.4rem 2rem;
		mix-blend-mode: difference;
		color: #ffffff;
	}