/*----------------------------------------------*/
/*              STYLE CRAZY 
/*----------------------------------------------*/

/*
@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
*/
/*Scroll bar Modifié 
==============================*/
#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: transparent;
}

#style-3::-webkit-scrollbar
{
    width: 6px;
    background-color: transparent;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
}


@font-face{

font-family:  'ethnocentric';
src: url('../fonts/Ethnocentric/ethnocentricrg.ttf') format('ttf') ;
src: url('../fonts/Ethnocentric/ethnocentricrgit.ttf')format('ttf') ;
}
ul {
    width: 100%;
     height: 10px;
     display: flex;
     flex-wrap:wrap;
}
ul li {
}



.cont-1{
    width:100px;
    height: 100%;
    border: 1px solid green;
    display: flex;
 
}
.my_panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap:wrap;
    border: 1px solid red;

  justify-content:center;
  position: center;
  background-color:#5b5b5b;
  border-top:1px solid white;
}
.mydiv{
    width: 100%;
    height: 100%;
    display: flex;
    border:1px solid yellow;
}
#ul123{
    border:2px solid black;
    display: flex;
    width: 100%;
    height: 100%;
    
}

.btn-sous-menu {
    width: 100%;
    display: flex;
    border:1px solid pink; 
    flex-wrap:wrap;
}
/*.btn-sous-menu{
     transition: background 0.5s;
}
*/
.btn-sous-menu:hover{
    background-color:white;
    opacity: 0.9;
    transition: background 1.5s;
    color:black;
}

.my_panel_bottom {
     display: flex;
     flex-wrap:wrap;
     width: 100px;
    height: 100px;
   
}