/*---------------------------------------------------------------------------
Positioning Helpers FRAMEWORK 2024-06-18
---------------------------------------------------------------------------*/

/* Floats
-----------------------------------------------*/
/* Clearfix */
.clearfix:after {  content: " "; display: block;  height: 0;  clear: both; }

/* Positioning
-----------------------------------------------*/
/* Relative */
.relative, .relative-child > :first-child { position: relative; }
/* Absolute Overlay overlay relative parent. Forcess Full Height */
.box-over { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; }
/* Set to Sticky */
:root {
    --sticky_child-top-distance: 4rem; 
}
.sticky_child { height: 100%; display: flex; flex-flow: row wrap; }
.sticky_child > * { width: 100%; top: var(--sticky_child-top-distance); position: sticky; align-self: flex-start; }
.stickychild_child > * { height: 100%; display: flex; flex-flow: row wrap; }
.stickychild_child > * > * { width: 100%; top: var(--sticky_child-top-distance); position: sticky; align-self: flex-start; }

/* Z-Index
-----------------------------------------------*/
.z-0   { position:relative; z-index: -0; }
.z-1   { position:relative; z-index: -1; }
.z-2   { position:relative; z-index: -2; }
.z-3   { position:relative; z-index: -3; }
.z-4   { position:relative; z-index: -4; }
.z-5   { position:relative; z-index: -5; }
.z-6   { position:relative; z-index: -6; }
.z-7   { position:relative; z-index: -7; }
.z-8   { position:relative; z-index: -8; }
.z-9   { position:relative; z-index: -9; }
.z-10  { position:relative; z-index: -10; }
.z0    { position:relative; z-index: 0; }
.z1    { position:relative; z-index: 1; }
.z2    { position:relative; z-index: 2; }
.z3    { position:relative; z-index: 3; }
.z4    { position:relative; z-index: 4; }
.z5    { position:relative; z-index: 5; }
.z6    { position:relative; z-index: 6; }
.z7    { position:relative; z-index: 7; }
.z8    { position:relative; z-index: 8; }
.z9    { position:relative; z-index: 9; }
.z10   { position:relative; z-index: 10; }
.z15   { position:relative; z-index: 15; }
.z20   { position:relative; z-index: 20; }
.z25   { position:relative; z-index: 25; }
.z30   { position:relative; z-index: 30; }
.z35   { position:relative; z-index: 35; }
.z40   { position:relative; z-index: 40; }
.z45   { position:relative; z-index: 45; }
.z50   { position:relative; z-index: 50; }
.z55   { position:relative; z-index: 55; }
.z60   { position:relative; z-index: 60; }
.z65   { position:relative; z-index: 65; }
.z70   { position:relative; z-index: 70; }
.z75   { position:relative; z-index: 75; }
.z80   { position:relative; z-index: 80; }
.z85   { position:relative; z-index: 85; }
.z90   { position:relative; z-index: 90; }
.z95   { position:relative; z-index: 95; }
.z100   { position:relative; z-index: 100; }
.z150   { position:relative; z-index: 150; }
.z200   { position:relative; z-index: 200; }
.z250   { position:relative; z-index: 250; }
.z300   { position:relative; z-index: 300; }
.z350   { position:relative; z-index: 350; }

/* Flex Centering
-----------------------------------------------*/
.flex-center-vertically, .flex-vert, .flex-vert-child > :first-child { display: flex; justify-content: center; flex-direction: column; height: 100%; }
.flex-hor, .flex-hor-child > :first-child { display: flex; justify-content: center;  }