:root {
    --c-black: rgb(13, 13, 13);
    --c-white: #f2f2f2;
    --c-yellow: #ffff00;

    --header_d-height: 3rem;
}

main {
    min-width: 100vw !important;
    max-width: 100vw !important;
    min-height: calc(var(--vh) * 100) !important;
    max-height: calc(var(--vh) * 100) !important;
    /* scroll-snap-type: y mandatory; */
}

.main-section {
    position: relative;
    /* top: 0; */
    /* scroll-snap-align: start; */
    min-width: 100vw !important;
    max-width: 100vw !important;
    min-height: calc(var(--vh) * 100) !important;
    max-height: calc(var(--vh) * 100) !important;
    /* -webkit-backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important; */
}

#s-landing {z-index: 0;}
#s-teaser {z-index: 5;}
#s-show {z-index: 10;}
#s-tone {z-index: 15;}
#s-bio {z-index: 20;}
#s-culture {z-index: 25;}
#s-virality {z-index: 30;}
#s-stats {z-index: 35;}
#s-future {z-index: 40;}

#s-teaser, #s-show, #s-tone, #s-bio, #s-culture, #s-virality, #s-stats, #s-future {
    transform: translate(0, calc(var(--vh) * 100));
}

/* .section-full {
    min-width: 100vw;
    max-width: 100vw;
    min-height: calc(var(--vh) * 100);
    max-height: calc(var(--vh) * 100);
} */


/*
COLORS
*/
.c-white {color: var(--c-white);}
.c-black {color: var(--c-black) !important;}
.c-yellow {color: var(--c-yellow);}

.bg-white {background: var(--c-white);}
.bg-black {background: var(--c-black);}
.bg-yellow {background: var(--c-yellow);}

.bg-gradient {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);}

.bg-gradient-black {background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 1) 100%);}
.bg-gradient-black-l {background: linear-gradient(90deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, .6) 100%);}
.bg-gradient-black-r {background: linear-gradient(-90deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 1) 60%);}


/* 
SIZES
*/
.pad-xs {padding: .5rem;}
.pad-s {padding: .75rem;}
.pad {padding: 1rem;}
.pad-h {
    padding-left: 1rem;
    padding-right: 1rem;
}
.pad-m {padding: 1.25rem;}
.pad-right {padding-right: 1rem;}
.pad-left_xs {padding-left: .3333rem;}
.pad-section {padding: calc(var(--header_d-height) + .5rem) 1rem 1.5rem;}
.pad-section-v {padding: calc(var(--header_d-height) + .5rem) 0 1.5rem;}
.pad-full_section {padding: calc(var(--header_d-height) + .25rem) 1rem calc(var(--header_d-height) + .5rem);}
.pad-full_section-v {padding: calc(var(--header_d-height) + .25rem) 0 calc(var(--header_d-height) + .5rem);}


.margin-top_xs {margin-top: .5rem;}
.margin-top_s {margin-top: .75rem;}
.margin-top {margin-top: 1rem;}
.margin-top_m {margin-top: 1.5rem;}
.margin-top_l {margin-top: 2rem;}

.margin-right_xs {margin-right: .3333rem;}
.margin-right_s {margin-right: .5rem;}
.margin-right {margin-right: 1rem;}
.margin-right_xxl {margin-right: 8rem;}
@media only screen and (min-width: 2048px) {
    .margin-right_xxl {margin-right: 32rem;}
}

.margin-bottom_xxs {margin-bottom: .2rem;}
.margin-bottom_xs {margin-bottom: .3333rem;}
.margin-bottom {margin-bottom: 1rem;}
.margin-bottom_m {margin-bottom: 1.25rem;}
.margin-bottom_l {margin-bottom: 2rem;}
.margin-bottom_xl {margin-bottom: 3rem;}

.margin-left_xs {margin-left: .3333rem;}
.margin-left {margin-left: 1rem;}
.margin-left_m {margin-left: 1.25rem;}

/* 
ELEMENTS
*/
.border-radius {border-radius: .5rem;}
.ratio-9_16 {aspect-ratio: 9/16;}
.ratio-16_9 {aspect-ratio: 16/9;}

.media-bg {opacity: .5;}

.img-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-fit {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 
DISPLAY
*/
.flex {display: flex !important;}
.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-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;}
.p-top {top: 0}
.p-right {right: 0}
.p-bottom {bottom: 0}
.p-left {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-m,
    .block-m_d {display: block;}

    .flex-m,
    .flex-m_d {display: flex;}

    .grid-m,
    .grid-m_d {display: grid;}
}

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

    .block-m,
    .block-t,
    .block-m_t {display: block;}

    .flex-m,
    .flex-t,
    .flex-m_t {display: flex;}

    .grid-m,
    .grid-t,
    .grid-m_t {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) {}