.oRdiStrat, .pHoneStrat {position:absolute;}
	
	.box3d.theOrdi {transition:all 500ms  ease-in-out; perspective: 1100px; z-index: 3;}


	.pinarTable {
		position: absolute; z-index: -1; bottom:0; right:0; height:100vh; width:100%; opacity:0; transition: opacity 250ms linear;
		background-image:linear-gradient(transparent 52%, rgb(240, 252, 255) 52%, rgb(21, 59, 75) 100%);
	}
		.so_04So .pinarTable {opacity:1;}
	
	.flou {filter:blur(2px);}

	#ordiPose {
		position:absolute; top:50%; left:50%; height:600px; width:800px; margin:-300px 0 0 -400px; transform-style:preserve-3d; transform-origin:center; 
		transform: scale(1); transition: all 500ms  ease-in-out;
	}

	#ordiPose.pGabriel_so_01 {
		transform:scale(.6) rotate(-20deg) translate(-20vw,-30vh);
	}

	#ordiPose.pGabriel_so_02 {
		transform:rotateZ(35deg) rotateX(15deg) rotateY(-15deg) scale3d(.8,.8,.8) translate3d(0vw, 0vh, -100px);
	}

	#ordiPose.pGabriel_so_03 {
		 transform:rotateZ(95deg) rotateX(45deg) rotateY(-75deg) scale3d(1.8,1.8,1.8) translate3d(-10vw, 8vh,-90px); 
	}

	#ordiPose.pGabriel_so_04 {
		transform:rotateZ(0deg) rotateX(89deg) rotateY(0deg) rotate(-20deg) scale3d(.8,.8,.8) translate3d(0vw, 0vh, -100px);
	}

	.so_04So .oRdiStrat {
		filter: blur(2px);
	}

	.so_04So .box3d.redmi3d .theRedmi {
		transform:rotateZ(0deg) rotateX(100deg) rotateY(-180deg) rotate(20deg) scale3d(.4, .4, .4) translate3d(0px,-200px,560px);
	}


		#ordiPose.pGabriel_so_01 .screenLaptop.lower {transform: translate3d(0,0,13px) rotateX(0deg);}
		#ordiPose.pGabriel_so_01 .screenLaptop {
			transform: translate3d(0,0,13px) rotateX(100deg) scaleY(.7); 
			transition:all 500ms ease-in-out;
		}

		#ordiPose.pGabriel_so_02 .screenLaptop {
			transform:translate3d(0,0,13px) rotateX(105deg) scaleY(.8);
			transition:all 500ms  ease-in-out;
		}

		#ordiPose.pGabriel_so_03 .screenLaptop {
			transform:translate3d(0,0,13px) rotateX(110deg) scaleY(.95);
			transition:all 500ms  ease-in-out;
		}

		#ordiPose.pGabriel_so_04 .screenLaptop {
			transform:translate3d(0,0,13px) rotateX(0deg);
			transition:all 500ms  ease-in-out 3s;
		}
	
	/* /////////////////////////////////// */
	
	#peterGabriel.so_01So .box3d.theOrdi {
		transform:translate(0,0);
	}
	
	#peterGabriel.so_02So .box3d.theOrdi {
		transform:translate(20vw,-15vh);
	}
	
	#peterGabriel.so_03So .box3d.theOrdi {
		transform:scale(1.2);
	}
	
	#peterGabriel.so_04So .box3d.theOrdi {
		transform:translate(-30vw, 10vh) scale(.8);
	}
	
	#peterGabriel.so_04So .box3d.redmi3d {
		transform: scale(1) translate(-18vw,0);
	}

	#peterGabriel.so_05So .box3d.theOrdi, #peterGabriel.so_06So .box3d.theOrdi  {
		transform:translate(-150vw, 10vh) scale(.8);
	}
	
	@media only screen and (orientation: portrait) {
		#peterGabriel.so_03So .box3d.theOrdi {
			transform: scale(.5) translate3d(-14dvw,-11dvh,0dvw);
		}
	}

	/* /////////////////////////////////// */

	#colorBack.back_so_01  {
		background-color: rgb(255, 200, 0);
	}
	#colorBack.back_so_01 .colorBackIn {
		transform:scale(3); opacity: .6;
	}
		#so_01 .blockText {
			color:rgb(255, 255, 255); background-color: rgb(114,5,192, .6); box-shadow: 0 5rem 1rem -2rem rgba(67, 2, 69, 0.2);
		}



	#colorBack.back_so_02 {
		background-color: rgb(29,172,124);
	}

	#colorBack.back_so_02 .colorBackIn {
		transform:translate(10vw,-7vh) rotateX(-20deg) scale(1.5); opacity: .3;
	}
		#so_02 .blockText {
			color:rgb(255, 255, 255); background-color:rgb(255,0,83, .7); box-shadow: 0 5rem 1rem -2rem rgba(60, 0, 20, 0.2);
		}


	#colorBack.back_so_03 {
		background-color: rgb(197, 192, 213);
	}
		#colorBack.back_so_03 .colorBackIn {
			transform:translate(7vw,20vh) rotateX(79deg) scaleX(1.5) scale(4); opacity: .6;
		}
		.back_so_03 .blockText {
			background: linear-gradient(135deg,rgba(200, 55, 55, 0.72) 30%, rgba(125, 1, 59, 0.77) 70%);
			color:rgb(255,255,255); box-shadow: 0 5rem 1rem -2rem rgba(60, 0, 20, 0.2);
		} 

	#colorBack.back_so_04 {
		background-color:rgb(162, 196, 211);
	}
			.back_so_04 .blockText {
				color:rgb(255, 255, 255); background:linear-gradient(135deg,rgba(20, 200, 20, 0.44) 20%, rgba(4, 138, 4, 0.61) 60%);
			}
	
	#colorBack.back_so_04 .colorBackIn {
		transform:scale(3); opacity: .95;
	}




		
	/* .theCompuBox {
		position:absolute; top:50%; left:50%; height:600px; width:800px; margin:-300px 0 0 -400px; transform-style:preserve-3d; transform-origin:center; 
		transform:rotateX(82deg) rotateY(2deg) rotateZ(82deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
		transition: all 500ms linear;
	}
		
	.outThePage .theCompuBox  {
		transform:rotateX(82deg) rotateY(2deg) rotateZ(80deg) translate3d(0, 0, 0) scale3d(.55, 1, 1.1);
	}
	
	.onThePage .theCompuBox  {
		transform:rotateZ(35deg) rotateX(15deg) rotateY(-15deg) scale3d(.8,.8,.8) translate3d(0vw, 0vh, 0px);
	} 
	*/

	#lightUnderBox {
		position:absolute; z-index:1;
		perspective-origin:center;
		top:0; left:0;
		transform:rotate(0deg); 
		background:linear-gradient(to bottom, #ffef31, #5a2020);
	}
	
		.inLightUnderBox {
			position:absolute; top:0; left:0; height:100%; width:100%; transform:scaleY(.7) translate(2%, 5%);
			background:radial-gradient(ellipse at 40% 50%, rgba(255,255,255, .5) 0%, transparent 30% );
		}
		
		#lightUnderBox.inMove {transform:rotate(-45deg);} 
			#lightUnderBox.inMove .inLightUnderBox {transform:scaleY(1) translate(0, 0);}
			
			#lightUnderBox.viewRight {transform:rotate(180deg);}
			#lightUnderBox.viewLeft  {transform:rotate(-45deg);}
			#lightUnderBox.viewFront {transform:rotate(315deg);}
			#lightUnderBox.viewBack {transform:rotate(180deg);}
			
		#peterGabriel #globalBox, #peterGabriel .inGlobalBox {
			position:absolute; top:50%; left:50%; z-index:2; height:600px; width:800px;
			transform-style:preserve-3d; transform-origin:center; 
		}

				
		.viewFront .inGlobalBox.inMove {transform:rotateX(90deg) rotateZ(0deg) translate3d(0px,0,-100px);}
		.viewBack .inGlobalBox.inMove {transform:rotateX(70deg) rotateZ(180deg) translate3d(0px,70px,-100px);}
		.viewBack2 .inGlobalBox.inMove {transform:rotateX(70deg) rotateZ(-180deg) translate3d(0px,70px,-100px);}
		
		.view3QuarTLeft .inGlobalBox.inMove {transform:rotateX(70deg) rotateZ(-45deg) translate3d(0px,70px,-2vh);}
		.viewLeft .inGlobalBox.inMove {transform:rotateX(70deg) rotateZ(-90deg) translate3d(0px,70px,-2vh);}
		
		.view3QuarTRight .inGlobalBox.inMove {transform:rotateX(70deg) rotateZ(45deg) translate3d(0px,70px,-2vh);}
		.viewRight .inGlobalBox.inMove {transform:rotateX(70deg) rotateZ(90deg) translate3d(0px,70px,-2vh);}
		
		
		
		.lineFont {font-family:'Line Awesome Free' !important; font-weight:900;}
		
		.baseCompu {
			position:absolute; top:100px; left:100px; height:400px; width:600px; border-radius:10px; 
			background:linear-gradient(45deg,rgb(187, 187, 187) 45%,rgb(89, 89, 89) 90% );
			transform-origin:center; transform-style:preserve-3d;	
		}
		
		.baseCompu.overCompue {z-index:2; transform:translate3d(0px ,0px ,13px);}
		.baseCompu.Cbottom { transform:translate3d(0px ,0px ,3px); box-shadow:7px 0px 10px 3px rgba(0, 0, 0, 0.6); /* box-shadow:10px 15px 10px 3px rgb(108, 108, 108); */}
		
		.clavier {
			position:absolute; height:190px; width:510px; top:50px; left:45px; background:#999;
		}
		
		.touchPad {
			position:absolute; height:120px; width:200px; top:250px; left:185px; background:rgb(181, 181, 181); box-shadow:inset 1px 1px 3px rgb(152, 152, 152); border-radius:5px;
		}
		
		.touche {
			height:34px; width:34px; float:left; background:rgb(46, 46, 46); line-height:32px; text-align:center; color:#fff; font-size:15px;
			font-family:arial; border:1px solid #000; box-sizing: border-box;;
			box-shadow:inset 2px 2px 1px rgb(63, 63, 63), inset -2px -2px 1px rgb(0, 0, 0);
		}
			.touche.toucheUnDemi {width:17px;}
			.touche.toucheUnEtDemi {width:51px;}
			.touche.toucheDouble {width:68px;}
			.touche.toucheF {height:20px; font-size:10px; line-height:20px}
			.touche.space {width:204px;}
			.touche.small {font-size:10px !important;}
			.touche.tArrow {height:16px; line-height:16px; border:none;}
		
		.bordurFront {
			position:absolute; bottom:0; left:5px; margin:0; height:10px; width:590px; transform-origin:bottom center; transform-style:preserve-3d; transform:rotate3d(1,0,0,-90deg) translate3d(0,0,0px);
			background:linear-gradient(90deg, #ccc 0%, rgb(170, 170, 170) 20%);
			overflow:hidden;
		}
		
			.bordurFront .fante {
				height:8px; width:100px; position:absolute; left:250px; bottom:6px; border-radius:4px; background:#ccc; box-shadow:inset 0 0 3px rgb(73, 73, 73);
			}
			
		.bordurBack {
			position: absolute;  top: 0; left: 5px; margin: 0;  height: 10px;  width: 590px;
			transform-origin: top center; transform-style: preserve-3d; transform: rotate3d(1,0,0,90deg) translate3d(0,0,0px);
			background: linear-gradient(90deg, #b8b8b8 0%, rgb(91, 91, 91) 20%);
		}
		
		.bordurSide {
			position:absolute; top:5px; margin:0; height:390px; width:10px;  transform-style:preserve-3d;  background:#ccc;
		}
		
		.bordurSide.leftB {background:#ccc; left:0; transform-origin:left center; transform:rotate3d(0,1,0,-90deg);}
		.bordurSide.rightB {background:linear-gradient(0deg, rgb(171, 171, 171) 0%, rgb(109, 109, 109) 10%); right:0; transform-origin:right center;  transform:rotate3d(0,1,0,90deg); }
			
			.bordurSide.rightB span, .bordurSide.leftB span {position:absolute; background:black; }
				.bordurSide.leftB span:nth-child(1) {height:8px; width:8px; top:10px; left:1px; border-radius:50%;} 
				.bordurSide.leftB span:nth-child(2) {height:10px; width:8px; top:28px; left:1px; border-radius:3px 1px 1px 3px; border-style:solid; border-width:1px 3px; border-color:black; background:#ccc;} 
				.bordurSide.leftB span:nth-child(3) {height:10px; width:2px; top:45px; left:4px; border-radius:1px;} 
				.bordurSide.leftB span:nth-child(4) {height:10px; width:2px; top:60px; left:4px; border-radius:1px;}
				.bordurSide.leftB span:nth-child(5) {height:4px; width:4px; top:85px; left:3px; border-radius:50%;}
				
				.bordurSide.rightB span:nth-child(1) {height:8px; width:8px; top:10px; left:1px; border-radius:50%;} 
				.bordurSide.rightB span:nth-child(2) {height:13px; width:6px; top:30px; left:2px; border-style:solid; border-color:black; border-width:1px 3px 1px 1px; background:blue;} 
				.bordurSide.rightB span:nth-child(3) {height:13px; width:6px; top:50px; left:2px; border-style:solid; border-color:black; border-width:1px 3px 1px 1px; background:blue;} 
				.bordurSide.rightB span:nth-child(4) {height:35px; width:2px; top:80px; left:4px; border-radius:0;}
			
			.bordurCoin {position:absolute; height:20px; width:20px; border-radius:50%; transform-style:preserve-3d; transform: rotateX(-90deg);}
				.bordurCoin.basGauche {bottom:0; left:0;}
				.bordurCoin.basDroit {bottom:0; right:0;}
				.bordurCoin.hautGauche {top:0; left:0;}
				.bordurCoin.hautDroit {top:0; right:0;}
				
				.bordurCoinFront {
					position:absolute; height:10px; width:2px; bottom:10px; left:9px; transform-style:preserve-3d; transform-origin:bottom center; transform:rotateX(-90deg) translate3d(0,0,10px); 
				}
				
				.basGauche .bordurCoinFront {background:#ccc;}
				.basDroit .bordurCoinFront {background:rgb(170, 170, 170);}
				.hautGauche .bordurCoinFront {background:rgb(187, 187, 187);}
				.hautDroit .bordurCoinFront {background:rgb(89, 89, 89);}
				
		/* ======================= SCREEN ===================== */
		
		.inGlobalBox .screenLaptop { 
			position:absolute; top:100px; left:100px; height:400px; width:600px; border-radius:10px;
			background:#000; border-radius:10px;
			transform-style:preserve-3d; transform-origin:top center; 
			/* transform:translate3d(0,0,13px) rotate3d(0,0,0,105deg); */
			transition: all 500ms linear;
			transform:translate3d(0,0,13px) rotateX(0deg);
			
		}

		.inGlobalBox .screenLaptop.lower { transform:translate3d(0,0,13px) rotateX(0deg);}
		
			/* .inGlobalBox .screenLaptop.openScreen { */
			.active .onThePage .inGlobalBox .screenLaptop {
				 transform: translate3d(0,0,13px) rotateX(0deg);
				 transition:all 500ms linear 1s;
			}
			.inBackGround .inGlobalBox .screenLaptop {
				 transform: translate3d(0,0,13px) rotateX(105deg) scale3d(1, .85, 1);
			}
		
		.vertiRotate {
			position: absolute; top:0; left:0; height:100vh; width:100%; transform-origin:center; transform-style:preserve-3d; transform:rotateX(0deg);
			/* border:1px solid green; */
		}
		.vertiRotate.aboveView {transform:rotateX(-70deg);}
		
		.inScreenLaptop, .backSceen {
			position:absolute; top:0; left:0; height:100%; width:100%; z-index:4; border-radius:10px; transform-style:flat;
			
		}
		
		.inScreenLaptop {z-index:2;transform-origin:top center; transform:rotateY(180deg); border:1px solid #ccc;}
		
		.backSceen {
			z-index:1; background:linear-gradient(135deg,rgb(200, 200, 200) 0%,rgb(102, 102, 102) 100%);
			transform-style:preserve-3d; transform-origin:top center; transform:translate3d(0,0,1px);
			backface-visibility: hidden;
		}
		
			.inGlobalBox.inMove .screenLaptop {
				 transform:translate3d(0,0,13px) rotate3d(1,0,0,105deg); 
			}
			
			.viewFront .inGlobalBox.inMove .screenLaptop {
				 transform:translate3d(0,0,13px) rotate3d(1,0,0,90deg); 
			}
			
			.inGlobalBox .screenLaptop.closed, .viewFront .inGlobalBox.inMove .screenLaptop.closed { transform:translate3d(0,0,13px) rotate3d(0,0,0,105deg); } 
			
			.charniere {
				position:absolute; top:0; left:100px; width:400px; border-radius:0 0 5px 5px; height:15px; background:#000;
			}
			
			.allume {
				position:absolute; top:20px; left:285px; height:20px; width:20px; border-radius:50%; line-height:19px; font-size:12px; text-align:center; color:green; 
				background:linear-gradient(135deg,rgb(126, 126, 126) 0%,rgb(161, 161, 161) 100%); border:1px solid green;
				box-shadow:0 0 1px rgb(44, 44, 44);
			}

			
			.theLight {
				position:absolute; z-index:1; height:1200px; width:1200px; top:-550px; left:-490px; background:radial-gradient(rgba(255,255,255, .7) 0% , rgba(255,255,255, 0) 70%);
			}
			
			.shadowScreen {
				position:absolute;z-index:-1; top:0; left:0; height:400px; width:600px; border-radius:10px; 
				background:linear-gradient(135deg,rgba(0,0,0, 1) 70% , rgba(0,0,0, 0)100%); 
				transform-origin:top right; transform-style:preserve-3d; transform:skewX(0deg); filter:blur(0px);
			}
			
			.inMove .shadowScreen {
				top:-8px; height:190px; transform:skewX(25deg); filter:blur(5px);
			}
			.inMove .shadowScreen.closed {
				top:0px; height:400px; transform:skewX(0deg); filter:blur(0px);
			}
			
		.screenLogo {			
			position: absolute; top: 50%; left: 50%; margin: -500px 0 0 -500px; height: 1000px;  width: 1000px; border-radius: 50%;
			text-align: center;  color: #fff; transform-origin: center; transform-style: preserve-3d;
			transform: translate(0px, -50px) scale(3);  line-height: 900px; font-size: 900px;
			font-family: times; border: 30px solid #FFF;
			background:linear-gradient(90deg, #ccc, rgb(143, 143, 143));
		}
			.screenLogo.inMove {transform: scale(.07) rotate(180deg);}
		
			.lightHalo {
				position:absolute; top:0; left:0; height:400px; width:400px; border-radius:0 0 0 10px; opacity:1; background:radial-gradient(circle at 0% 100% ,rgba(255,255,255, .8) 0%, transparent 40%);
			}
			.closed .lightHalo {opacity:0;}
		
		.backViewScreen {
			position:absolute; top:0; left:0; z-index:2; background:#000; width:600px; height:400px; border-radius:10px;
		}
			.backViewScreen .faceScreen {
				position:absolute; top:0; left:0; height:400px; width:600px; margin:0; border-radius:10px; transform-style:preserve-3d;
			}
				.backViewScreen .faceScreen.front {background:linear-gradient(135deg,rgb(200, 200, 200) 0%,rgb(102, 102, 102) 100%);  transform:rotateY(0deg); z-index:1;}
				.backViewScreen .faceScreen.back {background:rgb(0,0,0); transform:rotateY(180deg); z-index:2;}
		
		
		.viewScreen {
			position:absolute; z-index:3;  height:350px; width:560px; top:20px; left:20px; transform-origin:center; transform-style:preserve-3d; transform:rotateZ(180deg) rotateY(180deg); 
			background-image:url(../../images/drumer.jpg); background-repeat:no-repeat; background-position:center; background-size:cover;
		}
		
		.viewScreenReflet {
			position:absolute; z-index:4; top:0; left:0; height:400px; width:600px; border-radius:10px; transform-style:preserve-3d; transform-origin:top center;
			background:linear-gradient(125deg, rgba(255,255,255,0) 70%, rgba(255,255,255,.3) 55%) ; transform:translate3d(0px, 0px, -1px);
		}
		
@media only screen and (max-width: 476px ) {
	.sliderBoxItem:nth-child(1) {border-width: 0px 0px 0px 0px; width:100%;}
	.sliderBoxItem:nth-child(2) {border-width: 1px 0px 1px 0px; width:100%;}
	.sliderBoxItem:nth-child(3) {border-width: 0px 0px 0px 0px; width:100%;}
	.sliderBoxItem:nth-child(4) {border-width: 1px 0px 0px 0px; width:100%;}

	.wrapSliderBoxUnder {height:25vh;}

	.theLaptop .moitie { height:50vh; width:100%;}
	.theLaptop .moitie:first-child {order: 2;}
	.theLaptop .moitie:nth-child(2) {order: 1;}

	.box3d.theOrdi {transform:translate3d(0,10vh,0) scale(.48);}
}

@media only screen and (max-width: 600px) and (min-width: 400px) {
  .sliderBoxItem:nth-child(1) {border-width: 0px 1px 1px 0px; width:50%;}
  .sliderBoxItem:nth-child(2) {border-width: 0px 0px 1px 0px; width:50%;}
  .sliderBoxItem:nth-child(3) {border-width: 0px 0px 0px 0px; width:100%;}
  .sliderBoxItem:nth-child(4) {border-width: 1px 0px 0px 0px; width:100%;}
  
  /* .wrapSliderBoxUnder {} */
}		

/* ///////////////////////////////////////////////////////////////////////////////// */
/* ////////// FACE ///////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////// */

.sized {transform:scale(.5);}

.box3d.redmi3d {
	z-index:1;
}
		
		
.laBoite, .laBoiteImage {
	position:absolute; bottom:0; left:0; height:100%; width:100%; overflow:hidden; perspective-origin:center; transform-style:preserve-3d; perspective:2000px;
	transition:all 500ms linear; transform-origin:left bottom;
}
	.windowBoite_1, .windowBoite_2 {
		 transform:scale(0);
	}

	.laBoite {z-index:2; background:rgb(68, 68, 68); border:2px solid rgb(108, 108, 108);  opacity:1; transform:scale(1);  transform-origin:bottom left;}
		#tableau-4.active .screenLaptop .laBoite {opacity:0; transform:scale(0);}
		
	.laBoiteImage {
		z-index:1; display:flex; flex-flow:row wrap; justify-content:center; transform-origin: center;
		background:url(../../images/laBoiteImage_img.jpg)  top left / cover no-repeat; background-color:rgb(255,255,255); 
	}
	
		.pandaRoux {position:absolute; z-index:5; top:0; left:0; height:15px; width:100%; line-height:13px; display:flex; background:#ececec; }
			.pandaRoux ul {display:flex; font-size:10px; color:black; }
				.pandaRoux ul:first-child { width:80%;}
				.pandaRoux ul:last-child { width:30%; justify-content:end;}
				.pandaRoux ul li, .pandaRoux ul div {margin:2px 5px 0 0;}
				.pandaRoux ul:first-child div {height:10px; width:70%; background:#afafaf; border-radius:3px; padding: 0 5px;}
				
		.laBoiteImage .theSite {width:60%; }
			.imgtheSite {background-image:linear-gradient(160deg, rgba(255,0,0, .5) 50%, transparent 0%),url(../../images/hands.jpg);}
			
			.laBoiteImage_imgTxt {display:inline-flex;margin: 1rem 0;}
				.laBoiteImage_imgTxt img {width:40%;}
				.laBoiteImage_imgTxt p {width: 60%;font-size:10px; padding:1rem 1rem; text-align:justify; background:#c60202; color:#fff;}
					.laBoiteImage_imgTxt p strong {font-size:15px; padding:0 0 .8rem 0;}
			
		.laBoiteImage .theCode {width:40%; background:rgb(60, 60, 60); }
			.scrollBox {position:absolute; z-index:2; top:0; left:0; width:10px; height:100%; background:linear-gradient(to bottom,#ececec 15%, #8f8f8f 15%, #8f8f8f 45%, #ececec 45%);}
				.scrollBox i {position:absolute; font-size:9px; left:0;}
				.scrollBox i:first-child {top:15px;}
				.scrollBox i:last-child {bottom:15px;}
			.theCodeBlock {border:1px solid #ccc;}
				.theCodeBlock .scrollBox {left:auto; right:0;}
				.theCodeBlock .textareaBlock {
					width:100%; height:100%; background:rgb(60, 60, 60); color:rgb(255 159 159); font-size:7px; padding:12px 12px 12px 20px; overflow:hidden; line-height:.2rem;
				}
					.theCodeBlock:first-child textarea {color:rgb(255 ,159, 159);}
					.theCodeBlock:last-child textarea { padding:0 12px 0 20px; color:rgb( 159,159,255);}
					
		

.inLaboite {position:absolute; z-index:1; height:650px; width:550px; top:50%; left:50%; margin:-325px 0 0 -275px; background:#fff;}


.systExploi {
	position:absolute; z-index:5; width:100%; height:14px; left:0; bottom:0; padding:1px;  background:rgb(151, 155, 157);
}
	.systExploi .logoLogiciel {
		position:absolute; top: 1px; height:10px; width:10px; display:inline-table; text-align:center; color:#fff;
		font-size:10px; font-weight:lighter; 
	}
	
	.systExploi ul {list-style:none; line-height: 10px; margin:0; padding:0 2px;}
	.systExploi ul li {color:#fff; /* font-family:'Line Awesome Free' !important; */ display:inline; font-size:11px;  }
		.systExploi ul li.folder {color:rgb(255, 235, 3);}
		.systExploi ul li.wind {color:#49A5FF;}
		.systExploi ul li.css3 {color:rgb(38, 77, 228);}
		.systExploi ul li.html5 {color:#ff7700;}
		.systExploi ul li.ffox {color:rgb(249, 156, 74);}
		.systExploi ul li.mail {color:rgb(74, 189, 249);}
		
		.systExploi ul li.actived {color:#fff; background:linear-gradient(135deg, rgb(255, 195, 5), rgb(255, 60, 0)); padding:2px; font-family:arial !important;}
		
	.systExploi ul li:nth-last-child(-n+4) {float:right; }
	.systExploi ul li:nth-last-child(4) {font-family:arial !important; font-size:6px;}
	
	.sBoiteTXT {
		border-radius:3px; width:100px; height:10px; line-height:10px; margin:3px 5px; display:inline-block; background:#fff; font-size:7px; padding:0 0 0 2px;
	}
	
		.sBoiteTXT:after {
			content:"\f0d7"; font-family:'Line Awesome Free'; font-weight:900;
			line-height:10px; font-size:8px; position:absolute; right:0; top:0;
		}
	
	.sBoiteTXT.smallest {
		width:30px;
	}
	
	.scroller {
		position:absolute; z-index:2; top:6%; right:0; height:94%; width:6px; font-family:'Line Awesome Free' !important;  background:#ccc;
	}
		.scroller:before {
			content:"\f16b"; font-size:6px; position:absolute; top:0; left:0;
		}
		.scroller:after {
			content:"\f168"; font-size:6px; position:absolute; bottom:0; left:0;
		}
		.scroller span {position:absolute; left:0; top:30%; width:100%; height:30%; background:#fff;}
	
	ul.calques {
		list-style:none; margin:0; padding:0; 
	}
	
	ul.calques li {width:100%; height:14px; line-height:14px; padding:0; text-align:center; font-size:8px; font-family:'Line Awesome Free'; font-weight:900; border-top:1px solid #ccc; border-bottom:1px solid #000;}
		ul.calques li.cActive  {background:#ddd;}
		ul.calques li.cActive span {color:#333;}
		ul.calques li span {color:#fff; font-family:arial;}
	ul.calques li:after {
		content:"\f14a  \f06e   \f023"; position:absolute; top:0; left:1px; color:#fff; 
	}
	
	ul.calques li.cActive:after { color:#333;}
	
	.sBoiteParaf {font-family:'Line Awesome Free'; font-weight:900; color:#fff; margin:0 0 3px 0;}
		.sBoiteParaf p { font-size:12px !important; text-align:center;}

.logiciel {
	position:absolute; left:0; z-index:4; width:100%; height:14px; font-family:arial; background:linear-gradient(90deg,rgb(169, 169, 169) 100%, rgb(241, 241, 241) 0%)
}

.logiciel ul {margin:0; padding:0; list-style:none;}
	.logiciel ul.menuLogi li {float:left; color:#000; font-family:arial; margin:0 3px; font-size:8px;}
	
	ul.menuLogi li span {height:10px; width:10px; display:block; color:#fff; text-align:center; background:linear-gradient(135deg, rgb(255, 195, 5), rgb(255, 60, 0));}
	
	ul.menuLogi li:nth-last-child(-n+3) {
		float:right; font-family:'Line Awesome Free'; font-weight:900;
	} 
	ul.menuLogi li:nth-last-child(3) {color:#fff; background:red;}
	
.logiciel .boiteAoutils {
	position:absolute; display:flex; flex-flow:row wrap; top:30px; left:20px; width:32px; height:auto; padding:5px 0; border-color:#000; border-style:solid; 
	border-width:5px 0 0 0; background:rgb(133, 133, 133); box-shadow:4px 4px 5px 0 rgba(0, 0, 0, 0.18);
}
	.outils  {height:15px; width:50%; text-align:center; color:#fff; font-family:'Line Awesome Free'; line-height:15px; font-weight:bold; font-size:10px;}
		.outils:first-child {
			width:100%; height:6px; line-height:6px;
		} 
		.outils:last-child {
			width:100%; height:25px;
		} 
		
	.outils.borderColor:before {content:""; position:absolute; left:5px; top:0; height:12px; width:12px; background:#fff;} 	
	.outils.borderColor:after {content:""; position:absolute; height:12px; right:5px; top:9px; width:12px; border:3px solid #000; box-sizing:border-box;} 	
		
	.outillage {
		position:absolute; height:325px; width:120px; border:5px solid rgb(133,133,133);font-family:arial; right:0; top:12px; background:rgb(80,80,80);
	}
		.outillage .sousBoite {
			width:100%; height:34%; border-width:0 0 3px 0; border-style:solid; border-color:rgb(133,133,133); 
		}
			.sousBoite p {font-size:5px; color:#fff; padding:0; background:rgb(133,133,133);}
				.sousBoite p span { background:rgb(80,80,80); margin:0; border-top:1px solid rgb(133,133,133); padding:2px 5px;}
				
		.sousBoite .theColor {
			margin:10px 30px; height:60px; width:60px; background:linear-gradient(135deg, rgb(187, 0, 47) 0%, rgb(119, 1, 114) 100%);
		}

	
	
	
.boiteCraniene {
	position:absolute; z-index:1; top:50%; left:50%; height:490px; width:410px;
	border-radius:200px 200px 200px 200px/210px 190px 190px 230px;
	margin:-317px auto auto -205px; background:#000;
}

.coup {
	position:absolute; z-index:1; height:340px; width:300px; left:50%; top:50%; 
	margin:0 0 0 -150px; background:linear-gradient(90deg, #fff, rgb(141,141,141) ); 
}
	.inCoup {
		position:absolute; top:0; left:20px; width:260px; height:330px; border-radius:0 0 50% 50%/0 0 100% 100%; 
		background:linear-gradient(90deg, rgb(255,255,255) 40%, rgb(141,141,141) 60%); 
		box-shadow:	inset 8px 3px 5px 0 rgb(169, 169, 169),
					inset -8px 3px 7px 0 rgb(190, 190, 190),
					10px 0px 5px 0 rgb(158, 158, 158);
		border-right: 10px solid rgb(177, 175, 175);
		border-left: 10px solid rgb(210, 210, 210);
	}
.chevelure {
	position:absolute; z-index:11; top:50%; left:50%; height:200px; width:400px; margin:-280px 0 0 -200px; 
}
	.touffe {position:absolute; background:#000;}
	.toufDroit {
		z-index:1; top: 73px; right:2px; height: 146px; width: 50px; border-radius: 0 50% 0 50%; transform: skewY(55deg);
	}
	.toufGauche {
		z-index:1; top: 73px; left: 2px; height: 146px; width: 50px; border-radius: 50% 0 50% 0; transform: skewY(-55deg);
	}
	
	.touftop {
		z-index:2; top:0; left:30px; width:340px; height:160px; border-radius:100px 100px 0 0 /100px 100px 0 0; 
		background:transparent !important; overflow:hidden;
	}
	
		.buck {
			position:absolute; top:0; left:0; width:340px; height:100px; background:#000; border-radius:0 0 170px 170px /0 0 70px 70px;
		}
	
.toufBack {
	position:absolute; z-index:9; top:50%; left:50%; margin:-200px 0 0 -200px ; height:200px; width:200px;
	border-radius:50%; background:#000;
}

.face {
	position:absolute; z-index:10; top:50%; left:50%; height:550px; width:380px; margin:-275px auto auto -190px;
	border-radius:70% 70% 300px 300px /50% 50% 500px 500px; 
	box-shadow:inset 4px -17px 10px -5px rgba(114, 114, 114,.1);
	background:	radial-gradient(circle at 10% 10% , #fff 30% ,rgba(114, 114, 114, 0) 100%),
				radial-gradient(circle at 0% 50% , #fff 30% ,rgba(114, 114, 114, 0) 100%),
				radial-gradient(circle at 45% 93% , #fff 2% ,rgb(114, 114, 114) 20%),
				rgb(114, 114, 114);
				
	border-left: 2px solid rgb(246, 5, 5);
}

.vectorTool {
	position:absolute; z-index:100; height:20px; width:20px; bottom:40px; left:142px;
	transform-origin:center; transform:rotate(-36deg);font-size:20px;
	font-family: 'Line Awesome Free'; font-weight:900;
}

.vector {
	position:absolute; height:1px; width:300px; transform-origin:center; background:red;
}
	.vector span {
		position:absolute; height:6px; width:6px; background:red; top:-2px; left:50%; margin:0 0 0 -3px;
	}


.vector:before, .vector:after {
	content:""; position:absolute; height:6px; width:6px; top:-3px; border:2px solid red; background:#fff; transform-origin:center; transform:rotate(45deg);
}
	.vector:before {left:0; } .vector:after {right:0;}

.vector.xVector {
	left:50px; bottom:0; transform:rotate(5deg);
}
.vector.yVector {
	left:-150px; top:290px; transform:rotate(-90deg);
}

.oeil {
	position:absolute; top:200px; height:100px; width:130px;
	border-top:10px solid #000; z-index:10; overflow:hidden;
}
	.oeil.oeilDroit {
		right:40px; left:auto; border-radius:110% 65% 100%  80%/70% 75% 110% 110%;
	}
	.oeil.oeilGauche {
		right:auto; left:40px; border-radius:65% 110% 80% 100%/75% 70% 110% 110%;
	}

	.occulus {
		width:120px; height:80px; position:absolute; top:1px; 
	}
	.oeilDroit .occulus { 
		left:5px; right:auto; border-radius:110% 65% 100%  80%/70% 75% 110% 110%;
		box-shadow:inset 20px 18px 9px -7px rgb(162, 162, 162), -4px -4px 4px 0 rgb(162, 162, 162);
		background:linear-gradient(153deg,transparent 60%,rgba(202, 202, 202, 0.46) 75%);
	}
	
		.oeilDroit .occulus .inOcculus {
			position: absolute; height: 40px; width: 100px; top: 13px; left: 8px;  overflow:hidden;
			border-radius: 40% 80% 86% 50%/80% 90% 40% 15%; border-top: 5px solid #000;
			background:linear-gradient(90deg , rgb(174, 174, 174) , #fff);
			transform: rotate(-4deg);
		}
	
	.oeilGauche .occulus {
		left:auto; right:5px; border-radius:65% 110% 80% 100%/75% 70% 110% 110%;
		box-shadow:inset -10px 18px 9px -7px rgb(162, 162, 162), 4px -4px 4px 0 rgb(162, 162, 162);
	}
		.oeilGauche .occulus .inOcculus {
			position: absolute; height: 40px; width: 100px; top: 13px; left: 8px; overflow:hidden;
			border-radius: 80% 40% 50% 86%/90% 80% 15% 40%; border-top: 5px solid #000;
			transform: rotate(4deg);
			/* box-shadow: inset 2px 5px 2px -2px #000; */
		}
		
		.globeOculaire {
			position: absolute; z-index:5; height: 80px; width: 90px; top: -36px;  border-radius: 50%;
			background: radial-gradient(circle at center, transparent 30%,rgba(0, 0, 0, 0.18) 100%), #fff;
		}
		.oeilDroit .occulus .inOcculus .globeOculaire {left: 12px; right:auto;}
		.oeilGauche .occulus .inOcculus .globeOculaire {left: auto; right:12px;}
		
		.lacrimal {
			position: absolute; z-index:4; height:10px; width:20px; bottom:0; left:0; right:auto; border-radius:50%; background:red
		}
		
		.iris {
			position:absolute; height:40px; width:40px; top:50%; left:50%; margin:-12px 0 0 -20px; border-radius:50%;
			background:radial-gradient(circle at 30% 30%, rgb(255, 255, 255) 10%, transparent 20%),radial-gradient(circle at 65% 65%, rgb(255, 255, 255) 5%, transparent 12%),linear-gradient(0deg,transparent 45%, rgba(8, 14, 0,.8) 70% ),radial-gradient(circle at center, rgb(0, 0, 0) 28%,rgb(220, 122, 22) 31% ,rgb(120, 64, 7) 60%, rgb(28, 15, 1) 65%); 
					
		}


.bouche {
	position:absolute; width:160px; height:100px; left:110px; top:400px; margin:0px;
}

.levreSup {
	position:absolute; z-index:3; height:50px; width:160px; top:0; left:0; 
}


	.inLevreSup {
		position:absolute; z-index:2; top:0; left:0; height:30px; width:160px; height:30px;
		overflow:hidden;
	}
	
		.levreSupG, .levreSupD {
			position:absolute; z-index:3; top:0px;  width:50%; height:30px; 
			box-shadow: 0 1px 2px -2px rgba(0,0,0,.5); 
			transform-origin:center; 
			background:#ebebeb
		}
	
		.levreSupG {
			left:0; right:auto; transform-origin:100% 0; transform-style:preserve-3d;
			border-radius:40px 20px 0px 40px/15px 20px 0px 15px;
			transform:rotate(-12deg);
			background:	linear-gradient(-90deg, rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 50%),
						linear-gradient(-9deg, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%),
						#fff;
		}
		.levreSupD {
			left:auto; right:0; transform-origin:0 0; transform-style:preserve-3d; 
			border-radius:20px 40px 40px 0px /20px 15px 15px 0px;
			transform:rotate(12deg);
			background:	linear-gradient(148deg,transparent 0%, rgba(0, 0, 0, 0.45) 50%),#fff
		}



.levreInf {
	position:absolute; z-index:2; top:20px; left:7px; height:50px; width:146px;  
	border-radius:20px 10px 73px 73px/10px 10px 40px 40px; 
	background:	linear-gradient(135deg,transparent 40%,rgba(39, 39, 39, 0.41) 70%),
				radial-gradient(ellipse at 50% -5px, rgb(0, 0, 0) 0%, transparent 50%),
				radial-gradient(ellipse at 50% -20px, rgb(255, 255, 255) 70%, transparent 100%),
				linear-gradient(0deg, rgba(0, 0, 0, 0) 0%,rgba(0,0,0,0.5) 100%),
				rgb(255, 255, 255); 
}

.levreInfShadow {
	position:absolute; z-index:1; top:53px; left:54px; width:60px; height:20px;
	background: rgba(0, 0, 0, 0.42); border-radius: 50%; filter: blur(4px);
}

.philtrum {
	position:absolute; z-index:5; height:30px; width:30px; top:-5px; left:50%; margin:-20px 0 0 -15px;
	border-radius:0 0 50% 50%/0 0 60% 60%;
	background:linear-gradient(20deg, rgba(0, 0, 0, 0.23) 0%,transparent 40%);
	
}


.leNez {
	position:absolute; z-index:8; top:190px; left:140px; height:170px; width:100px;
}

.bordNez {
	position:absolute; top:312px; left:90px; height:130px; width:200px;
	border-radius:100px 100px 10px 10px/100px 100px 10px 10px;
	box-shadow:inset -2px 8px 7px -7px rgba(0, 0, 0, 0.26),3px -2px 3px -4px rgba(255, 255, 255, 0.64);
}

.nezBottom {
	position:absolute; z-index:3; left:-10px; bottom:-15px; width:120px; height:58px; 
	border-radius:30% 30% 50% 50%/70% 70% 40% 40%; 
	background:	radial-gradient(circle at 10% 25%, #fff 20%, transparent 30%),
				linear-gradient(-10deg, rgb(92, 92, 92) 20%, transparent 30%),
				rgb(140, 140, 140);
	filter:drop-shadow(12px 9px 3px rgba(110, 110, 110, 0.81));
}

	.orificeNazale {
		position:absolute; bottom:9px; height:4px; width:25px; border-radius:50%; transform-origin: center; background:black
	}
		.orificeNazale.oriDroit {right:14px; left:auto; transform: rotate(-17deg);}
		.orificeNazale.oriGauche {left:14px; right:auto; transform: rotate(17deg);}

.cartilage {
	position:absolute; z-index:4; bottom:-5px; left:20px; width:60px;  height:139px; border-radius:0 0 30px 30px; 
	box-shadow:inset -9px -6px 8px -2px rgba(114, 114, 114, 0.51);
	background:	radial-gradient(circle at 80% 0,rgba(255, 255, 255,.5) 20%, transparent 25%),
				linear-gradient(-10deg, rgba(0, 0, 0, 0.2) 8%, transparent 15%),
				radial-gradient(circle at 0% 70%,rgb(255, 255, 255) 10%, transparent 50%), 
				radial-gradient(ellipse at 0% 0%,rgb(255, 255, 255) 20%, transparent 100%), 
				radial-gradient(circle at 50% 0,rgb(255, 255, 255) 0%, transparent 50%), 
				rgb(145, 145, 145);
}

.noiseShadow {
	position: absolute; z-index:1; height:162px; width:90px; top:222px; left:50%;
	transform-origin:center; transform:rotate(0deg) skewX(24deg); border-radius:0 50% 0% 0;
	background:radial-gradient(ellipse at 27% 50%, rgba(114, 114, 114, 0.8) 30%,transparent 70%);
}