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



/* BANNER */
#slider_connexion {width: 100%; clear: both; float: left; height: 250px; background-image:url("/img/banner-connexion.png"); background-position:50% 50%; background-size:cover; position: relative;}
#slider_connexion 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) {
    #slider_connexion { height: 110px; } 
    #slider_connexion h1 { margin-top: 40px; line-height: 40px; font-size: 40px; } 
}


/* CONNEXION */
#connexion { width: 100%; background: #f6f6f6; clear:both; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#connexion .content { width:1152px; display: table; margin: auto; }
#connexion .first { clear: both; float: left; width: 50%;  }
#connexion .star { float: left; width: 30px; margin-right: 20px; }
#connexion h2 { float: left; font-size: 24px; font-weight: 200; color: #bd7d16; letter-spacing: 2px; line-height: 24px; text-transform: uppercase; padding-top: 5px; }

@media (max-width: 768px) {
    #connexion .content { width:calc(100% - 40px); display: table; margin: auto; }
    #connexion .first { clear: both; float: left; width: 100%;  }
    #connexion .star { margin-right: 10px; }
    #connexion h2 { font-size: 20px; }
}


#connexion .error_login { color:#a94442; background: #f2dede; border: 1px solid #ebccd1; line-height: 34px; width: 474px; padding-left: 20px; margin-bottom: 20px; display: none;}
#connexion .success_login { color:#3c763d; background: #dff0d8; border: 1px solid #d6e9c6; line-height: 34px; width:474px; padding-left: 20px; margin-bottom: 20px; display: none;}

#connexion .label { float: left; color: #cf9821; font-size: 12px; line-height: 12px; text-transform: uppercase; }
#connexion .first .input { float: left; color: #333; font-size: 14px; line-height: 28px; height: 28px; border: 1px solid #ddd; background: #fff; padding-left: 10px; width:calc(100% - 95px); }
#connexion .forgot { float: right; color: #999; font-size: 12px; line-height: 12px; margin-right: 85px; }
#connexion .forgot:hover { text-decoration: underline}
#connexion .button { float: left; line-height: 28px; border: 1px solid #af9d6c; padding-left: 20px; padding-right: 20px; color: #bd7d16; text-transform: uppercase; cursor: pointer; }
#connexion .button:hover { background:#af9d6c; color: #fff; }

#connexion .button3 { float: right; margin-right: 83px; line-height: 28px; border: 1px solid #666; padding-left: 20px; padding-right: 20px; color: #666; text-transform: uppercase; cursor: pointer; }
#connexion .button3:hover { background:#666; color: #fff; }

@media (max-width: 768px) {
    #connexion .first .input { font-size: 16px; padding-left: 10px; width:calc(100% - 12px); }
    #connexion .forgot { margin-right: 0px; }

}

#connexion .second { float: left; width:calc(50% - 51px); padding-left: 50px; border-left: 1px solid #cf9821 }
#connexion .second .input { float: left; color: #333; font-size: 14px; line-height: 28px; height: 28px; border: 1px solid #ddd; background: #fff; padding-left: 10px; width:calc(100% - 40px); }
#connexion .name_div { float: left; width: 260px; }
#connexion .name_div .input { width:calc(100% - 40px); }
#connexion .label_cgv { color: #bd7d16; font-size: 12px; line-height: 12px; }
#connexion .label_cgv a { color: #bd7d16; text-decoration: underline }

#connexion .question { float: left; margin-right: 20px; }
#connexion .saviez { float: left; margin-right: 20px; font-size: 24px; line-height: 30px; color: #bd7d16; text-transform: uppercase; font-weight: 200; }
#connexion .vous { float: left; line-height: 30px;  }
#connexion .button2 { display: table; margin: auto; font-size: 16px; font-weight: 500;  line-height: 28px; padding-top: 2px; border: 1px solid #af9d6c; padding-left: 20px; padding-right: 20px; color: #bd7d16; text-transform: uppercase; cursor: pointer; }
#connexion .button2:hover { background:#af9d6c; color: #fff; }

@media (max-width: 768px) {
    #connexion .second { float: left; width:calc(100% - 0px); padding-left: 0px; border-left: 0px solid #cf9821 }
    #connexion .second .input { font-size: 16px; width:calc(100% - 12px); }
    #connexion .name_div { float: left; width: 100%; }
    #connexion .name_div .input { width:calc(100% - 12px); }
    #connexion .saviez { float: left; margin-right: 0px; font-size: 24px; line-height: 30px; color: #bd7d16; text-transform: uppercase; font-weight: 200; }
    #connexion .button2 { text-align: center}



    
}

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

#connexion .bienvenue { display: table; margin: auto; background: url("/img/bienvenue.png"); width: 432px; height: 229px; text-align: center; font-size: 24px; line-height: normal; font-weight: 200; color: #bd7d16; text-transform: uppercase; }
#connexion .bienvenue span { font-size: 60px; line-height: 30px; font-weight: 200; text-transform: none; }
#connexion .message { display: table; margin: auto; font-size: 16px; line-height: 24px; text-align: center;}