/*style css*/

@media screen and (min-width:100px) and (max-width:600px){

.image-header{width:100%;height:212px;
background-image:url(../images/team-top.png);background-repeat:no-repeat;background-size:320px 212px;}

#main{
background-color: #ffffff;margin:auto;max-width:320px;height:auto;border-right: solid #000 1px;
border-left: solid #000 1px;}

.background-menu-principal{
background-image:url(../images/menu-histoire.png);background-repeat: no-repeat;
background-color:#ffffff;background-size:320px;width:100%;height:283px;}

.top-gold-border{
background-image:url(../images/gold-border.png);background-position:bottom;
background-repeat: no-repeat;background-size:320px;
height:170px;width:100%;}
    
.bottom-gold-border{
transform: rotate(180deg);
background-image:url(../images/gold-border.png);background-position:bottom;
background-repeat: no-repeat;background-size:320px;
height:70px;width:100%;}

#logo img{width:300px;padding:50px 0;}

#button_large{display:none;}
#mySidebar_large{display:none;}

#black{background-color:#000000;width:90%;height:auto;color:#ffffff;
text-align:left;padding:5%;}

#contact {background-color:#BA903E;}
#contact p {color:#000;font-size:120%;font-weight:bolder;}
#contact p a {color:#ffffff;font-size:100%;}
#contact a {font-size:80%;color:#000;}
#contact h1 {color:#ffffff;padding-top:20px;}

}

@media screen and (min-width:601px) and (max-width:3000px){

.image-header{width:100%;height:423px;
background-image:url(../images/team-top.png);background-repeat:no-repeat;
background-size:600px 423px;}

#main{
background-color: #ffffff;margin:auto;max-width:600px;height:auto;
border-right: solid #000 1px;border-left: solid #000 1px;}

.background-menu-principal{
background-image:url(../images/menu-histoire.png);background-repeat: no-repeat;
background-color:#ffffff;background-size:600px;width:100%;height:486px;}

.top-gold-border{
background-image:url(../images/gold-border.png);background-position:bottom;
background-repeat: no-repeat;background-size:600px;
height:142px;width:100%;}
    
.bottom-gold-border{
transform: rotate(180deg);
background-image:url(../images/gold-border.png);background-position:bottom;
background-repeat: no-repeat;background-size:600px;
height:142px;width:100%;}

#logo img{width:375px;padding:50px 0;}

#button_small{display:none;}
#mySidebar_small{display:none;}

#black{background-color:#000000;width:90%;height:auto;color:#ffffff;
    text-align:left;padding:5%;}

    #contact {background-color:#BA903E;}
    #contact p {color:#000;font-size:140%;font-weight:bolder;}
    #contact p a {color:#ffffff;font-size:120%;}
    #contact a {font-size:100%;color:#000;}
    #contact h1 {color:#ffffff;padding-top:20px;}
}

*   {margin:0;padding:0;}

html {
    scroll-behavior:smooth;
    height:100%;
    font-family: 'Montserrat', sans-serif;
    text-align:center;
    color:rgb(255,255,255);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;}
 
body {background-color:#000000;background-image:url(../images/carbon.png);overflow-x:hidden;}
a:link {color:#BA903E;text-decoration:none;}
a:visited {color:#BA903E;text-decoration:none;}
a:hover {text-decoration:none;}
span{font-size:140%;padding:20px;}

#top-menu{background-color:#000000;display:block;width:100%;}

.sidebar {padding-top:20px;height:100%;width:0;position:absolute;
z-index: 1;background-color:rgba(0,0,0,.80); overflow-x: hidden;transition: 0.5s;}
.sidebar a {padding: 8px;text-decoration: none;font-size: 18px;color: #BA903E;display: block;transition: 0.3s;} 
.sidebar a:hover { color: #f1f1f1;}
.sidebar .closebtn {position:absolute;top: 0;right:10;font-size: 24px;margin-left: 0px;}

.openbtn {font-size:20px;cursor: pointer;background-color:#BA903E;color:#000;margin-bottom:30px;
padding: 10px 15px;border:solid 1px #000;border-radius:7px;}
.openbtn:hover {background-color: #000;color:#BA903E;}

#button{display:block;}

#button_small a,#button_large a {font-size:120%;font-weight:bolder;padding:20px;}
#button_small a:hover,#button_large a:hover {color:#BA903E;}
#button_small button,#button_large button{font-weight:bolder;}

#main p{color:#000000;text-align:justify;padding:5px 5%;hyphens: auto;word-wrap:normal;}
#main p span{font-size:80%;}

.logo{padding:20px;}

#menu-services{padding:20px;position:relative;}
#menu-services h1{color:#000;margin-bottom:40px;}

#img-1,#img-2,#img-3,#img-4,#img-5,#img-6,#img-7,#img-8{

    display:inline-block;
    position:relative;
    width:100px;
    height:100px;
    margin:5px;
    border-style: solid;
    border-color:transparent;
    border-width:3px;
    border-radius:10px;
    background-size:95%;
    background-position:center;
    background-repeat:no-repeat;
}

#img-1{background-image:url(../images/service-1.png);}
#img-2{background-image:url(../images/service-2.png);}
#img-3{background-image:url(../images/service-3.png);}
#img-4{background-image:url(../images/service-4.png);}
#img-5{background-image:url(../images/service-5.png);}
#img-6{background-image:url(../images/service-6.png);}
#img-7{background-image:url(../images/service-7.png);}
#img-8{background-image:url(../images/service-8.png);}

#flash-1 img,#flash-2 img,#flash-3 img,#flash-4 img,
#flash-5 img,#flash-6 img,#flash-7 img,#flash-8 img
{width:100px;height:100px;position:absolute;top:-50px;left:-50px;}



#gold{background-color:#ba903e;width:100%;height:auto;}
#gold h1,h2,h3,ul{margin-bottom:30px;}
#gold h3{color:#000;}

#black h1 {font-size:150%;color:#ba903e;font-weight:bold;margin-bottom:50px;padding:0 10px;}
#black ul {list-style-type:none;padding-left:20px;border-left:solid 1px #ffffff;}
#black li {font-size:90%;margin-bottom:10px;}

#images_1,#images_2,#images_3,#images_4{width:100%;padding-bottom:8px;}



.black-bottom{background-color:#000000;width:100%;height:100px;}

#service{
background-image:url(../images/entretien-commercial.png);
background-position:bottom;
background-repeat: no-repeat;
width:100%;height:390px;}

#faq {padding:20px;}
#faq ul{text-align:center;}
#faq li {font-size: 110%;list-style-type:none;}
#faq h1{margin-bottom:50px;}
#faq h2{background-color:#000;padding:5px 10px;display:inline-block;color:#fff;font-size:108%;}

#recrutement h2{color:#000;font-size:100%;padding:10px;}

#contact p,a{text-align:center;}

footer{position:relative;width:100%;height:20px;}

.footer_credits{width:100%;padding:20px 0;font-size:80%;bottom:0;position:absolute;}
.footer_credits a{color:#ffffff;}

.button-bottom {
    color:#000000;
    padding:0px 25px 10px 25px;
    font-size:300%;
    transform:rotate(90deg);
    position:fixed;
    bottom:25px;right:25px;
    float:right;
    background:rgba(255,255,255,0.3);border:none;}
.button-bottom:hover {opacity:0.8;color:#ffffff;}


/* CSS FOR LANDING PAGE ONLY ---------------------------------------------------------- */

.showcase{
    position:relative;
    font-family: 'Roboto';
    background-repeat:no-repeat;
    background-size: cover;
    background-position:center;
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    margin:auto;
}

.content{width:100%;height:300px;color:#fff; position:absolute;top:30%;}
.content img{max-width:320px;}
.content p {font-size:100%;color:#fff;padding:10px;margin:20px;margin-bottom:20px;}
.content a {
    font-weight:bolder;
    font-size:100%;
    text-decoration:none;
    color:#fff;
    background-color:#ba903e;
    padding:10px;
    border-radius:5px;}
.content a:hover{color:#000;font-weight:700;}
.content h1{color:#fff;font-size:90%;padding:30px;text-transform: uppercase;}
.content h2{font-size:100%;padding-top:10x;padding-bottom:50px;}

/* images code ---------------------------------------------------------- */

#images{background-color:#000000;width:80%;padding:5% 10% 0%;}
#images img{width:100%;border:2px #fff solid;}



/* form code ---------------------------------------------------------- */

form{
    position:relative;
    padding:20px;
    text-align:left;
    max-width:720px;
    margin:0 auto 0;
    background-color:#BA903E;
}

form div{width:auto;text-align:center;}

legend{color:#000000;padding:0px 5px;font-weight:bolder;text-align:center;}

fieldset{padding:10px;margin-bottom:10px;border:1px solid #000000;}
fieldset a:hover{text-decoration:underline;} 

label{color:#000000;font-size:80%;font-weight:bolder;}
input, select {margin-top:5px;margin-bottom:10px;padding:5px;width:auto;}

.submit, .reset{display:inline-block;margin:10px auto 0px;}

.cv{width:100%;}

textarea{
    width:100%;
    height:200px;
    margin:5px auto;
    resize:none;
    font-size:120%;
    text-align:left;
    padding:0;}