#octagonBox {
			position:absolute; top:50%; left:50%; translate:-50% -50%; height:300px; 
			width:300px; perspective:1000px; transition:all 750ms ease-out;
			transform:scale3d(.8, .8, .8); margin:0; transform-style:preserve-3d;
		}
			#octagonBox.outOfView {left:calc(100% + 30vw);}
		
			.mokaBaseBox {
				position:absolute; height:250px; width:250px; top:50%; left:50%; translate:-50% -50%;
				transform-style:preserve-3d; transform-origin:center; box-sizing:border-box;
				transition:all 500ms cubic-bezier(0.74, 0.05, 0.33, 1) 250ms;
				transform:translate3d(28dvw,0dvh,0dvw) rotateX(15deg) rotateY(1deg) rotateZ(56deg) scale3d(.8,.8,.8);
			}
			
			/* #octagonBox .mokaBaseBox {transform:rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale3d(.8,.8,.8) translate3d(10vw, 10vh, -30px);} */
			
				.mokaBaseBox.septInView {
					transform:rotateX(60deg) rotateY(0deg) rotateZ(45deg) scale3d(.8,.8,.8) translate3d(10vw, 10vh, -30px); transition:all 750ms ease-out;
				}
			
				.mokaBaseMilieu {
					position:absolute; height:178px; width:178px; top:50%; left:50%; translate:-50% -50%;	
					border-radius:50%; transform-style:preserve-3d;
					transform:rotateX(90deg) rotateY(0deg);
				}
					.leSpan {
						transform-style:preserve-3d; position:absolute; top:50%; left:50%; 
						margin:0 0 0 -1px; height:50px; width:2px; background:rgb(160,160,160) !important;
						translate:-50% -50%;
					}
				
				.mokaBaseTop, .mokaBaseBottom {
					position:absolute; height:250px; width:250px; top:0; left:0;
					transform-style:preserve-3d; transform-origin:center; box-sizing:border-box;
				}
					.mokaBaseTop {transform:translate3d(0px,0px,210px);}
					.mokaBaseBottom {transform:translate3d(0px,0px,-210px);}
					
					.mokaBaseBottomShadow {
						position: absolute; top: 0; right: 0; bottom: 0; left: 0;
						overflow: hidden; transform-style: preserve-3d; transform-origin: left bottom;
						transform: translate3d(36px, 10px, -210px) scale(.95) skewY(-8deg); filter: blur(7px); opacity: .4;
					}
						.mokaBaseBottomShadow:before {
							position: absolute; top: 0; right: 0; bottom: 0; left: 0;
							transform: rotate(45deg); background: black; content: '';
						}
				

					.elemMoka, .elemMokaBase  {
						position:absolute; top:0; left:50%; translate:-50%; height:250px; width:105px; box-sizing:border-box;
						transform-style:preserve-3d; transform-origin:center; background:rgb(90,90,90);
					}
						.elemMokaBase {
							transform: translate3d(3px,0,-210px) scale(1.02); filter: blur(2px);
						}
							.elemMokaBase.rota45, .elemMokaBase.rota90, .elemMokaBase.rota135 {
								transform:translate3d(0,0,0);
							}
					
						.elemMoka .elemMokaBord:first-child {background:rgb(180,180,180);}
					
						.rota45 {rotate:45deg;}
						.rota90 {rotate:90deg;}
						.rota135 {rotate:135deg;}
						
						.mokaBaseTop .elemMoka .elemMokaBord, .mokaBaseBottom .elemMoka .elemMokaBord {
							position:absolute; left:50%; translate:-50% 0; width:105px; height:200px;
							background:rgba(0,0,0,0); transform-style:preserve-3d; 
						}
						
						.mokaBaseTop .elemMoka .elemMokaBord:first-child {top:0; bottom:auto; transform-origin:top center; transform:rotateX(-80deg);}
						.mokaBaseTop .elemMoka .elemMokaBord:last-child {top:auto; bottom:0; transform-origin:bottom center; transform:rotateX(80deg);}
						
						.mokaBaseBottom .elemMoka .elemMokaBord:first-child {top:0; bottom:auto; transform-origin:top center; transform:rotateX(80deg);}
						.mokaBaseBottom .elemMoka .elemMokaBord:last-child {top:auto; bottom:0; transform-origin:bottom center; transform:rotateX(-80deg);}
						
					.leLriangle {
						height:0; width:105px; transform-style:preserve-3d; transform-origin: top center; box-sizing:border-box;
						border-bottom:200px solid green; border-left:15px solid transparent; border-right:15px solid transparent; 
					}
					
						.leLriangle span {
							display:block; width:75px; height:50px; background:rgb(140,140,140); 
							transform-style:preserve-3d; transform-origin:top center; 
						}
							.mokaBaseBottom .elemMokaBord .leLriangle span {transform:rotateX(-100deg);}
							.mokaBaseBottom .elemMokaBord .leLriangle.reCaler span {transform:rotateX(100deg);}
				
							.mokaBaseTop .elemMokaBord .leLriangle span {transform:rotateX(100deg);}
							.mokaBaseTop .elemMokaBord .leLriangle.reCaler span {transform:rotateX(-100deg);}
						
					
						.reCaler {transform:rotateX(180deg) translate(0px, -200px);}
					
						.elemMoka:first-child .elemMokaBord .leLriangle  {border-bottom:200px solid rgb(150,150,150);}
						.elemMoka:nth-child(2) .elemMokaBord .leLriangle  {border-bottom:200px solid rgb(160,160,160);}
						.elemMoka:nth-child(3) .elemMokaBord .leLriangle  {border-bottom:200px solid rgb(80,80,80);}
						.elemMoka:last-child .elemMokaBord .leLriangle  {border-bottom:200px solid rgb(100,100,100);}
						
						.becVerseur {
							position:absolute; bottom:0; left:50%; translate:-50% 0; width:40px; height:60px; background:rgb(0,0,0);
							transform-style:preserve-3d; transform-origin:top center; box-sizing:border-box;
							transform:translate3d(-50px, 54px, 210px) rotateZ(22.5deg) rotateX(245deg) scale3d(.8, 1.2, 1.2);
						}
							.becVerseur .becLeft, .becVerseur .becRight {
								position:absolute; top:0; height:60px; 
							}
							.becVerseur .becLeft {left:0; transform-origin:top left; transform:rotateY(-47deg); background:rgb(0,0,0); width:29px;}
							.becVerseur .becRight {right:0; transform-origin:top right; transform:rotateY(47deg);background:rgb(130,130,130); width:30px;}
						
						.anseMoka {
							position:absolute; top:-30px; left:50%; translate:-50% 0; height:70px; width:32px;
							transform-style:preserve-3d; transform-origin:top center; transform:translate3d(74.5px,-25px,210px) rotateZ(22.5deg);
							background:linear-gradient(0deg, grey 50%, black 50%); box-sizing:border-box;
						}
						
							.anseCotes {
								position:absolute; height:100%; width:100%; top:0; transform-style:preserve-3d; background:violet;
							}
								.anseCotes.anseLeft {left:0; transform-origin:top left; transform:rotateY(90deg)}
								.anseCotes.anseRight {right:0; transform-origin:top right; transform:rotateY(-90deg)}
									.anseMoka .anseCotes.anseLeft, .anseMoka .anseCotes.anseRight {background:linear-gradient(0deg, grey 50%, black 50%);}
							.anseMoka .anseBras1 {
								position:absolute; top:0; left:0; width:32px; height:190px; background:rgb(0,0,0);
								transform:rotateX(-100deg);
								transform-style:preserve-3d; transform-origin:top center; 
							}
								.anseBras1 .anseCotes.anseLeft {transform: rotateY(-90deg); background:rgb(0,0,0);}
								.anseBras1 .anseCotes.anseRight {transform: rotateY(90deg); background:rgb(0,0,0);}
							
								.anseMoka .anseBras2 {
									position:absolute; bottom:0; left:0; width:32px; height:60px; background:rgb(0,0,0);
									transform:rotateX(-100deg);
									transform-style:preserve-3d; transform-origin:bottom center; 
								}
									.anseBras2 .anseBras2 {transform:rotate(0) translate3d(0px, 0px, -32px);}
								
								.anseBras2 .anseCotes.anseLeft {transform: rotateY(90deg); background:rgb(0,0,0);}
								.anseBras2 .anseCotes.anseRight {transform: rotateY(-90deg); background:rgb(0,0,0);}
						
						
						
					.mokaBaseBox .mokaBaseTop .elemMoka .leCouve {
						position:absolute; left:0; width:105px; box-sizing:border-box;
						border-left:53px solid transparent; border-right:52px solid transparent; 
						transform-style:preserve-3d; 
					}
			
						.mokaBaseBox .mokaBaseTop .elemMoka .leCouve.couveTop {
							transform-origin:top center; top:0; bottom:auto; transform:rotateX(10deg);
						}
						.mokaBaseBox .mokaBaseTop .elemMoka .leCouve.couveBottom {
							transform-origin:bottom center; top:auto; bottom:0; transform:rotateX(-10deg);
						}
						
						.mokaBaseBox .mokaBaseTop .elemMoka:first-child .leCouve.couveTop {border-top:127px solid rgb(150,150,150);}
						.mokaBaseBox .mokaBaseTop .elemMoka:nth-child(2) .leCouve.couveTop {border-top:127px solid rgb(140,140,140);}
						.mokaBaseBox .mokaBaseTop .elemMoka:nth-child(3) .leCouve.couveTop {border-top:127px solid rgb(135,135,135);}
						.mokaBaseBox .mokaBaseTop .elemMoka:last-child .leCouve.couveTop {border-top:127px solid rgb(130,130,130);}
						
						.mokaBaseBox .mokaBaseTop .elemMoka:first-child .leCouve.couveBottom {border-bottom:127px solid rgb(170,170,170);}
						.mokaBaseBox .mokaBaseTop .elemMoka:nth-child(2) .leCouve.couveBottom {border-bottom:127px solid rgb(175,175,175);}
						.mokaBaseBox .mokaBaseTop .elemMoka:nth-child(3) .leCouve.couveBottom {border-bottom:127px solid rgb(170,170,170);}		
						.mokaBaseBox .mokaBaseTop .elemMoka:last-child  .leCouve.couveBottom {border-bottom:127px solid rgb(165,165,165);}

				.bouchonBouton {
					position:absolute; height:45px; width:45px; top:50%; left:50%; translate:-50% -50%; box-sizing:border-box;
					transform-style:preserve-3d; transform-origin:center; transform:translate3d(0,0,260px); 
				}
					.bouchonBouton .coteBouchon {
						position:absolute; top:0; left:50%; height:100%; width:19px;
						translate:-50% 0; transform-style:preserve-3d; 
					}
						.bouchonBouton .coteBouchon .coteBouchonTop, .bouchonBouton .coteBouchon .coteBouchonBottom {
							 position:absolute; transform-style:preserve-3d; left:0; 
						}
						.bouchonBouton .coteBouchon .coteBouchonTop {
							top:0; transform-origin:top center; border-left:10px solid transparent; border-right:10px solid transparent;  
							transform:rotateX(-55deg); border-top-width:40px; border-top-style:solid;
						}
						.bouchonBouton .coteBouchon .coteBouchonBottom {
							bottom:0; transform-origin:bottom center; border-left:10px solid transparent; border-right:10px solid transparent; 
							transform:rotateX(55deg); border-bottom-width:40px; border-bottom-style:solid;
						}
							
							.bouchonBouton .coteBouchon:first-child .coteBouchonBottom {border-bottom-color:rgb(0, 0, 0);}
							.bouchonBouton .coteBouchon:nth-child .coteBouchonBottom {border-bottom-color:rgb(10, 10, 10);}
							.bouchonBouton .coteBouchon:nth-child .coteBouchonBottom {border-bottom-color:rgb(20, 20, 20);}
							.bouchonBouton .coteBouchon:last-child .coteBouchonBottom {border-bottom-color:rgb(30, 30, 30);}
				
							
							.bouchonBouton .coteBouchon:first-child .coteBouchonTop {border-top-color:rgb(0, 0, 0);}
							.bouchonBouton .coteBouchon:nth-child .coteBouchonTop {border-top-color:rgb(10, 10, 10);}
							.bouchonBouton .coteBouchon:nth-child .coteBouchonTop {border-top-color:rgb(20, 20, 20);}
							.bouchonBouton .coteBouchon:last-child .coteBouchonTop {border-top-color:rgb(30, 30, 30);}
				
				.coteBouchonToit {
					position:absolute; left:0; transform-style:preserve-3d; width:100%; box-sizing:border-box;
					border-left:9px solid transparent; border-right:9px solid transparent;
				}
					.coteBouchonToit.atTop {
						position:absolute; transform-origin:top center; top:0; border-top:24px solid red; transform:rotateX(10deg); 
					}
					
					
					.coteBouchonToit.atBottom {
						position:absolute; transform-origin:bottom center; bottom:0; border-bottom:24px solid red; transform:rotateX(-10deg); 
					}
					
					.bouchonBouton .coteBouchon:first-child .coteBouchonToit.atTop {border-top-color:rgb(20,20,20);}
					.bouchonBouton .coteBouchon:nth-child(2) .coteBouchonToit.atTop {border-top-color:rgb(10,10,10);}
					.bouchonBouton .coteBouchon:nth-child(3) .coteBouchonToit.atTop {border-top-color:rgb(20,20,20);}
					.bouchonBouton .coteBouchon:last-child .coteBouchonToit.atTop {border-top-color:rgb(35,35,35);}
					
					.bouchonBouton .coteBouchon:first-child .coteBouchonToit.atBottom {border-bottom-color:rgb(100,100,100);}
					.bouchonBouton .coteBouchon:nth-child(2) .coteBouchonToit.atBottom {border-bottom-color:rgb(110,110,110);}
					.bouchonBouton .coteBouchon:nth-child(3) .coteBouchonToit.atBottom {border-bottom-color:rgb(100,100,100);}
					.bouchonBouton .coteBouchon:last-child .coteBouchonToit.atBottom {border-bottom-color:rgb(90,90,90);}
				
			
		.shadowCafe {
			position:absolute; width:430px; height:250px; opacity:.1;
			transform-style:preserve-3d; transform-origin:center left;
			transform:translate3d(178px,0,-210px) skewY(-10deg); filter: blur(10px);
		}
			.shadowCafe .shadowCafeTop {
				position:absolute; left:0; height:100%; border-top:35px solid transparent; border-bottom:35px solid transparent;
				border-left:250px solid black;
			}
			.shadowCafe .shadowCafeBottom {
				position:absolute; right:0; height:100%; border-top:35px solid transparent; border-bottom:35px solid transparent;
				border-right:198px solid black;
			}
			.shadowCafe .shadowCafeToit {
				position:absolute; top:0; right:-20px; border-top:125px solid transparent; border-bottom:125px solid transparent;
				border-left:20px solid black;
			}
			
			.shadowCafe.sC1 {
				transform: translate3d(178px,0,-210px) skewY(-37deg) skewX(20deg); width: 375px;
			}
			
			.shadowCafe.sC2 {
				transform: translate3d(178px,0,-210px) skewY(-24deg) skewX(15deg); width: 410px;
			}

@media only screen and (max-width: 550px ) {
	#octagonBox {transform:scale3d(.6, .6, .6) translate(-10vw, 0vh)}
}