@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@500&display=swap');


body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    
}


@media only screen and (max-width: 849.98px){
    
    
    #container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: 100vw;
    }
    
    .background {
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        width: 100%;
    }
    
    .background h1 {
        margin-top: 5%;
        font-weight: 400;
        font-size: x-large;
        line-height: 45px;
        text-align: center;
        z-index: -2;
        width: 25%;
        font-family: 'Urbanist', cursive;
        color: rgb(97, 134, 139);
    }
    
    
    .background img {
        z-index: -1;
        width:100vw;
    }
    
    .actu {
        
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 70%;
        height: 100%;
        margin-top: 5%;
        
    }
    
    .fb-page{
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: auto;
        height:auto;
        
    }
    
    .actu::-webkit-scrollbar {
        width: 5px;
    }
    
    .actu::-webkit-scrollbar-track {
        background-color: darkgray;
    }
    
    .actu::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
    
    .temoignage {
        position: relative;
        background-color: #DEE6C8;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 70%;
        height: 70%;
        left: 5%;
        bottom: 5%;
        border-radius: 20px;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    
    
    .temoignage h1 {
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: medium;
        line-height: 36px;
        text-align: center;
        text-decoration-line: underline;
        color: #121313;
    }
    
    .temoignage p {
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: small;
        line-height: 20px;
        text-align: center;
        padding: 5px;
    }
    
    .carousel{
        position: relative;
        width: 100%;
        height: 30vh;
        border-radius: 20px;
        overflow: hidden;
    }

    .container{
        display: flex;
        flex-direction: row;
        transition: transform 0.3s;
        transform: translate3d(0, 0, 0);
    }

    .container::after{
        content: "";
        clear: both;
        display: table;
        height: 30vh;
    }

    .item {
        float: left;
        width: 100%;
    }

    .invisible{
        opacity: 0;
    }

    .slider-left{
        left: -50px;
    }

    .slider-left:after{
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        border-top: white solid 4px;
        border-left: white solid 4px;
        left: 50%;
        right: 50%;
        transform: translate(-30%, -50%) rotate(-45deg);
        border-radius: 2px;
    }

    .slider-right{
        right: -50px;
    }

    .slider-right:after{
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        border-top: white solid 4px;
        border-right: white solid 4px;
        left: 50%;
        right: 50%;
        transform: translate(-70%, -50%) rotate(45deg);
        border-radius: 2px;
    }

    button{
        position: absolute;
        height: 60px;
        width: 60px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        border: none;
        background-color: #2C2B2E;
        cursor: pointer;
        transition: opacity 0.3s;
    }
}

@media only screen and (min-width:850px) and (max-width:1200px){
    
    
    h1 {
        color: rgb(97, 134, 139);
    }
    
    #container {
        display: flex;
        height: 90vh;
        width: 100vw;
    }
    
    .background {
        position: relative;
        width: 100%;
    }
    
    .background h1 {
        margin-top: 5%;
        margin-left: 5%;
        font-weight: 400;
        font-size: xx-large;
        line-height: 65px;
        text-align: center;
        z-index: -2;
        width: 25%;
        font-family: 'Urbanist', cursive;
    
    }
    
    
    .background img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-70%, -80%);
        z-index: -1;
        width:45vw;
    }
    
    .actu {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        right: 1em;
        top: 50%;
        transform: translateY(-50%);
        
    
    }
    
    .fb-page{
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: auto;
        height:auto;
        
    }
    
    .actu::-webkit-scrollbar {
        width: 5px;
    }
    
    .actu::-webkit-scrollbar-track {
        background-color: darkgray;
    }
    
    .actu::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
    
    .temoignage {
        position: fixed;
        background-color: #DEE6C8;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 40%;
        height: 30%;
        left: 5%;
        bottom: 5%;
        overflow: hidden;
        border-radius: 20px;
    }
    
    
    
    .temoignage h1 {
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: large;
        line-height: 36px;
        text-align: center;
        text-decoration-line: underline;
        color: #121313;
    }
    
    .temoignage p {
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: medium;
        line-height: 20px;
        text-align: center;
        padding: 5px;
    }


    .carousel{
        position: relative;
        width: 100%;
        height: 30vh;
        border-radius: 20px;
        
    }

    .container{
        display: flex;
        flex-direction: row;
        transition: transform 0.3s;
        transform: translate3d(0, 0, 0);
    }

    .container::after{
        content: "";
        clear: both;
        display: table;
        height: 30vh;
    }

    .item {
        float: left;
        width: 100%;
    }

    .invisible{
        opacity: 0;
    }

    .slider-left{
        left: -50px;
    }

    .slider-left:after{
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        border-top: white solid 4px;
        border-left: white solid 4px;
        left: 50%;
        right: 50%;
        transform: translate(-30%, -50%) rotate(-45deg);
        border-radius: 2px;
    }

    .slider-right{
        right: -50px;
    }

    .slider-right:after{
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        border-top: white solid 4px;
        border-right: white solid 4px;
        left: 50%;
        right: 50%;
        transform: translate(-70%, -50%) rotate(45deg);
        border-radius: 2px;
    }

    button{
        position: absolute;
        height: 60px;
        width: 60px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        border: none;
        background-color: #2C2B2E;
        cursor: pointer;
        transition: opacity 0.3s;
    }
}

@media only screen and (min-width:1201px){
    

    h1 {
        color: rgb(97, 134, 139);
    }
    
    #container {
        display: flex;
        height: 90vh;
        width: 100vw;
    }
    
    .background {
        position: relative;
        width: 100%;
    }
    
    .background h1 {
        margin-top: 5%;
        margin-left: 5%;
        font-weight: 400;
        font-size: 70px;
        line-height: 115px;
        text-align: center;
        z-index: -2;
        width: 25%;
        font-family: 'Urbanist', cursive;
    
    }
    
    
    .background img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);
        z-index: -1;
        width:45vw;
    }
    
    .actu {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 20%;
        height: 50%;
        right: 4em;
        top: 50%;   
        transform: translateY(-50%);
        
    
    }
    
    .fb-page{
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: auto;
        height:auto;
        
    }
    
    .actu::-webkit-scrollbar {
        width: 5px;
    }
    
    .actu::-webkit-scrollbar-track {
        background-color: darkgray;
    }
    
    .actu::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
    
    .temoignage {
        position: fixed;
        background-color: #DEE6C8;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        height: 40%;
        left: 5%;
        bottom: 5%;
        border-radius: 20px;
    }
    
    
    
    .temoignage h1 {
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: xx-large;
        line-height: 20px;
        text-align: center;
        text-decoration-line: underline;
        color: #121313;
    }
    
    .temoignage p {
        font-family: 'Urbanist';
        font-style: normal;
        font-weight: 400;
        font-size: large;
        line-height: 25px;
        text-align: center;
        padding: 5px;
    }



    .carousel{
        position: relative;
        width: 100%;
        height: 30vh;
        border-radius: 20px;
        overflow: hidden;
    }

    .container{
        display: flex;
        flex-direction: row;
        transition: transform 0.3s;
        transform: translate3d(0, 0, 0);
    }

    .container::after{
        content: "";
        clear: both;
        display: table;
        height: 30vh;
    }

    .item {
        float: left;
        width: 100%;
    }

    .invisible{
        opacity: 0;
    }

    .slider-left{
        left: -50px;
    }

    .slider-left:after{
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        border-top: white solid 4px;
        border-left: white solid 4px;
        left: 50%;
        right: 50%;
        transform: translate(-30%, -50%) rotate(-45deg);
        border-radius: 2px;
    }

    .slider-right{
        right: -50px;
    }

    .slider-right:after{
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        border-top: white solid 4px;
        border-right: white solid 4px;
        left: 50%;
        right: 50%;
        transform: translate(-70%, -50%) rotate(45deg);
        border-radius: 2px;
    }

    button{
        position: absolute;
        height: 60px;
        width: 60px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        border: none;
        background-color: #2C2B2E;
        cursor: pointer;
        transition: opacity 0.3s;
    }
}