/*
Theme Name: clue
Theme URI: https://XXX.XXX
Author: Maxime Bichon
Author URI: https://maximebichon.net
Description: clue
*/

/* @import url('main.css'); */

/* RESET */

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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

:focus:not([data-focusvisible-polyfill]){outline: none;}

/* FONTS */


/*/////////*/
/* GENERAL */
/*/////////*/

body{
	color: black;
	font-size: 16px;
	line-height: 1.125em;
}

a{
	color: black;
	text-decoration: none;
}

.red_hover:hover,
.red{
	color: #ff0000;
}

up-progress-bar{
	background-color: #ff0000;
	height: 1px;
}

p{
	margin-bottom: 1em;
}

p:last-of-type{
	margin-bottom: 0;
}

img{
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.left{
	float: left;
}

.right{
	float: right;
}

.clear{
	clear: both;
}

.alignleft{
	text-align: left;
}

.alignright{
	text-align: right;
}

.center{
	text-align: center;
}

.upper{
	text-transform: uppercase;
}

.lower{
	text-transform: lowercase
}

.capi{
	text-transform: capitalize;
}

.borderbox{
	box-sizing: border-box;
}

.inline{
	display: inline;
}

.inline-block{
	display: inline-block;
}

.relative{
	position: relative;
}

.absolute{
	position: absolute;
}

.fixed{
	position: fixed;
}

.flex{
	display: flex;
}

.flex-wrap{
	flex-wrap: wrap;
}

.flex-column{
	flex-direction: column;
}

.space-between{
	justify-content: space-between;
}

.flex-center{
	align-items: center;
	justify-content: center;
}

.cover{
	object-fit: cover;
}

.contain{
	object-fit: contain;
}

i,
em,
.italic{
	font-style: italic;
}

.bold,
strong{
	font-weight: bold;
}

.hyphens{
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.overflow{
	overflow: auto;
}

.width20{
	width: 20%;
}

.width25{
	width: 25%;
}

.width33{
	width: 33.33%;
}

.width50{
	width: 50%;
}

.width66{
	width: 66.66%;
}

.width75{
	width: 75%;
}

.width100{
	width: 100%;
}

.height100{
	height: 100%;
}

.pointer{
	cursor: pointer;
}

.marg1em{
	margin-bottom: 1em;
}

.responsive-video{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	width: 100%;
}

.responsive-video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*////////*/
/* LAYOUT */
/*////////*/

.marg60{
	margin-bottom: 60px;
}

.black_hover:hover,
.black{
	color: black;
}

.size13{
	font-size: 13px;
}

.underline{
	text-decoration: underline;
}

.text_shadow{
	text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 10px white, 0 0 10px white, 0 0 10px white;
}

.text_shadow_2{
	text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 10px white, 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 10px white, 0 0 10px white;
}

.unpoly_wrapper{
	padding: 30px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6666;
	background: white;
	display: none;
	overflow-x: scroll;
}

body.single-pieces .unpoly_wrapper,
body.open_sgl .unpoly_wrapper{
	display: block;
}

.unpoly_links_sgl.flex{
	display: flex!important;
}

/* MARQUEE */

#marquee{
	position: fixed;
	bottom: 53px;
	left: 0;
	right: 0;
	height: 30px;
	line-height: 30px;
	z-index: 10000;
	box-sizing: border-box;
	pointer-events: none;
}

/* PIECES */

.wrapper_pieces{
	margin-left: auto;
	margin-right: auto;
	width: 392px;
	position: relative;
	z-index: 30;
}

.wrapper_pieces.hovered{
	z-index: -1;
}

.sgl_swiper{
	height: 558px;
	width: 722px;
	z-index: 10;
	max-height: calc(100vh - 30px);
}

.swiper-wrapper-fixed{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sgl_swiper img{
	max-height: 558px;
	max-height: 100%;
	width: auto;
	max-width: 722px;
	border: 1px solid #ff0000;
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.sgl_swiper .swiper-slide{
	/* display: flex!important;
	justify-content: center; */
	text-align: center;
}

.sgl_swiper .sgl_swiper-button-next{
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
}

#custom-cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  color: black;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 9999;
  display: none;
  font-family: 'Courier New';
  font-size: 18px;
  letter-spacing: 0.59em;
}

/* STOCK */

body.page-id-74{
	overflow-x: hidden;
}

.stock_wrapper{
	padding: 15px;
	box-sizing: border-box;
	margin: 0 auto;
	width: 100%;
	display: flex;
}

table{
	width: 100%;
	margin-top: 30px;
}

th{
	border-bottom: 1px solid red;
	padding-bottom: 5px;
}

td{
	border-bottom: 1px solid red;
	padding-top: 1px;
}

tr{
	height: 20px;
	line-height: 20px;
}

thead th:hover{
	cursor: pointer;
	color: red;
}

tr.stock_items:hover{
	color: red
}

#floating-image img{
	border: 1px solid red;
	max-width: 150px;
	max-height: 150px;
	width: auto;
	height: auto;
}

.width17{
	width: 17%
}

.width20{
	width: 20%
}

.width4{
	width: 4%;
}

.width9{
	width: 9%;
}

.width16{
	width: 16%
}

/*INFOS */

.infos_wrapper{
	padding: 30px;
	box-sizing: border-box;
	margin: 0 auto;
	width: 100%;
	display: flex;
	max-width: 1000px;
}

.infos_wrapper .width50 p{
	text-indent: 13px;
}

.infos_wrapper .width50:nth-child(odd) p{
	text-indent: 30px;
}

.infos_wrapper .width50:nth-child(odd) p:first-of-type{
	text-indent: 0;
}

.infos_wrapper .width50{
	padding-left: 15px;
	box-sizing: border-box;
}

.infos_wrapper .width50:nth-child(odd){
	padding-left: 0;
	padding-right: 15px;
}

.courrier{
	font-family: 'Courier New';
	font-size: 18px;
	line-height: 1.25em;
}

/* SWIPER */

#clueless{
	font-family: 'Courier New';
	font-size: 18px;
	text-transform: lowercase;
	letter-spacing: 0.59em;
	position: fixed;
	bottom: 30px;
	left: 0;
	right: 0;
	height: 735px;
	z-index: 20;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}

#clueless a{
	color: black;
	pointer-events: all;
}

#clueless a:hover{
	color: red;
}

.first_swiper_home{
	z-index: 10;
}

.second_swiper_home{
	z-index: 30;
}

.home_swiper{
	width: 100vw;
	height: 735px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 30px;
	max-height: calc(100vh - 60px);
	cursor: auto;
}

.swiper-slide_main{
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin-left: -1px;
}

.slide_header{
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	justify-content: space-between;
	z-index: 10;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.slide_footer{
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	text-align: center;
	z-index: 10;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-webkit-transform-style: preserve-3d;
}

.inner_slide_img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	z-index: 1;
	overflow: hidden;
	background: white;
}

.one_inner_slide{
	display: flex;
	/* backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-webkit-transform-style: preserve-3d; */
}

.inner_slide{
	position: relative;
	border: 1px solid #ff0000;
	box-sizing: border-box;
}

.inner_slide_img img{
	object-fit: contain;
}

.petit_horizontal .inner_slide_img img,
.bonus_vertical .inner_slide_img img,
.grand_horizontal .inner_slide_img img{
	object-fit: cover;
}

.swiper-slide.petit_horizontal{
	width: 630px;
}

.swiper-slide.petit_vertical{
	width: 350px;
}

.swiper-slide.grand_horizontal{
	width: 735px;
}

.swiper-slide.grand_vertical{
	width: 420px;
}

.swiper-slide.petit_horizontal .inner_slide{
	height: 419px;
	width: 100%;
}

.swiper-slide.petit_vertical .inner_slide{
	width: 100%;
	height: 630px;
}

.swiper-slide.grand_horizontal .inner_slide{
	width: 100%;
	height: 489px;
}

.swiper-slide.grand_vertical .inner_slide{
	height: 735px;
	width: 100%;
}

.swiper-slide.bonus_vertical{
	width: 224px;
}

.swiper-slide.bonus_vertical .inner_slide{
	width: 100%;
	height: 336px;
}

@media screen and (max-height: 825px) {
 
	.swiper-slide.petit_horizontal{
		width: calc(630px * 0.75);
	}
	
	.swiper-slide.petit_vertical{
		width: calc(350px * 0.75);
	}
	
	.swiper-slide.grand_horizontal{
		width: calc(735px * 0.75);
	}
	
	.swiper-slide.grand_vertical{
		width: calc(420px * 0.75);
	}
	
	.swiper-slide.petit_horizontal .inner_slide{
		height: calc(419px * 0.75);
	}
	
	.swiper-slide.petit_vertical .inner_slide{
		height: calc(630px * 0.75);
	}
	
	.swiper-slide.grand_horizontal .inner_slide{
		height: calc(489px * 0.75);
	}
	
	.swiper-slide.grand_vertical .inner_slide{
		height: calc(735px * 0.75);
	}
	
	.swiper-slide.bonus_vertical{
		width: calc(224px * 0.75);
	}
	
	.swiper-slide.bonus_vertical .inner_slide{
		height: calc(336px * 0.75);
	}
	
}

@media screen and (max-height: 625px) {
 
	.swiper-slide.petit_horizontal{
		width: calc(630px * 0.6);
	}
	
	.swiper-slide.petit_vertical{
		width: calc(350px * 0.6);
	}
	
	.swiper-slide.grand_horizontal{
		width: calc(735px * 0.6);
	}
	
	.swiper-slide.grand_vertical{
		width: calc(420px * 0.6);
	}
	
	.swiper-slide.petit_horizontal .inner_slide{
		height: calc(419px * 0.6);
	}
	
	.swiper-slide.petit_vertical .inner_slide{
		height: calc(630px * 0.6);
	}
	
	.swiper-slide.grand_horizontal .inner_slide{
		height: calc(489px * 0.6);
	}
	
	.swiper-slide.grand_vertical .inner_slide{
		height: calc(735px * 0.6);
	}
	
	.swiper-slide.bonus_vertical{
		width: calc(224px * 0.6);
	}
	
	.swiper-slide.bonus_vertical .inner_slide{
		height: calc(336px * 0.6);
	}
	
}

.first_swiper_home .above{
	visibility: hidden;
}

.first_swiper_home .behind{
	visibility: visible;
}

.second_swiper_home .above{
	
}

.second_swiper_home .behind{
	opacity: 0;
}

/* UNPOLY RESET */

.up-modal,
.up-progress-bar,
.up-active {
  all: unset; /* To prevent Unpoly styles */
}

up-cover, up-drawer, up-modal{
	z-index: auto;
	position: static;
}

up-drawer-backdrop, up-modal-backdrop {
	position: static;
	background: none;
}

up-modal[nesting="0"] up-modal-viewport {
	padding:0;
}

up-cover-viewport, up-drawer-viewport, up-modal-viewport {
	position: static;
	overflow: auto;
	display: block;
}

up-modal[size=medium] up-modal-box{
	width: auto;
}

up-popup, up-cover-box, up-drawer-box, up-modal-box {
	position: static;
	box-sizing: border-box;
	max-width: 100%;
	background-color: none;
	padding: 0;
	overflow: auto:
}

up-popup-dismiss, up-cover-dismiss, up-drawer-dismiss, up-modal-dismiss{
	display: none;
}

/* MENU */

#back_stock,
#trueback,
#back{
	position: fixed;
	top: 15px;
	left: 15px;
	cursor: pointer;
}

#stock_pieces,
#stock{
	position: fixed;
	top: 15px;
	right: 15px;
	cursor: pointer;
	z-index: 66666;
}

#stock_pieces{
	display: none;
}

#trueback{
	display: none;
}

body.single-pieces #back,
body.single-pieces #stock{
	display: none;
}

body.single-pieces #stock_pieces,
body.single-pieces #trueback{
	display: block;
}

#hamburger{
	display: block;
	height: 14px;
	width: 30px;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	position: fixed;
	cursor: pointer;
	top: 15px;
	right: 13px;
	z-index: 6666;
}

#hamburger .line{
	padding: 0;
	margin: 0;
	position: absolute;
	top: 6px;
	border-bottom: 2px solid black;
	width: 100%;
	height: 0px;
}

.cross{
	width: 26px;
	height: 17px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	z-index: 100;
}

.cross::before, 
.cross::after {
	content: '';
	position: absolute;
	height: 1px;
	width: 100%;
	top: 50%;
	right: 0;
	margin-top: -1px;
	background: black;
}

.cross::before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cross::after {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/*////////////*/
/* RESPONSIVE */
/*////////////*/

.mobile,
.mobile_flex,
.mobile_inline{
	display: none;
}

@media screen and (max-width: 900px) {
	
	.mobile{
		display: block;
	}
	
	.mobile_flex{
		display: flex;
	}
	
	.mobile_inline{
		display: inline;
	}
	
	.desktop{
		display: none;
	}
	
	.width100_mob{
		width: 100%;
	}
	
	.marg0_mob{
		margin-bottom: 0;
	}
	
	.marg1em_mob{
		margin-bottom: 1em;
	}
	
	.marg30_mob{
		margin-bottom: 30px;
	}
	
	.home_swiper{
		height: 100svh;
		max-height: 100svh;
		bottom: 0;
	}
	
	#clueless{
		/* height: 100svh;
		bottom: 0; */
		height: auto;
		top: 15px;
		left: 15px;
		text-align: left;
		right: auto;
		bottom: auto;
	}
	
	#marquee{
		bottom: 5px;
	}
	
	.unpoly_wrapper,
	.infos_wrapper{
		padding: 15px;
	}
	
	.unpoly_wrapper{
		padding-top: 40px;
	}
	
	.infos_wrapper .width50{
		padding-left: 0;
	}
	
	.infos_wrapper .width50:nth-child(odd){
		padding-left: 0;
		padding-right: 0;
	}
	
	body.open_sgl #marquee,
	body.single-pieces #marquee,
	body.page-id-56 #marquee{
		visibility: hidden;
		pointer-events: none;
	}
	
	.diapo_mob_single img{
		border: 1px solid red;
		margin-top: -1px;
	}
	
	.wrapper_pieces{
		width: auto;
	}
	
	#floating-image{
		display: none!important;
	}
	
	thead{
		display: none;
	}
	
	tbody{
		display: block;
	}
	
	tbody td,
	tbody tr{
		width: 100%!important;
		display: inline-block;
		border-bottom: none;
	}
	
	.stock_items{
		padding-top: 5px;
		border-top: 1px solid red;
		margin-top: 5px;
		height: auto;
	}
	
	.stock_items:last-of-type{
		border-bottom: 1px solid red;
		padding-bottom: 5px;
	}
	
	.red_mob{
		color: red;
	}
	
}