@font-face {
    font-family: 'Alba';
    src:url('../fonts/Alba.ttf.woff') format('woff'),
        url('../fonts/Alba.ttf.svg#Alba') format('svg'),
        url('../fonts/Alba.ttf.eot'),
        url('../fonts/Alba.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-bold-webfont.eot');
    src: url('../fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-bold-webfont.woff') format('woff'),
         url('../fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('../fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-medium-webfont.eot');
    src: url('../fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-medium-webfont.woff2') format('woff2'),
         url('../fonts/raleway-medium-webfont.woff') format('woff'),
         url('../fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('../fonts/raleway-medium-webfont.svg#ralewaymedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*GLOBAL */

.logoTop{
  width: 250px;
  float: left;
  margin-left: 30px;
}

.recherche_p {
  margin-right: 30px;
  width: 400px;
  float: right;
  margin-top: 180px;
}

.block_center{ /* classe pour center un block dans toute la largeur de la page */
  width: 925px;
  margin: 0px auto;
}

/* Fond du gadget de la barre de recherche */


/* Champ de saisie */
#searchthis #search {
  float:right;
  background-color: #ffffff;   /* Couleur de fond */
  border-style: solid;   /* Style de la bordure  */
  border-width: 1px;   /* Epaisseur de la bordure  */
  border-color: #dddddd;   /* Couleur de la bordure  */
  padding: 5px 10px 5px 10px;   /* Espace entre les bords et le contenu : haut droite bas gauche  */
  width: 50%;   /* Permet d'ajuster la largeur du champ de saisie à 100% */
  box-sizing: border-box;   /* Important */
  font-family: Raleway;   /* Police du texte */
  font-size: 15px;   /* Taille de la police du texte */
  font-weight: bold;   /* Graisse du texte : normal = normal ; bold = gras */
  letter-spacing: 1px;   /* Espacement des caractères */
}

/* Bouton valider */
#searchthis #search-btn {
  float:right;
  background-color: red;   /* Couleur de fond */
  padding: 5px 10px 5px 10px;   /* Espace entre les bords et le contenu : haut droite bas gauche  */
  width:50%;   /* Permet d'ajuster la largeur du champ de saisie à 100% */
  box-sizing: border-box;   /* Important */
  font-family: Raleway;   /* Police du texte */
  font-size: 15px;   /* Taille de la police du texte */
  font-weight: bold;   /* Graisse du texte : normal = normal ; bold = gras */
  letter-spacing: 2px;   /* Espacement des caractères */
  text-transform: uppercase;   /* Transforme le texte en majuscules */
  color: #ffffff;   /* Couleur du texte */
}

/* Bouton valider quand survolé par la souris */
#searchthis #search-btn:hover {
  background-color:#71a615;   /* Couleur de fond */
  cursor: pointer;   /* Apparence du curseur comme pour un lien */
}


html, body {
    background-size:cover;
    margin:0;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
}

body{
    background-image:"images/fond-website.jpg";
    background-attachment:fixed;
}

#wrapper{
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

#navigation{
font-family: Raleway;
font-size:25px;
text-decoration: none;
text-transform: uppercase;
}

#menu{
margin: 30px 0px;
padding-top: 8px;
padding-left: 0px;
list-style-type: none;
  }  

#menu li{
float: left;
margin-right: 80px;
}


#menu li a{
text-decoration: none;
font-weight: bold;
color: #ffdd00;
position: relative;
display: block;
}

#menu li a img{
  position: absolute;
  top: 0px;
  right: -49px;
  transition: 0.35s;
}

#menu li a:hover{
color: red;

}


#menu li a:hover img{
   animation:2s  shake 0s infinite;
}

/*CONTENT*/

.menu_logo{
  float: left;
  margin: 5px;
  margin-top: -14px;
  margin-left: -14px;
}

#content{
  margin-top: 50px;
}

 h1{ 
 font-family: 'Alba';
 color: red;
 text-transform: uppercase;
 font-size: 25px;
 line-height: 1.5em;
 padding-top: 15px;
} 

p{
font-family: 'Raleway';
font-weight: bold;
color: white;
font-size: 16px;
line-height: 1.5em;
text-align: justify; 
margin: 14px 0px;
}

/* Gallery */
.gallery {
  margin: 20px 60px;
  text-align: center;
}

.gallery a {
  padding: 20px;
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
}

.gallery img {
    width: 100%;  
}

/* FABRICATION */
.fabrication{
  margin-bottom: 33px;
}

/*FOOTER*/

strong{
  font-weight: bold;
  color:#ffdd00;}

.clear{
    clear: both;
}

#footer{
   background-color: #71a615;
}
.col1Footer,.col2Footer, .col3Footer{
    float: left;
    width: 30%;
    margin: 0px 1.5%;
}


.col1Footer ul{
  color: #fff;
  list-style: none; 
}

.col1Footer ul li{
  color: #fff;
}
.col1Footer ul li a{
  color:#fff;
}

.col2Footer{
   background-color: #71a615;
   text-decoration: none;
}


#footer li{
font-family: 'Raleway';
font-weight: bold;
text-decoration: none;
}    


#footer p{
    font-size: 16px;
    color:#fff;
    text-align: left;
}


#footer h4{
font-family: 'Raleway';
color: red;
/*display: none;*/
}


/*CONTACT*/

#monForm{
   position:absolute;
   top:50%;
   left:50%;
   width:1766px; /* largeur */
   height:609.8px; /* hauteur */
   margin-left:-150px; /* -largeur/2 */
   margin-top:-100px; /* -hauteur/2 */
   background:red;
}

.formulary{
  margin: 20px 100px;
  text-align: center;
}

.formulary h1{
  text-align: left;
}


.target {
  opacity: 0;
} 
.visible {
  opacity:  1;
}



/* ANIMATIONS CSS */


@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
}


#monBouton{
  background: url('../images/fleche_remonte.png') no-repeat;
  border-radius: 0px;
  border: 0px;
  display: block;
  width: 75px;
  height: 75px;
  background-size: cover;
  float: right;
  margin-bottom: 20px;
}

#submit i{
    background: url("../images/Bouton envoyer form.png");
}