body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* INTRO =============================================================== */
#intro {
    height: 47vw;
    max-height: 800px;
    margin-top: 89px;
    position: relative;
}

#intro img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
}

@media screen and (max-width: 800px) {
    #intro {
        margin-top: 0;
    }
}

@media screen and (max-width: 600px) {
    #intro {
        height: 70vw;
        max-height: 600px;
    }
}

/* POTENCIAR */
#enhance {
    background-color: #eff0f1;
    background: rgb(245,99,107);
    background: -moz-linear-gradient(90deg, rgba(245,99,107,1) 0%, rgba(255,109,139,1) 50%, rgba(255,178,0,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(245,99,107,1) 0%, rgba(255,109,139,1) 50%, rgba(255,178,0,1) 100%);
    background: linear-gradient(90deg, rgba(245,99,107,1) 0%, rgba(255,109,139,1) 50%, rgba(255,178,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5636b",endColorstr="#ffb200",GradientType=1);
    padding: var(--paddingMedium) 0;
}

#enhance h1 {
    font-weight: 700;
    font-size: clamp(1.9rem, 7.0vw, 4.2rem);
    line-height: 1.1em;
    margin-bottom: 0.5em;
    color: #FFF;
    text-align: center;
}

#enhance .pageWidth a.discover:hover {
    background-color: #e04d55;
}

@media screen and (max-width: 480px) {
}

/* MIsSION */
#mission {
    padding: var(--paddingMedium) 0;
}

#mission .pageWidth {
    display: flex;
    align-items: flex-start;
}

#mission p.highlight {
    width: 50%;
    box-sizing: border-box;
    padding: 0 20px 0 0px;
    position: relative;
    font-weight: 500;
    font-size: clamp(1.1rem, 3.0vw, 1.6rem);
    line-height: 1.5em;
    color: #1B2432;
}

#mission p strong {
    font-weight: 300;
}

#mission .wrapper {
    width: 50%;
    box-sizing: border-box;
}

#mission .wrapper p {
    box-sizing: border-box;
    padding: 3px 0 0 45px;
    position: relative;
    font-weight: 500;
    line-height: 1.6em;
    font-size: clamp(1.0rem, 2.5vw, 1.4rem) !important;
    color: #676D76;
}

@media screen and (max-width: 1100px) {
    #mission .pageWidth {
        padding: 0 10px;
    }
}

@media screen and (max-width: 900px) {
    #mission p {
        font-size: 22px;
        line-height: 34px;
        padding: 140px 10px 140px 80px;
    }

    #mission .wrapper {
        background-size: 90% auto;
    }
}

@media screen and (max-width: 840px) {
    #mission p {
        padding: 100px 10px 100px 80px;
    }
}

@media screen and (max-width: 800px) {
    #mission p {
        padding: 100px 10px 100px 65px;
    }
}

@media screen and (max-width: 750px) {
    #mission .pageWidth {
        flex-direction: column;
    }

    #mission p.highlight {
        margin-bottom: 2em;
        width: 100%;
    }

    #mission .wrapper p {
        padding: 0;
        width: 100%;
    }

    #mission .wrapper {
        width: 100%;
        background-size: auto 100%;
    }
}

/* VALUES */
#values {
    background: rgb(255,255,255);
    background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(215,215,215,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(215,215,215,1) 100%);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(215,215,215,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#d7d7d7",GradientType=1);
    padding: var(--paddingMedium) 0;
    position: relative;
}

#values h2 {
    color: #000;
    line-height: 55px;
    font-size: clamp(1.5rem, 5.4vw, 3.0rem);
    line-height: 1.4em;
    margin-bottom: 70px;
    text-align: center;
}

#values ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    width: 100%;
}

#values ul li {
    /* width: 100%; */
}

#values ul li img {
    margin: 0 0 7px 0;
    max-width: 100%;
}

#values ul li h3 {
    font-weight: 700;
    margin: 0 0 7px 0;
    color: #000;
    line-height: 1.2em;
    font-size: clamp(1.1rem, 3.0vw, 1.5rem);
}

#values ul li p {
    font-weight: 500;
    line-height: 1.4em;
    font-size: clamp(1.0rem, 1.9vw, 1.3rem);
    color: #676D76;
}

@media screen and (max-width: 1100px) {
    #values .pageWidth {
        padding: 0 20px;
    }
}

@media screen and (max-width: 800px) {
    #values ul {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* VIDEO 30 ANIVERSARIO ========================================================= */
#anniversary {
    background: rgb(154,119,255);
    background: -moz-linear-gradient(90deg, rgba(154,119,255,1) 0%, rgba(2,199,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(154,119,255,1) 0%, rgba(2,199,255,1) 100%);
    background: linear-gradient(90deg, rgba(154,119,255,1) 0%, rgba(2,199,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9a77ff",endColorstr="#02c7ff",GradientType=1);
    padding: var(--paddingMedium) 0;
    position: relative;
}

#anniversary .pageWidth {
    display: flex;
    flex-direction: column;
    z-index: 1;
}

#anniversary .pageWidth h3 {
    font-size: 30px;
    font-size: clamp(1.5rem, 2.8vw, 1.8rem);
    line-height: 1.4em;
    color: var(--negro);
    font-weight: 700;
    margin: 0 0 20px 0;
    text-align: center;
}

#anniversary .pageWidth .wrapper {
    flex: 1;
    height: 0;
    position: relative;
    padding-bottom: 33.4%;
    height: 0;
    width: 59%;
}

#anniversary .pageWidth .wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
}

@media screen and (max-width: 1110px) {
    #anniversary .pageWidth {
        padding: 0 10px;
    }
}

@media screen and (max-width: 850px) {
    #anniversary .pageWidth {
        flex-direction: column;
    }

    #anniversary .pageWidth .wrapper {
        width: 100%;
        padding-bottom: 56.2%;
        margin-bottom: 30px;
    }
}

/* CONTACT FIX 2022 */
#contact {
    padding: clamp(50px, 8vw, 100px) 0px !important;
}

#contact .wrapper h2 {
    font-weight: 700 !important;
    color: #02C7FF !important;
    margin: 0 0 30px 0px !important;
    font-size: clamp(1.8rem, 5.8vw, 4.0rem) !important;
    width: 80%;
}

#contact .wrapper h2 strong {
    font-weight: 700 !important;
    color: #02C7FF !important;
}

#contact .wrapper p {
    font-weight: 600 !important;
    color: #273347 !important;
    font-size: clamp(1.8rem, 5.8vw, 1.0rem) !important;
    width: 80%;
}

@media screen and (max-width: 800px) {
    #contact .wrapper h2 {
        width: 100%;
        margin: 0 0 10px 0px !important;
    }

    #contact .wrapper p {
        font-size: clamp(1.5rem, 5.0vw, 1.0rem) !important;
        width: 100%;
    }

    #contact {
        padding: clamp(50px, 8vw, 100px) 30px !important;
    }
}