body{
	margin:0;
	padding:0;
	font-family: 'Poppins', sans-serif;
	overflow:hidden;
	background:#313a47;
}
#content{
	background-image:url(images/BG.png);
	background-size:100%;
	width:1500px;
	height:850px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);	
}

#targetFrame{
	border:0;
	position:absolute;
	top: 120px;
    left: 90px;
    height: 469px;
    width: 626px;
	background:white;
}
#right{
	position:absolute;	
	top:590px;
	left:55px;
	margin-left:35px;
}
#right #optMtl{
	position:absolute;	
	top:0;
	right:-620px
}
#right #optRob{
	position:absolute;	
	top:0;
	width:250px;
}
#right #optA{
	position:absolute;	
	top:0;
	width:290px;
}
#right #optB{
	position:absolute;	
	top:0;
	right:-630px;
}

.buttonContainer{
	height:37px;
}
.buttonContainerH{
	height:37px;
	display:inline-block;
	margin-right:30px;
}
.button:not(:last-child){
	margin-right:13px;
	margin-left:2px;
}
.button{
	text-align:center;
	display:inline-block;
	
}
.button div{
	height:32px;
	width:32px;
	background:#00040430;
	border-radius:50%;
	cursor:pointer;
	margin:0;
	margin-bottom:5px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	transition:all 100ms;
	background-size:100%;
	border:3px white solid;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 30%);
}
.button div p{
	margin:0;
	padding:0;
	line-height:26px;
	font-weight:200;
	font-size:12px;
}
.button.active div p{
	margin-top:-31px;
}
.button.active div p{
	font-weight:800;
}
.button.active div{
	cursor:default;
}
.button.active div:before {
	content: " ";
	display:block;
	z-index: -1;
	width: 32px;
	height: 32px;
	margin-top: -5px;
	margin-left: -5px;
	border: 2px solid black;
	border-radius:50%;
}
h4{
	font-size:0.86em;
	font-weight:500;
	margin:0;
	margin-top:10px;
	margin-bottom:5px;
	color:#5f5f5f;
	text-transform:uppercase;
}
div#screenshot{
	background-image:url(images/screenshot.png);
	width:40px;
	height:40px;
	position:absolute;
	background-size:100%;
	left:100px;
	top:534px;
	cursor:pointer;
	
}
div#rotate{
	background-image:url(images/rotate.png);
	width:40px;
	height:40px;
	position:absolute;
	background-size:100%;
	top:534px;
	left:670px;
	pointer-events:none;
	opacity:0.5;
	display:none;
}
.catTitle{
	position:relative;
	cursor:pointer;
	width: max-content;
	
}
.catTitle:hover{
	filter: brightness(1.5);
}
.catTitle h2{
	text-transform:uppercase;
	font-weight:600;
	font-size:18px;
	color:#5f5f5f;
	margin:0;
	margin-top:10px;
	display:inline-block;
	
}
.catTitle.active .arrow{
	transform:rotate(0deg);
}
.arrow{
	background-image:url(images/arrow.png);
	background-size:50%;
	background-position:center;
	background-repeat:no-repeat;
	width:27px;
	height:27px;
	display:inline-block;
	top: 8px;
    position: relative;
	margin-left:12px;
	transition:transform 0.35s;
	transform:rotate(180deg);
}
.subCat{
	overflow:hidden;
}

#dontPress{
	position:absolute;
	backdrop-filter:blur(5px);
	width:680px;
	height:260px;
	left:-15px;
	z-index:1;
	background-image:url(images/loader.gif);
	background-size:200px;
	background-position:center;
	background-repeat:no-repeat;
}

.button[data-id="CC"] div{
	background-image:url(images/CC.jpg);
}
.button[data-id="KK"] div{
	background-image:url(images/KK.jpg);
}
.button[data-id="NN"] div{
	background-image:url(images/NN.jpg);
}
.button[data-id="SS"] div{
	background-image:url(images/SS.jpg);
}
.button[data-id="YY"] div{
	background-image:url(images/YY.jpg);
}
.button[data-id="TT"] div{
	background-image:url(images/TT.jpg);
}
.button[data-id="LL"] div{
	background-image:url(images/LL.jpg);
}
.button[data-id="VV"] div{
	background-image:url(images/VV.jpg);
}
.button[data-id="GG"] div{
	background-image:url(images/GG.jpg);
}
.button[data-id="AA"] div{
	background-image:url(images/Argent.jpg);
}
.button[data-id="WW"] div{
	background-image:url(images/Bois.jpg);
}
.button[data-id="BB"] div{
	background-image:url(images/Blanc.jpg);
}
.button[data-id="FF"] div{
	background-image:url(images/Fume.jpg);
}
.button[data-id="QQ"] div{
	background-image:url(images/Marbre.jpg);
}
.button[data-id="II"] div{
	background-image:url(images/II.jpg);
}
.button[data-id="JJ"] div{
	background-image:url(images/JJ.jpg);
}
.button[data-id="HH"] div{
	background-image:url(images/HH.jpg);
}
.button[data-id="EE"] div{
	background-image:url(images/EE.jpg);
}
.button[data-id="KL"] div{
	background-image:url(images/KK.jpg),url(images/LL.jpg);
	background-position: -13px center, 13px center;
	background-repeat: no-repeat,no-repeat;
}
.button[data-id="CK"] div{
	background-image:url(images/CC.jpg),url(images/KK.jpg);
	background-position: -13px center, 13px center;
	background-repeat: no-repeat,no-repeat;
}
.button[data-id="LK"] div{
	background-image:url(images/LL.jpg),url(images/KK.jpg);
	background-position: -13px center, 13px center;
	background-repeat: no-repeat,no-repeat;
}
.button[data-id="SK"] div{
	background-image:url(images/SS.jpg),url(images/KK.jpg);
	background-position: -13px center, 13px center;
	background-repeat: no-repeat,no-repeat;
}

/* Main menu -> index.html */

#contentMenu{
	padding:50px;
	background:#232832;
	background-size:100%;
	/*width:500px;
	height:500px;*/
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);	
	border-radius:10px;
}
#contentMenu img{
	margin-bottom:50px;
}
#contentMenu a{
	display:block;
	text-align:center;
	text-transform:none;
	text-decoration:none;
	color:white;
	margin:10px 0;
	padding:20px 50px;
	border:2px solid white;
	border-radius:8px;
	background:#ffffff00;
	transition:background 0.3s;
}
#contentMenu a:hover{
	background:#ffffff22;
}