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

#services .content { width:1130px; display: table; margin: auto;} 

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

@media (max-width: 768px) {
    #services .content { width:calc(100% - 20px); display: table; margin: auto; }  
    #services #slider { height: 120px; } 
    #services #slider h1 { margin-top: 40px; line-height: 40px; width: 100%;  font-size: 40px; text-align: center; }
}


/* BODY */
#services #corps { width: 100%; background: #f6f6f6; clear:both; float: left; position: relative; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#services .intro { color: #333; font-size: 18px; line-height: 24px; width: calc(100% - 10px); margin-left: 10px; }
#services .star { float: left; width: 30px; margin-left: 10px; margin-right: 20px; margin-top: -2px;}
#services h2 { float: left; font-size: 24px; text-transform: uppercase; font-weight: 200; color: #bd7d16; letter-spacing: 1px; line-height: 30px; }

@media (max-width: 768px) {
    #services .star { display: none; }

}

#services .service { float: left; background: #fff; width: 350px; margin: 10px; height: 490px; border: 3px solid #f6f6f6 ;position: relative; color: #333; }
#services .service .head { float: left; width: 100%; height: 175px; background-position:50% 50%; background-size:cover;  }
#services .service .info { float: right; margin-right: 15px; margin-top: 15px; cursor: pointer; opacity: 0.85; }
#services .service .info:hover { opacity: 1; }
#services .service .inside { float: left; width: 310px; margin: 20px; height: 235px;  }
#services .service .title { float: left; font-size: 24px; line-height: 24px; font-weight: 600; color: #cf9821; text-transform: uppercase; }
#services .service .subtitle { float: left; font-size: 18px; line-height: 22px; font-weight: 400; color: #cf9821; }
#services .service .text1 { float: left; font-size: 14px; line-height: 18px; font-weight: 400; color: #333; }
#services .service .label { float: left; text-transform: uppercase; font-size: 12px; line-height: 16px; font-weight: 400; color: #cf9821; }
#services .service .inputlist { float: left; width: 300px; height: 30px; border-radius: 0px; background: #f6f6f6; border:1px solid #f6f6f6; font-size: 14px; color: #333 }
#services .service .option { font-size: 14px; }
#services .service em { font-size: 12px; }
#services .service .price { font-size: 36px; line-height: 36px; float: right; color: #cf9821;  }
#services .service .month { font-size: 18px; line-height: 18px; padding-top: 10px; float: right; color: #cf9821;  }
#services .service .total { font-size: 12px; line-height: 12px; float: right;  }

@media (max-width: 768px) {
    #services .service { width: 100%; margin: 0px; height: 490px; border: 0px solid #f6f6f6 ;position: relative; color: #333; margin-bottom: 20px; }
    #services .service .inside { width: calc(100% - 20px); margin: 10px; height: 255px;  }


}

#services .service .button1 { float: left; width: 48%; height: 40px; text-transform: uppercase; font-size: 14px; color: #fff; background: #c9bfa5; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.90; cursor: pointer; }
#services .service .button1:hover { opacity: 1; }
#services .service .button2 { float: right; width: 47%; height: 40px; text-transform: uppercase; font-size: 14px; color: #fff; background: #cf9821; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.90; cursor: pointer; }
#services .service .button2:hover { opacity: 1; }
#services .service .button3 { float: right; width:300px; height: 40px; text-transform: uppercase; font-size: 14px; color: #fff; background: #2980b9; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.90; cursor: pointer; }
#services .service .button3:hover { opacity: 1; }
#services .service .button4 { float: left; width:50px; height: 40px; text-transform: uppercase; font-size: 14px; color: #fff; background: #c9bfa5; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.90; cursor: pointer; }
#services .service .button4:hover { opacity: 1; }
#services .service .button5 { float: right; width:300px; height: 40px; text-transform: uppercase; font-size: 14px; color: #fff; background: #27ae60; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.90; cursor: pointer; }
#services .service .button5:hover { opacity: 1; }

#services .service .retourne { position:absolute; width: 350px; height: 490px; background: #fff; top: 0px; left: 0px; display: none;}
#services .service .retourne .info { margin-top: 20px; margin-right: 20px; }
#services .service .retourne .title { margin-left: 20px; }
#services .service .text { float: left; width: 310px; margin-left: 20px; font-size: 18px; line-height: 24px; font-weight: 400; color: #333; }

#services .centered .service { float: none; display: table; margin: auto; margin-top: 10px; }

#services .contact {float: left; width: calc(100% - 40px); margin-left: 20px; }
#services .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% - 10px); }
#services .inputtext { float: left; color: #333; font-size: 14px; line-height: 18px; padding: 10px; height: 208px; border: 1px solid #ddd; background: #fff; width: calc(100% - 20px); }

@media (max-width: 768px) {
    #services .service .retourne { width: 100%; }
    #services .service .button5 { width:calc(100% - 50px); }
    #services .service .button3 { width:calc(100% - 50px); }



}









#services .tableau { float: left; width: calc(100% - 40px); background: #f6f6f6; border: 1px solid #bd7d16;  -webkit-box-shadow: 0px 0px 5px 5px #ddd; box-shadow: 0px 0px 5px 5px #ddd; padding: 20px; position: relative}
#services .tableau .line {width: 1070px; height: 1px; background: #c9bfa5; position: absolute; }

#services .tableau h2 { text-align: center; text-transform: uppercase; color: #bd7d16; font-size: 24px; font-weight: 700; line-height: 24px; }
#services .tableau .labels { float: left; width: 200px; margin-left: 20px; text-align: left; color: #333; font-size: 18px; line-height: 22px; }
#services .tableau .labels img { float: left; margin-right: 20px; margin-top: 10px; }
#services .tableau .labels .label { float: left; }
#services .tableau .labels strong { color:#cf9821; }

#services .tableau .column { float: left; width: 155px; background: #fff; text-transform: uppercase;  margin-left: 15px; text-align: center; color: #bd7d16; font-size: 18px; line-height: 24px; }
#services .tableau .bloc { float: left; width: 100%; height: 44px; }
#services .tableau .bloc2 { float: left; width: 100%; height: 66px; }
#services .tableau .button { float: left; width: 100%; height: 40px; color: #fff; background: #c9bfa5; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.85;}
#services .tableau .button2 { float: left; width: 100%; height: 40px; color: #fff; background: #cf9821; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 0.85;}
#services .tableau .button:hover { opacity: 1; }
#services .tableau .button2:hover { opacity: 1; }

#services .tableau .button3 { float: left; width: 100%; height: 40px; color: #27ae60; background: #fff; letter-spacing: 1px; text-align: center; line-height: 40px; opacity: 1; font-weight: bold; }


#services .tableau_responsive { float: left; width: calc(100% + 20px); margin-left: -10px; background: #fff; display: none}
#services .tableau_responsive h2 { text-align: center; text-transform: uppercase; color: #bd7d16; font-size: 20px; font-weight: 700; line-height: 20px; width: 100%; }
#services .tableau_responsive .cell_head { float: left; width: calc(100% - 20px); padding: 10px; background: #fff; border-top: 3px solid #ddd; text-align: left; text-transform: uppercase; color: #bd7d16; font-size: 20px;}
#services .tableau_responsive .cell_head  img { float: left; margin-right: 10px; }

#services #list_choices { float: left; width: 100%; }
#services #list_choices .cell_list { float: left; width: calc(100% - 60px); padding: 10px; padding-left: 50px; background: #e8e8e8; border-bottom: 1px solid #ddd; text-align: left; text-transform: uppercase; color: #333; font-size: 18px; }

#services .tableau_responsive .cell_last { width: calc(20% - 20px); border-right: 0px solid #c9bfa5;}
#services .tableau_responsive .selected { border-top: 3px solid #cf9821 ; }
#services .tableau_responsive .list_div { display: none; }
#services .tableau_responsive .cell_1 { float: left; width: calc(70% - 21px); line-height: 35px; padding: 10px; background: #f6f6f6; border-top: 1px solid #ddd; border-right: 1px solid #ddd; }
#services .tableau_responsive .cell_1  img { float: left; margin-right: 10px; }
#services .tableau_responsive .cell_2 { float: left; width: calc(30% - 20px); padding: 10px; line-height: 35px; height: 35px;  border-top: 1px solid #ddd; background: #f6f6f6; text-align: center}
#services .tableau_responsive .cell_3  { background: #fff; }
#services .tableau_responsive .cell_4  { background: #fff; }
#services .tableau_responsive strong   { color: #cf9821; }
#services .tableau_responsive .button { float: left; width: 100%; height: 40px; color: #fff; background: #c9bfa5; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; text-transform: uppercase;}
#services .tableau_responsive .button2 { float: left; width: 100%; height: 40px; color: #fff; background: #cf9821; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; text-transform: uppercase; }
#services .tableau_responsive .button3 { float: left; width: 100%; height: 40px; color: #27ae60; background: #fff; letter-spacing: 1px; font-weight: 500; text-align: center; line-height: 40px; opacity: 1; font-weight: bold; }

@media (max-width: 768px) {
    #services .tableau { display: none;}
    #services .tableau .labels { float: left; width: 150px; margin-left: 0px; text-align: left; color: #333; font-size: 14px; line-height: 18px; }
    #services .tableau .labels img { display: none}
    #services .tableau_responsive { display: block;}

}




#mask { width: 100%; background:rgba(0,0,0,0.80); clear:both; float: left; position: absolute; top: 0px; z-index: 10000; display: none; cursor: pointer}


#bravo { background: url("/img/bienvenue.png"); width: 432px; height: 229px; left: 50%; top: 200px; margin-left: -216px; text-align: center; font-size: 20px; line-height: normal; font-weight: 200; color: #bd7d16; text-transform: uppercase; z-index: 10001; position: fixed; }
#bravo span { font-size: 45px; line-height: 30px; font-weight: 200; text-transform: none; }


#connexion { width:1252px; display:none; position: fixed; top: 200px; left: 50%; margin-left: -626px; z-index: 10001; background: #f6f6f6; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; }
#connexion .message { text-align: center; font-size: 22px; 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; }

#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; }

#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 }




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