@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
@import url('https://fonts.googleapis.com/css?family=Aladin');




.top_timer {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.esp_timer {
	height:125px;
	width:540px;
	top:10px;	

    margin-left: 80px;
    margin-top: 30px;
}
#timer {
	position: relative;
	width: 100%;
	height:100%;
	margin-top:0px;
	text-align: center;
	float: left;
	font-family: 'Audiowide', cursive;
	font-size: 40px;


}
.XYcenter, .full_center, .fond, div[class^="triangle"], .button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.fond_mur {
		background-image:url('../inc/animations/img/fd.png');
}
.esp_ecran {
	

    height: 250px;
    width: 450px;
    top: 0px;
    margin-left: 100px;
    margin-top: 40px;  
}
.top_ecran {
    box-shadow: inset 0 0px 0px 0px RGB(87, 42, 5,1), inset 0 0px 10px 0px RGB(7,3,1,1);
    background-color: rgb(0,0,0,1);
    border: 4px solid RGB(38, 38, 38,1);    
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius:10px;
}
.esp_ecran .effet_vitre_carre {
   width: 85%;
    height: 85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 20px;

}
.esp_ecran .text {
	font-family: 'Share Tech Mono', monospace;
	 position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:70%;   
    color: #4fd237;
    font-size: 26px;    
}

/*-------------------------------------------------------------------------------------------
								BOUTONS
----------------------------------------------------------------------------------------------*/
.bouton, .bouton div, .bouton div:before  {
	position:absolute;
}


.ext_vieux_bouton {
	width:100%;
	height:100%;

}
.ext_vieux_bouton:before {
	left:50%; 
	top:50%; 
	transform: translate(-50%,-50%); 
	width:120%;
	height:120%;
	border-radius:50%;
}



.rad4:before {
	border-radius:4px;
}
.sigle_bt .ext_vieux_bouton::before {
    width: 140%;
    height: 140%;

}
.sigle_bt .pt_bouton::before {
    width: 120%;
    height: 120%;

}



.vieux_bouton:before {
	left:50%; 
	top:50%; 
	transform: translate(-50%,-50%); 
	width:90%;
	height:90%;
	border-radius:50%;
}

.int_vieux_bouton {
	width:20%;
	height:90%;
	border-radius:4px;
}
.int_vieux_bouton:before {
	left:50%; 
	top:50%; 
	transform: translate(-50%,-50%); 
	width:90%;
	height:90%;
	border-radius:4px;
}
.marq_vieux_bouton {
	top:5%;
	width:30%;
	height:20%;
	border-radius:1px;
}
.marq_vieux_bouton:before {
	left:50%; 
	top:50%; 
	transform: translate(-50%,-50%); 
	width:90%;
	height:90%;
	border-radius:1px;
}
.repaire_vieux_bouton {
	top:-25%;
	width:10%;
	height:10%;

}
.bt_carre, .bt_carre .esp, .bt_carre div:before{
	border-radius:4px;

}

/*-------------------------------------------------------------------------------------------
								TOP
----------------------------------------------------------------------------------------------*/
.top_page {
	position: absolute;
	width:1000px;
	height:120px;
	top:360px;
	
}
.esp_button {
	position:absolute;
    width:70px;
    height:70px;

}

.esp_button:nth-child(1) {
	left:10px;

}
.esp_button:nth-child(2) {
	right:10px;

}
/*-------------------------------------------------------------------------------------------
								ANIMATIONS
----------------------------------------------------------------------------------------------*/
@keyframes ani_logo_eyes{ 
	0%   { margin-left:0; margin-top:0; }
	30%   { margin-left:2px; margin-top:1px; }
	40% { opacity:1; }
  	41% { opacity:0; }
  	42% { opacity:1; }

  	50% { margin-left:0; margin-top:0; }
  	60% { opacity:1; }
  	61% { opacity:0; }
  	62% { opacity:1; }
  	70%   { margin-left:-2px; margin-top:2px;}
  	100% { margin-left:0; margin-top:0; }
}


/*-------------------------------------------------------------------------------------------
								TEXT
----------------------------------------------------------------------------------------------*/
.esp_trans_text {
    position: absolute;
    	display:inline-block;
    top: 80%;
    font-size: 60px;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    left:50%;
    transform:translatey(-50%);
    }



.buzz
{
	display:inline-block;
	position:absolute;
	color:inherit;
	text-decoration:none;
	transition:all 250ms ease;
	transform:translatez(0) translatex(-50%);
	perspective:50px;
	text-align:center;
}

.buzz:before,
.buzz:after
{
	content:attr( data-buzz );
	position:absolute;
	z-index:-1;
	opacity:0.3;
	transition:all 150ms ease;
}

.buzz:before
{
	color:#00d5ff;
	top:2px; left:2px;
}

.buzz:after
{
	color:#ffaa00;
	bottom:2px; right:2px;
}

.buzz:hover:before
{
	transform: rotatex(-0.5deg) rotatey(0.5deg) scale(1.01);
}

.buzz:hover:after
{
	transform: rotatey(-0.8deg) rotatex(0.8deg) scale(1.02);
}




.buzz:hover:before
{
	transform:rotatex(-15deg) rotatey(5deg) scale(1.25);
}

.buzz:hover:after
{
	transform:rotatey(-5deg) rotatex(15deg) scale(1.25);
}


.esp_trans_text{
	position: absolute;
	top:80%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	opacity:1;
	
}
.esp_trans_text h1{
	font-size: 60px;
	color: #DBDBDB;
	text-align: center;
	margin-top: 0;
	text-transform: uppercase;
	font-weight: 900;
}
.esp_trans_text .glitch-window{
	position: absolute;
	top: 0;
	left: -2px;
	width: 100%;
	color: #111;
	text-shadow: 0 0px  #383838, 3px 0 rgb(255, 204, 0,0.2), -3px 0 rgb(102, 255, 51, 0.2);
	overflow: hidden;
	animation: crt-me 1s infinite linear alternate-reverse;
	// background: red;
}
.esp_trans_text .glitch-window h1{
	color: #DBDBDB;
}

@keyframes crt-me {
	 0% {
        clip: rect(15px, 9999px, 67px, 0)
    }
    10% {
        clip: rect(56px, 9999px, 38px, 0)
    }
    20% {
        clip: rect(42px, 9999px, 38px, 0)
    }
    30% {
        clip: rect(13px, 9999px, 48px, 0)
    }
    40% {
        clip: rect(32px, 9999px, 49px, 0)
    }
    50% {
        clip: rect(30px, 9999px, 42px, 0)
    }
    60% {
        clip: rect(50px, 9999px, 57px, 0)
    }
    70% {
        clip: rect(17px, 9999px, 58px, 0)
    }
    80% {
        clip: rect(49px, 9999px, 64px, 0)
    }
    90% {
        clip: rect(21px, 9999px, 48px, 0)
    }
    100% {
        clip: rect(41px, 9999px, 32px, 0)
    }
    
}

div[class^="gear"]::before {
	content:"";
    position:absolute;
    top:0;
    	left: 50%;
	transform: translateX(-50%);

    border-radius:50%;
    background-image:
    radial-gradient(at center center, #222 20%, #000 25%,#f17341 27%, #8b2f0a  28%, #6f2608 57%, transparent 59%),
    linear-gradient(0deg, transparent 40%, #6f2608 40%, #6f2608 60%, transparent 60%),
    linear-gradient(45deg, transparent 43%, #6f2608 43%, #6f2608 57%, transparent 57%),
    linear-gradient(90deg, transparent 40%, #6f2608 40%, #6f2608 60%, transparent 60%),
    linear-gradient(135deg, transparent 43%, #6f2608 41%, #6f2608 57%, transparent 57%);
   }
div[class^="gear"]::after{
content:"";
    position:absolute;
     top:-1px;
     left:-1px;
    border-radius:50%;
    background-image:
    radial-gradient(at center center, #000 23%, #000 25%, #5e2007 56%, transparent 57%),
    linear-gradient(0deg, transparent 40%, #5e2007 38%, #000 62%, transparent 62%),
    linear-gradient(45deg, transparent 43%, #5e2007 41%, #000 59%, transparent 59%),
    linear-gradient(90deg, transparent 40%, #5e2007 38%, #000 62%, transparent 62%),
    linear-gradient(135deg, transparent 43%, #5e2007 43%, #000 59%, transparent 59%);
z-index:-1;

   }

/*Keyframes*/
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes rotate {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate2 {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate2 {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@keyframes rotate2 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes rotates{
    form{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
@-moz-keyframes rotates{
    form{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-webkit-keyframes rotates{
    form{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-o-keyframes rotates{
    form{-o-transform:rotate(0deg);}
    to{-o-transform:rotate(360deg);}
}

@keyframes rotateb{
    form{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
}
@-moz-keyframes rotateb{
    form{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(-360deg);}
}
@-webkit-keyframes rotateb{
    form{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(-360deg);}
}
@-o-keyframes rotateb{
    form{-o-transform:rotate(0deg);}
    to{-o-transform:rotate(-360deg);}
}

/*-------------------------------------------------------------------------*/
/*						VIS
/*-------------------------------------------------------------------------*/

.vis{
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;

}
.vis::after, .vis::before {
    width: 4px;

}

.top .vis:nth-child(1)  {
	top:0;
	left:0;
}

.top .vis:nth-child(2) {
 	top:0;
	right:0;
}
.top .vis:nth-child(3){
	bottom:0;
	left:0;

}
.top .vis:nth-child(4) {
 	bottom:0;
	right:0;
}

.vis_M{
    width: 22px;
    height: 22px;
}
.vis_M::after, .vis_M::before {
    width: 4px;

}
.vis_S{
    position: absolute;
    width: 10px;
    height: 10px;
}
.vis_S::after, .vis_S::before{
    width: 2px;

}
.vis_XS{
    position: absolute;
    width: 6px;
    height: 6px;
}
.vis_XS::after, .vis_XS::before{
    width: 2px;
    

}

.vis_XXS{
    position: absolute;
    width: 3px;
    height: 3px;
}
.vis_XXS::after, .vis_XXS::before{
    width: 3px;

}

.rond {
	border-radius:50%;
}
.plat::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

    height: 100%;
        transform : rotate(45deg);

}

.cruciform::before, .cruciform::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

    height: 60%;
}
.vis_S::after, .vis_S::before{
        height: 80%;

}
.vis_XS::after, .vis_XS::before{
        height: 90%;

}

.cruciform::before {
    transform : rotate(45deg);
}


.cruciform::after {
    transform : rotate(-45deg);
}
#page_ {
  background:
linear-gradient(163deg, transparent 0px, transparent 11px, #222 11px, #222 114px, transparent 114px),
    linear-gradient(161deg, transparent 0px, #181818 11px, #222 2px, #222 115px, transparent 115px),
    linear-gradient(343deg, transparent 0px, transparent 11px, #222 1px, #222 114px, transparent 114px),
    linear-gradient(343deg, transparent 0px, transparent 11px, #222 1px, #222 114px, transparent 114px);
  background-color: #121212;
  background-position: 2px 1px, 23px 16px,48px 15px, 21px 30px;
  background-size: 48px 30px;
}

/*-------------------------------------------------------------------------*/
/*						CRANS
/*-------------------------------------------------------------------------*/


.crans  {

    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin-left: -50%;
    margin-top: -50%;
    z-index: -1;
    border-radius: 50%;

}



div.crans > div {
            height: 96%;
            position: absolute;
            display: block;
            border-width: 20px 0;
            width: 10px;

            left: 50%;
            top: 50%;
            transform:  translate(-50%, -50%) rotate(0deg);



        }
 div.crans:first-child > div {
			
            height: 95%;
            position: absolute;
            display: block;
            border-width: 53px 0;
            width: 20px;

        }

/*-------------------------------------------------------------------------*/
/*						ENGRENAGES
/*-------------------------------------------------------------------------*/
.esp-engrenage, .esp-engrenage *, .esp_page_engrenages *{
	position: absolute;
}

.base-engrenage {
	width:100%; height:100%;	border-radius:50%;

}

.eng100 {
	width:100px;
	height:100px;
	position: absolute;
}



.eng70 {
	width:70px;
	height:70px;

}
.eng50 {
	width:50px;
	height:50px;
	position: absolute;
}
 

.eng40 {
	width:40px;
	height:40px;
	position: absolute;
}

.esp_engrenages .eng50  .rotation_on {

    animation: rotates 3.7s infinite linear;

}
.esp_engrenages .eng40  .rotation_on {

    animation: rotateb 3.7s infinite linear;

}

.esp_engrenages .eng1 {
	top:22px;
	left:22px;
}
.esp_engrenages .eng2 {
	top:22px;
	right:22px;
}
.esp_engrenages .eng3 {
	bottom:22px;
	left:22px;
}
.esp_engrenages .eng4 {
	bottom:22px;
	right:22px;
}

.esp_engrenages .eng5 {
	top:-10px;
	left:-10px;
}
.esp_engrenages .eng6{
	top:-10px;
	right:-10px;
}
.esp_engrenages .eng7 {
	bottom:-10px;
	left:-10px;
}
.esp_engrenages .eng8 {
	bottom:-10px;
	right:-10px;
}

.engrenage  {

    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin-left: -50%;
    margin-top: -50%;
    z-index: 0;
    border-radius: 50%;

}

.base-engrenage {
	border-radius:50%;
}
        

        
.pg_enigme .eng1 .animation, .eng_rotation1{
    
    animation:rotates 3.7s infinite linear;
}

.pg_enigme .eng2 .animation, .eng_rotation2 {
animation:rotateb 3.7s infinite linear;}
   




.pg_enigme .eng3 .animation {

animation:rotates 3.7s infinite linear;
   }
   

/*Keyframes*/
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

@keyframes rotateb{
    form{transform:rotate(0deg);}
    to{transform:rotate(-360deg);}
}
div[class^="esp_eng_page"] {
	position:absolute;
	width:100%;
	top:90px;

}
.esp_page_engrenages .eng1 {
    top: 0px;
    margin-left: -470px;

transform: translateX(-50px) rotate(-6deg);
}

.esp_page_engrenages .eng2 {
    top: 10px;
    margin-left: -355px;
    transform: translateX(-50%) rotate(24deg);


}
.esp_page_engrenages .eng3 {
    top: 20px;
    margin-left: -575px;
transform: translateX(-50%) rotate(-11deg);

}
.esp_page_engrenages .eng4 {
    top: 0px;
    margin-left: 470px;

transform: translateX(-50px) rotate(6deg);
}

.esp_page_engrenages .eng5 {
    top: 10px;
    margin-left: 355px;
transform: translateX(-50%) rotate(-24deg);
}
.esp_page_engrenages .eng6 {
    top: 20px;
    margin-left: 575px;
transform: translateX(-50%) rotate(11deg);

}
div.esp_eng_page2 {
	top:860px;
}

.esp_eng_page2 .eng1 {
    top: 8px;
    margin-left: -470px;

transform: translateX(-50px) rotate(6deg);
}

.esp_eng_page2 .eng2 {
    top: 30px;
    margin-left: -355px;
    transform: translateX(-50%) rotate(-24deg);


}
.esp_eng_page2 .eng3 {
    top: 40px;
    margin-left: -575px;
transform: translateX(-50%) rotate(11deg);

}
.esp_eng_page2 .eng4 {
    top: 8px;
    margin-left: 470px;

transform: translateX(-50px) rotate(-6deg);
}

.esp_eng_page2 .eng5 {
    top: 30px;
    margin-left: 355px;
transform: translateX(-50%) rotate(24deg);
}
.esp_eng_page2 .eng6 {
    top: 40px;
    margin-left: 575px;
transform: translateX(-50%) rotate(-11deg);

}

.esp_page_engrenages .eng1 .anim_continu, .esp_page_engrenages .eng3 .anim_continu, .esp_page_engrenages .eng4 .anim_continu, .esp_page_engrenages .eng6 .anim_continu{
	animation-name: rot_eng_page ;
    animation-duration: 20s;
    animation-fill-mode: linear;
    animation-iteration-count: infinite;
    animation-delay:0s;

}


.esp_page_engrenages .eng2 .anim_continu, .esp_page_engrenages .eng5 .anim_continu {
	animation-name: rot_eng_page2 ;
	 animation-duration: 20s;
    animation-fill-mode: linear;
    animation-iteration-count: infinite;
    animation-delay:0s;


}
@-webkit-keyframes rot_eng_page {
    0% {
        transform:rotate(-14deg);
    }
    10% {
        transform:rotate(14deg);
    }
    20% {
        transform:rotate(-14deg);
    }
    60% {
        transform:rotate(14deg);
    }
    70% {
        transform:rotate(-14deg);
    }
    90% {
        transform:rotate(14deg);
    }
    100% {
        transform:rotate(-14deg);
    }
}
@-webkit-keyframes rot_eng_page2 {
   0% {
        transform:rotate(14deg);
    }
    10% {
        transform:rotate(-14deg);
    }
    20% {
        transform:rotate(14deg);
    }
    60% {
        transform:rotate(-14deg);
    }
    70% {
        transform:rotate(14deg);
    }
    90% {
        transform:rotate(-14deg);
    }
    100% {
        transform:rotate(14deg);
    }
}

.eng1 .ani_page_suivante, .eng3 .ani_page_suivante,.eng4 .ani_page_suivante, .eng6 .ani_page_suivante {
	animation-name: rot_eng_page_droite ;
    animation-duration: 2.5s;
    animation-fill-mode: linear;
    animation-iteration-count: 1;
    animation-delay:0s;

}


.eng2 .ani_page_suivante, .eng5 .ani_page_suivante {
	animation-name: rot_eng_page_gauche ;
    animation-duration: 2.5s;
    animation-fill-mode: linear;
    animation-iteration-count: 1;
    animation-delay:0s;

}

.eng1 .ani_page_precedente , .eng3 .ani_page_precedente ,.eng4 .ani_page_precedente , .eng6 .ani_page_precedente {
	animation-name: rot_eng_page_droite  ;
    animation-duration: 2.5s;
    animation-fill-mode: linear;
    animation-iteration-count: 1;
    animation-delay:0s;

}


.eng2 .ani_page_precedente , .eng5 .ani_page_precedente {
	animation-name: rot_eng_page_gauche  ;
    animation-duration: 2.5s;
    animation-fill-mode: linear;
    animation-iteration-count: 1;
    animation-delay:0s;

}

@-webkit-keyframes rot_eng_page_droite {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(1080deg);
    }
}
@-webkit-keyframes rot_eng_page_gauche {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-1080deg);
    }
}
.alarm_light {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-30%, -60%);
          width: 200%;
    height: 200%;
     opacity:0.4;      
     border-radius: 100%;
          filter: blur(400px);
      animation: 3s flash infinite;
    }
@keyframes flash {
  0% {
    opacity:0.4;  }
  30% {
     opacity:1;  }
  35% {
     opacity:0.4;   
  }
  65% {
     opacity:0.4;   
  }
  70% {
     opacity:1;  
     }
  100% {
     opacity:0.4;  
     }
}

/*-------------------------------------------------------------------------*/
/*						CABLES
/*-------------------------------------------------------------------------*/
.stru_tige_fine {
position:absolute;
	width:10px;
}

.esp_cable, .esp_support_cable {
	position:absolute;
	width:200px;
	height:140px;	
}

.esp_cable *{
	position:absolute;	
}

.esp_cable .attache {
	bottom:0;	
}


.esp_cable  .centre_torsade {
	width:25px;
	height:100%;
	content: '';
	margin-left:-2px;
	bottom:0px;
}
.esp_cable  .centre_torsade {
	width:25px;
	height:110%;
	content: '';
	margin-left:-2px;
	bottom:0px;
}



.attache_socle {
	bottom:0;	
	width:60px;
	height:25px;
	border-radius:10px 10px 0% 0%;

}

.esp_cable .fil {
	width:100%;
	left:50%;
	
}
 .esp_cable .fil:before{
	left:50%;
	border-radius:50%;
	transform: translateX(-50%);
}


.esp_cable_S .fil_torsade_up, .esp_cable_S .fil_torsade_bottom, .esp_cable_S .fil_torsade_support{
	width:100%;
	height:44px ;		
}

.esp_cable_S .fil_torsade_up{
	transform: translateX(-50%) rotate(-22.5deg);
	margin-bottom:-27px;
}

.esp_cable_S .fil_torsade_bottom {
	
	transform: translateX(-50%) rotate(22.5deg);

}
.esp_cable_S .fil_torsade_up:before, .esp_cable_S .fil_torsade_bottom:before{
	width:30px;
	height:20px ;
	margin-left:7px;
	

}
.esp_cable_S .fil_torsade_up:before{
	top:-14px;margin-left:8px;
}


.esp_cable_S .fil_torsade_bottom:before{
	bottom:-10px;margin-left:7px;
}

.esp_cable_S .fil_torsade_support{
	transform: translateX(-50%);
	bottom:24px;
}
.esp_cable_S .fil_torsade_support:before{
	width:16px;
	height:16px ;
	margin-right:7px;
	
}
.esp_cable_S .fil_torsade_support:before{
	bottom:-14px;margin-left:-18px;
}
.esp_cable_S .sup_fil {
    width:20px;
    height: 6px;
    border-radius: 0  30px 30px 0;
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top:-15px;
    margin-left:-30px;
    transform: translate(-50%, -50%) rotate(90deg);
}

div.esp_cable_S .attache_fil {
    width: 6px;
    height: 6px;
    left: 50%;
    top: 100%;
    margin-top:-10px;
    margin-left:-30px;
    transform: translate(-50%, -50%) rotate(90deg);
}


.esp_cable_M .fil_torsade_up, .esp_cable_M .fil_torsade_bottom, .esp_cable_M .fil_torsade_support{
	width:100%;
	height:44px ;		
}

.esp_cable_M .fil_torsade_up{
	transform: translateX(-50%) rotate(-22.5deg);
	margin-bottom:-27px;
}

.esp_cable_M .fil_torsade_bottom {
	
	transform: translateX(-50%) rotate(22.5deg);

}
.esp_cable_M .fil_torsade_up:before, .esp_cable_M .fil_torsade_bottom:before{
	width:30px;
	height:20px ;
	margin-left:7px;
	

}
.esp_cable_M .fil_torsade_up:before{
	top:-14px;margin-left:8px;
}


.esp_cable_M .fil_torsade_bottom:before{
	bottom:-10px;margin-left:7px;
}

.esp_cable_M .fil_torsade_support{
	transform: translateX(-50%);
	bottom:24px;
}
.esp_cable_M .fil_torsade_support:before{
	width:16px;
	height:16px ;
	margin-right:7px;
	
}
.esp_cable_M .fil_torsade_support:before{
	bottom:-14px;margin-left:-18px;
}
.esp_cable_M .sup_tige {
    width: 20px;
}
.esp_cable_M .sup_fil {
    width:20px;
    height: 10px;
    border-radius: 0  30px 30px 0;
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top:-15px;
    margin-left:-30px;
    transform: translate(-50%, -50%) rotate(90deg);
}

div.esp_cable_M .attache_fil {
    width: 6px;
    height: 6px;
    left: 50%;
    top: 100%;
    margin-top:-10px;
    margin-left:-30px;
    transform: translate(-50%, -50%) rotate(90deg);
}


div.esp_cable_L {
	height:100%;
	margin-left:-6px;
}

div.esp_cable_L .centre_torsade {
	width:42px;
	margin-left:-6px;
}


div.esp_cable_L .attache_socle{
	bottom:0;	
	width:90px;
	height:20px;
	border-radius:10px 10px 0% 0%;

}

div.esp_cable_L .fil_torsade_up, div.esp_cable_L .fil_torsade_bottom{
	width:100%;
	height:44px ;		
	left:50%;
}

div.esp_cable_L .fil_torsade_up{
	transform: translateX(-50%) rotate(-22.5deg);

}

div.esp_cable_L .fil_torsade_bottom {
	margin-bottom:14px;
	transform: translateX(-50%) rotate(22.5deg);

}
div.esp_cable_L .fil_torsade_up:before, div.esp_cable_L .fil_torsade_bottom:before{
	width:50px;
	height:40px;


	

}
div.esp_cable_L .fil_torsade_up:before{
	top:-24px;
}


div.esp_cable_L .fil_torsade_bottom:before{
	bottom:-24px;
}


/*-------------------------------------------------------------------------*/
/*						FILS
/*-------------------------------------------------------------------------*/


 .fil  {

    position: absolute;
overflow:hidden;
}

.fil:before {
	content:'';
    position: absolute;
}


.esp_angle_pt_fil {

    position: absolute;
    width: 200px;
    height: 150px;
}



.esp_angle_pt_fil .fil_depart {
	position:absolute;
	width:30px;
	height:156px;
	 
}
.esp_angle_pt_fil .fil_depart:before {
	
	width:60px;
	height:70px;
	border-radius:0 10px 30px 0;
	bottom:-12px;
	right:12px;

}

.esp_angle_pt_fil .fil_torsade_up{
	width:17px;
	height:44px ;
	bottom:0px;
	right:17px;	

}
.esp_angle_pt_fil .fil_torsade_up:before{
	position:absolute;
	width:10px;
	height:12px ;
	border-radius:50%;
	top:12px;
	right:-6px;
}

.esp_angle_pt_fil .fil_torsade_bottom {
	width:17px;
	height:44px ;
	bottom:0px;
	right:0px;	

}


.esp_angle_pt_fil .fil_torsade_bottom:before{
	position:absolute;
	width:10px ;
	height:12px ;
	border-radius:50%;
	top:12px;
	left:-5px;

}


.esp_angle_pt_fil .fil_pont {
	width:54px;
	height:17px ;
	bottom:32px;
	right:-8px;	

}
.esp_angle_pt_fil .fil_pont:before{
	position:absolute;
	width:20px;
	height:10px ;
	border-radius:500%;
	top:14px;
	left:12px;
}
.esp_angle_pt_fil .fil_fin {
	width:110px;
	height:24px ;
	bottom:12px;
	

}

.esp_angle_pt_fil .fil_fin:before{
	position:absolute;
	width:40px;
	height:28px ;
	border-radius:50%;
	bottom:12px;
	right:12px;
}

.esp_angle_pt_fil .fil_torsade {
	width:60px;
	height:60px;
	position:absolute;	
	bottom:4px;
}
.esp_angle_pt_fil .fil_depart{
	bottom:40px;
	right:0px;
}

.esp_angle_pt_fil .fil_torsade1 {

	right:0px;
}
.esp_angle_pt_fil .fil_torsade2 {
	right:20px;
}
.esp_angle_pt_fil .fil_fin{
		right:52px;
}






.esp_angle_moyen_fil {

    position: absolute;
    width: 200px;
    height:200px;
}

.esp_angle_moyen_fil .rallonge_depart {
	position:absolute;
	width:200px;
	height:20px;
	right:0;
	bottom:170px;
	 
}
.esp_angle_moyen_fil .rallonge_depart:before {
	
	width:200px;
	height:130px;
	border-radius:0 60px 30px 0;
	top:12px;
	right:12px;

}


.esp_angle_moyen_fil .fil_depart {
	position:absolute;
	width:50px;
	height:156px;
	 
}
.esp_angle_moyen_fil .fil_depart:before {
	
	width:90px;
	height:130px;
	border-radius:0 60px 30px 0;
	top:12px;
	right:12px;

}

.esp_angle_moyen_fil .fil_torsade_up{
	width:17px;
	height:44px ;
	bottom:0px;
	right:17px;	

}
.esp_angle_moyen_fil .fil_torsade_up:before{
	position:absolute;
	width:10px;
	height:20px ;


	border-radius:50%;
	top:12px;
	right:-5px;
}

.esp_angle_moyen_fil .fil_torsade_bottom {
	width:17px;
	height:44px ;
	bottom:0px;
	right:0px;	

}


.esp_angle_moyen_fil .fil_torsade_bottom:before{
	position:absolute;
	width:10px;
	height:20px ;
	border-radius:50%;
	top:12px;
	left:-5px;
}

.esp_angle_moyen_fil .fil_pont {
	width:54px;
	height:17px ;
	bottom:32px;
	right:2px;	

}

.esp_angle_moyen_fil .fil_pont:before{
	position:absolute;
	width:30px;
	height:18px ;
	border-radius:500%;
	top:12px;
	left:12px;
}
.esp_angle_moyen_fil .fil_fin {
	width:110px;
	height:24px ;
	bottom:12px;
	

}

.esp_angle_moyen_fil .fil_fin:before{
	position:absolute;
	width:110px;
	height:28px ;
	border-radius:50%;
	bottom:12px;
	right:12px;
}




.esp_angle_moyen_fil .fil_torsade {
	width:60px;
	height:60px;
	position:absolute;	
	bottom:4px;
}
.esp_angle_moyen_fil .fil_depart{
	bottom:34px;
	right:0px;
}

.esp_angle_moyen_fil .fil_torsade1 {

	right:33px;
}
.esp_angle_moyen_fil .fil_torsade2 {
	right:56px;
}

.esp_angle_moyen_fil .fil_torsade3 {
	right:79px;
}
.esp_angle_moyen_fil .fil_fin{
		right:122px;
}
.esp_cable_depart_S {
	width:26px;
	height:26px;
}
.esp_cable_S .cable {
    width: 6px;
    border-radius:6px;

    }

.esp_cable_S .fil_depart {
    height: 6px;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);

}
.esp_cable_courbe_S {
	width:26px;
}

.esp_cable_S .fil_courbe {
    width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.esp_cable_S .fil_courbe::before {
        width: 150%;
    height: 110%;
    border-radius:50%;
    top: -12px;
    left: 12px;	
    transform: translateX(0%);
	
}


.esp_cable_angle_S {
	width:26px;
	height:26px;
}

.fil_angle, .fil_angle:before {
	width:100%;
	height:100%;
	overflow:hidden;
}

.esp_cable_S .fil_angle:before {
	top:50%;
	left:50%;
	margin-top:4px;
	margin-left:4px;
	transform: translateX(0%);

}
.esp_cable_S .fil_tors_pont {
    width: 30px;
	height: 20px;
	top: 0px;
	left: 0px;
}
.esp_cable_S .fil_tors_pont::before {
    width: 100%;
	height: 20px;
	border-radius:0 50% 0  0 ;
	top: 10px;
	right: 12px;
}
.esp_cable_S .fil_tors_up, .esp_cable_S .fil_tors_bottom {
    width: 17px;
    height: 44px;
    top: 0px;
    left: 26px;
}
.esp_cable_S .fil_tors_up::before, .esp_cable_S .fil_tors_bottom::before{
    position: absolute;
	width: 10px;
	height: 12px;
	border-radius: 50%;
	top: 12px;
	left: -6px;
	transform: translateX(0%);
}
.esp_cable_S .fil_tors_bottom {
    left:10px;
    transform: rotateY(180deg);
  }


/*-------------------------------------------------------------------------*/
/*						supports
/*-------------------------------------------------------------------------*/

.esp_support_tige {
	width:160%;
	height:30px;
	position:absolute;	
}
.sup_tige {
	width:100%;
	height:100%;
	border-radius:30px;
	position:absolute;
		left:50%;
	top:50%;
	transform: translate(-50%, -50%);

}
.esp_support .esp_cable {
	height:100%;
}
.esp_cable_S .sup_tige {
	width:10px;
}
.esp_cable_S .attache_tige {
	width:10px;
	height:10px;
}

.support_XS .sup_tige {
	width:10px;
}
.support_XS .attache_tige {
	width:10px;
	height:10px;
}
.support_M .sup_tige {
	width:20px;
}
.support_M .attache_tige {
	width:20px;
	height:20px;
}


.esp_cable .attache_tige {
    position: absolute;
    border-radius: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.esp_cable .attache_tige:nth-child(1) {
    top: 0px;
}

.esp_cable .attache_tige:nth-child(2) {
    bottom: 0px;
}

.sup_tige:before, .sup_fil:before {
	content:'';
	width:95%;
	height:40%;
	border-radius:30px;
	position:absolute;
	opacity:0.3;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}
.esp_support_tige .attache_tige {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 100%;
	top:50%;
	transform: translateY(-50%);

}

.esp_support_tige .attache_tige:nth-child(1) {
    left: 0px;
}

.esp_support_tige .attache_tige:nth-child(2) {
    right: 0px;
}

.sup_fil {
	width:100%;
	height:12px;
	border-radius:30px;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);

}
.esp_support_fil .attache_tige {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 100%;
	top:50%;
	transform: translateY(-50%);

}
.esp_support_fil .attache_tige:nth-child(1) {
    right: 0px;
}

.esp_support_fil .attache_tige:nth-child(2) {
    left: 0px;
}


/*-------------------------------------------------------------------------*/
/*						AMPOULE
/*-------------------------------------------------------------------------*/

.esp_ampoule .ampoule {
    width: 100%;
    position: relative;
    perspective: 200%;
    height:100%;
    margin: auto;
}
.esp_ampoule .rayons {
    width: 0px;
    height: 0px;
    border-radius: 100%;
    position: absolute;
    top: 20px;
        background: radial-gradient(ellipse at center top, rgba(255, 204, 0, 0.4), transparent);

    box-shadow: 0 0px 0px 800px  rgb(0, 0, 0, 1), inset 0 0px 100px 100px  rgb(0, 0, 0, 1);
	filter: blur(0.8vmin);
}

.esp_ampoule .glass {
    position: absolute;
    perspective: 500px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    opacity: 1;
    background: rgba(255, 204, 0, 0.1);
    border-radius: 100%/40%;
    transform: rotateX(-20deg);
    filter: drop-shadow(0 0 40px #ffcc00);

}

.esp_ampoule .glass::after {
    content: '';
    display: block;
    position: absolute;
    top: 2%;
    right: 5%;
    bottom: 5%;
    left: 5%;
    background: linear-gradient(rgba(255, 204, 0, 0.1), transparent);
    border-radius: 100%/40%;
}
.esp_ampoule .fil_torsade {
	width:100%;
	height:20px;
	top:30px;
	
	
}

.esp_ampoule .fil_torsade_up{
	width:20px;
	height:20px ;		
}

.esp_ampoule .fil_torsade_up:before{
	width:3px;
	height:8px ;
	left:50%;
	top:4px;
	transform: translateX(-50%);
	border-radius:50%;
}

.esp_ampoule .fil_pont{
	width:20px;
	height:20px ;	
	margin-top:-12px;
		
}

.esp_ampoule .fil_pont:before{
	width:10px;
	height:6px ;
	left:50%;
	margin-top:-4px;
	top:100%;
	transform: translateX(-50%);
	border-radius:50%;
}

.esp_ampoule .fil_droit{
	width:20px;
	height:80px ;	
	top:0px;

		transform: rotate(-12deg);
}

.esp_ampoule .fil_droit:before{
	width:20px;
	height:80px ;
	left:50%;
	margin-left:-4px;
	border-radius:50%;
	top:4px;

}

.esp_ampoule .amp_support{
	width:70%;
	height:20% ;	
	bottom:0;
	background-color:#000;
	border-radius:10px 10px 0 0;
	

}


.esp_ampoule .amp_brillance  {
    width: 40px;
    height: 20px;
    border-radius: 100%;
    border-bottom: 0.8vmin solid rgb(61, 60, 60);
    position: absolute;
    top: 20px;
    background-color: #fff9f6;
border-bottom: 0.8vmin solid #fff9f6;
filter: blur(0.8vmin);
opacity:0;
}
.esp_ampoule .amp_support_fil{
	left:-10px;
	width:10px;
	height:20px ;	
	top:17px;
	background-color:#000;
	border-radius:3px 0 0 3px;
	

}

.esp_ampoule .amp_base{
	width:90%;
	height:60% ;	
	top:90%;
	border-radius:10px;
	

}

/*-------------------------------------------------------------------------*/
/*						CHAINETTE
/*-------------------------------------------------------------------------*/

.esp_chainette {
	width:160px;
	height:100%;
	top:0px;
	left:-190px;
}
.esp_attache_chainette {
	width:100%;
	height:30px;

}
.tige_chainette {
	width:100%;
	height:16px;
	border-radius:4px;
	
}
.attache_tige_chainette{
	width:40px;
	height:30px;
	border-radius: 50% ;
	right:0px;
	top:-20px;
	
}
.attache_chainette {
	width:30px;
	height:30px;
	border-radius:2px 2px 50% 50%;
	left:4;
	top:10px;
	
}
.base_attache_chainette {
    position: absolute;
    border-radius: 100%;    
    width: 6px;
    height: 6px;
}

.chainette {
	top:50px;
	left:8px;
	cursor:pointer;
}
.anneau_chainette {
	width:6px;
	height:30px;
	border-radius:6px;
	top:-30px;

	
}

.chainette .bille {
	    height: 10px;
    width: 10px;
    border-radius: 100%;
    position: relative;
}

 .bas_chainette {
    height: 40px;
    width: 40px;
    border-radius: 100% 100% 0 0;
    bottom:0;
}

.tige_grille {
	height:100%;
	width:1px;

}
.esp_nom {
	position:absolute;
	width:250px;
	height:50px;
	right:30px;
	top:40px;
}
.trait_jauge {

	border-top-style:solid;
	
	transform-origin: 50% 100% 0;
	bottom:0;
	left:50%;
	

}
.nb_jauge {
	top:0;
}
#jauge {
	width:200px;
	height:200px;
	top:100px;
	left:30px;
}
#jauge .esp_jauge {
	position:  absolute;
	width:100%;
	height:100%;
	top:10%;	overflow:hidden;
}
#jauge .esp_jauge *{
	
	position:absolute;
}
#jauge .base_jauge {
	width:80%;
	height:50%;
	border-radius: 50%  50% 20% 20% ;
	bottom:35%;
	overflow:hidden;
}

#jauge .base_jauge .esp_jauge{
	
}

#jauge .aiguille{	
	transform-origin: 50% 100% 0;
	bottom:0;
	animation: jauge_aiguille 6s linear infinite;

}
@keyframes  jauge_aiguille {
	0%   { transform: translateX(-50%) rotate(-25deg); }

  	8% {  transform: translateX(-50%) rotate(-25deg);   }
  	10% {  transform: translateX(-50%) rotate(-25deg);    }
  	18% {  transform: translateX(-50%) rotate(10deg);    }
  	50% {  transform: translateX(-50%) rotate(0deg);   }
  	60% {  transform: translateX(-50%) rotate(10deg);   }
  	70% {  transform: translateX(-50%) rotate(5deg);   }
  	100% {  transform: translateX(-50%) rotate(-25deg);   }
}
@keyframes  jauge_aiguille {
	0%   { transform: translateX(-50%) rotate(-25deg); }

  	8% {  transform: translateX(-50%) rotate(-25deg);   }
  	10% {  transform: translateX(-50%) rotate(-25deg);    }
  	18% {  transform: translateX(-50%) rotate(10deg);    }
  	50% {  transform: translateX(-50%) rotate(0deg);   }
  	60% {  transform: translateX(-50%) rotate(10deg);   }
  	70% {  transform: translateX(-50%) rotate(5deg);   }
  	100% {  transform: translateX(-50%) rotate(-25deg);   }
}


.canvas{
  box-shadow:0px 0px 12px black;
  border-top:1px solid rgba(255,255,255,0.5);
}
.esp_canvas {
	height:100%;

}

.xslider {
 	width: 100px;
    height: 20px;
}
.xslider .thumb {
    top: -20px;
    transform: translateX(-50%); left:50%; 
}


.yslider {
 	height: 100px;
    width: 20px;
}
.yslider .thumb {
    left: -20px;
    transform: translateY(-50%); top:50%; 
}

#voice_bars {
    width:70%;
}

#voice_bars .bar {
    position: absolute;
    width: 80%;      

}
#voice_bars .esp_bar {
	height:100%;
	position:relative;
	float:left;

}

@keyframes voice{
    0% {
       opacity: .35;
        height: 2%; 
    }
    100% {
        opacity: 1;       
        height: 100%;        
    }
}

#voice_bars .esp_bar:nth-child(1) .bar  {  animation-duration: 474ms; }
#voice_bars .esp_bar:nth-child(2) .bar  {  animation-duration: 433ms; }
#voice_bars .esp_bar:nth-child(3) .bar  {  animation-duration: 407ms; }
#voice_bars .esp_bar:nth-child(4) .bar  {  animation-duration: 458ms; }
#voice_bars .esp_bar:nth-child(5) .bar  {  animation-duration: 400ms; }
#voice_bars .esp_bar:nth-child(6) .bar  {  animation-duration: 427ms; }
#voice_bars .esp_bar:nth-child(7) .bar  { animation-duration: 441ms; }
#voice_bars .esp_bar:nth-child(8) .bar  {  animation-duration: 419ms; }
#voice_bars .esp_bar:nth-child(9) .bar  {  animation-duration: 487ms; }
#voice_bars .esp_bar:nth-child(10) .bar {  animation-duration: 442ms; }





#sound_bars {
    width:70%;
}

#sound_bars .bar {
    position: absolute;
    width: 80%;      
    animation: sound 0ms -800ms linear infinite alternate;
}
#sound_bars .esp_bar {
	height:100%;
	position:relative;
	float:left;

}

@keyframes sound {
    0% {
       opacity: .35;
        height: 2%; 
    }
    100% {
        opacity: 1;       
        height: 100%;        
    }
}
.rouleau:before {
	width:15%;
	height:100%;
	left:50%;
	transform:translateX(-50%);
}
.rouleau:after {
	width:98%;
	height:96%;
	top:50%;
	transform:translateY(-50%);

}


.papier  {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);

  position: absolute;
  	width:95%; height:95%;}

.letters {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 26px auto 0;
  max-width: 550px;
  min-height: 300px;
  padding: 24px;
  position: relative;
  width: 80%;
}
.letters:before, .letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letters:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}
.letters:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}