.pici {
          opacity: 0.618;
          z-index: -1;
             display: block;
    }    
    .aca {
    position: absolute;
        margin: -20em -16em;
    width: 21rem;  
          display: block;   
    }
     .oca {
    position: absolute;
        margin: -29em -18.5em;
    width: 22rem;  
          display: block;   
    }
    
      .big  { 
              height: 1vh;
   
    }
    
      .pile  { 
            width:  15vw;
    }
    
     .pil  { 
            height:  13em;
    }

   .tailla  { 
            width:  6em;
    }
    
    .taillo  { 
            height:  10em;
    }
    
    .typ  { 
            width:  11em;
    }
     .type  { 
            width:  8em;
    }
     .typo3  { 
            width:  0.1618rem;
    }
    
       .typo  { 
            width:  0.618rem;
    }
 
        
    .ici {
      position: absolute;
      z-index: 5;
        width: 44vh;
         display: block;   
    }
       
    
    .eleman  {
      width: 100vw;  
      display: block;
     box-shadow:  13px 15px 16px  rgba(0,0,0,0,0.6);
}
  
      .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%; }
   
    
    .exemple { 
     display: block;   
    }
     
.elementea {
 background:  url("puce.png") no-repeat;
    background-size:  100% , 100%;
	box-shadow: 3px 5px 8px rgba(0,0,0,0.62);
}
    
.element {
	border: 0.3rem solid rgba(122,155,166,0.5);
	box-shadow: inset 0px 0px 50px 25px rgba(123,160,179,0.5),
		0px 0px 10px 5px rgba(122,227,255,0.5),
		inset 20px 30px 10px rgba(8,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);
}
    
    
    
                                     /*    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: brown;
}       

     .heros1 {
  text-align: center;
  position: relative;
  top: 50%;
  color: blue;
}       
    .heros2 {
  text-align: center;
  position: relative;
  top: 50%;
  color: purple;
}      
    .heros3 {
  text-align: center;
  position: relative;
  top: 50%;
  color: grey;
}        
    
                                       /*    EFFETS   */        
    
     .verte  {
      filter: invert(62%);
    }
     .rot  {
      filter: hue-rotate(180deg);
    }
     .sat  {
      filter: saturate(2);
    }
    .tour {
       rotate: 90deg;
       }    
    
    .FACID {
         box-shadow:   inset 0px 0px 7px 3.5px #5b8eb7,
		 0px 0px 8px 4px #316264;
     width: 100vw;  
      display: block;
}
    
    .FACAD {
       
        box-shadow:   inset 0px 0px 7px 3.5px #9ac59d,
		0px 0px 8px 4px #915534;
     width: 100vw;  
      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;
  }