.big  { 
              width: 100vw;
   
    }
     
      .typo3  { 
            width:  0.1618rem;
    }
    
       .typo  { 
            width:  0.618rem;
    }
 
       
    .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;   
    }
     
    
  .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);
   }
    
  .elec {
	border: 0.6rem solid rgba(56,106,239,0.5);
	box-shadow: inset 0px 0px 50px 25px rgba(20,55,249,0.5),
		0px 0px 10px 5px rgba(20,27,255,0.5),
		inset 20px 30px 10px rgba(55,0,0,0.5),
		30px 20px 10px rgba(20,200,160,0.05);
   }
     .eled {
	border: 0.6rem solid rgba(156,206,39,0.5);
	box-shadow: inset 0px 0px 50px 25px rgba(200,255,49,0.5),
		0px 0px 10px 5px rgba(200,127,205,0.5),
		inset 20px 30px 10px rgba(155,200,0,0.5),
		30px 20px 10px rgba(20,200,160,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(3);
    }
    .tour {
       rotate: 90deg;
       }    
    
    .FACAD {
       
        box-shadow:    0px 0px 7px 1.5px #ab8eb7,
		 0px 0px 8px 2px #166264;
     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;
  }