.carousel-container{
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 555px;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #F7FAFC;
    
}
@media screen and (max-width: 640px) {
    .carousel-container{
        padding: 96px 16px;
    }
}

.carousel-header{
    font-size: 45px;
    font-family: ralewaybold;
    /* margin-right: 413px; */
    width: 100%;
    color: #c5c5c5;
}
.carousel-subheader{
    font-size: 30px;
}
.carousel-header-purple{
    color:#7550d7;
}.carousel-header-green{
    color:#35e3ae;
}

.carousel{
    width: 1130px;
    /* margin : 40px 0 10px 0; */
}

.slick-track{
    /* padding: 40px 0px 10px 0px; */
    padding: 32px 0px 20px 0px;
}

.wrapper{
    max-width: 1200px;
}

.slick-arrow{
    /* width: 24px; */
    /* height: 24px; */
    /* padding: 16px; */
    /* border-radius: 100%; */
    /* filter: drop-shadow(-1px 1px 5px black); */
    /* background: linear-gradient(to right, #43b5d2, #6b53f4); */
    /* position: absolute;
    width: 50px; */
}
.slick-next:before, .slick-prev:before{
    font-size: 32px;
}

.slick-next:before, .slick-prev:before{
    color: #753bfa;
}
.slick-prev{
    /* transform: rotate(180deg); */
    z-index: 999;
    /* top: 200px; */
}
.slick-next{
    z-index: 999;
    /* top: -240px;
    left: 400px;  */
}

.carousel-element{
    overflow: hidden;
    border-radius: 7px;
    height: 370px; /*size*/
    width: 300px;
    /* filter: drop-shadow(-5px 10px 10px #0000002a); */
    box-shadow: -5px 10px 15px #0000002a;
    transition: all .1s ease;

    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}
.carousel-element:hover{
    /* filter: drop-shadow(-15px 20px 20px rgba(0, 0, 0, 0.164)); */
    /* transition: all .02s ease; */
    /* transform: scale(1.05); */
}


.empty-element{
    width: 300px;
    height: 385px;
}

/*rose*/
.carousel .slick-slide:nth-child(2n) .gradient-blue{
    background-image: linear-gradient(to bottom, #4A8DD1 , #135084);
}
/*vert*/
.carousel .slick-slide:nth-child(3n+1) .gradient-blue{
    background-image: linear-gradient(to bottom, #3CD870 , #22875F);
}

/*bleu*/
.carousel .slick-slide:nth-child(2n+1) .gradient-blue{
    background-image: linear-gradient(to bottom, #F64D8C , #EC5252);
}
/*jaune*/
.carousel .slick-slide:nth-child(3n) .gradient-blue{
    background-image: linear-gradient(to bottom, #F2CC4E , #E69F36);
}

/*violet*/
.gradient-purple{
    background-image: linear-gradient(to bottom, #935DC9 , #3F2588);
}
.news{
    background-color: white;
}
.news-empty{
    background-color: rgba(255, 255, 255, 0.64);
}
.news-empty a{
	text-decoration: none;
}


/* the slides */
.slick-slide {
    width: 320px;
    margin: 0 27px;
}
/* the parent */
.slick-list {
    /* margin: 0 -27px; */
    /* overflow: visible; */
    /* padding: 0px 25px 25px 42px; */
    /* padding: 0px 25px 0px 25px; */
}
.slick-dots{
    /* bottom: -7px; */
}

.fade-left{
    z-index: 999;
    position: absolute;
    background-image: linear-gradient(to right, #F7FAFC , #F7FAFC , #ffffff00);
    width: 200px;
    height: 450px;
    left: -50vw;
}
.fade-right{
    z-index: 999;
    position: absolute;
    background-image: linear-gradient(to left, #F7FAFC ,#F7FAFC, #F7FAFC,#F7FAFC, #ffffff00);
    width: 450px;
    height: 450px;
    right: -50vw;
}

.screen-bg{
    position: absolute;
    width: 520px;
    height: auto;
    top: -50px;
    left: 405px;
    color: red;
}

.screen-bg svg{
    fill: currentColor;
}



/* NEWS */

.news-content{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}
.news-img{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 176px;
    background-size: cover;
    background-position: center;
    transition: all .2s ease;
}
.carousel-element:hover .news-img{
    filter: brightness(0.6) grayscale(1);
}

.news-button-holder{
    position: relative;
    text-decoration: none;
}
.news-button{
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    position: absolute;
    opacity: 0;
    transition: all .2s ease;
    border-radius: 100px;
    text-align: center;
    padding: 12px 12px;
    width: 264px;
    border-color: white;
    border-style: solid;
    border-width: 4px;
    top: 64px;
    left: -130px;
    text-decoration: none;
}

.news-button-arrow{
    width: 30px;
    height: auto;
    margin-left: 5px;
}

.news-button-text{
    color: white;
    font-family: ralewaybold;
    font-size: 20px;
    text-decoration: none;
}

.carousel-element:hover .news-button{
    opacity: 1 !important;
}

.news-title{
    color: #5257E1;
    font-family: ralewaybold;
    font-size: 20px;
    width: auto;
    text-align: left;
    padding: 0px 23px 0px 23px;
    margin: 14px 0px 6px 0px;
    text-decoration: none;
    line-height: 25px;
}
.news-date{
    color: #3EC7C3;
    font-family: ralewaymedium;
    font-size: 14px;
    width: auto;
    padding: 0px 23px 0px 23px;
    margin-bottom: 11px;
}
.news-text{
    color: #393939;
    font-family: ralewaymedium;
    font-size: 14px;
    width: auto;
    padding: 0px 23px 0px 23px;
    text-align: justify;
    line-height: 20px;
}

.news-empty-text{
    font-family: ralewaybold;
    font-size: 25px;
    width: 142px;
    text-align: center;
    line-height: 30px;
    color: #7550D7;
}
.testimonial-empty-text{
    font-family: ralewaybold;
    font-size: 25px;
    width: 170px;
    text-align: center;
    line-height: 30px;
    color: rgb(255, 255, 255);
}
.empty{
    justify-content: center;
}
.empty img{
    width: 37px;
    margin-top: 21px;
}





/* TEMOIGNAGE */    
.testimonial-content{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.testimonial-img{
    width: 135px;
    height: 135px;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    /* transition: all .6s cubic-bezier(.72,-0.61,.3,1.57); */
    transition: all .3s ease;
}
.testimonial-name{
    color: white;
    font-family: ralewaybold;
    font-size: 19px;
    text-decoration: none;
    margin-top: 19px;
    padding: 0 23px 0 23px;
    text-align: center;
    transition: all .2s ease-in-out;
}
.testimonial-job{
    color: white;
    font-family: ralewaymedium;
    font-size: 12px;
    text-decoration: none;
    margin-top: 8px;
}
.testimonial-text{
    font-family: ralewaysemibold;
    /* margin-top: 37px; */
    font-size: 16px;
    color: white;
    z-index: 99;
    padding: 0px 25px;
    line-height: 22px;
}
.quote-holder{
    position: relative;
    margin-top: 36px;
    transition: all .3s ease-in-out;
}
.quote{
    position: absolute;
    display: block;
    width: 50px;
    top: -19px;
    left: -139px;
    opacity: 0.25;
    transition: all .3s ease-in-out;
}
.quote-bottom{
    position: absolute;
    display: block;
    width: 40px;
    top: 75px;
    left: 87px;
    opacity: 0;
    transform: rotate(180deg);
    transition: all .2s ease-in-out;
}
.toggle{
    display: flex;
    height: 100px;
    opacity: 1;
}

.testimonial-description{
    font-family: ralewaymedium;
    /* margin-top: 37px; */
    font-size: 14px;
    line-height: 21px;
    color: white;
    z-index: 99;
    padding: 0px 23px 0px 23px;
}
 .slick-slide:nth-child(2n) .gradient-blue .testimonial-button{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #4A8DD1 , #135084);
    width: 149px;
    height: 37px;
    border-radius: 100px;
    border: 2px solid #4A8DD1;
    text-decoration: none;
}
/*vert*/
 .slick-slide:nth-child(3n+1) .gradient-blue .testimonial-button{
    background-image: linear-gradient(to right, #3CD870 , #22875F);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 149px;
    height: 37px;
    border-radius: 100px;
    border: 2px solid #3CD870;
    text-decoration: none;
}
 .slick-slide:nth-child(2n+1) .gradient-blue .testimonial-button{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #F64D8C , #EC5252);
    width: 149px;
    height: 37px;
    border-radius: 100px;
    border: 2px solid #F64D8C;
    text-decoration: none;
}
/*jaune*/
 .slick-slide:nth-child(3n) .gradient-blue  .testimonial-button{
    background-image: linear-gradient(to right, #F2CC4E , #E69F36);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 149px;
    height: 37px;
    border-radius: 100px;
    border: 2px solid #F2CC4E;
    text-decoration: none;
}
.nostyle-testimonial{
	background: transparent;
	text-decoration: none;
}
.testimonial-button p{
    margin: auto;
    font-family: ralewaymedium;
    color: white;
    font-size: 15px;
}

/* HOVER */
 .testimonial-content:hover .testimonial-img{
    width: 110px;
    height: 110px;
}
.testimonial-content:hover .quote{
    top: -19px;
}


.testimonial-content:hover .quote-bottom{
    opacity: 0.39;
}

.testimonial-content:hover .testimonial-name{
    margin-top: 12px;
}

.testimonial-content:hover .quote-holder{
    /* margin-top: 20px; */
} 

@media screen and (max-width: 1000px){
    .carousel-header{
        font-size: 30px;
        font-family: ralewaybold;
        color: #c5c5c5;
    }
}
@media screen and (max-width: 500px){
    span.carousel-subheader{
        display: none;
    }
}