@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sedgwick+Ave+Display&display=swap');
@font-face {
    font-family: "Bueno";
    src: url("Bueno-Regular.ttf");
    font-weight: 400;
}

:root {
    --main-font: "Bueno";
    --secondary-font: "Sedgwick Ave Display", cursive;
    --secondary-weight: 400;
    --secondary-style: normal;
}

*::before,
*::after,
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overscroll-behavior: none;
    scroll-behavior: smooth;
    font-family: 'Bueno';
}

html {
    font-size: 62.5%;
    overflow: hidden;
}
body {
    font-size: 1.6rem;
    font-weight: 400;
    font-family: "Bueno";
    line-height: 1.4;
}

.h {
    overflow: hidden;
}


.pre {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f5f5f5;
}
.pre > .ti {
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: clamp(10rem, 2.4vw, 4rem);
    text-transform: uppercase;
    /* color: white; */
}
.pre > .ti > * {
    padding: 0 1.5rem;
}

.pre > .ti > * > * {
    padding: 0 .5rem;
    /* letter-spacing: -.3rem; */
    mix-blend-mode: difference;
    color: black;
    pointer-events: all;
}
.li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    mix-blend-mode: difference;
    transform: translate3d(0,110%,0);
}
.sca {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: 998;
    display: none
}
.m {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.th {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    pointer-events: all;
    text-transform: uppercase;
    font-size: 7.5rem;
    letter-spacing: -.12rem;
    display: flex;
    line-height: 1;
}
.th > * > * {
    transform: translate3d(0,110%, 0);
}
.em {
    /* border: 2px solid red; */
    position: absolute;
    top: 90%;
    width: 10rem;
    height: 10rem;
    left: 50%;
    transform: translate(-50%,-50%);
}
.emm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.lo-n > * > * {
    font-size: 2.4rem;
    letter-spacing: -.8px;
}
.lo-n > * {
    line-height: .8;
    padding: 2px;
}

.lo-m > * > * {
    transform: translate3d(0,110%,0);
    text-transform: uppercase;
    cursor: pointer;
    background-color: black;
    color: white;
    padding: .5rem 1rem;
    border-radius: 3px;
    pointer-events: all;
}
.top-l {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}
.top-l > *{
    position: absolute;
    top: 1rem;
}
.en {
    right: 1rem;
    text-transform: uppercase;
    font-size: 1.3rem;
}
.soc {
    left: 1rem;
    display: flex;
    width: 4rem;
    pointer-events: all;
    /* gap: 1rem; */
    align-items: center;
}
.soc > * {
    width: 100px;
    height: 20px;
    display: grid;
    place-content: center;
}
.soc > * > * {
    max-width: 10px;
}
.soc > *:nth-child(1) > * {
    max-width: 16px;
}

.soc > *:nth-child(2) > * {
    max-width: 20px;
}

.soc > *:nth-child(3) > * {
    max-width: 15px;
}

.op {
    opacity: 0;
    z-index: 100;
}
.tr {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: black;
    opacity: 0;
    z-index: 99;
    pointer-events: none;
}
.sth {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-30%);
    line-height: .7;
    pointer-events: all;
}
.dsth {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.dsth > h2 {
    font-style: italic;
    font-size: 8rem;
}
.dsth > h1 {
    text-transform: uppercase;
    font-family: var(--secondary-font);
    transform: translate3d(0,110%,0);
}
.dsthl {
    position: absolute;
    left: 0%;
    transform: translate3d(-100%,0,0);
    bottom: 0;
    width: 50%;
    height: .2rem;
    background-color: black;
    
}
.dsth.dh {
    line-height: 1;
}
.ds2 {
    text-transform: uppercase;
    padding-right: 1rem;
}
.ds22 {
    padding-right: 1rem;
}
.dh1 {
    justify-content: end;
}
.dh2 {
    width: 100%;
}
.dh2 {
    text-align: center;
}
.dsi {
    width: 70px;
}
.dsi > img {
    width: 100%;
    transform: skew(-10deg);
    pointer-events: all;
}
.lin {
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    gap: .3rem;
}
.lin > * > * {
    /* text-decoration: none; */
    /* text-transform: uppercase; */
    color: black;
    font-size: 1.15rem;
    text-transform: uppercase;
    /* font-weight: 900; */
    pointer-events: all;
}
.u {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0,110%,0);
    z-index: 100;
    background-color: #f5f5f5;
}
.bg {
    background: black;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.mh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
    /* background-color: black; */
}
.mf {
    padding-top: 8rem;
    text-align: center;
}
.mf > * > * {
    transform: translate3d(0,110%,0);
}
.mfa  > *{
    display: inline-block;
}
.mfb > * {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .1px;
    font-size: 5rem;
}
.ms {
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}
.ms > * {
    line-height: .8;
    padding: .15rem 0;
}
.ms > * > * {
    transform: translate3d(0,150%,0);
    white-space: nowrap;
    color: brown;
}
.dimg {
    width: 30px;
    height: 30px;
}
.dimg > img {
    width: 100%;
}
.mth {
    padding-top: 4rem;
}
.mthimg {
    width: 100%;
    height: 100%;
}
.mthimg > * {
    width: 100%;
    object-fit: cover;
    height: 100%;
    /* transition: opacity 650ms ease; */
    opacity: 0;
}
.mtf {
    padding-top: 10rem;
    /* border: 2px solid; */
    text-align: center;
    letter-spacing: -.5px;
    position: relative;
}
.mtfs {
    padding: 2rem 0;
    overflow: hidden;
    position: relative;
    /* border: 2px solid; */
    max-width: fit-content;
    margin: auto;
}
.mtfsl {
    position: absolute;
    bottom: 0;
    height: 3px;
    background-color: black;
    width: 100%;
    left: 0;
    border-radius: 10px;
    transform: translate3d(-100%,-15px,0);
    display: inline-block;
}
.mtfs > * {
    text-transform: uppercase;
    font-size: 5rem;
    line-height: .8;
}
.mtfs > *:first-child {
    font-weight: 900;
}

.mtfs > *:nth-child(2) {
    font-weight: 900;
    transform: skew(-20deg);
}
.mtfth {
    padding-top: 5rem;
    height: 100vw;
}
.mtfth > * {
    height: 100%;
}
.mtfthi {
    position: relative;
}
.mtfthimg {
    width: 30vw;
    aspect-ratio: 1;
    position: absolute;
}
.mtfthimg > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
}

.mtfthimg:nth-child(1) {
    left: 5%;
    transform: translate3d(-500%,-150%,0) rotate(-25deg);    
}
.mtfthimg:nth-child(2) {
    left: 5%;
    top: 50%;
    transform: translate3d(-500%,150%,0) rotate(-25deg);    
}
.mtfthimg:nth-child(3) {
    right: 5%;
    transform: translate3d(500%,-150%,0) rotate(25deg);    
}
.mtfthimg:nth-child(4) {
    right: 5%;
    top: 50%;
    transform: translate3d(500%,150%,0) rotate(25deg);    
}
.mtffo {
    padding-top: 5rem;
    height: 50vw;
    will-change: transform;
}
.mtfquote1 {
    position: absolute;
    left: 1rem;
    /* border: 1px solid; */
    /* line-height: .2; */
    text-transform: uppercase;
    text-align: start;
    font-size: 3.6rem;
}
.mtfquote1 > *  {
    padding: .65rem .05rem;
    line-height: .6;
    color: brown;
}
.mtfquote1 > *:nth-child(2) {
    transform: skew(-20deg);
}

/* .mtfquote1 > *:last-child {
    position: absolute;
    right: 30%;
    font-size: 1.8rem;
} */

.mtfquote2 {
    position: absolute;
    right: 1rem;
    top: 50%;
    /* border: 1px solid; */
    /* line-height: .2; */
    text-transform: uppercase;
    text-align: end;
    font-size: 2.6rem;
}
.mtfquote2 > *:nth-child(3) {
    transform: skew(-20deg);
}
.mtfquote2 > *{
    /* border: 1px solid; */
    padding: .5rem .05rem;
    line-height: .6;
    color: brown;
}
/* .mtfquote2 > *:last-child {
    position: absolute;
    left: 50%;
    font-size: 1.8rem;
} */

.quo > * > * {
    transform: translate3d(0,200%,0);
    letter-spacing: -.9px;
    will-change: transform;
}
.mtfline {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: black;
}



.mtfyear {
    opacity: 0;
    position: absolute;
    bottom: 0;
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -.9px;
    left: 10%;
    transform: translateX(-10%);
    will-change: opacity;
}
.mtfyear > * > * > span {
    display: inline-block;
    transform: skew(-10deg);
    font-weight: 100;
}
.mtffiv {
    padding-top: 5rem;
    position: relative;
    height: 730px;
}
.mtffivline {
    height: 1px;
    /* height: 200px; */
    width: 100%;
    max-width: 0%;
    left: 50%;
    transform: translate3d(-50%,0,0);
    /* max-width: 95%; */
    margin: auto;
    /* border-top: 1px solid; */
    /* border-left: 1px solid; */
    /* border-right: 1px solid; */
    border-bottom: transparent;
    position: absolute;
    /* border: 1px solid; */
}
.trr {
    position: absolute;
    top: 95%;
    left: 0;
    width: 100%;
    opacity: 0;
    height: 1px;
    background-color: black;
    pointer-events: none;
    z-index: 99;
}
.mtffivf {
    position: absolute;
    transform: translate3d(0%,100%,0);
    display: flex;
    width: 100%;
    max-width: calc(100% - 50px);
    justify-content: center;
    line-height: 1;
    font-size: 3rem;
    opacity: .5;
}
.mtffivf > h3 {
    font-family: "Sedgwick Ave Display", cursive;
    align-content: center;
    padding-top: 1.5rem;
    transform: translateX(55%);
    /* border: 1px solid; */
}
.mtffivf > ._ > * {
    font-family: "Sedgwick Ave Display", cursive;;
}
.mtffiv> svg{
    position: absolute;
    top: 5rem;
    height: 300px;
    width: 100%;
    max-width: calc(100% - 25px);
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}
.mtffivtext {
    transform: translate3d(0,200px,0);
    margin: auto;
    max-width: calc(100% - 25px);
    text-align: center;
    line-height: .95;
    font-size: 3rem;
    padding-top: 7rem;
}
.mtffivtext > *,
.mtffivtext > * > *
 {
    display: inline-block;
}
.mtffivtext > * {
    opacity: 0;
    transition: opacity 600ms ease-in;
}
.mtffivtext > *:nth-child(2) {
    color: brown;
    padding: 3rem;
}
.mtffivtext > *:first-child,
.mtffivtext > *:last-child {
    max-width: 600px;
    text-transform: uppercase;
    font-size: 1.4rem;
    /* font-weight: 100; */
    /* font-weight: 600; */
}
.mtffivtext > *:first-child > *,
.mtffivtext > *:last-child > * {
    font-weight: 500;
    /* letter-spacing: -1px; */
}
.mtffivtext > *:first-child {
    text-align: start;
}
.mtffivtext > *:last-child {
    text-align: end;
}
.mtffivtext > *:nth-child(2) > *{
    transform: skew(-20deg);
}
#path {
    transform: translate3d(-75px, -50px, 0);
    stroke-dashoffset: 408;
    stroke-dasharray: 408;
}
.mtfsix {
    /* border: 1px solid black; */
    padding-top: 2rem;
    position: absolute;
    width: 100%;
    height: 145vw;
}
.mtfsixi { 
    width: 100%;
    max-width: calc(100% - 25px);
    margin: auto;
    height: 100%;
}
.simg { 
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    aspect-ratio: 1;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    width: calc(100% - 25px);
    transition: opacity 650ms ease;

}
.simg > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 2.5px 0;
}
.simg:nth-child(1) {
    z-index: 3;
}
.simg:nth-child(2) {
    z-index: 2;
}
.simg:nth-child(3) {
    z-index: 1;
}
.mtfsvg {
    height: 320px;
    transform: translateY(-100%);
}
.mtfsvg > * {
    position: absolute;
    left: 50%;
    height: 100%;
    transform: translate3d(-50%,0,0);
}
.mtfsvg > * > * {
    stroke-dashoffset:798.1852416992188;
    stroke-dasharray: 798.1852416992188;
}
.mtfseven {
    position: relative;
    top: 145vw;
}
.sevo {
    padding: 2.4rem;
}
.sevt {
    line-height: .9;
}
.sevt > * {
    text-transform: uppercase;
    font-size: 6rem;
}
.sevt > *:nth-child(2) {
    transform: skew(-20deg);
}
.sevt > *:last-child {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 45%;
    top: 23.5rem;
}
.sevt > *:last-child > * {
    clip-path: inset(0% 0% 0% 100%);
    transition: clip-path 350ms ease;
}
.sevt > * > span {
    font-family: "Sedgwick Ave Display", cursive;
}
.mtfsevt {
    padding-top: 2.5rem;
    max-width: calc(100% - 25px);
    margin: auto;
    font-size: 2.75vw;
    padding-top: 20vw;
    /* font-weight: 100; */
}
.mtfsevt > h1{
    line-height: .85;
    text-align: center;
    text-transform: uppercase;
}
.mtfsevt > * > span {
    color: #bf0000;
}
.mtfsevtt {
    font-size: 2.75vw;
    padding-top: 2rem;
}
.mtfsevtt > * {
    line-height: .85;
    text-transform: uppercase;
    margin: auto;
    max-width: calc(100% - 25px);
}
.mtfsevth {
    /* border: 2px solid; */
    padding-top: 8rem;
    height: 450px;
    position: relative;
    transform: translate3d(0,6rem,0);
}

#mtfsevthh {
    font-size: 7vw;
    line-height: .8;
    text-transform: uppercase;
    font-weight: 900;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    /* z-index:99; */
    background-color: #f5f5f5;
    padding: 1rem 1.5rem;
    opacity: 0;
}

.mtfsevth > *:last-child{
    z-index: -1;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
}
.mtfsevth > *:last-child > * {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}
.point_o {
    position: absolute;
    max-width: 45%;
    line-height: .9;
    font-size: 4vw;
    text-transform: uppercase;
    font-weight: 100;
    opacity: 0;
}
.point_o > * > .d {
    color: red;
    font-size: 4.5vw;
    font-weight: 900;
    letter-spacing: .02rem;
    margin: 0 .09rem;
}
.point_o.a {
    left: 5%;
    top: 25%;
    transform: translate3d(-5%,-25%,0);
}
.point_o.b {
    right: 2%;
    top: 25%;
    transform: translate3d(-2%,-25%,0);
}
.point_o.c {
    top: 80%;
    left: 5%;
    transform: translate3d(-5%,-80%,0);
}
.point_o.d {
    top: 80%;
    right: 2%;
    transform: translate3d(-2%,-80%,0);
}
.mtfeig {
    padding-top: 180vw;
}
.eiht {
    padding-top: 2rem;
    text-transform: uppercase;
    line-height: .8;
}
.eiht > *:first-child {
    font-size: 8rem;
    transform: skew(-10deg);
}
.eiht > *:last-child {
    font-size: 7rem;
    height: 7.5rem;
    transform: translate3d(0,0,0);
}
.eiht > *:last-child > path {
    stroke: black;
    stroke-width: 2;
    stroke-dasharray: 1180;
    stroke-dashoffset: 1180;
    /* stroke-dashoffset: 0; */

    fill: none;
}
.eihth {
    padding: 15rem 0;
    position: relative;
}
.eit {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 200px;
    aspect-ratio: 1;
}
.eit:first-child {
    transform: translate3d(-130%,-100%,0) scale(.2);
    /* transform: translate3d(-50%,-50%,0) scale(1); */
     z-index: 2;
    clip-path: inset(10% 10%);  
}
.eit:last-child {
    transform: translate3d(60%,-110%,0) scale(.2); 
    /* transform: translate3d(-50%,50%,0) scale(1); */
    width: 150px;
    clip-path: inset(7% 0%);
    z-index: 1;
}
.eit > * {
    width: 100%;
}
.mtfso {
    opacity: 0;
    transition: opacity 1s ease;
}
.sty {
    padding-top: 20rem;
    color: grey;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 5vw;
}
.styh {
    text-align: center;
    font-size: 10vw;
}
.styo,.styt {
    padding-top: 2rem;
}
.styt > .styhh{
    text-align: end;
}
.styhh {
    padding: 1rem;
    font-size: 7vw;
    line-height: .9;
    border: 1px solid;
    border-radius: 30px;
    max-width: calc(100% - 2rem);
    margin: auto;
    text-align: start;
}
.sh {
    font-size: 10vw;
}
.styth {
    padding-top: 4rem;
}
.styth > *:first-child {
    color:#bf0000;
}
.styth > *:last-child {
    border: none;
    font-size: 5.5vw;
    color: black;
}
.styhhh {
    line-height: .9;
    font-size: 10vw;
    max-width: calc(100% - 2.5rem);
    margin: auto;
}
.steend {
    padding-top: 5rem;
    font-weight: 100;
    text-transform: none;
    max-width: calc(100% - 1rem);
    line-height: .9;
    font-size: 3.5vw;
}
#q {
    color: #bf0000;
    transform: skew(-10deg);
    display: inline-block;
    padding: 1rem;
}
/* @keyframes pa {
    from {
        stroke-dashoffset: 1180;
    } 
     to {
        stroke-dashoffset: 0;
    }
} */

.edd {
    position: absolute;
    top: 100%;
    /* border: 1px solid red; */
    width: 100%;
    height: .5px;
    /* background-color: red; */
}
.tpp {
    position: absolute;
    top: 100%;
    width: 100%;
    height: .5px;
    /* background-color: red; */
}
.con > *{
    opacity: 0;
}
@media (min-width: 300px) {
    .mtffo {
        height: 65vw;
    }
}
@media (min-width: 414px) {
    .mtffo {
        height: 70vw;
    }
}

@media (min-width: 768px) {

}