@charset "utf-8";

/* RESET CSS
======================================== */
*{
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html, body, div, span,
header, footer, section, article, aside, menu, nav,
h1, h2, h3, h4, h5, h6,
p, ol, ul, li, a, strong, b, i, s, address, sub, sup,
form, label,
iframe, embed, audio{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
::-webkit-scrollbar{
	display: none;
}
:focus{
	outline: none !important;
}
:focus::-ms-value{
	color: inherit;
  	background-color: none;
}
::-moz-focus-inner{
  	border: none !important;
}

/*	BASIC STYLES
======================================== */
:root .dark-mode{
	--color: white;
	--bg: black;
	--hover: #555;
}
:root{
	--color: red;
	--bg: white;
	--hover: #555;
}
::selection{
	color: var(--bg);
	background-color: var(--hover);
}
html{
	font-size: 10px;
	scrollbar-width: none;
}
body{
	width: 100vw;
	height: 100%;
	margin: auto;
	font-family: 'Everett', Helvetica, Arial, sans-serif;
	font-variant-ligatures: discretionary-ligatures;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	font-size: 11px;
	/*!!!*/
	line-height: 1.25;
	color: var(--color);
	background-color: var(--bg);
	overflow-x: hidden;
}
@media (min-width: 1281px){
	body{
		font-size: 13px;
	}
}
@media (min-width: 1441px){
	body{
		font-size: 14px;
	}
}
@media (min-width: 1681px){
	html{
		font-size: 12px;
	}
	body{
		font-size: 15px;
	}
}
@media (min-width: 2049px){
	html{
		font-size: 15px;
	}
	body{
		font-size: 15px;
	}
}
@media (max-width: 1112px){
	body{
		font-size: 10px;
	}
}
@media (max-width: 834px){
	body{
		font-size: 14px;
	}
}
@media (max-width: 600px){
	body{
		font-size: 3.6vw;
	}
}
img,
video{
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
  	font-size: 0;
	line-height: 0;
	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
}
video.no-autoplay{
	background-color: black;
}
a{
	width: fit-content;
  	width: -moz-fit-content;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.device a:active,
.desktop a:hover{
	color: var(--hover);
}
svg{
	overflow: visible;
}

/* FONTS
======================================== */
@font-face {
    	font-family: 'Eclect';
    	src: url('../fonts/Eclect.woff2') format('woff2');
    	font-weight: normal;
    	font-style: normal;
	font-display: block;
}
@font-face {
    	font-family: 'Everett';
    	src: url('../fonts/Everett.woff2') format('woff2');
    	font-weight: normal;
    	font-style: normal;
	font-display: block;
}

/* ANIMATIONS
======================================== */
@keyframes marquee-left{
	0%{
		-webkit-transform: translateX(0);
      	   -moz-transform: translateX(0);
      		   transform: translateX(0);
 	}
	100%{
		-webkit-transform: translateX(-100%);
      	   -moz-transform: translateX(-100%);
      		   transform: translateX(-100%);
	}
}

/* LOADER
======================================== */
#loader{
	position: fixed;
	top: 0;
	left: 0;
  	right: 0;
  	bottom: 0;
	width: 100vw;
	height: 100%;
  	align-items: center;
  	background-color: inherit;
	-ms-touch-action: none;
	touch-action: none;
	z-index: 999;
}

/* GENERAL
======================================== */
#container{
	min-height: var(--h);
	padding: .5rem .7rem .7rem;
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	grid-template-rows: min-content;
	grid-gap: 3rem 1rem;
}
@media (max-width: 834px){
	#container{
		padding: 1rem;
		grid-gap: 6rem 1rem;
	}
}
@media (max-width: 600px){
	#container{
		padding-top: .8rem;
	}
}
@media (max-width: 414px){
	#container{
		grid-gap: 4rem 1rem !important;
	}
}

/* HEADER
======================================== */
header{
	grid-column: 13 span;
	display: grid;
	grid-auto-flow: column;
	text-transform: uppercase;
	z-index: 9;
}
body.page-index header,
body.page-typegate header{
	grid-column: 20 span;
	justify-content: space-between;
}
header a{
	height: fit-content;
	height: -moz-fit-content;
}
@media (min-width: 835px){
	body:not(.page-index) header > wrap{
		display: none;
	}
	h1,
	h2{
		display: inline-block;
		margin-right: 1.4ch;
	}
}
@media (min-width: 1921px){
	header{
		grid-column: 14 span;
	}
}
@media (max-width: 834px){
	header{
		grid-column: 20 span;
		justify-content: space-between;
	}
}

/* MENU
======================================== */
#trigger-menu{
	position: fixed;
	top: 1rem;
	right: 1rem;
    	width: 45px;
    	height: 45px;
	display: none;
    	border: 1px solid;
    	border-radius: 100px;
	background-color: rgba(255,255,255,.2);
	-webkit-backdrop-filter: blur(3px);
		   backdrop-filter: blur(3px);
	box-sizing: content-box;
    	cursor: pointer;
	z-index: 9;
}
.dark-mode #trigger-menu{
	background-color: rgba(0,0,0,.2);
}
#trigger-menu span{
	position: absolute;
	display: block;
	background-color: var(--color);
    	-webkit-transition: transform .2s ease-in-out;
    		-o-transition: transform .2s ease-in-out;
    		   transition: transform .2s ease-in-out;
}
#trigger-menu span:first-child{
	top: 22px;
	left: 6px;
	width: 33px;
    	height: 1px;
}
#trigger-menu span:last-child{
	top: 6px;
	left: 22px;
	width: 1px;
    	height: 33px;
}
.menu-open #trigger-menu span{
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		   transform: rotate(45deg);
}
.menu-open #trigger-menu,
.desktop #trigger-menu:hover{
	background-color: var(--color);
}
.menu-open #trigger-menu span,
.desktop #trigger-menu:hover span{
	background-color: var(--bg);
}
menu{
	position: sticky;
	position: -webkit-sticky;
	top: .5rem;
	left: 0;
	height: fit-content;
	height: -moz-fit-content;
    	grid-template-columns: repeat(3, max-content) 1fr;
	grid-gap: 1.4ch;
    	justify-items: flex-end;
	z-index: 8;
}
@media (min-width: 601px){
	menu{
		display: grid !important;
	}
}
@media (max-width: 600px){
	#trigger-menu{
		display: block;
	}
	menu{
		position: fixed;
    		top: calc(4rem + 47px);
		width: 100%;
		padding: 0 1rem;
    		display: none;
	}
	menu a{
		width: 100%;
		margin-bottom: 1rem;
		padding: 1rem 1rem 1.2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 250%;
		text-align: center;
		color: var(--bg);
		border-radius: 100px;
		background-color: var(--color);
		-webkit-user-select: none;
	  	   -moz-user-select: none;
	  	    -ms-user-select: none;
	  		   user-select: none;
	}
	menu a:last-child{
		display: none;
	}
	.device menu a:active,
	.desktop menu a:hover{
		color: var(--color);
		background-color: rgba(222,222,222,.6) !important;
		-webkit-backdrop-filter: blur(5px);
			   backdrop-filter: blur(5px);
	}
}
@media (max-width: 414px){
	#trigger-menu{
		width: 35px;
    		height: 35px;
	}
	#trigger-menu span:first-child{
		top: 17px;
    		width: 23px;
	}
	#trigger-menu span:last-child{
	    	left: 17px;
	    	height: 23px;
	}
	menu{
		top: calc(4rem + 41px);
	}
}

/* Footer
======================================== */
footer{
	grid-column: 20 span;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	align-items: flex-end;
	justify-content: space-between;
	grid-gap: 1rem;
}
@media (min-width: 835px){
	.page-project footer{
		grid-template-columns: repeat(20, 1fr);
	}
	.page-project footer div{
		grid-column: 7 span;
		text-transform: uppercase;
	}
	.page-project footer div:last-child{
		justify-self: flex-end;
	}
	.page-project footer wrap{
		grid-column: 6 span;
	}
	.page-project footer wrap a:first-child{
		margin-right: 1.4ch;
	}
}
@media (min-width: 1113px){
	.page-about footer{
		position: sticky;
		position: -webkit-sticky;
	     bottom: .7rem;
	}
}
@media (min-width: 835px) and (max-width: 1112px){
	.page-about footer{
		padding-top: 3rem;
	}
}
@media (min-width: 1921px){
	.page-project footer div{
		grid-column: 6 span;
	}
	.page-project footer wrap{
		grid-column: 8 span;
	}
}
@media (max-width: 834px){
	.page-index footer,
	footer div{
		display: none;
	}
	.page-project footer{
		grid-template-columns: 1fr;
	}
	.page-project footer wrap{
		display: grid;
		grid-template-columns: 1fr min-content;
	}
}

/* Index
======================================== */
@media (min-width: 835px){
	#satellite{
		position: fixed;
		width: 100vw;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 3;
	}
	#satellite div.project-wrapper{
		position: absolute;
		-webkit-transform: translate(-50%, -50%) translate3d(0,0,0);
		    -ms-transform: translate(-50%, -50%) translate3d(0,0,0);
			-o-transform: translate(-50%, -50%) translate3d(0,0,0);
			   transform: translate(-50%, -50%) translate3d(0,0,0);
		-webkit-transition: top .5s linear, left .5s linear;
			-o-transition: top .5s linear, left .5s linear;
			   transition: top .5s linear, left .5s linear;
	}
	.desktop #satellite div.project-wrapper:hover{
          transition: top 10000s linear, left 10000s linear;
          z-index: 999999 !important;
     }
	#satellite .project-wrapper.horizontal{
		width: 10vw;
		min-width: 120px;
	}
	#satellite .project-wrapper.vertical{
		width: 8vw;
		min-width: 100px;
	}
	#satellite .project-wrapper wrap,
	#satellite .project-wrapper a{
		display: contents;
	}
}
@media (max-width: 834px){
	.page-index #container{
		padding-bottom: 0;
	}
	#satellite{
		grid-column: 20 span;
		display: grid;
    		grid-auto-flow: row;
    		grid-auto-rows: min-content;
    		grid-gap: 0;
	}
	#satellite .project-wrapper{
		margin-bottom: 4rem;
	}
	#satellite a{
		width: 100%;
	}
}
@media (max-width: 600px){
	#satellite .project-wrapper{
		margin-bottom: calc(2rem + 1.2em);
	}
}

/* Navigation
======================================== */
aside{
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	width: 2.7em;
	height: var(--h);
	margin-right: .8rem;
	float: left;
	display: grid;
	grid-auto-rows: min-content;
    	text-transform: uppercase;
	overflow: scroll;
	-webkit-transition: width .5s cubic-bezier(.1,1,.8,1);
		-o-transition: width .5s cubic-bezier(.1,1,.8,1);
		   transition: width .5s cubic-bezier(.1,1,.8,1);
	z-index: 9;
	scrollbar-width: none;
}
aside #marquee{
	position: fixed;
	left: 0;
	bottom: -2.5em;
    	width: var(--h);
    	height: 2.5em;
	display: grid;
    	grid-auto-flow: column;
    	grid-auto-columns: max-content;
	align-items: center;
    	-webkit-transform: rotate(-90deg);
    	    -ms-transform: rotate(-90deg);
	    	-o-transform: rotate(-90deg);
    		   transform: rotate(-90deg);
    	transform-origin: top left;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	z-index: 8;
	pointer-events: none;
	scrollbar-width: none;
}
aside #marquee wrap{
	padding: .1rem 0 .2rem;
	animation: marquee-left linear infinite 10s;
}
aside #marquee wrap span:first-child{
	font-family: 'Eclect';
	font-size: 235%;
	letter-spacing: .15px;
	padding-right: .5rem;
}
aside #marquee wrap span:last-child{
	font-size: 220%;
	padding-right: 1.5rem;
}
aside.active #marquee{
	display: none;
}
aside .project{
	position: relative;
    	width: 100%;
    	padding: .3rem 0 .6rem;
	display: flex;
    	align-items: baseline;
	text-indent: 3rem;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	-webkit-user-select: none;
    	   -moz-user-select: none;
    	    -ms-user-select: none;
    		   user-select: none;
	visibility: hidden;
}
aside .project:not(:last-of-type){
	border-bottom: 2px solid;
}
aside.active .project{
	visibility: visible;
}
aside .project.animated wrap{
	animation: marquee-left linear infinite;
	animation-duration: inherit;
}
aside .project span.title{
	font-family: 'Eclect';
	font-size: 378%;
    	letter-spacing: .15px;
}
aside .project span:not(.title){
	margin: 0 .5rem;
	font-size: 350%;
	letter-spacing: -1px;
}
.desktop aside .project.active{
	pointer-events: none;
}
aside .project.active,
.device .project:active,
.desktop .project:hover{
	color: var(--bg);
	background-color: var(--color);
}
@media (min-width: 1113px){
	aside.active{
		width: calc((100vw - 3rem)/20*13);
	}
}
@media (min-width: 835px) and (max-width: 1112px){
	aside.active{
		width: calc((100vw - 3rem)/20*11);
	}
}
@media (max-width: 834px){
	aside{
		display: none;
	}
}

/* Navigation Expanded
======================================== */
@media (min-width: 835px){
	aside.active + #container{
		padding-right: 1.5rem;
	}
	aside.active + #container header,
	aside.active + #container footer div:not(:first-child),
	aside.active + #container #contact + wrap,
	aside.active + #container #clients,
	aside.active + #container #trigger-infos,
	aside.active + #container #credits{
		display: none;
	}
	aside.active + #container #project-description,
	aside.active + #container #project-credits{
		display: block;
	}
	.page-about aside.active + #container{
		grid-template-rows: min-content min-content;
	}
	.page-project aside.active + #container{
		grid-template-rows: min-content auto repeat(3, min-content);
		grid-gap: 1rem;
	}
	aside.active + #container footer div,
	aside.active + #container #description,
	aside.active + #container #project-infos,
	aside.active + #container #contact,
	aside.active + #container .project-wrapper{
		width: 100%;
		padding-right: 0;
		grid-column: 20 span;
		grid-row: auto;
	}
	aside.active + #container #contact wrap{
		grid-template-columns: 1fr 1fr;
	}
	aside.active + #container .counter{
		padding: 5rem 0;
		grid-column: 10 span !important;
		grid-row: 2;
	}
	aside:not(.active) + #container #vimeo wrap{
		height: 100% !important;
	}
	/* aside.active + #container #vimeo wrap{
    		max-height: inherit;
	} */
	#thumb{
		width: 100%;
	    	height: 100%;
	}
}
@media (min-width: 1113px){
	aside.active + #container .project-wrapper{
		max-height: 25vw;
    		min-height: auto;
	}
}
@media (min-width: 835px) and (max-width: 1112px){
	aside.active + #container .project-wrapper{
		max-height: 35vw;
    		min-height: auto;
	}
}

/* About
======================================== */
@media (min-width: 835px){
	.page-about #container{
		grid-gap: 0 1rem;
	}
	#contact,
	#contact + wrap,
	#clients{
		padding-top: 3rem;
	}
}
#description{
	padding-right: 1rem;
	grid-column: 1 / 8;
    	grid-row: 1;
}
#contact{
	position: sticky;
	position: -webkit-sticky;
    	top: -2.5rem;
	height: fit-content;
	height: -moz-fit-content;
	padding-right: 1rem;
	grid-column: 1 / 8;
}
#contact wrap{
	display: grid;
	grid-template-columns: 2fr 5fr;
	grid-gap: 0 1rem;
}
#contact + wrap{
	grid-column: 10 span;
	display: grid;
    	grid-auto-flow: row;
    	grid-auto-rows: min-content;
    	grid-gap: 3rem;
}
#contact + wrap wrap{
	display: grid;
	grid-template-columns: repeat(10, 1fr);
    	grid-gap: 1rem;
}
#contact + wrap wrap:not(:last-child){
	padding-bottom: 1.2em;
}
#contact + wrap wrap > div{
	grid-column: 8 span;
}
#contact + wrap wrap .content{
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	grid-gap: 0 1rem;
}
#clients{
	grid-column: 3 span;
}
@media (min-width: 1921px){
	#description,
	#contact{
		grid-column: 1 / 7;
	}
	#contact wrap{
		grid-template-columns: 3fr 5fr;
	}
}
@media (max-width: 1112px){
	#contact{
		position: initial;
		padding-right: 0;
    		grid-column: 14 span;
	}
	#contact wrap{
		grid-template-columns: 1fr 1fr;
	}
	#contact + wrap{
		grid-column: 14 span;
	}
	#clients{
		grid-column: 6 span;
	}
}
@media (max-width: 834px){
	#description{
		padding: 0;
		grid-column: 20 span;
    		grid-row: auto;
	}
	#contact,
	#contact + wrap,
	#clients{
		grid-column: 20 span;
	}
	#contact + wrap{
		grid-gap: 6rem;
	}
}
@media (max-width: 600px){
	.page-about #container{
		padding-left: 0;
		padding-right: 0;
	}
	.page-about header,
	.page-about #description,
	.page-about footer{
		padding: 0 1rem;
	}
	#contact,
	#features,
	#awards,
	#clients{
		border-top: 1px solid;
    		padding: 1rem 1rem 0;
	}
	#contact wrap{
		grid-template-columns: 2fr 3fr;
	}
	#contact + wrap wrap{
		grid-template-columns: repeat(6, 1fr);
	}
	#contact + wrap wrap > div{
		grid-column: 5 span;
	}
	#contact + wrap wrap .content{
		grid-template-columns: 1fr;
	}
	#contact + wrap wrap .content span:not(.title){
		display: none;
	}
}
@media (max-width: 414px){
	#contact + wrap{
		grid-gap: 4rem;
	}
}
@media (max-width: 320px){
	#contact wrap{
		grid-template-columns: 1fr;
	}
}

/* Project Page
======================================== */
.page-project #container{
	grid-template-rows: min-content 15rem 1fr 15rem min-content;
}
#project-infos{
	width: fit-content;
	width: -moz-fit-content;
	padding-right: 1rem;
	grid-column: 1 / 8;
	grid-row: 1 / 2;
	display: grid;
	grid-auto-rows: min-content;
	grid-gap: 1.25em;
	z-index: 3;
}
.device #trigger-infos{
	display: none;
}
#project-credits{
	grid-column: 20 span;
	grid-row: 3;
	display: none;
}
.counter{
	grid-column: 1 / 4;
    	grid-row: 3;
    	align-self: center;
}
.counter:last-of-type{
	grid-column: 20;
	justify-self: flex-end;
}
.page-project .project-wrapper{
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-height: calc(var(--h) - 2.4em - 13.2rem);
	grid-row: 3 span;
	overflow: hidden;
}
.page-project .project-wrapper p{
	display: none !important;
}
#gallery.slider{
	position: relative;
	-webkit-user-select: none;
  	   -moz-user-select: none;
  	    -ms-user-select: none;
  		   user-select: none;
	-ms-touch-action: manipulation;
  	    touch-action: manipulation;
}
.project-wrapper wrap{
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
  	grid-auto-flow: column;
  	grid-auto-columns: 100%;
  	grid-auto-rows: 100%;
}
.slide,
.slide .thumbnail{
	width: 100%;
	height: 100%;
}
@media (min-width: 835px){
	.slide{
		grid-row: auto !important;
	}
	.slide:nth-child(1n + 3){
		display: none !important;
	}
}
#prev,
#next{
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
}
#prev{
	left: 0;
	cursor: w-resize;
}
#next{
	right: 0;
	cursor: e-resize;
}
/*Infos*/
@media (min-width: 835px){
	.device #project-infos,
	.desktop #project-infos:hover{
		grid-row: 1 / 3;
	}
	.desktop #project-infos:hover #trigger-infos,
	.desktop #project-infos:not(:hover) > div{
		display: none;
	}
	.desktop.page-project .project-wrapper{
		width: calc((100vw - 2.7em - 2.8rem)/20*14);
		grid-column: 14 span;
		justify-self: flex-end;
		-webkit-transition: width .5s cubic-bezier(.1,1,.8,1);
			-o-transition: width .5s cubic-bezier(.1,1,.8,1);
			   transition: width .5s cubic-bezier(.1,1,.8,1);
	}
	.device.page-project .project-wrapper{
		width: 100%;
		grid-column: 12 span;
	}
	.desktop #project-infos:hover ~ .project-wrapper{
		width: calc((100vw - 2.7em - 2.8rem)/20*12);
		grid-column: 12 span;
	}
	#vimeo wrap div{
		display: contents;
	}
	#vimeo iframe{
		position: initial !important;
		width: 100% !important;
		height: 100% !important;
	}
}
@media (min-width: 1921px){
	#project-infos{
		grid-column: 1 / 7;
	}
	.desktop #project-infos:hover ~ .project-wrapper{
		width: calc((100vw - 2.7em - 2.8rem)/20*13);
		grid-column: 13 span;
	}
}
@media (min-width: 835px) and (max-width: 1112px){
	.device .counter:last-of-type,
	.desktop #project-infos:hover ~ .counter:last-of-type{
		/* grid-column: 4 span; */
		grid-column: 4 / 8;
	}
	.device.page-project .project-wrapper{
		grid-column: 13 span;
	}
	.desktop #project-infos:hover ~ .project-wrapper{
		width: calc((100vw - 2.7em - 2.8rem)/20*13);
		grid-column: 13 span;
	}
}
@media (max-width: 834px){
	.page-project #container{
		grid-template-rows: repeat(4, min-content);
	}
	#project-infos{
		padding: 0;
		grid-column: 20 span;
    		grid-row: 3;
		grid-gap: 6rem;
	}
	#project-infos > span{
		display: none;
	}
	#project-infos > div{
		display: block;
	}
	.page-project .project-wrapper,
	.project-wrapper{
		min-height: 0;
		max-height: none;
		grid-column: 20 span;
		grid-row: auto;
		overflow: visible;
	}
	.project-wrapper wrap{
		grid-template-columns: 1fr;
    		grid-auto-flow: row;
    		grid-auto-rows: min-content;
    		grid-gap: 1rem;
	}
	.project-wrapper wrap::after{
		content: attr(data-title);
		min-height: 1.2em;
		text-transform: uppercase;
	}
	.counter,
	#prev,
	#next{
		display: none;
	}
}
@media (max-width: 600px){
	#project-infos{
		margin-top: -5rem;
	}
	.project-wrapper{
		position: relative;
		top: auto !important;
		left: auto !important;
		padding-bottom: 1rem;
		z-index: auto !important;
	}
	.project-wrapper::after{
		content: '';
		position: absolute;
		bottom: 0;
		left: -1rem;
		width: 100vw;
		border-bottom: 1px solid;
	}
}
@media (max-width: 414px){
	#project-infos{
		margin-top: -3rem;
	}
	.project-wrapper wrap::after{
		transform: translateY(-1px);
	}
}

/* Typegate
======================================== */
#sticker{
	position: fixed;
	top: 0;
	left: 0;
	width: 12vw;
	min-width: 175px;
	max-width: 300px;
	height: 12vw;
	min-height: 175px;
	max-height: 300px;
    	border-radius: 100%;
    	background-color: white;
    	-webkit-user-select: none;
    	   -moz-user-select: none;
    	    -ms-user-select: none;
    		   user-select: none;
}
#sticker img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#background{
	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100vw;
    	height: 100%;
    	object-fit: cover;
	z-index: -1;
}
#background.Contain{
	object-fit: contain;
}
@media (max-width: 834px){
	.page-typegate #container{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr min-content;
	}
	.page-typegate header{
		display: contents;
	}
	.page-typegate header a{
		justify-self: flex-end;
	}
}
@media (max-width: 768px){
	.page-typegate header br{
		display: none;
	}
}