/* generic styles */
:root {
    --ff-basic: 'Basic';
    --green-new: #0F1C0A;
    --green-oliva: #B0BC9D;
    --white-ub: #F6F7EF;
}

#navbar_primary {
    visibility: visible;
}

html body #navbar_secondary {
    visibility: visible !important;
}

html {
    scroll-behavior: smooth;
}

html body {
    background-color: var(--white-ub);
}

.txt-white-ub {
    color: var(--white-ub);
}

.text-green-new {
    color: var(--green-new);
}

.text-gris-green {
    color: rgba(15, 28, 10, 0.60) !important;
}

.generic-text a:visited,
a.text-green-new:visited {
    color: var(--green-new);
}

.generic-text a {
    text-decoration: underline;
}

/* generic styles */

#section-mesa-harpo,
.bg-grid-items-images-dinamic-1,
#section-banco-bancal,
.bg-grid-items-images-dinamic-3,
#section-pergola-persol,
.bg-grid-items-images-dinamic-5,
.content-cita-footer {
    background-color: var(--blanc-beige);
}

.letter-words {
    display: block;
    height: 100%;
    padding-bottom: 30px;
    animation: spin_words 6s infinite;
}

@keyframes spin_words {
    10% {
        transform: translateY(-112%);
    }

    25% {
        transform: translateY(-100%);
    }

    35% {
        transform: translateY(-212%);
    }

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

    60% {
        transform: translateY(-312%);
    }

    75% {
        transform: translateY(-300%);
    }

    85% {
        transform: translateY(-412%);
    }

    100% {
        transform: translateY(-400%);
    }
}

@media (min-width: 992px) {
    .margin-top-banner {
        margin-top: 12.56rem;
    }

    .margin-bottom-text-banner {
        margin-bottom: 4.69rem;
    }

    .margin-bottom-banner {
        margin-bottom: 6.19rem;
    }

    .margin-y-1-69 {
        margin-top: 1.69rem;
        margin-bottom: 1.69rem;
    }

    .padding-top-generic {
        padding-top: 6rem;
    }

    .padding-bottom-generic {
        padding-bottom: 6rem;
    }

    .padding-top-section {
        padding-top: 4.5rem;
    }

    .padding-botton-to-grid-images {
        padding-bottom: 10.5rem;
    }

    .title-page {
        font-size: 4.15rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.2575rem;
    }

    .title-video-section {
        font-size: 4.5rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.225rem;
    }

    .title-grid-images,
    .title-grid-images>* {
        font-size: 3.25rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.13rem;
    }

    .text-footer-mini-video {
        font-size: 0.8125rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .generic-text,
    .generic-text>* {
        font-size: 0.8125rem;
        font-style: normal;
        line-height: normal;
    }

    .generic-text p:last-of-type {
        margin-bottom: 0px !important;
    }

    .grid-mini-videos-banner {
        margin-top: 6.19rem;
    }

    .mini-video-section {
        width: 12.875rem;
        height: 9.6875rem;
    }

    .video-section-reproduced {
        min-height: 32rem;
        height: 100%;
        width: 100%;
        /* object-fit: cover; */
    }

    .content-mini-image-horizont-lineal {
        width: 18.6875rem;
        height: 14.9375rem;
        aspect-ratio: 299/239;
    }

    .content-mini-image-dinamic-position {
        width: 19.9375rem;
        height: 14.9375rem;
    }

    .margin-buttom-mini-image {
        margin-bottom: 15rem;
    }

    .margin-buttom-mini-title {
        margin-bottom: 10rem;
    }

    .grid-seccion-inverter-via-code .left-image-more-text {
        order: 3;
    }

    .grid-seccion-inverter-via-code .center-title-more-image {
        order: 2;
    }

    .grid-seccion-inverter-via-code .right-image-more-image {
        order: 1;
    }

    .content-grid-items-images .center-title-more-image {
        padding-top: 11.5rem;
    }

    .content-grid-items-images .left-image-more-text {
        padding-top: 5.75rem;
    }

    .content-cita-footer {
        padding-top: 2.81rem;
        padding-bottom: 2.81rem;
    }

    .words {
        margin-bottom: 0px;
        height: 93px;
        overflow: hidden;
        text-align: end;
    }

    .right-image-more-image .content-top-image {
        margin-bottom: 73px;
    }
}

@media (min-width: 1920px) {
    .margin-top-banner {
        margin-top: 12.56rem;
    }

    .margin-bottom-text-banner {
        margin-bottom: 6.25rem;
    }

    .padding-top-generic {
        padding-top: 8rem;
    }

    .padding-bottom-generic {
        padding-bottom: 8rem;
    }

    .title-page {
        font-size: 6.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.34375rem;
    }

    .generic-text,
    .generic-text>* {
        font-size: 1.125rem;
        font-style: normal;
        line-height: normal;
        letter-spacing: -0.01125rem;
    }

    .mini-video-section {
        width: 17.8125rem;
        height: 13.375rem;
    }

    .title-video-section {
        font-size: 6rem;
        font-style: normal;
        line-height: 100%;
        letter-spacing: -0.3rem;
    }

    .content-mini-image-dinamic-position {
        width: 27.4375rem;
        height: 20.625rem;
    }

    .content-mini-image-horizont-lineal {
        width: 27.4375rem;
        height: 20.625rem;
    }

    .title-grid-images,
    .title-grid-images>* {
        font-size: 4.3125rem;
        font-style: normal;
        line-height: 97%;
        letter-spacing: -0.1725rem;
    }

    .text-footer-mini-video {
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.01125rem;
    }

    .content-cita-footer {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

    .video-section-reproduced {
        min-height: 42.125rem;
        height: 100%;
    }

    .words {
        margin-bottom: 0px;
        height: 130px;
        overflow: hidden;
        text-align: end;
    }
}

@media (max-width: 991px) {

    html body #navbar_secondary,
    html body #navbar_mobile {
        visibility: visible !important;
    }

    .margin-top-banner {
        margin-top: 3.75rem;
    }

    .padding-top-generic {
        padding-top: 5rem;
    }

    .padding-bottom-generic {
        padding-bottom: 5rem;
    }

    .title-page {
        font-size: 2.1875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.10938rem;
    }

    .generic-text,
    .generic-text>* {
        font-size: 0.625rem;
        font-style: normal;
        line-height: normal;
    }

    .title-video-section {
        font-size: 1.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 96%;
        letter-spacing: -0.0375rem;
    }


    .title-grid-images,
    .title-grid-images>* {
        font-size: 1.875rem;
        font-style: normal;
        font-weight: 700;
        line-height: 96%;
        letter-spacing: -0.0375rem;
    }

    .text-footer-mini-video {
        font-size: 0.625rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .words {
        margin-bottom: -38px;
        height: 38px;
        overflow: hidden;
        text-align: start;
    }

    .col-title-first {
        margin-bottom: 1.3rem;
    }

    .col-text-parrafo-banner {
        margin-top: 2rem;
        margin-bottom: 3.3rem;
    }

    .grid-mini-videos-banner {
        gap: .94rem !important;
        grid-template-rows: repeat(3, minmax(0, 3fr)) !important;
    }

    .grid-mini-videos-banner .col-mesa-harpo {
        grid-area: 1 / 1 / 2 / 7 !important;
        margin-bottom: 2rem;
    }

    .grid-mini-videos-banner .col-luminaria-rama {
        grid-area: 1 / 7 / 2 / 13 !important;
        margin-bottom: 2rem;
    }

    .grid-mini-videos-banner .col-banco-bancal {
        grid-area: 2 / 1 / 3 / 7 !important;
        margin-bottom: 2rem;
    }

    .grid-mini-videos-banner .col-luminaria-tumbler {
        grid-area: 2 / 7 / 3 / 13 !important;
        margin-bottom: 2rem;
    }

    .grid-mini-videos-banner .col-pergola-persol {
        grid-area: 3 / 1 / 4 / 7 !important;
    }

    .padding-top-section {
        padding-top: 1rem;
    }

    .col-title-to-title-text-direction-horizontal {
        margin-bottom: 2rem;
    }

    .col-text-to-title-text-direction-horizontal {
        margin-bottom: 4.62rem;
    }

    .grid-images-images-direction-horizontal {
        gap: .94rem !important;
    }

    .grid-images-images-direction-horizontal .col-image-horizontal-position-2 {
        grid-column-start: 4;
    }

    .content-grid-items-images .left-image-more-text .content-mini-image-dinamic-position {
        width: 10.75rem;
        height: 8.0625rem;
        margin-bottom: 2.62rem;
    }

    .content-grid-items-images .left-image-more-text .content-text {
        width: 78%;
    }

    .content-grid-items-images .center-title-more-image {
        margin-top: 5.31rem;
    }

    .content-grid-items-images .center-title-more-image .title-grid-images {
        margin-bottom: 2.62rem;
    }

    .content-grid-items-images .center-title-more-image .content-mini-image-dinamic-position {
        width: 10.75rem;
        height: 8.0625rem;
    }

    .content-grid-items-images .right-image-more-image {
        display: flex;
        gap: .94rem;
        margin-top: 8.6rem;
    }

    .content-grid-items-images .right-image-more-image .content-mini-image-dinamic-position {
        width: 10.75rem;
        height: 8.0625rem;
    }

    .content-cita-footer {
        padding-top: 2.81rem;
        padding-bottom: 2.81rem;
    }
}