body {
    font-size: 0.8em;
    max-width: 100vw;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}

a {
    text-decoration: none;

}

.container {
    padding: 0px 8vw;
}

.langbar-envelope-icon {
    display: block;
    height: 28px;
    width: auto;
}

.langbar-lang-divider {
    background: #005ABE;
    width: 1px;
    height: 12px;
    display: block;
}

.home-icon {
    width: auto;
    height: 80px;
    margin: auto;
    display: block;
}

.home-image {
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
    object-fit: cover;
}

.nosotros-info-list {
    background: #005ABE;
    width: 130%;
    transform: translateX(-20%);
    padding: 40px;
}

.nosotros-info-list p {
    margin: 0;
    color: #82baa1;
    font-weight: 500;
}

.nosotros-info-list i {
    display: block;
    margin-bottom: 10px;
    font-weight: 300;
}

.vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;

}

.home-banner-heading {
    text-transform: uppercase;
    font-size: 1.2em;
    letter-spacing: 0.15rem;
    margin: 30px 0px 20px 0px;
    color: #A0D7BE
}



.info-title {
    text-transform: uppercase;
    font-size: 1.4em;
    color: #005ABE
}

.info-title-lg {
    text-transform: uppercase;
    font-size: 1.6em;
    color: #005ABE
}

.info-subtitle {
    text-transform: uppercase;
    font-size: 1.4em;
    color: #A0D7BE
}

.info-subtitle-sm {
    text-transform: uppercase;
    font-size: 1.2em;
    color: #A0D7BE
}


.home-brand-logo {
    height: 100px;
    width: auto;
    margin: auto;
}

.brand-logos-container {
    width: 100%;
    max-width: 650px;
}

.info-rectangle-container {
    background: #F0F5F5;
    min-height: 140px;
}

.info-rectangle-container p {
    color: #686870;
    font-size: 0.75rem;
    margin: 0;
}

.info-paragraph {
    font-size: 0.75rem;
}

.container-small {
    max-width: 1000px;
    width: 100%;
    margin: auto;
}

.container {
    max-width: 1280px;
}

.container-small {
    padding: 30px 0px;
}

.langbar-item {
    border-left: 1px solid black
}

.color-light {
    color: #686870;
}

.color-3 {
    color: #A0D7BE;
}

.header {
    height: 100vh;
    width: 100%;
}

.menu-logo {
    height: 40px;
    width: auto;
}

.langbar-icon {
    color: #005ABE;
    text-decoration: none;
    padding: 0px 10px;
    font-weight: 600;
}

.lang-active {
    color: #A0D7BE !important;
}

.navbar-main {
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    background: #070707;
    z-index: 9999;
    position: sticky;
    top: 0;
}

.navbar-main .nav-item .nav-link {
    color: white;
    font-weight: 300;
    padding: 20px 0px;
    font-size: 0.75rem;

}

.navbar-main .nav-item .nav-link:hover {
    color: #A0D7BE !important;
}

.navbar-main .nav-item .active {
    color: #A0D7BE !important;
}

.background-1 {
    background: #005ABE;
}

.home-icon {}

.alopecia-info-section {
    background: #F2F7F7;
    padding: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.alopecia-info-section p {
    color: #686870;
    font-size: 0.75rem;
    margin: 0px 0px;

}

.info-section-p {
    color: #686870;
    font-size: 0.75rem;
    margin: 0px 0px;

}

.alopecia-paragraph-container-alt {
    margin-top: 50px;
    background: #A0D7BE;
    padding: 50px 40% 50px 50px;
    width: 140%;

}

.enfoque-info-section {
    background: #F2F7F7;
    padding: 40px;
}

.enfoque-info-section p {
    color: #686870;
    font-size: 0.75rem;
    margin: 0px 0px;

}

.form-submitted-container {
    background: rgba(0, 90, 190, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;

}

.form-submitted-message {
    max-width: 350px;
    background: white;
    color: #686870;
    font-size: 1rem;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.form-submitted-message .btn {
    background: #A0D7BE;
    color: #005ABE;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 10px 20px;
    border-radius: 0px;
    width: 140px;
    border: none;
    margin: auto;
    display: block;
    text-transform: uppercase;
}

.enfoque-paragraph-container-alt {
    background: #A0D7BE;
    padding: 20px 20px 20px 40%;
    width: 140%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.mobile-ventaja-number {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid white;
    font-size: 1.3em;
    margin: 10px auto;

}

.enfoque-paragraph-container-alt p {
    color: white;
    font-size: 0.75rem;
    margin: 0px 0px;
}


.faq-title .faq-icon {
    transform: rotate(0deg);
    transition: 0.3s transform ease-in-out;
    /* display: inline-block; */
}

.faq-title.collapsed .faq-icon {

    transform: rotate(-90deg);
    transition: 0.3s transform ease-in-out;
}

.faq-title,
.faq-title:hover {
    /* border-top:1px solid #b8b8b8; */
    border-bottom: 1px solid #e0e0e0;
    padding: 18px 0px;
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    text-decoration: none;
    color: #A0D7BE;
    font-weight: 300;
}

.faq-title i {
    margin-left: auto;
    margin-right: 20px;
}

.faq-title-text {
    display: block;
    width: 100%;

}

.faq-paragraph {
    padding: 20px 30px 20px 0px;
    line-height: 1.7em;
    color: #686870;
    font-size: 0.9em;
}

.faq-title:hover {
    text-decoration: none;

}

.background-2 {
    background: #A0D7BE
}

.white {
    background: white
}

.faq-section-title {
    text-transform: uppercase;
    font-size: 1.4em;
    color: #005ABE
}

.tecnicas-info-container {
    background: #F0F5F5;
    padding: 50px;
    width: 100%;
}

.tecnicas-info-container p {
    color: #686870;
    font-size: 0.75rem;
    margin: 0px 0px;
}

.tecnicas-info-container-2 p {
    color: #686870;
    font-size: 0.75rem;
    margin: 0px 0px;
}

.tecnica-info-offset-p {
    background: #A0D7BE;
    width: 130%;
    transform: translateX(-5%);
    padding: 30px 30% 30px 30px;
    color: white;
    font-size: 0.75rem;
}

.tecnicas-container-b {
    background: #005ABE;
}

.info-small {
    font-size: 0.75rem;
}

.cursos-info-offset-p {
    background: #A0D7BE;
    width: 130%;
    padding: 30px 30% 30px 30px;
    color: white;
    font-size: 0.75rem;
}

.cursos-paragraph-b {
    padding: 20px 30px 20px 0px;
    line-height: 1.7em;
    color: #686870;
    font-size: 0.75rem;
}

.cursos-ventajas-container {
    background: #005ABE;
    color: #FFFFFF
}

.cursos-ventajas-number-img {
    display: block;
    width: 89%;
    margin: auto;
}

.cursos-calendario-container {
    background: #A0D7BE;
}

.cursos-calendario-title {
    color: white;
    text-transform: uppercase;
    background: #005ABE;
    padding: 10px 10px;
    text-align: center;
    font-size: 0.9rem;
}

.cursos-calendario-paragraph-wrapper {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    background: white;
}

.cursos-calendario-paragraph {
    color: #686870;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
}

.cursos-programa-paragraphs {
    padding: 50px;
    line-height: 1.7em;
    background: #F0F5F5;
    color: #686870;
    font-size: 0.9em;
}

.cursos-valor-container {
    background: #A0D7BE;
}


.newsletter-form {
    background: #005ABE;
}

.form-control {
    border-radius: 0;
    font-size: 0.75rem;
    padding: 20px 20px;
    border: 0 !important;

}

.newsletter-form-btn {
    background: #A0D7BE;
    color: #005ABE;
    text-transform: uppercase;
    border-radius: 0px;
    border: 0;
    padding: 15px 45px;
    margin: auto;
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.paciente-offset-paragraph {
    background: #A0D7BE;
    width: 130%;
    padding: 30px 30px 30px 30px;
    transform: translateX(-24%);
}

.paciente-paragraph-b {
    background: #F0F5F5;
    color: #686870;
    text-align: center;
    padding: 30px;
}

.paciente-paragraph-b p {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.paciente-paragraph-c p {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #686870;
    font-size: 0.75rem
}

.contact-form-wrapper {
    background: #F0F5F5;
    padding: 60px;
    font-size: 0.7em;
    min-height: 700px
}

.contact-form-wrapper input {
    font-size: 0.75rem;
}

.contact_form_button {
    border-radius: 0;
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 15px 45px;
    background: #005ABE;
    margin: auto;
}

.contact-form-info {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    height: 30%;
    background: #A0D7BE;
    color: white;
    position: absolute;
    bottom: 0;
    left: auto;
    right: auto;
    width: calc(100% - 25px);

}

.contact-form-mb-info {
    background: #A0D7BE;
    color: white;

}

.contact-form-info p {
    margin: 18px 0px;

}

.contactenos-img {
    width: 100%;
    height: calc(70% - 30px);
    object-fit: cover;
}

.contact-icon {
    width: 20px;
    height: auto;
    margin-right: 15px;
}

.footer-social {
    color: white;
    font-size: 1rem;
    margin: 0;
}


.footer-social img {
    width: 30px;
    height: auto;
    margin-right: 12px;
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    background: #050505;
    height: 100px;
}


@media (max-width: 768px) {

    body {
        font-size: 0.7em;
    }

    .home-banner-heading {

        font-size: 1.1em;
        letter-spacing: 0.13rem;
        margin: 0px;
        color: #A0D7BE;
        white-space: nowrap;
    }

    .home-brand-logo {
        height: 50px;
        width: auto;
        margin: auto;
    }

    .footer-social {
        color: white;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .footer-social img {
        width: 20px;
        height: auto;
        margin-right: 5px;
    }

    .nosotros-mb-img {
        display: block;
        width: 100%;
        height: 30vh;
        max-height: 350px;
        min-height: 100px;
        object-fit: cover;
    }

    .nosotros-info-list {
        width: 100%;
        transform: translateX(-0);
        padding: 20px;
    }

    .alopecia-info-section {
        background: #F2F7F7;
        padding: 20px;
        position: relative;
        bottom: 0;
        left: 0;
    }

    .alopecia-paragraph-container-alt {
        margin-top: 0px;
        background: #A0D7BE;
        padding: 20px;
        width: 100%;
    }

    .alopecia-mb-img {
        display: block;
        width: 100%;
        height: 30vh;
        max-height: 150px;
        min-height: 100px;
        object-fit: cover;

    }

    .enfoque-info-section {
        background: #F2F7F7;
        padding: 20px;
    }

    .enfoque-paragraph-container-alt {

        background: #A0D7BE;
        padding: 20px;
        width: 100%;
        position: relative;
        bottom: 0;
        right: 0;

    }

    .img-fluid {
        width: 100%;
    }

    .responsive-mb-img {
        display: block;
        width: 100%;
        height: 30vh;
        max-height: 250px;
        min-height: 100px;
        object-fit: cover;
    }

    .tecnica-info-offset-p {
        background: #A0D7BE;
        width: 100%;
        transform: translateX(0);
        padding: 20px;
        color: white;
        font-size: 0.75rem;
    }

    .tecnicas-info-container {
        padding: 30px;
    }

    .tecnica-info-offset-p {
        background: #A0D7BE;
        width: 100%;
        transform: translateX(0);
        padding: 20px;
        color: white;
        font-size: 0.75rem;
    }

    .cursos-info-offset-p {
        background: #A0D7BE;
        width: 100%;
        padding: 20px;
        color: white;
        font-size: 0.75rem;
    }

    .cursos-valor-container h5 {
        font-size: 1.2em !important;
    }

    .paciente-offset-paragraph {
        background: #A0D7BE;
        width: 100%;
        padding: 20px;
        transform: translateX(0);
    }

    .paciente-paragraph-b {

        padding: 20px;
    }

    .contact-icon {
        width: auto;
        height: 15px;
        margin-right: 0px;
    }

    .cursos-paragraph-b {
        padding: 20px;
        line-height: 1.7em;
        color: #686870;
        font-size: 0.75rem;
    }

    .contact-form-wrapper {
        background: #F0F5F5;
        padding: 20px;
        font-size: 0.7em;
    }
}