/** ESSENTIALS **/
@font-face {
    font-family: Roboto;
    src: url(Roboto-Regular.ttf);
}
@font-face {
    font-family: Raleway;
    src: url(Raleway-Regular.ttf);
}
*{
    box-sizing:border-box;
    font-family: OpenSans;
    scroll-behavior: smooth;

}

body, html {
    margin: 0;
    padding: 0;
    background-color: #0b1e2c;
    color:#fff;
    height: 100%;

}
.row{
    margin: 0;
}
.content{
    padding: 50px;
}
.container {
    width:900px;
    margin: 0 auto;
}
a{
    color: #fff;
    text-decoration: none;
}
/** NAV **/
header{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 70px;
    z-index: 50;
}
nav ul{
    background-color: #0b1e2c;
    border-bottom: 2px solid #4f787a;

}
nav ul li{
    list-style-type: none;
    display: inline-block;
    width: 16%;
    text-align: center;
    padding:20px 0;
}
nav ul li a{
    letter-spacing: 0.6em;
    font-family: Raleway;
    font-size: 14px;

    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
nav ul li a:hover{

    color: #608e8e;
    text-decoration: none;

}
/** ERRORS & SUCCESS **/

.errors{
  margin: 10px 0px;
  padding:12px;
  color: #D8000C;
  background-color: #FFBABA;
  font-family: Roboto;
}
.success{
  margin: 10px 0px;
  padding:12px;
  color: #4F8A10;
  background-color: #DFF2BF;
  font-family: Roboto;
}
.success i, .errors i{
  margin:10px 22px;
  font-size:2em;
  vertical-align:middle;
}

/** SLIDER PRINIPALE **/

.slider{
    background-image: url("../img/bg_accueil_2.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}
.corner{
    width: 35%;
    -webkit-background-size: cover;
    background-size: cover;
}

.dulo{
    margin-left: 50px;
}
.dulo img{
    margin-top: -20px;
    width: 140px;
}
.dulo h4{
    font-family: Raleway;
    letter-spacing: 0.6em;
    font-size: 18px;
    margin-left: -10px;
    margin-top: 10px;
}
.dulo .blue{
    color : #608e8e;
    margin-top: -6px;
}
.roboto{
    font-family: Roboto !important;
}

/**SLIDER NOTRE METIER **/
.title{
    font-family: Raleway;
    font-weight: 200;
    letter-spacing: 0.6em;
    margin-left: 20px;
}
hr{
    background-color: #44696d;
    height: 1px;
    width: 98%;
    margin-bottom: 50px;
}
.slider_full{
    width: 100%;
}
.pmetier{
    letter-spacing: 0.1em;
    font-size: 16px;
    font-family: Raleway;
    margin-top: 30px;
}
.pmetier span{
    font-family: Raleway;
}
.content .subtitle{

    font-family: Raleway;
    letter-spacing: 0.6em;
    color: #608e8e;

}

/** OPTIMUM **/
.img2_optimum{
    width: 130%;
    z-index: 50;
    margin-top: 65px;
}

/** ARCA **/
.lignearca1{
    width: 53%;
}
.lignearca2{
    width: 46%;
    padding: 0 50px;
}
.img_arca2{
    width: 100%;
    margin-top: -160px;
}
.arca1{
    width: 44%;
}
.arca2{
    width: 55%;
}

/** PUSILLI **/
.pusilli1{
    width: 44%;
    padding: 0 50px 0 0;
}

/** INSPIRATION **/


.img_inspi1{
    display: block;
    width: 100%;
}
.img_inspi2{
    display: block;
    width: 101%;
    margin-top: -210px;
}
.p_inspi1{
    display: inline-block;
    
}
/** PUSILLI */
.pusilli{
    margin-top: 25px;
}
.pusilli2{
    width: 55%;
}
.pusilli3{
    margin-top: 50px;
    width: 50%;
}
/* VR */

.vr img{
    width: 100%;
}
.video{
    display: block;
    
    width: 100%;
    margin: 50px auto;
}

/* MENTIONS LEGALES */
.mentions{
    width: 80%;
    margin: 0 auto;
}
.mentions h3{
    margin-top: 25px;
    font-size: 20px;
    font-family: Raleway;
    letter-spacing: 0.6em;
    color: #608e8e;
}
.mentions p{

    letter-spacing: 0.1em;
    font-size: 16px;
    font-family: Raleway;
    margin-top: 30px;

}
/* REALISATION */
.rea img{
    border: 2px solid #44696d;
}
/* CONTACT */

.contact .adress{
    text-align: center;
}
.contact .adress h5, .contact-form h5{
    margin-top: 20px;
    font-family: Raleway;
    font-weight: 200;
    letter-spacing: 0.6em;
    color: #608e8e;
}

/* CONTACT FORM */

form{
    margin-top: 100px;
}

.contact-form h5{
    margin-top: 0;
}
.contact-form .label{
    line-height: 40px;
}
.contact .adress p, form p{
    font-family: Roboto;
    letter-spacing: 0.1em;
    font-size: 13.5px;
}

form input[type=text],form input[type=tel],form input[type=email],form select, textarea, button[type=submit]{
    width: 100%;
    border: none;

    background-color: #608e8e;
    height: 40px;
    color: #fff;
    padding: 5px;
    font-family: Roboto;
}
button[type=submit]{
    padding: 8px 0px;
    height: 100%;
    color: #0b1e2c;
    font-size: 20px;
    font-family: Raleway;
    letter-spacing: 0.6em;
    cursor: pointer;

    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
button[type=submit]:hover{
    background-color: #0b1e2c;
    border: 1px solid #608e8e;
    color: #608e8e;
}
textarea{
    height: 300px;
}

footer{

    background-color: #608e8e;
    color: #fff;
    text-align: center;
    line-height: 50px;
    height: 50px;
}
footer p{
    margin: 0;
    font-family: Roboto;
}
footer a{
    font-family: Roboto;
    text-decoration: none;
}
footer a:hover{
    color: #fff;
    text-decoration: none;
}
/** MEDIA QUERIES 960 px **/

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

    .corner{
        width: 100%;
    }
    
}
@media screen and (min-width: 1080px){

    .img2_optimum{
        margin-top: 130px;
        width: 125%;
    }

}
@media screen and (max-width: 980px) {
    
    header{
        position: relative;
        height: auto;
    }
    nav ul li{
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    ul{
        margin-bottom: 0px;
        padding-left: 0px;
    }
    .dulo{
        width: 150px;
        margin: 0px auto 0px auto;
    }
    .dulo h4{
        text-align: center;
        margin: 10px auto;
    }
    .dulo img{
        display: block;
        margin: 0 auto;
     }
    .contact-form, .subtitle{
        margin-top: 20px;
     }
    .lignearca2, .lignearca1{
        width: 100%;
        margin-bottom: 20px;
        padding: 0;
    }
    .content{
        padding: 10px;
    }
    .img_arca2{
        width: 100%;
        margin-top: 0;
    }
    .img2_optimum,.arca1, .arca2{
        width: 100%;
    }
    .pusilli1, .pusilli2, .pusilli3{
        width: 100%;
    }
    .img_inspi1{
        display: none;
        
    }
    .img_inspi2{
        margin-top: 0;
        width: 100%;
    }
    .corner{
        width: 80% !important;
    }
    .adress{
        margin-top: 30px;
    }
    .title_inspirations{
        font-size: 18px !important;
    }
    .title{
        margin-top: 20px;
        text-align: center;
    }
}