html, body {
  /*font-family: 'Dancing Script', cursive;*/
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.2;
	height: 100%;
	margin: 0;
  padding: 0;
  color: #1f1f1f;
}

h1, h2, h3, h4, h5, h6{
  margin: 0;
}

.table-block{
  display: table;
  width: 100%;
  height: 100%;
}
.table-cell-block{
  display: table-cell;
  vertical-align: middle;
}

nav{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  padding: 15px 0;
}
nav > img{
  height: 65px;
}
nav > p{
  font-family: 'Dancing Script', cursive;
  font-size: 20px;
  font-weight: 700;
  color: #777;
  margin: 0;
}

#landing .header{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background: url("../img/bg_accueil.jpg") no-repeat center center;
  background-size: cover;
  padding: 65px 0;
}

.tombola{
  background-color: #ffffff;
  max-width: 500px;
  width: 100%;
  margin: 0 auto 0 0;
}

.funnel{
  position: relative;
  display: inline-block;
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  border-radius: 0;
  width: 510px;
  box-shadow: 0 0 25px rgba(0,0,0,0.25);
  padding: 30px 15px;
}
.funnel .img_fix{
  position: absolute;
  display: block;
  width: 80%;
  height: auto;
  left: 50%;
  z-index: 10;
}
.funnel .img_fix.img_couteau{
  bottom: 0;
  -webkit-transform: translate3d(-50%,50%,0);
  transform: translate3d(-50%,50%,0);
}
.funnel .img_fix.img_fourchette{
  top: 0;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
}

 h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
}


h1 sup{
    top: -11px;
    font-size: 10px;
    position: relative;
    color: #6859ea;
}

/*.funnel > h1{
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 15px;
}
.funnel > h1 > span{
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #6859ea;
  text-transform: uppercase;
}
.funnel > h1 > small{
  font-family: 'Dancing Script', cursive;
  font-size: 20px;
  line-height: 1em;
  font-weight: 700;
}
.funnel > .line {
  position: relative;
  display: block;
  width: 85%;
  height: 20px;
  border-top: 4px solid #6859ea;
  margin: 0 auto;
  overflow: hidden;
}
.funnel > .line:after{
  content: "";
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  left: 50%;
  top: -14px;
  background: #6859ea;
  transform: translate3d(-50%,0,0) rotate(45deg);
}*/

#enquete > h1,
#enquete2 > h1,
#merci > h1{
  font-family: 'Montserrat', cursive;
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #464646;
}
#enquete > h1 > span,
#enquete2 > h1 > span,
#merci > h1 > span{
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #6859ea;
  text-transform: uppercase;
}
#enquete > h1 > small,
#enquete2 > h1 > small,
#merci > h1 > small{
  font-family: 'Dancing Script', cursive;
  font-size: 20px;
  line-height: 1em;
  font-weight: 700;
}
#enquete > .line,
#enquete2 > .line,
#merci > .line,
#confir_tel > .line {
  position: relative;
  display: block;
  width: 85%;
  height: 20px;
  border-top: 4px solid #6859ea;
  margin: 0 auto;
  overflow: hidden;
}
#enquete > .line:after,
#enquete2 > .line:after,
#merci > .line:after,
#confir_tel > .line:after{
  content: "";
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  left: 50%;
  top: -14px;
  background: #6859ea;
  transform: translate3d(-50%,0,0) rotate(45deg);
}
#confir_tel > h1{
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #999;
}
#confir_tel > h1 > strong{
  font-size: 24px;
  color: #6859ea;
  text-transform: uppercase;
}
#confir_tel .input_inline{
  position: relative;
  display: block;
  width: 100%;
  margin: 50px 0;
  text-align: center;
}
#confir_tel .input_inline > input{
  position: relative;
  display: inline-block;
  width: 46px;
  padding: 3px 8px;
  font-size: 20px;
  height: 30px;
  border: 2px solid #f43228;
  border-radius: 0;
  margin: 0 6px;
  text-align: center;
  outline: none;
}
#error_confir{
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #6859ea;
}
#clock{
  position: relative;
  margin-top: 20px;
}
#clock > p{
  font-size: 14px;
  font-weight: 300;
  margin: 0 0 5px 0;
  color: #767676;
}
#clock > img{
  display: inline-block;
  vertical-align: sub;
  margin-right: 5px;
  height: 22px;
}
#clock > span{
  display: inline-block;
  width: 50px;
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  color: #767676;
}
.livre_100{
  /*box-shadow: 0 15px 25px rgba(0,0,0,0.25);*/
  display: none;
}

.book{
  position: relative;
  padding: 50px 30px;
}
.book .title h2{
  padding: 0 0px 30px 0px;
  color: #6859ea;
  font-family: 'Dancing Script', cursive;
  font-size: 24pt;
  text-align: center;
}
.book .col-md-auto{
  display: block;
  margin: 0 auto;
}
.book .col-md-auto > img{
  box-shadow: 1px 1px 8px 1px rgba(110, 110, 110,0.5);
  -webkit-box-shadow: 1px 1px 8px 1px rgba(110, 110, 110,0.5);
  -moz-box-shadow: 1px 1px 8px 1px rgba(110, 110, 110,0.5);

}
.book .col h2{
  font-family: 'Dancing Script', cursive;
  font-size: 26px;
  font-weight: 700;
  color: #6859ea;
}
.book .col p{
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8em;
  color: #767676;
}
.book .col div{
  position: relative;
  display: block;
  width: 100%;
  padding: 15px 0 15px 45px;
  overflow: hidden;
}
.book .col div:before{
  content: "";
  position: absolute;
  display: block;
  width: 35px;
  height: 35px;
  background: #6859ea;
  left: 0;
  top: 0;
  -webkit-transform: translate3d(-50%,18px,0) rotate(45deg);
  transform: translate3d(-50%,18px,0) rotate(45deg);
}
.book .col div > span{
  font-size: 16px;
  font-weight: 500;
  color: #6859ea;
}

/* * * * * * * * * * F U N N E L * * * * * * * * * * * */

/* * * * * * * * * * error funnel * * * * * * * * * * * */

/*#adresse-error,#cp-error,#ville-error, #check-error{

    color: #8b0000;
    font-size: 12px;!important
    font-weight: bold;!important
    margin-bottom: 8px;!important
    box-shadow: none;!important
    display: block;!important
    margin-top: -15px;
    font-size: 12px;!important
    font-weight: bold;!important
    margin-bottom: 8px;!important
    box-shadow: none;!important
    display: block;!important
    margin-top: -15px;
    font-weight: bold;
    margin-bottom: 8px;
    box-shadow: none;
    display: block;
    margin-top: -15px;


}


#nom-error, #prenom-error, #email-error, #tel-error, #day-error, #month-error, #year-error, #taille-error, #poids-error,#poidssouhait-error,#poidsactu-error,#adresse-error,#cp-error,#ville-error{
    color: darkred;!important
    font-size: 12px;!important
    font-weight: bold;!important
    margin-bottom: 8px;!important
    box-shadow: none;!important
    display: block;!important
    margin-top: -15px;!important

}*/

#taille-error, #poids-error, #poidssouhait-error, #poidsactu-error, #nom-error, #prenom-error, #email-error, #tel-error, #adresse-error, #cp-error, #ville-error, #kg-error {
    display: block;
    font-size: 10px;
    color: #8b0000;
    margin-bottom: 0;
}





.icone2{
    margin-top: 70px;
    margin-bottom: 20px;
}



fieldset .question{
  position: relative;
  display: block;
  width: 100%;
  height: 90px;
}
fieldset .question p{
  font-size: 16px;
}



fieldset{
    border: none;
}


/*

label[type=text], input[type=email], input[type=tel], input[type=date] {
    width: 100%;
    height: 37px;
    border: solid 2px rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}*/

input[type=text], input[type=email], input[type=tel], input[type=date] {
   width: 92%;
    height: 37px;
    border-radius: 10px;
    font-size: 14px;
}

.classique{
    display: inline-block;
   width: 100%;
    
}



form h2{
    text-align: center;
    margin: 0 auto;
}

fieldset .question{
  position: relative;
  display: block;
  height: 90px;
  font-size: 18px;
  text-align: center;
  color: #1f1f1f;
}
fieldset .reponse{
  text-align: center;
  margin: 10px 0 0 0;
}
fieldset .reponse input[type="radio"] {
    display: none;
}
fieldset .reponse .btn-form {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
  margin: 0 7px;
  vertical-align: top;
}
fieldset .reponse label {
  display: block;
  padding: 15px 0px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #6859ea 0, #629ce3 100%);
  font-size: 13px;
  font-weight: 400;
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.25);
}
fieldset .reponse label > img{
  margin-bottom: 8px;
}

.reponse label:hover {
  transform: translateY(-5px);
  box-shadow: 0px 5px 15px rgba(0,0,0,0.25);
}

 textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}

[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* custom styles */
label .date{
  display: block;
}
input .date:{
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 5px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
  width: 190px;
}

.date{
  display: inline-block;
  color: #6859ea;
}

.area_form{
  background-color: #ffffff;
  color: #6859ea;
  border: 2px solid #6859ea;
  margin-top: 15px;
  border-radius: 5px;
  outline: none !important;
}

.area_form_date{
  color: #6859ea;
  border: 2px solid #6859ea;
  width: 20%;
  padding: 5px;
  height: 37px;
  font-size: 16px;
  outline: none !important;
}

.area_form:hover{
   background-color: white;
}

.classique .form-select {
    width: 50%;
    font-size: 19px;
    color: #2C3E50;
    padding: 2px;
}

.headciv{
    padding-top: 20px;
    display: inline-flex;
}
.headciv label{
    margin-right: 20px!important;
}
.area_form {
    background-color: #ffffff;
    color: #6859ea;
    border: 2px solid #6859ea;
    margin-top: 15px;
    border-radius: 5px;
    outline: none !important;
}


input[type='text'], input[type='email'], input[type='tel'] {
    padding-left: 20px;
    border-radius: 5px;
}

.civilite {
    box-shadow: 0px 5px 2px 0px rgba(255, 103, 70, 0.6);
    background-color: #f6f6f6;
    color: #6859ea;
    width: 20%;
    padding: 4px 12px;
    border-radius: 10px;
    margin: 5px;
}

#chrono{
    color:#6859ea;
    display: table;
    margin: 0 auto;
    padding-bottom: 12px;
    opacity: 0.8;
}

.civilite{
  box-shadow: 0px 5px 2px 0px rgba(255, 103, 70, 0.6);
  background-color: #f6f6f6;
  color: #6859ea;
  width: 20%;
  padding: 4px 12px;
  border-radius: 10px;
  margin: 5px;
}
.civilite:checked{
    box-shadow: 0px 5px 2px 0px rgba(52, 156, 172, 0.5);
    background-color: #349cac;
    color: #f6f6f6;
 
}

.radio [type="radio"] {
    display: none;
}

.btn-envoyer, .btn-envoyer2{
  
  padding: 13px 0px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #6859ea 0, #629ce3 100%);
  font-size: 17px;
  font-weight: bold;
  width: 60%;
  height: auto;
  border-radius: 5px;
  display: block;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 10px;
  margin-bottom: 10px;
  margin: 0 auto!important;
  transition: all 0.2s;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.25);
  outline: none;
}
.btn-envoyer:hover, .btn-envoyer2:hover{
  transform: translateY(-5px);
  box-shadow: 0px 5px 15px rgba(0,0,0,0.25);
}

.sub{
    font-size: 9px;
}

.optin.checkbox {
    border-radius: 50%;
}

#courrier input{
height: 30px;
    width: 30px;
}

.optinland{
    float: left;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 20px;
}

.optinland input{
    width: 10%;
    padding-right: 20px;
    display: inline-block;
    vertical-align: top;
}

.optinland label{
    width: 88%;
    display: inline-block;
}

.optintxt{
  font-size: 15px;

}

.optintxt::last-child{
    font-size: 14px;
    color: #349cac;

}
/*
#merci{
  display: none;
}*/

/*** Client ***/
.client_logo{
	position: relative;
    text-align: center;
    z-index: 50;
    padding-top: 20px;
    padding-bottom: 8vh;
}
.client_logo h2{
    font-size: 28pt;
    font-weight: 700;
    color: #6859ea;
    font-family: 'Dancing Script', cursive;
    margin-bottom: 3vh;
}
.client_logo ul{
	padding-left: 0;
	margin: 0;
	list-style: none;
}
.client_logo ul > li{
	display: inline-block;
	vertical-align: middle;
	margin: 0px 20px;
}

/*** Footer ***/
footer {
  position: relative;
  display : block;
  background: #f3f3f3;
  padding-top: 10px;
  padding-bottom: 10px;
}

footer p{
    color: #b7b7b7;
    font-size: 8px;
    /* font-weight: 500; */
    text-align: justify;
    line-height: 14px;
}

.realisation a{
  color: #b7b7b7;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}


/*** Responsive ***/
@media screen and (max-width: 1199px){
  .funnel{
    width: 480px;
  }
  .book .col h2{
    font-size: 24px;
  }
  .book .col p{
    line-height: 1.4em;
    margin: 10px 0;
  }
  .client_logo {
    padding-top: 2vh;
    padding-bottom: 2vh;
  }
}

@media screen and (max-width: 1023px){
  #landing .header{
    padding: 65px 0 30px;
  }
  .funnel{
    display: block;
    width: 500px;
    margin: auto;
  }
  .tombola{
    margin: auto;
    margin-top: 35px;
  }
  .book .col-md-auto > img{
    height: 150px;
  }
  .book .col h2 {
    font-size: 18px;
  }
  .book .col div{
    padding: 8px 0 8px 30px;
  }
  .book .col div:before{
    width: 25px;
    height: 25px;
    top: -5px;
  }
  .book .col div > span{
    font-size: 12px;
  }
  .book .col p {
    line-height: 1.4em;
    margin: 10px 0 0;
  }
}

@media screen and (max-width: 767px){
  nav{
    padding: 8px 0;
  }
  nav > img {
    height: 40px;
  }
  nav > p{
    font-size: 16px;
  }
  .book .col-md-auto > img {
    display: block;
    width: 50%;
    margin-bottom: 2vh;
    height: auto;
    margin: auto;
    max-width: 276px;
  }
  .book .col h2,
  .book .col p,
  .book .col div{
    text-align: center;
  }
  .book .col div {
    padding: 8px 0 8px 0px;
  }
}

@media screen and (max-width: 567px){
  .funnel{
    width: 100%;
  }
  .funnel > h1,
  .funnel > h1 > small{
    font-size: 18px;
  }
  .funnel > h1 > span{
    font-size: 19px;
  }
  .funnel > .line{
    width: 245px;
  }
  #funnelzone h4{
    font-size: 12px;
    color: #767676;
  }
  fieldset .question p {
    font-size: 14px;
  }
  fieldset .reponse .btn-form{
    width: 85px;
    height: 85px;
    margin: 0 3px;
  }
  fieldset .reponse label > img {
    margin-bottom: 2px;
    height: 44px;
  }
  fieldset .reponse label{
    padding: 12px 0;
    font-size: 10px;
  }
  .optinland label{
    width: 80%;
    font-size: 12px;
  }
  .btn-envoyer, .btn-envoyer2{
    width: 90%;
    font-size: 12px;
  }
  #merci .choix p{
    font-size: 12px;
  }
  .title_paiement{
    font-size: 13px;
  }
  .table_paiement{
    font-size: 12px;
  }
  .table_checklist{
    font-size: 12px;
  }
  .book .title h2 {
    font-size: 20pt;
  }
  .client_logo h2 {
    font-size: 20pt;
  }
  .client_logo ul > li {
    width: 15%;
    margin: 0px 3%;
  }
  .client_logo ul > li > img {
    width: 100%;
  }
  .offre img {
    width: 100%;
  }
}

@media screen and (max-width: 374px){
  .funnel{
    padding: 30px 0;
  }
  fieldset .question{
    height: 70px;
  }
  fieldset .reponse .btn-form{
    margin: 0 0;
    width: 80px;
    height: 80px;
  }
  fieldset .reponse label{
    padding: 10px 0;
  }
}