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

/* Reset */
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a { text-decoration: none; color: black;}
.wrap { width: 1000px; margin: 0 auto; background:#ffffff;}
h1, h2, h3, h4, h5 {font-weight: normal;}
body { font-family: 'Open Sans', sans-serif; background:#f2f2f2;}
#shadowing { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1500; opacity:0.5; filter: alpha(opacity=50);}
#box { display: none; position:fixed; top: 20%; left: 35%; width: 35%; height: 260px; max-height:400px; padding: 0; margin:0; border: 1px solid black; background-color: white; z-index:2000; overflow: auto; }
.desktop { display: block;}
.mobile { display: none; }

/*HEADER*/
header { position: relative; height:117px; width:100%;}
#header-content { width: 100%; height: 117px; background-color: #ffffff;}

#rg { display: block; float: left; padding: 10px; box-sizing: border-box; }
#header-right h1 { color: #095379; font-size: 14px; float: right; font-weight: 600;}
#header-right {float: right; width:25%; margin:35px; }
#header-right img {display:block;float:right; }

/*VISUEL*/
#visuel { width: 100%; height: 615px; float:left; }

/*BASELINE*/
#baseline { width: 100%; height:104px; float:left; background:#000; }
#baseline h1 { text-align:center; color:#f9833b; font-size: 30px; display:block; padding-top: 13px;}
#baseline h2 { text-align:center; color:#fff; font-size: 20px; display:block; font-weight:300; text-transform: uppercase;}

/*FORM*/
#zone-form { width: 100%; height: auto; float: left; background-color: #fff; }
#form-contour { width: 93%; height:auto; border: solid 1px #fc7100; margin:auto; margin-top: 35px; margin-bottom: 35px; }
#form { width: 679px; height: auto; color: #00777e; font-size: 14px; margin:auto; }
#form-head { background:#fff; width: 76%; margin: auto; margin-top: 23px; }
#form-head h1 {font-size: 18px; font-weight: bold; color: #000; text-align: center; text-transform: uppercase; }
#form-head h2 { font-size: 16px; color: #000; text-align: center; }
#form hr { width: 116px; margin: auto; margin-top: 20px; margin-bottom: 20px; border-top: solid 1px #fd853c; border-bottom: 0px;}
/*#form input[type="text"], [type="email"] { width: 200px; height: 35px; margin-top: 3px; border: solid 1px #c4c2c6; }*/
label {line-height: 1; font-size:12px;}

form {
  
}

fieldset {
  border: none;
  
}

.question { color: #000; text-align: center; font-size: 25px; font-weight: 300;}
.reponse { display:block; margin: auto; width:350px; height:284px;}
.reponse input[type="radio"] { display: none;}
.reponse label { color: #ffffff; background-color: #fc7100; font-size: 22px; font-weight: 600; width: 156px; height: 138px; display: block; text-align: center; box-sizing: border-box; padding-top: 46px; -webkit-box-shadow: -1px 4px 5px 0px rgba(71,70,71,1); -moz-box-shadow: -1px 4px 5px 0px rgba(71,70,71,1); box-shadow: -1px 4px 5px 0px rgba(71,70,71,1); cursor: pointer; transition: all 0.2s; /*border-radius: 4px;*/ border: solid 1px #fff;}
.reponse label:hover { box-shadow: none; margin-top: 5px; cursor: pointer;}
.btn-form { display: block;float: left; margin:1px; margin-left: 17px; margin-top: 53px;}

.icon {
  margin: 0 auto;
  display: block;
  margin-bottom: 10px;
  width:60px;
}

#formfinal {width: 500px; margin: auto; }


[type='text'], [type='email'], [type='number'], [type='tel'], [type='time'], 
textarea {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 2.7rem;
  padding: 0.5rem;
  border: 1px solid #cacaca;
  margin: 0 0 .4rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: #fc7100;
  background-color: #ededed;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  border-radius: 0px;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  }

[type='text']:focus, [type='email']:focus,[type='tel']:focus, {
    border: 1px solid #381151;
    background: #fff;
    outline: none;
    box-shadow: 0 0 5px #cacaca;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: gray;
}
::-moz-placeholder { /* Firefox 19+ */
  color: gray;
}
:-ms-input-placeholder { /* IE 10+ */
  color: gray;
}
:-moz-placeholder { /* Firefox 18- */
  color: gray;
}
.field { width:236px; float:left; margin-left:14px;}
#fieldsetfinal {
  padding: 0;
  margin: auto;
  
  font-size: 20px;
  color: #000;
}
#final {float:left; width:100%; margin-bottom:15px; }

#monsieur {width: 50%; float: left; font-size:12px; }
#madame {width: 50%; float:left; font-size:12px; }

select {
/*  height: 40px;
  margin-top: 10px;
  font-size: 13px;
  color: #333333!important;
  width: 100%;*/
/*  background-image: url('../img/arrow.svg');
    background-size: 9px 6px;
    background-position: right 0.5rem center;
    background-repeat: no-repeat;*/
    height: 40px;
    margin-top: 10px;
    font-size: 13px;
    width: 100%;
    background-image: url(../img/arrow.svg);
    background-size: 9px 6px;
    color: rgb(51, 51, 51);
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    padding-left: 10px;

}


#submitform {
    width: 50%;
    height: 53px;
    
    background: #ff8840;
/*    background: -moz-linear-gradient(top, #efa808 0%, #207cca 0%, #f5c864 0%, #f5c864 1%, #f5c864 1%, #efa809 100%);
    background: -webkit-linear-gradient(top, #efa808 0%,#207cca 0%,#f5c864 0%,#f5c864 1%,#f5c864 1%,#efa809 100%);
    background: linear-gradient(to bottom, #efa808 0%,#207cca 0%,#f5c864 0%,#f5c864 1%,#f5c864 1%,#efa809 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efa808', endColorstr='#efa809',GradientType=0 );*/
    display: block;
    margin: auto;
    margin-top: 13px;
   
    text-align: center;
    font-size: 19px;
    color:#FFF;
  
    
    border: 0;
    box-sizing: border-box;

    cursor: pointer;
    transition: all 0.2s;
}

#submitform:disabled {
  background-color: #c4c4c4;
  box-shadow: none;
  
}

#submitform:hover {
  box-shadow: none;
  transition: all 0.2s;
  background:#fb6d17;
/*  background: background: #efa808;
    background: -moz-linear-gradient(top, #efa808 0%, #f5c864 99%, #f5c864 99%, #f5c864 100%, #207cca 100%, #2989d8 100%);
    background: -webkit-linear-gradient(top, #efa808 0%,#f5c864 99%,#f5c864 99%,#f5c864 100%,#207cca 100%,#2989d8 100%);
    background: linear-gradient(to bottom, #efa808 0%,#f5c864 99%,#f5c864 99%,#f5c864 100%,#207cca 100%,#2989d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efa808', endColorstr='#2989d8',GradientType=0 );*/

box-sizing: border-box;

}

#merci {
  padding: 10px;
  margin-top: 34px;
}

#merci h1 {
  
  text-align: center;
  font-size: 37px;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 1.5px;
}

#merci h2 {
  
  text-align: center;
  font-size: 21px;
  color: #000;
}
.button { 
    background: #fc7100;
    /*border-radius: 8px;*/
    /* padding: 12px; */
    /* margin-top: 50px; */
    display: block;
    text-align: center;
    color: #fff;
    width: 150px;
    height: 28px;
    padding-top: 9px;
    font-weight: 600;
    margin: 50px auto;
    cursor: pointer;
   }

#logo-thx {display: block; margin: auto; margin-bottom: 29px;width:180px;}

/*USP*/
#prog-usp {width:100%; height:222px;float:left;background:#fff;}
#prog-usp h1 {color:#095379; display:block; margin:auto; text-align:center; margin-top: 33px;}







/*FOOTER*/
footer { width:100%; height:61px; float:left; background:#000;}
#crea { text-align: center; color: #ffffff; font-size: 13px; margin-top:21px; font-weight:600;}
#crea a { color: #ffffff; }

/*************** TOP LINK STYLE *******************/
#toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:100%; background:url('../img/ui.totop.png') no-repeat left top; }
#toTopHover { background:url('../img/ui.totop.png') no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0;     -moz-opacity: 0; filter:alpha(opacity=0); }
#toTop:active, #toTop:focus { outline:none; }


/**************************************************
********************* MOBILE  *********************
***************************************************/

@media screen and (max-width: 1000px) {
	
  .wrap { width: 100%; }
  .desktop { display: none!important;}
  .mobile { display: block!important;}
  
  header {height:100px; }
  #header-content {height: auto; }
  #rg {display:block; margin: auto; float: none; padding: 0; padding-top: 14px;}
  #header-right {display:none;}
  #header-content-resp {display:block; }
  #rg-resp { display: block;
    width: 200px;
    margin: auto;
    padding-top: 23px;
    box-sizing: border-box; }

  #visuel-resp {width:100%; height:auto; float:left; /*background: url("../img/visuel-resp.png") no-repeat;background-position:top; background-size: cover;*/ }
  #visuel-resp img { width:100%; }
  #visuel-resp h1 {color: #fff; font-weight:600; }
  #visuel-resp h2 {color: #fff; font-weight:400; }

  #offre-resp {width:100%; background:#fff; height:auto;  }
  #price {margin:auto;width:400px; }
  .price {width:197px ;display:inline; margin:auto; }
  #logo {width:182px; margin:auto; }

  #baseline {height: auto; float: none;padding: 10px 0px 18px 0px; box-sizing: border-box; }
  #baseline h1 {font-size:23px;line-height: 1; margin:0; padding:0px;}
 

  #zone-form { width: 100%; float: left; box-sizing: border-box; height: auto; }
  #form-contour { border:none; width: 100%; height: auto; }
  #form { width: 100%; height: auto; color: #00777e; font-size: 16px; margin:auto; }
  #formulaire { width: 280px; margin: auto;}
  #form-head h1 {font-size: 32px; }
  #form-head h2 { font-size: 23px;}
  #form hr { width: 116px; border-color: #93876c 1px; margin: auto; margin-top: 20px; margin-bottom: 20px;}

#form input[type="text"], [type="email"], [type="tel"] { width: 100%; height: 35px; margin-top: 3px; border: solid 1px #c4c2c6; }
label { line-height: 1; }
#civilite-content {width: 100%;}
.field {width:100%; margin:auto; float:none;}
#monsieur { margin-left: 0px; width:100%;}
#madame { margin-left: 0px;width: 100%;}
#formfinal {width:250px;}
#noradio { width: 400px; margin: auto; }
#submit { width: 238px; height: 40px; background: #93876c; border:none; color: white; font-size: 18px; font-weight: 700; cursor: pointer; transition: all 1s; display: block;
    margin: auto; margin-bottom:25px;}
#submitform {width: 78%; }    


#adresse {margin-bottom: 25px;}

#prog-usp {width:100%; float:left; height:auto;  }
#prog-usp img {width:312px; display: block; margin: 15px auto 15px; }
#produit {width:100%; height:auto;background:#fff;}
#produit img {width:270px; height:auto; margin:auto; display:block;margin-bottom: 50px;}

#produit-resp {background:#fc7100; float: left; width: 100%; height:auto;text-align: center; }
#produit-resp h1 {font-weight:bold; text-transform:uppercase; color:#fff; text-align: center; text-align:center; font-size: 18px;padding-top:15px; box-sizing: border-box;}
#produit-resp span {font-weight:400; color:#fff;margin-top: 15px; padding-bottom: 15px; box-sizing: border-box; display:block; }

.testify-user { margin-bottom: 50px;margin: 0px 0px 50px 0px;float:none; width:100%; }

#mentions {height:auto; width: 100%; margin: auto;}
#mentions-up { color:#93876c; width: 100%; line-height: 1.5; display: block; height: auto; margin: auto; }
#mentions-up img { display: block; float: none; margin: auto; width:208px; }
#mentions-txt { width:100%; float:none; margin:auto; margin-bottom: 15px; }
#mentions-txt h1 {text-transform:uppercase; font-weight:600; font-size:18px; text-align:center; margin-bottom: 6px;}
#mentions-txt span {font-size:10px; width: 100%; line-height: 1.5; display: block; }
#mentions-content { width:100%; }

#box {left: 0; width: 100%; }

}

@media screen and (max-width: 420px) {

  #rg { width: 200px; padding-top: 20px; box-sizing: border-box;}
  #visuel-resp h1 {font-size: 17px; }
  #visuel-resp h2 {font-size: 12px; }

  #price {width:182px; margin:auto; }
  #logo { width:173px; }

  #form-head h1 {font-size: 25px; }
  #form-head h2 { font-size: 11px;}
  #form input[type="text"], [type="email"], [type="tel"] { width: 100%; height: 35px; margin-top: 3px; border: solid 1px #c4c2c6; }
  #noradio {width:100%; }

  .field {width:100%; margin:0px;}

  .reponse {width:300px; }
  .reponse label { width: 130px; height: 130px;}

  #prog-usp img {width:225px; display: block; margin: 15px auto; }

  #testify { margin-top: 70px; float:none; padding-bottom: 17px; box-sizing: border-box; }



  }