/*====================================================POLICES==========================================================*/

/* On insère les police */



@font-face{

    font-family:'Font Awesome';

    src : url('fonts/FontAwesome.otf') format('otf');

    font-weight: normal;

    font-style: normal;



    font-family:'Font Awesome Webfont';

    src : url('fonts/fontsawesome-webfont.eot') format('eot');

    src : url('fonts/fontsawesome-webfont.woff') format('woff');

    src : url('fonts/fontsawesome-webfont.ttf') format('truetype');

    src : url('fonts/fontsawesome-webfont.svg') format('svg');

    font-weight: normal;

    font-style: normal;



    font-family:'Glyphicons Halfling Regular';

    src : url('fonts/glyphicons-halflings-regular.eot') format('eot');

    src : url('fonts/glyphicons-halflings-regular.woff') format('woff');

    src : url('fonts/glyphicons-halflings-regular.ttf') format('truetype');

    src : url('fonts/glyphicons-halflings-regular.svg') format('svg');

    font-weight: normal;

    font-style: normal;



    font-family:'Roboto';

    src : url('fonts/Roboto-Black.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;





    font-family:'Roboto';

    src : url('fonts/Roboto-Bold.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;







    font-family:'Roboto';

    src : url('fonts/Roboto-Medium.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;





    font-family:'Roboto';

    src : url('fonts/Roboto-Thin.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;



}

/*====================================================FIN POLICES==========================================================*/





/*==========Eléments généraux de la page==================*/

body{

    width:100%;

    height:auto;

    margin:auto;
    
    overflow-x:hidden;

}



.div_container{

    width:100%;

    height:auto;

    margin:auto;

    word-wrap:break-word;

}



/*==========FIN Eléments généraux de la page==================*/





/*==========header==================*/

.head{

    width:100%;

    margin:auto;

}



.headbar{

    width:100%;

    height:80px;

    display:flex;

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

}



.logo{

    width:auto;

    position:relative;

    left:10%;

}



.headbar nav{

    width:auto;

    position:relative;

    right:10%;

}



.headbar nav ul{

    width:100%;

    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center;
    flex-wrap:wrap;
    gap:.5em;

    list-style:none;

    width:auto;

}



.headbar nav ul li{

    width:max-content;

    display:inline-block;

    height:80px;

    line-height:80px;

    text-align:center;

    border-top: 3px solid transparent;

    transition:border-top .125s ease-out;
}



.headbar nav ul li:hover{

    border-top:3px solid rgba(93,168,171,1);

}



.headbar nav ul li a{

    text-decoration:none;

    color:rgba(80,80,80,1);

    line-height:80px;

    font-family:"Arial", sans-serif;

    padding:10px;

    font-size:14px;

}



.aside_slider{

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    width:100%;

    height:465px;

    margin:auto;

}



.slider{

    width:100%;

    height:465px;

    position:absolute;

    margin:0;
    
    overflow:hidden;

}



.slideshow{

    position:absolute;

    width:200%;

    height:465px;

    margin-top:0px;

    margin-right:0px;

    margin-left:0px;

    border-top:1px solid rgba(0,0,0,0.4);

    border-bottom:1px solid rgba(0,0,0,0.4);

    overflow:hidden;

}



.slides{

    position:absolute;

    top:0;

    left:0;

    margin:0;

    padding:0;

    list-style:none;

    width:50%;

    display:flex;

    animation: sliding 20s linear infinite;


    animation-fill-mode:forward;

}



.slides li{

    display:inline;

}



#slideshow:target #slides{

    left:-50%;

    animation:stop_sliding 10s infinite;

    animation:stop_loading 10s infinite;

}





        @keyframes sliding{

        0%{

            transform:translateX(0);

        }



        10%{

            transform:translateX(0);

        }



        40%{

            transform:translateX(0);

        }



        50%{

            transform:translateX(-100%);

        }



        60%{

            transform:translateX(-100%);

        }



        90%{

            transform:translateX(-100%);

        }



       100%{

           transform:translateX(0);

       }

}



@keyframes stop_sliding{

    0%{

         transform:tranlateX(0);

    }



    100%{

         transform:tranlateX(0);

    }

}



        

/* Je modifie le comportement des images contenue dans le slider */

.img_slider1{

    display:inline-block;

    position:absolute;

    width:100%;

    max-width:100%;

    height:auto;

    max-height:550px;

    margin:0;

    left:0%;

    overflow:hidden;

}



.img_slider2{

    display:inline-block;

    position:absolute;

    width:100%;

    max-width:100%;

    height:auto;

    max-height:550px;

    margin:auto;

    margin-left:100%;

    overflow:hidden;

    

}



#overlay_container{
    display:block;

    position:relative;

    width:100%;

    height:465px;
}


/* Je modifie le comportement des boutons latéraux du slider */

.btn_left{

    display:inline-block;

    position:absolute;

    float:left;

    top:45%;

    left:0;

    margin-left:-35px;

    background-color:rgba(0,0,0,0.2);

    color:rgba(255,255,255,1);

    width:60px;

    height:60px;

    text-align:right;

    border:1px solid rgba(0,0,0,0);

    border-radius:50%;

    cursor:pointer;

    text-decoration:none;

    line-height:60px;

}

.fa-chevron-left{
    margin-right:15%;
}





.btn_right{

    display:inline-block;

    position:absolute;

    float:right;

    top:45%;

    right:0;

    margin-right:-35px;

    background-color:rgba(0,0,0,0.2);

    color:rgba(255,255,255,1);

    width:60px;

    height:60px;

    text-align:left;

    border:1px solid rgba(0,0,0,0);

    border-radius:50%;

    cursor:pointer;

    text-decoration:none;

    line-height:60px;

}

.fa-chevron-right{
    margin-left:15%;
}



.btn_left:active, .btn_right:active{

    background-color:white;

    color:black;

}






.description_slider{

    width:480px;

    position:absolute;

    left:10%;

    top:35%;

    z-index:50000;

    font-family:"Arial",sans-serif;

    color:white;

    text-align:left;

    font-weight:bold;

    font-size:16px;

    letter-spacing:-0.5px;

}



.description_slider h1{

    text-transform:uppercase;

    font-size:28px;

}



.h1_description_slider{

    color:rgba(91,168,167,1);    

}



.btn_about_slider{

    background-color:rgba(92,173,211,1);

    color:white;

    border:0px solid black;

    border-bottom:4px solid rgba(68,148,187,1);

    border-radius:3px;

    width:125px;

    height:45px;

    margin-top:20px;

    margin-left:5px;

    font-size:20px;

    font-family:"Arial", sans-serif;

    font-weight:bold;

    font-style:normal;

}



.btn_about_slider:hover{

    background-color:rgba(68,148,187,0.8);

    border-bottom:4px solid rgba(92,173,211,1);

    cursor:pointer;

}



.btn_about_slider:active{

    background-color:rgba(68,148,230,1);

    border-bottom:4px solid rgba(92,173,255,1);

}



.infos_active{

    position:absolute;

    width:100%;

    height:20px;

    top:100%;

    left:25%;

    right:25%;

    background-color:rgba(110,110,110,1);

    font-family:"Arial", sans-serif;

    text-align:center;

    font-size:14px;

    opacity:0;

    transform:rotateY(-60deg);

    transition:all 0.3s;

    border:transparent;

    border-radius:5px;

    padding:5px;

    z-index:50001;

}



.btn_about_slider:hover + .infos_active{

    transform:rotate(0deg);

    opacity:1;

}

.slider_bottom{
    display:inline-block;

    position:absolute;

    float:left;

    width:0%;

    height:5px;

    bottom:0;

    margin:auto;

    background-color:rgba(68,148,187,0.8);

    animation:loading 20s infinite;

    animation-delay:.25s;
}

@keyframes loading{
        0%{

            width:0%;

        }


        30%{

            width:50%;
        }

        50%{

            width:100%;

        }

        70%{
            width:50%;
        }


       100%{

           width:0%;

       }

}




/*==========Fin header==================*/







/* ============Section utilities ============= */

.utilities{

    width:100%;

    margin:auto;

}



.head_utilities{

    width:100%;

    margin:auto;

    text-align:center;

    position:relative;

    top:20px;

}



.h1_utilities{

    text-transform:uppercase;

    font-family:"Arial", sans-serif;

    font-weight:bold;

    font-size:30px;

    width:300px;

    margin:auto;

    margin-bottom:10px;

}



.description_utilities{

    width:40%;

    margin:auto;

    color:rgba(80,80,80,1);

    font-weigth:400;

}



.container_utilities{

    display:flex;

    flex-direction:row;

    width:80%;

    margin:auto;

    margin-top:30px;

    justify-content:center;

    align-items:center;

}



.article_left{

    width:100%;

    margin:auto;

    position:relative;

    top:30px;

    height:auto;

}




.article_right{

    width:100%;

    margin:auto;

    position:relative;

    top:50px;

}



.article_right p{

    position:relative;

    text-align:left;

    width:80%;

    word-wrap:break-word;

    margin:auto;

    margin-top:10px;

    margin-left:13.5%;

    top:-5px;

    font-family:"Arial",sans-serif;

    font-size:15px;

    font-weight:400;

    color:rgba(80,80,80,1);

    padding:0;

}




.article_right i{

    width:50px;

    height:50px;

    margin:auto;

    line-height:2em;

    font-size:1.5em;

    color:rgba(92,173,220,1);

    text-align:center;

    vertical-align:middle;

}





.sub_img1,

.sub_img2,

.sub_img3{

    display:inline-block;

    position:relative;

    width:50px;

    height:50px;

    margin:auto;

    top:30px;

    padding:0;

    border:1px solid rgba(80,80,80,0.4);

    border-radius:50%;

}





.pointy{

    content:"";

    display:inline-block;

    position:relative;

    margin-left:-11px;

    margin-top:0px;

    width:10px;

    height:10px;

    top:30px;

    border:1px solid rgba(92,173,220,1);

    border-radius:50%;

    background:rgba(92,173,220,1);

}



.article_right h2{

    display:inline-block;

    position:relative;

    top:20px;

    left:2%;

    font-family:"Arial",sans-serif;

    font-weight:bold;

    font-size:20px;

    text-align:left;

}


/* ===========Fin Utilities=================== */








/* =====================SECTION-PROJECTS============= */



.projects{

    padding:10px;

    border-top:1px solid rgba(80,80,80,0.4);

    margin-top:50px;

}



.head_projects{

    position:relative;

    width:100%;

    text-align:center;

    margin-top:50px;

}



.h1_projects{

    text-transform:uppercase;

    font-family:"Arial",sans-serif;

    font-weight:bold;

    font-size:30px;

    width:300px;

    margin:auto;

    margin-bottom:10px;

}



#separator_projects{

    width:160px;

    height:25px;

    margin:auto;

}



.description-projects{

    width:40%;

    margin:auto;
}

.head_projects p{
    color:rgba(80,80,80,1);

    font-weight:400;
}



#portfolio_img button{

    display:inline-block;

    position:relative;

    width:120px;

    height:45px;

    margin:0px;

    margin-bottom:50px;

    padding:0px;

    font-family:"Roboto", sans-serif;

    line-height:35px;

    font-weight:lighter;

    font-size:18px;

    font-style:normal;

    opacity:0.9;

    cursor:pointer;
}

#spacing{
    width:100%;
}

.btn_1_portfolio,
.btn_2_portfolio,
.btn_3_portfolio,
.btn_4_portfolio{
    text-align:center;
    background-color:rgba(229,229,229,1); 
    color:rgba(20,20,20,0.7);
    border:0px solid transparent;
    outline:none;
}

.btn_1_portfolio::after,
.btn_2_portfolio::after,
.btn_3_portfolio::after,
.btn_4_portfolio::after{
    outline:none;
}

.btn_2_portfolio .btn_1_portfolio{
    text-align:center;
    background-color:rgba(229,229,229,1); 
    color:rgba(20,20,20,0.7);
    border:0px solid transparent;
}



.border_right_projects{

    border:0px solid transparent;

    border-top-right-radius:5%;

    border-bottom-right-radius:5%;
}



.border_left_projects{

    border:0px solid transparent;

    border-top-left-radius:5%;

    border-bottom-left-radius:5%;
}


.projects button:focus{

    height:45px;

    opacity:1;

    border :0px transparent;

    border-bottom:3px solid rgba(70,140,173,1);

    margin:0;

    background-color:rgba(92,173,211,1);

    cursor:pointer;

    padding-left:5px;

    color:white;
}

.projects button:focus::after{

    content: '';

    position:relative;

    top:45px;

    left:-32.5%;

    width:0;

    height:0;

    border:12px solid transparent;

    border-top-color:rgba(70,140,173,1);

    border-bottom:0;

    margin-left:-15px;

    margin-bottom:-15px;

}

.projects button:hover{

     height:45px;

    opacity:1;

    border :0px transparent;

    border-bottom:3px solid rgba(70,140,173,1);

    margin:0;

    background-color:rgba(92,173,211,1);

    cursor:pointer;

    padding-left:5px;

    color:white;

}

.projects button:hover::after{

    content: '';

    position:relative;

    top:45px;

    left:-32.5%;

    width:0;

    height:0;

    border:12px solid transparent;

    border-top-color:rgba(70,140,173,1);

    border-bottom:0;

    margin-left:-15px;

    margin-bottom:-15px;

}




button.btn_1_portfolio:focus ~ .full{
    display:inline-block;
}

button.btn_2_portfolio:focus ~ div:not(.mid){
    display:none;
}

button.btn_3_portfolio:focus ~ div:not(.corp){
    display:none;
}

button.btn_4_portfolio:focus ~ div:not(.port){
    display:none;
}


/* On manipule le portfolio */


.portfolio{

    display:flex;
    
    flex-direction:row;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    width:1300px;

    height:auto;

    

    margin:auto;

    margin-top:20px;

}

.portfolio a{

    display:inline-block;

    position:relative;

    text-decoration:none;

    width:20%;

    height:auto;

    margin:10px;

    z-index:1;

}



.portfolio img{

    display:inline-block;

    position:relative;

    width:300px;

    height:auto;

    z-index:2;

}



.portfolio_img1,

.portfolio_img2,

.portfolio_img3,

.portfolio_img4,

.portfolio_img5,

.portfolio_img6,

.portfolio_img7,

.portfolio_img8{

    position:relative;

    width:300px;

    z-index:3;

}



#portfolio_img1:hover #description_img1,

#portfolio_img2:hover #description_img2,

#portfolio_img3:hover #description_img3,

#portfolio_img4:hover #description_img4,

#portfolio_img5:hover #description_img5,

#portfolio_img6:hover #description_img6,

#portfolio_img7:hover #description_img7,

#portfolio_img8:hover #description_img8{

    opacity:1;
    transition:1s;

}



#portfolio_img1 a:focus + #description_img1,

#portfolio_img2 a:focus + #description_img2,

#portfolio_img3 a:focus + #description_img3,

#portfolio_img4 a:focus + #description_img4,

#portfolio_img5 a:focus + #description_img5,

#portfolio_img6 a:focus + #description_img6,

#portfolio_img7 a:focus + #description_img7,

#portfolio_img8 a:focus + #description_img8{

    position:absolute;

    margin-left:10px;

    margin-top:-214px;

    width:300px;

    height:200px;

    opacity:0.8;

    transition:0s;

}



#description_img1,

#description_img2,

#description_img3,

#description_img4,

#description_img5,

#description_img6,

#description_img7,

#description_img8{

    position:absolute;

    margin-left:10px;

    margin-top:-94px;

    width:300px;

    height:80px;

    background-color:rgba(35,35,35,0.6);

    z-index:4;

    text-align:center;

    opacity:0;

    font-family:"Arial",sans-serif;

    font-size:1em;

    text-transform:capitalize;
}



#description_img1_text,

#description_img2_text,

#description_img3_text,

#description_img4_text,

#description_img5_text,

#description_img6_text,

#description_img7_text,

#description_img8_text{

    width:300px;
    margin-top:0px;
    color:rgba(255,255,255,1);
    text-align:left;
    padding-left:15px;
    padding-top:20px;
}



#description_img1_text span,

#description_img2_text span,

#description_img3_text span,

#description_img4_text span,

#description_img5_text span,

#description_img6_text span,

#description_img7_text span,

#description_img8_text span{

    font-family:"Arial",sans-serif;

    font-weight:bold;

    font-size:1.1em;

    text-transform:capitalize;

}



.eye_description{

    position:absolute;

    width:30px;

    height:30px;

    margin-top:-15px;

    margin-right:10px;

    right:0;

    padding:0;

    border:2px solid rgba(255,255,255,0.8);

    border-radius:50%;

    background:rgba(92,173,211,1);

    color:rgba(255,255,255,0.8);

}



.eye_description i{

    width:30px;

    height:30px;

    line-height:30px;

}



/* =================End SECTION-PROJECTS============= */





/*=====================FOOTER==============================*/

.footer_site{

    width:100%;

    height:auto;

    margin-bottom:0px;

    border-top:1px solid rgba(80,80,80,0.4);

}

.contact_footer{

    width:100%;

    height:500px;

    overflow:hidden;

}



.map_google{

    display:flex;

    flex-direction:row;

    justify-content:space-around;

    align-items:center;

    float:left;

    clear:both;

    position:relative;

    width:100%;

    height:500px;

    z-index:1;

}

#overlay{
    width:100%;

    height:500px;

    position:absolute;

    pointer-events:none;

    background-color:rgba(0,0,255,0.2);

    z-index:2;
}



.form_container{

    position:absolute;

    width:350px;

    background-color:rgba(241,246,247,0.8);

    margin-bottom:50px;

    right:0;

    margin-top:2%;

    margin-right:5%;

    z-index:2;

}



.form_contact{

    display:flex;

    flex-direction:column;

    flex-wrap:nowrap;

    justify-content:space-around;

    align-items:left;

    padding:10px;

    text-align:center;

}



form h2{

    font-family:"Arial", sans-serif;

    font-size:1.5em;

    margin-top:2px;

}



#contact_infos_container{

    width:100%;

    height:75px;

    text-align:left;

    font-family:"Arial", sans-serif;

    font-size:15px;

}



#title_contact_infos{

    font-weight:bold;

}



#tel_contact_infos{

    text-decoration:underline dotted;

}



#sub_tel_infos{

    position:absolute;

    margin-top:16px;

    margin-left:16px;

    background-color:rgba(150,150,150,1);

    opacity:0;

    transform:rotate(-10deg);

    transition:all 0.25s;

    border:transparent;

    border-radius:5%;

    padding:1px;

}



#tel_contact_infos:hover{

    cursor:pointer;

}



#tel_contact_infos:hover + #sub_tel_infos{

    transform:rotate(0deg);

    opacity:1;

}



#pseudo,

#mail,

#subject{

    width:97%;

    height:25px;

    font-size:1.1em;

    font-family:"Arial",sans-serif;

    border:rgba(80,80,80,0.8);

    margin:5px;

    margin-left:0px;

    padding-left:10px;

    border:1px solid rgba(204,204,204,1);

    border-radius:5px;

}



#message_area{

    width:96%;

    margin:5px;

    margin-left:2px;

    border:rgba(80,80,80,0.8);

    font-family:"Arial", sans-serif;

    font-size:1.1em;

    border:1px solid rgba(204,204,204,1);

    padding-top:5px;

    padding-left:10px;

    border-radius:5px;

}



#submit_button{

    width:40%;

    height:35px;

    background-color:rgba(92,173,211,1);

    color:rgba(240,240,240,1);

    font-size:1em;

    font-family:"Arial",sans-serif;

    font-weight:bold;

    border:transparent;

    border-bottom:3px solid rgba(68,148,187,1);

    border-radius:3px;

    margin:5px;

    text-transform:capitalize;

}

/*================END FOOTER==============================*/





/*================Mentions légales========================*/

.mentions_legales{

    display:flex;

    flex-direction:row;

    position:absolute;

    margin-top:500px;

    margin-bottom:0px;

    margin-left:50%;

    margin-right:50%;

    width:100%;

    height:15px;

    font-size:12px;

}



.mentions_legales a{

    text-decoration:none;

    color:rgb(255,255,255);

    background-color:rgba(80,80,80,.7);

    padding:5px;

    border:0px solid transparent;

    border-radius:20%;

}



.mentions_legales_page{

    display:block;

    width:80%;

    height:auto;

    text-align:left;

    padding:20px;

    margin:auto;

    word-wrap:break-word;

    background-color:rgba(200,180,200,1);

}



.mentions_legales_page p{

    text-align:left;

}



.mentions_legales_page h1{

    text-align:center;

}



.retour_acceuil{

    background-color:rgba(80,80,80,0.8);

    padding:15px;

    text-decoration:none;

    font-size:14px;

    color:rgb(255,255,255);

    border-radius:0px 50px 0px 50px;

    margin-left:70%;

    

}



/*================Fin Mentions légales====================*/































/*

================================================================

================================================================

================================================================

================================================================

================================================================

*/



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



        

    .headbar{

        width:100%;

        height:auto;

        display:flex;

        flex-direction:column;

        margin:auto;

        align-items:center;

    }

    

    .logo{

        width:auto;

        margin:auto;

        left:0;

        margin-bottom:20px;

        

    }




    .headbar nav ul{

        display:flex;

        flex-direction:row;

        justify-content:space-evenly;

        align-items:center;

        width:100%;

        margin:auto;

    }

    

    .headerbar nav ul li{

        display:block;

        width:auto;

        margin:auto;   

    }

    

    .slider,

    .aside_slider a,

    .slider_bottom{

        display:none;

    }

    

    .description_slider{

        display:flex;
        
        flex-direction:column;
        
        justify-content:space-around;
        
        align-items:center;

        background-color:rgba(92,168,173,0.5);

        width:auto;
        
        max-width:100%;

        left:0;

        top:0;

        padding:10px;
        
        margin:auto;

        text-align:center;

    }

    

    .btn_about_slider{

        display:block;

        margin:auto;

        width:auto;

        margin-top:20px;

    }

    

    .infos_active{

        width:auto;

        margin:auto;

        height:auto;

    }
    
    .utilities{
        width:auto;

        height:auto;

        position:relative;

        margin-top:-150px;
    }    

    .head_utilities{

        margin:auto;

        width:100%;

    }

    

    .container_utilities{

        flex-direction:column;

        width:100%;

        margin:auto;

    }

    

    .article_left img{

        width:100%;

        height:auto;

        margin:auto;

        margin-top:20px;

        position:relative;

        padding:0;

    }

    

    .sub_img1,

    .sub_img2,

    .sub_img3{

        display:block;

        text-align:center;

        margin:auto;

    }

    

    .pointy{

        display:block;

        text-align:center;

        margin:auto;

        margin-top:-7px;


    }

    

    .article_right h2{

        display:block;

        position:relative;

        width:auto;

        margin:auto;

        margin-top:30px;

        margin-left:-10px;

        text-align:center;

    }

    

    .article_right p{

        width:auto;

        max-width:70%;

        margin:auto;

        margin-top:10px;

        text-align:center;

        padding-top:10px;

    }

    



    .projects{

        width:auto;

        margin:auto;

        margin-top:50px;
    }

    

    

    

    .portfolio{

        width:100%;

        height:auto;

        margin:auto;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

    }

    #portfolio_img{
        padding-bottom:50px;
    }

    #portfolio_img button{
        width:25%;
        min-width:120px;
    }

    .btn_1_portfolio,
    .btn_2_portfolio, 
    .btn_3_portfolio, 
    .btn_4_portfolio {
    text-align: center;
    background-color: rgba(229,229,229,1);
    color: rgba(20,20,20,0.7);
    border: 0px solid transparent;
    }

    .btn_1_portfolio::after{
        display:none;
    }

    .btn_1_portfolio:hover::after,
    .btn_2_portfolio:hover::after, 
    .btn_3_portfolio:hover::after, 
    .btn_4_portfolio:hover::after{
        display:none;
    }

    .btn_1_portfolio:focus::after,
    .btn_2_portfolio:focus::after, 
    .btn_3_portfolio:focus::after, 
    .btn_4_portfolio:focus::after{
        display:none;
    }

    .contact{

        width:auto;

        margin:auto;

    }

    

    .contact_footer{

        width:auto;

        margin:auto;

    }

    

    .form_container{

        width:auto;

        min-width:100%;

        margin:auto;

        margin-top:500px;

    }

    

    .mentions_legales{

        width:auto;;

        margin:auto;

        position:absolute;

        margin-top:980px;

        margin-left:1%;

        padding-bottom:50px;

    }

    

    .mentions_legales p{

        width:auto;

        margin:auto;

    }

    

    .mentions_legales a{

        width:auto;

        margin:auto;

    }

   

    

}









/*

==============================================================

==============================================================

==============================================================

==============================================================

==============================================================

*/







@media screen and (min-width: 480px) and (max-width:1280px){

    .headbar{

        width:auto;

        margin:auto;

        height:auto;

        display:flex;

        flex-direction:column;

        align-items:center;

        padding:0;

    }

    

    .logo{

        width:auto;

        margin:auto;

        left:0;

        margin-bottom:20px;

    }

    .headbar nav{
        display:block;

        position:relative;

        width:100%;

        margin:auto;

        left:0;

        right:0;
    }

    .headbar nav ul{

        display:flex;

        flex-direction:row;

        justify-content:space-evenly;

        align-items:center;

        width:100%;

        height:auto;

        margin:auto;

        padding:0;
        
    }

    

    .headerbar nav ul li{

        display:block;

        width:100%;

        height:auto;

        margin:auto;       

    }

    

    .slider,

    .aside_slider a,

    .slider_bottom{

        display:none;

    }

    

    .description_slider{

        display:flex;
        
        flex-direction:column;
        
        justify-content:space-around;
        
        align-items:center;

        position:relative;

        background-color:rgba(92,168,173,0.5);

        width:auto;
        
        max-width:100%;

        margin:auto;

        margin-top:-150px;

        left:0;
        
        right:0;

        text-align:center;

    }

.description_slider span{
    
    color:rgba(255,255,255,1);

}
    

.description_slider h1 span{
    
    color:rgba(91,168,167,1);

}



    .btn_about_slider{

        display:block;

        margin:auto;

        width:auto;

        margin-top:20px;

        margin-bottom:20px;

    }

    

    .infos_active{

        width:auto;

        margin:auto;

        height:auto;

    }

    .utilities{
        width:auto;

        margin:auto;

        margin-top:-150px;

        margin-bottom:50px;
    }

    .head_utilities{

        margin:auto;

        width:auto;

    }

    

    .container_utilities{

        flex-direction:column;

        width:auto;

        margin:auto;

    }

    

    .article_left img{

        display:block;

        width:350px;

        height:auto;

        margin:auto;

        margin-top:80px;

        position:relative;

    }

    

    .sub_img1,

    .sub_img2,

    .sub_img3{

        display:block;

        text-align:center;

        margin:auto;

    }

    

    .pointy{

        display:block;

        text-align:center;

        margin:auto;

        margin-top:-6px;

    }

    

    .article_right h2{

        display:inline-block;

        position:relative;

        width:auto;

        margin:auto;
        margin-left:-50px;

        left:50%;

        right:auto;

        top:50px;
    }

    .article_right .seo{
        margin-left:-20px;
    }

    

    

    .article_right p{

        display:inline-block;

        width:50%;

        position:relative;

        margin:auto;

        margin-top:5px;

        top:40px;

        left:25%;

        right:25%;

        text-align:center;

        padding-top:20px;

    }

    



    .projects{

        width:auto;

        margin:auto;

        position:relative;

        top:50px;

    }

    

    .nav_projects,

    .nav_projects_ul{

        display:block;

        width:auto;

        margin:auto;

    }

    

    

    .nav_projects ul li{

        display:block;

        margin:0;

        width:auto;

    }

    

    .portfolio{

        width:100%;

        margin:auto;

        flex-direction:column;

        justify-content:space-between;

        align-items:center;

        flew-wrap:wrap;

        padding-bottom:50px;

    }

    .btn_1_portfolio{
    text-align: center;
    background-color: rgba(229,229,229,1);
    color: rgba(20,20,20,0.7);
    border: 0px solid transparent;
    outline:none;
    }

    #portfolio_img button{
        width:25%;
        min-width:120px;
    }

    #portfolio_img button::after{
        display:none;
    }

    

    .contact{

        width:auto;

        margin:auto;

    }

    

    .contact_footer{

        width:auto;

        margin:auto;

    }

    

    .form_container{

        width:auto;

        min-width:100%;

        margin:auto;

        margin-top:500px;

    }


}



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

 body{

    width:auto;

    margin:auto;

 }   

}