/* @media screen and (max-width: 900px)  { */
@media screen and (max-aspect-ratio: 225/221)  {
    #desktop-nav {
        display: none;
    }
    #hamburguer-nav {
        display: block;
    }

    /* WORK SECTION */

    .gallery {
        grid-template-columns: repeat(1, 1fr);
        gap: 0px;
        max-width: 100%;
        margin: 0;
    }
    .project-thumbnail {
        border-radius: 10px;
    }
    .project-title {
        font-size: 15px;
        margin-top: 1rem;
        margin-bottom: 0.3rem;
    }
    .project-about {
        font-size: 14px;
        margin-bottom: 1.7rem;
    }
    /* CONTACT FOOTER */

    /* SEPARATOR */

    .separator {
        width: 90%;
    }

    .contact-info {
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 1.5rem;
    }

    .contact-header {
        line-height: 2rem;
        font-size: 1.4rem;
    }

    /* SKATE TELEPHONE */

    .skate-telephone {
        display: none;
    }

    .skate-telephone-mobile{
        display: flex;
        position: relative;
        left: 24px;
        margin-top: 4.5rem;
        margin-bottom: 3rem;
    }

    #scrollAnimation-mobile {
        overflow: hidden;
        width: 42rem;
    }

    .footer-link {
        font-size: 1.5rem;
        line-height: 2.2rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .contact-icon {
        height: 24px;
    }

    .spacing {
        height: 18px;
        width: auto;
    }

/* ABOUT ME SECTION */

    .about-content {
        padding-right: unset;
        padding-left: unset;
    }

    .me-section {
        align-items: center;
        flex-direction: column;
    }

    .me-photo {
        width: 87%;
        /* MODIFICAR A GUSTO */
        padding: unset;
    }

    .about-text {
        max-width: unset;
        max-height: unset;
        padding: 1.7rem;  /* MODIFICAR A GUSTO */
        flex-direction: unset;
        display: unset;
        line-height: 1.6rem;
    }

    .arrow-about {
        width: 120px; /* MODIFICAR A GUSTO */
        height: auto; /* MODIFICAR A GUSTO */
        padding-bottom: 16px; /* MODIFICAR A GUSTO */
        transform: scaleX(-1) rotate(90deg) translate(-35px, -10px);
        width: 98px;
    }

    .exp-section {
        padding: unset;
    }

    .exp-section p {
        font-size: 25px;
        padding: 0 0 48px 0;
    }

    .agencies {
        flex-direction: column;
    }

    .agency-img {
        width: 218px;
    }

    .process-section p {
        font-size: 20px;
        padding: 50px 0 100px 0;
    }

    .creative-process {
        flex-direction: column;
        align-items: center;
    }

    .process-img {
        width: 87%;
        height: auto;
        padding: unset;
        padding-bottom: 30px;
    }

    /* CONTACT SECTION */

    .contact-tab {
        display: block;
        position: unset;
    }

    .mail-send {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: unset;
        padding-left: unset;
        padding-right: unset;
    }

    .contact-title {
        padding-left: 22px;
        padding-right: 64px;
        font-size: 1.6rem;
    }

    .contact-form {
        width: 88%;
        align-items: center;
    }

    .form-input {
        padding-top: 10px;
        padding-bottom: 11px;
    }

    .form-input input, textarea{
        width: 100%;
        box-sizing: border-box;
        padding-left: unset;
        padding: 13px 0 13px 13px; /* MODIFICAR A GUSTO */
        font-size: 1.4rem;
    }

    .form-input textarea {
        height: 205px;
    }

    .form-button {
        font-family: 'title-font';
        font-size: 1.35rem;
        font-weight: unset;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .skate-telephone-space {
        display: none;
        width: unset;
        height: 530px;
    }

    #animloop {
        width: unset;
        height: unset;
        top: unset;
        position: unset;
        padding: 50px 0 50px 0;
    }

/* WORK PAGE */

    .main-section {
        padding: unset;
        display: block;
        padding-top: 6rem;
    }

    .main-content {
        padding-top: 4.7rem;
    }

    .main-content.about {
        padding-top: 2.5rem;
    }

    .contact-tab {
        padding-top: 1.4rem;
    }

    .banner {
        width: 100%;
        height: unset;
    }

    .banner img {
        width: 100%;
    }

    .project-content {
        padding: unset;
        position: relative;
        overflow: unset;
    }

    .project-content h1 {
        font-size: 2.1rem;
        padding: 30px 22px 0 22px;
    }

    .project-content p {
        padding: 22px 22px 34px 22px;
        font-size: 13px;
    }
    
    .project-content img {
        width: 100% !important;
        height: auto !important;
        object-fit: unset;
        text-align: unset;
    }

    .yt-video-container iframe {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
    }

    .back-to-top {
        font-size: 22px;
        padding-top: 50px;
        padding-bottom: 37px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .rocket {
        width: 29px;
    }

/* MORE WORKS SLIDER */

    .more-works {
        padding-top: 56px;
    }

    .swiper {
        width: 100%;
        height: unset;
    }

    .card-wrapper {
        width: 250%;
        transform: translateX(-30%);
    }

    .card-list .card-item .card-link {
        height: unset;
    }

    .custom-prev {
        display: none;
    }

    .custom-next {
        display: none;
    }

    /* IMAGE SWAP FOR RESPONSIVE */

    .mobile-hide {
        display: none;
    }

    .mobile-only {
        display: block;
        padding-bottom: 20px;
    }

    .img-top-padding {
        padding-top: 20px;
    }

    /* NMP FIX */

    .NMP-insta-stories {
        flex-direction: column;
    }

    .NMP-insta-stories img {
        padding: 0 0 20px 0 !important;
    }

/* MOBILE NAVEGATION BAR */

    #mobile-nav {
        display: block;
    }

}

/* @media screen and (max-width: 406px)  { */
@media screen and (max-aspect-ratio: 9/18)  {

    .scrolling-content {
        padding: 1vh 2.1vh;
        font-size: 2.1vh;
    }

    .footer {
        padding-bottom: 1.3vh;
    }

    .tv-frame-off {
        width: 100%;
        display: none;
    }

    .mobile-tv-frame-off {
        display: block;
        position: absolute;
        z-index: 1;
        width: 100.3%;
        z-index: 2;
        pointer-events: none; /* passthrough clicks */
    }

    .channel-image {
        width: 254%;
        margin-top: -3vw;
        position: fixed;
    }

    .tv-display {
        margin-top: calc(22vh - 26vw);
    }

    .tv-buttons-container {
        width: unset;
        margin-top: 3vw;
    }

    .tv-button {
        aspect-ratio: 7 / 22;
        padding-inline: 23vw;
    }

}

/* @media (min-width: 407px) and (max-width: 900px) { */
@media (min-aspect-ratio: 9.01/18) and (max-aspect-ratio: 225/221) {

    .tv-frame-off {
        width: 100%;
    }

    .channel-image {
        width: 100%;
    }

    .tv-display {
        margin-top: calc(37vh - 26vw);
    }

    .tv-button {
        padding-inline: 6.9vw;
    }

    .tv-buttons-container {
        width: 47%;
        transform: translateY(2.5vw);
    }
}