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

/* BANNER */
#proposer .slider {width: 100%; clear: both; float: left; height: 250px; background-image:url("/img/banner-proposer.png"); background-position:50% 50%; background-size:cover; position: relative;}
#proposer .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;}


/* PROPOSER */
#proposer { width: 100%; background: #f6f6f6; clear:both; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#proposer .content { width:1152px; display: table; margin: auto; }

@media (max-width: 768px) {
   #proposer .content { width:calc(100% - 20px); display: table; margin: auto; } 
    #proposer .slider h1 { margin-left: 0px; margin-top: 40px; width: calc(100% - 75px); text-align: cenetr; font-size: 40px; line-height: 40px; letter-spacing: 2px; width: 100%; }  
    #proposer .slider {height: 160px; }
}


#proposer .message_top { text-align: center; font-size: 18px; line-height: 24px; }
#proposer .message_top strong { text-transform: uppercase; font-weight: 700; color: #cf9821; }

@media (max-width: 768px) {
    #proposer .message_top { width:calc(100% - 40px); display: table; margin: auto; text-align: center; }

}

#proposer .first { clear: both; float: left; width: 50%;  }
#proposer .first .star { float: left; width: 30px; margin-right: 20px; } 
#proposer .first h2 { float: left; font-size: 24px; font-weight: 200; color: #bd7d16; letter-spacing: 2px; line-height: 24px; text-transform: uppercase; padding-top: 5px; }

#proposer .first .label { float: left; color: #cf9821; font-size: 12px; line-height: 12px; text-transform: uppercase; }
#proposer .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); }
#proposer .first .inputlist { float: left; width:calc(100% - 83px); height: 30px; border-radius: 0px; background: #fff; color: #333; border: 1px solid #ddd; font-size: 14px; }

#proposer .first .forgot { float: right; color: #999; font-size: 12px; line-height: 12px; margin-right: 85px; }
#proposer .first .forgot:hover { text-decoration: underline}
#proposer .first .button { float: left; line-height: 28px; border: 1px solid #af9d6c; padding-left: 20px; padding-right: 20px; color: #bd7d16; text-transform: uppercase; cursor: pointer; }
#proposer .first .button:hover { background:#af9d6c; color: #fff; }

#proposer .first .firstname_div { float: left; width: 260px; }
#proposer .first .firstname_div .input { width:calc(100% - 40px); }
#proposer .first .name_div { float: left; width: 260px; }
#proposer .first .name_div .input { width:calc(100% - 40px); }

#proposer .first .zip_div { float: left; width: 150px; }
#proposer .first .zip_div .input { width:calc(100% - 40px); }
#proposer .first .city_div { float: left; width: 370px; }
#proposer .first .city_div .input { width:calc(100% - 40px); }

#proposer .first .login_div {width: calc(100% - 115px); padding: 15px; border: 1px solid #c9bfa5;  }

@media (max-width: 768px) {
    #proposer .first { width:calc(100% - 20px); margin-left: 10px;  }
    #proposer .first .star { display: none; } 
    #proposer .first .input { font-size: 16px; width:calc(100% - 12px); -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px; }
    #proposer .first .firstname_div { float: left; width: 100%; }
    #proposer .first .name_div { float: left; width: 100%; margin-top: 12px; }
    #proposer .first .firstname_div .input { width:calc(100% - 12px); }
    #proposer .first .name_div .input { width:calc(100% - 12px); }
    #proposer .first .zip_div .input { width:calc(100% - 30px); }
    #proposer .first .city_div { float: left; width:calc(100% - 150px); }
    #proposer .first .city_div .input { width:calc(100% - 12px); }
    #proposer .first .inputlist { width:calc(100% + 8px); height: 38px; font-size: 16px; -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px; }    
}

#proposer .login_div .checkbox { float: left; width: 25px; }
#proposer .login_div .text_check { float: left; width: calc(100% - 40px); }
#proposer .login_div .create_div { float: left; width:50%; }
#proposer .login_div .create_div .input { width:calc(100% - 30px); }
#proposer .login_div .sep { float: left; width:100%; height: 1px; background: #c9bfa5; }
#proposer .login_div .already { float: right; line-height: 30px; margin-right: 20px; }



#proposer .second { float: left; width:calc(50% - 51px); padding-left: 50px; border-left: 1px solid #cf9821 }
#proposer .second .star { float: left; width: 30px; margin-right: 20px; } 
#proposer .second h2 { float: left; font-size: 24px; font-weight: 200; color: #bd7d16; letter-spacing: 2px; line-height: 24px; text-transform: uppercase; padding-top: 5px; }

#proposer .second .label { float: left; color: #cf9821; font-size: 12px; line-height: 12px; text-transform: uppercase; }
#proposer .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% - 20px); }
#proposer .second .inputtext { float: left; color: #333; font-size: 14px; line-height: 20px; height: 100px; border: 1px solid #ddd; background: #fff; padding: 10px; width:calc(100% - 30px); }
#proposer .second .inputlist { float: left; width:calc(100% - 40px); height: 30px; border-radius: 0px; background: #fff; border: #333; border: 1px solid #ddd; font-size: 14px; }


#proposer .second .icone { float: left; cursor: pointer; font-size: 8px; text-transform: uppercase; color: #333; text-align: center; margin-right: 10px; width: 43px; }
#proposer .second .div_im { float: left; width: 43px; height: 43px; text-align: center}
#proposer .second .icone img { width: 40px; }

#proposer .second .half_div { float: left; width:50%; }
#proposer .second .half_div .input { width:calc(100% - 30px); }
#proposer .second .half_div2 { float: left; width:50%; }
#proposer .second .half_div2 .input { width:calc(100% - 20px); }

#proposer .second .zip_div { float: left; width: 180px; }
#proposer .second .zip_div .input { width:calc(100% - 40px); }
#proposer .second .city_div { float: left; width: 340px; }
#proposer .second .city_div .input { width:calc(100% - 16px); }

#proposer .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; }
#proposer .button2:hover { background:#af9d6c; color: #fff; }

@media (max-width: 768px) {
    #proposer .second { float: left; width:calc(100% - 20px); padding-left:0px; border: 0px; margin-left: 10px;}
    #proposer .second .star { display: none; } 
    #proposer .second .input { font-size: 16px; width:calc(100% - 12px); -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px; }
    #proposer .second h2 { letter-spacing: 0px; }
    #proposer .second .icone { font-size: 10px; margin-right: 10px; width:calc(20% - 10px); }
    #proposer .second .half_div { float: left; width:100%; }
    #proposer .second .half_div .input { width:calc(100% - 12px); }
    #proposer .second .half_div2 { float: left; width:100%; margin-top: 10px;  }
    #proposer .second .half_div2 .input { width:calc(100% - 12px); }
    #proposer .second .inputlist { width:calc(100% + 8px); height: 38px; font-size: 16px; -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px; }  
    #proposer .second .zip_div { float: left; width: 100%; }
    #proposer .second .zip_div .input { width:calc(100% - 12px); }
    #proposer .second .city_div { float: left; width: 100%; }
    #proposer .second .city_div .input { width:calc(100% - 12px); }
    #proposer .second .inputtext { font-size: 16px; padding: 10px; width:calc(100% - 20px); -webkit-appearance: none; -webkit-border-radius:0px; border-radius: 0px; }

}

#proposer i:focus {
  outline: none;
  outline: 5px auto #cf9821;
}

#proposer .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; }
#proposer .bienvenue span { font-size: 60px; line-height: 30px; font-weight: 400; }
#proposer .message { display: table; margin: auto; font-size: 16px; line-height: 24px; text-align: center;}

@media (max-width: 768px) {
    #proposer .bienvenue { display: table; margin: auto; background:#fff; width: 100%; border: 1px solid #bd7d16; height: 229px; text-align: center; font-size: 24px; line-height: normal; font-weight: 200; color: #bd7d16; text-transform: uppercase; }

}