@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;
}
iframe{
	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
}
::-webkit-scrollbar{
	/*display: none;*/
}

:focus{
	outline: none !important;
}
:focus::-ms-value{
  	background-color: none;
  	color: inherit;
}
::-moz-focus-inner{
  	border: none !important;
}

/*	BASIC STYLES
================================================== */
::selection{
	background-color: rgba(0,0,0,.999);
	color: white;
}
html{
	font-size: 10px;
	scrollbar-width: none;
}
body{
	width: 100vw;
	height: 100%;
	margin: auto;
	font-family: 'Courier Prime', Courier, monospace;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	font-size: 8px;
	line-height: normal;
	color: black;
	background-color: #f1f3f1;
	overflow-x: hidden;

    
}
body::-webkit-scrollbar{
	display: none;
}

@media (min-width: 1367px){
	body{
		font-size: 12px;
	}
}
@media (min-width: 1441px){
	body{
		font-size: 13px;
	}
}
@media (min-width: 1681px){
	body{
		font-size: 15px;
	}
}
@media (min-width: 1921px){
	body{
		font-size: 16px;
	}
}
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;
	/* filter: blur(0);
	transition: filter .2s linear; */
}
/* .lazy{
	filter: blur(20px);
} */
video.no-autoplay{
	background-color: black;
}
a{
	width: fit-content;
  	width: -moz-fit-content;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
a.active > span::before,
.device a:active > span::before{
	content: '/';
}
.desktop a:hover > span::before{
	content: '/';
	-moz-animation: blinker .5s linear infinite;
    	-webkit-animation: blinker .5s linear infinite normal;
    	animation: blinker .5s linear infinite;
}

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

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

/* LOADER
================================================== */
#loader{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	background-color: inherit;
	z-index: 8;
}
/* @media (max-width: 812px) and (orientation: landscape){
	.device #loader{
		display: grid;
		z-index: 999;
	}
	.device #loader ~ *{
		display: none !important;
	}
} */

/* GENERAL
================================================== */
:root{
	--ms: 3px;
	/* --ml: 4px; */
	--mxl: 6px;
	--gap: 6rem;
	--row: calc(1em + 4px);
	--time: 1;
}
@media (min-width: 1367px){
	:root{
		--ms: 4px;
		--mxl: 8px;
	}
}
@media (min-width: 1441px){
	:root{
		--gap: 8rem;
	}
}
@media (min-width: 1681px){
	:root{
		--ms: 4px;
		--mxl: 12px;
	}
}
@media (min-width: 1921px){
	:root{
		--ms: 5px;
		--mxl: 15px;
		--gap: 10rem;
	}
}
/* @media (max-width: 812px){
	:root{
		--time: 1.5;
	}
} */
@media (max-width: 600px){
	:root{
		/* --time: 2; */
		--gap: 4rem;
	}
}
/* @media (max-width: 414px){
	:root{
		--time: 3;
	}
} */
.box{
	width: fit-content;
	width: -moz-fit-content;
	height: fit-content;
	height: -moz-fit-content;
	display: block;
	/* background-color: white; */
	pointer-events: all;
}

/* CURSOR
================================================== */
.cursor{
	position: absolute;
	display: none;
	-webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
	cursor: none;
	pointer-events: none;
	z-index: 99;
}
.cursor:nth-of-type(2){
	transition-duration: 10ms;
  	transition-timing-function: linear;
	z-index: 98;
}
.cursor:nth-of-type(3){
	transition-duration: 20ms;
  	transition-timing-function: linear;
	z-index: 97;
}
.cursor:nth-of-type(4){
	transition-duration: 60ms;
  	transition-timing-function: linear;
	z-index: 96;
}
.cursor:nth-of-type(5){
	transition-duration: 100ms;
  	transition-timing-function: linear;
	z-index: 95;
}
.cursor:nth-of-type(6){
	transition-duration: 150ms;
  	transition-timing-function: linear;
	z-index: 94;
}
.page-index,
.page-project,
.page-shop,
nav a,
.page-project .next,
.page-project .prev{
	cursor: none !important;
}
.device .cursor{
	display: none !important;
}

/* HEADER
================================================== */
.page-index header,
.page-project header{
	position: fixed;
	top: 0;
	width: calc(100vw - var(--mxl)*2);
}
header{
	position: sticky;
	position: -webkit-sticky;
	top: var(--mxl);
	height: fit-content;
	height: -moz-fit-content;
	margin: var(--mxl) var(--mxl) var(--ms);
    	display: grid;
    	grid-template-columns: 2fr 1fr 2fr;
	grid-auto-rows: var(--row);
    	grid-gap: var(--ms) 1ch;
    	background-color: white;
	z-index: 9;
	cursor: auto;
}
header > div{
	padding: 2px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	grid-gap: var(--mxl);
}
menu{
	padding: 2px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: var(--mxl);
}
menu .menu-link:nth-child(2){
	justify-self: center;
}
menu .menu-link:last-child{
	justify-self: flex-end;
}
header wrap{
	padding: 2px;
	display: grid;
    	grid-auto-flow: column;
    	grid-auto-columns: max-content;
    	justify-content: flex-end;
	grid-gap: calc(var(--mxl)*2);
}
header wrap > div{
	display: grid;
    	grid-auto-flow: column;
	grid-gap: 3px;
}
header .color{
	width: 1em;
	height: 1em;
	cursor: pointer;
}
.device .color:active{
	opacity: 0;
}
.desktop .color:hover{
	-moz-animation: blinker .5s linear infinite;
    	-webkit-animation: blinker .5s linear infinite normal;
    	animation: blinker .5s linear infinite;
}
.bg-blue,
.color[data-color="bg-blue"]{
	background-color: #0738c3;
}
.bg-green,
.color[data-color="bg-green"]{
	background-color: #29fd2f;
}
.color[data-color="bg-square"]::before,
.color[data-color="bg-square"]::after{
	content: '';
	width: 50%;
	height: 50%;
	display: block;
	background-color: #9d9d9c;
}
.color[data-color="bg-square"]::after{
	float: right;
}
.bg-square{
	background-image: linear-gradient(45deg, #e3e3e3 25%, transparent 25%), linear-gradient(-45deg, #e3e3e3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e3e3e3 75%), linear-gradient(-45deg, transparent 75%, #e3e3e3 75%);
  	background-size: calc(100vw/60) calc(100vw/60);
  	background-position: 0 0, 0 calc(100vw/120), calc(100vw/120) calc(100vw/120*-1), calc(100vw/120*-1) 0px;
	background-color: white;
}
@media (max-width: 1024px){
	.bg-square{
		background-size: calc(100vw/50) calc(100vw/50);
	  	background-position: 0 0, 0 calc(100vw/100), calc(100vw/100) calc(100vw/100*-1), calc(100vw/100*-1) 0px;
	}
}
@media (max-width: 812px){
	.bg-square{
		background-size: calc(100vw/40) calc(100vw/40);
	  	background-position: 0 0, 0 calc(100vw/80), calc(100vw/80) calc(100vw/80*-1), calc(100vw/80*-1) 0px;
	}
}
@media (max-width: 600px){
	header{
		position: relative;
		top: auto;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: var(--ms) 0;
		background: none;
	}
	header > div{
		grid-column: 2 span;
		justify-content: space-between;
		background-color: white;
	}
	menu{
		grid-template-columns: repeat(3, max-content);
		background-color: white;
	}
	header > wrap{
		background-color: white;
	}
	.bg-square{
		background-size: calc(100vw/30) calc(100vw/30);
	  	background-position: 0 0, 0 calc(100vw/60), calc(100vw/60) calc(100vw/60*-1), calc(100vw/60*-1) 0px;
	}
}
@media (max-width: 414px){
	.bg-square{
		background-size: calc(100vw/25) calc(100vw/25);
	  	background-position: 0 0, 0 calc(100vw/50), calc(100vw/50) calc(100vw/50*-1), calc(100vw/50*-1) 0px;
	}
}

/* FOOTER
================================================== */
.page-shop footer,
.page-category footer{
	background-color: #0738c3;
}
.page-infos footer{
	background-color: #29fd2f;
}
footer{
	position: fixed;
    	bottom: var(--mxl);
    	width: 100vw;
	height: var(--row);
	padding: 2px 0;
	display: flex;
	white-space: nowrap;
	background-color: white;
	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
	overflow: hidden;
	z-index: 7;
	cursor: auto;
}
footer > span{
    	-moz-animation: marquee-left linear infinite;
    	-webkit-animation: marquee-left linear infinite normal;
    	animation: marquee-left linear infinite;
    	animation-duration: inherit;
}
footer > span:first-child{
	background: -webkit-linear-gradient(left, rgba(0,0,0,1) 30%, rgba(255,95,0,1) 45%, rgba(255,255,0,1) 60%, rgba(0,0,0,1) 75%, rgba(41,253,47,1) 90%, rgba(7,56,195,1) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,1) 30%, rgba(255,95,0,1) 45%, rgba(255,255,0,1) 60%, rgba(0,0,0,1) 75%, rgba(41,253,47,1) 90%, rgba(7,56,195,1) 100%);
	background: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(255,95,0,1) 45%, rgba(255,255,0,1) 60%, rgba(0,0,0,1) 75%, rgba(41,253,47,1) 90%, rgba(7,56,195,1) 100%);
	-webkit-background-clip: text;
	background-clip: text;
  	-webkit-text-fill-color: transparent;
}
footer > span:last-child{
	background: -webkit-linear-gradient(left, rgba(0,0,0,1) 30%, rgba(255,95,0,1) 45%, rgba(255,255,0,1) 60%, rgba(0,0,0,1) 75%, rgba(41,253,47,1) 90%, rgba(7,56,195,1) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,1) 30%, rgba(255,95,0,1) 45%, rgba(255,255,0,1) 60%, rgba(0,0,0,1) 75%, rgba(41,253,47,1) 90%, rgba(7,56,195,1) 100%);
	background: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(255,95,0,1) 45%, rgba(255,255,0,1) 60%, rgba(0,0,0,1) 75%, rgba(41,253,47,1) 90%, rgba(7,56,195,1) 100%);
	-webkit-background-clip: text;
	background-clip: text;
  	-webkit-text-fill-color: transparent;
}
footer > span span{
	padding: 0 .5ch;
}
/* @media (max-width: 812px){
	footer span > span:nth-child(n+21){
	    display: none;
	}
}
@media (max-width: 600px){
	footer span > span:nth-child(n+16){
	    display: none;
	}
}
@media (max-width: 414px){
	footer span > span:nth-child(n+11){
	    display: none;
	}
} */

/* NAV
================================================== */
nav{
	position: fixed;
	/* top: calc(var(--mxl) + var(--row) + var(--ms)); */
	top: 50%;
	left: 0;
    	width: 100px;
    	max-height: calc(100% - (var(--mxl) + var(--row) + var(--ms))*2);
    	height: fit-content;
	height: -moz-fit-content;
    	padding: 0 var(--mxl);
    	display: grid;
    	grid-auto-flow: row;
    	grid-gap: var(--ms);
    	grid-auto-rows: min-content;
    	overflow: scroll;
	transform: translateY(-50%);
    	z-index: 7;
}
nav a{
	position: relative;
	width: 100%;
}
nav svg{
    	position: absolute;
    	width: 100%;
    	height: 100%;
	display: none;
    	stroke: #29fd2f;
	stroke-width: 2px;
    	border: 2px solid #29fd2f;
	border-radius: 3px;
    	z-index: 1;
}
nav a img{
	background-color: white;
}
nav a.active svg,
.desktop nav a:hover svg{
	display: block;
}
nav a.active svg + img,
.desktop nav a:hover svg + img{
	border-radius: 3px;
}
@media (min-width: 1921px){
	nav{
		width: 150px;
	}
}
@media (min-width: 1441px) and (max-width: 1920px){
	nav{
		width: 120px;
	}
}
@media (max-width: 812px){
	nav{
		top: auto;
	     bottom: calc(var(--mxl) + var(--row) + var(--ms));
	     max-width: 100%;
	     width: fit-content;
	     width: -moz-fit-content;
	     grid-auto-flow: column;
	     grid-auto-columns: min-content;
	     align-content: flex-start;
	     transform: translateX(-50%);
	     left: 50%;
	}
	nav svg{
		stroke-width: 1px;
	    	border-width: 1px;
	}
	nav img{
		width: auto;
		height: 50px;
	}
}
@media (max-width: 414px){
	nav img{
		height: 40px;
	}
}

/* INFO
================================================== */
main{
	width: 100vw;
	height: fit-content;
	height: -moz-fit-content;
	margin-top: calc(var(--ms)*2 + 1.1em);
	margin-bottom: calc(var(--row) + var(--mxl) + var(--gap));
	padding: 0 var(--mxl);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: var(--ms) calc(var(--mxl)*3);
}
main wrap{
	display: grid;
    	grid-auto-flow: row;
    	grid-auto-rows: min-content;
    	grid-gap: var(--ms);
}
main wrap:last-child{
	grid-column: 2;
}
main p.box{
	width: 75%;
	max-width: 68ch;
	min-width: 54ch;
	margin-top: -1px;
	line-height: 1.4;
	background: none;
}
main p.box span{
	display: inline;
	background-color: white;
}
@media (max-width: 600px){
	main{
		grid-template-columns: 1fr;
	}
	main wrap:last-child{
		grid-column: auto;
	}
	main p.box{
		width: 100%;
		min-width: 0;
	}
}

/* BANNER
================================================== */
#banner{
	position: sticky;
	position: -webkit-sticky;
	top: calc(var(--mxl) + var(--row) + calc(var(--gap)*2));
	width: 100vw;
	height: 2.5em;
	margin-top: calc(var(--gap)*2);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: center;
	color: white;
	background-color: #0738c3;
	white-space: nowrap;
	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
	pointer-events: none;
	overflow: hidden;
	z-index: 7;
}
#banner h2{
	padding-bottom: .25em;
	font-family: 'FMPointifax', 'Courier Prime', Courier, monospace;
	font-size: 250%;
	text-transform: uppercase;
	line-height: 0;
	-moz-animation: marquee-left linear infinite;
    	-webkit-animation: marquee-left linear infinite normal;
    	animation: marquee-left linear infinite;
	animation-duration: inherit;
}
@media (max-width: 600px){
	#banner{
		top: calc(var(--mxl) + var(--row) + var(--ms));
		margin-top: var(--gap);
	}
}

/* PRODUCTS
================================================== */
.product{
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: max-content;
	grid-gap: var(--ms) calc(var(--mxl)*3);
	margin: var(--gap) 0;
	padding: 0 var(--mxl);
}
.product.last{
	margin-bottom: calc(var(--row) + var(--mxl) + var(--gap));
}
.product h3{
	font-family: 'FMPointifax', 'Courier Prime', Courier, monospace;
    	font-size: 175%;
	padding-bottom: .366em;
	display: inline;
    	background-color: white;
	line-height: 1.6;
}
.product-info{
	grid-column: 3 / 6;
}
.product-info wrap{
	display: grid;
    	grid-auto-flow: row;
    	grid-auto-rows: min-content;
    	grid-gap: var(--ms);
}
.product-description{
	grid-column: 6 / 9;
}
.product-description p{
	max-width: 68ch;
	margin-top: -1px;
	line-height: 1.4;
}
.product-description p span{
	display: inline;
	background-color: white;
}
.product-gallery-wrapper{
	grid-column: 9 / 16;
	display: grid;
	grid-template-columns: 1fr calc(40px + 5ch + var(--ms));
	grid-gap: var(--ms) calc(var(--mxl)*3);
	overflow: hidden;
}
.product-gallery-thumbs{
	width: fit-content;
	width: -moz-fit-content;
	justify-self: flex-end;
	display: grid;
    	grid-auto-rows: 40px;
    	grid-gap: var(--ms);
	justify-items: flex-end;
}
.product-gallery-thumbs div{
    	display: grid;
    	grid-template-columns: min-content 40px;
    	grid-gap: var(--ms);
}
.product-gallery-thumbs img{
	width: 40px;
	height: 100%;
	grid-row: 1;
	grid-column: 2;
	object-fit: cover;
	cursor: pointer;
}
.product-gallery-thumbs span{
	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
	pointer-events: none;
}
.product-gallery-thumbs span:hover span::before,
.product-gallery-thumbs div span.active span::before,
.desktop .product-gallery-thumbs img:hover + span span::before{
	content: '/';
}
@media (max-width: 1024px){
	.product-info{
		grid-column: 3 / 7;
	}
	.product-description{
		grid-row: 2;
		grid-column: 3 / 7;
	}
	.product-description wrap{
		display: none;
	}
	.product-gallery-wrapper{
		grid-row: 2 span;
		grid-column: 7 / 16;
	}
}
@media (max-width: 812px){
	.product.last{
		margin-bottom: calc(var(--row) + var(--mxl) + var(--ms) + 50px + var(--gap));
	}
	.product-info,
	.product-description{
		grid-column: 1 / 6;
	}
	.product-gallery-wrapper{
		grid-column: 6 / 16;
	}
}
@media (max-width: 600px){
	.product{
		grid-template-columns: 1fr;
		margin: calc(var(--gap) - var(--mxl)) 0;
	}
	.product-info,
	.product-description,
	.product-gallery-wrapper{
		grid-column: auto;
	}
	.product-gallery-wrapper{
		margin-top: 1.1em;
		grid-template-columns: 1fr;
	}
	.product-gallery-thumbs{
		width: 100%;
		margin: 0;
		grid-auto-rows: auto;
		grid-auto-flow: column;
		justify-content: space-between;
	}
	.product-gallery-thumbs div{
		width: 4ch;
		display: block;
	}
	.product-gallery-thumbs div:nth-child(10){
		width: 5ch;
	}
	.product-gallery-thumbs div:not(:first-child):not(:last-child) span{
		margin: 0 auto;
	}
	.product-gallery-thumbs div:last-child span{
		margin-left: auto;
	}
	.product-gallery-thumbs span{
		pointer-events: all;
		cursor: pointer;
	}
	.product-gallery-thumbs img{
		display: none;
	}
}
@media (max-width: 414px){
	.product.last{
		margin-bottom: calc(var(--row) + var(--mxl) + var(--ms) + 40px + var(--gap));
	}
}
.soldout{
	width: 150px;
	padding: 10px;
	color: white;
    	background-color: red;
    	border-radius: 5px;
	text-align: center;
	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
	pointer-events: none;
}
.link,
.trigger.active{
	color: white;
	background-color: #fc6020;
	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
}
.trigger{
	width: fit-content;
	width: -moz-fit-content;
	color: black;
	background-color: white;
	cursor: pointer;
}
.trigger.active > span::before{
	content: '/';
}
@media (min-width: 1025px){
	.product-description h3 + br + br,
	.trigger{
		display: none !important;
	}
	.product-description wrap{
		display: grid !important;
    		grid-gap: var(--ms);
	}
}

/* PRODUCT GALLERY
================================================== */
.slider{
	position: relative;
	height: fit-content;
	height: -moz-fit-content;
	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    	touch-action: manipulation;
}
.slider > wrap{
	position: relative;
	width: 100%;
	height: 100%;
     display: grid;
     grid-auto-flow: dense;
     grid-auto-columns: 100%;
     grid-auto-rows: 100%;
     grid-gap: 0;
	align-items: center;
     overflow: hidden;
	cursor: pointer;
}
.slider > wrap .slide:nth-child(2){
    	height: 0;
    	opacity: 0;
}
.slider > wrap .slide:nth-child(2) ~ .slide{
    	display: none;
}
.slider > wrap ~ div{
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	-webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
	cursor: none !important;
}
.prev{
	left: 0;
	/* cursor: w-resize; */
}
.next{
	right: 0;
	/* cursor: e-resize; */
}
#carousel{
	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100vw;
    	height: 100%;
	display: grid;
    	align-items: center;
	background-repeat: no-repeat;
    	background-position: center;
    	background-size: cover;
}
#carousel wrap{
	max-width: 1920px;
	max-height: 1200px;
	margin: 0 auto;
	padding: calc(var(--mxl) + var(--row) + var(--gap)) 0;
}
#carousel .slide{
	width: 100%;
	height: 100%;
	padding: 0 var(--mxl);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-auto-rows: 100%;
	grid-gap: var(--ms);
	align-items: center;
}
#carousel .slide .thumbnail{
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: contain;
}
#carousel .slide .thumbnail.horizontal{
	width: 100%;
	height: auto;
}
#carousel .slide .thumbnail.vertical{
	width: auto;
	height: 100%;
}
#carousel .slide.double .thumbnail:first-child{
	margin-left: auto;
	margin-right: 0;
	justify-self: flex-end;
	object-position: right;
}
#carousel .slide.double .thumbnail:last-child{
	margin-left: 0;
	margin-right: auto;
	justify-self: flex-start;
	object-position: left;

}
@media (max-width: 812px){
	#carousel wrap{
	    	padding-bottom: calc(var(--mxl) + var(--ms) + var(--row) + 50px + var(--gap));
	}
}
@media (max-width: 600px){
	#carousel wrap{
		padding-top: calc(var(--mxl) + var(--ms) + var(--row)*2 + var(--gap));
	}
}
@media (max-width: 414px){
	#carousel wrap{
	    	padding-bottom: calc(var(--mxl) + var(--ms) + var(--row) + 40px + var(--gap));
	}
}

/* PROJECT PAGE
================================================== */
#video-bg{
	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100vw;
    	height: 100%;
	display: none;
    	object-fit: cover;
	pointer-events: none;
}
#video-bg{
	z-index: -2;
}
#audio{
	position: fixed;
	top: calc(var(--mxl) + var(--row) + var(--gap) - 15px);
    	left: calc(100vw/15*3 - 15px);
	width: fit-content;
	width: -moz-fit-content;
	height: fit-content;
	height: -moz-fit-content;
	display: flex;
	z-index: 1;
	cursor: pointer !important;
	pointer-events: all;
}
#audio svg{
	height: 30px;
	fill: #f00;
}
#audio svg:last-child,
#audio.active svg:first-child{
	display: none;
}
#audio.active svg:last-child{
	display: block;
}
@media (min-width: 1921px){
	#audio{
		top: calc(var(--mxl) + var(--row) + var(--gap) - 15px);
	}
}
@media (min-width: 1680px) and (max-width: 1920px){
	#audio{
		top: calc(var(--mxl) + var(--row) + var(--gap)/2 - 15px);
	}
}
@media (min-width: 813px) and (max-width: 1679px){
	#audio{
		top: calc(var(--mxl) + var(--row) + var(--gap) - 15px);
	}
}
@media (max-width: 812px){
	#audio{
		top: calc(var(--mxl) + var(--row)*2 + var(--ms) + var(--gap));
	}
}


.about_section_box{
	color:white;
	margin: 0px 0px 0px 170px;
	font-size: 11px;

}
.about_section_box_second{
	color:black;
	margin: 0px 0px 0px 170px;
	font-size: 11px;
}


.modal-body span {
	font-weight: bold;
	font-size: 10px;
	display: inherit;
	padding-bottom: 5px;
	text-transform: uppercase;
	text-decoration: underline;
    text-decoration-color: #ccc;

}

.modal-body p {
	overflow-wrap: break-word !important;
	padding-bottom: 5px;
}

.modal-content{
	width:700px;
}
.modal-body {
	max-height: calc(100vh - 50px);
	overflow-y: auto;
    /*border: 9px solid #ccc;*/

}

.modal-body .suppporting {
	background: #30d937;
}

.modal-body .credit {
	background: #ff5722;
}

.media_section_modal{
	border-right: 1px solid #eee;
	padding-left: unset !important;
}


  hr{
	margin-top: -4px !important;
	margin-bottom: unset !important;

	
  }