.slider{
user-select: none;
position: relative;
width: 100%;
height: auto;
background-color:#E6E6E6;
padding: 0;
margin: 0;
padding-bottom: 10vh;
}

.slider-title{
width: 100%;
height: 10vh; 
margin: 0;
font-family: GilroyBold;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
color: #212121;
}
      
.slider-filtre {
position: absolute;
z-index: 49;
top: 0;
left: 0;
margin: auto;
width: 100%;
height: 100%;
pointer-events: none;
background-image: linear-gradient(90deg, #E6E6E6 0%, 
#E6E6E600 20%,
#E6E6E600 80%,
#E6E6E6 100%);
}       
             
      .next,.prev{
      transform-origin: center;
      position: absolute;
      width: 6%;
      aspect-ratio: 1/1;
      top: 50%;
      border-radius: 100px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 50;
      transform-style: preserve-3d;
      }

      .next{
      right: 3%;
      background-image: url(../images/icon/picto/fleche.webp);
      }
      .prev{
      left: 3%;
      background-image: url(../images/icon/picto/fleche.webp);
      transform: rotate(180deg);
      }



    

      @keyframes light {
            0% {
                  background-position: 0 0;
            }
            50% {
                  background-position: 400% 0;
            }
            100% {
                  background-position: 0 0;
            }
      }
      
.carousel{
position: relative;
display: flex;
overflow: hidden;
width: 100%;
height: auto;
cursor: pointer;
}
  
.carousel-box{
flex: 0 0 auto;
width: 15vw;
height: auto;
font-size: 1em;
color: white;
padding: 0 4vw;
}


/*SLIDER SKILL*/
 
.skills .carousel-box{
width: 120px;
padding: 40px;
aspect-ratio: 1/1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.skills img{
width: 70px;
aspect-ratio: 1/1;
filter: drop-shadow(rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px);
}

.skills .carousel p{
color: #212121;
}
       

@media only screen and (max-width: 1200px){
.next,.prev{
height: 15vw;
} 
.carousel-box{
padding: 0 20vw;
width: 60vw;
}  
.next,.prev{
width: 20%;
}

.next{
right: 2vw;
}
.prev{
left: 2vw;
}
.next::before, .prev::before{
width: 60%;
}  
.next::after, .prev::after{
width: calc(60% + 20px);
height: calc(60% + 20px);
}    	

      
}