.revolut{

        --revWmask:min(30%, 350px);
        --revHmask:min(40%, 400px);

        min-height:100vh !important;
        padding: 0 !important;
        position: relative;
}
.revolut>.restart{position: absolute; top: 0; height: 1px;}
.revolut>.end{position: absolute; top: calc(100vh - 1px); height: 1px;}

.revolut>.bg_choice{

/*        height: 100vh;
        max-width: 100% !important; width: 100%;*/
        margin: 0;
        position: absolute;
        top:0; left: 0;width: 100%; height: 100%;
}
.revolut >h2{position: absolute !important; top:calc(50% - var(--revHmask)); left:50%;transform: translate(-50%,-100%);}
.revolut>.bgWrap{overflow: hidden}
.revolut>.bgWrap>.bg_img{
        top:50%;left: 50%; transform: translate(-50%, -50%);
       transition-property: width, height; transition-duration: 1s;transition-timing-function:cubic-bezier(0.83, 0, 0.17, 1)
}
.revolut>.bg_choice>.bloc3_bgcolor>.bloc3{display: flex; flex-direction: column}
.revolut>.bg_choice>.bloc3_bgcolor>.bloc3>.btn, .revolut>.bg_choice>.bloc3_bgcolor>.bloc3>.btnPlus{margin-bottom: 1em;margin-top: auto; }


html body .revolut>.bg_choice>.bloc3_bgcolor>.bloc3:first-of-type{transform: translateX(-50%) scale(1.5);opacity: 0;}
html body .revolut>.bg_choice>.bloc3_bgcolor>.bloc3:last-of-type{transform: translateX(50%) scale(1.5); opacity: 0;}
.revolut>.bg_choice>.bloc3_bgcolor>.bloc3:first-of-type,
.revolut>.bg_choice>.bloc3_bgcolor>.bloc3:last-of-type{transition-timing-function:cubic-bezier(0.83, 0, 0.17, 1);transition-duration:1s;transition-property:transform, opacity;}



/********************************************************
 *
 *******************************************************/

.revolut>.bg_choice>.bgWrap,
.revolut>.restart.animDone~.bg_choice>.bgWrap{
        --marge:0px;
        overflow: visible !important;
        /*clip-path:xywh(calc((50% + 4px) - (200px + var(--marge))) calc((50% + 4px) - (300px + var(--marge))) calc(400px + (var(--marge)*2)) calc(600px + (var(--marge)*2)) round 3em);*/
        clip-path: inset(calc(50% - (var(--revHmask) + var(--marge))) calc(50% - (var(--revWmask) + var(--marge))) calc(50% - (var(--revHmask) + var(--marge))) calc(50% - (var(--revWmask) + var(--marge))) round 2em);
        transition-property: clip-path; transition-duration: 1s;transition-timing-function:cubic-bezier(0.83, 0, 0.17, 1)}

.revolut>.bg_choice>.bgWrap .bg_img,
.revolut>.restart.animDone~.bg_choice>.bgWrap .bg_img{
        --marge2:2px;
        left: 50%; top:50%;
        transform: translate(-50%, -50%);
        width: calc(100vw - (var(--marge2)*2));
        height: calc(100vh - (var(--marge2)*2));
        transition-property: width, height; transition-duration: 1s;transition-timing-function:cubic-bezier(0.83, 0, 0.17, 1)}


.revolut>.bg_choice/*>.BgColorOverImg*/,
.revolut>.restart.animDone~.bg_choice{
        pointer-events: none;
        user-drag: none;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        --marge:2px;
         /*clip-path:xywh(calc((50% + 4px) - (200px + var(--marge))) calc((50% + 4px) - (300px + var(--marge))) calc(400px + (var(--marge)*2)) calc(600px + (var(--marge)*2)) round 3em);*/
         clip-path: inset(calc(50% - (var(--revHmask) + var(--marge))) calc(50% - (var(--revWmask) + var(--marge))) calc(50% - (var(--revHmask) + var(--marge))) calc(50% - (var(--revWmask) + var(--marge))) round 2em);
         transition-property: clip-path; transition-duration: 1s;transition-timing-function:cubic-bezier(0.83, 0, 0.17, 1)}
.revolut>.bg_choice>.BgColorOverImg{
         z-index: -1;
}
/********************************************************
 *
 *******************************************************/
.revolut>.end.animDone~.bgWrap>.bg_img{
   width: 110%; height: 110%;
}
.revolut>.end.animDone~.bg_choice>.bgWrap{
        --revWmask:min(16%, calc(var(--MaxSizeDefault) * 0.16));
        --revHmask:min(30%, 40vh);
        clip-path: inset(calc(50% - (var(--revHmask) + var(--marge))) calc(50% - (var(--revWmask) + var(--marge))) calc(50% - (var(--revHmask) + var(--marge))) calc(50% - (var(--revWmask) + var(--marge))) round 2em);
}

.revolut>.end.animDone ~ .bg_choice/*>.BgColorOverImg*/{
        clip-path: inset(0);
}
.revolut>.restart:not(.animDone) ~ .end.animDone ~ .bg_choice{
        pointer-events: auto;
        user-drag: auto;
        -webkit-user-drag: auto;
        user-select: auto;
        -moz-user-select: auto;
        -webkit-user-select: auto;
        -ms-user-select: auto;
}

.revolut>.end.animDone ~ .bg_choice>.bgWrap .bg_img{
        /*--marge2:max(285px, 15vh);*/
        width: calc(100vw - ((var(--revWmask) + var(--marge))*2));
        height: calc(100vh - (var(--revHmask) + var(--marge)));
        left: 50%; top:50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
         border-radius: 2em;
}

.revolut>.end.animDone ~ .bg_choice>.bloc3_bgcolor>.bloc3:first-of-type{ opacity:1;transform: translateX(0%); }
.revolut>.end.animDone ~ .bg_choice>.bloc3_bgcolor>.bloc3:last-of-type{ opacity:1;transform: translateX(0%); }

@media (max-width: 600px){
        .revolut{
                --revWmask:min(45%, 300px);
                --revHmask:min(35%, 400px);

        }
        .revolut>.end.animDone ~ .bg_choice>.bgWrap{
                --bottomInset: calc( (100% - 100vh) + 20vh);
                clip-path: inset(30px 30px var(--bottomInset) 30px round 2em);
        }
        .revolut>.end.animDone ~ .bg_choice>.bgWrap .bg_img{

               width: calc(100% - 60px);
               height: calc(100vh - 60px);

        }
        .revolut>.bg_choice{position: relative;

                padding-right: 30px;
                padding-left: 30px;
        }
        .revolut>.bg_choice>.bloc3_bgcolor{display: flex; flex-wrap: wrap; }
        .revolut>.bg_choice>.bloc3_bgcolor>.bloc3{
               flex-grow: 3; order:1;
        }

        .revolut>.end.animDone~.bg_choice>.bloc3_bgcolor>.bloc3:first-of-type{
                margin-top: 50px;
                border-radius: 0 !important;
        }
        .revolut>.end.animDone~.bg_choice>.bloc3_bgcolor>.bloc3:first-of-type::before,
        .revolut>.end.animDone~.bg_choice>.bloc3_bgcolor>.bloc3:last-of-type::before{
                content:"";display: block; position: absolute; top: -30px; left: -50%; width: 200%; height: calc(100% + 30px);
                background: currentColor; filter: invert(1);
        }
        .revolut>.bg_choice>.bloc3_bgcolor>.bloc3:first-of-type,
        .revolut>.bg_choice>.bloc3_bgcolor>.bloc3:last-of-type{
               order: 2;
               position: relative;
               margin-top: 30px;
               margin-bottom: 30px;
        }
        .revolut>.bg_choice>.bloc3_bgcolor>.bloc3:last-of-type{
               order: 3;
               margin-top: 0;margin-bottom: 0;
               border-top-left-radius: 0 !important;
               border-top-right-radius: 0 !important;
        }
        .revolut>.bg_choice>.BgColorOverImg::after{content: ""; position: absolute;bottom: 0; left: 0;width:100%; height:0; background: inherit; transition-property: height; transition-duration: 0.3s; transition-timing-function:cubic-bezier(0.83, 0, 0.17, 1)
        }
        .revolut>.end.animDone ~ .bg_choice>.BgColorOverImg::after{
                height: 50%;
        }


}