.filetbgGrowOnScroll{--FBGOS_maxWith:var(--MaxSizeMedium)}
.filetbgGrowOnScroll.bg_choice{position: relative;padding:0 !important;padding-top: 100vh !important; overflow: hidden}
.filetbgGrowOnScroll .p-start{pointer-events:none;height: 100vh}
.filetbgGrowOnScroll .vh50{pointer-events:none;height: calc(50vh);}
.filetbgGrowOnScroll .p-standBy{ height:30vh }
.filetbgGrowOnScroll .p-anim, .filetbgGrowOnScroll .p-end{pointer-events:none;height: 100vh;}


.filetbgGrowOnScroll .bg_choice{will-change: width, height, transform, opacity;
   padding:0;min-height: 0;
}
.filetbgGrowOnScroll .bg_choice>.bloc1{position: absolute; left: 0; width: 100%;
   will-change: left, opacity;
}
.filetbgGrowOnScroll .bg_choice>.bloc1>*{width: var(--FBGOS_maxWith) ; margin: auto; text-align: left !important}
.filetbgGrowOnScroll .bg_choice>.bloc1.alignTop{bottom:100%;}
.filetbgGrowOnScroll .bg_choice>.bloc1.alignBot{top:100%;}



/* etape debut */
.filetbgGrowOnScroll .p-start.animDone ~ .bg_choice{position: fixed !important;
   top:50%; left:50%; transform:translateY(-50%) translateX(-50vw) translateZ(0) height: 5px; width: 0;
   animation: FBGOS_filetCome 0.4s cubic-bezier(0.83, 0, 0.17, 1) infinite; animation-play-state: paused; animation-delay: calc(var(--filetCome) * -0.4s) ; animation-iteration-count: 1; animation-fill-mode: forwards;
}
.filetbgGrowOnScroll .p-start.animDone ~ .bg_choice>.bloc1{
   animation: FBGOS_txtComeReverse 0.4s cubic-bezier(0.83, 0, 0.17, 1) infinite; animation-play-state: paused; animation-delay: calc(var(--filetCome) * -0.4s) ; animation-iteration-count: 1; animation-fill-mode: forwards;}


/* etape standBy */
.filetbgGrowOnScroll .p-standBy.animDone ~ .bg_choice,
.filetbgGrowOnScroll .vh50.animDone ~ .bg_choice{position: fixed !important ;
   height:40vh ;width: var(--FBGOS_maxWith); top:50%; left:50%; transform: translateX(-50%) translateY(-50%) translateZ(0);
}

/* etape beforEnd */
.filetbgGrowOnScroll .p-beforeEnd.animDone ~ .bg_choice{position: fixed !important ;
   height:40vh ;width: var(--FBGOS_maxWith); top:50%; left:50%; transform: translateX(-50%) translateY(-50%) translateZ(0);
   animation: FBGOS_end2hide 0.4s cubic-bezier(0.83, 0, 0.17, 1) infinite; animation-play-state: paused; animation-delay: calc(var(--square2hide) * -0.4s) ; animation-iteration-count: 1; animation-fill-mode: forwards;
}



/* etape fin */
.filetbgGrowOnScroll .p-end.animDone ~ .bg_choice{opacity: 0}

@keyframes FBGOS_filetCome{
   0% { width: 0; height:5px;top:50%; left:50%; transform:translateY(-50%) translateX(-50vw) translateZ(0)}
   65% {width: 100%; height: 5px; transform:translateY(-50%) translateX(-50vw) translateZ(0);}
   65.1% {width: 100%; height: 5px; transform:translateY(-50%) translateX(-50%) translateZ(0);}
   100% {height:40vh ;width: var(--FBGOS_maxWith); top:50%; left:50%; transform: translateX(-50%) translateY(-50%) translateZ(0);}
}
@keyframes FBGOS_txtComeReverse{
   0% {left: 100vw; opacity: 0.2}
   65% {left: 0; opacity: 1}
}
@keyframes FBGOS_end2hide{
   0% {top:50%; left:50%; transform: translateX(-50%) translateY(-50%) translateZ(0); opacity: 1}
   100% { transform: translateX(-50%) translateY(-50vh) translateZ(0);opacity: 0}
}


@media screen and (max-width: 600px) {
.filetbgGrowOnScroll{--FBGOS_maxWith:90%}
}