.trans {transition:all 500ms ease-out;}
	.trans2 {transition:all 500ms ease-out 500ms;}
	
		
		.inGlobalBox {
			position:absolute; top:50%; left:30%; z-index:2; height:600px; width:800px; translate:-50% -50%;
			transform-style:preserve-3d; transform-origin:center; 
			transform: rotate3d(0, 0, 0, 0deg) scale3d(1,1,1);
		}

				
		.inGlobalBox.inPose {transform:rotateX(0deg) rotateZ(20deg) rotateY(0deg) scale3d(1,1,1) translate3d(0,0,-10dvh);}

		
		
		
		.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.inPose .screenLaptop {
			transform:translate3d(0,0,13px) rotateX(120deg);
		}

		.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); opacity:0;
				transition:all 500ms ease-in-out;
			}
			
			.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; transform-style:preserve-3d;
		}
			.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); 
			overflow: hidden;
			background:rgb(219, 219, 219);
		}
		
		.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);
		}
		
	/*///////////////////////////// Faux Site /////////////////////////////// */
		
		#iGBox .forSite {
			position:relative; width:100%; height:100%; font-size:.5rem;
		}
			#iGBox .forSite .forSiteHeader {
				position: relative; z-index: 2; top: 0; left: 0;  width: 100%; height: 10px; background: rgb(180, 180, 180);
			}
		
			#iGBox .forSite .forSiteVisual  {
				position:relative; width:100%; height:200px; background-image:url(../../images/capVert05.jpg);
			}
			
			#iGBox .forSite .forSiteContent {
				position:relative; width:70%; margin:10px auto;
			}
				#iGBox .forSite .forSiteContent h3 {
					font-size:150%; margin:20px 0 10px 0;
				}
				
				#webdesign #iGBox .forSite .forSiteContent .blockSiteSmart {
					background:rgb(255,255,255); padding:.5rem;
				}