@charset "UTF-8";
/* CSS Document */



/* BANNER */
#contact #slider {width: 100%; clear: both; float: left; height: 250px; background-image:url("/img/banner-connexion.png"); background-position:50% 50%; background-size:cover; position: relative;}
#contact #slider h1 {font-family: 'Raleway', sans-serif; text-align: center; text-transform: uppercase; letter-spacing: 4px;  font-size: 60px; font-weight: 200; color: #fff; width: 100%; margin-top: 140px; line-height: 60px;}

@media (max-width: 768px) {
    #contact #slider { height: 110px; } 
    #contact #slider h1 { margin-top: 40px; line-height: 40px; font-size: 40px; }
}

/* BODY */
#contact #corps { width: 100%; background: #f6f6f6; clear:both; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#contact .content { width:1140px; display: table; margin: auto; }
#contact .formulaire { display: table; margin: auto; width: 842px; height: 436px; background: url("/img/contact-formulaire.png"); font-size: 16px; }
#contact .fields { float: left; margin-left: 75px; margin-top: 85px; }
#contact .message { text-align: center; font-size: 16px; }
#contact .message_success { text-align: center; font-size: 18px; font-weight: bold; color: #cf9821; display: none}
#contact .label { float: left; color: #cf9821; font-size: 12px; line-height: 12px; text-transform: uppercase; }
#contact .input { float: left; color: #333; font-size: 14px; line-height: 28px; height: 28px; border: 1px solid #ddd; background: #fff; padding-left: 10px; width:700px; }
#contact .inputtext { float: left; color: #333; font-size: 14px; line-height: 18px; padding: 10px; height: 60px; border: 1px solid #ddd; background: #fff; width:690px; }

#contact .name_div { float: left; width: 370px; }
#contact .name_div .input { width:calc(100% - 40px); }

#contact .button { float: left; line-height: 28px; border: 1px solid #af9d6c; padding-left: 20px; padding-right: 20px; color: #bd7d16; text-transform: uppercase; cursor: pointer; }
#contact .button:hover { background:#af9d6c; color: #fff; }

@media (max-width: 768px) {
    
    #contact .content { width:calc(100% - 40px); display: table; margin: auto; }
    #contact .formulaire { display: table; margin: auto; width:calc(100% - 40px); padding: 20px; height: auto; background:none; border: 1px solid #bd7d16; font-size: 16px; }
    #contact .fields { float: left; margin-left: 0px; margin-top: 0px; width: 100% }
    #contact .input { float: left; color: #333; font-size: 16px; line-height: 28px; height: 28px; border: 1px solid #ddd; background: #fff; padding-left: 10px; width:calc(100% - 20px); }
    #contact .inputtext { float: left; color: #333; font-size: 16px; line-height: 18px; padding: 10px; height: 60px; border: 1px solid #ddd; background: #fff; width:calc(100% - 22px); }
    #contact .name_div { float: left; width: 100%; }
    #contact .name_div .input { width:calc(100% - 20px); }
    #contact .button { padding: 0px; width:calc(100% - 4px); line-height: 34px; text-align: center; border: 2px solid #bd7d16;}
    
    #contact .input { border-radius: 0px; -webkit-appearance: none; -webkit-border-radius:0px; }
    #contact .inputtext { border-radius: 0px; -webkit-appearance: none; -webkit-border-radius:0px; }
    #contact .inputlist { border-radius: 0px; -webkit-appearance: none; -webkit-border-radius:0px; }
    
}

#contact .input:focus {
  outline: none;
  outline: 5px auto #cf9821;
}
#contact .inputtext:focus {
  outline: none;
  outline: 5px auto #cf9821;
}



#contact #bottom { width: 100%; height: 275px; background: #333; clear:both; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#contact .centre_bottom { position: absolute; top: 0px; height: 275px; width: 380px; left: 50%; margin-left: -190px; background: #fff; text-align: center; } 
#contact h2 { text-align: center; text-transform: uppercase; letter-spacing: 2px;  font-size: 24px; font-weight: 200; color: #bd7d16; line-height: 24px; } 
#contact .button2 { display: table; margin: auto; line-height: 28px; border: 1px solid #af9d6c; padding-left: 20px; padding-right: 20px; color: #bd7d16; text-transform: uppercase; cursor: pointer; }
#contact .button2:hover { background:#af9d6c; color: #fff; }

@media (max-width: 768px) {
    #contact #bottom { width: 100%; height: 215px; }
    #contact .button2 { border: 2px solid #bd7d16; }
    #contact .centre_bottom { position: absolute; top: 0px; height: auto; width: 100%; left: 0%; margin-left: 0px; background: #fff; text-align: center; } 

}