.verreBox {
			position:absolute; z-index:2; top:50%; left:50%; height:400px; width:400px; margin:-200px auto auto -200px; 
			transform:scale(.8) translate3d(100px, -121px, 0);
		
		}
		.verreBox.verreTop {transform:scale(.8) translate3d(100px, -198px, 0);}
		
		.verreBox.empty.verreTop {transform:scale(.75) translate3d(-15dvw, 0dvh, 0) rotateZ(30deg);}
		
		.verre {
			position:absolute; top:50%; left:50%; height:230px; width:200px; margin:-150px auto auto -100px;
			border-radius:100px 100px 100px 100px/33px 33px 100px 100px;
			background:radial-gradient(circle at bottom,#fff 0%, rgba(255,255,255,0) 30% );
			box-shadow:inset -55px -32px 16px rgba(5, 47, 68, 0.06),inset 56px -16px 14px rgba(251, 254, 255, 0.21);
			z-index:5;
		}
		
			.boreVerre {
				position:absolute; z-index:5; top:0; left:0; height:75px; width:200px; border-radius: 50% /* 275px 275px 280px 280px/ 100px 100px 100px 100px */;
				box-shadow:inset 2px 1px 1px 1px rgba(228, 228, 228, 0.2),inset -1px -1px 1px rgba(234, 234, 234, 0.35);
			}
		
		.water {
			position:absolute; bottom:0; left:0; height:150px; width:200px; margin:0;
			border-radius:100px 100px 100px 100px/45px 45px 100px 100px;
			/* background:rgba(224, 224, 244, 0.31); */
			box-shadow:inset -5px 0 13px rgba(199, 199, 199, 0.5),inset 19px 0 17px rgba(190, 190, 190, 0.14);
		}
			.waterbord {
				position:absolute; z-index:2; top:0; left:0; height:90px; width:200px; border-radius:130px 130px 130px 130px/ 55px 55px 60px 60px;
				/* box-shadow:inset 2px 2px 1px rgba(179, 176, 221, 0.24),inset -2px -2px 1px rgba(236, 236, 236, 0.4); */
				background:linear-gradient(-35deg,rgba(255,255,255,0) 60%,rgba(255, 255, 255, 0.42) 70%), radial-gradient(ellipse at 20%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.13) 50%);
			} 
		
	.refletVerre {
		position: absolute; z-index: 5; height: 116px; top: 68px; width: 55px;
		left: 15px; border-radius: 0 0 0 48%; transform: skewY(30deg);
		box-shadow: inset 15px -5px 5px -6px rgba(255, 255, 255, 0.32);
		transform-origin: 0 0;
	}		
	.refletVerre2 {
		position: absolute; z-index: 5; height: 136px; top: 66px; width: 55px; right: 5px; border-radius: 0 0 59% 41% / 0 0 39% 94%;
		transform: skew(0,-29deg); box-shadow: inset -30px -5px 5px -6px rgba(255, 255, 255, 0.32); transform-origin: center;
	}
	
	.piedVerre {
		position:absolute; z-index:4; height:66px; width:40px; top:265px; left:50%; margin:0 auto auto -20px;
		border-radius:200px 200px 200px 200px/90px 90px 100px 100px;
		background:linear-gradient(90deg, rgba(255, 255, 255, 0.43) 0%, transparent 30%, rgba(255, 255, 255, 0.32) 60%, rgba(255, 255, 255, 0.42) 80%, rgba(255, 255, 255, 0.12) 100%);
		box-shadow: inset -5px 0 4px rgba(156, 156, 156, 0.62), 0px 2px 3px -4px #000;
	}
		.piedVerreCone {
			position:absolute; z-index:2; height:50px; width:140px; top:40px; left:50%; margin:0 0 0 -70px; border-radius:60% 60% 70% 70%; 
			box-shadow:inset -10px -4px 3px 2px rgba(22, 21, 21, 0.16), inset 10px -7px 9px rgb(255, 255, 255);
		}
		
	.piedVerreSupport {
		position: absolute; z-index: 1; width: 180px; height: 85px; top: 37px; left: 50%; margin: 0 0 0 -90px;
		border-radius: 200px 200px 200px 200px/90px 90px 100px 100px;
		box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.3),inset -3px -6px 2px rgb(157, 157, 157),inset 3px -1px 0 rgba(233, 233, 233, 0.25);
		background:linear-gradient(135deg, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.11) 50%),linear-gradient(94deg, rgba(255,255,255,.1) 60%,rgba(255, 255, 255, 0.12) 75%),radial-gradient(ellipse at 90% 55px, rgb(255, 255, 255) 0% ,rgba(255,255,255, 0) 30%);
	}
		.verreSupportLight {
			position:absolute; height:67px; width:140px; top:0px; left:20px; border-radius:50%;
			background:linear-gradient(270deg,transparent 45%, rgba(255, 255, 255, 0.6) 100%);
			box-shadow: inset -20px -10px 10px rgba(109, 109, 109, 0.2);
		}
		
	.ombrePorte {
		position:absolute; top:50%; left:50%; width:600px; height:250px; margin:39px auto auto -210px;
		border-radius:354px 396px 340px 380px / 165px 175px 152px 163px; 
		box-shadow:inset 0px 0px 0px 0 rgba(255, 255, 255, 0.15);
		background:linear-gradient(140deg, rgba(255, 255, 255, 0.09) 30%, rgba(255,255,255,0) 50%);
	}
	
	.inOmbrePorte {
		position:absolute; z-index:1; top:25px; left:50px; width:500px; height:200px;
		border-radius:50% 50% 50% 50% /50% 50% 50% 50% ;
		box-shadow:inset 4px 1px 5px 0 rgba(255, 255, 255, 0.14);
		/* background:linear-gradient(140deg, rgba(255,255,255, .4) 20%, rgba(255,255,255,0) 30%); */
	}
	
	.inOmbrePorteVerre {
		position: absolute; height: 77px; width: 85px; left: 227px;
		top: 71px; border-radius: 0 70% 70% 0% / 0 50% 50% 0%; 
		box-shadow: inset -15px -6px 3px 0 rgba(0,0,0, .15);
	}
	
	.inOmbrePorteCup {
		position: absolute; height: 120px; width: 300px; left: 40px; top:-3px; 
		background:radial-gradient(ellipse at 32%,rgb(255, 255, 255) 0%,rgba(255,255,255, 0) 29%);
		border-radius:160px 70px 70px 160px / 60px 60px 60px 60px; transform: rotateZ(8deg) skewX(-37deg);
		transform-origin: left center; transform-style: preserve-3d;
		box-shadow:inset -38px -4px 16px 8px rgba(0, 0, 0, 0.16), inset 20px 0 8px rgba(0, 0, 0, 0.1);
		overflow:hidden;
	}
	
	.piedVerreHeightLight {
		position: absolute; z-index:4; height:10px; width:60px; top:52px; left:0; border-radius:50%; background:#fff; box-shadow:0 0 5px 5px rgb(255, 255, 255);
	}
	
		.piedVerreHeightLight span {
			position: absolute; top:5px; left:30px; height: 1px; width:150px; background:linear-gradient(90deg, #fff 0%, transparent 100%);
			transform-origin:25px 50%;
		}
		
		.piedVerreHeightLight span:nth-child(1) {transform:rotate(-25deg);}
		.piedVerreHeightLight span:nth-child(2) {transform:rotate(-20deg);}
		.piedVerreHeightLight span:nth-child(3) {transform:rotate(-15deg);}
		.piedVerreHeightLight span:nth-child(4) {transform:rotate(-10deg);}
		.piedVerreHeightLight span:nth-child(5) {transform:rotate(-5deg);}
		
		.piedVerreHeightLight span:nth-child(6) {transform:rotate(0deg);}
		
		.piedVerreHeightLight span:nth-child(7) {transform:rotate(5deg);}
		.piedVerreHeightLight span:nth-child(8) {transform:rotate(10deg);}
		.piedVerreHeightLight span:nth-child(9) {transform:rotate(15deg);}
		.piedVerreHeightLight span:nth-child(10) {transform:rotate(20deg);}
		.piedVerreHeightLight span:nth-child(11) {transform:rotate(25deg);}
	
	.insetShadow {
		position: absolute; z-index: 1; height: 300px; width: 300px; left: 50%; top: 50%; margin: -150px 0 0 -150px;
		background: radial-gradient(ellipse at left,rgba(0, 0, 0, 0.17) 40%, rgba(255, 255, 255, 0.05) 43%);
		border-radius: 50%;
	}
	
	
	
/* ====================================================================== */
/* ====================================================================== */

	
	
	.verreBox, .verre, .water, .waterbord, .piedVerre, .boreVerre, .refletVerre, .refletVerre2, .ombrePorte, .inOmbrePorteVerre, 
	.inOmbrePorteCup, .piedVerreHeightLight, .inOmbrePorte, .piedVerreSupport, .verreSupportLight, .ombreGoute { 
		transition:all .5s cubic-bezier(.01,.43,.24,.96);
	}
	
	.verre.verreTop  {
		height: 200px; border-radius: 50%;		
	}
		
		.verre.verreTop .boreVerre {border-radius: 50%; height: 200px;}
			.verre.verreTop .refletVerre .verreTop .verre .refletVerre2 {border-radius: 50%; height: 200px;}
			
		.verre.verreTop .water {height: 200px; border-radius: 50%;}
		
			.verre.verreTop .water .waterbord {
				border-radius:50%; width:180px; height:180px; top:10px; left:10px;
				background: linear-gradient(-35deg,rgba(255,255,255,0) 60%,rgba(255, 255, 255, 0.42) 70%), 
							radial-gradient(ellipse at 20%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.13) 50%);
				box-shadow: inset -3px 0 10px 0 rgba(255,255,255,.5);			
			}
			
			.verre.verreTop .refletVerre, .verre.verreTop .refletVerre2 {height:0;}
		
	.piedVerre.verreTop {
		top:130px; width:40px; height:40px;  border-radius:50%;
	}
	
	
		.piedVerre.verreTop  .piedVerreSupport {
			border-radius: 50%; height: 200px; width: 200px; margin:-115px 0 0 -100px;
		}
		
		.piedVerre.verreTop  .piedVerreSupport .verreSupportLight {
			height: 140px; top: 30px; left: 30px;
	}
	
	.ombrePorte.verreTop {
		height:600px; width:600px; top: 12px; left: 0; margin:-150px auto auto 0px;
		transform: rotateZ(0deg) skewX(0deg); border-radius: 50%; 
	}
	
		.ombrePorte.empty.verreTop {transform:scale(.8);}
	
		.ombrePorte.verreTop .inOmbrePorte {
			top:50px; height:500px;
		}
		
		.ombrePorte.verreTop .inOmbrePorteVerre {
			transform:rotateZ(0deg) skewX(0deg); height: 200px; top:192px; left:112px; width: 200px; border-radius: 50%;
		}
		
		.ombrePorte.verreTop .inOmbrePorteVerre .inOmbrePorteCup {
			transform: rotateZ(0deg) skewX(0deg); height:200px; top:0; left: 145px; border-radius: 160px 100px 100px 160px / 90px 100px 100px 90px;
		}
		
		.ombrePorte.verreTop .inOmbrePorteVerre .inOmbrePorteCup .piedVerreHeightLight {
			top: 95px; 
		}
	
	
/* ====================================================================== */
/* ====================================================================== */


	
	.cup, .inCup,.inCup, .laHanse, .cupSupport, .cupSupportOmbre, .laSousTasse, .cupOmbre, .caffe, .tasseLaSousTasse {
		transition:all 500ms cubic-bezier(.01,.43,.24,.96); 
	}
	
	.tasseBloc {
		position:absolute; z-index:5; top:50%; left:50%; height:500px; width:500px; margin:-250px auto auto -250px;
		transform:scale(.8) translate(-85px,50px);
	}
	
		.tasseBloc.empty {
			transform:scale(.7) rotateZ(25deg) translate3d(-42dvw,-12dvh,0dvw);
		}

	.cup {
		position:absolute; z-index:6; left:50%; top:50%; margin:-88px auto auto -100px; height:220px; width:200px; 
		border-radius:100px 100px 50% 50%/ 50px 50px 100px 100px ; 
		background:linear-gradient(-30deg, rgb(161, 161, 161) 0%, rgb(255, 255, 255) 60%); overflow:hidden; transform-style: translate3d(0,-20px,0);
	}
		.topView .cup{
			height:200px; margin:-100px auto auto -100px; border-radius:50%; transform: translate3d(0,0,0);
		}
	
		.inCup {
			position:absolute; top:3px; box-shadow:inset 0 0 5px #fff; left:5px; width:190px; height:100px; 
			border-radius:50%; background:radial-gradient(ellipse at bottom, rgba(122,122,122,0.65) 0%,rgba(0,0,0,0) 100%); overflow:hidden;
		}
			.topView .inCup {
				height:100px; top:5px; height:190px; 
			}
		
		.caffe {
			position:absolute; z-index:1; width:160px; height:60px; left:15px; bottom:-12px; 
			background:linear-gradient(90deg, rgb(41, 26, 0) 50%, rgb(95, 60, 0) 100%); border:5px solid rgb(41, 26, 0); border-radius:50%;
			transform-style:preserve-3d; 
		}
			.topView .caffe {
				height:160px; bottom:15px;
			}
			
		.caffeVide {
			position:absolute; z-index:1; border-radius:50%; transform-style:preserve-3d;
			border:none; height:186px; width:186px; top:0; left:0;
			background:radial-gradient(circle at 50% 50%, rgba(255,255,255, .15) 35%, transparent 40% ),radial-gradient(circle at 0 35%, #414141c7 30%, rgb(255,255,255) 100%);
		}

	.laHanse {
		position:absolute; z-index:5; height:80px; width:100px; border:10px solid rgb(234, 234, 234); 
		left:50%; top:50%; border-radius:50%; margin: -35px auto auto 39px; 
		box-shadow:inset -5px -9px 0px rgb(244, 243, 243),-1px -9px 0 rgb(233, 233, 233); 
		transform-origin: center;  transform: rotate(-50deg) rotateZ(0deg); 
		transform-style:translate3d(0,-20px,0);
	}
		.topView .laHanse {
			transform: rotate(-50deg) rotateZ(32deg); height: 16px; 
			box-shadow: inset -5px -9px 0px rgb(244, 243, 243),0px 0px 0 rgb(233, 233, 233); 
			
		}

	.cupSupport {
		position:absolute; z-index:4; left:50%; top:50%; width:100px; height:50px; 
		background:linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(132, 132, 132) 100%); 
		margin:85px auto auto -50px; border-radius:0 0 50% 50%; 
		transform-style:translate3d(0,-20px,0);
	}
		.topView .cupSupport{
			height:100px; margin:-50px auto auto -50px; transform: translate3d(0,0,0);
		}
	
	.cupSupportOmbre {
		position:absolute; z-index:3; left:50%; top:50%; width:100px; height:45px; 
		margin:92px auto auto -48px; border-radius:50%; background:rgb(130, 129, 129); filter:blur(2px);
	}
		.topView .cupSupportOmbre {
			height:100px; margin:-50px auto auto -50px;
		}

	.laSousTasse {
		position:absolute; z-index:2; width:400px; height:200px; left:50%; top:50%; margin:0px auto auto -200px; overflow:hidden; 
		background:linear-gradient(135deg, rgb(212, 212, 212) 0%, rgb(239, 239, 239) 100%); border-radius:90% 90% 100% 100%/100% 100% 110% 110%; box-shadow:17px 30px 10px -10px rgba(74, 74, 74, 0.63) ,inset 3px 0 2px rgb(234, 234, 234),inset -3px 0 2px #fff;
		transform-style:translate3d(0,-20px,0);
	}
		.topView .laSousTasse {
			height:400px; margin:-200px auto auto -200px; border-radius:50%; transform: translate3d(0,0,0);
		}
		
		.tasseLaSousTasse {
			position:absolute; z-index:1; height:130px; width:200px; top:50%; left:50%;
			margin:67px auto auto 30px; transform: rotate(0deg);
			border-radius:50%; background:rgba(0, 0, 0, 0.22); filter:blur(4px) 
		}
		
		.tasseLaSousTasse.topView {
				margin:-75px auto auto 125px; width:100px; height:200px; transform: rotate(5deg);
			}
	
	.cupOmbre {
		position:absolute;left:50%; top:50px; border-right: 210px solid rgba(165, 165, 165, 0.58); border-bottom: 60px solid transparent; border-top: 20px solid transparent; border-left:0; height:145px; width: 0px; filter:blur(5px);
	}
		.topView .cupOmbre {
			top:120px; border-top: 10px solid transparent; border-bottom: 68px solid transparent; height: 230px;
		}
		
	/* ============================================= */

	/* ============================================= */
		/* smoke  */
	/* ============================================= */


	.smoke {
		position: absolute;  z-index:10;
		width:2px; height:2px; top:50%; left:50%; margin:20px 0 0 -35px;
		transform-style:preserve-3d; transform-origin:center; transform:rotate(45deg);
		filter:blur(1px);
	}

	/* ============================================= */
		/* smoke balls */
	/* ============================================= */

	.smoke .inSmoke { 
		position: absolute;
		bottom: 0; left: 50%; 
		margin-left:-20px;
		height: 70px; width: 70px;
		border-radius: 50%;
		opacity: 0;
		transform: scale(0.1) ;
		background:	linear-gradient(90deg, transparent 50% , rgba(255,255,255, .7) 100% );
		transform-style:preserve-3d;
		
		
	}


    /* ////////////////////////////////////////////////////////// */
    
    
    #colorBack.back_so_06 {background:rgb(154, 161, 148);}

    #colorBack.back_so_06 .colorBackIn {opacity: .7; transform: scale(4) translate(-5%,-10%);}


	/* Smoke animation */

	@keyframes smokeL {
		0%   { opacity: 0; transform: scaleX(0) scaleY(0) translate(0, 0) rotate(0deg); }
		10%  { opacity: 1; transform: scaleX(0.1) scaleY(0) translate(0, -5px) rotate(20deg); }
		100% { opacity: 0; transform: scaleX(0.5) scaleY(1) translate(-20px, -100px) rotate(180deg); }
	}

	@keyframes smokeR {
		0%   { opacity: 0; transform: scaleX(0) scaleY(0) translate(0, 0) rotate(0deg);}
		10%  { opacity: 1; transform: scaleX(0.1) scaleY(0) translate(0, -5px) rotate(-20deg);}
		100% { opacity: 0; transform: scaleX(0.5) scaleY(1) translate(20px, -100px) rotate(-180deg);}
	}

	.smoke .s0 { animation: smokeL 10s 0s infinite; box-shadow:5px 5px 2px rgba(255,255,255, .5); }
	.smoke .s1 { animation: smokeR 10s 1s infinite; box-shadow:-5px -5px 2px rgba(255,255,255, .5); }
	.smoke .s2 { animation: smokeL 10s 2s infinite; box-shadow:5px 5px 2px rgba(255,255,255, .5); }
	.smoke .s3 { animation: smokeR 10s 3s infinite; box-shadow:-5px -5px 2px rgba(255,255,255, .5); }
	.smoke .s4 { animation: smokeL 10s 4s infinite; box-shadow:5px 5px 2px rgba(255,255,255, .5); }
	.smoke .s5 { animation: smokeR 10s 5s infinite; box-shadow:-5px -5px 2px rgba(255,255,255, .5); }
	.smoke .s6 { animation: smokeL 10s 6s infinite; box-shadow:-5px -5px 2px rgba(255,255,255, .5); }
	.smoke .s7 { animation: smokeR 10s 7s infinite; box-shadow:5px -5px 2px rgba(255,255,255, .5); }
	.smoke .s8 { animation: smokeL 10s 8s infinite; box-shadow:-5px 5px 2px rgba(255,255,255, .5); }
	.smoke .s9 { animation: smokeR 10s 9s infinite; box-shadow:5px -5px 2px rgba(255,255,255, .5); }