html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body:before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out; }

/* Designing for scroll-bar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #262626;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background: #fa8045;
    border-radius: 5px;
    cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
    background: #e76222;
    font-size: 24px;
    letter-spacing: 0.1em;
    margin-top: 30px;
}

.section{
    text-align:center;
    overflow: hidden;
}

#video{
    position: absolute;
    right: 0;
    bottom: 0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: black;
    /*background-image: ;*/
    background-position: center center;
    background-size: contain;
    object-fit: cover; /*cover video background */
    z-index:3;
}

#videoConfigurateur{
    right: 0;
    bottom: 0;
    top:0;
    width: 100%;
    height: 100%;
}

.coverVideo{
    position: absolute;
    right: 0;
    bottom: 0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 1;
    z-index: 4;
}

.coverVideo .rowCoverVideo{
    width: 100%;
    height: 100%;
}

.coverVideo .rowCoverVideo .textCoverVideo{
    color: #FFFFFF;
    text-shadow: 2px 2px 4px #000000;
    letter-spacing: 0.5em;
}

.textCoverVideo-ling1{
    font-size: 70px;
}
.textCoverVideo-ling2{
    font-size: 25px;
}

.float-right{
    float: right;
}

/*block page

 */
.blockPage{
    display : none;
}

.blockPage.active{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);

}

.blockPage .rowBlockPage{
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px #474747;
}

/*
div erreure
 */

#alertInscriptionErreur{
    display: none;
}

#alertInscriptionErreur.active{
    display: block;
}

#alertConnexionErreur{
    display: none;
}

#alertConnexionErreur.active{
    display: block;
}

#alertDivresetPassword, #successDivresetPassword{
    display: none;
}

#alertDivresetPassword.active, #successDivresetPassword.active{
    display: block;
}

/*
modal reset password
 */
#resetPasswordForm{
    padding-top: 15px;
}

#resetPasswordForm button{
    float: right;
    margin-top: 10px;
}

#resetPasswordForm.none{
    display:none;
}

/* Fixed header.
* --------------------------------------- */
#header{
    position:fixed;
    height: 90px;
    display:block;
    width: 100%;
    background: transparent;
    z-index:9;
    text-align:center;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    /*padding: 20px 0 0 0;*/
    top: 0;
}

#headerNoSlide{
    position:fixed;
    height: 70px;
    display:block;
    width: 100%;
    /*background: #212121;*/
    background: transparent;
    z-index:9;
    text-align:center;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    padding: 20px 0 0 0;
    top:0;
}



#headerNoSlide .logoHeader, #panier #panierHeader .logoHeader{
    margin-top: -10px;
}

#peidPagesInstagram{
    width: 95%;
}

#peidPagesInstagram .logoInstagram{
    height: 60px;
    width: 100%;
}

#peidPagesInstagram .logoInstagram img{
    height: 60px;

}

#peidPagesInstagram .imagesGalerie{
    margin-top: 20px;
}

#peidPagesInstagram .imagesGalerie div{
    width: 16.66666666%;
    padding-bottom: 2px;
    padding-right: 1px;
    padding-left: 1px;
    border: none;
    margin: auto;
    color: #FFFFFF;
}

#peidPagesInstagram .imagesGalerie div:hover {
    color: #fa8045;
}

#peidPagesInstagram .imagesGalerie div a .imageVideo{
    position: absolute;
    height: calc(100vh /3);
    width: 16.66666666%;
    margin-top: calc(-100vh /3);
    margin-left: -10px;
}

#peidPagesInstagram .imagesGalerie div a .imageVideo i{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 64px;
    height: 64px;
    margin-top: 100px;

}

#peidPagesInstagram .imagesGalerie div a .imageCarousel{
    position: absolute;
    height: calc(100vh /3);
    width: 16.66666666%;
    margin-top: calc(-100vh /3);
    margin-left: -10px;
}

#peidPagesInstagram .imagesGalerie div a .imageCarousel i{
    display: block;
    margin-left: 10%;
    width: 54px;
    height: 54px;
}

#peidPagesInstagram .imagesGalerie div a{
    width: 100%;
    height: 100%;
    border: none;
}

#peidPagesInstagram .imagesGalerie div a img{
    width: 100% ;
    height: calc(100vh /3);
    margin: auto;
    display: block;
    border: none;
}

#peidPagesImg{
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 440px);
    background: url('../../assets/images/peid-img.jpg') no-repeat;
    background-size: 100% 100%;
}

#peidPages {
    position: absolute;

    width: 100%;
    max-width: 100%;
    height: 440px;
    background-color: #000000;
    color: #FFFFFF;
}

#peidPages h3{
    text-align: left;
    padding-top: 50px;
    padding-bottom: 20px;
    letter-spacing: 0.1rem;
    color: #aaaaaa;
    font-size: 24px;
}

#peidPages .linkPiedDePage, #peidPages span{
    display: inline-block;
    text-decoration: none;
    text-align: left;
    width: 100%;
    padding-left: 20px;
    letter-spacing: 0.05rem;
    font-size: 18px;
    color: #878787;
    font-weight: 500;
}

#peidPages .piedReseauxSociaux{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}

#peidPages .piedReseauxSociaux a{
    padding-bottom: 10px;
    color: #878787;
}

#peidPages .piedLogo{
    margin-top: 50px;
    margin-bottom: 20px;
}

#peidPages .linkPiedDePage:hover, #peidPages .piedReseauxSociaux a:hover{
    color: #f26825;
}

#peidPages .formPiedPage{
    padding-left: 20px;
}

#peidPages .inputPiedPage{
    float: left;
    width: 50%;
    margin-top: 10px;
}

#peidPages .btnPiedPage{
    float: left;
    margin-top: 10px;
}

#peidPages .piedOpinionLoversMessage{
    display: inline-block;
    width: 100%;
    font-size: 14px;
    color: #048d2f;
    text-align: left;
    padding-left: 20px;
}

#peidPages .piedOpinionLoversDes{
    display: inline-block;
    width: 100%;
    font-size: 12px;
    color: #878787;
    text-align: left;
    padding-left: 20px;
}

#modalOpinionLovers{
    position: absolute;
}

#sousPiedPage {
    width: 100%;
    max-width: 100%;
    height: 40px;
    background-color: #000000;
    text-align: center;
}

#sousPiedPage span, #sousPiedPage span a{
    letter-spacing: 0.05rem;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: #878787;
    text-align: center;
    margin-top: 8px;
    font-family: AvenirNextCyr-Demi, serif;

}
#sousPiedPage span a:hover{
    color: #dcdcdc;
}


/*
    icone menu
 */

.sideClose{
    display: none !important;
}

.js-monCompte-toggle.menu-toggle.active, .pannierSlideMoncompte.active, .js-menuLangue-toggle.menu-toggle.active{
    display: inline-block;
}

.logoHeader{
    height: 70px;
    width: 150px;
    margin: 10px 0 0 0;
}

.sideLogo{
    margin-top: -40px;
    margin-bottom: 10px;
    width: 140px;
    height: 100px ;
}

.choiceLangue{
    display: inline-block;
    width: 100%;
    text-decoration: none;
    font-size: 20px;
   padding-left: 90px;
}

.reseauxSociaux{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #212121;
}
.reseauxSociaux a {
    color: #FFFFFF;
    padding-bottom: 10px;
}

.reseauxSociaux a:hover, .menuSlide a:hover{
    color: #8f8f8f;
}

.menuSlide{
    margin-left: -10px;
    padding-top: 20px;
}

.menuSlide a, .menuSlide span{
    color: #FFFFFF;
    font-size: 20px;
}

.menuSlide a i{
    font-size: 20px;
}

.menuSlide a:hover i{
    color: #f26825;
}

/* form dans menu*/

.menuSlide form{
    padding-top: 15px;
}

.menuSlide form button{
    float: right;
    margin-top: 10px;
}


.pannierSlide {
    color: #8f8f8f;
    text-decoration: none;
    display: inline-block;
    position: relative;
    left: -40px;
}

.pannierSlide .pannierIco{
    z-index: 1;
    font-size: 20px;

}
.pannierSlide:hover .pannierIco{
    color: #FFFFFF;

}
.pannierSlide:hover .pannierCount{
    color: #acadb0;
}

.pannierSlide .pannierCountIco{
    z-index: 6;
    margin-left: 15px;
    margin-top: -10px;
    color: #f26825;
    font-size: 28px;
}

.pannierSlide .pannierCount{
    z-index: 6;
    margin-left: 17px;
    margin-top: -8px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}
.pannierSlide:hover.pannierSlideDown .pannierIco{
    color: #000000;
}
.pannierSlide:hover.pannierSlideDown .pannierCount{
    color: #acadb0;
}

.pannierSlide.pannierSlideDown .pannierCountIco{
    color: #f26825;
}

.pannierSlide.pannierSlideDown .pannierCount{
    color: #242424;
    font-size: 15px;
    font-weight: 900;
}

#pannierSideMobile{
    display: none;
}

/*
asade panier et panier
 */
#panier #panierHeader{
    position: fixed;
    height: 70px;
    display:block;
    width: 100%;
    background: rgba(33, 33, 33, 1);
    text-align:center;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    /* padding: 20px 0 0 0;*/
    top:0;
}
#panier #panierHeader .row {
    margin-right: unset;
}
#panier .side-inner{
    overflow: hidden;
    -webkit-overflow-scrolling: unset;
}
#panier #panierHeader .logoHeader.sideActive{
    display: block;
    margin: 10px;
}
#panier #panierHeader i.closepanier {
    width: 20px;
    float: right;
    text-align: right;
    display: block;
    padding: 30px;
    font-size: 22px;
    cursor: pointer;
    color: #FFFFFF;
}
#panier #panierHeader i.closepanier:hover::before{
    color: #d57829;
}



/*
    multi value multi page
 */

.marginHeader{
    margin-top: 70px;
}
.marginHeader-90{
    height: 90px;
}

.textTypeOpionionTitre{
    color: #474747;
    font-size: 28px;
    font-weight: 600;
    /*text-shadow: 1px 1px 2px #000000;*/
    letter-spacing: 0.3em;
}

.textTypeOpionionTitrePlus{
    font-size:32px;
}

.textTypeOpionion{
    color: #474747;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.3em;
}

.textTypeOpionionShadow{
    text-shadow: 2px 2px 4px #818181;
}

.btnConfugureOpinion{
    display: inline-block;
    margin-top: 20px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.1em;
    border-radius: 10px;
}
.text-aling-left{
    display: inline-block;
    width: 100%;
    text-align: left;
}

.alert-danger-red{
    color: #ff7600;
    background-color: #8a38409e;
    border-color: #b7b7b7;
    text-align: center;
}
.alert-succes-green{
    color: #ffffff;
    background-color: #37a04482;
    border-color: #bcbebf;
    text-align: center;
}
.alert-anime{
    transition: all 2s;
    -webkit-transition: 2s all;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}
.alert-animenoshow{
    -webkit-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
    margin-top: -50px;
}
.alert-animenoshow-finish{
    height: 0;

}

/*
    page2 configuration
 */
.colConfiguOpinion2 hr{
    width: 90%;
    background-color: black;
    opacity: 1;
    height: 6px;
    border: 0;
    text-align: left;


}

/*.fp-slides{
    width: 80%;
}*/

#carouselConfigurateur .fp-tableCell{
    height: 400px !important;
}

.configCercleColor{
    padding-top: 15px;
    font-size: 25px;
}

.configCercleColor i{
    padding-left: 5px;
    padding-right: 5px;
    text-shadow: 2px 2px 4px #5b5b5b;
}

.configCercleColor a:hover i{
    text-shadow: 3px 3px 6px #000000;
}

.startBtnConfugureOpinion .btnConfugureOpinion{
    display: block;
    width: 200px;
}

.colConfiguOpinion1 img{
    width: 60%;
    height: auto;
}
.startCarouselConfigurateur{
    height: auto;
    width: 80%;

}

.startBtnConfugureOpinion{
    text-align: left;
    padding-top: 20px;
}

.startBtnConfugureOpinion .configCercleColor{
    width: 85%;
    text-align: center;
}

/*
mon compte
 */

.monCompteNavSpan{
    cursor: pointer;
    text-decoration: underline;
}

.monCompteNavSpan:hover{
    color: #f26825;
}

#edit_account_submit, #reset_password_account_submit{
    margin-top: 10px;
}

.account-item{
    background-color: #f1f2f6;
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
}
.account-item a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    color: #4b6584;
    font-weight: bold;
    display: inline-block;
    padding-top: 90px;
}

.account-item a:hover {
    color: #778ca3;
    text-decoration: none;
}

.monCompteDeco{
    text-decoration: none;
    color: #5b5b5b
}
.monCompteDeco:hover{
    color: #f26825;
}

/*
page opinion box
 */

.opinionBox-btn-t{
    letter-spacing: 0.3em;
}
.colOpinionBox2 hr{
    width: 90%;
    background-color: black;
    opacity: 1;
    height: 3px;
    border: 0;
    text-align: left;


}
.colOpinionBox2 h2{
    font-size: 2.5rem;
    letter-spacing: 0.15em;
    font-weight: 450;
    text-align: left;
}

.colOpinionBox2 .margin-top-box150{
    margin-top: 150px;
}

.colOpinionBox2 h1{
    font-size: 3.2rem;
    letter-spacing: 0.15em;
    font-weight: 495;
    text-align: left;
}

.colOpinionBox2 .text-titre-p{
    font-size: 5rem;
    text-align: center;
}
.colOpinionBox2 .text-stitre-p{
    font-size: 1.8rem;
}

.colOpinionBox2 .text-parf{
    width: 450px;
    margin-left: 50px;
    margin-top: 20px;
    text-align: left;
    font-size: 1rem;
    letter-spacing: 0.3em;
    font-weight: 450;
}

.colOpinionBox2 .text-parf-p{
    margin-top: 20px;
    text-align: left;
    font-size: 1rem;
    letter-spacing: 0.3em;
    font-weight: 450;
}

.colOpinionBox2 .text-parf-d{
    text-align: left;
    margin-top: 50px;
    font-size: 1rem;
    letter-spacing: 0.3em;
    font-weight: 500;
    color: #d57829;
}

.colOpinionBox2 .text-parf-wn{
    padding-left: 20px;
}

.colOpinionBox2 .text-parf-d-active{
    cursor: pointer;
}

.colOpinionBox2 .text-parf-d i{
    top: 5px;
    display: inline-block;
    position: relative;

}

.colOpinionBox1 img{
    width: 60%;
    height: auto;
}

.colOpinionBox1 .bloc-color-product{
    position: absolute;
    width: 300px;
    height: 80%;
    top: 100px;
    bottom: 100px;
    margin-left: 20%;
    /*background-color: #888888;*/
}
.colOpinionBox1 .bloc-color-basic{
    position: absolute;
    width: 300px;
    height: 80%;
    top: 100px;
    bottom: 100px;
    margin-left: 21%;
    z-index: 5;
    /*background-color: rgba(0, 0, 0, 0.2);*/
}

.colOpinionBox1 .corp-img-product{
    position: absolute;
    width: 50%;
    height: 65%;
    right: 5%;
    top: 10%;
}

.colOpinionBox1 .corp-img-basic{
    position: absolute;
    width: 50%;
    height: 65%;
    left: 5%;
    top: 20%;
}

.colOpinionBox1 .corp-text-product{
    position: absolute;
    bottom: 20px;
    left: 20px;
    /*color: #FFFFFF;*/
    letter-spacing: 0.2em;
    text-align: left;
}

.colOpinionBox1 .corp-text-product span {
    font-weight: 450;
}

.colOpinionBox1 .corp-text-product .corp-btn-product{
    position: absolute;
    bottom: 5px;
    left: 210px;
}

/*carrouselle*/

.slide-fp-tableCell-modif .fp-tableCell{
    height: 100% !important;
    z-index: 1;
}

.colOpinionBox1 .corp-img-basic .carousel-indicators button{
    z-index: 10;
}

.colOpinionBox1 .disabled .carousel-control-prev, .colOpinionBox1 .disabled .carousel-control-next, .colOpinionBox1 .disabled .carousel-indicators{
    display: none;
}

/*
page boutique
 */

/*.pageBoutiqueClass{
    height: calc(100vh - 90px);
    overflow-y: auto;
}*/

.produitsFiltreFixed{
    width: 16.6666666667%;
    height: auto;
    position: fixed;
    padding: 5px;
}

.produitsFiltreFixed form{
    padding: 10px;
}
.produitsFiltreFixed .btnSearchReset{
    padding: 10px;
    margin-top: -15px;
}

.produitPageCol3{
    min-width: 310px;
    width: 310px;
    max-width: 310px;
    height: 410px;
    cursor: pointer;
    letter-spacing: 0.05em;
}

.produitPageCard{
    min-width: 260px;
    width: 260px;
    max-width: 260px;
    border: unset;
    height: 360px;
}

.produitPageCard img{
    width: 100%;
    height: 260px;
    border: 2px transparent solid;
}
.produitPageCard .card-body{
    text-align: center;
}
.produitPageCard p{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
}
.produitPageCard .produitShow{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    height: 0;
    width: 100%;
    top: 260px;
    color: #FFFFFFFF;
    font-size: 0;
    text-align: center;

    -webkit-transition: 0.5s all;
    transition: 0.5s all;
}
.produitPageCard:hover img{
    border: 2px #d57829 solid;
}
.produitPageCard .card-title{
    font-size: 18px;
}
.produitPageCard .card-title:hover{
    color: #d57829;
}
.produitPageCard .produitShow i{
    margin-top: 20px;
    display: none;
}
.produitPageCard:hover .produitShow i{
    display: block;
}

.produitPageCard:hover .produitShow {
    height: 50px;
    top: 210px;
    font-size: 16px;
}
    /*modal*/
.produitModalePage .modal-footer{
    justify-content: unset;
}
.Produit-btn-t{
    letter-spacing: 0.3em;
}
.colProduit2 hr{
    width: 90%;
    background-color: black;
    opacity: 1;
    height: 3px;
    border: 0;
    text-align: left;
}

.colProduit2 .margin-top-box150{
    margin-top: 50px;
}

.colProduit2 h1{
    font-size: 3.2rem;
    letter-spacing: 0.15em;
    font-weight: 495;
    text-align: left;
}

.colProduit2 .text-titre-p{
    font-size: 3rem;
    text-align: left;
}

.colProduit2 .text-parf-p{
    margin-top: 20px;
    text-align: left;
    font-size: 1rem;
    letter-spacing: 0.3em;
    font-weight: 450;
    padding-left: 20px;
    padding-right: 70px;
}
.colProduit2 .text-parf-d{
    text-align: left;
    margin-top: 50px;
    font-size: 1rem;
    letter-spacing: 0.3em;
    font-weight: 500;
    color: #d57829;
}
.colProduit2 .text-parf-d i{
    top: 5px;
    display: inline-block;
    position: relative;

}

.colProduit1 img{
    width: 60%;
    height: auto;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
}
.colProduit1 .carousel-item img.zoom{
    width: 80%;
}
.colProduit1 .corp-img-product .carousel-item{
    width: 100%;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
}

.colProduit1 .bloc-color-product{
    position: absolute;
    width: 300px;
    height: 95%;
    top: 20px;
    margin-left: 20%;
}
.colProduit1 .corp-img-product{
    position: absolute;
    width: 50%;
    height: 65%;
    left: 5%;
    top: 10%;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
}
.colProduit1 .corp-img-product.zoom{
    top: 0;
    height: 100%;
}

.colProduit1 .corp-text-product{
    position: absolute;
    bottom: 20px;
    left: 20px;
    letter-spacing: 0.1em;
    text-align: left;
}

.colProduit1 .corp-text-product span {
    font-weight: 450;
}
.colProduit1 .corp-text-product .prixProduitModal .prixProduitModalChange {
    font-weight: 500;
    font-size: 18px;
}
.colProduit1 .corp-text-product span.prixProduitModal i {
    font-size: 16px;
}
.prixProduitModalsup{
    display: none;
    font-weight: 500;
    font-size: 18px;
}
.prixProduitModalsup i {
    font-size: 16px;
}

.colProduit1 .corp-text-product .corp-btn-product{
    position: absolute;
    bottom: 5px;
    left: 210px;
    width: 100%;
}
.btn-ajpanier-Sup{
    display: none;
}

.containerPageProduitTop{
    max-width: 100%;
    height: 100%;
}
.containerPageProduit{
    max-width: 100%;
    margin-top: 20%;
    letter-spacing: 0.1em;
    font-weight: 500;
    text-align: justify;
}

/*carrouselle*/

.slideProduit-fp-tableCell-modif .fp-tableCell{
    height: 100% !important;
    z-index: 1;
}

.colProduit1 .disabled .carousel-control-prev, .colProduit1 .disabled .carousel-control-next, .colProduit1 .disabled .carousel-indicators{
    display: none;
}

.produitModalePage .modal-footer button{
    background-color: #f26825;
    transition: all 0.5s;
    -webkit-transition: 0.5s all;
}
.produitModalePage .carousel-indicators [data-bs-target]{
    background-color: #fa8045;
}
.produitModalePage .modal-footer button:hover{
    background-color: #505050;
}
.produitModalePage .carousel-indicators.zoom{
    display: none;
}
/*
provoire carrouselle w-90
 */
.colProduit1 .w-90{
    width: 90% !important;
}

/**
page panier
 */
#panier .corpsPannier{

    margin-top: 70px;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 10px;
}

.titlePanier{
    display: block;
    width: 100%;
    text-align: center;
}
.recapPanier{
    margin-top: 50px;
}
.recapPanier .panierBraceletMontre{
    padding-left: 20px;
}
.recapPanier .deletePanier{
    padding-top: 36px;
}
.recapPanier .btnActionPanier{
    color: #FFFFFF;
    text-decoration: none;
}
.recapPanier .btnActionPanier:hover{
    color: #fa8045;
}
.recapPanier hr{
    background-color: #fa8045;
    opacity: 1;
    height: 3px;
    border: 0;
}
.recapPanier .imgProduitPanier{
    height: 100px;
    width: 100px;
}

.recapPanier .sousTotale{
    color: #FFFFFF;
    width: 30%;
    margin-left: 70%;
}
.recapPanier .sousTotale .thValideCo{
    border-bottom-width: 0 !important;
}

.recapPanier .formBtnMontreValide{
    float: right;
    color: #FFFFFF;
}
.recapPanier .formBtnkdoValide{
    float: right;
    color: #FFFFFF;
}
.recapPanier .formBtnkdoValide:hover,
.recapPanier .formBtnMontreValide:hover{
    color: #212529;
}
.recapPanier .formMontreinput{
    width: 75%;
    float: right;
}
.recapPanier .formKdoinput{
    width: 75%;
    float: right;
}
.recapPanier .kdoName{
    margin-left: 20px;
    font-weight: 400;
}

/**
page galrie
 */

#galerie #imageStart div{
    width: 33.33333333333333% ;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: none;
}
#galerie #imageStart div a{
    width: 100%;
    border: none;
}

#galerie #imageStart div a img{
    width: 100% ;
    margin: auto;
    display: block;
    border: none;
}

#galerie .imagesGalerie{
    margin-top: 50px;
}

#galerie .imagesGalerie div{
    width: 300px ;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: none;
    margin: auto;
    color: #FFFFFF;
}

#galerie .imagesGalerie div:hover {
    color: #fa8045;
}

#galerie .imagesGalerie div a .imageVideo{
     position: absolute;
     height: 300px;
     width: 300px;
     margin-top: -300px;
     margin-left: -10px;
 }

#galerie .imagesGalerie div a .imageVideo i{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 64px;
    height: 64px;
    margin-top: 100px;

}

#galerie .imagesGalerie div a .imageCarousel{
    position: absolute;
    height: 300px;
    width: 300px;
    margin-top: -300px;
    margin-left: -10px;
}

#galerie .imagesGalerie div a .imageCarousel i{
    display: block;
    margin-left: 220px;
    width: 54px;
    height: 54px;
}

#galerie .imagesGalerie div a{
width: 100%;
height: 100%;
border: none;
}

#galerie .imagesGalerie div a img{
width: 100% ;
height: 300px;
margin: auto;
display: block;
border: none;
}

/**
page configurateur
 */

/*loading*/
#customLoadingScreenDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
    font-size: 50px;
    text-align: center;
    background-color: rgba(0, 0, 0, 1);
    z-index: 8;
    display: none;
}
#customLoadingScreenDiv #blockVideoLoading {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    height: 50vh;
}
#customLoadingScreenDiv #blockVideoLoading img {
    margin: auto;
    width: 100%;
}
#customLoadingScreenDiv .textLoading {
    width: 100%;
    text-align: center;
    margin-top: 5%;
    color: #FFFFFF;
    display: inline-block;
    font-family: AvenirNextCyr-Demi, Roboto,Helvetica,Arial,sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.2em;
}

/*button photo*/
#clickPhotoV {
    position: absolute;
    top: 90px;
    left: 20px;
    height: auto;
    width: auto;
    cursor: pointer;
}

/* Designing for scroll-bar */
.configBlockBody .rowConfigMontre::-webkit-scrollbar,
.configBlockBodyMontres::-webkit-scrollbar {
    width: 6px;
}
.configBlockBody .rowConfigMontre::-webkit-scrollbar-track,
.configBlockBodyMontres::-webkit-scrollbar-track {
    background: #262626;
    border-radius: 5px;
}
.configBlockBody .rowConfigMontre::-webkit-scrollbar-thumb,
.configBlockBodyMontres::-webkit-scrollbar-thumb {
    background: #fa8045;
    border-radius: 5px;
    cursor: pointer;
}
.configBlockBody .rowConfigMontre::-webkit-scrollbar-thumb:hover,
.configBlockBodyMontres::-webkit-scrollbar-thumb:hover {
    background: #e76222;
    font-size: 24px;
    letter-spacing: 0.1em;
    margin-top: 30px;
}

.configBlockBody {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 50%;
    height: 50vh;
    background-color: rgba(77, 77, 77, 0.7);
    border-radius: 10px;
    z-index: 4;
    margin: auto;
}

.configBlockAlert {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 25%;
    height: 22vh;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10;
    border: solid #e76222 2px;
    margin: auto;
}


.configBlockAlert .scrollableBloc-100-50,
.configBlockBody .scrollableBloc-100-50 {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 50px);
    padding: 0 10px 0 10px;

}

.configBlockBodyText {
    height: 80vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10;
    border: solid #e76222 2px;
}

.imgInfo616{
    height : 75%;
}

@media screen and (min-width: 901px) and (max-width: 1550px) {
    .configBlockBody {
        width: 75%;
        height: 50vh;
    }

    .configBlockAlert {
        width: 50%;
        height: 22vh;
    }

}
@media screen and (max-width: 900px) {
    .configBlockBody {
        width: 90%;
        height: 80vh;
    }

    .configBlockAlert {
        width: 90%;
        height: 32vh;
    }
    .configBlockBodyText {
        height: 70vh;
    }
    .imgInfo616{
        width: 100%;
        height : unset;
    }
    #customLoadingScreenDiv #blockVideoLoading {
        width: 75%;
    }

}


.configBlockBodyMontres {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    z-index: 4;
    margin: auto;
    overflow: auto;
    overflow-x: hidden;
}

.configBlockAlert .cbTitre {
    color: #FFFFFF;
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-top: 20px;
    margin-bottom: 15px;
    font-family: AvenirNextCyr-regular, Arial, serif;
}

.configBlockBody .cbTitre {
    color: #FFFFFF;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0.1em;
    margin-top: 30px;
    margin-bottom: 30px;
    font-family: AvenirNextCyr-regular, Arial, serif;
}
.configBlockAlert .cbParaf{
    font-size: 16px;
}

.configBlockBody .cbParaf {
    font-size: 18px;
}

.configBlockBody .cbTitre .aOpinion {
    text-decoration: none;
    cursor: pointer;
    color: #e76222;
}

.configBlockBody .cbSousTitre {
    color: #a1a1a1;
    text-align: center;
    font-size: 20px;
}
.configBlockAlert .btnStart,
.configBlockBody .btnStart {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 0 0 5px 5px;
    height: 50px;
    background-color: #e76222;
    color:#FFFFFF;
    border-top: 1px solid #FFFFFF;
}
.configBlockBody .col-md-6 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
}
.configBlockBody .rowConfigMontre {
    overflow: auto;
    height: 80%;
    margin-left: unset;
    margin-right: unset;
    bottom: 0;
    position: absolute;
}
.configBlockBodyMontres .rowConfigMontre {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.configBlockBodyMontres .rowConfigMontre.marginDownRowConfig {
    margin-top: -10vh;
}
.configBlockBodyMontres .rowConfigMontre.marginUpRowConfig {
    margin-top: 80px;
}
.configBlockBodyMontres .rowConfigMontre .col-md-6{
    cursor: pointer;
    height: 40vh;
}
.configBlockBodyMontres .rowConfigMontre .col-md-6 a{
    text-decoration: none;
    border: none;
}
.configBlockBodyMontres .rowConfigMontre .col-md-6 img{
    height: 100%;
}
@media screen and (max-width: 770px) {
    .configBlockBodyMontres .rowConfigMontre {
        width: 100%;
    }
    /*.configBlockBodyMontres .rowConfigMontre.marginDownRowConfig {
        margin-top: unset;
    }*/
    .configBlockBodyMontres .rowConfigMontre .col-md-6 img{
        height: auto;
        width: 100%;
    }
}
.configBlockBody .col-md-4 {
    cursor: pointer;
}
.configBlockBody .col-md-4 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
}
.configBlockBodyMontres .cmTitre {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 24px;
}
.configBlockBodyMontres .cmRef, .configBlockBodyMontres .cmDescr {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 14px;
}
.configBlockBodyMontres .cmPrix {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 20px;
}

.configBlockBody.hidden,
.configBlockAlert.hidden,
.configBlockBodyMontres.hidden {
    display: none;
}

#menuConfiguration {
    position:absolute;
    top:9%;
    right: 1%;
    width: 40px;
    height: auto;
    background-color: #FFFFFF;
    /*background-color: #cccccc;*/
    /*border-radius: 10px;*/
    z-index: 10;
    /*box-shadow: 1em 1.2em 7px 8px #5e5e5e54;*/
}
#menuConfiguration .space {
    width: 100%;
    height: 50px;
    /*background-color: #b05521;*/
    background-color: #000000;
    /*background: linear-gradient(90deg, #0061a4 20%, #DDE9EF 50%, #D60920 80%);*/
    /*border-radius: 10px 10px 0 0;*/
    cursor: move;
}
#menuConfiguration .iconMenu {
    width: 100%;
    height: 40px;
    cursor: pointer;
    position: relative;
    border-bottom: #999 solid 1px;
}
#menuConfiguration .iconMenu:hover {
    background-color: #999999;
}

#menuConfiguration .iconMenu .iconMenuImg {
    width: 35px;
    height: 35px;
    display: block;
    position: absolute;
    margin: 2px;
}
#menuConfiguration .iconMenu a {
    text-decoration: none;
}
#menuConfiguration .iconMenu .iconMenuFa {
    font-size: 30px;
    color: #838588;
    text-align: center;
    padding: 5px;
    display: block;
    position: absolute;
}

#menuConfiguration.hidden {
    display: none;
}

#menuConfiguration .listeMenu {
    width: 0;
    height: auto;
    position: absolute;
    left: 0;
    -webkit-transition: 0.7s all;
    transition: 0.7s all;
}
#menuConfiguration .listeMenu .titreMenu {

    width: 100%;
    height: 40px;
    background-color: #FFFFFF;
    /*background-color: #cccccc;*/
    /*font-size: 14px;*/
    line-height: 100%;

}
#menuConfiguration .listeMenu .titreMenu span {
    font-size: 1px;
    line-height: 100%;
    padding: 12px 5px 5px;
    display: none;
    -webkit-transition: 0.7s all;
    transition: 0.7s all;
}

#menuConfiguration .iconMenu:hover .listeMenuAuto,
#menuConfiguration .iconMenu .listeMenuShow {
    width: 200px;
    left: -200px;
}
#menuConfiguration .iconMenu:hover .listeMenuAuto .titreMenu span,
#menuConfiguration .iconMenu .listeMenuShow .titreMenu span{
    font-size: 14px;
    display: block;
}

#menuConfiguration .listeMenu .sousMenu  {
    display: none;
    width: 0;
    height: 0;
    cursor: default;
    background: rgba(255, 255, 255, 0.30);
    /*background: rgba(90, 90, 90, 0.30);*/
    -webkit-transition: 0.7s all;
    transition: 0.7s all;
}
#menuConfiguration .listeMenu .sousMenuDefault  {
    /*border-radius: 0 0 10px 10px;*/
}
#menuConfiguration .listeMenu .sousMenuInverse  {
    top: -240px;
    position: absolute;
    /*border-radius: 10px 10px 0 0;*/
}
#menuConfiguration .listeMenu .sousMenuShow {
    display: block;
    width: 100%;
    height: 240px;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelection {
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.48);
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelection.hidden {
    display: none;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelection .sousMenuSelectionBlock {
    width: 40px;
    height: 40px;
    cursor: pointer;
    float: left;
    border-right: solid 1px rgba(204, 204, 204, 0.50);
}

#menuConfiguration .listeMenu .sousMenu .sousMenuSelection .sousMenuSelectionBlock .sousMenuSelectionImg {
    width: 35px;
    height: 35px;
    display: block;
    margin: 2px;
    color: #848484;
    font-size: 35px;

}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelection .sousMenuSelectionBlock:hover,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelection .sousMenuSelectionBlock.active
{
    background-color: #FFFFFF;
}

#menuConfiguration .listeMenu .sousMenu .sousMenuSelection .sousMenuSelectionBlock.hidden {
    display: none;
}

#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet {
    display: none;
    width: 193px;
    height: 196px;
    font-size: 40px;
    padding-left: 12px;
    overflow: auto;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet {
    display: none;
    width: 193px;
    height: 236px;
    font-size: 40px;
    padding-left: 12px;
    overflow: auto;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet.active,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet.forceActive,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet.active {
    display: block;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet span,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet span {
    cursor: pointer;
    margin-top: 10px;
    display: inline-block;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet span i,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet span i {
    border-radius: 60px;
    box-shadow: 0 0 2px #b5b5b5;
    padding: 0.1em 0.1em;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet span:hover i,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet span:hover i {
    box-shadow: 0 0 8px #fff;
}

/* Designing for scroll-bar */
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet::-webkit-scrollbar,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet::-webkit-scrollbar {
    width: 6px;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet::-webkit-scrollbar-track,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet::-webkit-scrollbar-track {
    background: #262626;
    border-radius: 5px;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet::-webkit-scrollbar-thumb,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet::-webkit-scrollbar-thumb {
    background: #fa8045;
    border-radius: 5px;
    cursor: pointer;
}
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionOnglet::-webkit-scrollbar-thumb:hover,
#menuConfiguration .listeMenu .sousMenu .sousMenuSelectionNoOnglet::-webkit-scrollbar-thumb:hover {
    background: #e76222;
    font-size: 24px;
    letter-spacing: 0.1em;
    margin-top: 30px;
}

/*effect 3d*/

#menuConfiguration .iconMenu::before,
#menuConfiguration .listeMenu::before {
    height: 40px;
    background: #8d8d8d;
    top: 0.25em;
    left: -0.5em;
    transform: skewY(-45deg);
}

#menuConfiguration .iconMenu::before,
#menuConfiguration .finIconMenu::after,
#menuConfiguration .space::before,
#menuConfiguration .listeMenu::before,
#menuConfiguration .listeMenu .sousMenu::before,
#menuConfiguration .listeMenu .sousMenu.sousMenuDefault::after,
#menuConfiguration .listeMenu .sousMenu.sousMenuInverse::after {
    content: "";
    position: absolute;
    transition: all 0.25s linear;
    width: 0.5em;
}
#menuConfiguration .finIconMenu::after {
    height: 40px;
    background: #8d8d8d;
    bottom: -1.5em;
    left: 12px;
    transform: rotate(90deg) skew(0,45deg);
}
.space::before {
    height: 50px;
    /*background: #9b4a1c;*/
    /*background: #8d8d8d;*/
    background: #000000;
    top: 0.25em;
    left: -0.5em;
    transform: skewY(-45deg);
}

#menuConfiguration .listeMenu .sousMenu.sousMenuDefault::before {
    height: 240px;
    /*background: rgba(52, 52, 52, 0.40);*/
    background: rgba(255, 255, 255, 0.40);
    top: 42px;
    left: -0.5em;
    transform: skewY(-45deg);
}
#menuConfiguration .listeMenu .sousMenu.sousMenuInverse::before {
    height: 240px;
    /*background: rgba(52, 52, 52, 0.40);*/
    background: rgba(255, 255, 255, 0.40);
    top: 5px;
    left: -0.5em;
    transform: skewY(-45deg);
}
#menuConfiguration .listeMenu .sousMenu.sousMenuDefault::after {
    height: 200px;
    /*background: rgba(52, 52, 52, 0.40);*/
    background: rgba(255, 255, 255, 0.40);
    bottom: -101px;
    left: 92px;
    transform: rotate(90deg) skew(0,45deg);
}
#menuConfiguration .listeMenu .sousMenu.sousMenuInverse::after {
    height: 200px;
    background: rgb(204 204 204);
    bottom: -144px;
    left: 92px;
    transform: rotate(90deg) skew(0,45deg);
}

/* progress bar */

.wrapper {
    width: 100%;
    /*min-height: 800px;*/
    /*position: absolute;*/
    display: block;
}
.progressbar-wrapper {
    width: 50%;
    height: 60px;
    /*top: 50%;*/
    bottom: 10%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
.progressbar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(4deg) rotateY(-30deg);
    text-align: center;
    color: #FFFFFF;
}
#laodingPurcent {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: -6px;
    font-family: AvenirNextCyr-Demi, Roboto,Helvetica,Arial,sans-serif;
}
.side {
    width: 100%;
    height: 100%;
    background-color: rgba(254, 254, 254, 0.3);
    top: 0;
    left: 0;
    position: absolute;
}
.bottom {
    box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.top {
    transform: translate(0, -100%) rotateX(90deg);
    transform-origin: bottom;

}
.back {
    transform: translateZ(-60px);
}
.left {
    width: 60px;
    transform: rotateY(90deg);
    transform-origin: left;
    background-color: rgba(231, 98, 34, 0.6);
}
.bar {
    height:100%;
    background-color: rgba(231, 98, 34, 0.6);
    box-shadow: 5px 5px 50px 5px rgba(231, 98, 34, 0.3);
    width:0%;
}