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



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

/* BODY */
#faq { width: 100%; background: #f6f6f6; clear:both; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#faq .content { width:1140px; display: table; margin: auto; }
#faq .line { float: left; width: calc(100% - 70px); padding-left: 40px; padding-right: 30px; padding-bottom: 25px; padding-top: 25px; background: #fff; box-shadow: 0px 0px 5px 1px #ddd;}
#faq .question {float: left; width: 100%; height: 30px; cursor: pointer; }
#faq .star { float: left; width: 30px; margin-right: 20px; margin-top: -2px;}
#faq .arrow_web { float: right; width: 30px; margin-left: 20px;}
#faq h2 { float: left; font-size: 24px; font-weight: 500; color: #bd7d16; letter-spacing: 1px; line-height: 30px; }
#faq p { clear: both; font-size: 18px; font-weight: 300; color: #333; line-height: 26px; }
#faq .reponse { float: left; width: 100%; display: none}

#faq .arrow_mobile { clear: both; float: left; width: calc(100% - 0px); text-align: center; display: none; }


@media (max-width: 768px) {
    #faq .content { width:calc(100% - 20px); display: table; margin: auto; }   
    #faq .line { width: calc(100% - 20px); padding-left: 10px; padding-right: 10px; padding-bottom: 10px; padding-top: 10px; background: #fff; box-shadow: 0px 0px 5px 1px #ddd;}
    #faq .question {float: left; width: 100%; height: auto; cursor: pointer; }
    #faq .star { float: left; width: 30px; margin-right: 10px; margin-top: -2px;}
    #faq h2 { float: left; width: calc(100% - 40px); font-size: 18px; font-weight: 500; color: #bd7d16; letter-spacing: 0px; line-height: 20px; }
    #faq .arrow_web { display: none; }
    #faq .arrow_mobile { display: block; }
    #faq .arrow_mobile .arr1 { transform: rotate(90deg); }
    #faq .arrow_mobile .arr2 { transform: rotate(180deg); }
}

#contact_faq { width: 100%; background: #fff; clear:both; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#contact_faq .content { width:1140px; display: table; margin: auto; }
#contact_faq .question { float: left; margin-right: 40px;}
#contact_faq h2 { float: left; margin-top: -5px; text-transform: uppercase; font-weight: 200; color: #333; font-size: 36px; letter-spacing: 2px; line-height: 44px; }
#contact_faq h2 span { color: #bd7d16; font-size: 50px; }

#contact_faq .formulaire { float: left; width: 620px; margin-left:145px; font-size: 16px; }
#contact_faq .label { float: left; color: #cf9821; font-size: 12px; line-height: 12px; text-transform: uppercase; }
#contact_faq .input { float: left; color: #333; font-size: 14px; line-height: 28px; height: 28px; border: 1px solid #ddd; background: #fff; padding-left: 10px; width:600px; }
#contact_faq .inputtext { float: left; color: #333; font-size: 14px; line-height: 18px; padding: 10px; height: 120px; border: 1px solid #ddd; background: #fff; width:590px; }

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

@media (max-width: 768px) {
    
    
    #contact_faq .content { width:calc(100% - 40px); display: table; margin: auto; }
    #contact_faq .formulaire { float: left; width: 100%; margin-left:0px; font-size: 16px; }
    #contact_faq h2 { font-size: 24px; letter-spacing: 2px; line-height: 30px; }
    #contact_faq h2 span { font-size: 30px; }
    #contact_faq .input { font-size: 16px; width:calc(100% - 12px); }
    #contact_faq .inputtext { font-size: 16px; width:calc(100% - 22px); }


    
    
}

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