/*    POSITION G    */
      .ici {
       position: relative;
         inset: -1.618em 0.618em;
        z-index: 5;
        width: 23em; 
         height: 62em;
         display: block;
    }
    .aca {
      position: absolute;
        top: 23%;
        left: 23%;
        height: 62%;
         z-index: -2;
         display: block;
    }
     .sous  {
        position: absolute;
        top: 28em;
        margin: -1rem;
         width: 62%;  
         z-index: -3;
           opacity: 0.16;
       }  
     .dessous  {
        position: absolute;
         z-index: -1;
         top: -1%;
         left: 0%;
        width: 100vw ;
         opacity: 0.6;
         }    
     .droite  {
        position: relative;
        left: 1.618vh;
         }    
      .nun  {
    position: relative;
        inset: -1em 3.618em;
        width: 10rem ;
          display: block;   
          }
    .hic  {
    position: relative;
         top: -3.14rem;
           display: inline-block;   
          }
    
                                     /*    PILOTE     */
    
     .se  {
       position: absolute;
      left: 8em ;
        z-index: 6;
        width: 5em;  
            display: block;
    }
    .me {
          position: absolute;
          left: 1em;
        width: 6em;  
            display: block;
            z-index: 6;
    }
    .pe {
           position: absolute;
          left: 16em;
        width: 3em;  
            display: block;
            z-index: 6;
    }


                                     /*    POSITION P    */
  

                                     /*    CADRE     */
        .bee  {
            height: 8em;
            width: 13em;
           margin: -3vw 6vw;
          	box-shadow: inset 3px 5px 16px rgba(0,0,0,0.62);
     }
    .elemen  {
        height: 48vh;
           width: 25.4vh;
    	box-shadow:  3px 5px 16px rgba(0,0,0,0.62);
          }
      .eleman  {
      	box-shadow:  3px 5px 16px rgba(0,0,0,0.62);
         }
  
               
        .elemento      {
  
        border: 0.6vw solid rgba(156,196,139,0.16);
	box-shadow:  0px 0px 50px 25px rgba(22,122,122,0.16),
		inset 0px 0px 10px 5px rgba(55,227,155,0.16),
		 20px 30px 10px rgba(162,222,122,0.16),
		 inset 4px 8px 10px rgba(0,0,0,0.05);      
             
}

                                     /*    ELEMENT VIDEO     */
    
     .taille video { 
         padding : 0.0618em;
          height: 100%;
           width:  100%;
    }
    .exemple { 
         position: relative;
          z-index: 3;
          top: 5vh;
     display: block;   
    }
    .exemplev { 
     display: block;   
    }
    .exemplav { 
         display: block;   
    }
 
                                     /*    POSITION  M   */
   
   .entree  {  position: absolute;  left: 5em;  display: block; width: 3em;   z-index: 8; } 
    
                                     /*    EFFETS   */        
    
     .verte  {
      filter: invert(26%);
    }
     .rot  {
      filter: hue-rotate(180deg);
    }
     .sat  {
      filter: saturate(-3);
    }
    .tour {
       rotate: 90deg;
       }


                                     /*    LES TAILLES   */ 

                                     /*   largeur petite pourcentage et grande W   */
     .pil  { 
            width:  12%;
    }
 
                                     /*   largeur grande pourcentage et H   */
      .tailla  { 
            width:  162%;
    }
      .typa  { 
            width:  33vh;
    }
                                     /*   hauteur petite fixe et grande  */
       .taillo  { 
            height:  3em;
    }
       .typo  { 
            height:  33em;
    }
                                     /*   hauteur légère H et largeur fixe  */
     .tailli  { 
            height:  8vh;
    }
    .typ  { 
            width:  8em;
    }
                                     /*   largeur grande W et hauteur légère pourcentage   */
     .yog  { 
            height:  11%;
    }
     .yoga  { 
            width:  33vw;
    }
          .tupo  { 
            height:  23em;
          }

                                     /*    BACKGROUND   */
     
     .elemente {
 background:  url("fruits.jpg") no-repeat;
    background-size:  cover;
        box-shadow: 3px 5px 8px rgba(0,0,0,0.62); 
}
    
      .elementea {
   background:  url("build.jpg") no-repeat;
    background-size:  cover;
	box-shadow: 3px 5px 8px rgba(0,0,0,0.62);
}
    
      .elementeb {
 background:  url("fil0g.gif")  no-repeat;
    background-size:  cover ;
           padding : 1rem;
            margin: 1.618vw;
        border: 0.0618rem solid rgba(0,106,139,0.62);
          box-shadow: -13px -5px 18px rgba(0,0,0,0.62);
}

 

.hero-image {
  background-image: url("COLORA.jpg");
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: inherit;
  
}

    .hero-t1 {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  color: brown;
}    
    
    
      .blanc {
      position: relative;
         z-index: -2;
        width: 100%;
         display: block;   
    }
     .haut {
      position: relative;
         z-index:  4;
             display: block;   
    }
    .dessus  {
        position: absolute;
          margin: -16.618% -10.618%;
         z-index: 3;
        opacity : 1;
        rotate: 22deg;
     width: 33%;
         display: block;   
   }
    
  @keyframes fade {
      from { opacity: 0; } 
      to { opacity: 1; }     
   }
  .ciblee {
  
        animation: fade 2s;
  }      
  @keyframes pade {
      from { opacity: 0; } 
      to { opacity: 0.6; }     
   }
  .cible {
  
        animation: pade 2s;
  }