/*
*
* Les conteneurs 
*
*/
/* le conteneur horizontal*/
/*.hc{
    display: flex;
flex-direction: row;
justify-content: space-between;
overflow-x:auto;
}*/
.hc{
    /* We first create a flex layout context */
     display: flex;
    /* Then we define the flow direction 
     and if we allow the items to wrap
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
     flex-flow: row wrap;
    /* Then we define how is distributed the remaining space */
    justify-content: flex-start;
    
    
    }
   
    .hc-between{
        /* We first create a flex layout context */
         display: flex;
        /* Then we define the flow direction 
         and if we allow the items to wrap
         * Remember this is the same as:
         * flex-direction: row;
         * flex-wrap: wrap;
         */
         flex-flow: row wrap;
        /* Then we define how is distributed the remaining space */
        justify-content: space-between;
        
        
        }
       
    
/* le conteneur vertical*/
.vc{
    display: flex;
   flex-direction: column; 
}
.block{
display: block;
}
.abox{
    padding: 0.5%;
    margin: 0.5%;
    }
/*
* Les largeurs des conteneurs
*
*/
.w-1{
    width: 70%;
}
.w-2{
    width: 50%;
}
.w-3{
    width: 32%;
}

.w-4{
    width: 25%;
}
.w-5{
    width: 20%;
}
.w-6{
    width: 16,5%;
}
.grid-item-l{
    flex-basis: 33%;
  -ms-flex: auto;
   position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.grid-item-s{
    flex-basis: 20%;
  -ms-flex: auto;
   position: relative;
  padding: 10px;
  box-sizing: border-box;
}
@media(max-width: 1200px) {
 .grid-item-l {
     flex-basis: 33.33%;
   }
 }
@media(max-width: 1073px) {
    .grid-item-s {
     flex-basis: 33.33%;
   }
 }
 @media(max-width: 880px) {
  .grid-item-l{
     flex-basis: 50%;
   }
 }
 @media(max-width: 815px) {
    .grid-item-s{
     flex-basis: 50%;
   }
 }
 @media(max-width: 600px) {
   .grid-item-l {
     flex-basis: 100%;
   }
 }
 @media(max-width: 555px) {
    .grid-item-s {
     flex-basis: 100%;
   }
 }
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
    .column {
      width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
  }
/*
* Les largeurs des conteneurs
*
*/
.txt-center{
text-align: center;
}
/* Geometrie des conteneur*/
/*Rond*/
.circle{
   
    
    shape-outside: circle();
    clip-path: circle();
    
}
/* Flipper */
.fflipper{
    transform: perspective(1000px);
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.ffront,.fback{
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    position: absolute;
    top: 0;
    left: 0;
}

.ffront{
    background: transparent;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    z-index: 2;
  /*   border: 2px solid #aaa;
    padding: 48px 45px 45px; */
    width: 100%;
}
.fback{
    background: var(--secondary-bg-color);
    transform: rotateY(-180deg);
    position: relative;
    /* padding: 48px 45px 45px;
    border: 2px solid var(--secondary-bg-color); */
    width: 100%;
}

.fbox:hover .ffront{
    transform: rotateY(180deg);
}
.fbox:hover .fback{
    transform: rotateY(0deg);
}
/* Bordure*/
b-1{
    border-top: 1px solid var(--secondary-txt-color);
}
b-2{
    border-top: 2px solid var(--secondary-txt-color);
}
.b-top-1{
    border-top: 1px solid var(--secondary-txt-color);
}
.b-top-2{
    border-top: 2px solid var(--secondary-txt-color);
}
.b-bot-1{
    border-bottom: 1px solid var(--secondary-txt-color);
}
.b-bot-2{
    border-bottom: 2px solid var(--secondary-txt-color);
}
.b-left-1{
    border-left: 1px solid var(--secondary-txt-color);
}
.b-left-2{
    border-left: 2px solid var(--secondary-txt-color);
}
.b-right-1{
    border-right: 1px solid var(--secondary-txt-color);
}
.b-right-2{
    border-right: 2px solid var(--secondary-txt-color);
}
/*table*/
.table-container{
overflow-x: auto;
}
    /* Medium screens */
    @media all and (max-width: 800px) {
        .hc {
        /* When on medium sized screens, we center it by evenly distributing empty space around items */
        justify-content: space-between;
        }
        }
        
        /* Small screens */
        @media all and (max-width: 500px) {
        .hc,.hc-between {
        /* On small screens, we are no longer using row direction but column */
        flex-direction: column;
        width: 100% !important;
        
        }
        .hc > *,.hc-between > *{
            flex: 1 100% !important;
            }   
          .w-1{
                width: 100% !important;
            }
            .w-2{
                width: 100% !important;
            }
            .w-3{
                width: 100% !important;
            }
            
            .w-4{
                width: 100% !important;
            }
            .w-5{
                width: 100%;
              
            }
            .w-6{
                width: 100% !important;
            }
            .vc{
                width: 100% !important;
                
            }
           
           
        }