* {
 
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 scroll-behavior: smooth;
 font-family: Verdana, Geneva, Tahoma, sans-serif;

}

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300';

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');


.connexion{
  font-size: 0.8rem;
  color:#666;

}
/*NAVIGATION GAUCHE*/

.dropdown-menu {
  max-height: 400px !important;
  overflow-y: scroll !important;
width:460px;
}
.text-muted{
  color:#000 !important;
}
.offcanvas-start {
  top: 0;
  left: 0;
  width: 500px;
  border-right: 1px solid rgba(0,0,0,.2);
  transform: translateX(-100%);
  background-color: #fff;

}


.btn-fermer {
  color: #666;
  background-color: transparent;
  border-color: transparent;
  border: 1px solid #000;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
 
  font-weight: 600;
}


.btn-primary:hover {
  background-color: transparent;
  color:#666;
  border-color:goldenrod;
}
.btn-primary:focus{
  background-color: transparent;
  border:none;
  color:#666;
 
}

/*BOOTSTRAP*/

p{
font-size: 0.9rem;
}
.figure{
    overflow: hidden !important;
}

.col-xl-6 {
    flex: 0 0 auto;
    width: 40%;
  }

.btn-primary {
    color: #000;
    background-color: transparent;
    border-color: transparent;
    border: 1px solid rgb(202, 21, 21) ;
    width: auto;
    font-size: 0.8rem;
    padding-left:40px;
    padding-right:40px;
  }

  .btn-primary:hover {
    background-color: transparent;
    color:#666
    
  }


.slick-prev:before,
.slick-next:before {
    color: black;
}

button, select{
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    width: 300px;
    font-size: 0.8rem;
    
  }

 
  .slider {
    width: 80%;
    margin:auto;
}

.slick-slide {
    margin: 0px 20px;
    text-align: center;
}

.slick-slide img {
    width: 100%;
}

  a{
    color:#666;
    text-decoration: none;
  }

  a:hover{
    color:coral;
}

figcaption{
    font-size:0.8rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    width:auto;
}

.legende{
    font-size: 0.8rem;
}
.infos{
    margin:auto;
    width:330px;
    font-size: 0.8rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:#666;
}
.infos a{
    color:#666;
    text-decoration: none;
}

.infos a:hover{
    color:coral;
}

.coloris{
    font-size: 1.2rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.logo{
    display: flex;
    justify-content:space-between;
    align-items: center;
}   

.lienlogo{
    font-size: 1rem;
    
}

.tabmodifs{
    display:flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin:auto;
}

.tabmodifs img{
    width:330px;
}


.documents {
    display: flex;
   
    margin: auto;
  }

.btn{
    padding: .1rem .75rem;
}

li{
/*display: inline-block;*/
 list-style:square;
 font-size: 0.9rem;
margin-top:10px;
}

strong{
    font-size: 0.9rem;
}
  /*ANIMATION*/
  @keyframes animation {
    0%{opacity:0; left:-400px;}
    25%  {opacity:0; left:-200px;}
    50%  {opacity:0.5; left:0;}
    75%  {opacity:0.7; left:0;}
    100% {opacity:1; left:0;}
     }
      
    
    .animation { 
    position:relative;
    animation-name: animation;
    animation-duration: 4s;
     } 

   
   .imgcoloris{
       display:flex;
       flex-direction: column;
       align-items: center;
       width:400px;
   }

 .ajout{
     display: flex;
     justify-content:space-between;
    
 }

 .suppression{
   opacity: 0;

 }

 .afficher{
    opacity: 1;
 }

   @media (min-width: 350px) and (max-width: 600px){        
                   
    .imgcoloris img{
        width:330px;
       
    }

 

.ajout {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.logo{
  display: flex;
  flex-direction: column;
} 
.connexion{
  margin-top: 20px;
}  
      }


      
   @media (min-width: 350px) and (max-width: 1232px){        
                   
   
.tabmodifs{
  display:flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin:auto;
  flex-direction: column;
}

      }