/* ajout 10-06-2020*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

/* fin ajout*/
* {box-sizing: border-box;}
.tab{display: none; width: 100%; height: 50%;margin: 0px auto;}
.tabe{width: 100%; height: 50%;margin: 0px auto;}
.current{display: block;}

body {background-color: /*#f1f1f1;*/#f9f9f9}

form {
    /*background-color: #ffffff; margin: 100px auto; font-family: Raleway; padding: 40px; width: 40%; min-width: 300px; */
background-color: #ffffff;
/*modif 10-06-20
margin: 60px auto;
width: 50%;
min-width: 450px; 
box-shadow: 0px 0px 10px #ddd;
font-family: Raleway;
*/
margin: 20px auto;
width: 60%;
font-family: 'Open Sans', sans-serif;
padding: 40px;
box-shadow: 0px 0px 10px #f5f5f5;
}
.formulairePaiement {
/*off le 10-06-2020
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #ffffff;
margin: 60px auto;
font-family: Raleway;
padding: 50px;
width: 50%;
min-width: 450px;
box-shadow: 0px 0px 10px #ddd;
*/
margin: 20px auto;
width: 60%;
font-family: 'Open Sans', sans-serif;
padding: 40px;
box-shadow: 0px 0px 10px #f5f5f5;
background-color: #ffffff;
}
h1 {text-align: center; }

input {padding: 10px; width: 100%; font-size: 17px; font-family: Raleway; border: 1px solid #aaaaaa; }

button {background-color: #4CAF50; color: #ffffff; border: none; padding: 10px 20px; font-size: 17px; font-family: Raleway; cursor: pointer; }

button:hover {opacity: 0.8; }

.previous {background-color: #bbbbbb; }

/* Make circles that indicate the steps of the form: */
.step {height: 30px; width: 30px; margin: 0 5px; color: #fff; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.8; padding: 3px}

.step.active {opacity: 1; background-color: #69c769;}

.step.finish {background-color: #4CAF50; }

.error {color: #f00;transition: color ease-in-out 1.4s; }
/* off le 10-06 h2, h3, h4 {font-family: 'Poppins', sans-serif;}*/
/* Customize the label (the container) */
.containerCheck {
    display: flex;
    position: relative;
    cursor: pointer;
    /*font-size: 20px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-items: center;
    margin-bottom: 15px;
}

/* Hide the browser's default checkbox */
.containerCheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: relative;
    text-align: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #bebebe;
}

/* On mouse-over, add a grey background color */
.containerCheck:hover input ~ .checkmark {
    /*background-color: #ccc;*/
    box-shadow: -1px 1px 3px #bebebe;
    transition: ease-in-out 0.1s;
}

/* When the checkbox is checked, add a blue background */
.containerCheck input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerCheck input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerCheck .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: transform 0.1s;
}

/* Custom radio */
.containerRadio {
    display: inline-flex;
    position: relative;
    cursor: pointer;
    /*font-size: 20px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-items: center;
    padding-left: 30px;
    margin-top: 10px;
}

/* Hide the browser's default radio button */
.containerRadio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmarkRadio {
    position: absolute;
    top: 0;
    left: 0;
    height: 21px;
    width: 21px;
    /* background-color: #eee;*/
    border: 1px ridge rgba(33, 150, 243, 0.8);
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerRadio:hover input ~ .checkmarkRadio {
    /* background-color: #ccc;*/
    box-shadow: -1px 1px 3px #bebebe;
    transition: ease-in-out 0.1s;
}

/* When the radio button is checked, add a blue background */
.containerRadio input:checked ~ .checkmarkRadio {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkRadio:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerRadio input:checked ~ .checkmarkRadio:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.containerRadio .checkmarkRadio:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
/*custom list*/
.custom-list-item { 
  float: left;
}
.glowing-circle {
  /*width: 20px;
  height: 20px;
  border-radius: 100%;*/
  width: 40px;
height: 40px;
border-radius: 15%;
  /*background-color: #005a00;*/
    background-color: transparent;
  position: relative;
  float: left;
  margin: 3px 10px 0 0;
  transition: all 0.4s;
  border: 1px solid #e8e8e8;
}

.custom-list {
  list-style-type: none;
  padding: 0;
}
.custom-list > li{
display:flex;align-items: center;font-size: 20px;
}
.cgvOui {background-color:rgba(255, 255, 255, 0.8);}
#paypalOk{display:none} 
.paypalform {width: 70%;box-shadow: unset;/*min-width: unset;*/display: flex;flex-direction: column;align-items: center;margin: unset;border-left: 1px solid gray;
box-shadow: 0px 0px 12px 0px gray;
border-radius: 5px;}
.wrapLogoPaypal{/*border-right: 1px solid gray;*/padding-right: 10px;display: flex;align-items: center;justify-content: center;flex-direction:column;margin: auto;}
.texteApresPaiement{font-size: 18px;width: 70%;margin: auto;text-align: center;}
.titreFormulaire{margin-top:50px;text-transform: uppercase;font-size: 40px;line-height: 40px;color: #3ab5fb;}
.tailleFormulaires{width: 80%;margin: 0px auto;}
.texteChoixPaiements{font-size: 19px;}
@media all and (max-width:800px){
    .formulairePaiement {
    min-height: auto;
    margin: 90px auto;
    padding: 10px;
    width: 100%;
    min-width: auto;
    }
    .titreFormulaire{font-size: 30px;}
    .texteApresPaiement{font-size: 17px;width: 100%;margin: 10px 0px 15px 0px;}
    .tailleFormulaires{width: 100%;}
    .texteChoixPaiements{font-size: 16px;}
}
.wrapLogoPaypal{border-right: unset;}
.wrapPaiement{margin-top: 15px;padding-bottom: 15px;}
.btnPaypal{border: 1px solid #2182b1;border-radius: 5px;padding:unset;width:80%;transition:ease-in-out 0.2s}
.btnPaypal:hover{width:79%;border: 1px solid #1974a0}
#btn{border-width: 0 0 0 0;border-bottom: 4px solid;text-transform: uppercase;border-bottom-color: #5a9966;font-family: 'Lato', sans-serif;font-weight: 300;margin-left:15px}
@media all and (min-width:801px) and (max-width:1440px){
    .formulairePaiement {width: 70%;}} 
@media all and (max-width:800px){
    .formulairePaiement {width: 100%;}
    .paypalform {width: 100%;}
} 
@media all and (max-width:450px){
    form {margin: 90px auto;padding: 20px;width: 100%;min-width: unset;} 
}
@media all and (min-width:451px) and (max-width:1280px){
    form {padding: 20px;width: 70%;} 
}
.titreSiteForm{text-transform:uppercase;font-size: 40px;color: #3ab5fb;font-family: 'Raleway', sans-serif;font-weight: 300;}
body{color: #4F4F4F;font-family: 'Open Sans', sans-serif;}
.slogan{text-transform: uppercase;font-size: 21px;color: #666;font-weight: 300;margin-top: -2px;}
@media all and (max-width:800px){
  .titreSiteForm{font-size: 22px;margin-top: 5px;}  
.slogan{font-size: 18px;}
.navigationformsMob {
    position: fixed;
    border-bottom: 1px solid rgba(58, 181, 251, 0.46);
    justify-content: center;
    height: unset;
    box-shadow: 0px 0px 5px gray;
    align-items: center;
    background: white;
    top: 0;
height: 70px;
z-index: 99999999;
width:100%;
}
.custom-list > li {font-size: 18px;}
}
@media all and (min-width:451px) and (max-width:800px){
form {position: relative;top: 71px;}
}
.wrapPaiementCb{padding: 1.1428571429em;width: 100%;display: flex;align-content: center;}
@media all  and (max-width:450px){
    .wrapPaiementCb{flex-direction: column}
}
/* ajout form paiement */
.titreFormulaireCommande{text-transform: uppercase;
color: #3c8dbd;
font-weight: 400;
font-size: 30px;
text-align: center;}
        .titreStripe {
    font-size: 18px;
}
display: flex;
align-items: center;}
        .erreursStripe {margin: 0px 0px 20px 0px;
display: flex;
justify-content: center;
width: 100%;transition:all 0.4s}
.wrapVirement{display: flex;margin-top: 40px;flex-direction: column;}
#carte{width: auto;box-shadow: unset;background: #fdfdfd;padding: 10px 40px 10px 40px;}
.listeVirement{margin:unset;font-size:16px;padding: 0px 5px 0px 45px;}
.listeVirementBancaire{width: auto;box-shadow: unset;background: #fdfdfd;padding: 30px 40px 1px 5px;}
.listeVirementBancaire > li {margin-bottom:14px}
#logoPaiementCb{display: none;flex-direction: column;align-items: center;}
        @media all and (max-width:800px){.wrapVirement{box-shadow: 0px 0px 5px #ddd;padding: 20px;}}
        
.iconesPaiementCbBanque{justify-content: end;display: flex;}
.payment-icon {
    border-radius: 0.2142857143em;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 2.7142857143em;
    height: 1.7142857143em;
    display: inline-flex;
}
.payment-icon--visa {
    background-image: url(//cdn.shopify.com/s/assets/payment_icons/visa-319d545c6fd255c9aad5eeaad21fd6f7f7b4fdbdb1a35ce83b89cca12a187f00.svg),none;
}
.payment-icon--maestro {
    background-image: url(//cdn.shopify.com/s/assets/payment_icons/maestro-d2055c6b416c46cf134f393e1df6e0ba31722b623870f954afd392092207889c.svg),none;
}
.payment-icon--master {
    background-image: url(//cdn.shopify.com/s/assets/payment_icons/master-173035bc8124581983d4efa50cf8626e8553c2b311353fbf67485f9c1a2b88d1.svg),none;
}
.payment-icon--american-express {
    background-image: url(//cdn.shopify.com/s/assets/payment_icons/american_express-2264c9b8b57b23b0b0831827e90cd7bcda2836adc42a912ebedf545dead35b20.svg),none;
        }
    .payment-icon--cartes-bancaires {
 background-image:url(//cdn.shopify.com/s/assets/payment_icons/cartes_bancaires-ad50cf789d5354f733fea24cf4d0a73b4a2843080e3b5607a6f05445c2cd206b.svg),none
}
.payment-icon--paypal {
 background-image:url(//cdn.shopify.com/s/assets/payment_icons/paypal-49e4c1e03244b6d2de0d270ca0d22dd15da6e92cc7266e93eb43762df5aa355d.svg),none
}
@media all and (max-width:450px){
    #carte {padding: 10px 15px 10px 15px;}
    .listeVirement {padding: 0px 5px 0px 20px;}
    .iconesPaiementCbBanque{justify-content: start;margin-top: 10px;}
}
#texteVirementConfirme{
    position: relative;
top: 0;
width: 100%;
font-size: 22px;
height: auto;
display: none;
padding: 15px;
color: green;
box-shadow: 0px 0px 5px gray;justify-content: center;
text-align: center;}
.separateurPaiements{width: 100%;display: flex;align-content: center;border-bottom: 1px #dbdbdb inset;}
.wraplocker{border-radius: 5px;border: 1px groove #d7d7d7;padding: 20px;width: 100%;display: flex;height: 50px;align-items: center;}
.contourCarte{display: flex;flex-direction: column;width: 95%;padding: 10px;}
.contourVirement{border: 1px solid #b1b1b1;border-radius: 5px;padding: unset;color: #545454;}
.iconeVirement{
background-color: #1279D3;
font-size: 15px;
color: white;
width: 49px;
height: 30px;
border-radius: 5px;
}