/* START: Global tags */
@view-transition {
    navigation: auto
}

::view-transition-group(*) {
    animation-duration: .6s
}

@media (prefers-reduced-motion:reduce) {
    ::view-transition-group(*) {
        animation: none!important
    }
}


/* START: Global tags */
html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	height:100%;
	font-size: .694vw; /*10px*/
}

body {
	width: 100%;
	height: 100%;
	background: var(--black);
	background: var(--softPink);
	font-size: 1rem;
}

* {
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

*:focus {
	outline: none;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

::selection {
	background: black;
	color: white;
}

::-moz-selection {
	background: black;
	color: white;
}

a, a:hover, a:link {
	text-decoration: none;
	transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}

.transition {
	transition: all .4s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}

.slowTransition {
	transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}


/* Page wrapper */
.page-wrapper {
    position: relative;
    display: flex;
    flex-flow: column;
    width: 100%;
    height: fit-content;
    background-color: var(--softPink);
    border-bottom-right-radius: 2.08vw; /*30px*/
    border-bottom-left-radius: 2.08vw; /*30px*/
    padding: var(--topMargin) 0 var(--topMargin);
}

.single-project .page-wrapper {
	padding: calc(var(--topMargin) - 3.889vw) 0 3.51vw; /*51px*/
}

.single-post .page-wrapper {
	padding: calc(var(--topMargin) - 3.889vw) 0 3.51vw; /*51px*/
}

.page-wrapper .top {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
    height: fit-content;
    row-gap: .208vw; /*3px*/
    padding: 0 var(--lateralMargin);
}

.page-wrapper .top .page-title {
	padding-bottom: 2.152vw; /*31px*/
}

.page-wrapper .top .title {
    position: relative;
    display: block;
    width: calc( (100% / 12) * 8);
    padding-bottom: 4.097vw; /*59px*/
}

.page-wrapper .modules {
    position: relative;
    display: flex;
    flex-flow: column;
    row-gap: 4.02vw; /*58px*/
    width: 100%;
    height: fit-content;
}

.single-project .page-wrapper .modules {
    padding: 0 0 4.02vw; /*0 0 58px*/
}


/* PAGE TRANSITION */
#main {
	z-index: 2;
	position: relative;
}

#pageTransition {
	z-index: 20;
	background: white;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition-duration: .6s;
}

#pageTransition.opened {
	opacity: 1;
	pointer-events: initial;
}

#pageTransition.closed {
	pointer-events: none;
	opacity: 0 !important;
}

#pageTransition.show {
	opacity: 1 !important;
	pointer-events: initial;
}


/* LAZY */
picture.lazy,
video.lazy {
	display: block;
	overflow: hidden;
	transition-property: opacity;
	transition: opacity .4s ease-in-out;
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition: opacity .4s ease-in-out;
	-o-transition: opacity .4s ease-in-out;
	opacity: 0;
}

picture.lazy.lazyloaded,
video.lazy.lazyloaded {
	opacity: 1;
}

picture.lazy img,
video.lazy {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}

.aspect-container {
	position: relative;
	width: 100%;
}

.aspect-container picture {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.aspect-container picture img,
.aspect-container video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
}


/* Reveal */
.reveal.revealMove {
	transform: translate(0, 2vw);
}

.reveal.revealOpacity {
	opacity: 0;
}

.reveal.revealMove.revealed {
	transform: translate(0, 0);
}

.reveal.revealOpacity.revealed {
	opacity: 1;
}


/* Embed video */
.embed-video-wrapper {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #151515;
    z-index: 10;
    justify-content: center;
    align-items: center;
    display: none;
    pointer-events: none;
}

.embed-opened .embed-video-wrapper {
    display: flex;
    pointer-events: all;
}

.embed-video-wrapper .video-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: calc(100vw - 5.556vw); /*80px*/
    max-width: 100%;
    height: 100vh;
}

.embed-video-wrapper .video-wrapper iframe {
    width: 100%;
    height: 56.25vw !important;
    min-height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
}

.embed-video-wrapper .close {
    position: absolute;
    display: flex;
    width: fit-content;
    height: fit-content;
    padding: .625vw 1.38vw .763vw 1.38vw; /*9px 20px 11px 20px*/
    border-radius: 3.472vw; /*50px*/
    background-color: var(--black);
    color: var(--white);
    margin-top: 2.78vw; /*40px*/
    cursor: pointer;
    column-gap: 8px;
    align-items: center;
    border: 1px solid transparent;
    top: -1.66vw; /*-24px*/
    right: 2.78vw; /*40px*/
    z-index: 10;
}

.embed-video-wrapper .close:hover {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--black);
}


/* Iframe */
.iframe-wrapper {
	position: fixed;
	display: none;
	z-index: 101;
	width: 100%;
	height: 100vh;
	max-width: 41.67vw; /*600px*/
	max-height: 41.67vw; /*600px*/
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 1.38vw; /*20px*/
	border-radius: 1.38vw; /*20px*/
	overflow: hidden;
	background-color: var(--white);
}

.iframe-opened .iframe-wrapper {
	display: block;
}

.iframe-wrapper .close {
	position: absolute;
	display: block;
	width: 1.25vw; /*18px*/
    height: 1.25vw; /*18px*/
	top: 4.305vw; /*62px*/
    right: 3.125vw; /*45px*/
	background-position: center;
	background-size: contain;
	background-image: url('../../assets/svgs/close.svg');
	background-repeat: no-repeat;
	z-index: 10;
	cursor: pointer;
}

.iframe-wrapper .iframe-inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	/*padding-top: 90px;*/
}


table {
	border: 0;
	border-collapse: 0;
	width: 100%;
}

table th {
	text-align: left;
}

table th,
table td {
	font-size: 1rem;
	line-height: 1.25rem;
	border-bottom: 1px solid var(--softGrey);
	padding: 0.25vw 1vw 0.25vw 0;
}

/* Loader 
.loader {
	position: absolute;
	height: 50px;
	width: 50px;
	background-color: red;
	left: 50%;
	transform: translate(-50%,0);
	bottom: -100px;
	display: none;
}
*/


@media screen and (max-width: 1440px) {
	html {
		font-size: 10px;
	}

	/* Page wrapper */
	.page-wrapper {
		border-bottom-right-radius: 30px;
		border-bottom-left-radius: 30px;
	}

	.single-project .page-wrapper {
		padding: calc(var(--topMargin) - 56px) 0 51px;
	}

	.single-post .page-wrapper {
		padding: calc(var(--topMargin) - 56px) 0 51px;
	}

	.page-wrapper .top {
		row-gap: 3px;
	}

	.page-wrapper .top .page-title {
		padding-bottom: 31px;
	}

	.page-wrapper .top .title {
		padding-bottom: 59px;
	}

	.page-wrapper .modules {
		row-gap: 58px;
	}

	.single-project .page-wrapper .modules {
		padding: 0 0 58px;
	}

	/* Embed video */
	.embed-video-wrapper .video-wrapper {
		width: calc(100vw - 80px);
	}

	.embed-video-wrapper .close {
		padding: 9px 20px 11px 20px;
		border-radius: 50px;
		margin-top: 40px;
		column-gap: 8px;
		top: -24px;
		right: 40px;
	}

	/* Iframe */
	.iframe-wrapper {
		padding: 20px;
		border-radius: 20px;
		max-width: 600px;
		max-height: 600px;
	}

	.iframe-wrapper .close {
		width: 18px;
		height: 18px;
		top: 62px;
    	right: 45px;
	}
}


@media only screen and (max-width: 740px) {
	html {
		font-size: 2.5641vw; /*10px*/
	}

	.single-project .page-wrapper,
	.page-wrapper {
  		padding: var(--topMargin) 0 20.51vw; /*80px*/
		border-bottom-right-radius: 7.69vw;
		border-bottom-left-radius: 7.69vw;
	}

	.page-wrapper .top {
    	row-gap: 2.82vw; /*11px*/
  	}

	.page-wrapper .top .title {
  		width: 100%;
  	}
	
	.page-wrapper .top .page-title {
    	padding-bottom: 2.82vw;
  	}

	.page-wrapper .modules {
		row-gap: 12.82vw; /*50px*/
		padding: 0;
	}

	.single-project .page-wrapper .modules {
		padding: 0 0 10.256vw; /*0 0 40px*/
	}

	/* Embed video */
  	.embed-video-wrapper .video-wrapper {
    	width: calc(100vw - (var(--lateralMargin) * 2));
  	}

	.embed-video-wrapper .close {
		padding: 2.3vw 4.358vw 2.82vw 4.358vw; /*9px 17px 11px 17px*/
		border-radius: 12.82vw; /*50px*/
		margin-top: 0px;
		top: var(--lateralMargin);
		right: var(--lateralMargin);
	}

	/* Iframe */
	.iframe-wrapper {
		max-width: none;
		max-height: none;
		border-radius: 0px;
		padding: 0;
	}

	.iframe-wrapper .close {
		width: 5.128vw; /*20px*/
		height: 5.128vw; /*20px*/
		top: 10.512vw; /*41px*/
		right: var(--lateralMargin);
	}
}


@media only screen and (max-width: 550px) {

}