/* GLOBAL */
@font-face {
	font-family: "Bodega Sans";
	src: url("../fonts/BodegaSans_Black.ttf");
}


* {
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 62.5%;
}

body {
    background: black;
    /*color: #FFD700;#e1b230;*/
    color:white;
	font-family: "Open Sans", arial, sans-serif;
	font-size: 1.4rem;
	line-height: 2;
}


.container {
    margin: 0 auto;
    max-width: 1500px;
}

/* HEADER */

header {
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    position:fixed;
    width:100%;
    top:0;
    background-color: black;
    z-index: 9999;
}

#logo img{
    display: flex;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    float:left;
   
}


header nav ul{
    display: flex;
    flex-direction: row;
    justify-content: start;
    font-family: "Bodega Sans", arial, sans-serif;
	line-height: 1.2;
	text-align: left;
    
  
}

header nav li{
    display: flex;
   
}

header nav a {
	font-size: 1.9rem;
    padding: 10px;
    text-decoration: none;
    margin-top: 40px;
}

span{
    color: white;
    vertical-align: center;
}
span:hover{
    color: #e39c27;
    vertical-align: center;
}

/* MAIN*/

main h1, main h2, main h3 {
	font-family: "Bodega Sans", arial, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
}

.container h1{
    text-align:center;    
}

#savoirfaire H1{
     text-align:center;   
}

.histo .savoirfaire{
    width:100%;
}
.histo article{
    display:inline-block;
    padding:0;
    width:100%;
    margin:0;
    text-align:left;
    padding:0 25px 50px;
 }
 #imgleft{
    width:40%;
    float:left;
    margin-right:25px;
    margin-top: 50px;
}

#imgrigth{
    width:40%;
    float:right;
    margin-left:25px;
    margin-top: 50px;
}

#imgrigth1{
    width:40%;
    float:right;
    margin-left:25px;
    margin-top: 0;
}

.histo h1, .savoirfaire h1 {
   font-size:20px;
   text-align: center;
}

h1, h2{
    font-weight: 300;
    display: table;
    padding-bottom: 5px;
    position: relative;
    margin-left : auto;
    margin-right : auto;
}   
H1:after,h2:after{
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    bottom: 0;
    left: 20%;
    right: 20%;
    border-bottom: 2px solid #e39c27;
}

.histo p, .histo span{
    font-size:11px;
    text-align: left;
 }
 
#savoirfaire article p{
    text-align: left;
    margin-top: 0px;
    margin-left: 5%;
    margin-right: 5%;
}
 
#madein img{
    width:10%;
 }

#footer_menu a{
    font-size:10px;
 }

#pub p, #pub a {
    font-size:10px;
}
  
p.contact, .form-group { 
   	font-size: 20px; 
	margin-bottom: 5px; 
	line-height: 20px; 
	color: #4b4b4b; 
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#contact { 
	margin-bottom: 0px; 
}

#contact a {
	color: white;
}

#contact, #suivre{
    text-align: center;
}

#contact h2:after{
    content:"";
    display: block;
    border-top: 1px solid white;
    margin-top: 10px;
}

.art{
    display:flex;
    flex-basis: auto;
    justify-content :space-evenly;
    line-height:2;
    text-align:center;
    vertical-align:top;
    color: white;
}

.art a.href{
    color: white;
}

/*Page mentions */

.mentions{
    font-size: 12px;
    margin-left: 5%;
    margin-right: 5%;
}

.mentions h1 h2{
    color:white;
    font-size: 12px;
}

.mentions h3{
    font-size: 14px;
    text-decoration: underline;
}

.credit{
    display:flex;
}



/* FOOTER */
footer {
    box-shadow: 0 0 25px rgba(0,0,0,0.2);
	/*color: rgba(255,255,255,0.75);*/
	color: white;
	text-align: center;
}

footer h2{
    font-family: "Bodega Sans", arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}

footer a{
    color: white;
}

footer #footer_menu{
    padding:15px;
    color: white;
}

footer #pub{
    padding: 5px;
    
}


/* MEDIA QUERIES */
/*permet de régler le problème de la taille de l'image qui devient trop grande quand écran inférieur à 350px*/
@media screen and (min-width: 350px){ /*s'applique jusqu'à 350px maximum*/
    header{
        margin:0;
        max-width: auto;
        position:relative
    }
    header nav a {
        font-size: 0.9rem;
        padding: 10px;
        text-decoration: none;
        margin-top: 20px;
    }
    #logo img{
        width: 70px;
        float:left;
        margin-left: 10px;
    }
    
    div.container {
        margin: 0 ;
        max-width: auto;
    }
    H1{
        font-size: 12px;
    }

    .slider {
        /*  background-color: #1E1E1E;*/
         background-color:black;
         display: block;
         margin:10px;
         
     }
 
     .flexslider {
         background-color: black;
         border:0;
     }
 
     .slides{
        width: 100%;
        overflow: hidden;
        max-height:100%;
        margin-top: -10px;
    }
    
     .slides img{
        display:none;
        max-width: 0%;
    }

    p {
        font-size: 10px;
        text-align: center;
    } 
    article h2{
        font-size: 10px;
    }
    
    #savoirfaire article p{
       margin-top: 20px;
    }
    
    .art{
        display:block;
        flex-basis: auto;
        justify-content :space-evenly;
        line-height:2;
        text-align:center;
        color: white;
    }
       
    .plan iframe{
        border:none;
        width: 50%;
        height: 110px;
    }
    #suivre img{
        width:30px;
        height:30px;
    }
   
}
@media screen and (min-width: 768px){ /*s'applique à partir de 768px et au-delà*/
    /* GLOBAL */

 /* HEADER */
    header{
        margin:0;
        max-width: auto;
        position:relative
    }
    
    div.container {
        margin: 0 ;
        max-width: auto;
    }
    h1{
        font-size: 22px;
    }

    main{
        margin-top:30px;
    }
    
  
    /* slider commun*/
    .slider {
       /*  background-color: #1E1E1E;*/
        background-color:black;
        box-shadow: 0 0 25px white;
        display: block;
        margin:10px;
        margin-top: 6%;
    }

    .flexslider {
        background-color: black;
        border:0;
    }

    .slides{
        width: 100%;
        overflow: hidden;
        max-height:100%;
        margin-top: 10px;
    }
    .slides img {
        max-width: 50%;
        max-height:auto;
        float:left
    }
    .slides h1 {
        text-align: center;
        font-size: 18px;
    }  
    .slides p {
        text-align: center;
    }   
    
    /* histo*/
    .histo{
        margin: 0;
        padding: 0px;
    }

    h2{
        font-size:18px;
    }

    article h2{
       margin-top: 50px; 
    }
    
    
    .histo p, .histo span{
         font-size:14px;
    }
    
    #footer_menu a{
        font-size:12px;
     }
    
     #pub p, #pub a {
        font-size:12px;
     }
        
    .plan iframe{
        border:none;
        width: 100%;
        height: 220px;
    }
    
        

    /* pour effet sur les pages index*/

   .effet {
        margin: 10px 40px ;
        max-width: auto;
        border-top: 25px blue;
        box-shadow: 0 0 25px black;
    } 

    header{
        display: flex;
        justify-content: center;
        margin-bottom: 5%;
    }

    .index,  .mentions_legales{
        background-image: url("../img/pagebg.jpg");
        background-repeat: no-repeat;
        background-size: contain;
    }

    .heb{
        position: absolute;
        right: 40%; 
    }

    #madein{
        height: 150px;
        background-image: url("../img/footer.png");
        background-repeat: repeat-x;
    }
   
    #madein img{
        max-width: 100px;
        max-height: auto;
        padding:30px 30px 0;
    }
    
    /* FOOTER */
    #footer_menu{
        margin: 0;
        padding:0;
    }
}
@media screen and (min-width: 1025px){ /*s'applique à partir de 1025px et au-delà*/
    /* HEADER */

    header nav a {
        font-size: 15px;
        padding: 10px;
        text-decoration: none;
        margin-top: 20px;
    }
    #logo img{
        width: 120px;
        float:left;
        margin-left: 10px;
    }
 
    .index{
        max-width: auto;
        font-size: 15px;
       
    }
    header nav{
        margin:0 50px;
    }

    nav li:hover .submenu{
        display:flex;
        flex-direction: column;
        position: absolute;
        margin-left:60px;
    }
         
    main.container {/*a garder */
        margin: 0 20px 0px;
       max-width: 100%;
    }
    .slides img {
        max-width: 40%;
        max-height:auto;
        float:left
    }

    .slides h1 {
        text-align: center;
        font-size: 18px;
    }  
    .slides p {
        text-align: center;
        margin-left: 10%;
        margin-right: 10%;
    }   

    #imgleft{
    width:30%;
    float:left;
    margin-right:25px;
    margin-top: 50px;
}

#imgrigth{
    width:30%;
    float:right;
    margin-left:25px;
    margin-top: 50px;
}

#imgrigth1{
    width:30%;
    float:right;
    margin-left:25px;
    margin-top: 0;
}

    #footer_menu a{
        font-size:15px;
     }
    
     #pub p, #pub a {
        font-size:15px;
     }

     p {
        font-size: 15px;
        text-align: center;
    } 
    article h2{
        font-size: 20px;
    }
    /* pour effet sur les pages savoir et maison */

    .effet {/*a garder */
     max-width: 100%;
       margin: 10px 10px ;    
    }

    
    .index,  .mentions_legales {/*a garder */
        background-repeat: repeat;
    }

           
    /* MAIN INDEX */
    #madein{
        height: 150px;
        background-image: url("../img/footer.png");
        background-repeat: repeat-x;
    }
   
    #madein img{
        max-width: 220px;
        max-height: auto;
        padding:30px 30px 0;
    }
    
    /* FOOTER */
    footer a{
      font-size: 15px;
    }    
    
}