/*  NOUYOU PROJET © 2023

    [ 1 ] - DEFAULTS
    [ 2 ] - HEADER
    [ 3 ] - MAIN
    [ 4 ] - FOOTER

*/

@media screen and (max-width:1300px){
    /* [ 1 ] - DEFAULTS */
    .container{
        padding: 0 15px;
    }

    /* [ 2 ] - HEADER */
    .brand{
        margin-right: 30px;
    }
    .nav li{
        margin-right: 15px;
    }
}

@media screen and (max-width:1200px){
    /* [ 2 ] - HEADER */
    .brand{
        flex: 1;
    }
    .header-menu{
        position: fixed;
        height: calc(100% - 80px);
        width: 100%;
        top: 80px;
        left: 0;
        flex-direction: column;
        align-items: flex-start !important;
        padding: 30px 15px;
        display: none;
    }
    .nav {
        flex: inherit;
    }
    .nav li{
        display: block;
        font-size: 30px;
        margin: 10px 0;
    }
    .me-connecter-btn{
        padding: 10px 0;
        font-size: 30px;
    }
    .creer-compte-btn{
        font-size: 30px;
    }
    .menu-button{
        display: block;
    }

    /* [ 3 ] - MAIN */
    .bandeau_subject p{
        font-size: 15px;
        font-weight: 500;
    }
    .bandeau_subject h1{
        font-size: 35px;
    }
    .bandeau_top_container{
        padding: 60px 30px;
    }
    .bandeau_top_sub{
        max-width: 100%;
    }
    .bandeau_top_sub .st a{
        font-size: 15px;
    }
    .nouyoo_fait_container{
        padding: 0 30px;
    }
    .nouyoo_fait1 .st1, .nouyoo_fait2 .st1, .nouyoo_fait3 .st1 {
        width: 60%;
    }
    .nouyoo_fait1 .st2, .nouyoo_fait2 .st2, .nouyoo_fait3 .st2 {
        width: 40%;
    }
}

@media screen and (max-width:1100px){
    /* [ 4 ] - FOOTER */
    .footer_image {
        margin-right: 10px;
    }
    .footer_social ul li {
        margin-left: 10px;
    }
    .footer_lists ul {
        padding: 0 20px;
    }
}

@media screen and (max-width:1000px){
    /* [ 3 ] - MAIN */
    .bandeau_banner{
        display: none;
    }
    .bandeau_main{
        padding: 60px 0;
    }
    .bandeau_subject{
        position: relative;
        top: inherit;
        right: inherit;
        height: 100%;
        width: 100%;
        text-align: center;
    }
    .bandeau_subject p{
        font-size: 15px;
        font-weight: 500;
    }
    .bandeau_subject h1{
        font-size: 35px;
    }
    .bandeau_top{
        padding: 0 30px;
        margin-top: 0;
    }
    .bandeau_top_sub{
        flex-direction: column;
        align-items: center;
    }
    .bandeau_top_sub .st1:after{
        display: none;
    }
    .bandeau_top_sub .st1{
        margin-bottom: 15px;
    }
    .main_history_container{
        flex-direction: column;
    }
    .main_history_container .st1{
        margin-right: 0;
        width: 100%;
        margin-bottom: 30px;
    }
    .main_history_container .st2{
        margin-left: 0;
        width: 100%;
    }
    .nouyoo_fait1 .st2, .nouyoo_fait3 .st2{
        margin-left: 0;
    }
    .nouyoo_fait2 .st2, .nouyoo_fait3 .st1{
        margin-right: 0;
    }
    .nouyoo_fait_box{
        flex-direction: column;
        padding: 60px 30px;
    }
    .nouyoo_fait_box .st1 .vt, .nouyoo_fait2 .st1{
        margin-left: 0;
    }

    .nouyoo_fait1 .st1, .nouyoo_fait2 .st2, .nouyoo_fait3 .st1 {
        width: 100%;
        margin-bottom: 60px;
    }
    .nouyoo_fait1 .st2, .nouyoo_fait2 .st1, .nouyoo_fait3 .st2 {
        width: 100%;
    }
    .nouyoo_fait_box .st2 img{
        margin: 0 auto;
        width: 100%;
        max-width: 400px;
    }
    
    .bandeau_top_sub .st{
        width: 100%;
    }
    .nouyoo_fait1 .st1{
        margin-right: 0;
    }

    /* [ 4 ] - FOOTER */
    footer .footer_container{
        flex-direction: column;
    }
    .footer_image{
        margin-right: 0px;
        margin-bottom: 60px;
    }
    .footer_nav{
        margin-bottom: 60px;
    }
    .footer_lists ul {
        flex: 1;
        padding: 0;
    }
    .footer_social ul li{
        margin-left: 0;
        margin-right: 15px;
    }
}

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

@media screen and (max-width:800px){
    .main_center section{
        margin-top: 60px;
    }
    .main_history_container .st1 h2, .mentors_value h2, .nouyoo_fait1 h2, .nouyoo_faq_box h2, .nouyoo_repond h2, .nouyoo_rejoindre h2 {
        font-size: 30px;
    }
    .mentors_categories button{
        font-size: 13px;
        font-weight: 500;
    }

    .main_history_container .st1 .deco-mains-01{
        width: 150px;
        margin-left: 0;
    }
    .nouyoo_fait1 .deco-pont{
        width: 150px;
        top: -40px;
    }
    .nyrep-title img{
        width: 150px;
    }
}

@media screen and (max-width:700px){
    body{
        margin-top: 60px;
    }
    /* [ 2 ] - HEADER */
    header{
        height: 60px;
    }
    .brand img{
        height: 30px;
    }
    .header-menu{
        height: calc(100% - 60px);
        top: 60px;
    }

    /* [ 3 ] - MAIN */
    .nouyoo_fait_container {
        padding: 0;
    }
    .nouyoo_faq_box{
        padding: 60px 30px;
    }
    .nouyoo_reponders_list .at{
        padding: 30px 0;
    }
    .nouyoo_reponders_list .st{
        margin: 0 auto;
        width: 100%;
        max-width: 95%;
    }

    /* [ 4 ] - FOOTER */
    .footer_nav{
        flex-direction: column;
    }
    .footer_nav ul:not(:last-child){
        margin-bottom: 60px;
    }
}

@media screen and (max-width:600px){
    .reponder_img{
        display: none;
    }
    .reponder_info{
        width: 100%;
    }
    .nouyoo_reponders{
        padding: 0 15px;
    }
    
}

@media screen and (max-width:500px){
    .nav li,.me-connecter-btn,.creer-compte-btn{
        font-size: 20px;
    }
    .bandeau_top{
        padding: 0 0;
    }
    .nouyoo_fait_box, .nouyoo_faq_box{
        padding: 60px 15px;
    }
    .bandeau_top_container{
        padding: 30px 15px;
    }
    .nouyoo_reponders{
        padding: 0;
    }
    .bandeau_subject p, .bandeau_top_text, .bandeau_top_sub .st p, .bandeau_top_sub .st a, .st p, body p, .mentor_tags span, .footer_lists ul li a{
        font-size: 14px;
    }
    .bandeau_subject h1{
        font-size: 25px;
    }
    .bandeau_top_sub .st{
        padding: 0;
    }
    .main_history_container .st1 h2, .mentors_value h2, .nouyoo_fait1 h2, .nouyoo_faq_box h2, .nouyoo_repond h2, .nouyoo_rejoindre h2 {
        font-size: 22px;
    }
    .nouyoo_fait_box .st1 h3{
        font-size: 20px;
    }

    .bandeau_main{
        padding: 30px 0;
    }
    .nouyoo_fait_box, .nouyoo_faq_box{
        padding: 30px 15px;
    }
    .bandeau_subject h1{
        margin-top: 15px;
    }
}

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

}

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