/* 
BOXES   


    HEADER

    01 - 
    02 - BOX POP UP
    03 - BOX LANGUAGE
    04 - BOX SEARCH


    

    BOXES RIGHT FIXED
    01 - Box nous appeler

    FOOTER
    01 - Box contact footer
*/



/* --------------------------------
    BOXES RIGHT FIXED
-------------------------------- */


#rightbarFixed .box{
    z-index: 100000;
}

.box-linkEshop:hover{
    background-color: var(--color02) !important;
}
#rightbarFixed .box-title{
    width: 95px;
    height: 95px;
    transition: 0.2s;
    z-index: 100000;
}
#rightbarFixed .box.active {
    z-index: 100;
}
#rightbarFixed .box.active .box-title *{
    color: var(--color00) !important;
}
#rightbarFixed .box.active .box-title{
    background-color: var(--color03) !important;
}

#rightbarFixed .box{
    position: relative;
    transition: 0.2s ;
}

    #rightbarFixed .box-content{
        width: 0;
        /* overflow: hidden;
        opacity: 0; */
        position: absolute;
        right:115px;
        max-height: 90vh;
        overflow-y: auto;
        transition: right 0.2s;
    }
    
    #rightbarFixed .box.active .box-content{
        right: 95px;
        opacity: 1;
        width: 385px;
    }
    #rightbarFixed .box.active .box-content .title-form{
        height: 95px;
        font-size: 1.6rem;
    }



    /* 01 - Box nous appeler */
    .box-call .gform_confirmation_wrapper{
        /* display: none; */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(255,255, 255, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .gform_confirmation_message .ico-closed{
        display: block;
        text-indent: -5000px;
        overflow: hidden;
        content: "";
        background-position: -120px -200px;
        position: absolute;
        transform: rotate(45deg);
        background-color: var(--color04);
        top: -50px;
        border-radius: 50%;
        right: 0;
    }
    .gform_confirmation_message::before{
        display: block;
        content: "Contact";
        font-size: 1.8rem;
        color: var(--color03);
        position: absolute;
        top: -50px;
        left: 0;
    }

    .gform_confirmation_message{
        background-color: var(--color00);
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
        border-radius: 10px;
        position: relative;
        z-index: 1000;
        padding: 30px;
        min-width: 500px;
    }
    .gform_confirmation_message h2{
        font-family: 'sf_compact_textheavy', sans-serif;
        color: var(--color04);
        /* background: -webkit-linear-gradient(180deg, rgba(61,    125,233,1) 0%, rgba(1,45,150,1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; */
    }
    .gform_confirmation_message h2::after{
        background-color: var(--color04);
        /* background: rgb(4,54,251);
        background: linear-gradient(90deg, rgba(61, 125,233,1) 0%, rgba(1,45,150,1) 100%); */

        display: block;
        width: 50px;
        height: 7px;
        content: "";
        margin: 10px 0;
    }

    


    .gform_confirmation_message a{
        display: inline-flex;
        align-items: center;
        font-size: 1.8rem;
        position: relative;
        font-family: 'open_sansregular', sans-serif;
    }
    .gform_confirmation_message a::after{
        display: block;
        content:"";
       left: 30px;
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: var(--color01);
    }

    .gform_confirmation_message a::before{
        display: block;
        width: 20px;
        min-width: 20px;
        height: 20px;
        margin-right:10px;
        content: "";
        background-position: -240px -160px;
    }
/* --------------------------------
HEADER
-------------------------------- */


    /* 02 - BOX POP UP */
    .box-popUp{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        /* background-color: rgba(3,27,84, 0.9); */
        /* display: flex; */

        align-items: center;
        justify-content: center;
        opacity: 1;
        transition: 0.2s;
    }

    .box-popUp.active{
        display: flex;
    }

    .box-popUp .content_popUp{
        max-width: 500px;
        text-align: center;
    }
    .box-popUp.closed{
        opacity: 0;
        bottom: 100%;
        overflow: hidden;
    }

    /* 03 - BOX LANGUAGE */
    .select_language{
        height: 16px;
        position: relative;
        z-index: 10000;
        overflow: hidden;
    }
    .select_language:hover{
        overflow: visible;
    }

    .select_language ul{
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    .select_language ul li a,
    .select_language ul li{
        padding: 0;
        display: block;
        order: 2;
    }
    .select_language ul li img{
        height: 12px !important;
        width: auto !important;
    }
    .select_language ul li{
        margin-bottom: 5px !important;
    }

    .select_language ul li.wpml-ls-current-language{
        order: 1;
    }


/* ------------------------
---------------------------
FOOTER
---------------------------
------------------------- */




/* ------------------------
    01 - Box contact footer
------------------------- */    

.box_footercontact .title{
    font-size: 2.5rem
}
@media (min-width:956px){
    .box_footercontact .title{
        font-size: 5.5rem
    }
}

.box_footercontact .text{
    font-size: 2rem;
}
.contact .tel,
.box_footercontact .tel{
    position: relative;
}
.contact .tel::after,
.box_footercontact .tel::after{
    display: block;
    height: 5px;
    content: '';
    background-color:var(--color03);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    transition: 0.2s;
}
.contact .tel:hover::after,
.box_footercontact .tel:hover::after{
    left: 30%;
    right: 30%;
}
.box_footercontact_picture{
   margin-top:-8%;
}