/* only for backoffice */
#module_form #homepopin{
    float:right;
    position:relative;
    margin-top:-130px;
    height: 300px;
    overflow: hidden;
    width: 300px;
    border: 1px solid gray;
}
#homepopin .bobo_popin{
    position:fixed;
    text-align:center;
}
#module_form #homepopin .bobo_popin{
    position:absolute;
    width:150px;height:150px;line-height:150px;
    background:#000;color:#fff;
}
body #homepopin .bobo_popin.active{
    bottom:0px;
    right:0px;
    display:block;
    opacity:1;
    filter:alpha(opacity=100);
}
body #module_form #homepopin .bobo_popin.active{
    bottom:15px;
    right:15px;
}
#homepopin .bobo_popin .cta {
    position: absolute;
    bottom: 48px;
    left: 0;
    width: 100%;
    text-align: center;
}
#homepopin .bobo_popin .cta span{
    margin-top: 16px;
    backdrop-filter: blur(40px);
    display: flex;
    align-items: center;
    padding: 0px 8px;
    width: fit-content;
    border-radius: 6px;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 36px;
    margin:0 auto;
}
#homepopin .bobo_popin .cta span:hover{
    text-decoration: underline;
}
#homepopin .bobo_popin .relative{
   position:relative;
}
@media(min-width:1024px){
    #homepopin .bobo_popin.sens_top{
        bottom:120vh;
        right:15px;
        transition:all 1s;
    }
    #homepopin .bobo_popin.sens_bottom{
        bottom:-120vh;
        right:15px;
        transition:all 1s;
    }
    #homepopin .bobo_popin.sens_right{
        bottom:15px;
        right:-50%;
        transition:all 1s;
    }
    #homepopin .bobo_popin.sens_left{
        bottom:15px;
        right:150%;
        transition:all 1s;
    }
    #homepopin .bobo_popin.sens_fade{
        bottom:15px;
        right:15px;
        transition:all 1s;
        opacity:0;
        filter:alpha(opacity=0);
    }
}
#index #homepopin,
#index #homepopin .bobo_popin{
    width: 598px;
    height: 550px;
    max-width:100%;
}
#index #homepopin .bobo_popin .relative,
#index #homepopin .bobo_popin a > div,
#index #homepopin .bobo_popin a{
    display:block;
    width:100%;
    height:100%;
    float:left;
}
@media(max-width:1024px){
    #index #homepopin,
    #index #homepopin .bobo_popin{
        width: 375px;
        height: 342px;
    }
    #homepopin .bobo_popin .cta{
        bottom:29px;
    }
    #homepopin .bobo_popin .cta span{
        line-height:22px;
        padding:0 16px;
    }
    #homepopin .bobo_popin.sens_mobile_top{
        bottom:-120vh;
        right:15px;
        transition:all 1s;
    }
    #homepopin .bobo_popin.sens_mobile_bottom{
        bottom:120vh;
        right:15px;
        transition:all 1s;
    }
    #homepopin .bobo_popin.sens_mobile_right{
        bottom:15px;
        right:-50%;
        transition:all 1s;
    }
    #homepopin .bobo_popin.sens_mobile_left{
        bottom:15px;
        right:150%;
        transition:all 1s;
    }
    #homepopin .bobo_popin.sens_mobile_fade{
        bottom:15px;
        right:15px;
        transition:all 1s;
        opacity:0;
        filter:alpha(opacity=0);
    }
}
/* end only for backoffice */


.bobo_animate_1{
    animation: bounceInRight 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_1:hover {
    animation: bounceInRight, bounceHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_1 : bounceInRight */
@keyframes bounceInRight {
    0% { opacity: 0; transform: translateX(100px)  rotate(-20deg); }
    30% { opacity: 1; transform: rotate(8deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
    60% { transform: rotate(-2deg); }
    70% { transform: rotate(2deg); }
    80% { transform: rotate(-1deg); }
    90% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

@keyframes bounceHover {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(2deg); }
    20% { transform: rotate(-1deg); }
    30% { transform: rotate(4deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
    60% { transform: rotate(-2deg); }
    70% { transform: rotate(2deg); }
    80% { transform: rotate(-1deg); }
    90% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

/* effet Fade In */
.bobo_animate_2{
    animation: fadeIn 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_2:hover {
    animation: fadeIn, fadeHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_2 : fadeIn */
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0px); }
}
@keyframes fadeHover {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* effet Flip In */
.bobo_animate_3{
    animation: flipInX 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_3:hover {
    animation: flipInX, flipHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_3 : flipInX */
@keyframes flipInX {
    0% { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    40% { transform: perspective(400px) rotateX(-20deg); }
    60% { opacity: 1; transform: perspective(400px) rotateX(10deg); }
    80% { transform: perspective(400px) rotateX(-5deg); }
    100% { transform: perspective(400px) rotateX(0deg); }
}
@keyframes flipHover {
    0% { transform: perspective(400px) rotateX(0deg); }
    25% { transform: perspective(400px) rotateX(10deg); }
    50% { transform: perspective(400px) rotateX(0deg); }
    75% { transform: perspective(400px) rotateX(-10deg); }
    100% { transform: perspective(400px) rotateX(0deg); }
}

/* effet Slide in front left */
.bobo_animate_4{
    animation: slideInFrontLeft 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_4:hover {
    animation: slideInFrontLeft, slideHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_4 : slideInFrontLeft */
@keyframes slideInFrontLeft {
    0% { opacity: 0; transform: translateX(-100%) translateZ(100px) rotateY(-90deg); }
    100% { opacity: 1; transform: translateX(0%) translateZ(0px) rotateY(0deg); }
}
@keyframes slideHover {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* effet Slide in front right */
.bobo_animate_5{
    animation: slideInFrontRight 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_5:hover {
    animation: slideInFrontRight, slideHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_5 : slideInFrontRight */
@keyframes slideInFrontRight {
    0% { opacity: 0; transform: translateX(100%) translateZ(100px) rotateY(90deg); }
    100% { opacity: 1; transform: translateX(0%) translateZ(0px) rotateY(0deg); }
}
/* effet Slide in front bottom */
.bobo_animate_6{
    animation: slideInFrontBottom 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_6:hover {
    animation: slideInFrontBottom, slideHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_6 : slideInFrontBottom */
@keyframes slideInFrontBottom {
    0% { opacity: 0; transform: translateY(100%) translateZ(100px) rotateX(90deg); }
    100% { opacity: 1; transform: translateY(0%) translateZ(0px) rotateX(0deg); }
}
/* effet Slide in front top */
.bobo_animate_7{
    animation: slideInFrontTop 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_7:hover {
    animation: slideInFrontTop, slideHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_7 : slideInFrontTop */
@keyframes slideInFrontTop {
    0% { opacity: 0; transform: translateY(-100%) translateZ(100px) rotateX(-90deg); }
    100% { opacity: 1; transform: translateY(0%) translateZ(0px) rotateX(0deg); }
}
/* effet Zoom In */
.bobo_animate_8{
    animation: zoomIn 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_8:hover {
    animation: zoomIn, zoomHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_8 : zoomIn */
@keyframes zoomIn {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes zoomHover {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* effet Bounce in */
.bobo_animate_9{
    animation: bounceIn 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_9:hover {
    animation: bounceIn, bounceHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_9 : bounceIn */
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
/* effet Light Speed In */
.bobo_animate_10{
    animation: lightSpeedInRight 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_10:hover {
    animation: lightSpeedInRight, lightSpeedHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_10 : lightSpeedInRight */
@keyframes lightSpeedInRight {
    0% { opacity: 0; transform: translateX(100%) skewX(-30deg); }
    60% { opacity: 1; transform: translateX(-20%) skewX(20deg); }
    80% { transform: translateX(10%) skewX(-10deg); }
    100% { transform: translateX(0%) skewX(0deg); }
}
@keyframes lightSpeedHover {
    0% { transform: translateX(0%) skewX(0deg); }
    50% { transform: translateX(5%) skewX(5deg); }
    100% { transform: translateX(0%) skewX(0deg); }
}
/* effet de roulade */
.bobo_animate_11{
    animation: rollIn 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_11:hover {
    animation: rollIn, rollHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_11 : rollIn */
@keyframes rollIn {
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; transform: translateX(0%) rotate(0deg); }
}
@keyframes rollHover {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(2deg); }
    20% { transform: rotate(-1deg); }
    30% { transform: rotate(4deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
    60% { transform: rotate(-2deg); }
    70% { transform: rotate(2deg); }
    80% { transform: rotate(-1deg); }
    90% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}
/* effet spider man */
.bobo_animate_12{
    animation: spiderIn 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_12:hover {
    animation: spiderIn, spiderHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_12 : spiderIn */
@keyframes spiderIn {
    0% { opacity: 0; transform: translateY(-100%) rotate(720deg) scale(0); }
    100% { opacity: 1; transform: translateY(0%) rotate(0deg) scale(1); }
}
@keyframes spiderHover {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* effet Spiderwoman */
.bobo_animate_13{
    animation: Spiderwoman 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_13:hover {
    animation: Spiderwoman, SpiderwomanHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_13 : Spiderwoman */
@keyframes Spiderwoman {
    0% { opacity: 0; transform: translateY(100%) rotate(360deg) scale(0); }
    100% { opacity: 1; transform: translateY(0%) rotate(0deg) scale(1); }
}
@keyframes SpiderwomanHover {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
/* effet tour eiffel */
.bobo_animate_14{
    animation: spiderkid 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_14:hover {
    animation: spiderkid, spiderkidHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_14 : eiffelIn */
@keyframes spiderkid {
    0% { opacity: 0; transform: translateY(100%) rotate(-360deg) scale(0); }
    100% { opacity: 1; transform: translateY(0%) rotate(0deg) scale(1); }
}
@keyframes spiderkidHover {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* effet Hearbeat */
.bobo_animate_15{
    animation: Heartbeat 1.5s 1;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);
}
.bobo_animate_15:hover {
    animation: Heartbeat, HeartbeatHover 1.5s 1;
    animation-iteration-count: 0, 1;
    animation-delay: 0s, 0s;
    transform-origin: 50% 0%;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
/* bobo_animate_15 : Heartbeat */
@keyframes Heartbeat {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes HeartbeatHover {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}