@font-face {
    font-family:'perfect-moment';
    src:url('../../fonts/perfect-moment/PerfectMoment-Script.eot');
    src:url('../../fonts/perfect-moment/PerfectMoment-Script?#iefix') format('embedded-opentype'),
         url('../../fonts/perfect-moment/PerfectMoment-Script.woff2') format('woff2'),
         url('../../fonts/perfect-moment/PerfectMoment-Script.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'aaaiightregular';
    src: url('../../fonts/aaaiight/aaaiight.eot');
    src: url('../../fonts/aaaiight/aaaiight.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/aaaiight/aaaiight.woff2') format('woff2'),
         url('../../fonts/aaaiight/aaaiight.woff') format('woff');
    font-weight:normal; font-style:normal;
}

@font-face {
    font-family: 'beer_moneyregular';
    src: url('../../fonts/beer-font/beer-money-webfont.woff2') format('woff2'),
         url('../../fonts/beer-font/beer-money-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


		.perfect-moment {
			font-family:'perfect-moment'; font-weight:lighter;
			color:rgb(33, 33, 33); line-height:1; 
		}
			h1.perfect-moment {
				font-size:15dvw; letter-spacing:-.2rem;
			}
			@media only screen and (orientation: portrait) {
				h1.perfect-moment {
					font-size:15dvh; letter-spacing:-.2rem;
				}
			}
			
			
		.rock-salt-regular {
			font-family: 'Rock Salt', cursive;
			font-weight: 400;
			font-style: normal;
		}
		
		.kranky-regular {
			font-family: 'Kranky', serif;
			font-weight: 400;
			font-style: normal;
		}
		
		.smooch-regular {
			font-family: 'Smooch', cursive;
			font-weight: 400;
			font-style: normal;
		}
		
		.lily-script-one-regular {
			font-family: 'Lily Script One', system-ui;
			font-weight: 400;
			font-style: normal;
		}
		
		.aaaiightregular {
			font-family: 'aaaiightregular';
			font-weight: 400;
			font-style: normal;
		}
		
		.beer_moneyregular {
			font-family: 'beer_moneyregular';
			font-weight: 400;
			font-style: normal;
		}
		
		.allison-regular {
			font-family: 'Allison', cursive;
			font-weight: 400;
			font-style: normal;
		}
		
		
#accueil .zone_pelagique.bathypelagique {
	background:linear-gradient(180deg, rgba(79, 34, 63, 0.38) -10%,transparent 50%);
}

.persBlock {
	position:relative; height:100%; width:100%; transform-style:preserve-3d;
}


#accueil .aphotique {
	overflow:hidden;
}

.backDisc {
	height:200dvh; width:200dvh; background:red; border-radius:50%; display:none;
	background-image:radial-gradient(ellipse at 50% 50%, rgba(0, 0, 255, .2) 0%, transparent 80%), radial-gradient(circle at 0 0, rgb(255, 0, 0) , transparent), radial-gradient(ellipse at 100% 100%, rgb(0, 128, 0) , transparent);
}

.play33Tours {
	position:absolute; bottom:10px; right:20px; pointer-events: auto; transform-style: preserve-3d;
	font-size: 10px; padding: 6px; background: rgb(112, 178, 112); cursor: pointer; border: 2px solid rgb(66, 66, 66);
}

/* État muted (par défaut) */
.audio {
	position:absolute; bottom:10px; right:100px; cursor:pointer; pointer-events:auto; background:red;
	display:flex; flex-direction:column; flex-grow:1; flex-shrink:0; flex-basis:25%;
	max-width:25%; height:30px; align-items:center; justify-content:center;
}

	.line-scale-party {
		
	}
		.line-scale-party > div {
			animation-fill-mode:both; animation-name:line-scale-party; animation-iteration-count:infinite; 
			border-radius:2px; margin:2px; background-color: rgb(255, 255, 255);
		}
		
		.line-scale-party div:nth-child(1) {animation-delay: .48s; animation-duration: .54s;}
		.line-scale-party div:nth-child(2) {animation-delay: -.15s; animation-duration: 1.15s;}
		.line-scale-party div:nth-child(3) {animation-delay: 40ms; animation-duration: .77s;}
		.line-scale-party div:nth-child(4) {animation-delay: -.12s; animation-duration: .61s;}

.audio.muted {
    /* Vos styles */
}

/* État unmuted (son activé) */
.audio.unmuted {
    /* Vos styles */
}

.qui {
	position:absolute; z-index:2; height:fit-content; width:fit-content; padding:1rem;
	transform-style:preserve-3d; transform:translate3d(0dvw, 30dvh, 0dvw) rotateX(46deg) rotateZ(6deg);
}

	.qui h1.adessias {
		position:relative;
		font-family:'comfortaaregular'; letter-spacing: -.3rem;
		font-size:3rem; padding:0 1rem; line-height: normal; padding:0;
		color:#fff; text-shadow:none; color:black !important;
		top:auto; left:auto; translate:0 0;
	}
	
	.qui h2.adessias {
		position:relative; font-family: "Rock Salt", cursive;  color:black !important;
		font-size:1.5rem; padding:0 0 0 .5rem; margin:-1rem 0 0 0; text-shadow:none; letter-spacing:normal; line-height:1;
	}
	
	.lesTextes {
		position:relative; z-index:1; transform-style:preserve-3d; height:100%; width:100%;
		display:flex; justify-content:center; align-items:center;
	}
		.lesTextes {
			position:relative; height:100%; width:100%; transform-style:preserve-3d; transform:rotateX(50deg);
		} 
		.laphrase {
			position:absolute; display:block; transform-style:preserve-3d; font-weight:lighter; transition:all 250ms ease-in-out;
		}
			.laphrase:first-child {transform:translate3d(-10dvw,-50dvh,0dvw) rotateZ(-10deg); transform-origin:50% 50%; z-index:1; font-family:'perfect-moment'; font-size:2rem;}
			.laphrase:nth-child(2) {transform:translate3d(-38dvw,-3dvh,0dvw) rotateZ(-60deg); transform-origin:50% 50%; z-index:2; font-family:'beer_moneyregular'; font-size:6rem;}
			.laphrase:nth-child(3) {transform:translate3d(30dvw,-30dvh,0dvw) rotateZ(50deg); transform-origin:50% 50%; z-index:3; font-family:"Smooch", cursive; font-size:6.5rem; line-height:6rem;}
			.laphrase:nth-child(4) {transform:translate3d(46dvw,13dvh,0dvw) rotateZ(69deg); transform-origin:50% 50%; z-index:4; font-family:'Allison', system-ui;  font-size:7rem;}
			.laphrase:nth-child(5) {transform:translate3d(29dvw,43dvh,0dvw) rotateZ(30deg); transform-origin:50% 50%; z-index:5; font-family:'aaaiightregular'; font-size:4rem;}
		
	
	/* /////////////////////////////////////////////////////////////////////////////////////////// */

		#group9 {
			z-index:1 !important;
		}
			
		.cameraObscura {
			position:relative; transform-style: preserve-3d; height: 400px; width: 400px;
		}	
		
		.cameraBox {
			position:absolute; z-index:5; height:200px; width:500px; top:50%; left:50%; margin:-100px auto auto -250px; 
			perspective-origin:center; transform-style:preserve-3d;  transform: rotateX(90deg);
			transition: all 500ms ease-in-out;
		}
			.cameraBox.camGlobal {
				transform:rotateZ(-30deg) translate3d(0dvw,-30dvh,0dvw) scale3d(.9,.9,.9);
			}
			
			/* .globalCam.cameraBox.rotateBox { */
			.cameraBox.camGlobal.rotateBox .globalCam.cameraBox {
				transform: rotateX(0deg);
			}
			.cameraBox.camGlobal.rotateBox .globalCam.gx8OmbrePorte {
				scale:1; opacity:1;
			}
			.cameraBox.camGlobal.rotateBox .globalCam.gx8OmbrePorte .inGx8OmbrePorte {
				height:300px;
			}
			
			.cameraBox.camGlobal.rotateBox .ombreCoucher {
				opacity:0; scale:0;
			}
			
			
		
		ul.nomenclature {
			position:absolute; bottom:2vh; left:0;  z-index:290; display:flex; list-style:none;
			border:1px solid #fff; 
		}
		
		ul.nomenclature li {
			color:#fff;
			font-size:3vw;
			padding: .5vw;
		}
		
		ul.nomenclature li span {font-size:50%;}
		
		.viewBoxGlobal {
			position: absolute;
			height: 130px;
			width: 210px;
			transform-style: preserve-3d;
			transform:rotateX(180deg);
			z-index: 6;
		}

		
		.backGroundLight {
			position:absolute; z-index:1; top:0; left:0; height:100%; width:100%; background:linear-gradient(5deg,rgb(198, 198, 198) 0%, rgb(256,256,256) 30%, transparent 100% );
		}
		
		.rotator {
			transform:rotateX(75deg) translate3d(0,0,-100px) rotateZ(0deg) scale3d(1,1,1);
		/*	transform:rotateX(75deg) translate3d(0,0,-100px) rotateZ(0deg) scale3d(1,1,1);	*/
			
			
			/* transform:rotateX(45deg) translate3d(0,0,-100px) rotateZ(0deg) scale3d(1,1,1); */
			/*transform:rotateX(70deg) translate3d(0,0,-100px) rotateZ(-50deg) scale3d(1,1,1); */
			 /* animation: mymove 1s 1 cubic-bezier(.08,.82,.17,1) 2s;  */
			 transition:all .5s linear;
		}
		
		
		.vueArriere {
			transform:rotateX(45deg) translate3d(0,0,-100px) rotateZ(150deg) scale3d(1,1,1);
			/* transform:rotateX(70deg) translate3d(0,0,-100px) rotateZ(150deg) scale3d(1,1,1); */
			transition:all 1s linear;
		}
		
		.bigZoom {
			transform:rotateX(90deg) translate3d(210px,300px,-368px) rotateZ(180deg) scale3d(5,5,5);
			/* transform:rotateX(90deg) translate3d(500px,300px,-500px) rotateZ(180deg) scale3d(10,10,10); */
		}

	 	@keyframes mymove { 
	 		0% {transform:rotateX(21deg) translate3d(0px,-100vh,100px) rotateZ(127deg) scale3d(.2,.2,.2);}
	 		100% {transform:rotateX(70deg) translate3d(0,0,-100px) rotateZ(0deg) scale3d(1,1,1);}
	 	}  

	 	@keyframes falling { 
	 		0% {transform:rotate3d(1,0,0,70deg) translate3d(0,0,1800px) rotateZ(280deg) scale3d(1,1,1);}
	 		100% {transform:rotate3d(1,0,0,70deg) translate3d(0,0,-100px) rotateZ(0deg) scale3d(1,1,1);}
	 	} 
	 	@keyframes fallingShadow { 
	 		0% { height:10px; width:10px; margin:-5px auto auto -5px; background:rgba(0,0,0, .1);}
	 		100% { height:100px; width:380px; margin:-50px auto auto -190px; background:rgba(0,0,0, .8);}
	 	} 
		
		
		.gx8OmbrePorte {
			position:absolute; z-index:3; top:50%; left:50%; height:100px; width:380px; margin:-50px auto auto -190px; border-radius:50px; 
			perspective-origin:center; transform-style:preserve-3d; transition:all 500ms ease-in-out;
			box-shadow:4px 6px 8px 0 rgba(0,0,0, .3); background:rgba(0,0,0, .8); 
			opacity:0; scale:0;
		}
			.inGx8OmbrePorte {
				position:absolute; width:380px; height:0px; /*height:300px;*/ left:0; top:50px; /* border-radius:0 0 100px 200px; */
				transform-style:preserve-3d; transform-origin:top right; transform:rotate(-2deg) skewX(10deg);
				filter:blur(2px); overflow:hidden; transition: height 500ms ease-in-out;
				background:
					radial-gradient(circle at 80% -50px, rgba(0, 0, 0, 0.4) 0%, transparent 70%),
					radial-gradient(circle at 50% -50px, rgba(0, 0, 0, 0.7) 0%, transparent 50%),
					radial-gradient(circle at 58% -30px, rgba(0, 0, 0, 0.5) 0%, transparent 40%)
			}
				.innerOmbre {
					position:absolute; z-index:2; width:376px; height:300px; left:-29px; top:0;
					transform: skewX(-10deg) rotate(2deg);
					background:linear-gradient(191deg, rgba(0, 0, 0, 0.09) 0%, transparent 70%);
				}
				.sumicronOmbre {
					position: absolute; z-index:1; width: 130px; height: 180px; top: 10px;left: 155px;
					border-radius: 0 0 50% 50%/0 0 30% 20%; transform: skewX(-9deg) rotate(2deg);
				}
				
					.sumicronOmbre span {
						position:absolute; right:0; bottom:0;  
						background:linear-gradient(90deg, transparent 0%, rgba(0,0,0, .2) 100%);
					}
					
						.sumicronOmbre span:nth-child(1) {bottom:12px; height:120px; right:20px; left:20px;}
						.sumicronOmbre span:nth-child(2) {bottom:37px; height:100px; right:12px; left:12px; z-index:2;}
						.sumicronOmbre span:nth-child(3) {bottom:29px; height:90px; right:15px; left:15px;}
						.sumicronOmbre span:nth-child(4) {bottom:80px; height:60px; right:7px; left:7px;}
						.sumicronOmbre span:nth-child(5) {bottom:100px; height:50px; right:0; left:0;}
				
			.ombreCoucher {
				position:absolute; z-index:2; top:50%; left:50%; height:100px; width:380px; margin:-30px auto auto -190px;
				filter:blur(8px); transform: translateZ(-50px); transition:height 500ms ease-in-out; opacity:.6; scale:.95; 
			}
				.ombreCoucher .coucherCam_1 {
					position:absolute; top:0; left:0; height:100%; width:100%; z-index:1; border-radius:50px;
					background:linear-gradient(rgba(0,0,0, 1) 30%, rgba(0,0,0, .3) 70%);
				}
				.ombreCoucher .coucherCam_2 {
					position:absolute; top:24px; left:50%; height:150px; width:150px; translate:-38% 0; border-radius:75px; z-index:2;
					background:linear-gradient(transparent 50%, rgba(0,0,0, .3) 50%);
				}
				
				
				
				
		.gx8 {
			position:absolute; top:50%; left:50%; height:100px; width:380px; margin:-50px auto auto -190px; border-radius:50px; 
			background:rgb(141, 141, 141); transform-style:preserve-3d; transform-origin:center; transform:rotateX(0deg) translate3d(0,0,0);
		}
		
		.pasDeVis {
			position: absolute; z-index: -1; left:50%; top:50%; margin:-15px 0 0 5px; border:1px solid #5c5c5c; height:30px; width:30px; background:#858585; border-radius:50%; 
			box-shadow:inset 1px 0px 1px 0px rgba(74, 74, 74, 0.28), 
						inset -1px 0px 1px 0px rgba(255, 255, 255, 0.32),
						1px 0 1px 0 rgba(255,255,255, .4), -1px 0 1px 0 rgba(255,255,255, .4)
						;
		}
			.pasDeVis span {position:absolute; height:12px; width:12px; border-radius:50%; top:50%; left:50%; margin:-6px 0 0 -6px; background:linear-gradient(90deg, #373737, #616161);}

		.verouxPlate {
			position:absolute; z-index: -1; height:60px; width:60px; margin:20px 0 0 20px; border-radius:50%; box-shadow:inset 2px 2px 2px 0 rgba(0,0,0, .5), inset -2px -2px 2px 0 rgba(0,0,0, .5);  overflow:hidden; 
		}
			.locKVerouc {
				position: absolute; z-index: 1; left: 1px; bottom: 4px; height: 30px; width: 56px; overflow: hidden;
				box-shadow: 0px -4px 6px rgba(33, 33, 33, 0.58);
			}
				.inLocKVerouc {
					position:absolute; z-index:1;  left:0; bottom:0; height:58px; width:58px; margin:0 0 0 1px; border-radius:50%; background:linear-gradient(0deg, transparent 40%,#747474 48%),rgb(197, 197, 197);
					
				}
				
				.LocKVeroucCenter {
					position:absolute; z-index:2; top:50%; left:50%; height:30px; width:30px; border-radius:50%; margin:-15px 0 0 -15px; background:rgb(186, 186, 186);
					box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.51), 0 -1px 2px 0 rgba(0, 0, 0, 0.8);
				}
				
		.gx8Fall {
			transform:rotateX(40deg) rotateZ(30deg) translate3d(0,0,20vh); transition:all .5s linear;
		}
		
		.gx8Top {
			position:absolute; z-index:1; top:50%; left:50%; height:100px; width:380px; margin:-50px auto auto -190px; 
			border-radius:50px; background:linear-gradient(90deg, rgb(200, 200, 200) 30%, rgb(150, 150, 150) 70%);
			transform-style:preserve-3d; transform-origin:center; transform:translate3d(0,0,200px);
			box-shadow:inset 1px 1px 1px 0 rgb(255, 255, 255),inset -1px 1px 1px 0px rgb(200, 200, 200);
		}
		
			.btnShoot {
				position:absolute; height:34px; width:34px; border-radius:50%; left:45px; top:52px; 
				background:linear-gradient(135deg, rgb(220, 220, 220) 0%, rgb(136, 136, 136) 100%); box-shadow:inset 1px 1px 1px 0 rgba(255,255,255, .5),inset -1px -1px 1px 0 rgba(255,255,255, .3);
				transform-style:preserve-3d; transform-origin: center; transform:translate3d(0,0,13px);
			}
				.btnShootBordered {
					position:absolute; height:34px; width:34px; border-radius:50%; left:0; top:0; 
					transform-style:preserve-3d; transform-origin: center; transform:rotateX(90deg) rotateY(190deg);
				}
				
					.btnSelect {
						position:absolute; top:1px; left:50%; margin-left:-5px; height:15px; width:10px; 
						transform-origin:center; transform-style:preserve-3d; transform:translate3d(0,0,23px);
						background:repeating-linear-gradient(90deg,rgb(105, 104, 104) , rgb(237, 237, 237) 2px, rgb(239, 239, 239) 2px);
					}
						.btnSelectTop, .btnSelectLeft, .btnSelectRight {position:absolute; background:green; transform-style:preserve-3d;}
							.btnSelectTop {width:10px; height:15px; transform:rotateX(90deg); transform-origin:bottom center; background:#bbb;}
							.btnSelectLeft {width:10px; height:15px; transform:rotateY(90deg); transform-origin:bottom left; background:rgb(137, 137, 137); }
							.btnSelectRight {width:10px; height:15px; transform:rotateY(-90deg); transform-origin:bottom right; background:rgb(193, 193, 193); }
				
					.btnShootBordered:after {
						content: ""; position: absolute; height: 14px; width: 14px;
						background: radial-gradient(#676767 30%, #b1b1b1 30%); top: 50%; left: 50%; margin: -2px 0 0 -7px;
						transform: rotateX(90deg); transform-style: preserve-3d; transform-origin: center;
						border-radius: 50%;
					}
				
				.btnShootBordered span {
					position:absolute; top:0; left:16px; width:2px; height:17px; transform-origin:center; transform-style:preserve-3d;
					/* background:linear-gradient(0deg, rgb(220, 220, 220) 0%, rgb(136, 136, 136) 100%); */
					
					
				}
				.btnShootBordered span:after {
					content:""; position:absolute; bottom:-5px; left:0; width:100%; height:10px;
					transform-origin:center; transform-style:preserve-3d; transform:translateZ(-10px);
					background:rgb(129, 129, 129);
				}
				
		
			.btnVitesse {
				position:absolute; height:60px; width:60px; border-radius:50%; left:85px; top:25px; 
				transform-style:preserve-3d; transform-origin: center; transform:translateZ(15px);
				background:radial-gradient(circle at 0% 0%, #f3f3f3ab 30% , transparent 45%),radial-gradient(circle at 100% 100%, #f3f3f38c 50% , transparent 65%),#c8c8c8;
				box-shadow:inset 1px 1px 1px rgba(226, 226, 226, .8); 
			}
				.btnVitesseBox {
					position:absolute; height:60px; width:60px; border-radius:50%; left:0px; top:0px; background:transparent;
					transform-style:preserve-3d; transform-origin: center; transform:rotateX(-90deg); 
				}
			
				.btnVitesse .sidbtnVitesse {
					position:absolute;top:30px; left:27px; height:20px; width:6px; background:linear-gradient(90deg,rgb(138, 138, 138) 0%, #c8c8c8 50%, rgb(138, 138, 138) 50%,#c8c8c8  100%); 
					transform-style:preserve-3d; transform-origin:top center; border-top:2px solid #C8C8C8;
				}
				
				.btnVitesse span {
					position:absolute; width:30px; height:6px; left:0px; top:50%; margin:-3px auto auto 0;
					padding:0 0 0 2px; text-align:left; font-size:6px; font-family:arial; font-weight:bold; color:#000;
					transform-style:preserve-3d; transform-origin:right center; transform:rotate(10deg);
				}
				
				.btnVitesse span:nth-child(1) {transform:rotate(0deg); color:red;}
				.btnVitesse span:nth-child(2) {transform:rotate(20deg);}
				.btnVitesse span:nth-child(3) {transform:rotate(40deg);}
				.btnVitesse span:nth-child(4) {transform:rotate(60deg);}
				.btnVitesse span:nth-child(5) {transform:rotate(80deg);}
				.btnVitesse span:nth-child(6) {transform:rotate(100deg);}
				.btnVitesse span:nth-child(7) {transform:rotate(120deg);}
				.btnVitesse span:nth-child(8) {transform:rotate(140deg);}
				.btnVitesse span:nth-child(9) {transform:rotate(160deg);}
				.btnVitesse span:nth-child(10) {transform:rotate(180deg);}
				.btnVitesse span:nth-child(11) {transform:rotate(200deg);}
				.btnVitesse span:nth-child(12) {transform:rotate(220deg);}
				.btnVitesse span:nth-child(13) {transform:rotate(240deg);}
				.btnVitesse span:nth-child(14) {transform:rotate(260deg);}
				.btnVitesse span:nth-child(15) {transform:rotate(260deg);}
				.btnVitesse span:nth-child(16) {transform:rotate(280deg);}
			
			.viewFinderBox {
				position:absolute; height:100.1px; width:210px; top:0px; right:20px;
				transform-style:preserve-3d; transform-origin:center; transform:translate3d(0,0,-45px);
				background:rgb(184, 184, 184); border-radius:0px 40px 0px 0 /0px 12px 0px 0px;
				/* box-shadow:0 0 7px -2px #000; */
			}
			
			.shadowViewFinderBox {
				position:absolute; height:10px;  
			}
				.shadowViewFOne{width:150px; left:-100px; bottom:57px; background:linear-gradient(2deg, rgba(0,0,0, .6) 0%, rgba(0,0,0, .0) 40%); transform:rotateY(180deg);}
				.shadowViewFTwo{width:130px; left:150px; bottom:45px; background:linear-gradient(0deg, rgba(0,0,0, .6) 0%, rgba(0,0,0, .0) 40%);}
			
				.viewFinderBox .viewFinderRightSide {
					position:absolute; height:91px; width:60px; bottom:0; right:0px;
					transform-style:preserve-3d; transform-origin:top right; 
					transform:rotateY(90deg); 
					background:linear-gradient(325deg,rgb(60,60,60) ,rgb(200, 200, 200) 100%);
				}
				
				.viewFinderBox .viewFinderRightSide:after {
					content:"";
					position:absolute; height:91px; width:20px; left:-20px; top:0; 
					transform-origin:bottom right; transform-style:preserve-3d; transform: rotateY(-90deg);
					background:rgb(200, 200, 200);
				}
				
				.viewFinderBox .viewFinderFrontSide {
					position:absolute; height:60px; width:210px; bottom:-0.5px; right:0px; 
					transform-style:preserve-3d; transform-origin:bottom center; transform:rotateX(-90deg);
					background:linear-gradient(90deg, rgb(130, 130, 130) 0%, rgb(124, 124, 124) 100%);
				}
					 .viewFinder {
						position:absolute; z-index:2; right:5px; bottom:4px; height:54px; width:62px; background:#000;
						border:2px solid #000; border-radius:3px; transform-style:preserve-3d; transform-origin:center; transform:rotateX(180deg); 
					}
						.inViewFinder {
							position:absolute; z-index:2; top:0; left:0; height:100%; width:100%; border-top:3px solid rgb(184, 184, 184); border-bottom:3px solid rgb(184, 184, 184); border-radius: 2px;
							background:radial-gradient(circle at 10px 20px,rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20% ),radial-gradient(circle at 80% 70%,rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60% ), rgba(216, 240, 255, 0);
						}
						
						.insideViewFinder {
							position:absolute; z-index:1; top:0; left:0; height:100%; width:100%;
							background:radial-gradient(circle at center, #fff 10%, #000 11%);
						}
						
						.viewFinderLeft {
							position:absolute; height:50px; width:50px; left:-50px; top:0;
							transform-style:preserve-3d; transform-origin:top right;
							transform:rotateY(-90deg);
							background:rgb(184, 184, 184);
						}
						
					.viewFinderCelule {
						position:absolute; right:85px; bottom:15px; height:34px; width:50px; 
						border:2px solid #000; border-radius:3px;transform-style:preserve-3d; transform: rotateX(180deg);
						background:repeating-linear-gradient(90deg, #333 0%, #999 5%);
					}
					
					.viewFinderLogo {
						position:absolute; height:34px; width:34px; right:160px; bottom:15px; border-radius:50%; background:red;
						color:#fff; font-size:12px; font-weight:bold;
						line-height:34px; text-align:center; transform:rotate(180deg) rotateY(180deg);
						font-family: 'Great Vibes', cursive;
						box-shadow:1px 1px 1px 0 rgb(154, 4, 4),inset 1px 1px 1px -1px rgb(255, 202, 202);
						/* font-family: 'Tangerine', cursive; */
					}
					
					.viewFinderFrontSideTop {
						position:absolute; width:210px; height:50px; top:0; right:0; background:rgb(200, 200, 200);
						transform-style:preserve-3d; transform-origin:top center; transform:rotateX(-90deg);
						
					}
				
				.viewFinderBox .viewFinderBackSide {
					position:absolute; height:60px; width:128px; top:0; right:32px; 
					transform-style:preserve-3d; transform-origin:top center; transform:rotateX(90deg);
					/* background:rgb(184, 184, 184);*/
					background:linear-gradient(90deg, rgb(192, 192, 192) 0, rgb(184, 184, 184) 100%);
					box-shadow: inset 0 -1px 1px -1px #fff;
				}
				
					.oeilleton {
						/*
						position:absolute; top:25px; right:8px; height:5px; width:2px; border:5px solid #000;
						transform-style:preserve-3d; transform-origin:top center; transform:rotateX(90deg) translate3d(0,-12px,0px);
						*/
						position:absolute; top:25px; right:-20px; height:25px; width:50px; 
						transform-style:preserve-3d; transform-origin:top center; transform:rotateX(90deg) translate3d(0px,-15px,0px);
					}
					
						.oeilleton span {
							position:absolute; height:100%; width:2px; top:0px; left:50%; margin:0 0 0 -1px; transform-style:preserve-3d; transform-origin:top center;
							background:rgb(45, 45, 45);
						}
						
						.oeilletonVue {
							position:absolute; top:0; left:0; border-radius:50%; height:50px; width:50px; border:6px solid #000;
							transform-style:preserve-3d; transform-origin:center; transform:rotateX(90deg); /* transform:translate3d(-24px,-10px,0)  rotateX(90deg) */;
						}
							.inOeilletonVueFinder {
								position:absolute; z-index:2; height:22px; width:26px; top:50%; left:50%; margin:-11px auto auto -13px; 
								border-radius:50% 50% 50% 50%/15% 15% 15% 15%; background:#fff;
							}
							
							.inOeilletonVue {
								position:absolute; z-index:3; top:0; left:0; height:100%; width:100%; border-radius:50%;
								background:radial-gradient(circle at 4% 4%, #fff 10%, transparent 30%), 
											radial-gradient(circle at 100% 100%, #fff 10%, transparent 60%)
							}
							.inOeilletonBack {
								position:absolute;  z-index:1; top:0; left:0; border-radius:50%; height:100%; width:100%; background:#333;
							}
							
					
					.viewFinderBackTop {
						position:absolute; height:100px; width:159px; bottom:0; right:-31px; background:rgba(200, 200, 200);
						transform-style: preserve-3d; transform-origin: bottom center; transform: rotateX(90deg);
						box-shadow: inset 0px -1px 1px -1px #fff;
						border-radius:0px 0 32px 0 /0px 0 10px 0px;
					} 
				/*
				.shadowViewFinder {
					position:absolute; width:306px; height:20px; left:-3px; top:142px; background:linear-gradient(0deg,#000 0%, transparent 100%);
				}
				*/
				.grip {
					position:absolute; width:50px; height:50px; background:rgb(0, 0, 0);
					transform-style: preserve-3d; transform-origin: bottom center;
					bottom: 0; left: -50px; transform:rotateX(90deg) translate3d(0,0,10px);
				}
				
					.gripConnect {
						position:absolute; border-radius:50%; background:rgb(184, 184, 184);
					}
					
						.gripConnect.gCbig {
							top:50%; left:50%; height:14px; width:14px; margin:-7px auto auto -7px;
						}
						
						.gripConnect.gCLeft, .gripConnect.gCRight {
							height:6px; width:6px; top:37px; 
						}
						.gripConnect.gCLeft {
							left:13px; right:auto; 
						}
						
						.gripConnect.gCRight {
							left:auto; right:13px;
						}						
				
				.gripFixe {
					position:absolute; height:50px; width:10px; background:rgb(214, 214, 214); top:0;
					transform-style: preserve-3d; transform-origin:center; transform:translate3d(0,0,-10px);
				}
					.gripFixe.gfLeft {left:0; right:auto;}
					.gripFixe.gfRight {left:auto; right:0;}
					
					.gripFixe.gfLeft .sideGripFixe, .gripFixe.gfRight .sideGripFixe  {
						position:absolute; height:50px; width:70px; top:0; background:linear-gradient(90deg, rgb(224, 224, 224) 10%, rgb(184, 184, 184) 10%);
					}
						.gripFixe.gfLeft .sideGripFixe {
							transform-style: preserve-3d; transform-origin:top left; transform:rotateY(-90deg);
						}
						.gripFixe.gfRight .sideGripFixe {
							transform-style: preserve-3d; transform-origin:bottom left; transform:translateX(10px) rotateY(-90deg);
						}
			
		.gx8Bord {
			position:absolute; height:99.9% /*100px; */; width:100px; border-radius:50px; top:0; transform-style:preserve-3d; 
		}
			.gx8Bord.bordLeft {left:0; transform:rotateX(90deg)  rotateY(5deg);}
			.gx8Bord.bordRight {right:0; transform:rotateX(90deg) rotateY(-171deg);}
			
			.gx8Bord.bordRight .gx8Bordered:nth-child(-n + 11) {
				background:linear-gradient(0deg, transparent 45px,rgb(51, 51, 51) 45px, transparent 49px);
			}
			
			.gx8Bord.bordRight .gx8Bordered:nth-child(n + 39) {height:215px; box-shadow:inset 0 -1px 1px -1px rgb(255, 255, 255);}
		/*
			.gx8Bord.bordRight .gx8Bordered:nth-child(n + 39):after {
				content:"";
				position:absolute; bottom:-15px; left:0; height:15px; width:4px;
				transform-style: preserve-3d; transform-origin: top center; transform: rotateX(-90deg);
				background:rgb(200, 200, 200); box-shadow: 5px 0 1px 0 #fff;
			}
		*/
		
		.gx8Facade {
			position:absolute; left:50px;  height:200px; width:280px; 
			transform-style:preserve-3d; transform-origin:top center; transform:rotateX(90deg);
			background:rgb(184, 184, 184); 
		}
		
			.gx8Facade .ingx8Facade {
				position:absolute; width:100%; height:130px; left:0; top:10px; 
				background:repeating-linear-gradient(0deg, transparent, transparent 1px, rgb(0,0,0) 1px, rgb(0,0,0) 2px), repeating-linear-gradient(90deg, rgb(50,50,50), rgb(50,50,50) 1px, rgb(0,0,0) 1px, rgb(0,0,0) 2px);
			}
			
			.gx8Facade.inFront {top:100px; /* z-index:5; */ z-index:1; background:linear-gradient(90deg, rgb(170, 170, 170) 0%, rgb(55, 55, 55) 100%);}
			.gx8Facade.inBack {top:0px; background:linear-gradient(90deg , rgb(201, 201, 201) 0%, rgb(184, 184, 184) 100%);}
			
			.backScreen {
				position:absolute; z-index:2; height:130px; width:200px; top:10px; right:0; 
				transform-style:preserve-3d; transform-origin:center; 
				transform:translate3d(0,0,5px); background:rgb(29, 29, 29);
			}
				.backScreenBtnBlock {
					position:absolute; height:32px; width:28px;
					transform-style:preserve-3d; transform-origin:center; text-align: center;
					color: #fff; font-size: 5px; font-family: arial; line-height:14px; transform:rotate(180deg);
				}
				.bsbb1 {bottom:1px; right:1px;} 
				.bsbb2 {bottom:33px; right:1px;} 
				.bsbb3 {bottom:65px; right:1px;} 
				.bsbb4 {bottom:98px; right:1px;} 
				.bsbb5 {bottom:1px; left:1px;} 
				
				.bsbb6 {
					position:absolute; height:5px; width:5px; top:10px; left:14px;
					border-radius:50%; background:radial-gradient(circle at 80% 0%, #efefef 0% ,transparent 40%, #ccc 100%), #000; border:1px solid #000;
				}
				
				.backScreenBtnBlock:after {
					content:""; position:absolute; top:50%; left:50%; height:14px; width:14px;
					margin:-4px 0 0 -7px; background:linear-gradient(135deg, #000 0%, #333 100%);
					border:1px solid #000; border-radius:50%;
				}
			
				.backScreen_left {
					position:absolute; height:130px; width:5px; top:0; left:-5px; background:linear-gradient(0deg, rgb(82, 82, 82) 30%,#000 31%);
					transform-style:preserve-3d; transform-origin:top right; transform: rotateY(-90deg);
				}
			
				.backScreen_right {
					position:absolute; height:130px; width:10px; top:0; right:-5px; background:#000;
					transform-style:preserve-3d; transform-origin:top left; transform: rotateY(45deg);
				}
				
				.backScreen_bottom {
					position:absolute; height:10px; width:200px; bottom:-10px; 
					transform-style:preserve-3d; transform-origin:top center;
					transform:rotateX(-90deg); background:rgb(82, 82, 82);
				}
				
				.backScreen_top {
					position:absolute; height:10px; width:200px; top:-10px; 
					transform-style:preserve-3d; transform-origin:bottom center;
					transform:rotateX(90deg); background:#000;
				}
				
				.backScreenDial {
					position:absolute; z-index:2; height:90px; width:100px; top:20px; left:20px; border-radius:50% 0 0 50%; 
					transform-origin:center; transform-style:preserve-3d; background:#000;
				}
				
				.dial {
					position:absolute; z-index:2; height:80px; width:80px; border-radius:50%; margin:5px;
					transform-origin:center; transform-style:preserve-3d; transform:translate3d(0,0,6px) rotateZ(-25deg);
					box-shadow:inset 4px -1px 3px -2px rgb(82, 82, 82); background:transparent;
				}
					.dialBord {/*
						height:80px; width:80px; position:absolute; top:0px; left:0;
						transform-origin:center; transform-style:preserve-3d; transform:rotateX(90deg) rotateY(0deg) translate3d(0,-15px,0) ;
						*/
						height: 80px;
						width: 80px;
						position: absolute;
						top: 0px;
						background: red;
						left: 0;
						transform-origin: center;
						transform-style: preserve-3d;
						transform: rotateX(-90deg) rotateY(0deg) translate3d(0,40px,0);
					}
					
					.dialIn {
						height:80px; width:80px; border-radius:50%; top:0 ; left:0; position:absolute; 
						background:radial-gradient(circle at center, rgb(60, 60, 60) 20%, transparent 21%),linear-gradient(254deg, #000 0%,#333 100%);
						box-shadow:inset 2px 0 1px 0 rgb(29, 29, 29), inset -1px -0 1px 0 rgb(33, 33, 33);
					}
					
					
					.dialBord span.bDial {
						position:absolute; width:4px; height:15px; top:0px; left:38px; 
						transform-origin:top center; transform-style:preserve-3d;
						border-left:1px solid rgb(71, 71, 71);
					}
						.dialBord span.bDial span {
							position:absolute; height:100%; width:100%; transform:rotate(180deg); background:#000;
						}
					
					
					
					/*	.dialBord span:after {
							content:""; position:absolute; bottom:-40px; left:0; width:100%; height:40px; 
							transform-style: preserve-3d; transform-origin: top center; transform: rotateX(-90deg); border-right:1px solid rgb(32, 32, 32); background:rgb(45, 45, 45);
						}
					*/
					
					.arrowDialBox {
						position:absolute; height:60px; width:60px; left:10px; top:10px; border:1px solid rgb(36, 36, 36); border-radius:50%;
						transform-style: preserve-3d; transform-origin: center; transform:rotate(25deg); box-shadow:-2px -3px 2px 0 #202020, 2px 0px 4px 0 #303030, inset 1px 0px 2px 0 #414141;
					}
					
					.arrowDial_1,.arrowDial_2,.arrowDial_3,.arrowDial_4 {
						position:absolute; top:50%; left:50%; height:0; width:0;
						border-right:7px solid transparent; border-left:8px solid transparent;
						transform-style:preserve-3d; transform-origin:center;
					}
					
					.arrowDial_1 {z-index:4; margin:-26px 0 0 -8px; transform:rotate(0deg); border-bottom: 8px solid rgb(39, 39, 39); filter: drop-shadow(0px 0px 1px rgb(0, 0, 0));}
					.arrowDial_2 {z-index:3; margin:18px 0 0 -8px; transform:rotate(180deg); border-bottom: 8px solid rgb(45, 45, 45); filter: drop-shadow(0px 0px 1px rgb(0, 0, 0));}
					.arrowDial_3 {z-index:2; margin:-4px 0 0 15px; transform:rotate(90deg); border-bottom: 8px solid rgb(39, 39, 39); filter: drop-shadow(0px 0px 1px rgb(0, 0, 0));}
					.arrowDial_4 {z-index:1; margin:-4px 0 0 -30px; transform:rotate(-90deg); border-bottom: 8px solid rgb(54, 54, 54); filter: drop-shadow(0px 0px 1px rgb(0, 0, 0));}
				
				.cameraScreen {
					position:absolute; right:30px; top:5px; border-radius:5px; height:120px; width:140px;
					/* background:linear-gradient(45deg, rgb(116, 116, 116) 0%, rgb(0,0,0) 100%); */
					border:4px groove rgb(43, 43, 43); overflow:hidden;
				}
				
				.theText {
					position:absolute; bottom:50px; left:80px;
					font-family:arial; font-size:5px; color:black;
					transform-origin:center; transform-style:preserve-3d; transform:rotateZ(180deg);
				}
				
				
				
			/* /////////////////////////////////// */	
			
			.veroux {
				position:absolute; z-index:2; top:50%; left:50%; height:20px; width:50px;  border-radius:10px 0 0 10px; margin:-35px auto auto -72px; background:rgb(63, 63, 63);
				transform-style: preserve-3d;  transform: translate3d(0px, 0px, -1px);
			}
				.btnVeroux {
					height:16px; width:16px; margin:2px; border-radius:50%; background:linear-gradient(45deg, rgb(239, 239, 239) 0%, rgb(148, 148, 148) 100%);
				}
				
			.diaf {
				position:absolute; z-index:3; top:50%; left:50%; height:20px; width:25px; margin:-10px auto auto 95px; 
				width: 0; height: 16px; border-style: solid; border-width: 4px 0 4px 30px;
				border-color: transparent transparent transparent rgb(210, 210, 210); transform-style: preserve-3d;
				transform: rotate(70deg) translate3d(0px, 0px, -1px);
			}
			
			.bigDiaf {
				position:absolute; z-index:1; border-radius:50%; height:18px; width:18px; bottom: -5px;
				right: 18px; background:rgb(210, 210, 210); background: rgb(187, 187, 187);
				box-shadow: inset 1px 1px 2px rgb(141, 141, 141);
			}			
			.smallDiaf {
				position:absolute; z-index:1; border-radius:50%; height:10px; width:10px; bottom: -1px;
				right: -5px;background: rgb(187, 187, 187);
				box-shadow: inset 1px 1px 2px rgb(141, 141, 141);
			}
				
		.gx8Bord .gx8Bordered {
			position:absolute; top:50px; left:50px; margin:0 0 0 -2px; width:5px; height:200px; 
			 background:rgb(184, 184, 184); /**/
			transform-origin:top center; transform-style:preserve-3d; 
		}
			.gx8Bord .gx8Bordered span {
				position:absolute; width:100%; height:130px; left:0; top:10px;
				background:repeating-linear-gradient(0deg, transparent, transparent 1px, rgb(0,0,0) 1px, rgb(0,0,0) 2px), repeating-linear-gradient(90deg, rgb(50,50,50), rgb(50,50,50) 1px, rgb(0,0,0) 1px, rgb(0,0,0) 2px);
			}
		
		.lense {
			position:absolute; top:50%; left:50%; height:140px; width:140px; margin:-80px 0 0 -50px; border-radius:50%;
			transform-origin:center; transform-style:preserve-3d; transform:rotateX(90deg);
		}
		
			.lense .extBorderLense {
				position:absolute; height:70px; width:4px; top:0; left:68px; 
				background:rgb(45, 45, 45); border-bottom:2px solid #999;
				transform-origin:top center; transform-style:preserve-3d;
			}
			
			.lense .extBorderLense:after {
				content:""; position:absolute; width:100%; height:50%; bottom:25%; border-top:2px solid #000; border-bottom:2px solid #000; background:linear-gradient(90deg, #676767 0%, #000 100%);
			}
			
				.frontLensBorder {
					position:absolute; height:10px; width:4px; left:0; top:0px; 
					transform-origin:top center; transform-style:preserve-3d;
					transform:rotateX(-90deg); background:rgb(35, 35, 35);
				}
				
				.frontLensBorder span {
					position:absolute; height:10px; width:4px; top:10px; left:0;
					transform-origin:top center; transform-style:preserve-3d;
					transform:rotateX(-90deg);
					background:#000;
				}
				
			.optique {
				position:absolute; top:0; left:0; height:140px; width:140px; border-radius:50%; border:20px solid rgb(44, 44, 44);
				transform-origin: center; transform-style:preserve-3d; transform:rotateX(90deg) translate3d(0,0,60px);
				background:radial-gradient(circle at center,#fff 0%, rgb(100,100,100) 10%,rgb(0, 0, 0) 11% ,rgb(0, 0, 0) 33%, rgb(90, 90, 90) 34%, rgb(13, 13, 13) 35%, rgb(32, 32, 32) 60%, rgb(56, 56, 56) 61%, rgb(111, 111, 111) 90%, rgb(0, 0, 0) 91%);
			}
				.optique .optiqueLight {
					position:absolute; height:100%; width:100%; top:0; left:0; border-radius:50%; background:radial-gradient(circle at 10px 20px,rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20% ),radial-gradient(circle at 80% 70%,rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60% ), rgba(216, 240, 255, 0);
				}
			
			
			/* /////////////////////// LANDSCAP ////////////////// */
			
			
		.landscape {
			position:absolute; top:0%; left:0%; 
			height:100%; width:100%; overflow:hidden;
			transform:rotate(180deg);
			background:
				/*linear-gradient(180deg,rgb(1,3,52) 0%, rgb(0, 91, 138) 55%, rgb(1, 80, 126) 60%, rgb(2, 71, 112) 63%, rgb(1, 193, 196) 63%,rgb(89, 231, 238) 80%, rgb(99, 225, 214) 100%);*/
				linear-gradient(180deg,rgb(9, 37, 81) 0%,  rgb(105, 120, 161) 60%,  rgb(7, 13, 25) 100%);
		}
		
		.topLand {
			position:absolute; top:0; left:0; height:60%; width:100%; overflow:hidden;
			background:linear-gradient(0deg,rgba(255,255,255,.1) 0%, transparent 30%);
		}
		
			.montain_1 {
				position:absolute; height:20%; width:50%; left:15%; bottom:-10%; 
				border-radius:0 90% 0  0/0 60% 0 0;
				background:rgb(8, 30, 46);
			}
		
			.montain_2 {
				position:absolute; height:30%; width:40%; left:-5%; bottom:-15%; 
				border-radius:0 90% 0 0 /0 60% 0  0;
				background:rgb(8, 30, 46);
				transform-origin:center right; transform:rotate(5deg);
			}
			
		.moon {
			position: absolute; height: 10vmin; width:10vmin; right: 15%; top: 10%;
			box-shadow: inset 1vmin 0 1vmin -3px rgba(255,255,255,.6); border-radius: 50%; transform: rotate(-26deg);
		}
		
			.bottomLand .landReflet .moon {
				transform:translate(0,50vmin);
			}
			
			
			.cameraScreen .landscape .boatBox {
				transform:rotateY(50deg) scale(.12) translate(0, -185vmin);
			}
			.cameraScreen .landscape .topLand .moon {
				height:2vmin; width:2vmin;
				box-shadow:inset 0.2vmin 0 0.4vmin -3px rgba(255,255,255,.6);
			}
		
		.boatBox {
			position:absolute; z-index:4; top:50%; left:50%; height:100vmin; width:30vmin; margin:-25vmin 0 0 -15vmin;
			transform: rotatey(50deg); transform-origin: center;			
		}
			
		.boat {
			position:absolute; top:0; left:0; height:50vmin; width:30vmin;
			overflow: hidden; z-index:3; margin:0;
		}
		
		.boat.boatReflet {transform:rotateX(180deg) translateY(-50vmin); opacity:.1;}
		
			.coque {
				position:absolute; width:100%; height:20%; left:0; bottom:-13%; overflow:hidden;
			}
				.inCoque {
					position:absolute; left:0; top:-50%; height:100%; width:100%;
					border-radius:50% 50% 50% 25%/50% 50% 50% 65%; background:rgb(8, 30, 46);
				}
				
			.voile_1 {
				position:absolute;z-index:2; top:0; left:0; width:55%; height:85%; overflow:hidden; 
			}
				.inVoile_1 {position:absolute; top:0; left:100%; height:150%; width:150%; transform-origin:top left; transform:rotate(20deg); background:rgb(149, 155, 204);}
			
			.voile_2 {
				position:absolute; z-index:1; top:18%; right:5%; height:70%; width:50%; 
				border-radius:0 100% 0 0/0 90% 0 0; overflow: hidden;
			}
				.voile_2Front {
					position:absolute; z-index:2; bottom:0; left:0; height:100%; width:100%;
					box-shadow:inset -3vw 0vw 0 -2vw rgb(149, 155, 204); border-radius:0 100% 0 0/0 90% 0 0;
				}
				.voile_2Back {
					position:absolute; z-index:1; bottom:0; left:0; height:100%; width:93%;
					transform-origin:bottom right; transform:rotate(22deg);  background:rgb(95, 95, 148);
				}
			
			
		
		.bottomLand {
			position:absolute; bottom:0; left:0; height:40%; width:100%; transform-origin:center;
			overflow:hidden;
		}
			.bottomLand .landReflet {height:100%; transform:rotateX(180deg); opacity:.5;  filter:blur(1px);}


/* /////////////////////////////////////////////////////// */
			
		#summicron {
			position:absolute; 
			top:20px; left:90px; 
			height:150px; width:140px; 
			margin:0; 
			background:rgba(0,0,0,0) !important;
			transform-origin:center; 
			transform-style:preserve-3d;
			transform:rotateX(90deg) translateY(-75px);
		}
		
		#summicron .apoLens {
			position:absolute; top:0; left:50%; height:100%; width:4px; margin:0 0 0 -2px; background:rgba(100, 20, 10, 0);
			transform-origin:center; transform-style:preserve-3d;
			color:#fff; font-size:5px; font-family:'Fira Code', monospace;
		}
		
		.glass {
			position:absolute; height:106px; width:106px; left:50%; top:0px; margin:-17px 0 0 -53px; border-radius:50%; 
			box-sizing:border-box; border:10px solid #000;
			transform-origin:center; transform-style:preserve-3d; transform:rotateX(90deg);
			background:
					radial-gradient(circle at 50% 0%, rgba(255,255,255, .95) 0%, rgba(198, 108, 196, 0.4) 30%, rgba(0,0,0,0) 40% ),
					radial-gradient(circle at 50% 95%, rgba(255,255,255, .7) 0%, rgba(200,108,196,.5) 20%, rgba(0,0,0,0) 40% ),
					linear-gradient(0deg, #111 0%, #000 100%)
				;
		}
		
			.inGlass {
				height:74px; width:74px; margin:6px 0 0 6px; border-radius:50%;
				background:
					radial-gradient(circle at 50% -5px, rgba(255,255,255, .95) 5%, rgba(102, 74, 202, 1) 20%, rgba(0,0,0,0) 30% ),
					radial-gradient(circle at 50% 95%, rgba(255,255,255, .7) 0%, rgba(102, 74, 202,.9) 20%, rgba(0,0,0,1) 50% ),
					linear-gradient(0deg, #111 0%, #000 100%)
				;
			}
		
		
		
		#summicron .apoLens span.apoBord { 
			display:block; position:absolute; left:0; width:100%; background:linear-gradient(0deg, rgb(20, 20, 20) 0%, rgb(64, 64, 64) 100%); 
			transform-origin:bottom center; transform-style:preserve-3d;
		}
		
			span.apoBord_0 {
				bottom:115px; height:10px !important; 
				transform:rotateX(0deg) translate3d(0px,0px,-18px);
			}
			span.apoBord_1 {
				bottom:125px; height:5px !important; background:#000 !important;
				transform:rotateX(90deg) translate3d(0px,-13px,0px);
			}
			
			span.apoBord_2 {
				bottom:80px; height:45px !important;
				transform:rotateX(0deg) translate3d(0px,0px,-13px);
			}
			
			
				#apoLens_165 .apoBord_2:before {
					content:"";
					position:absolute;
					left:0; top:11px;
					display:block;
					height:4px; width:4px;
					background:#fff;
					border-radius:50%;
				}
			
			span.apoBord_3 {
				bottom:115px; height:5px !important; background:#000 !important;
				transform:rotateX(90deg) translate3d(0px,-10px,-10px);
			}
			
			span.apoBord_4 {
				bottom:55px; height:50px !important;  /* background:red !important; */
				transform:rotateX(0deg) translate3d(0px,0px,-10px);
			}
				.apoCran {position:absolute; height:20px; width:3px; bottom:20px; transform-style:preserve-3d;}
					.apoCran.cranDroit {right:0px; transform:rotateY(45deg) translateX(0px); transform-origin: center right;  background:rgb(20, 20, 20);}
					.apoCran.cranGauche {left:0px; transform:rotateY(-45deg) translateX(0px); transform-origin:center left;  background:rgb(70, 70, 70);}
			

				
				#apoLens_135 .apoBord_4:after {
					content:"16";
					color:#fff; top:3px;
					position:absolute;
					transform:translate3d(-3px,0,0px) ;
				}
				
				#apoLens_144 .apoBord_4:after {
					content:"11";
					color:#fff; top:3px;
					position:absolute;
					transform:translate3d(-3px,0,0px) ;
				}
				
				#apoLens_153 .apoBord_4:after {
					content:"8";
					color:#fff; top:3px;
					position:absolute;
					transform:translate3d(-3px,0,0px) ;
				}
				
				#apoLens_165 .apoBord_4:after {
					content:"5.6";
					color:#fff; top:3px;
					position:absolute;
					transform:translate3d(-3px,0,0px) ;
				}
				
				#apoLens_174 .apoBord_4:after {
					content:"4";
					color:#fff;
					position:absolute;
					top:3px;
					transform:translate3d(0,0,0px);
				}
				
				#apoLens_180 .apoBord_4:after {
					content:"2.8";
					color:#fff;
					position:absolute;
					top:3px;
					transform:translate3d(0,0,0px);
				}
				
				#apoLens_189 .apoBord_4:after {
					content:"2";
					color:#fff;
					position:absolute;
					top:3px;
					transform:translate3d(0,0,0px);
				}

			span.apoBord_5 {
				bottom:65px; height:5px !important;  background:#000 !important;
				transform:rotateX(90deg) translate3d(0px,-5px,-5px);
			}
			span.apoBord_6 {
				bottom:30px; height:30px !important; /* background:blue !important; */
				transform:rotateX(0deg) translate3d(0px,0px,-5px);
			}
			span.apoBord_7 {
				bottom:35px; height:5px !important;  background:rgb(33, 33, 33) !important;
				transform:rotateX(90deg) translate3d(0px,0px,0px);
			}
			span.apoBord_8 {
				bottom:0; height:35px !important; /* background:red !important;  */
				width:105% !important;
				border-bottom:1px solid #eee;
				box-sizing:border-box;
				transform:rotateX(0deg) translate3d(0px,0px,0px);
			}
			
			
			
				#apoLens_123 .apoBord_8:before {
					content:"";
					position:absolute;
					height:5px; width:5px; top:48%;
					left:0; border-radius:50%; background:red;
				}
			
				#apoLens_207 .apoBord_8:before {
					content:"50";
					position:absolute;
					top:5px;
					font-size:10px;
					color:#CD9F20;
				}
				
				#apoLens_165 .apoBord_8:before {
					content:"\25B2";
					position:absolute;
					top:2px;
				}
				
				#apoLens_165 .apoBord_8:after {
					content:"2";
					position:absolute;
					top:10px;
				}
				
				#apoLens_171 .apoBord_8:before {
					content:"4";
					position:absolute;
					top:10px;
				}
				#apoLens_171 .apoBord_8:after {
					content:"";
					background:#fff;
					bottom:26px;
					right:3px;
					position:absolute;
					height:5px; width:1px; 
					transform-origin:bottom center;
					transform:rotate(40deg);
				}
				
				#apoLens_159 .apoBord_8:before {
					content:"4";
					position:absolute;
					top:10px;
				}
				
				#apoLens_159 .apoBord_8:after {
					content:"";
					background:#fff;
					bottom:26px;
					right:3px;
					position:absolute;
					height:5px; width:1px; 
					transform-origin:bottom center;
					transform:rotate(-40deg);
				}
			
				
				#apoLens_153 .apoBord_8:before {
					content:"8";
					position:absolute;
					top:10px;
				}				
				
				#apoLens_153 .apoBord_8:after {
					content:"";
					background:#fff;
					bottom:26px;
					right:1px;
					position:absolute;
					height:7px; width:1px; 
					transform-origin:bottom center;
					transform:rotate(-60deg);
				}
				
				#apoLens_144 .apoBord_8:before {
					content:"11";
					position:absolute;
					top:10px;
				}
				
				#apoLens_144 .apoBord_8:after {
					content:"";
					background:#fff;
					bottom:26px;
					right:1px;
					position:absolute;
					height:15px; width:1px; 
					transform-origin:bottom center;
					transform:rotate(-75deg);
				}
				
				#apoLens_135 .apoBord_8:before {
					content:"16";
					position:absolute;
					top:10px;
				}
				
				#apoLens_135 .apoBord_8:after {
					content:"";
					background:#fff;
					bottom:26px;
					right:1px;
					position:absolute;
					height:18px; width:1px; 
					transform-origin:bottom center;
					transform:rotate(-78deg);
				}
				
				
				#apoLens_177 .apoBord_8:before {
					content:"8";
					position:absolute;
					top:10px;
				}
				
				#apoLens_177 .apoBord_8:after {
					content:"";
					background:#fff;
					bottom:26px;
					right:4px;
					position:absolute;
					height:7px; width:1px; 
					transform-origin:bottom center;
					transform:rotate(60deg);
				}
				
				#apoLens_189 .apoBord_8:before {
					content:"11";
					position:absolute;
					top:10px;
				}
				#apoLens_189 .apoBord_8:after {
					content:"";
					background:#fff;
					bottom:26px;
					right:1px;
					position:absolute;
					height:15px; width:1px; 
					transform-origin:bottom center;
					transform:rotate(75deg);
				}
			
				#apoLens_198 .apoBord_8:before {
					content:"16";
					position:absolute;
					top:10px;
				}			
			
			
				#apoLens_198 .apoBord_8:after {
					content:"";
					background:#fff;
					bottom:26px;
					right:1px;
					position:absolute;
					height:18px; width:1px; 
					transform-origin:bottom center;
					transform:rotate(75deg);
				}			
			
		
			/* /////// */
			


				
				/* //////// */
								
				#apoLens_165 .apoBord_6:before {
					content:"\0221E";
					position:absolute;
					color:#CD9F20;
					top:1px;
					left:2px;
					font-size:12px;
					line-height:80%;
				}
				
				#apoLens_156 .apoBord_6:before {
					content:"feet";
					position:absolute;
					color:#CD9F20;
					top:3px;
					font-size:5px;
				}
				
				#apoLens_174 .apoBord_6:before {
					content:"25";
					position:absolute;
					color:#CD9F20;
					top:3px;
					font-size:6px;
					font-weight:bolder;
				}
				
				#apoLens_186 .apoBord_6:before {
					content:"10";
					position:absolute;
					color:#CD9F20;
					top:3px;
					left:-1px;
					font-size:6px;
					font-weight:bolder;
				}
				
				#apoLens_192 .apoBord_6:before {
					content:"6";
					position:absolute;
					color:#CD9F20;
					top:3px;
					font-size:6px;
					font-weight:bolder;
				}
				
				
				#apoLens_201 .apoBord_6:before {
					content:"5";
					position:absolute;
					color:#CD9F20;
					top:3px;
					font-size:6px;
					font-weight:bolder;
				}
				#apoLens_213 .apoBord_6:before {
					content:"3.5";
					position:absolute;
					color:#CD9F20;
					top:3px;
					font-size:6px;
					font-weight:bolder;
				}
				#apoLens_225 .apoBord_6:before {
					content:"3";
					position:absolute;
					color:#CD9F20;
					top:3px;
					font-size:6px;
					font-weight:bolder;
				}
				#apoLens_246 .apoBord_6:before {
					content:"2.5";
					position:absolute;
					color:#CD9F20;
					top:3px;
					font-size:6px;
					font-weight:bolder;
				}
				
				
				
				
				

				/* ///////////////// */
				
				#apoLens_165 .apoBord_6:after {
					content:"\0221E";
					position:absolute;
					color:#fff;
					top:8px;
					left:2px;
					font-size:12px;
					line-height:80%;
				}
				#apoLens_156 .apoBord_6:after {
					content:"m";
					position:absolute;
					color:#fff;
					top:10px;
					font-size:5px;	
				}
				#apoLens_171 .apoBord_6:after {
					content:"10";
					position:absolute;
					color:#fff;
					top:10px;
					left:1px;
					font-size:6px;
					font-weight:bolder;
				}
				#apoLens_180 .apoBord_6:after {
					content:"5";
					position:absolute;
					color:#fff;
					top:10px;
					left:2px;
					font-size:6px;
					font-weight:bolder;
				}
				#apoLens_186 .apoBord_6:after {
					content:"3";
					position:absolute;
					color:#fff;
					top:10px;
					font-size:6px;
					font-weight:bolder;
				}
				#apoLens_192 .apoBord_6:after {
					content:"2";
					position:absolute;
					color:#fff;
					top:10px;
					left:-2px;
					font-size:6px;
					font-weight:bolder;
				}
				
				#apoLens_204 .apoBord_6:after {
					content:"1.5";
					position:absolute;
					color:#fff;
					top:10px;
					left:-2px;
					font-size:6px;
					font-weight:bolder;
				}
				
				#apoLens_216 .apoBord_6:after {
					content:"1.2";
					position:absolute;
					color:#fff;
					top:10px;
					left:-2px;
					font-size:6px;
					font-weight:bolder;
				}
				
				#apoLens_225 .apoBord_6:after {
					content:"1";
					position:absolute;
					color:#fff;
					top:10px;
					font-size:6px;
					font-weight:bolder;
				}
				
				#apoLens_237 .apoBord_6:after {
					content:"0.8";
					position:absolute;
					color:#fff;
					top:10px;
					font-size:6px;
					font-weight:bolder;
				}
				
				#apoLens_249 .apoBord_6:after {
					content:"0.7";
					position:absolute;
					color:#fff;
					top:10px;
					font-size:6px;
					font-weight:bolder;
				}
		
			/* ///////// */
			
			
		.focusRing, .infocusRing, .bordfocusRing, .innerfocusRing{
			transform-style:preserve-3d;
		}
		
		.focusRing {
			position:absolute; top:0; left:0; height:50px; width:50px;  transform-origin:top center;
			transform:translate3d(20px,111px,20px) rotateY(-60deg) rotateX(90deg); 
		}
		
			.focusRingLeft, .focusRingRight {
				position:absolute; top:0; height:100%; width:15px;
				
			}
				
				.focusRingLeft {
					left:0; transform-origin:top left; transform:rotateY(-90deg); background:rgb(61, 61, 61);
				}
				.focusRingRight {
					right:0; transform-origin:top right; transform:rotateY(90deg); background:rgb(0, 0, 0);
				}
				
			.focusRingTop, .focusRingBottom {
				position:absolute; top:0; left:0; width:100%; height:22px; transform-style:preserve-3d; background:rgba(0,0,0, 1);
			}
			
				.focusRingTop {
					transform:translateZ(15px);
				}
		
		.infocusRing {
			position:absolute; height:150px; width:150px; border-radius:50%; top:125px; left:0;
			background:rgba(0,255,0, .3); transform:rotateX(90deg) translateY(40px);
		}
		
		.bordfocusRing {
			position:absolute; bottom:0; left:0; height:50px; width:100%;
		}
		
		.innerfocusRing {
			position:absolute; width:11px; height:15px; bottom:0; transform-style:preserve-3d;  
		}
		
			.innerfocusRing span {position:absolute; transform-style:preserve-3d; left:0; height:20px; width:100%; background:linear-gradient(0deg,rgb(0,0,0) 0%, rgb(33, 33, 33) 100%);}
				
				.innerfocusRing span.spantop {
					top:0; transform-origin:top center; 
				}
				
				.innerfocusRing span.spanBottom {
					bottom:0; transform-origin:bottom center;
				}
		
			.bordfocusRing .innerfocusRing:nth-child(1) {left:0; transform-origin:bottom left; transform:rotateX(-90deg) rotateY(45deg) translate3d(0px,0px,0px); background:rgb(40,40,40);}
				.bordfocusRing .innerfocusRing:nth-child(1) span.spantop {transform:rotateX(-90deg)  skewX(45deg);}
				.bordfocusRing .innerfocusRing:nth-child(1) span.spanBottom {transform:rotateX(90deg)  skewX(-45deg);}
				
			.bordfocusRing .innerfocusRing:nth-child(2) {left:10px; transform-origin:bottom left; transform:rotateX(-90deg) rotateY(20deg)  translate3d(0px,0px,-8px); background:rgb(45,45,45);}
				.bordfocusRing .innerfocusRing:nth-child(2) span.spantop {transform:rotateX(-90deg)  skewX(20deg);}
				.bordfocusRing .innerfocusRing:nth-child(2) span.spanBottom {transform:rotateX(90deg)  skewX(-20deg);}
			
			.bordfocusRing .innerfocusRing:nth-child(3) {width:16px; left:17px; transform-origin:bottom right; transform:rotateX(-90deg) rotateY(0deg) translate3d(0px,0px,-11px); background:rgb(50,50,50);}
				.bordfocusRing .innerfocusRing:nth-child(3) span.spantop {transform:rotateX(-90deg)  skewX(0deg);}
				.bordfocusRing .innerfocusRing:nth-child(3) span.spanBottom {transform:rotateX(90deg)  skewX(0deg);}
			
			.bordfocusRing .innerfocusRing:nth-child(4) {right:10px; transform-origin:bottom right; transform:rotateX(-90deg) rotateY(-20deg)  translate3d(0px,0px,-8px); background:rgb(40,40,40);}
				.bordfocusRing .innerfocusRing:nth-child(4) span.spantop {transform:rotateX(-90deg)  skewX(-20deg);}
				.bordfocusRing .innerfocusRing:nth-child(4) span.spanBottom {transform:rotateX(90deg)  skewX(20deg);}
			
			.bordfocusRing .innerfocusRing:nth-child(5) {right:0; transform-origin:bottom right; transform:rotateX(-90deg) rotateY(-45deg) translate3d(0px,0px,0px); background:rgb(30,30,30);}
				.bordfocusRing .innerfocusRing:nth-child(5) span.spantop {transform:rotateX(-90deg)  skewX(-45deg);}
				.bordfocusRing .innerfocusRing:nth-child(5) span.spanBottom {transform:rotateX(90deg)  skewX(45deg);}
								
		
/* /////////////////////////////////////////////////////////////////////////////////////////// */

@media only screen and (max-width:748px) {
	.backDisc {
		height:90dvw; width:90dvw; background:red; border-radius:50%;
	}
	
	.cameraBox.camGlobal {
		transform: rotateZ(-30deg) translate3d(0dvw,-30dvh,0dvw) scale3d(.75,.75,.75);
	}
}

@media only screen and (orientation: portrait) and (max-width:500px) {
	.backDisc {
		height:200dvw; width:200dvw;
	}
	
	.verreBox.empty.reScale {
		display:none;
	}
	.tasseBloc.empty.reScale {
		transform: scale(.5) rotateZ(25deg) translate3d(-100dvw, -12dvh, 0dvw);
	}
	.mokaBaseBox.empty.reScale {
		transform:translate3d(28dvw,0dvh,0dvw) rotateX(15deg) rotateY(1deg) rotateZ(56deg) scale3d(.55,.55,.55)
	}
	
	.qui h2.adessias {
		margin:0;
	}
	
	.laphrase:first-child {
		transform:translate3d(0dvw, -50dvh, 0dvw) rotateZ(-10deg) scale(.5) rotateY(0deg) rotateX(8deg);
	}
	.laphrase:nth-child(2) {
		transform:translate3d(-30dvw,-26dvh,0dvw) rotateZ(-67deg) scale(.5) rotateY(7deg) rotateX(7deg);
	}
	.laphrase:nth-child(3) {
		transform:translate3d(19dvw,-29dvh,0dvw) rotateZ(50deg) scale(.5);
	}
	.laphrase:nth-child(4) {
		transform:translate3d(21dvw,26dvh,0dvw) rotateZ(-19deg) scale(.5);
	}
	.laphrase:nth-child(5) {
		transform:translate3d(-24dvw,23dvh,0dvw) rotateZ(30deg) scale(.75);
	}
	
	.laTabletteBox .ombreTaTablette {
		transform:translate3d(0dvw,-75dvh,0dvw);
	}
	
	.souris {
		top: 81dvh;
	}
	
	.navTop {
		padding:0;
	}
	
}