:root {
    /* --c-black: black; */
}

/* .gsap-marker-end,
.gsap-marker-start,
.gsap-marker-scroller-end,
.gsap-marker-scroller-start {opacity: 0;} */

/* 
LOADING
*/
main {
    transition: opacity 2000ms ease-in;
    transition-delay: 750ms;
}
#header-home {transition: transform 1000ms ease-in-out, left 1000ms ease-in-out;}
#header-navs {
    transition: transform 1000ms ease-in-out;
    transition-delay: 250ms;
}

body[data-load='false'] main {
    opacity: 0;
}
body[data-load='false'] #header-home {
    left: 50vw;
    transform: translateX(-50%);
}
body[data-load='false'] #header-navs {transform: translateX(calc(100% + 1rem));}


/* 
COLORS
*/
.bg-black {background: black;}

.c-white {color: rgba(255, 255, 255, .8) !important;}
.c-black {color: rgba(0, 0, 0, .8) !important;}

.t-alpha {opacity: .5;}
.m-alpha {opacity: .85;}

.light-section {
    background: rgba(180, 180, 180, .25);
    backdrop-filter: blur(1rem);
    -moz-backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.dark-section {
    background: rgba(10, 10, 10, .5);
    backdrop-filter: blur(1rem);
    -moz-backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.dark-section_xl {
    background: rgba(10, 10, 10, .9);
    backdrop-filter: blur(4rem);
    -moz-backdrop-filter: blur(4rem);
    -webkit-backdrop-filter: blur(4rem);
}


/* 
MEDIA
*/
.ratio-9_16 {aspect-ratio: 9/16;}
.ratio-2_3 {aspect-ratio: 2/3;}
.ratio-4_5 {aspect-ratio: 4/5;}
.ratio-1_1 {aspect-ratio: 1/1;}
.ratio-5_4 {aspect-ratio: 5/4;}
.ratio-3_2 {aspect-ratio: 3/2;}
.ratio-16_9 {aspect-ratio: 16/9;}

.media-cover,
.media-contain-d {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media only screen and (min-width: 1200px) {
    .media-contain-d {object-fit: contain;}
}

.media-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.no_wrap {white-space: nowrap;}


/* 
MEASURMENTS
*/
.pad {padding: 1rem;}
.pad-h {padding: 0 1rem;}
.pad-section {padding: 5px 8px;}

.mar-t {margin-top: 1rem;}
.mar-t_s {margin-top: .5rem;}
.mar-r_s {margin-right: .5rem;}
.mar-b {margin-bottom: 1rem;}

/* 
DISPLAY
*/
.block {display: block;}

.flex {display: flex;}
.f-wrap {flex-wrap: wrap;}
.f-nowrap {flex-wrap: nowrap;}
.f-column {flex-direction: column;}

.j-center {justify-content: center;}
.j-end {justify-content: end;}
.j-between {justify-content: space-between;}
.j-around {justify-content: space-around;}
.j-evenly {justify-content: space-evenly;}

.a-start {align-items: start;}
.a-center {align-items: center;}
.a-end {align-items: end;}


/* 
POSITION
*/
.p-fixed {position: fixed;}
.p-sticky {position: sticky;}
.p-relative {position: relative;}
.p-absolute {position: absolute;}

.p-all {top: 0; right: 0; bottom: 0; left: 0;}


/* 
STATUS
*/
.hide {display: none !important;}
.hide-m,
.hide-m_t,
.hide-m_d {display: none;}

.hide-scrollbar::-webkit-scrollbar {display: none;}
.hide-scrollbar {-ms-overflow-style: none; scrollbar-width: none;}

.v-hide {visibility: hidden;}
.stop {overflow: hidden;}

@media only screen and (min-width: 768px) {
    .hide-t,
    .hide-t_d {display: none;}

    .block-t,
    .block-t_d {display: block;}

    .flex-t,
    .flex-t_d {display: flex;}

    .grid-t,
    .grid-t_d {display: grid;}
}

@media only screen and (min-width: 1200px) {
    .hide-d,
    .hide-m_d {display: none !important;}

    .block-d {display: block;}
    .flex-d {display: flex;}
    .grid-d {display: grid;}
}

@media only screen and (min-width: 2048px) {
    .block-xd {display: block;}
    .flex-xd {display: flex;}
    .grid-xd {display: grid;}
}


@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 1200px) {}
@media only screen and (min-width: 2048px) {}
@media (hover: hover) {}