:root
{
    --container-width: 1125px;
    --tablet-max-width: 1150px;
    --mobile-max-width: 750px;
}

@media screen and (max-width: 1150px) {
    :root
    {
        --container-width: 100vw;
    }
}

@font-face {
    font-family: "SfProDisplay";
    src: url("../assets/fonts/SFPRODISPLAYREGULAR.ttf") format("truetype"), url("../assets/fonts/SFPRODISPLAYREGULAR.OTF") format("opentype");
}
@font-face {
    font-family: "SfProDisplay";
    font-weight: bold;
    src: url("../assets/fonts/SFPRODISPLAYBOLD.ttf") format("truetype"), url("../assets/fonts/SFPRODISPLAYBOLD.OTF") format("opentype");
}
@font-face {
    font-family: "SfProDisplay";
    font-weight: 300;
    src: url("../assets/fonts/SFPRODISPLAYMEDIUM.ttf") format("truetype"), url("../assets/fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype");
}

body {
    margin: 0;
    overflow-x: hidden;
    position: relative;
    font-family: "SfProDisplay";
    /* background-color: dimgrey; */
}

/* body::-webkit-scrollbar {
    display: none;
} */

.giant-size {
    font-size: 120px;
}
.title-size,
.title {
    font-size: 80px;
    line-height: 73px;
}
.subtitle-size,
.text-big {
    font-size: 56px;
}
.heading-size,
.text-normal {
    font-size: 32px;
    line-height: 100%;
}
.caption-size,
.text-small {
    font-size: 17px;
}

.container {
    width: var(--container-width);
    height: 100lvh;
    position: fixed;
    left: calc(50vw - var(--container-width) / 2);
    top: 0;
    padding-top: 55px;
}

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

.opacity-0 {
    opacity: 0;
}
.opacity-1 {
    opacity: 1;
}
.invisible {
    opacity: 0.000001;
    cursor: default;
}

.center-horizontal, .center {
    left: 50%;
    transform: translateX(-50%);
}
.center-vertical, .center {
    top: 50%;
    transform: translateY(-50%);
}
.center {
    transform: translate(-50%, -50%);
}

.center-text, .text-center {
    text-align: center;
}

.flex-center {
    align-items: center;
    justify-content: center;
}
.align-items-center {
    align-items: center;
}
.justify-content-center {
    justify-content: center;
}

.m-auto, .mh-auto, .ml-auto {
    margin-left: auto;
}
.m-auto, .mh-auto, .mr-auto {
    margin-right: auto;
}
.m-auto, .mv-auto, .mt-auto {
    margin-top: auto;
}
.m-auto, .mv-auto, .mb-auto {
    margin-bottom: auto;
}

.img-cover, .img-contain {
    display: block;
    width: 100vw;
    height: 100lvh;
}
.img-cover {
    object-fit: cover;
}
.img-contain {
    object-fit: contain;
}
.img-fill {
    display: block;
    min-width: 100vw;
    height: 100lvh;
    object-fit: fill;
}

.cursor-pointer {
    cursor: pointer;
}
.cursor-default {
    cursor: default;
}

.bold {
    font-weight: bold;
}
.light {
    font-weight: 300;
}

.site-container {
    width: 100vw;
    height: 100lvh;
    z-index: -10;
}

.level-1 {
    z-index: 1;
}
.level-2 {
    z-index: 2;
}
.level-3 {
    z-index: 3;
}
.level-4 {
    z-index: 4;
}
.level-5 {
    z-index: 5;
}
.level-6 {
    z-index: 6;
}
.level-7 {
    z-index: 7;
}
.level-8 {
    z-index: 8;
}
.level-9 {
    z-index: 9;
}
.level-10 {
    z-index: 10;
}
.level-11 {
    z-index: 11;
}
.level-12 {
    z-index: 12;
}

p, div {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    width: fit-content;
    /* color: white; */
}

.w-100 {
    width: 100%;
}
.h-100 {
    height: 100%;
}
.w-100v {
    width: 100vw;
}
.h-100v {
    height: 100lvh;
}

.wh-100 {
    width: 100vw;
    height: 100lvh;
}

.position-fixed {
    position: fixed;
}
.position-absolute {
    position: absolute;
}
.position-relative {
    position: relative;
}

@media screen and (min-width: 1150px)
{
    .tablet:not(.desktop), .mobile:not(.desktop)
    {
        visibility: hidden;
        display: none !important;
    }
    .desktop
    {
        visibility: visible;
    }
}

@media screen and (max-width: 1150px) and (min-width: 750px)
{
    .desktop:not(.tablet), .mobile:not(.tablet)
    {
        visibility: hidden;
        display: none !important;
    }
    .tablet
    {
        visibility: visible;
    }
}

/* Mobile */
@media screen and (max-width: 750px)
{
    .desktop:not(.mobile), .tablet:not(.mobile)
    {
        visibility: hidden;
        display: none !important;
    }
    .mobile
    {
        visibility: visible;
    }
}

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

.visibility-hidden {
    visibility: hidden;
}
.visibility-visible {
    visibility: visible;
}