.thePhone {
	position:absolute; z-index:2; height:500px; width:500px;
	top:50%; left:50%; transform-style:preserve-3d; translate:-50% -50%;
	transform:scale3d(.7, .7, .7);
}

@media only screen and (max-width: 750px) {
	.thePhone {
		transform: scale3d(.4, .4, .4);
	}
}
	
	/* .box3d */.redmi3d {transition:all 500ms ease-in-out; z-index:4;} 
		.so_01So /* .box3d */.redmi3d {transform:scale(.25) translate(200vw,0vh); margin:-20vh 0 0 10vw; transition:unset;}
        .so_02So /* .box3d */.redmi3d, .so_03So /* .box3d */.redmi3d {transform:scale(.25) translate(0vw,0vh); margin:0 0 0 150vw;}
        .so_03So /* .box3d */.redmi3d {transform:scale(.25) translate(100vw,0vh);}
	
	.theRedmi {
		position:absolute; z-index:2; top:50%; left:50%; height:700px; width:350px;  border-radius:40px; background:rgb(113, 113, 113) /* linear-gradient(180deg,#b0b0b0,#717171) */;
		transform-style:preserve-3d; transform-origin:50% 50%; transition:all 500ms ease-in-out; margin:-350px 0 0 -175px; 
		transform:scale3d(.6,.75,.75) translate3d(-29dvw, -25dvh, -50dvh) rotateX(-50deg) rotateZ(-20deg) rotateY(60deg);
	}
		.theRedmi.notInview {
			transform:scale3d(.6,.6,.6) translate3d(-29dvw, -55dvh, -75dvh) rotateX(0deg) rotateZ(-48deg) rotateY(0deg);
		}
	
	/* .active .theRedmi {
		transform:scale3d(.6,.75,.75) translate3d(-29dvw, 0dvh, -50dvh) rotateX(-40deg) rotateZ(-20deg) rotateY(60deg);
	} */
		
		/* .box3d */.redmi3d.revers {
			transform:translateX(-20vw);
		}
		
		.active /* .box3d */.redmi3d.revers .theRedmi {
			box-shadow:inset 2px -2px rgb(0, 0, 0, .25), inset -2px 2px rgb(255, 255, 255, .5);
			transform:scale3d(.55, .55, .55) rotateX(5deg) rotateY(45deg) rotateX(10deg) translate3d(0, 146px, 0px);
		}
		
		/* .box3d */.redmi3d.revers .theRedmi {
			transform:scale3d(.55, .55, .55) rotateX(5deg) rotateY(45deg) rotateX(10deg) translate3d(0px, -50vh, 0);
		}
		
		
		.theRedmi .ombrePhone {
			position:absolute; top:0; left:0; width:350px; transform-origin:50% 100%; border-radius:40px; 
			background:linear-gradient(0deg,rgba(0,0,0, .08) 5%, rgba(0,0,0, .15) 50%, transparent 100%);
			transform:rotateX(80deg) translate3d(0rem, 45rem, -12rem); filter:blur(10px); transition:height 500ms ease-in-out;
		}
			.theRedmi.notInview .ombrePhone {height:0px;}
			.theRedmi .ombrePhone {height:700px;}
		
	/*	.theRedmiOmbre {
			position:absolute; z-index:1;  top:50%; left:50%; height:189px; width:280px; border-radius:20px; margin:-175px 0 0 -175px;transform-origin:50% 50%; filter:blur(10px);
			background:linear-gradient(50deg, rgba(43, 43, 43, .6) 0, rgb(72,72,72, .1) 70%);
			transition:all .25s ease-out; transform:rotateX(94deg) rotateZ(46deg) rotateY(-5deg) translate3D(230px,15px,-333px);
			opacity:0;
		} */
		
		.lensBlock {
			position:absolute; height:100px; width:100px; top:15px; right:15px; border-radius:30px; 
			transform-origin:center; transform-style:preserve-3d; transform:translateZ(-5px); background:radial-gradient(circle at 100% 0%, #d5d5d5 0%,#777676 100%);  
			box-shadow:-7px 9px 12px -5px rgba(0,0,0,.5),inset 2px -2px rgba(255, 255, 255, .25),inset -2px 2px rgba(255, 255, 255, 0.25);
		}
		
			.lensBlock .lensIphone {
				position:absolute; height:43px; width:43px; border-radius:50%; background:radial-gradient(circle,#537497 0%,#4f4f84 8%,#61646b 15%, #000 40%,#000 60%,#a0a0a0 60%, #a0a0a0 100%); box-shadow:-2px 2px 4px #535353;
				transform-style:preserve-3d; transform:translateZ(-1px);
			}
			
				.lensBlock .lensIphone.theOne {top:5px; right:5px;}
				.lensBlock .lensIphone.thesecond {bottom:5px; right:5px;}
				.lensBlock .lensIphone.theThird {top:30px; left:6px;}
			
			.lensBlock .lensBlockRond {
				position:absolute; top:29px; left:28px; margin:0 0 0 -2px; width:4px; height:10px; transform-origin:top center; transform-style:preserve-3d;
			}
			
			.lensBlock .lensBlockBord {position:absolute; transform-style:preserve-3d; background:#717171;}
				.lensBlock .lensBlockBord.onTop {top:0; left:30px; height:10px; width:40px; transform-origin:top center; transform:rotateX(90deg);}
				.lensBlock .lensBlockBord.onBottom {bottom:0; left:30px; height:10px; width:40px; transform-origin:bottom center; transform:rotateX(-90deg);}
				.lensBlock .lensBlockBord.onLeft {top:30px; left:0; width:10px; height:40px; transform-origin:left center; transform:rotateY(-90deg);}
				.lensBlock .lensBlockBord.onRight {top:30px; right:0; width:10px; height:40px; transform-origin:right center; transform:rotateY(90deg);}
			
			.lensBlock .lensBlockCoin {
				position:absolute; height:60px; width:60px; border-radius:50%; transform-style:preserve-3d; transform:rotateX(90deg);
			}
				.lensBlock .lensBlockCoin.onTopLeft {top:0; left:0;}
				.lensBlock .lensBlockCoin.onTopRight {top:0; right:0;}
				.lensBlock .lensBlockCoin.onBottomLeft {bottom:0; left:0;}
				.lensBlock .lensBlockCoin.onBottomRight {bottom:0; right:0;}
				
				span.flash {
					position:absolute; height:20px; width:20px; border:2px solid #919191; top:8px; left:17px; border-radius:50%; background:radial-gradient(circle at 50%,#fff 10%,#c2c1c1 100%); 
				}
				
				span.infra {
					position:absolute; height:16px; width:16px; bottom:6px; left:19px; border-radius:50%; background:black;
				}
			
			.redmiBord {
				position:absolute; z-index:1; background:#717171; border-style:solid; border-color:#cccccc;
				transform-style:preserve-3d;
			}
				
			
			.redmiBord.topBord {top:0; left:40px; width:270px; height:30px; border-width:0 6px 0 6px; transform-origin:50% 0; transform:rotateX(90deg);}
			.redmiBord.bottomBord {
				bottom:0; left:40px; width:270px; height:30px; border-width:0 6px 0 0; transform-origin:50% 100%; transform:rotateX(-90deg);
				display:flex; justify-content:space-around; flex-flow:row wrap;
			}
				.redmiBord.bottomBord, .redmiBord.bottomBord div {
					display:flex; justify-content:center; align-items:center;
				}
				
				.redmiBord.bottomBord div:first-child {width:33%;}
					.redmiBord.bottomBord div:first-child span {display:block; height:7px; width:7px; border-radius:50%; background:#000; margin:0 2px; }
				.redmiBord.bottomBord div:nth-child(2) {width:34%; padding:0 0 0 10px;}
					.redmiBord.bottomBord div:nth-child(2) span {display:block; height:3px; width:3px; border-radius:50%; background:#000; margin:0 2px;}
					.redmiBord.bottomBord div:nth-child(2) span.usbc {display:block; height:10px; width:25px; border-radius:5px; margin:-3px 3px auto 3px;}
				.redmiBord.bottomBord div:last-child {width:33%;}
					.redmiBord.bottomBord div:last-child span {display:block; height:7px; width:7px; border-radius:50%; background:#000; margin:0 2px;}
				
			.redmiBord.leftBord {top:40px; left:0; width:30px; height:620px; border-width:6px 0 6px 0; transform-origin:0 100%; transform:rotateY(-90deg);}
				.redmiBord .phonBtnLeft {
					position:absolute;top:100px; left:5px; height:50px; width:20px; border-radius:10px; background:#717171;
					box-shadow:inset -1px 0 3px 0 rgba(0,0,0, 1);
				}
					.redmiBord .phonBtnLeft.leDeux {top:160px;}
					.redmiBord .simTiroir {position:absolute; width:16px; height:70px; left:7px; bottom:30px; border-radius:8px; border:1px solid #4d4d4d;}
						.redmiBord .simTiroir span {position:absolute; width:4px; height:4px; border-radius:2px; background:#000; bottom:5px; left:6px;}
						
			.redmiBord.rightBord {top:40px; right:0; width:30px; height:620px; border-width:6px 0 6px 0; transform-origin:100% 50%; transform:rotateY(90deg);}
				.longBtn {position:absolute; top:90px; left:6px; width:18px; height:100px; border-radius:9px; background:#717171; box-shadow:inset -1px 0 3px 0 rgba(0,0,0, 1);}
		
		.theFront {
			position:absolute; z-index:2; top:0; left:0; margin:0; height:100%; width:100%; border-radius:40px; border:2px solid #828282; transform-style:preserve-3d; transform-origin:center; background:#000;
			transform:translateZ(30px);
		}
			.theFront .theFrontScreen {
				position:absolute; top:10px; left:10px; width:324px; height:674px; border-radius:12px; overflow:hidden; border-radius:30px; background:rgb(43, 25, 57);
			}
			.theFront .theFrontScreen .smartNave {height:40px;}
				.theFront .theFrontScreen .smartNave span { bottom:5px; left:98px; width:128px;}
				.theFront .theFrontScreen .smartNave svg { margin-top:3px;}
			
			.phoneHeader {
				position:absolute; z-index:50; top:0; left:0; width:100%; height:30px; display:flex; flex-flow:row wrap; justify-content:center;
			}
				.phoneTimeBox, .reseauxBox {width:25%; text-align:center; transform-style:preserve-3d; line-height:30px; display:inline; font-size:10px; font-weight:bold; }
				
				.phoneHeaderBlackBox {width:50%;}
					.inPhoneHeaderBlackBox {height:100%; width:100%; border-radius:0 0 20px 20px; background:#000;}
					
			.leCoin {
				height:80px; width:80px; position:absolute; border-radius:40px; transform-style:preserve-3d; transform:rotateX(90deg);
			}
				.leCoin.hautDroit {top:0; left:0;}
				.leCoin.hautGauche {top:0; right:0;}
				.leCoin.basGauche {bottom:0; left:0;}
				.leCoin.basDroit {bottom:0; right:0;}
				
				.leCoin .leCoinRond {
					position:absolute; top:40px; left:40px; margin:0 0 0 -2px; width:4px; height:29px; 
					transform-origin:top center; transform-style:preserve-3d;
				}
				
				.forNavigator {
					width:324px; height:70px;  position:relative;
				}
					.theHttp {
						position:absolute; left:15px; bottom:8px; width:294px; height:25px; font-size:13px; border-radius:8px; background:#ccc; display:flex; flex-flow:row wrap; justify-content:center;
					}
						.theHttp span:first-child {width:92%; text-align:center; padding:0 0 0 8%; line-height:25px;}
						.theHttp span:last-child {width:8%; line-height:25px;}
						
			
				.thePhone .forSite {
					width:324px; height:604px; /* background:linear-gradient(45deg, #ae4ad9, #350541); */
				}
					.forSite .forSiteHeader {
						position:absolute; z-index:2; top:0; left:0; width:100%; height:30px;
					}
					.forSite .forSiteVisual {
						width:100%; height:40%;  background:url(../../images/in-the-mirror2.jpg) center center / cover; filter:contrast(1.2);
					}
					.forSite .forSiteContent {
						width:100%; height:60%;
					}
					.forSite .forSiteContent h3 {font-size:16px; margin:10px; color:rgb(255,255,255);}
					/* .forSite .forSiteContent .blockSiteSmart:first-of-type {background :red} */
						
					#group6 .blockSiteSmart {width:90%; height:auto; padding:10px; margin:5px auto; overflow:hidden; font-size:8px; text-align:justify; background:rgb(55, 17, 83); color:rgb(255,255,255);}
					#group3 .blockSiteSmart {background:rgb(255, 255, 255);}
					
					.blockSiteSmart:nth-child(4) {background:url(../../images/pour-le-fun-9.jpg) center center / cover; height:35%;}
					


	.so_05So /* .box3d */.redmi3d .theRedmi {
		transform:rotateZ(8deg) rotateX(0deg) rotateY(-33deg) scale3d(.8, .8, .8);
	}				

	.so_06So /* .box3d */.redmi3d {
		transform:translate(-20vw, 0vh);
	}
	.so_06So.avecCafe /* .box3d */.redmi3d {
		transform:translate(-10vw, 0vh);
		transition:all 500ms cubic-bezier(.01,.43,.24,.96);
	}

	.so_06So /* .box3d */.redmi3d .theRedmi {
		transform:rotateZ(-5deg) rotateX(10deg) rotateY(22deg) scale3d(.55, .55, .3) translate(0vw, -38vh);
	}
	.so_06So.avecCafe /* .box3d */.redmi3d .theRedmi {
		transform:rotateZ(30deg) rotateX(60deg) rotateY(-26deg) scale3d(.55, .55, .55) translate3d(-15vw, -15vh,-105px); 
		transition:all 500ms cubic-bezier(.01,.43,.24,.96);
	}
	
	.video-wrapper {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 1;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.video-wrapper .fullscreen-video {
		position: fixed;
		top: 0px;
		right: 0px;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
		left: 50%;
		translate: -50%;
	}


@media only screen and (max-width:500px ) {
	/* .box3d */.redmi3d.revers {transform:translate3d(-5vw,70px,0) scale(.8);}
	/* /* .box3d */.redmi3d.revers {transform:translate3d(-5vw,-30vh,0) scale(.8);} */

	/* .box3d */.redmi3d.revers {transform:translate3d(-5vw,70px,0) scale(.8);}
	/* .box3d */.theOrdi.outThePage {transform:translate3d(20vw,calc(-70vh + 30px),0) scale3d(.4,.4,.4);}

	/* .box3d */.theOrdi.onThePage .theCompuBox {transform:rotateZ(35deg) rotateX(35deg) rotateY(-15deg) scale3d(.6,.6,.6) translate3d(20vw, 12vh, 0px)}

	.redmi3d.inOrdi .theRedmi {transform:rotateZ(15deg) rotateX(-3deg) rotateY(-180deg) scale3d(.7,.7, .7) translate(-370px,-450px);}
}

@media only screen and (max-width:800px ) {
	.so_06So.avecCafe /* .box3d */.redmi3d .theRedmi {transform:rotateZ(30deg) rotateX(60deg) rotateY(-26deg) scale3d(.5, .5, .5) translate3d(-41vw, -15vh,68px);}
}