.poca {
    position: absolute;
 width: calc(13vh + 5vw + 13em);  
         display: block;   
    }
     .soute  {
        position: absolute;
                margin: 6em 0em;
         left: -0.001vh;
         
        width: 100vw;
         z-index: -2;
           opacity: 0.33;
       }        
     .bige  { 
              width: 23vw;
   
    }
 
   .tailla  { 
            width:  6em;
    }
     .taillo  { 
            height:  10em;
    }
    .taillo2  { 
            height:  3em;
    }
      .type  { 
            width:  9em;
    }
      .typo2  { 
          
            height:   calc(1vh - 1vw -1em)    ;
                
    }
      .typo3  { 
          
          width:   0.1618em   ;
                
    }
     .typo4  { 
          
          width:   0.33em   ;
                
    }
       .typo  { 
            width:  0.618rem;
    }
                                    /*    EFFETS   */        
    
     .verte  {
      filter: invert(26%);
    }
     .rot  {
      filter: hue-rotate(180deg);
    }
     .sat  {
      filter: saturate(2);
    }
    
    .tour {
       rotate: 90deg;
       }
    
  
      .bee  {
            height: 26vh
           width: 48vh;
      	box-shadow: inset 3px 5px 16px rgba(0,0,0,0.62);
      }
    .taille video { padding : 1em; height: 100%; width: 100%; }
     
     .ixemple { 
           margin: -26em calc(-16vh + 3.14vw - 10em);
       
     display: block;   
    }
    .exemple { 
       width: calc(10vh + 5vw + 3em);  
     display: block;   
    }
      .axemple { 
     display: block;   
    }
    
.element {
	border: 0.6rem solid rgba(56,106,39,0.5);
	box-shadow: inset 0px 0px 50px 25px rgba(0,255,79,0.5),
		0px 0px 10px 5px rgba(0,127,255,0.5),
		inset 20px 30px 10px rgba(255,0,0,0.5),
		30px 20px 10px rgba(0,0,0,0.05);
}
    
    .elea {
	border: 0.6rem solid rgba(156,106,39,0.5);
	box-shadow: inset 0px 0px 50px 25px rgba(200,255,79,0.5),
		0px 0px 10px 5px rgba(200,127,255,0.5),
		inset 20px 30px 10px rgba(255,0,0,0.5),
		30px 20px 10px rgba(200,0,0,0.05);
}
    
    .eleb {
        border: 0.6rem solid rgba(255,10,39,0.5);
	box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.5),
		0px 0px 10px 5px rgba(0,0,0,0.5),
		inset 2px 3px 1px rgba(0,0,0,0.5),
		3px 2px 10px rgba(0,0,0,0.05);
}
    
                                     /*    PILOTE     */
     .le {
           position: absolute;
          left: 13em;
        width: 3em;  
            display: block;
            z-index: 6;
    }    

    .se  {
       position: absolute;
      left: 8em ;
        z-index: 6;
        width: 5em;  
            display: block;
    }
    .me {
          position: absolute;
          left: 1em;
        width: 3em;  
            display: block;
            z-index: 6;
    }
    .pe {
           position: absolute;
          left: 16em;
        width: 3em;  
            display: block;
            z-index: 6;
    }

  .hero {
  text-align: center;
  position: relative;
  top: 50%;
  color: black;
}       
    .heros {
  text-align: center;
  position: relative;
  top: 50%;
  color: gray;
}       
      .herot1 {
 
          transform: translate(-16.18%, 16.18%);   
  
}    
    
    .face {
	box-shadow:  inset 0px 0px 7px 3.5px #cc8eb7,
		0px 0px 8px 4px #616264;
      display: block;
}
    
.FACED {
	box-shadow:  inset 0px 0px 7px 3.5px #cc8eb7,
		0px 0px 8px 4px #616264;
     width: 100vw;  
      display: block;
}

   @keyframes fade {
      from { opacity: 0; } 
      to { opacity: 1; }     
   }
  .ciblee {
  
        animation: fade 2s;
  }  
 @keyframes rade {
      from { opacity: 0; } 
      to { opacity: 1; }     
   }
  .crible {
  
        animation: rade 4s;
  }