body { overflow-x: hidden; }

.arrow {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    margin-right: .6rem;
  }

.down {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg) translateY(-25%);
}

.arrow.down.active {
    transform: rotate(135deg) translateY(-40%) translate(-25%)
}

.index-hero-text {
    max-width: 32.5ch;
    line-height: 1.2!important;
}

.hero-img-1 {
    top: 4rem;
    left: 13rem;
}

.hero-img-2 {
    bottom: 2rem;
    right: 20rem;
}

.st-model-cont {
    background-image: url(../imgs/index/1-fixed.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.st-model-cont-2 {
    background-image: url(../imgs/index/2-fixed.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.st-model-cont-3 {
    background-image: url(../imgs/index/3-fixed.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.text-sticky {
    top: 0rem;
}

.marquee {
    font-size: 1.7rem;
}

.text-comparti {
    font-size: 2.5rem;
    margin-bottom: -.7rem;
}

.after-box::after {
    content: '';
    position: absolute;
    inset: 0;
    left: -3%;
    width: 106%;
    border: 2px solid var(--street-blue);
    border-radius: 999em;
    padding: .5rem 5rem;
    border-bottom: 0;
}

.marquee-pixel {
    font-size: 2.6rem;
    margin-bottom: -.5rem;
}

.agency {
    margin-top: -1rem;
    margin-bottom: -2rem;
}

.street-text-display {
    font-size: 12.5rem;
}




/* 
======
GRILLA
======
*/

/* .section-grilla {
    min-height: 151rem;
} */

.grilla-img {
    padding: 10rem 6rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0;
    transition: all .5s cubic-bezier(0.13, 0.77, 0.33, 1);
}

.street-transition-opacity {
    opacity: 0;
    transition: opacity .5s cubic-bezier(0.13, 0.77, 0.33, 1);
}



/* 
==============
ENDLESS ROTATE 
==============
*/
.rotate{
    animation: rotate 1.5s linear infinite; 
  }
@keyframes rotate{
to{ transform: rotate(360deg); }
}

@keyframes rotate2{
    50%, 100%{ transform: rotate(360deg); }
    }

@keyframes crescendo {
0%   {transform: scale(0);}
100% {transform: scale(1);}
}

.street-casting-rotate {
    animation: rotate2 4.2s ease-in-out infinite; 
}

.street-casting-rotate.delay {
    animation-delay: .66s;
}



/* 
===============
INDEX HERO IMGS 
===============
*/
.hero-img-1, .hero-img-2 {
    transition: transform 3s cubic-bezier(0.13, 0.77, 0.33, 1);
    transform: translateX(0%);
}

.hero-img-1.show { 
    transform: translateX(460%);
}

.hero-img-2.show {
    transform: translateX(-440%);
}



/* 
=======
MARQUEE
=======
*/
@keyframes marquee1 {
    0%{ transform: translateX(0%) }
    100% { transform: translateX(-100%) }
}

@keyframes marquee2 {
    0%{ transform: translateX(100%) }
    100% { transform: translateX(0%) }
}

.animate-marquee-nav {
    animation: marquee1 6s linear infinite;
}
.animate-marquee-nav2 {
    animation: marquee2 6s linear infinite;
}



a { color: rgb(26, 26, 26) }


/* 
============
CIRCLE ANIMS
============
*/
.cir1 {
    animation: fill 4s cubic-bezier(0.13, 0.77, 0.33, 1) forwards infinite;
    border: 2px solid white;
}

.cir2 {
    animation: alt 4s cubic-bezier(0.13, 0.77, 0.33, 1) forwards infinite;
}

.cir1alt {
    animation: fill2 4s cubic-bezier(0.13, 0.77, 0.33, 1) forwards infinite;
}

.cir2alt {
    animation: alt2 4s cubic-bezier(0.13, 0.77, 0.33, 1) forwards infinite;
}

@keyframes fill {
    0% {
        background-color: white;
    }

    50% {
        background-color: transparent;
    }

    100% {
        background-color: white;
    }
}

@keyframes fill2 {
    0% {
        background-color: #0702E5;
    }

    50% {
        background-color: transparent;
    }

    100% {
        background-color: #0702E5;
    }
}

@keyframes alt {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: white;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes alt2 {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: #0702E5;
    }

    100% {
        background-color: transparent;
    }
}



/* 
=========
CURSOR BN
=========
*/
.cursor-black {
    cursor: url(../imgs/nav/cursor.svg), default; 
}

.cursor-white {
    cursor: url(../imgs/nav/cursor-white.svg), default; 
}




/*
=========================
URBAN SCOUTING HORIZONTAL
=========================
*/
.text-calle-pasarela {
    top: 6rem;
    bottom: 6rem;
    height: fit-content;
    transition: transform .7s cubic-bezier(0.13, 0.77, 0.33, 1);
    transform: translateX(100%);
}

.street-display {
    font-size: 16rem;
}

#pasarela {
    transition: transform 1.5s cubic-bezier(0.13, 0.77, 0.33, 1);
    font-size: 7.4vw!important;
}

.escalar {
    transform: scale(1.25);
}



/* 
===============
INDEX ANIMATION
===============
*/

.logo-letra {
    transform: translateY(75%);
    transition:all .9s cubic-bezier(.23,1,.32,1);
    opacity: 0;
}

.translateY { transform: translateY(0%)!important; opacity: 1; }

.logo-letra:nth-of-type(2) { transition-delay: .04s; }
.logo-letra:nth-of-type(3) { transition-delay: .08s; }
.logo-letra:nth-of-type(4) { transition-delay: .12s; }
.logo-letra:nth-of-type(5) { transition-delay: .16s; }
.logo-letra:nth-of-type(6) { transition-delay: .20s; }
.logo-letra:nth-of-type(7) { transition-delay: .24s; }
.logo-letra:nth-of-type(8) { transition-delay: .28s; }

.section-cortina {
    transition:transform 1.5s cubic-bezier(.23,1,.32,1);    
}

.section-logo::before {
    content: '';
    position: absolute;
    background-size: cover;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../imgs/index/final.webp);    
}

.scroll-stroke {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    /* animation: scroll-stroke 1s ease-in-out forwards; */
}

@keyframes scroll-stroke {
    from {
        stroke-dasharray: 800;
        stroke-dashoffset: 800;
    }
    to {
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
    }
}

@keyframes float {

    0% {
      transform: translateY(0%);
    }

    50% {
      transform: translateY(-20%);
    }

    100% {
      transform: translateY(0%);
    }

}

.float-animation {
    animation: float 3s ease-in-out forwards infinite;
}


/* 
======
HOVER 
======
*/
.talento-container:hover {
    color: var(--street-purple);
    font-family: var(--ff-helvetica-i);
    font-style: italic;
    border-color: var(--street-purple);
}

.hover-italic:hover {
    font-family: var(--ff-helvetica-i);
    font-style: italic;
}



/* 
==============================
NEW JOIN US / TRANSITION DELAY  
==============================
*/
.transitionx-join-us { transition:transform 1.5s cubic-bezier(.23,1,.32,1); }

.transition-all-join-us { transition:all 1.5s cubic-bezier(.23,1,.32,1); }

.transition-delay-33 { transition-delay: .33s!important; }

.transition-delay-66 { transition-delay: .66s!important; }

.transition-delay-99 { transition-delay: .99s!important; }

.transition-delay-12 { transition-delay: 1.2s!important; }

.transition-delay-15 { transition-delay: 1.5s!important; }

.transition-delay-17 { transition-delay: 1.7s!important; }

.linea-corrida {
    transform: translateX(-100%);
    transition:transform 1.2s cubic-bezier(.23,1,.32,1);
}

.linea-delay { transition-delay: .77s!important; }

.prueba2-delay { transition-delay: .75s!important; }

.translate-x-0 { transform: translateX(0%)!important }

.translatex { transform: translateY(-100%); }

.translate-y-0 { transform: translateY(0%)!important; }

.opacity-100 { opacity: 1!important; }

.borderx { outline: 1px solid black; }

.splide-height { height: 68%; }

.contact-right { width: 45%; }

.salimos-a-la-calle-w { width: 55%; }

.salimos-a-la-calle-2-w { width: 45%; }

.agency-marquee-h { max-height: 40rem; }

@media (max-width: 800px) {
    
    :root { font-size: clamp(.2rem, .75vw + .4rem, .5rem); }
    /* :root { font-size: .5rem; } */

    .salimos-a-la-calle-w { width: 100%; }

    .salimos-a-la-calle-2-w {width: 90%; margin: 0 auto; }

    .st-model-cont-3 { height: 60rem; }

    .hero-img-1.show { transform: translateX(0%); }
    
    .hero-img-1 { left: 6rem; }

    .hero-img-2 { right: 6rem; }

    .hero-img-2.show { transform: translateX(-50vw); }

    .hero-img-1.show { transform: translateX(40vw); }

    .splide-height { height: 90%; }

    .svg-mundito-purple { padding: 1.5rem!important; }

    .street-display { font-size: 9rem; }

    .agency-marquee-h { max-height: 68rem; }
    
    .text-section { min-height: 200vh!important; }

    .section-logo::before { background-image: url(../imgs/index/final-mobile.webp); }

}

.agency-marquee::before, .agency-marquee::after {
    content: '';
    position: absolute;
    top: -.5rem;
    left: 0;
    width: 100%;
    height: 0.125rem;
    background-color: white;
}

.agency-marquee::after {
    content: '';
    position: absolute;
    bottom: -.5rem;
    top: unset;
    left: 0;
    width: 100%;
    height: 0.125rem;
    background-color: white;
}

.min-h-miox {
    min-height: 100vh!important;
}

select {
    background-image: url('..//imgs/asset-select.svg');
    background-size: 1em;
}

.skills-container {
    background-image: url('..//imgs/asset-select-rotate.svg');
    background-position-x: calc(100% - 0.5rem);
    background-size: .7em;

    padding-right: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
}

/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
 .la-ball-clip-rotate,
 .la-ball-clip-rotate > div {
     position: relative;
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
 }
 .la-ball-clip-rotate {
     display: block;
     font-size: 0;
     color: #4F46E5;
 }
 .la-ball-clip-rotate.la-dark {
     color: #333;
 }
 .la-ball-clip-rotate > div {
     display: inline-block;
     float: none;
     background-color: currentColor;
     border: 0 solid currentColor;
 }
 .la-ball-clip-rotate {
     width: 1.5rem;
     height: 1.5rem;
 }
 .la-ball-clip-rotate > div {
    width: 1.5rem;
    height: 1.5rem;
     background: transparent;
     border-width: 2px;
     border-bottom-color: transparent;
     border-radius: 100%;
     -webkit-animation: ball-clip-rotate .75s linear infinite;
        -moz-animation: ball-clip-rotate .75s linear infinite;
          -o-animation: ball-clip-rotate .75s linear infinite;
             animation: ball-clip-rotate .75s linear infinite;
 }
 .la-ball-clip-rotate.la-sm {
     width: 16px;
     height: 16px;
 }
 .la-ball-clip-rotate.la-sm > div {
     width: 16px;
     height: 16px;
     border-width: 1px;
 }
 .la-ball-clip-rotate.la-2x {
     width: 64px;
     height: 64px;
 }
 .la-ball-clip-rotate.la-2x > div {
     width: 64px;
     height: 64px;
     border-width: 4px;
 }
 .la-ball-clip-rotate.la-3x {
     width: 96px;
     height: 96px;
 }
 .la-ball-clip-rotate.la-3x > div {
     width: 96px;
     height: 96px;
     border-width: 6px;
 }
 /*
  * Animation
  */
 @-webkit-keyframes ball-clip-rotate {
     0% {
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
     }
     50% {
         -webkit-transform: rotate(180deg);
                 transform: rotate(180deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
                 transform: rotate(360deg);
     }
 }
 @-moz-keyframes ball-clip-rotate {
     0% {
         -moz-transform: rotate(0deg);
              transform: rotate(0deg);
     }
     50% {
         -moz-transform: rotate(180deg);
              transform: rotate(180deg);
     }
     100% {
         -moz-transform: rotate(360deg);
              transform: rotate(360deg);
     }
 }
 @-o-keyframes ball-clip-rotate {
     0% {
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
     }
     50% {
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
     }
     100% {
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
     }
 }
 @keyframes ball-clip-rotate {
     0% {
         -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
              -o-transform: rotate(0deg);
                 transform: rotate(0deg);
     }
     50% {
         -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
              -o-transform: rotate(180deg);
                 transform: rotate(180deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
              -o-transform: rotate(360deg);
                 transform: rotate(360deg);
     }
 }

.la-ball-clip-rotate > div, .la-ball-clip-rotate {
    width: 1rem;
    height: 1rem;
}