@media screen and (min-width:1920px){
    header nav a{
        font-size: 1.2rem;
        line-height: 40px;
        border-bottom: 4px solid transparent;
        transition: .5s ease;
    }
}
@media screen and (max-width:1920px) and (min-height:1080px){
    header nav a{
        font-size: 1.2rem;
        line-height: 60px;
        border-bottom: 4px solid transparent;
        transition: .5s ease;
    }
}


@media screen and (width:1366px) and (height:1024px){
    header nav a{
        font-size: 1.2rem;
        line-height: 60px;
        border-bottom: 4px solid transparent;
        transition: .5s ease;
    }
}

@media screen and (max-width:1024px){
     header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
        position: absolute;
        right: 0;
    }
    .contacts-container .right{
        width: 30%;
        height: 50vh;
    }

    .equipe{
        width: 100%;
        min-height: 100vh;
        margin-bottom: 50px;
    }
    .equipe .membres{
        width: 100%;
        height: 100vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    .equipe .membres .membre{
        width: 45%;
        height: 13%;
        display: flex;
        margin-bottom: 10px;
        border-top-left-radius: 10px;
        border-bottom-left-radius:10px;
        overflow: hidden;
    }
    .membres .membre .desc-membre{
        font-size: 0.8rem;
        text-align: center;
    }
    
    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 2rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1.3rem;
    }
    .footer-up div p img{
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }
}
@media screen and (width:1024px) and (height:1366px){
    header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
   header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
        position: absolute;
        right: 0;
    }

    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 2.5rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 2rem;
    }
    .footer-up div p img{
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }
    
}



@media screen and (width:1024px) and (height:768px){
     header{
        border: none;
        position: fixed;
    }
     header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
    header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
        position: absolute;
    right: 0;
    }


    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 1.3rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

}
@media screen and (width:768px) and (height:1024px){
    header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
   

    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 2rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1.3rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

}


@media screen and (max-width:728px){
   header{
        border: none;
        position: fixed;
    }
     header #logo{
        border: none;
    }
   header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
    
    .equipe{
        width: 100%;
        min-height:200vh;
        margin-bottom: 50px;
    }
    .equipe .membres{
        width: 100%;
        height: 300vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    .equipe .membres .membre{
        width: 80%;
        height: 8%;
        display: flex;
        margin-bottom: 5px;
        box-shadow: 5px 5px 15px rgba(0,0, 0, 0.5);
        border-top-left-radius: 10px;
        border-bottom-left-radius:10px;
        overflow: hidden;
    }
    .membres .membre .desc-membre{
        font-size: 0.9rem;
    }
    
    footer{
        height: 40vh;
    }
    .footer-up{
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        text-align: center;
        font-size: 2.3rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1.2rem;
    }
    .footer-up div p img{
        width: 30px;
        height: 30px;
        margin: 0 5px;
    }
    .footer-up form{
        width: 100%;
        display: flex;
    }
    .footer-up .horraires,.footer-up .newsletter{
           display: none; 
    }
    
    

}


@media screen and (width:800px) and (height:600px){
     header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }


    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 7px auto;
        font-size: 1.3rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

}
@media screen and (width:600px) and (height:800px){
    header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        width: 30%;
        display: flex;
        position: absolute;
        right: 0;
    }
    .equipe{
        width: 100%;
        min-height:200vh;
        margin-bottom: 50px;
    }
    .equipe .membres{
        width: 100%;
        height: 300vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    .equipe .membres .membre{
        width: 80%;
        height: 5%;
        display: flex;
        margin-bottom: 0px;
        box-shadow: 5px 5px 15px rgba(0,0, 0, 0.5);
        border-top-left-radius: 10px;
        border-bottom-left-radius:10px;
        overflow: hidden;
    }
    .membres .membre .desc-membre{
        font-size: 0.7rem;
    }
    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }


}
@media screen and (max-width:600px){
    header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
    header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 50%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
    
    .equipe{
        width: 100%;
        min-height:200vh;
        margin-bottom: 50px;
    }
    .equipe .membres{
        width: 100%;
        height: 300vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    .equipe .membres .membre{
        width: 80%;
        height: 5%;
        display: flex;
        margin-bottom: 0px;
        box-shadow: 5px 5px 15px rgba(0,0, 0, 0.5);
        border-top-left-radius: 10px;
        border-bottom-left-radius:10px;
        overflow: hidden;
    }
    .membres .membre .desc-membre{
        font-size: 0.7rem;
    }
    
    footer{
        min-height: 30vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        font-size: 2rem;
        margin: 5px auto;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1.2rem;
    }
    .footer-up div p img{
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }


}


@media screen and (width:736px) and (height:414px){
    header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 100%;
    }
    .footer-up div h1{
        font-size: 1.3rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 0.8rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter, .social-links{
        display: none;
    }

 

}
@media screen and (max-width:414px) and (min-height:736px){
     header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
    
    
    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 1.5rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 0.8rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

}



@media screen and (width:812px) and (height:375px){

    header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
    header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: none;
    }
   header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 100%;
    }
    .footer-up div h1{
        font-size: 1.3rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 0.8rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter, .social-links{
        display: none;
    }

 

}
@media screen and (max-width:375px){
    header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }


    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
    .equipe{
        width: 100%;
        min-height:200vh;
        margin-bottom: 50px;
    }
    .equipe .membres{
        width: 100%;
        height: 300vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    .equipe .membres .membre{
        width: 80%;
        height: 5%;
        display: flex;
        margin-bottom: 0px;
        box-shadow: 5px 5px 15px rgba(0,0, 0, 0.5);
        border-top-left-radius: 10px;
        border-bottom-left-radius:10px;
        overflow: hidden;
    }
    .membres .membre .desc-membre{
        font-size: 0.6rem;
    }

    footer{
        min-height: 50vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 1.5rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

 

}
@media screen and (width:375px) and (height:812px){

     header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
    header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
    
    


    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 1.5rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 0.8rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

 

}


@media screen and (width:667px) and (height:375px){

   header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: none;
    }
    header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }


    
    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 100%;
    }
    .footer-up div h1{
        font-size: 1.3rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 0.8rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter, .social-links{
        display: none;
    }

 

}

@media screen and (width:375px) and (height:667px){

    header{
        border: none;
        position: fixed;
    }
     header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: none;
    }
    header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    
    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
    .equipe{
        width: 100%;
        height: 100vh;
        margin-bottom: 50px;
    }
    .equipe .membres{
        width: 100%;
        height: 80%;
        display: flex;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    }
    .equipe .membres div{
        width: 50%;
        height: 30%;
    }
    .equipe .membres div:nth-child(3){
        order: 4;
    }
    .equipe .membres div:nth-child(4){
        order: 3;
    }
    .equipe .membres div:nth-child(5){
        order: 6;
    }
    .equipe .membres div:nth-child(6){
        order: 5;
    }
    .equipe .membres div:nth-child(7){
        order: 7;
    }
    .equipe .membres div:nth-child(8){
        order: 8;
    }
    .equipe .membres div.membre-img:nth-child(6){
        background: url('../images/t3.jpg');
        background-size: cover;
        background-position: center;
    }
    .equipe .membres div.membre-desc h3{
        font-size: 1.3érem;
        text-align: center;
        
    }
    .equipe .membres div.membre-desc span{
        width:80%;
        text-align: center;
        margin: 5px 0px;
        font-size: 1rem;
    }
    .equipe .membres div.membre-desc p img{
        width: 15px;
        height: 15px;
        margin: 0 5px;
        transition: .5s ease;
    }


    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 1.5rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 0.8rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

 

}




@media screen and (width:320px) and (height:568px){

    header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
    
    
    footer{
        min-height: 40vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 1.5rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 0.8rem;
    }
    .footer-up div p img{
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

 

}
@media screen and (max-width:320px){

     header{
        border: none;
        position: fixed;
    }
    header #logo{
        border: none;
    }
     header nav{
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: none;
    }
     header nav a{
        display: none;
        border: none;
    }
    header #burger-container{
        display: flex;
    }

    .titre-page h1{
        text-align: center;
        font-family: roboto;
        color: #494949;
        font-size: 1.2rem;
        text-transform: uppercase;
    }
    .contacts-container{
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        margin-bottom: 50px;
        font-family: roboto;
        color: #494949;
    }
    .contacts-container .right{
        display: none;
    }
    .contacts-container .contain{
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        font-size: 0.8rem;
    }
    .contacts-container .contain div{
        width: 100%;
        border-left: 2px solid #50B1E9;
        margin-bottom: 20px;
    }
    .contacts-container .contain div h2{
        color: #50B1E9;
        position: relative;
        padding-left: 10px;
    }
    .contacts-container .contain div h2::before{
        content: "";
        position: absolute;
        width: 60%;
        height: 2px;
        background: #50B1E9;
        bottom: 0;
        left: 0;
    }
    
    .equipe{
        width: 100%;
        min-height:200vh;
        margin-bottom: 50px;
    }
    .equipe .membres{
        width: 100%;
        height: 300vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
    }
    .equipe .membres .membre{
        width: 80%;
        height: 5%;
        display: flex;
        margin-bottom: 0px;
        box-shadow: 5px 5px 15px rgba(0,0, 0, 0.5);
        border-top-left-radius: 10px;
        border-bottom-left-radius:10px;
        overflow: hidden;
    }
    .membres .membre .desc-membre{
        font-size: 0.5rem;
    }





    footer{
        min-height: 50vh;
    }

    footer .footer-up{
        flex-wrap: wrap;
    }
    footer .footer-up div{
        width: 100%;
        height: 50%;
    }
    .footer-up div h1{
        margin: 5px auto;
        font-size: 2.3rem;
    }
    .footer-up div p{
        text-align: center;
        font-size: 1rem;
    }
    .footer-up div p img{
        width: 30px;
        height: 30px;
        cursor: pointer;
        transition: .5s ease-in-out;
        margin: auto 5px;
    }
    .horraires, .newsletter{
        display: none;
    }

 

}