/* Minification failed. Returning unminified contents.
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(100,24): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(137,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(138,24): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(145,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(148,32): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-y'
(149,36): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(150,35): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(158,34): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(159,33): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x'
(160,26): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-y'
(3981,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3982,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5137,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-elevation-high'
(5469,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5561,18): run-time error CSS1039: Token not allowed after unary operator: '-nav-height'
(5743,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-elevation-high'
(5902,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-elevation-high'
(5963,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-elevation-high'
 */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");

:root {
    --shadow-color: 210deg 6% 6%;
    --shadow-elevation-low: 0px 0.4px 0.5px hsl(var(--shadow-color) / 0.2), 0px 0.5px 0.6px -1.2px hsl(var(--shadow-color) / 0.2), 0px 1.2px 1.3px -2.5px hsl(var(--shadow-color) / 0.2);
    --shadow-elevation-medium: 0px 0.4px 0.5px hsl(var(--shadow-color) / 0.21), 0px 1px 1.1px -0.8px hsl(var(--shadow-color) / 0.21), 0px 2.4px 2.7px -1.7px hsl(var(--shadow-color) / 0.21), 0.1px 5.8px 6.5px -2.5px hsl(var(--shadow-color) / 0.21);
    --shadow-elevation-high: 0px 0.4px 0.5px hsl(var(--shadow-color) / 0.19), 0px 1.4px 1.6px -0.4px hsl(var(--shadow-color) / 0.19), 0px 2.5px 2.8px -0.7px hsl(var(--shadow-color) / 0.19), 0.1px 4px 4.5px -1.1px hsl(var(--shadow-color) / 0.19), 0.1px 6.2px 7px -1.4px hsl(var(--shadow-color) / 0.19), 0.2px 9.6px 10.8px -1.8px hsl(var(--shadow-color) / 0.19), 0.2px 14.6px 16.4px -2.1px hsl(var(--shadow-color) / 0.19), 0.4px 21.4px 24.1px -2.5px hsl(var(--shadow-color) / 0.19);
}

.pink {
    color: #ffaac2;
}

.pink--border {
    border-color: #ffaac2;
}

.yellow {
    color: #fff111 !important;
}

.yellow--border {
    border-color: #fff111 !important;
}

.orchid {
    color: #bf66fe !important;
}

.orchid--border {
    border-color: #bf66fe !important;
}

.blue-light {
    color: #46edff !important;
}

.blue-light--border {
    border-color: #46edff !important;
}

.turquoise {
    color: #1cffc5 !important;
}

.turquoise--border {
    border-color: #1cffc5 !important;
}

.han-purple {
    color: #6320ee !important;
}

.han-purple--border {
    border-color: #6320ee !important;
}

.magneta {
    color: #fc3186 !important;
}

.magneta--border {
    border-color: #fc3186 !important;
}

.lime {
    color: #e4ff71 !important;
}

.lime--border {
    border-color: #e4ff71 !important;
}

.orange {
    color: #fd9206 !important;
}

.orange--border {
    border-color: #fd9206 !important;
}

.green {
    color: #0eb152 !important;
}

.green--border {
    border-color: #0eb152 !important;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

.container {
    width: auto;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 320px) {
    .container {
        max-width: 95%;
    }
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1340px;
    }
}

.container-fluid {
    width: auto;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: 0;
    margin-left: 0;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

    .row > * {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-top: var(--bs-gutter-y);
    }

.col {
    flex: 1 0 0%;
}

* {
    outline: none !important;
    /* Hide scrollbar for Chrome, Safari and Opera */
    -webkit-tap-highlight-color: transparent;
    -ms-overflow-style: none;
    /* Hide scrollbar for IE, Edge and Firefox */
    /* IE and Edge */
    /* Firefox */
    /* width */
    /* Track */
    /* Handle */
    /* Handle on hover */
}

    * ::-webkit-scrollbar {
        width: 9px;
        border-radius: 0px;
    }

    * ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px transparent;
        border-radius: 0px;
    }

    * ::-webkit-scrollbar-thumb {
        background: rgba(49, 51, 54, 0.5);
    }

        * ::-webkit-scrollbar-thumb:hover {
            background: #bb052c;
        }

body,
main {
    letter-spacing: 0px;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 100%;
    font-family: "Raleway", sans-serif;
    overflow-x: hidden;
    overflow-y: overlay;
    background-color: #1c1d20;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a {
    text-decoration: none;
}

.btn {
    height: 35px;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-weight: 300;
    color: #ccd2d8;
    text-align: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid #bb052c;
    padding: 0px 15px;
    font-size: 0.8rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .btn .im {
        font-size: 1rem;
        margin: 2px 10px 0px 0;
    }

    .btn a {
        text-decoration: none;
    }

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

.btn-primary {
    outline: none;
    color: #ccd2d8;
    background-color: #bb052c;
    border-color: #bb052c !important;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}

    .btn-primary:hover {
        background-color: #a20426 !important;
        border-width: 1px;
        border-style: solid;
    }

    .btn-primary:active {
        color: #ccd2d8 !important;
        background-color: #d40632 !important;
        border-color: transparent !important;
    }

.btn-primary-small {
    min-width: 80px;
    padding: 0 5px;
    height: 25px;
    outline: none;
    font-size: 0.6rem;
    color: #ccd2d8;
    background-color: #bb052c;
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}

    .btn-primary-small:hover {
        background-color: #a20426;
        border-color: transparent;
        border-width: 1px;
        border-style: solid;
    }

    .btn-primary-small:active {
        color: #ccd2d8;
        background-color: #d40632;
        border-color: transparent;
    }

    .btn-primary-small .im {
        font-size: 1rem;
        margin-right: 10px;
    }

.btn-save-small {
    min-width: 80px;
    padding: 0 5px;
    height: 25px;
    outline: none;
    font-size: 0.6rem;
    color: #fff;
    background-color: #31992e;
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}

    .btn-save-small:hover {
        background-color: rgba(49, 153, 46, 0.8);
        border-color: transparent;
        border-width: 1px;
        border-style: solid;
    }

    .btn-save-small:active {
        background-color: #31992e;
        border-color: transparent;
    }

    .btn-save-small .im {
        font-size: 1rem;
        margin-right: 10px;
    }

.btn-light-small {
    min-width: 80px;
    padding: 0 5px;
    height: 25px;
    outline: none;
    font-size: 0.6rem;
    color: #ccd2d8;
    background-color: transparent;
    border-color: #3f4144;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}

    .btn-light-small:hover {
        background-color: rgba(63, 65, 68, 0.3);
        border-width: 1px;
        border-style: solid;
    }

    .btn-light-small:active {
        color: #ccd2d8;
        background-color: rgba(63, 65, 68, 0.5);
    }

    .btn-light-small .im {
        font-size: 1rem;
        margin-right: 10px;
    }

.btn-save {
    outline: none;
    color: #ccd2d8;
    background-color: #31992e;
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}

    .btn-save:hover {
        background-color: #2d8d2a;
        border-color: transparent;
        border-width: 1px;
        border-style: solid;
    }

    .btn-save:active {
        color: #ccd2d8;
        background-color: #2b8528;
        border-color: transparent;
    }

input {
    display: block;
    background-color: #313336 !important;
    box-sizing: border-box;
    font-size: 0.9rem;
    padding: 0 0.5rem;
    color: #ccd2d8;
    outline: none;
    border-width: 0px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #3f4144 !important;
    margin: 0px 0 0 0;
    height: 40px;
    width: 100%;
    border-radius: 2px;
}

    input:hover {
        transition: none !important;
    }

::-moz-placeholder {
    color: #787d81;
    opacity: 1;
    /* Firefox */
}

::placeholder {
    color: #787d81;
    opacity: 1;
    /* Firefox */
}

/* -------------------------------------------------------------------------- */
/*                               STYLE Textarea                               */
/* -------------------------------------------------------------------------- */
textarea {
    width: 100%;
    font-size: 0.9rem;
    display: block;
    background-color: #313336;
    padding: 10px;
    color: #ccd2d8;
    overflow: auto;
    outline: none;
    box-shadow: none;
    border-width: 1px;
    border-style: solid;
    border-color: #3f4144;
    resize: none;
    box-sizing: border-box;
    border-radius: 2px;
}

.pointer-none {
    pointer-events: none !important;
}

.pointer-all {
    pointer-events: all !important;
}

.input-validation-error {
    color: #dd0333 !important;
}

.field-validation-error {
    color: #dd0333 !important;
}

.footer li a,
.footer-t li a,
.overlay li a {
    text-decoration: none;
    list-style: none;
}

.transparent {
    position: fixed;
    background-color: transparent;
    transition: linear 0.3s;
}

.hiden {
    opacity: 0;
    visibility: hidden;
}

.title {
    margin: 0 0 0 0;
    color: #fff;
}

/* TEXT BOX HOME 1 */
.box0 {
    margin: 8% 0;
    border-radius: 0.2em;
}

.box1 {
    margin: 160px 0 0% 0;
}

.title-home {
    font-weight: bolder;
    font-size: min(9vw, 3.5rem);
}

.textcc {
    padding: 1.5rem 0.75rem;
    width: auto;
    color: #fff;
}

    .textcc h2 {
        font-weight: bolder;
    }

.textcc-02 {
    margin-top: 0rem;
    width: auto;
    color: #fff;
}

    .textcc-02 h2 {
        text-align: center;
        font-weight: bolder;
        margin: 2rem 0;
    }

.cont-info-main {
    padding: 0.75rem;
    position: absolute;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
    z-index: 3;
    display: flex;
    width: auto;
    max-width: 992px;
    align-items: center;
    justify-content: center;
    height: auto;
}

.home-text-manifest {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.textcc-3 {
    text-align: center;
    padding: 0.75rem;
    width: 100%;
    max-width: 800px;
    color: #a2a7ac;
    margin: 3rem auto;
}

    .textcc-3 h2 {
        color: #a2a7ac;
        font-weight: bolder;
        max-width: 600px;
        margin: 1rem auto;
    }

.home-slide-content-02 {
    padding: 3rem;
    display: block;
    height: 100%;
    color: #fff;
    min-height: 700px;
    background-color: #282a2c;
}

    .home-slide-content-02 h4 {
        color: #a2a7ac;
        font-weight: bolder;
        margin: 2rem 0;
    }

    .home-slide-content-02 p {
        color: #a2a7ac;
    }

.text-title h2 {
    color: #bb052c;
    font-weight: bolder;
}

.textcc-mesaje {
    border-left: 1px solid #bb052c;
    font-size: 0.8em;
    font-style: italic;
    padding: 4em;
    color: #fff;
}

.boxtextbg {
    max-width: 80%;
}

.boxtextbg-2 {
    max-width: 80%;
}

/* TEXT BOX HOME 2 */
.box-card {
    border: 1px solid #313336 !important;
    border-radius: 5px !important;
    color: #ccd2d8;
    background-color: #282a2c;
    overflow: hidden;
    width: 100%;
}

.card-title {
    color: #a2a7ac;
    font-weight: bolder;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #3f4144;
}

.card-cus-01 {
    background-color: #282a2c;
}

    .card-cus-01 p {
        color: #787d81;
        font-size: 0.9rem;
    }

.card-img-bottom {
    border-radius: 0 0 0.2em 0.2em;
}

.box-cardm {
    margin: 0 3% 0 3%;
}

/* CAROUSEL MAIN FADE */
.carrousel-opt {
    width: 100%;
    height: 1080px;
    background-size: cover;
    background-position: center center;
}

.img-bg-00 {
    overflow: hidden;
    background-image: url(/content/images/home/etiopia-corecon-01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 1000px;
    transition: linear 1s;
}

.img-bg-02 {
    background-image: url(/content/images/home/etiopia-corecon-02.jpg);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 900px;
}

.img-bg-03 {
    background-image: url(/content/images/home/etiopia-corecon-03.jpg);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 900px;
}

/* CAROUSEL TRANSITION DURATION OPT */
#carouselFademain .carousel-item {
    transition-duration: 1.8s;
    transition-property: opacity;
}

.card-bg-color1 {
    background-color: #1c1d20;
}

.card-bg-color2 {
    background-color: #1c1d20;
}

.card-bg-color3 {
    background-color: #1c1d20;
}

.btn-info-main {
    max-width: 130px;
    margin: 0 auto;
}

/* SLIDE 2 MAIN INFO */
.carousel-btn {
    font-size: 1.3em;
    margin: auto 0 auto 0;
    width: 30px;
    height: 60px;
}

.icon-nav-l {
    padding: 0.2em 0.3em 0 0;
}

.icon-nav-r {
    padding: 0.2em 0 0 0.2em;
}

.img-s {
    width: 100%;
    height: 700px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.img-s1 {
    background-image: url(/content/images/home/noticia-corecon-03.jpg);
}

.img-s2 {
    background-image: url(/content/images/home/noticia-corecon-02.jpg);
}

.img-s3 {
    background-image: url(/content/images/home/noticia-corecon-01.jpg);
}

.carousel,
.slide,
.border-cus-01 {
    border-radius: 5px;
    overflow: hidden;
}

.contact-box-bg {
    display: block;
    width: 100%;
    background-color: #272829;
    height: auto;
    margin: 150px auto;
    color: #ccd2d8;
    border-radius: 2px;
}

    .contact-box-bg h2 {
        font-weight: bolder;
        color: #ccd2d8;
        margin: 2rem 0 2rem 0;
    }

/* PAGE CONTACT STYLES */
.contact-box {
    margin: 30px auto;
}

.img-bg-05 {
    margin: 2em 0 2em 0;
    width: 100%;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

.form-container {
    padding: 1.7em 0.8em 0.8em 0.8em;
}

.contact-bg-img {
    display: block;
    background-image: url("/images/contact/contact-corecon-00.jpg");
    background-position: center;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.contact-info {
    padding: 0 0 2em 0;
}

    .contact-info .card-title {
        color: #bb052c;
        text-align: left;
        font-size: min(4vw, 1.6rem);
    }

.contact-info-01 {
    text-align: center;
    background-color: #31992e;
}

.submit-home {
    padding-top: 2em;
    list-style: none;
}

/* PAGE ABOUT STYLES */
.textcc-01 {
    display: flex;
    pointer-events: none;
    color: #fff;
    border-radius: 0.2em;
    background-image: url(/content/images/about/nosotros-corecon-04.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    width: auto;
    height: 900px;
    margin: 0 0 30px 0;
    padding: 0.75rem;
}

    .textcc-01 .textcc-01-content {
        padding: 1.5rem 0.75rem;
        text-align: left;
        margin: auto auto auto auto;
        display: block;
        border-radius: 5px;
        color: #ccd2d8;
    }

        .textcc-01 .textcc-01-content h1 {
            pointer-events: none;
            font-weight: bolder;
            text-align: left;
            margin: 0 0 1rem 0;
        }

        .textcc-01 .textcc-01-content p {
            color: #ccd2d8;
            pointer-events: none;
            margin: 0 auto;
            max-width: 550px;
            font-size: 1.2em;
        }

@media only screen and (min-width: 768px) {
    .textcc-01 .textcc-01-content {
        margin: 10% 0 auto 10%;
    }

        .textcc-01 .textcc-01-content h1 {
            pointer-events: none;
            font-weight: bolder;
            margin: 0 0 1rem 0;
        }
}

.about-imag-00 {
    padding: 0.75rem;
    display: flex;
    border-radius: 5px;
    background-image: url(/content/images/about/nosotros-corecon-00.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    width: auto;
    height: 600px;
    margin: 0 0 30px 0;
}

.about-imag-02 {
    padding: 0.75rem;
    display: flex;
    background-image: url(/content/images/about/nosotros-corecon-02.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    width: auto;
    height: 600px;
    border-radius: 5px;
}

.about-container-box {
    border-radius: 5px;
    background-color: #bb052c;
    height: auto;
    display: inline-flex;
    max-width: 500px;
    margin: auto auto auto auto;
}

@media only screen and (min-width: 768px) {
    .about-container-box {
        margin: 10% auto auto 10%;
    }
}

.about-content {
    display: block;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 5px;
    background-color: #313336;
    width: auto;
}

    .about-content .textcc-3 {
        width: auto;
        text-align: left;
    }

        .about-content .textcc-3 h2 {
            max-width: none;
            color: #a2a7ac;
        }

.about-content--img01 {
    display: block;
}

    .about-content--img01 img {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: auto;
    }

@media only screen and (min-width: 768px) {
    .about-content--img01 {
        display: flex;
    }

        .about-content--img01 img {
            max-width: 400px;
        }
}

.about-info-00 {
    background-color: #bb052c;
    color: #fff;
    margin: auto;
    max-width: 500px;
    height: auto;
    border-radius: 5px;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.banner-content .img-banner-news .textcc h2 {
    color: #fff;
    margin-top: 220px;
}

.img-banner-news {
    background-image: url(/content/images/news/news-corecon-bg.jpg);
    background-position: center center;
    background-size: cover;
    height: 600px;
    width: 100%;
}

    .img-banner-news .textcc {
        max-width: 800px;
    }

.text-title {
    max-width: 100%;
}

/* Fondo de la sección de noticias */
.news-container {
    background-color: #313336;
    width: 100%;
    height: auto;
    border: 1px solid #3f4144;
    border-radius: 2px;
    overflow: hidden;
}

.news-1 {
    width: 100%;
    height: auto;
}

.news-text-date {
    font-size: 0.8em;
    color: #fff;
    margin: auto 0;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    display: block;
    width: 150px;
    height: 80px;
    background-color: #bb052c;
}

    .news-text-date a {
        display: block;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 100%;
        height: 20px;
        text-align: center;
        position: absolute;
    }

/* Imágenes para la sección de noticias */
.new-img-container {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 400px;
}

.new-img-01 {
    background-image: url(/content/images/news/corecon-news-img-1.jpg);
}

.new-img-02 {
    background-image: url(/content/images/news/corecon-news-img-2.jpg);
}

.new-img-03 {
    background-image: url(/content/images/news/corecon-news-img-3.jpg);
}

.new-img-04 {
    background-image: url(/content/images/news/corecon-news-img-4.jpg);
}

.news-emprendedurismo {
    background-image: url(/content/images/news/emprendedurismo-101.jpg);
}

.news-efectividad {
    background-image: url(/content/images/news/efectividad.jpg);
}

.news-text,
.news-text-extra {
    color: #a2a7ac;
    height: auto;
    background-color: #282a2c;
}

    .news-text h3 {
        color: #a2a7ac;
        font-weight: bolder;
    }

    .news-text-extra h5 {
        color: #a2a7ac;
        font-weight: bolder;
    }

    .news-text a.text-reveal {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #bb052c;
    }

    .news-text span {
        display: block;
        text-align: center;
        justify-content: center;
        transition: linear 0.3s;
        -webkit-transition: linear 0.3s;
        -moz-transition: linear 0.3s;
        -ms-transition: linear 0.3s;
        -o-transition: linear 0.3s;
    }

    .news-text i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 5px 0 0;
        font-size: 1.7em;
        width: 20px;
        height: 30px;
        transition: linear 0.2s;
        -webkit-transition: linear 0.2s;
        -moz-transition: linear 0.2s;
        -ms-transition: linear 0.2s;
        -o-transition: linear 0.2s;
    }

        .news-text i:hover {
            cursor: pointer;
            color: #bb052c;
        }

.news-text-extra {
    overflow: hidden;
    color: #a2a7ac;
    height: auto;
    display: block;
    height: 0;
    visibility: hidden;
}

/* FOOTER */
.footer-div-bottom {
    padding-top: 2rem;
    display: flex;
    border-top: 1px solid #3f4144;
    width: 100%;
    margin: 50px auto;
}

    .footer-div-bottom .brand-img-2 {
        display: block;
        width: 90px;
        height: auto;
    }

.footer-container {
    padding: 5rem 0 0 0;
    max-width: 992px;
    margin: 0 auto;
}

#footer {
    bottom: 0;
    margin: 150px 0 0 0;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #282a2c;
    z-index: 1;
    padding-bottom: 0;
}

    #footer .nav-link {
        border-bottom: none;
    }

    #footer .input-group .btn {
        border-radius: 0 2px 2px 0;
    }

.footer-link-optional {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0.5rem 0;
    font-size: min(5vw, 0.8rem);
}

    .footer-link-optional .alt-drop-link {
        color: #787d81;
    }

        .footer-link-optional .alt-drop-link .icon {
            margin: 0.2rem 0.5rem 0.2rem 0;
            width: min(10vw, 16px);
            height: min(10vw, 16px);
        }

.d-cursor {
    pointer-events: none;
    cursor: default;
}

.footer-t a {
    color: #ccd2d8;
    font-size: 1em;
    transition: color 0.2s ease-in-out;
}

.footer-t i {
    color: #bb052c;
}

.footer-t {
    color: #ccd2d8;
    padding: 0;
}

    .footer-t a:hover {
        color: #bb052c;
    }

.footer-i {
    padding-top: 0.5em;
    color: #ccd2d8;
    text-align: center;
    font-size: 1.2em;
}

.box-btn-imput {
    background-color: #313336;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: #3f4144;
    border-radius: 2px 0 0 2px;
}

.form-control::-moz-placeholder {
    color: #787d81;
}

.form-control::placeholder {
    color: #787d81;
}

.form-control:focus {
    color: #787d81;
    background-color: #282a2c;
}

.btn-congig1 {
    margin: 5px 0 0 2px;
    border: none;
    height: 23px;
    font-size: 0.7em;
    padding: 0 10px 0 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    list-style: none;
    border-bottom: 1px solid #313336;
}

.nav-item--link a {
    padding: 0.75rem 0;
}

/* .box-imput {
    max-width: 500px;
} */
@media (max-width: 1200px) {
    .fill {
        height: 600px;
    }

    .boxtextbg {
        max-width: 95%;
    }

    .boxtextbg-2 {
        max-width: 95%;
    }
}

@media (max-width: 991px) {
    .img-story {
        height: 530px;
    }

    .fill {
        height: 400px;
    }

    .box0 {
        margin: 8% 0 0 0;
    }
}

@media (max-width: 767px) {
    .img-story {
        height: auto;
    }

    .text-resp {
        text-align: center;
    }

    .wrap {
        max-width: 30px auto;
    }

    nav ul {
        opacity: 0;
        visibility: hidden;
    }

    .icon-s {
        margin: 0.5em;
    }

    .img-s {
        height: 400px;
    }

    .card-custom {
        flex: unset;
        margin-top: 5px;
    }

    .carrousel-opt {
        height: 1135px;
    }

    .box-card {
        margin: 0;
        width: auto;
    }

    .boxtextbg {
        max-width: 70%;
    }

    .box-card {
        margin: 5% 0 5% 0;
    }

    .textcc-mesaje {
        border-top: 1px solid #bb052c;
        border-left: none;
        margin: 0 auto;
    }

    .box0 {
        margin: 10% auto;
    }

    .overlay {
        background-position: 80% center;
    }

    .box1 {
        margin: 20px 0 0% 0;
        font-size: 0.9em;
    }

    #nav-icon {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .brand-img {
        visibility: hidden;
    }

    .new-img-container {
        height: 400px;
        width: 100%;
    }

    .news-container-01 {
        margin: 30px 0 0 0;
    }

    .carousel {
        padding: 0;
        width: 100% !important;
    }
}

@media (min-width: 767px) {
    .overflow {
        overflow: visible;
    }

    .brand-img {
        visibility: visible;
    }

    .transparent {
        background-color: #282a2c;
    }

    .hiden {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 576px) {
    .boxtextbg {
        max-width: 95%;
    }
}

#courses-contact-form {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 1100px;
    justify-content: center;
    align-items: center;
    /* ------------------------------- ANCHOR Form ------------------------------ */
    /* --------------------------- ANCHOR Media query --------------------------- */
}

    #courses-contact-form::after {
        content: "";
        z-index: -1;
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #1c1d20;
    }

    #courses-contact-form .content {
        color: #ccd2d8;
        display: flex;
        position: relative;
        width: 100%;
        margin: auto;
    }

@media only screen and (min-width: 400px) {
    #courses-contact-form .content {
        min-width: 350px;
    }
}

@media only screen and (min-width: 576px) {
    #courses-contact-form .content {
        min-width: 550px;
    }
}

@media only screen and (min-width: 768px) {
    #courses-contact-form .content {
        min-width: 620px;
    }
}

#courses-contact-form .menu-dot-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 45px;
    background-color: #bb052c;
    border: 1px solid #bb052c;
}

    #courses-contact-form .menu-dot-container span {
        color: #fff;
        cursor: pointer;
        margin-left: 15px;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }

        #courses-contact-form .menu-dot-container span .im {
            font-size: 0.6rem;
            margin-right: 6px;
            margin-top: 2px;
            height: 100%;
        }

#courses-contact-form form {
    overflow: hidden;
    background-color: #282a2c;
    width: 100%;
    max-width: 700px;
    margin: auto;
    display: block;
    border-radius: 2px;
}

    #courses-contact-form form .form-container {
        border: 1px solid #3f4144;
        padding: 15px;
    }

        #courses-contact-form form .form-container label {
            display: block;
        }

    #courses-contact-form form .title {
        display: block;
        text-align: center;
        max-width: 500px;
        margin: 0 auto 50px auto;
    }

        #courses-contact-form form .title::after {
            content: "";
            display: block;
            width: 150px;
            height: 4px;
            background-color: #bb052c;
            margin: 25px auto;
        }

    #courses-contact-form form .form-input {
        margin-bottom: 50px;
        display: block;
        width: 100%;
    }

        #courses-contact-form form .form-input .input {
            display: block;
            width: auto;
        }

            #courses-contact-form form .form-input .input span {
                font-size: 0.9rem;
                display: block;
                margin-top: 10px;
                margin-bottom: 10px;
                color: #787d81;
            }

            #courses-contact-form form .form-input .input input {
                color: #ccd2d8;
                margin-bottom: 0;
                border-color: #3f4144;
                background-color: #313336;
            }

@media only screen and (min-width: 768px) {
    #courses-contact-form form .form-input .input input {
        margin-bottom: 0;
    }
}

#courses-contact-form form textarea {
    color: #ccd2d8;
    margin-top: 10px;
    display: block;
    width: 100%;
    border-color: #3f4144;
    background-color: #313336;
}

#courses-contact-form form .btn {
    margin: 40px auto 20px auto;
}

#courses-contact-form form .social-icons {
    margin: 40px 0;
    display: flex;
    width: 100%;
    justify-content: center;
}

    #courses-contact-form form .social-icons a {
        margin: 0 20px;
        color: #bb052c;
    }

        #courses-contact-form form .social-icons a .im {
            font-size: 1rem;
        }

@media only screen and (min-width: 768px) {
    #courses-contact-form .content {
        display: flex;
        align-items: center;
    }

    #courses-contact-form form .form-input {
        display: flex;
    }

        #courses-contact-form form .form-input .input {
            width: 100%;
        }

            #courses-contact-form form .form-input .input:first-child {
                margin-right: 15px;
            }
}

.main-contact-form {
    display: block !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 12px !important;
}

.answer-wrong {
    background-color: #bb052c !important;
    border: 1px solid #bb052c !important;
}

.answer-correct {
    background-color: #31992e !important;
    border: 1px solid #31992e !important;
}

.btn-flag-active {
    color: #31992e !important;
}

.btn-active-session {
    background-color: #bb052c !important;
    color: #e8ecee !important;
    border: 1px solid #bb052c;
}

#course {
    padding: 100px 0;
    color: #a2a7ac;
    width: 100%;
    height: 100%;
    display: block;
    justify-content: center;
    /* -------------------------- ANCHOR navbar curses -------------------------- */
    /* ------------------------------ ANCHOR Video ------------------------------ */
    /* ------------------------------- ANCHOR Test ------------------------------ */
    /* ----------------------------- ANCHOR Section ----------------------------- */
    /* --------------------------- ANCHOR Media query --------------------------- */
}

    #course::after {
        content: "";
        z-index: -1;
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #1c1d20;
    }

    #course .content {
        display: block;
        margin: 0 auto;
    }

    #course .course-container {
        width: 100%;
        display: flex;
    }

    #course .navar-curses {
        transform: scale(0.8);
        transform-origin: top;
        /* ------------------------ ANCHOR Session container ------------------------ */
    }

        #course .navar-curses .session-container {
            display: block;
            margin: 0 auto;
            overflow-y: scroll;
            max-height: 700px;
            padding: 0px 20px 0px 0px;
            /* -------------------------- ANCHOR Session title -------------------------- */
            /* ------------------------------ ANCHOR Lesson ----------------------------- */
        }

            #course .navar-curses .session-container .session-title {
                width: 50px;
                height: 38px;
                border-radius: 50%;
                background-color: #bb052c;
                position: relative;
                list-style: none;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 10px 0;
            }

                #course .navar-curses .session-container .session-title::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 39px;
                    width: 2px;
                    height: 20px;
                    background-color: #d0d0d0;
                }

                #course .navar-curses .session-container .session-title .btn-course-var {
                    cursor: pointer;
                    pointer-events: none;
                    display: flex;
                    height: auto;
                    align-items: center;
                    color: #ccd2d8;
                    font-weight: 700;
                    margin: auto;
                }

            #course .navar-curses .session-container .lesson {
                position: relative;
                list-style: none;
                display: flex;
                justify-content: center;
                /* ------------------------------- ANCHOR Flag ------------------------------ */
            }

                #course .navar-curses .session-container .lesson .flag {
                    pointer-events: none;
                    cursor: pointer;
                    margin: 18px 0 10px 0;
                    background-color: transparent !important;
                }

                    #course .navar-curses .session-container .lesson .flag .im {
                        font-size: 1.3rem;
                        color: #ccd2d8;
                    }

                #course .navar-curses .session-container .lesson::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 39px;
                    width: 2px;
                    height: 20px;
                    background-color: #d0d0d0;
                }

                #course .navar-curses .session-container .lesson .lecture {
                    pointer-events: none;
                    cursor: pointer;
                    margin: 18px 0 10px 0;
                    background-color: transparent !important;
                }

                    #course .navar-curses .session-container .lesson .lecture .im {
                        font-size: 1.3rem;
                        color: #ccd2d8;
                    }

                #course .navar-curses .session-container .lesson::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 39px;
                    width: 2px;
                    height: 20px;
                    background-color: #d0d0d0;
                }

                #course .navar-curses .session-container .lesson .activity {
                    pointer-events: none;
                    cursor: pointer;
                    margin: 18px 0 10px 0;
                    background-color: transparent !important;
                }

                    #course .navar-curses .session-container .lesson .activity .im {
                        font-size: 1.3rem;
                        color: #ccd2d8;
                    }

                #course .navar-curses .session-container .lesson::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 39px;
                    width: 2px;
                    height: 20px;
                    background-color: #d0d0d0;
                }

                #course .navar-curses .session-container .lesson:last-child::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 30px;
                    width: 0px;
                    height: 25px;
                    background-color: #3f4144;
                }

                #course .navar-curses .session-container .lesson .btn-course-var {
                    cursor: pointer;
                    display: flex;
                    width: 50px;
                    height: 29px;
                    background-color: #313336;
                    border-radius: 15%;
                    justify-content: center;
                    align-items: center;
                    color: #ccd2d8;
                    font-size: 1rem;
                    margin: 10px 0;
                }

    #course #course-content {
        display: block;
    }

        #course #course-content .btn-next {
            margin-top: 0;
            text-align: right;
            display: block;
        }

    #course .video-container {
        width: 100%;
        height: auto;
        display: block;
        padding: 0.75rem;
        /* ---------------------- ANCHOR Frame video container ---------------------- */
    }

        #course .video-container h2 {
            margin: 20px 0 -10px 0;
            padding: 0;
        }

        #course .video-container h3 {
            color: #787d81;
            align-items: center;
            font-weight: 300;
            font-size: 1rem;
            margin-bottom: 50px;
        }

            #course .video-container h3 span {
                font-weight: 700;
                margin-right: 10px;
            }

        #course .video-container .description {
            padding-bottom: 30px;
            margin-bottom: 60px;
            border-bottom: 1px solid #3f4144;
            background-color: #282a2c;
        }

        #course .video-container .video-embed {
            display: block;
            width: 100%;
            height: 100%;
        }

            #course .video-container .video-embed .video-wrapper {
                display: flex;
                width: 100%;
                position: relative;
                padding-bottom: 56.25%;
                /* 16:9 */
                height: 0;
            }

                #course .video-container .video-embed .video-wrapper iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

        #course .video-container .video-info-footer {
            display: block;
            margin-top: 25px;
        }

            #course .video-container .video-info-footer a {
                margin-top: 25px;
                display: flex;
                align-items: center;
                color: #ccd2d8;
                max-width: 200px;
            }

                #course .video-container .video-info-footer a .im {
                    font-size: 1rem;
                    margin-right: 15px;
                }

    #course #test-form-wrapper {
        overflow: hidden;
        width: 100%;
        height: 750px;
        position: relative;
        display: block;
    }

    #course .test-container {
        width: 100%;
        height: 100%;
        position: absolute;
    }

        #course .test-container .test-form {
            position: relative;
            padding: 0.75rem;
        }

            #course .test-container .test-form h1 .im {
                color: #31992e;
            }

            #course .test-container .test-form form .question p {
                display: block;
                font-size: 1rem;
                margin-bottom: 50px;
            }

                #course .test-container .test-form form .question p::after {
                    margin-top: 20px;
                    content: "";
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 1px;
                    background-color: #313336;
                }

            #course .test-container .test-form form .answer-content {
                /* --------------------------- ANCHOR Button test --------------------------- */
            }

                #course .test-container .test-form form .answer-content .btn {
                    text-align: left;
                    background-color: #282a2c;
                    padding: 10px 10px !important;
                    height: auto;
                    min-height: 55px;
                    width: 100%;
                    margin: 20px 0;
                    border: 1px solid #3f4144 !important;
                }

                    #course .test-container .test-form form .answer-content .btn:hover {
/*                        background-color: #37393b !important;*/
                        border: 1px solid #f6f8fa !important;
                    }

                    #course .test-container .test-form form .answer-content .btn.answer-correct:hover {
                        background-color: #31992e !important;
                        border: 1px solid #31992e !important;
                    }

        #course .test-container .btn-next {
            margin-left: auto;
            margin-right: 0.75rem;
        }

    #course .attempts-container {
        position: relative;
        display: flex;
        width: auto;
        margin-left: 0.75rem;
        background-color: #313336;
    }

        #course .attempts-container .attempts {
            width: auto;
            height: 30px;
            position: relative;
            display: flex;
            align-items: center;
            color: #ccd2d8;
            font-size: 0.8rem;
        }

        #course .attempts-container .attempts-number {
            width: auto;
            height: 30px;
            position: relative;
            display: flex;
            align-items: center;
            color: #ccd2d8;
            font-size: 0.8rem;
            margin: 0 8px;
        }

        #course .attempts-container .bg-progress {
            position: absolute;
            display: block;
            width: 0%;
            height: 100%;
            background-color: #bb052c;
            background: #bb052c;
            background: linear-gradient(45deg, #1c1d20 0%, #bb052c 100%);
        }

        #course .attempts-container .test-completed {
            z-index: 2;
            position: absolute;
            margin: auto 0;
            left: 50px;
            top: 0;
            bottom: 0;
            font-size: 0.8rem;
            margin-left: 15px;
            display: flex;
            align-items: center;
        }

            #course .attempts-container .test-completed .im {
                margin-left: 10px;
                padding-top: 2px;
                color: #ccd2d8;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 23px;
                height: 23px;
                border-radius: 50%;
                font-size: 0.6rem;
                background-color: #31992e;
            }

    #course .section-btn {
        opacity: 0.3;
    }

    #course #section-contr,
    #course #section-quest {
        display: block;
        width: 100%;
        max-height: 100%;
        overflow: hidden;
        font-size: 0.9rem;
        padding: 0.75rem;
        margin-top: 0;
        /* ------------------------------- ANCHOR Form ------------------------------ */
    }

        #course #section-contr form,
        #course #section-quest form {
            display: block;
            overflow: auto;
            padding-bottom: 25px;
            max-height: 900px;
            scrollbar-width: none;
            /* ------------------------------- ANCHOR Card ------------------------------ */
        }

            #course #section-contr form::-webkit-scrollbar,
            #course #section-quest form::-webkit-scrollbar {
                display: none;
            }

            #course #section-contr form textarea,
            #course #section-quest form textarea {
                color: #a2a7ac;
                border-color: #313336;
            }

            #course #section-contr form .btn-send,
            #course #section-quest form .btn-send {
                margin-top: 15px;
            }

            #course #section-contr form .commentary-text,
            #course #section-quest form .commentary-text {
                height: 7rem;
            }

            #course #section-contr form .contributions,
            #course #section-quest form .contributions {
                display: block;
                position: relative;
            }

                #course #section-contr form .contributions .header,
                #course #section-quest form .contributions .header {
                    display: flex;
                    justify-content: space-between;
                }

                    #course #section-contr form .contributions .header li,
                    #course #section-quest form .contributions .header li {
                        cursor: pointer;
                        width: 100%;
                        list-style: none;
                        display: flex;
                        justify-content: center;
                        padding-bottom: 10px;
                        border-bottom: 2px solid #bb052c;
                    }

                        #course #section-contr form .contributions .header li .contr,
                        #course #section-contr form .contributions .header li .quest,
                        #course #section-quest form .contributions .header li .contr,
                        #course #section-quest form .contributions .header li .quest {
                            margin-right: 10px;
                        }

                #course #section-contr form .contributions .order,
                #course #section-quest form .contributions .order {
                    display: block;
                    margin-top: 50px;
                }

                    #course #section-contr form .contributions .order h3,
                    #course #section-quest form .contributions .order h3 {
                        margin-bottom: 30px;
                    }

                    #course #section-contr form .contributions .order .order-options,
                    #course #section-quest form .contributions .order .order-options {
                        display: flex;
                        align-items: center;
                    }

                    #course #section-contr form .contributions .order .btn,
                    #course #section-quest form .contributions .order .btn {
                        color: #e8ecee;
                        margin: 0 5px;
                        background-color: #313336;
                        border: 1px solid #3f4144;
                    }

                        #course #section-contr form .contributions .order .btn:hover,
                        #course #section-quest form .contributions .order .btn:hover {
                            background-color: #bb052c;
                            border: 1px solid #bb052c;
                        }

            #course #section-contr form .card-container,
            #course #section-quest form .card-container {
                margin-top: 25px;
                display: flex;
            }

                #course #section-contr form .card-container .card,
                #course #section-quest form .card-container .card {
                    display: flex;
                    width: 100%;
                    padding: 0.75rem;
                    background-color: #282a2c;
                    border: 1px solid #3f4144;
                    border-radius: 2px;
                    /* --------------------------- ANCHOR Card content -------------------------- */
                }

                    #course #section-contr form .card-container .card .var,
                    #course #section-quest form .card-container .card .var {
                        gap: 1rem;
                        display: flex;
                        align-items: center;
                    }

                        #course #section-contr form .card-container .card .var img,
                        #course #section-quest form .card-container .card .var img {
                            display: block;
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                        }

                        #course #section-contr form .card-container .card .var .like,
                        #course #section-quest form .card-container .card .var .like {
                            transform: scale(0.8);
                            padding: 0.3rem;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            gap: 0.75rem;
                            justify-content: center;
                            width: 50px;
                            height: auto;
                            align-items: center;
                            border-bottom: 1px solid #3f4144;
                        }

                            #course #section-contr form .card-container .card .var .like .im,
                            #course #section-quest form .card-container .card .var .like .im {
                                font-size: 1.2rem;
                                margin-bottom: 0;
                            }

                    #course #section-contr form .card-container .card .card-content,
                    #course #section-quest form .card-container .card .card-content {
                        display: block;
                        margin: 1rem 0 0 0;
                    }

                        #course #section-contr form .card-container .card .card-content .textarea-container,
                        #course #section-quest form .card-container .card .card-content .textarea-container {
                            position: relative;
                            overflow: hidden;
                        }

                        #course #section-contr form .card-container .card .card-content .textarea-answer,
                        #course #section-quest form .card-container .card .card-content .textarea-answer {
                            display: none;
                            visibility: hidden;
                            opacity: 0;
                            transform: translateY(-100%);
                            height: 0;
                            margin: 0.75rem 0;
                        }

                        #course #section-contr form .card-container .card .card-content .btn-reply-cancel,
                        #course #section-quest form .card-container .card .card-content .btn-reply-cancel {
                            visibility: hidden;
                            opacity: 0;
                        }

                        #course #section-contr form .card-container .card .card-content h4,
                        #course #section-quest form .card-container .card .card-content h4 {
                            padding: 0;
                            margin: 0;
                        }

                        #course #section-contr form .card-container .card .card-content .time,
                        #course #section-quest form .card-container .card .card-content .time {
                            color: #787d81;
                            font-size: 0.8rem;
                        }

                        #course #section-contr form .card-container .card .card-content p,
                        #course #section-quest form .card-container .card .card-content p {
                            font-size: 0.8rem;
                        }

                        #course #section-contr form .card-container .card .card-content .card-content-body,
                        #course #section-quest form .card-container .card .card-content .card-content-body {
                            position: relative;
                            background-color: #3f4144;
                            padding: 0.5rem;
                            border-radius: 2px;
                            margin: 0 auto 0 0.75rem;
                        }

                            #course #section-contr form .card-container .card .card-content .card-content-body h4,
                            #course #section-quest form .card-container .card .card-content .card-content-body h4 {
                                font-size: min(4vw, 1rem);
                            }

                            #course #section-contr form .card-container .card .card-content .card-content-body:before,
                            #course #section-quest form .card-container .card .card-content .card-content-body:before {
                                content: "";
                                display: block;
                                position: absolute;
                                top: -5.5px;
                                left: -10px;
                                width: 20px;
                                height: 20px;
                                -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                                transform: rotate(-63deg);
                                background-color: #3f4144;
                            }

                    #course #section-contr form .card-container .card .card-content--answer .card-content-body,
                    #course #section-quest form .card-container .card .card-content--answer .card-content-body {
                        position: relative;
                        background-color: #313336;
                        padding: 0.5rem;
                        border-radius: 2px;
                        margin: 0 0.75rem 0 auto;
                    }

                        #course #section-contr form .card-container .card .card-content--answer .card-content-body .header-answer,
                        #course #section-quest form .card-container .card .card-content--answer .card-content-body .header-answer {
                            width: 100%;
                            border-bottom: 1px solid #3f4144;
                            padding-bottom: 0.5rem;
                            display: inline-flex;
                            align-items: center;
                            gap: 0.75rem;
                        }

                            #course #section-contr form .card-container .card .card-content--answer .card-content-body .header-answer img,
                            #course #section-quest form .card-container .card .card-content--answer .card-content-body .header-answer img {
                                width: 35px;
                                height: 35px;
                            }

                        #course #section-contr form .card-container .card .card-content--answer .card-content-body h4,
                        #course #section-quest form .card-container .card .card-content--answer .card-content-body h4 {
                            font-size: min(4vw, 0.8rem);
                        }

                        #course #section-contr form .card-container .card .card-content--answer .card-content-body:before,
                        #course #section-quest form .card-container .card .card-content--answer .card-content-body:before {
                            content: "";
                            display: block;
                            position: absolute;
                            top: -5.6px;
                            left: auto;
                            right: -11px;
                            width: 20px;
                            height: 20px;
                            -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                            transform: rotate(63deg);
                            background-color: #313336;
                        }

@media only screen and (min-width: 768px) {
    #course #course-content {
        display: flex;
        width: 100%;
    }

        #course #course-content .btn-next {
            margin-top: 0;
        }

    #course #section-quest,
    #course #section-contr {
        max-width: 350px;
        margin-top: 0;
    }

        #course #section-quest .commentary-text,
        #course #section-contr .commentary-text {
            height: 7rem;
        }
}

#services-main {
    padding: 5rem 0 0 0;
    color: #a2a7ac;
    width: 100%;
    height: 100vh;
    display: block;
}

    #services-main::after {
        content: "";
        z-index: -1;
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #1c1d20;
    }

    #services-main .container {
        max-width: 800px;
    }

.content {
    display: none;
    padding: 0rem 0 4rem 0;
    max-width: 1140px;
    width: 100%;
    margin: auto;
}

.content--active {
    display: block;
}

.description-content {
    position: relative;
    gap: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    margin-top: 0rem;
}

.description-image {
    display: inline-flex;
    gap: 2rem;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 5px;
}

    .description-image img {
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
        width: 200px;
        height: auto;
    }

.description {
    display: block;
    margin-top: 0rem;
    padding: 1.2rem 0.75rem;
    font-size: min(5vw, 1rem);
    background-color: #282a2c;
    border-radius: 2px;
    border: 1px solid #313336;
}

.description-text--lan {
    max-width: 350px;
}

.title-description {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: baseline;
    margin-bottom: 0rem;
}

    .title-description h2 {
        margin: 0;
    }

    .title-description p {
        font-size: min(7vw, 2rem);
        padding: 0 0 0.75rem 0;
        margin: 0 0 1rem 0;
    }

        .title-description p::after {
            content: "";
            position: absolute;
            bottom: 0;
            display: block;
            height: 1px;
            background-color: #3f4144;
            width: 40%;
        }

.sections-nav {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
    width: auto;
    gap: 0.75rem;
}

@media only screen and (min-width: 576px) {
    .sections-nav {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
    }
}

.sections-label {
    pointer-events: none;
    display: block;
    text-align: center;
    width: 100%;
    font-size: min(3.5vw, 0.9rem);
}

.sections-nav-button {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.75rem;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #313336;
    border-radius: 2px;
    padding-bottom: 2rem;
    opacity: 0.5;
}

    .sections-nav-button .icon {
        margin: 1rem auto;
        width: min(7vw, 35px);
        height: min(7vw, 35px);
    }

    .sections-nav-button::after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 0;
        transition: width 0.3s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
    }

    .sections-nav-button:hover::after {
        width: 100%;
        background-color: #313336;
    }

.sections-nav-button--active {
    opacity: 1;
    background-color: #282a2c;
}

.table-container {
    display: none;
    width: auto;
}

.table-container--active {
    display: flex;
}

.table-title-container {
    padding: 0.75rem;
    border-radius: 2px;
    border: 1px solid #313336;
    margin: 2rem 0;
}

    .table-title-container .table-title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .table-title-container .table-title .icon {
            width: min(10vw, 18px);
            height: min(10vw, 18px);
        }

    .table-title-container p {
        color: #787d81;
    }

.table {
    display: block;
    width: 100%;
}

.table-header {
    display: block;
    border-width: 1px 1px 1px 1px;
    border-color: #bb052c;
    border-style: solid;
    margin-bottom: 0px;
    border-radius: 2px 2px 0 0;
    background-color: #bb052c;
}

    .table-header .table-cell {
        font-weight: bold;
        font-size: min(3vw, 0.9rem);
        border-width: 0px 0px 0px 1px;
        border-color: #bb052c;
        border-style: solid;
    }

.table-body {
    display: block;
    border-width: 0px 1px 1px 1px;
    border-color: #3f4144;
    border-style: solid;
    border-radius: 0 0 2px 2px;
}

.table-row {
    width: auto;
    display: flex;
    border-width: 0px 0px 1px 0px;
    border-color: #3f4144;
    border-style: solid;
}

    .table-row:last-child {
        border-width: 0px 0px 0px 0px;
    }

.table-row--border-b-0 {
    border-bottom: 0;
}

.table-row--border-r-0 {
    border-right: 0;
}

.table-row--border-l-0 {
    border-left: 0;
}

.table-row--border-t-0 {
    border-top: 0;
}

.table-cell {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.75rem;
    width: 100%;
    border-width: 0px 0px 0px 1px;
    border-color: #3f4144;
    border-style: solid;
}

    .table-cell:first-child {
        border-width: 0px 0px 0px 0px;
    }

.table-cell--elements-left {
    text-align: left;
    justify-content: left;
}

.table-cell--elements-right {
    text-align: right;
    justify-content: right;
}

.table-cell--elements-center {
    text-align: center;
    justify-content: center;
}

.first-detail {
    font-size: min(4vw, 0.9rem);
}

.second-detail,
.third-detail,
.four-detail,
.header-second-detail,
.header-third-detail,
.header-four-detail {
    text-align: center;
    justify-content: center;
    width: 200px;
}

.table-detail-simbol {
    color: #fd9206;
    font-size: min(3vw, 0.9rem);
}

.table-detail-price {
    font-size: min(3vw, 0.9rem);
}

.first-detail {
    color: #787d81;
}

.detail-icon .icon {
    color: #31992e;
}

.section {
    position: relative;
    margin-top: 0rem;
    display: flex;
    width: 100%;
    height: auto;
    background-color: transparent;
    padding-bottom: 0rem;
    overflow: hidden;
}

.section-bg {
    display: flex;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://images.pexels.com/photos/3415148/pexels-photo-3415148.jpeg?cs=srgb&dl=pexels-bali-demiri-3415148.jpg&fm=jpg?auto=compress&cs=tinysrgb&dpr=2&h=600&w=480");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.05;
}

.section-bg--lan {
    background-image: url("https://images.pexels.com/photos/7077970/pexels-photo-7077970.jpeg?cs=srgb&dl=pexels-laura-tancredi-7077970.jpg&fm=jpg&fm=jpg?auto=compress&cs=tinysrgb&dpr=2&h=600&w=480");
}

.card-containers {
    width: 100%;
    padding: 0rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0rem;
    margin: 0 0 0 0;
}

.card-containers--lan {
    gap: 2rem;
}

.card {
    padding: 0rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.div-line {
    display: none;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 1px;
    height: 50%;
    background-color: #787d81;
}

.div-line--lan {
    height: 70%;
}

@media only screen and (min-width: 768px) {
    .div-line {
        display: flex;
    }
}

.card__header {
    margin-top: 0rem;
}

.card__header-image {
    display: flex;
    margin: -0.75rem;
    justify-content: center;
    margin-bottom: 0rem;
}

    .card__header-image img {
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
        width: 100%;
        height: 250px;
    }

.card__body-line {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card__body-title {
    margin: 2rem 0 0 0;
}

.card__body-list {
    padding: 0;
    width: 100%;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

    .card__body-list li {
        font-size: min(4vw, 0.9rem);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0;
        list-style: none;
        border-bottom: 1px solid #bb052c;
    }

        .card__body-list li .icon {
            width: min(10vw, 18px);
            height: min(10vw, 18px);
        }

.card__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #3f4144;
    border-radius: 50%;
    padding: 0.75rem;
}

    .card__icon .icon {
        width: min(10vw, 30px);
        height: min(10vw, 30px);
    }

.button-container {
    display: flex;
    width: 100%;
    margin: 2rem 0 1rem 0;
}

    .button-container .btn {
        margin: 0 0 0 auto;
    }

#course-preview {
    color: #a2a7ac;
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 1600px;
    justify-content: center;
    align-items: center;
    /* ------------------------------- ANCHOR Info ------------------------------ */
    /* --------------------------- ANCHOR List topics --------------------------- */
    /* --------------------------- ANCHOR Media query --------------------------- */
}

    #course-preview::after {
        content: "";
        z-index: -1;
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #1c1d20;
    }

    #course-preview .content {
        max-width: 370px;
        display: block;
        margin: 0 auto;
    }

    #course-preview .info {
        padding: 0rem;
        position: relative;
        margin-bottom: 0.75rem;
        display: flex;
        flex-direction: column;
    }

        #course-preview .info h1::after {
            content: "";
            display: block;
            margin-top: 10px;
            width: 150px;
            height: 5px;
            background-color: #bb052c;
        }

        #course-preview .info .info-score {
            width: 100%;
            display: block;
            align-items: center;
            /* ---------------------- ANCHOR Íconos de calificación ---------------------- */
        }

            #course-preview .info .info-score .course-duration {
                display: flex;
                margin-right: 10px;
            }

                #course-preview .info .info-score .course-duration b {
                    margin-left: 5px;
                    margin-right: 40px;
                }

            #course-preview .info .info-score span {
                font-size: 0.8rem;
            }

            #course-preview .info .info-score .icons-stars {
                display: flex;
                align-items: center;
                margin: 10px 0;
            }

                #course-preview .info .info-score .icons-stars span {
                    margin-right: 10px;
                }

                #course-preview .info .info-score .icons-stars .im {
                    font-size: 0.9rem;
                }

            #course-preview .info .info-score .rating-0 .im {
                color: #787d81;
            }

            #course-preview .info .info-score .rating-1 .im {
                color: #787d81;
            }

                #course-preview .info .info-score .rating-1 .im:nth-child(1) {
                    color: #fdd806;
                }

            #course-preview .info .info-score .rating-2 .im {
                color: #787d81;
            }

                #course-preview .info .info-score .rating-2 .im:nth-child(-n+2) {
                    color: #fdd806;
                }

            #course-preview .info .info-score .rating-3 .im {
                color: #787d81;
            }

                #course-preview .info .info-score .rating-3 .im:nth-child(-n+3) {
                    color: #fdd806;
                }

            #course-preview .info .info-score .rating-4 .im {
                color: #787d81;
            }

                #course-preview .info .info-score .rating-4 .im:nth-child(-n+4) {
                    color: #fdd806;
                }

            #course-preview .info .info-score .rating-5 .im {
                color: #787d81;
            }

                #course-preview .info .info-score .rating-5 .im:nth-child(-n+5) {
                    color: #fdd806;
                }

        #course-preview .info a {
            margin-top: auto;
        }

    #course-preview .course-description {
        display: block;
        border-bottom: 1px solid #3f4144;
        padding-bottom: 0.75rem;
        /* ------------------------------ ANCHOR Banner ----------------------------- */
    }

        #course-preview .course-description .course-banner {
            display: block;
            width: 100%;
        }

            #course-preview .course-description .course-banner img {
                -o-object-fit: cover;
                object-fit: cover;
                display: block;
                width: 100%;
                height: 100%;
            }

    #course-preview .course-topics {
        display: block;
        width: 100%;
        padding: 0 0 3rem 0;
    }

        #course-preview .course-topics .list-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
            gap: 0.75rem;
        }

            #course-preview .course-topics .list-group .list {
                display: block;
                width: 100%;
            }

                #course-preview .course-topics .list-group .list span {
                    width: 100%;
                    align-items: center;
                    display: flex;
                    margin: 10px 0;
                    border-bottom: 1px solid #bb052c;
                }

                #course-preview .course-topics .list-group .list .number {
                    font-weight: 700;
                    font-size: 0.9rem;
                    color: #ccd2d8;
                    margin-right: 10px;
                    display: flex;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    text-align: center;
                    align-items: center;
                    background-color: #bb052c;
                }

@media only screen and (min-width: 768px) {
    #course-preview {
        min-height: 1200px;
    }

        #course-preview .content {
            max-width: 100%;
        }

        #course-preview .course-description {
            display: flex;
        }

            #course-preview .course-description .course-banner img {
                min-width: 300px;
            }

            #course-preview .course-description .info-score {
                display: flex;
                align-items: center;
            }

        #course-preview .info {
            padding: 0.75rem;
        }
}

#courses-main {
    padding-top: 100px;
    padding-bottom: 100px;
    /* ------------------------------ ANCHOR Banner ------------------------------ */
    /* --------------------------- ANCHOR Contact link --------------------------- */
    /* ---------------------------- ANCHOR Media query --------------------------- */
}

    #courses-main::after {
        content: "";
        z-index: -1;
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #1c1d20;
    }

    #courses-main .title {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 100px;
    }

        #courses-main .title h1 {
            color: #a2a7ac;
            font-size: 3rem;
        }

            #courses-main .title h1::after {
                content: "";
                display: block;
                margin-top: 10px;
                width: 150px;
                height: 5px;
                background-color: #bb052c;
            }

        #courses-main .title h2 {
            font-size: 1.4rem;
            margin-bottom: 60px;
            color: #a2a7ac;
        }

        #courses-main .title p {
            color: #a2a7ac;
        }

    #courses-main .banner {
        color: #a2a7ac;
        margin-bottom: 60px;
        padding-bottom: 15px;
        border-radius: 2px;
        border-bottom: 1px solid #3f4144;
        display: block;
    }

        #courses-main .banner:nth-child(2) .img-container .course-logo {
            width: 200px;
        }

    #courses-main .img-container {
        position: relative;
        overflow: hidden;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 200px;
        max-height: 350px;
    }

        #courses-main .img-container img {
            overflow: hidden;
            border-radius: 2px;
            -o-object-fit: contain;
            object-fit: contain;
            margin-top: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        #courses-main .img-container .course-logo {
            display: block;
            width: 120px;
            height: auto;
            position: absolute;
        }

    #courses-main .banner-footer {
        padding: 0px;
        width: 100%;
        display: block;
        /* ---------------------- ANCHOR Íconos de calificación ---------------------- */
    }

        #courses-main .banner-footer .course-duration {
            display: flex;
            margin-right: 10px;
        }

            #courses-main .banner-footer .course-duration b {
                margin-left: 5px;
                margin-right: 40px;
            }

        #courses-main .banner-footer span {
            font-size: 0.8rem;
        }

        #courses-main .banner-footer .icons-stars {
            display: flex;
            align-items: center;
            margin: 10px 0;
        }

            #courses-main .banner-footer .icons-stars span {
                margin-right: 10px;
            }

            #courses-main .banner-footer .icons-stars .im {
                font-size: 0.9rem;
            }

        #courses-main .banner-footer .rating-0 .im {
            color: #787d81;
        }

        #courses-main .banner-footer .rating-1 .im {
            color: #787d81;
        }

            #courses-main .banner-footer .rating-1 .im:nth-child(1) {
                color: #fdd806;
            }

        #courses-main .banner-footer .rating-2 .im:nth-child(-n+2) {
            color: #fdd806;
        }

        #courses-main .banner-footer .rating-3 .im {
            color: #787d81;
        }

            #courses-main .banner-footer .rating-3 .im:nth-child(-n+3) {
                color: #fdd806;
            }

        #courses-main .banner-footer .rating-4 .im {
            color: #787d81;
        }

            #courses-main .banner-footer .rating-4 .im:nth-child(-n+4) {
                color: #fdd806;
            }

        #courses-main .banner-footer .rating-5 .im {
            color: #787d81;
        }

            #courses-main .banner-footer .rating-5 .im:nth-child(-n+5) {
                color: #fdd806;
            }

        #courses-main .banner-footer .btn a {
            color: #fff;
        }

    #courses-main .course-contact-link {
        text-align: left;
        display: block;
        width: 100%;
        color: #a2a7ac;
    }

        #courses-main .course-contact-link .btn a {
            color: #fff;
        }

@media only screen and (min-width: 992px) {
    #courses-main .container {
        max-width: 992px;
    }
}

@media only screen and (min-width: 768px) {
    #courses-main .banner {
        display: flex;
    }

    #courses-main .banner-footer {
        width: 100%;
        padding: 15px;
    }

        #courses-main .banner-footer .btn {
            margin-left: auto;
            margin-right: 0;
        }

    #courses-main .img-container {
        height: 325px;
        width: 100%;
        max-width: 35%;
    }

        #courses-main .img-container .course-logo {
            width: 160px;
        }

    #courses-main .banner:nth-child(2) .img-container .course-logo {
        width: 160px;
    }

    #courses-main .banner:nth-child(3) .img-container .course-logo {
        width: 160px;
    }
}

@media only screen and (min-width: 576px) {
    #courses-main .banner:nth-child(2) .img-container .course-logo {
        width: 347px;
    }

    #courses-main .banner:nth-child(3) .img-container .course-logo {
        width: 347px;
    }
}

#login {
    color: #a2a7ac;
    min-height: 700px;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1c1d20;
    /* ------------------------------- ANCHOR Form ------------------------------ */
}

    #login .content {
        margin: auto;
        position: relative;
        display: block;
        width: 100%;
        max-width: 600px;
        height: 580px;
        background-color: #282a2c;
        box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.137);
        -webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.137);
        -moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.137);
        border: 1px solid #3f4144;
        border-radius: 0 0 2px 2px;
    }

@media only screen and (min-width: 400px) {
    #login .content {
        min-width: 350px;
    }
}

@media only screen and (min-width: 576px) {
    #login .content {
        min-width: 550px;
    }
}

@media only screen and (min-width: 768px) {
    #login .content {
        min-width: 600px;
        height: auto;
        padding: 0;
        margin-top: 150px;
    }
}

#login input {
    color: #a2a7ac;
    border-color: #3f4144;
    background-color: #313336;
}

#login .menu-dot-container {
    margin: -1px;
    position: absolute;
    right: 0;
    left: 0;
    width: auto;
    display: flex;
    align-items: center;
    height: 45px;
    background-color: #bb052c;
    border-radius: 2px 2px 0 0;
    border: 1px solid #bb052c;
}

    #login .menu-dot-container span {
        color: #fff;
        cursor: pointer;
        margin-left: 15px;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }

        #login .menu-dot-container span .im {
            font-size: 0.6rem;
            margin-right: 6px;
            margin-top: 2px;
            height: 100%;
        }

#login .form {
    display: block;
    padding: 15px;
}

    #login .form h1 {
        text-align: center;
        margin: 6rem auto 2rem auto;
    }

    #login .form form {
        margin-top: 50px;
        position: relative;
        width: auto;
        height: auto;
    }

        #login .form form input {
            margin: 20px 0 0 0 !important;
            width: 100%;
        }

        #login .form form .btn {
            display: block;
            margin: 50px auto 0 auto;
        }

#login .login-footer {
    display: block;
    position: relative;
    width: 100%;
}

    #login .login-footer ul {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        padding: 0;
        margin-top: 15px;
    }

        #login .login-footer ul li {
            list-style: none;
            margin: 5px 15px;
        }

            #login .login-footer ul li a {
                font-size: 0.9rem;
                color: #a2a7ac;
                text-decoration: none;
                opacity: 0.8;
            }

#Capa_1 {
    width: 70%;
    max-width: 700px;
    height: auto;
}

.hdiw-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding-top: 9rem;
    padding-bottom: 4rem;
}

    .hdiw-title h1 {
        font-weight: bolder;
        font-size: min(6vw, 2.5rem);
        color: #a2a7ac;
    }

.content-hdiw {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 0 0 3rem 0;
}

.hdiw-image {
    width: 70%;
    max-width: 700px;
    height: auto;
}

.hdiw-box-text-container {
    display: flex;
    justify-content: center;
}

.hdiw-box-text {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.75rem;
    padding: 2rem 0.75rem 2rem 0.75rem;
    font-size: min(5vw, 0.9rem);
}

@media only screen and (min-width: 992px) {
    .hdiw-box-text {
        max-width: 1200px;
    }
}

.hdiw-box-text .box-text {
    padding: 1.5rem 0.75rem 0.75rem 0.75rem;
    background-color: #282a2c;
    border-radius: 5px;
    border: 1px solid #313336;
}

    .hdiw-box-text .box-text b {
        display: flex;
        padding-bottom: 0.3rem;
        margin-bottom: 0.75rem;
        color: #ccd2d8;
        border-bottom: 1px solid #313336;
    }

    .hdiw-box-text .box-text p {
        color: #a2a7ac;
    }

.content-map-bg {
    position: relative;
}

.airplane-image {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 2;
    transform: translateY(-300px);
    opacity: 0;
    display: block;
    width: min(15vw, 90px);
    height: auto;
    margin: -2rem auto 0 auto;
}

.map-box-text {
    padding: 3rem 0.75rem;
    display: block;
    width: auto;
    color: #a2a7ac;
}

    .map-box-text h2 {
        font-size: min(7vw, 2rem);
        font-weight: bold;
    }

    .map-box-text p {
        max-width: 300px;
        font-size: min(5vw, 0.9rem);
    }

.map-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: auto;
    padding: 4rem 0;
    margin: -5rem 0 0 0;
}

.map-image {
    display: flex;
    width: 90%;
    max-width: 700px;
    height: auto;
}

.map-image-info {
    position: absolute;
    left: 0;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .map-image-info h2 {
        font-size: min(5vw, 2rem);
    }

    .map-image-info p {
        font-size: min(5vw, 0.9rem);
    }

@media only screen and (min-width: 768px) {
    .map-image-info {
        bottom: 25%;
        left: 10%;
    }
}

.map-title {
    display: flex;
    justify-content: center;
    width: 100%;
}

    .map-title ul {
        width: 100%;
        padding: 0;
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    }

        .map-title ul li {
            display: inline-flex;
            gap: 0.4rem;
            align-items: center;
            list-style: none;
            font-size: min(4vw, 0.9rem);
            margin: 0rem 0;
            border-bottom: 1px solid #313336;
            padding-bottom: 0.5rem;
        }

@media only screen and (min-width: 992px) {
    .map-title ul {
        max-width: 1200px;
    }
}

.n-country {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #282a2c;
    border: 1px solid #313336;
    border-radius: 50%;
    font-size: 0.8rem;
}

.title-space {
    color: #ccd2d8;
    margin: 9rem 0 3rem 0;
}

.MultiCarousel-inner {
    color: #ccd2d8;
    display: flex;
    gap: 25px;
}

    .MultiCarousel-inner .item {
        display: flex;
        flex-direction: column;
        background-color: #37393b;
        padding: 0.75rem;
        border-radius: 2px;
        border-bottom: 1px solid #bb052c;
    }

        .MultiCarousel-inner .item .imgTitle img {
            width: 100%;
            border: 7px solid #3f4144;
            border-radius: 50%;
        }

        .MultiCarousel-inner .item h2 {
            font-size: min(4vw, 1.2rem);
            font-weight: bolder;
        }

        .MultiCarousel-inner .item p {
            padding: 1rem;
        }

            .MultiCarousel-inner .item p:first-child {
                display: block;
                border-bottom: 1px solid #3f4144;
            }

            .MultiCarousel-inner .item p:last-child {
                font-size: min(4vw, 0.9rem);
                margin-top: 0;
                margin-top: auto;
            }

        .MultiCarousel-inner .item .text-center {
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #3f4144;
            margin-bottom: 2rem;
        }

        .MultiCarousel-inner .item .icon-team {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: #787d81;
            transition: color 0.2s;
            border-top: 1px solid #3f4144;
            padding-top: 0.75rem;
            transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
        }

            .MultiCarousel-inner .item .icon-team:hover {
                color: #bb052c;
            }

.MultiCarousel .btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
}

    .MultiCarousel .btn .icon {
        width: 35px;
        height: 35px;
    }

.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
    background-color: transparent !important;
    border: none !important;
    position: absolute;
    border-radius: 0.1rem;
    top: calc(50% - 20px);
}

.MultiCarousel .leftLst {
    left: -0.7rem !important;
}

.MultiCarousel .rightLst {
    right: -0.7rem !important;
}

#course-plans {
    display: block;
    height: 100%;
}

    #course-plans .section-title {
        margin: 10rem auto 5rem auto;
        position: relative;
        display: flex;
        justify-content: center;
    }

        #course-plans .section-title h1 {
            color: #a2a7ac;
        }

    #course-plans .switch-button {
        margin: 0 auto 5rem auto;
        position: relative;
        display: flex;
        width: 230px;
    }

        #course-plans .switch-button .switch-info {
            pointer-events: none;
            z-index: 2;
            position: absolute;
            display: flex;
            gap: 0.5rem;
            align-items: center;
            justify-content: space-between;
            width: 230px;
            margin: auto;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
        }

            #course-plans .switch-button .switch-info span {
                font-weight: bold;
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                transition: color 0.5s;
                transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
            }

                #course-plans .switch-button .switch-info span:first-child {
                    color: #272829;
                }

                #course-plans .switch-button .switch-info span:last-child {
                    color: #a2a7ac;
                }

    #course-plans .switch-button--checked .switch-info span:last-child {
        color: #272829;
    }

    #course-plans .switch-button--checked .switch-info span:first-child {
        color: #a2a7ac;
    }

    #course-plans .switch,
    #course-plans input {
        width: 230px;
        height: 45px;
        background-color: #282a2c !important;
    }

        #course-plans .switch::before,
        #course-plans input::before {
            content: "";
            display: inline-flex;
            width: 100px;
            height: 35px;
            border-radius: 1.5rem;
            background-color: #fd9206;
            position: absolute;
            left: 5px;
        }

        #course-plans .switch:checked,
        #course-plans input:checked {
            background-color: #bb052c;
        }

            #course-plans .switch:checked::before,
            #course-plans input:checked::before {
                transform: translateX(118px);
                background-color: #fd9206;
            }

.cards-container {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    margin-bottom: 4rem;
}

.card {
    width: auto;
    max-width: 350px;
    padding: 0.75rem;
    display: inline-flex;
    flex-direction: column;
    background-color: #282a2c;
    border-radius: 2px;
    margin: auto;
    border: 1px solid #313336;
}

    .card .card--recommended-title {
        display: none;
    }

.card--recommended-plan {
    position: relative;
    border: 1px solid #fd9206;
    margin: 3rem auto 1rem auto;
}

    .card--recommended-plan .card--recommended-title {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        justify-content: center;
        margin: -2.5rem auto 0 auto;
        width: 100%;
        font-weight: bold;
        color: #272829;
    }

    .card--recommended-plan::before {
        content: "";
        position: absolute;
        top: -42px;
        right: 0;
        left: -1px;
        margin: auto;
        display: block;
        width: 100%;
        height: 40px;
        background-color: #fd9206;
        border: 1px solid #fd9206;
        border-radius: 2px 2px 0 0;
    }

@media only screen and (min-width: 768px) {
    .card {
        margin: 0 auto 0 auto;
    }
}

.card-title {
    border: none;
    text-align: center;
    font-size: min(4vw, 2rem);
}

.card-title-info {
    color: #787d81;
    text-align: center;
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #313336;
}

    .card-body .btn {
        margin: 2rem auto 2rem auto;
        font-weight: bold;
        font-size: 1.2rem;
    }

.card-body-info {
    gap: 0.75rem;
    display: inline-flex;
    align-items: center;
}

.country-currency {
    color: #a2a7ac;
    font-weight: bolder;
    font-size: min(10vw, 1.4rem);
}

.country-price {
    font-weight: bolder;
    color: #fd9206;
    font-size: min(10vw, 4rem);
}

.price-plan {
    color: #a2a7ac;
    margin: 1rem auto;
}

.card-footer {
    display: inline-flex;
    flex-direction: column;
}

.card-footer-title {
    text-align: left;
    display: flex;
    flex-direction: column;
    color: #a2a7ac;
}

.card-footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #a2a7ac;
}

.card-footer-info-profit {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.75rem 0;
}

    .card-footer-info-profit .icon {
        color: #31992e;
    }

.plan-section-b-container {
    position: relative;
    border-top: 1px solid #313336;
    padding-top: 2rem;
    margin-bottom: 4rem;
}

.plan-section-b-title-container {
    color: #a2a7ac;
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
}

.plan-section-b-title {
    color: #a2a7ac;
    font-size: min(4vw, 2rem);
}

.plan-section-b-list {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border-radius: 2px;
    color: #a2a7ac;
    background-color: #282a2c;
    border: 1px solid #313336;
}

.plan-section-b-item {
    display: block;
    border-bottom: 1px solid #313336;
    margin: 0.75rem 0;
}

.plan-section-b-title-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: bolder;
    font-size: min(4vw, 1.2rem);
    overflow: hidden;
}

    .plan-section-b-title-button .icon {
        margin: 0 0 0 auto;
    }

.plan-section-b-info {
    color: #787d81;
    overflow: hidden;
    display: flex;
    height: 0;
}

:root {
    --size: 100px;
    --bord: 10px;
}

#user-dashboard {
    display: block;
    height: 100%;
}

.block-content {
    padding: 0.75rem;
    margin: 10rem auto 4rem auto;
    display: block;
    width: auto;
    background-color: #282a2c;
    border-radius: 5px;
    border: 1px solid #313336;
}

.user-banner-info {
    position: relative;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    background-color: #313336;
    border-radius: 2px;
    width: 100%;
    gap: 0.75rem;
    margin: 2rem auto 3rem auto;
    border: 1px solid #3f4144;
}

    .user-banner-info::after {
        content: "";
        display: block;
        position: absolute;
        width: 25px;
        height: 25px;
        background-color: #313336;
        bottom: -13px;
        border-radius: 2px;
        border-width: 0px 1px 1px 0px;
        border-style: solid;
        border-color: #3f4144;
        right: 0;
        left: 0;
        margin: 0 auto;
        transform: rotate(45deg);
    }

.user-title {
    margin: 1rem 0 0rem 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    color: #a2a7ac;
}

.overall-progress-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin: 0 0 4rem 0;
}

.overall-progress-title {
    color: #a2a7ac;
}

.overall-progress {
    margin: 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 220px;
    height: 8px;
    border-radius: 0.7rem;
    background-color: #3f4144;
}

.overall-progress-bar {
    display: inline-flex;
    margin: 0 0 0 0;
    width: 0;
    height: 100%;
    border-radius: 0.7rem;
    background-color: #bb052c;
}

.overall-progress-info {
    color: #000;
    display: inline-flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2rem;
    top: 0;
    margin: auto 0;
    align-items: center;
    justify-content: center;
    font-size: min(4vw, 0.8rem);
    color: #fff;
}

.user-image {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

.user-photo-edit {
    display: flex;
    justify-content: center;
    flex-flow: row;
    box-sizing: border-box;
    width: auto;
    margin: 0 0 2rem 0;
}

    .user-photo-edit input[type=file] {
        display: none;
    }

    .user-photo-edit button[type=button],
    .user-photo-edit .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }

#user-personal-info-form {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
    margin: 2rem 0 0rem 0;
    border-bottom: 1px solid #313336;
}

    #user-personal-info-form label,
    #user-personal-info-form .nw-input {
        color: #a2a7ac;
    }

        #user-personal-info-form input:disabled,
        #user-personal-info-form .nw-input:disabled {
            pointer-events: none !important;
            border-width: 0 0 0 0;
            background-color: #2c2e30 !important;
            color: #787d81;
        }

    #user-personal-info-form .icon {
        width: min(10vw, 18px);
        height: min(10vw, 18px);
        pointer-events: all;
        color: #787d81;
        position: absolute;
        z-index: 2;
        right: 0.75rem;
        bottom: 0.7rem;
        transition: color 0.3s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
    }

        #user-personal-info-form .icon:hover {
            color: #a2a7ac;
        }

.user-section-title {
    font-size: min(4vw, 1.8rem);
    text-align: center;
    color: #a2a7ac;
    margin: 3rem 0;
}

.form-section {
    display: flex;
    flex-direction: column;
    position: relative;
}

.user-form-footer {
    grid-row-start: 5;
    grid-row-start: 5;
    height: 50px;
    display: flex;
    width: 100%;
    justify-content: right;
    gap: 0.75rem;
    margin: 1rem 0 0 0;
}

@media only screen and (min-width: 992px) {
    .user-form-footer {
        grid-column-end: 3;
    }
}

.user-form-footer .btn {
    display: none;
}

.user-courses-container {
    display: grid;
    gap: 0.75rem;
}

.user-courses-container--resources {
    width: auto;
    padding: 0.75rem;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 auto 3rem auto;
    gap: 2rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.user-courses {
    max-width: 350px;
    position: relative;
    display: block;
    margin: 0 auto;
    border-radius: 2px;
    overflow: hidden;
    background-color: #313336;
    border: 1px solid #3f4144;
}

@media only screen and (min-width: 576px) {
    .user-courses {
        max-width: none;
        display: flex;
        width: 100%;
    }

        .user-courses .user-image-courses {
            display: inline-flex;
            -o-object-fit: fill;
            object-fit: fill;
            width: 200px;
            height: auto;
        }
}

.user-image-courses {
    display: block;
    -o-object-fit: scale-down;
    object-fit: scale-down;
    width: 100%;
    height: 180px;
}

.user-courses-info {
    display: block;
    color: #ccd2d8;
    padding: 0.75rem;
}

    .user-courses-info h3 {
        font-size: min(5vw, 1rem);
    }

    .user-courses-info label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: min(4vw, 1rem);
    }

.user-courses-description {
    color: #a2a7ac;
    font-size: min(4vw, 0.9rem);
}

.user-courses-author {
    font-size: min(4vw, 0.9rem);
}

.user-progress-bar[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
}

    .user-progress-bar[value]::-webkit-progress-bar {
        height: 6px;
        border-radius: 0.5rem;
        background-color: #3f4144;
    }

    .user-progress-bar[value]::-webkit-progress-value {
        border-radius: 0.5rem;
        background-color: #fd9206;
    }

.icon-password {
    display: none;
}

.section-content {
    display: none;
}

.section-content--active {
    display: block;
}

.nav-sections {
    margin: 5rem 0 2rem 0;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #a2a7ac;
    font-size: min(4vw, 1.3rem);
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #3f4144;
}

.nav-section-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: 100%;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
}

.nav-section-item--active {
    position: relative;
}

    .nav-section-item--active::before {
        content: "";
        position: absolute;
        bottom: -2px;
        display: block;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #bb052c;
    }

.resource-content {
    position: relative;
    display: flex;
    margin: 0 auto;
    height: 100%;
    max-width: 200px;
    transition: transform 0.3s;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
}

    .resource-content:hover {
        transform: scale(1.04);
    }

.resource-content-cover {
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.137);
    -webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.137);
    -moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.137);
}

.resource-checker-mark {
    display: flex;
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 3;
    right: -0.5rem;
    top: -0.5rem;
    background-color: #31992e;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.resource-checker-unmark {
    display: flex;
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 3;
    right: -0.5rem;
    top: -0.5rem;
    background-color: #a2a7ac;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.img-container {
    border-radius: 5px;
    overflow: hidden;
    pointer-events: none;
}

    .img-container img {
        -o-object-position: center;
        object-position: center;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
        width: 100%;
        height: 320px;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
    }

.resource-content-footer {
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
    font-size: min(4vw, 0.9rem);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem;
    margin: 0 0 0 0;
    position: absolute;
    color: #fff;
    top: auto;
    bottom: 0;
    background-color: #1c1d20;
    border-radius: 0 0 5px 5px;
}

    .resource-content-footer a {
        text-decoration: none;
        color: #fff;
    }

    .resource-content-footer li {
        gap: 0.75rem;
        display: inline-flex;
        align-items: center;
        list-style: none;
        padding: 0.5rem;
        border-bottom: 1px solid #313336;
    }

    .resource-content-footer p {
        font-size: min(4vw, 0.8rem);
        color: #a2a7ac;
    }

    .resource-content-footer .switch {
        transform: scale(0.7);
        transform-origin: left;
    }

.resource-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .resource-link .icon {
        width: min(10vw, 16px);
        height: min(10vw, 16px);
        margin-right: 0.5rem;
    }

#payment-form {
    margin-top: 6rem;
    margin-bottom: 6rem;
    color: #a2a7ac;
    border-radius: 5px;
}

    #payment-form .table-header,
    #payment-form .table-body {
        border: none;
        background-color: transparent;
    }

        #payment-form .table-header .table-cell,
        #payment-form .table-body .table-cell {
            border: none;
            padding: 1rem 0;
        }

            #payment-form .table-header .table-cell h5,
            #payment-form .table-header .table-cell h4,
            #payment-form .table-body .table-cell h5,
            #payment-form .table-body .table-cell h4 {
                margin: 0;
            }

    #payment-form .form-group {
        margin: 0;
    }

.payment-form-content {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.form-section-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

    .form-section-container .form-section {
        position: relative;
        box-sizing: border-box;
        background-color: #282a2c;
        padding: 0.75rem;
        border-radius: 5px;
        border-width: 1px 1px 1px 1px;
        border-style: solid;
        border-color: #3f4144;
        transition: border 0.2s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
    }

    .form-section-container .form-section--first {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

@media only screen and (min-width: 992px) {
    .form-section-container .form-section--first {
        grid-column: span 2;
    }

    .form-section-container .form-section--last {
        grid-column: span 1;
    }
}

.form-section-container .form-section--border:hover {
    border-color: #fd9206;
}

    .form-section-container .form-section--border:hover .bar-index {
        background-color: #313336;
        color: #fd9206;
        border: 1px solid #fd9206;
    }

.form-section-container .form-section--active {
    border-color: #fd9206;
}

    .form-section-container .form-section--active .bar-index {
        border: 1px solid #fd9206;
    }

.form-container {
    display: none;
    height: 0;
    overflow: hidden;
    padding: 0;
}

.form-container--open {
    display: block;
    padding: inherit;
}

.form-title {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 2rem 0 4rem 0;
}

.bar-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.2rem 0rem;
    width: 100%;
    box-sizing: border-box;
}

    .bar-title h4 {
        margin: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

.bar-index {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: #ccd2d8;
    font-size: min(6vw, 1rem);
    background-color: #3f4144;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(8vw, 35px);
    height: min(8vw, 35px);
    border-radius: 50%;
    transition: background-color 0.2s;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
}

.button-group {
    display: flex;
    width: 100%;
    margin: 2rem 0 0 0;
    padding: 2rem 0;
}

.button-group--border-t {
    border-top: 1px solid #3f4144;
}

.button-group--border-b {
    border-bottom: 1px solid #3f4144;
}

.table-sumary-info {
    position: relative;
    display: block;
    width: 100%;
}

    .table-sumary-info .form-section {
        top: 0;
        position: sticky;
    }

.icon {
    pointer-events: none;
    width: min(5vw, 24px);
    height: min(5vw, 24px);
}

    .icon use {
        pointer-events: none;
    }

.icon__btn {
    padding: 0.3rem;
    transition: background-color 0.3s;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
    border-radius: 2px;
}

    .icon__btn:hover {
        background-color: #ccd2d8;
    }

.icon__bg--lg {
    padding: 15px;
}

.icon__bg--xl {
    padding: 20px;
}

.icon-rounded {
    background-color: #bb052c;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.swith-button {
    display: block;
    width: auto;
}

.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 55px;
    height: 27px;
    background-color: #a2a7ac;
    border-radius: 3rem;
}

    .switch::before {
        content: "";
        display: inline-flex;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background-color: #787d81;
        position: absolute;
        left: 4px;
        transition: all 0.3s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
    }

    .switch:checked {
        background-color: rgba(253, 146, 6, 0.08) !important;
        border-color: #fd9206 !important;
    }

        .switch:checked::before {
            transform: translateX(27px);
            background-color: #fd9206;
        }

/* ------------------------------  Select ------------------------------ */
.element-select-hide {
    display: none !important;
    visibility: hidden !important;
}

.nw-select-wrapp-line {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid #313336;
}

    .nw-select-wrapp-line .label {
        margin: 0;
        font-weight: bold;
    }

    .nw-select-wrapp-line .nw-input {
        color: #a2a7ac;
        background-color: transparent;
        border-width: 0 0 0px 0;
    }

.nw-select-wrapp-small .label {
    font-size: min(5vw, 0.8rem);
}

.nw-select-wrapp-small .nw-input {
    font-size: min(5vw, 0.8rem);
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
}

.nw-select-wrapp-small .nw-dropdown li {
    height: 29px;
    font-size: min(5vw, 0.8rem);
}

.nw-select-wrapp-large .nw-input {
    font-size: min(5vw, 1.1rem);
    padding: 0.8rem 0.75rem 0.8rem 0.75rem;
}

.nw-select-wrapp-large .nw-dropdown li {
    height: 45px;
    font-size: min(5vw, 1.1rem);
}

.nw-select-container {
    display: block;
    width: auto;
    position: relative;
    /* Track */
    /* Handle */
}

    .nw-select-container .nw-icon {
        pointer-events: none;
        cursor: default;
        z-index: 1;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 0.75rem;
        left: auto;
        display: block;
        width: 10px;
        height: 10px;
        opacity: 1;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCA3LjMzbDIuODI5LTIuODMgOS4xNzUgOS4zMzkgOS4xNjctOS4zMzkgMi44MjkgMi44My0xMS45OTYgMTIuMTd6Ii8+PC9zdmc+");
        background-repeat: no-repeat;
        background-size: contain;
        background-color: transparent;
        transition: transform 0.3s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
        filter: invert(50%);
    }

    .nw-select-container .nw-icon-rotate {
        transform: rotate(180deg);
    }

    .nw-select-container ::-webkit-scrollbar {
        width: 0.5em;
    }

    .nw-select-container ::-webkit-scrollbar-track {
        background-color: #313336;
        border-radius: 0;
        margin-bottom: 0rem;
    }

    .nw-select-container ::-webkit-scrollbar-thumb {
        background: #787d81;
        border-radius: 0.2em;
    }

    .nw-select-container input[type=button] {
        text-align: left;
    }

.nw-input {
    background-color: transparent;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem 0.6rem 0.75rem;
    color: inherit;
    outline: none;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #a2a7ac;
    width: 100%;
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2px;
    -webkit-text-fill-color: inherit;
    /* Override iOS / Android font color change */
    -webkit-opacity: 1;
    /* Override iOS opacity change affecting text & background color */
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

    .nw-input:focus {
        background-color: transparent;
        border-color: #bb052c;
        transition: all 0.6s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
    }

    .nw-input::-moz-placeholder {
        color: #787d81;
        opacity: 1;
        /* Firefox */
    }

    .nw-input::placeholder {
        color: #787d81;
        opacity: 1;
        /* Firefox */
    }

.nw-dropdown-container {
    height: auto;
    display: block;
    position: relative;
    width: auto;
}

.nw-dropdown-overflow {
    overflow-y: scroll;
}

.nw-dropdown {
    box-sizing: border-box;
    overflow-y: auto;
    visibility: hidden;
    align-items: center;
    position: absolute;
    z-index: 5;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0;
    top: 0.5rem;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    max-height: 240px;
    border-width: 1px 1px 1px 1px;
    border-color: #313336;
    border-style: solid;
    border-radius: 5px;
    background-color: #282a2c;
    box-shadow: 0px 8px 9px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 8px 9px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 8px 9px 0px rgba(0, 0, 0, 0.2);
    transition: all 0s;
    transition-timing-function: cubic-bezier(0.17, 0.22, 0.57, 0.36);
}

    .nw-dropdown li {
        font-size: min(5vw, 1rem);
        cursor: default;
        display: flex;
        align-items: center;
        text-align: left;
        width: auto;
        height: 40px;
        padding: 0 0.75rem;
        color: #787d81;
        font-size: min(5vw, 0.9rem);
    }

        .nw-dropdown li:hover {
            background-color: #313336;
            color: #787d81;
        }

    .nw-dropdown [hidden] {
        display: none !important;
    }

.nw-dropdown-shadown-inverse {
    border-radius: 2px 2px 0 0;
    box-shadow: 0px -5px 9px 0px rgba(0, 0, 0, 0.103);
}

.nw-el-list-active {
    height: 40px;
    background-color: #313336 !important;
    color: #a2a7ac !important;
}

.jd-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}

    .jd-slider *:focus {
        outline: none;
    }

    .jd-slider .slide-inner {
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .jd-slider .slide-area {
        width: 100%;
        margin: 0;
        padding: 0;
    }

        .jd-slider .slide-area:after {
            display: block;
            content: "";
            clear: both;
        }

        .jd-slider .slide-area li {
            overflow: hidden;
            position: relative;
            display: none;
            float: left;
            width: 100%;
        }

            .jd-slider .slide-area li:first-child {
                display: block;
            }

            .jd-slider .slide-area li img {
                display: block;
                width: 100%;
            }

    .jd-slider .next, .jd-slider .prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #000;
    }

    .jd-slider .hidden.next, .jd-slider .hidden.prev {
        display: none;
    }

    .jd-slider .next .im, .jd-slider .prev .im {
        color: #333;
        font-size: 1em;
    }

    .jd-slider .prev {
        display: flex;
        left: 0;
        height: 50px;
        text-decoration: none;
        width: 35px;
        transition: width 200ms ease-in-out;
        -webkit-transition: width 200ms ease-in-out;
        -moz-transition: width 200ms ease-in-out;
        -ms-transition: width 200ms ease-in-out;
        -o-transition: width 200ms ease-in-out;
    }

        .jd-slider .prev svg {
            align-self: center;
            margin: 0 auto;
        }

        .jd-slider .prev:hover {
            width: 50px;
        }

    .jd-slider .next {
        display: flex;
        right: 0;
        height: 50px;
        text-decoration: none;
        width: 35px;
    }

        .jd-slider .next svg {
            align-self: center;
            margin: 0 auto;
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
        }

        .jd-slider .next:hover {
            width: 50px;
            transition: width 200ms ease-in-out;
            -webkit-transition: width 200ms ease-in-out;
            -moz-transition: width 200ms ease-in-out;
            -ms-transition: width 200ms ease-in-out;
            -o-transition: width 200ms ease-in-out;
        }

    .jd-slider .controller {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
    }

        .jd-slider .controller .auto {
            display: inline-block;
            vertical-align: middle;
        }

            .jd-slider .controller .auto i {
                display: none;
                color: #333;
            }

            .jd-slider .controller .auto.pause .fa-pause {
                display: block;
            }

            .jd-slider .controller .auto.play .fa-play {
                display: block;
            }

        .jd-slider .controller .indicate-area {
            display: inline-block;
        }

            .jd-slider .controller .indicate-area a {
                display: inline-block;
                position: relative;
                width: 25px;
                height: 5px;
                margin: 0 5px;
                font-size: 0;
                color: transparent;
                vertical-align: middle;
            }

                .jd-slider .controller .indicate-area a:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: inherit;
                    height: inherit;
                    box-sizing: border-box;
                    background-color: rgba(252, 252, 252, 0.2470588235);
                    opacity: 1;
                }

                .jd-slider .controller .indicate-area a.on:after {
                    background-color: #000;
                }

    .jd-slider a {
        font-size: 1.1em;
    }

    .jd-slider.fade .slide-area li {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transform: translateZ(0);
    }

        .jd-slider.fade .slide-area li:first-child {
            position: static;
            opacity: 1;
        }

    .jd-slider.slider--none .prev,
    .jd-slider.slider--none .next,
    .jd-slider.slider--none .controller {
        display: none;
    }

.container-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    padding: 0.75rem;
    z-index: 3;
    top: 50%;
    left: auto;
    transform: translate(-220px, -50%);
    width: 180px;
    gap: 0.75rem;
    background-color: #282a2c;
    border-radius: 2px;
    border: 1px solid #313336;
    box-shadow: var(--shadow-elevation-high);
}

@media only screen and (min-width: 1300px) {
    .container-nav {
        display: flex;
    }
}

.btn-nav-title {
    pointer-events: none;
    display: flex;
    gap: 0rem;
    width: 100%;
    align-items: center;
    padding: 0.3rem 0;
    opacity: 0.5;
}

    .btn-nav-title .icon {
        width: min(10vw, 18px);
        height: min(10vw, 18px);
    }

    .btn-nav-title .icon--01 {
        color: #787d81;
    }

    .btn-nav-title .icon--02 {
        color: #787d81;
    }

    .btn-nav-title .icon--03 {
        color: #787d81;
    }

    .btn-nav-title .icon--04 {
        color: #787d81;
    }

    .btn-nav-title:hover {
        opacity: 1;
    }

        .btn-nav-title:hover::after {
            width: 100%;
        }

@media only screen and (min-width: 992px) {
    .btn-nav-title .icon {
        width: min(10vw, 25px);
        height: min(10vw, 25px);
    }
}

.color-inherit {
    color: inherit !important;
}

.btn-nav-title-active {
    opacity: 1;
}

    .btn-nav-title-active .icon--01 {
        color: #fff111;
    }

    .btn-nav-title-active .icon--02 {
        color: #46edff;
    }

    .btn-nav-title-active .icon--03 {
        color: #fc3186;
    }

    .btn-nav-title-active .icon--04 {
        color: #bf66fe;
    }

.btn-nav {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    font-size: min(5vw, 1rem);
    border-bottom: 1px solid #313336;
    padding: 0.3rem 0;
}

    .btn-nav small {
        pointer-events: none;
        opacity: 0.5;
    }

    .btn-nav:hover .btn-nav-title {
        opacity: 1;
    }

        .btn-nav:hover .btn-nav-title .icon {
            transition: all 0.5s;
            transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
        }

        .btn-nav:hover .btn-nav-title .icon--01 {
            color: #fff111;
        }

        .btn-nav:hover .btn-nav-title .icon--02 {
            color: #46edff;
        }

        .btn-nav:hover .btn-nav-title .icon--03 {
            color: #fc3186;
        }

        .btn-nav:hover .btn-nav-title .icon--04 {
            color: #bf66fe;
        }

    .btn-nav:hover small {
        opacity: 1;
    }

.btn-nav-label {
    padding: 0.3rem 0;
    position: relative;
    left: 1rem;
    display: flex;
    gap: 0.5rem;
    pointer-events: none;
    overflow: hidden;
    width: 180px;
    opacity: 1;
    z-index: -1;
}

@media only screen and (min-width: 992px) {
    .btn-nav-label {
        font-size: min(4vw, 1rem);
    }
}

.btn-nav-label small {
    font-size: min(4vw, 0.7rem);
}

.btn-nav-link {
    cursor: default;
    list-style: none;
    padding: 0.75rem 0;
    border-bottom: 1px solid #3f4144;
    transition: all 0.2s;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
}

    .btn-nav-link:hover {
        color: #bb052c;
    }

.main-nav-menu-alternate {
    z-index: -1;
    display: none;
    position: absolute;
    top: 113px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
}

    .main-nav-menu-alternate::-webkit-scrollbar {
        width: 0em;
        height: 0em;
    }

.menu-alternate-container {
    display: block;
    position: relative;
    top: 7px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.795);
}

.menu-alternate-list {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    width: auto;
    background-color: #282a2c;
}

.menu-alternate-item {
    font-weight: bolder;
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 0rem;
    width: auto;
    background-color: #282a2c;
    list-style: none;
    border-top: 0px solid transparent;
    border-bottom: 0px solid #313336;
    transition: background-color 0.1s ease-in-out;
}

    .menu-alternate-item:last-child .menu-alternate-dropdown .menu-alternate-inner-item:last-child {
        padding-bottom: 3rem;
    }

    .menu-alternate-item .icon {
        right: 0.75rem;
        position: absolute;
        margin: auto;
        pointer-events: none;
        width: min(10vw, 24px);
        height: min(10vw, 24px);
    }

    .menu-alternate-item .alt-link {
        width: auto;
        padding: 0.75rem;
        text-decoration: none;
        color: #a2a7ac;
    }

    .menu-alternate-item .alt-drop-link {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        width: auto;
        padding: 0.75rem;
        text-decoration: none;
        color: #787d81;
    }

        .menu-alternate-item .alt-drop-link .icon {
            right: 0rem;
            position: relative;
            margin: auto;
            pointer-events: none;
            width: min(10vw, 18px);
            height: min(10vw, 18px);
        }

    .menu-alternate-item .alt-drop-link--col {
        display: inline-flex;
        flex-direction: column;
        width: auto;
    }

        .menu-alternate-item .alt-drop-link--col .icon {
            margin: 0;
        }

    .menu-alternate-item:hover {
        border-top: 0px solid transparent;
        border-bottom: 0px solid transparent;
        background-color: #bb052c;
    }

        .menu-alternate-item:hover .alt-link {
            color: #a2a7ac;
        }

        .menu-alternate-item:hover .menu-alternate-title {
            color: #f4f6f7;
        }

.menu-alternate-title {
    pointer-events: none;
    width: auto;
    padding: 0.75rem;
    text-decoration: none;
    color: #a2a7ac;
    gap: 1rem;
}

.menu-alternate-dropdown {
    display: none;
    height: 0;
    background-color: #1c1d20;
    overflow: hidden;
}

.menu-alternate-inner-item {
    display: flex;
    width: 100%;
    font-weight: normal;
    font-size: min(5vw, 1rem);
}

    .menu-alternate-inner-item a {
        color: #787d81;
        transition: color 0.2s ease-in-out;
    }

    .menu-alternate-inner-item:hover a {
        color: #ccd2d8;
    }

.inner-info-container {
    display: inline-flex;
    justify-content: left;
    width: auto;
    flex-direction: column;
}

.inner-info {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.5rem 0;
    color: #a2a7ac;
}

    .inner-info .icon {
        color: #bb052c;
    }

    .inner-info:last-child {
        padding-bottom: 1rem;
        border-bottom: 1px solid #313336;
    }

:root {
    --nav-height: 70px;
}

@media only screen and (min-width: 1000px) {
    .nav-set {
        transform: none !important;
    }
}

.main-nav-button {
    position: absolute;
    padding: 0.3rem;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    right: 0;
    left: 0;
    top: 5.9rem;
    bottom: 0;
    margin: auto;
    background-color: #282a2c;
    border-radius: 0;
    border-bottom: 1px solid #3f4144;
}

@media only screen and (min-width: 1000px) {
    .main-nav-button {
        display: none;
    }
}

.nav-button-container {
    position: relative;
    display: block;
    margin: 0 auto 0 0rem;
    height: 25px;
    width: 25px;
    padding: 0.2rem;
    border: 1px solid transparent;
    border-radius: 5px;
}

.nav-button-container--active .nav-button-bar:nth-child(2) {
    opacity: 0;
}

.nav-button-container--active .nav-button-bar:first-child {
    transform: rotate(45deg);
    transform-origin: center;
    top: -1px;
}

.nav-button-container--active .nav-button-bar:last-child {
    transform: rotate(-45deg);
    transform-origin: center;
    bottom: 1px;
}

.nav-button-bar {
    pointer-events: none;
    position: absolute;
    display: block;
    width: 25px;
    height: 2px;
    background-color: #787d81;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 0.1rem;
    transition: rotate, top, bottom, 0.2s ease-in-out;
}

    .nav-button-bar:first-child {
        top: -12px;
    }

    .nav-button-bar:last-child {
        bottom: -12px;
    }

#nav {
    position: relative;
    display: flex;
    top: 0;
    z-index: 4;
    position: fixed;
    width: 100%;
    height: var(--nav-height);
    background-color: #313336;
    transform: translateY(-100%);
}

@media only screen and (min-width: 1000px) {
    #nav {
        transform: translateY(0%);
    }
}

.nav-container {
    padding: 0;
    display: flex;
    align-items: center;
    width: 100%;
}

.image-brand {
    display: none;
    padding: 0.75rem;
}

    .image-brand img {
        display: block;
        width: 30px;
        height: auto;
    }

@media only screen and (min-width: 1000px) {
    .image-brand {
        display: block;
    }
}

.image-brand--alt {
    display: block;
    justify-content: center;
    margin: -20px auto 2rem auto;
}

    .image-brand--alt p {
        margin: 0.5rem 0 0 0;
        color: #787d81;
        font-size: min(5vw, 0.9rem);
    }

    .image-brand--alt img {
        margin: 0 auto;
        display: block;
        width: 40px;
        height: auto;
    }

.main-nav-links-container {
    margin: 0 auto;
    display: none;
    justify-content: space-between;
    gap: 0 0;
    align-items: center;
    width: auto;
    height: 100%;
}

@media only screen and (min-width: 1000px) {
    .main-nav-links-container {
        display: block;
    }
}

.main-nav-link-label {
    cursor: pointer;
    position: relative;
    padding: 0 1rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    width: auto;
    text-align: center;
    height: 100%;
    justify-content: center;
}

    .main-nav-link-label .main-nav-a {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        text-align: center;
        text-decoration: none;
        color: #ccd2d8;
        z-index: 2;
        display: block;
        margin: auto;
        transition: color 0.4s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
    }

    .main-nav-link-label::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: 0;
        height: 100%;
        opacity: 0;
        background-color: transparent;
        transition: width 0.4s;
        transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
    }

    .main-nav-link-label:hover .main-nav-a {
        color: #fff;
    }

    .main-nav-link-label:hover::after {
        opacity: 1;
        width: 100%;
        background-color: #bb052c;
    }

.main-nav-link-label--active .main-nav-a {
    color: #fff;
}

.main-nav-link-label--active::after {
    width: 100%;
    opacity: 1;
    border-bottom: 3px solid #bb052c;
    background-color: #282a2c;
    margin-bottom: 3px;
}

.nav-tool-options {
    display: inline-flex;
    align-items: center;
    margin: 0 0rem 0 auto;
    gap: 0.5rem;
    transform: translateY(58px);
}

@media only screen and (min-width: 1000px) {
    .nav-tool-options {
        transform: translateY(0);
    }
}

.social-media-icons {
    margin: 0 0rem 0 0;
    padding: 0.5rem 1rem;
    display: inline-flex;
    gap: 1rem;
    width: auto;
}

    .social-media-icons .main-nav-a {
        display: flex;
    }

        .social-media-icons .main-nav-a .icon {
            cursor: pointer;
            color: #ccd2d8;
            width: min(10vw, 14px);
            height: min(10vw, 14px);
            transition: color 0.2s ease-in-out;
        }

        .social-media-icons .main-nav-a:hover .icon {
            color: #bb052c;
        }

.main-nav-dropdown {
    position: absolute;
    z-index: 2;
    top: 85px;
    width: auto;
    height: auto;
    display: none;
    width: 180px;
    background-color: #313336;
    border-radius: 5px;
    padding: 2rem 0.75rem;
    border: 1px solid #3f4144;
    box-shadow: var(--shadow-elevation-high);
}

    .main-nav-dropdown::after {
        content: "";
        display: none;
        position: absolute;
        right: 0;
        left: 0;
        top: -9px;
        width: 15px;
        height: 15px;
        background-color: #313336;
        transform: rotate(45deg);
        margin: 0 auto;
        border-radius: 2px 0 0 0;
        border-width: 1px 0px 0px 1px;
        border-style: solid;
        border-color: #3f4144;
    }

    .main-nav-dropdown::before {
        position: absolute;
        margin: auto;
        right: 0;
        left: 0;
        top: -16px;
        content: "";
        display: block;
        width: 100%;
        height: 30px;
        background-color: transparent;
    }

.main-nav-dropdown--active {
    display: block;
}

.main-nav-dropdown-link {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: min(4vw, 0.9rem);
    border-bottom: 1px solid #3f4144;
}

    .main-nav-dropdown-link a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-align: left;
        width: 100%;
        color: #a2a7ac;
        text-decoration: none;
        transition: color 0.2s ease-in-out;
    }

        .main-nav-dropdown-link a .icon {
            width: min(10vw, 18px);
            height: min(10vw, 18px);
        }

    .main-nav-dropdown-link:hover a {
        color: #ccd2d8;
    }

.main-nav-login-handle {
    opacity: 0.7;
    display: flex;
    align-items: center;
}

.main-nav-login-title {
    margin: 0 0 0 auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    text-decoration: none;
    color: #ccd2d8;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: min(4vw, 0.7rem);
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
    border: 1px solid transparent;
}

    .main-nav-login-title .icon {
        width: min(10vw, 18px);
        height: min(10vw, 18px);
    }

    .main-nav-login-title:hover {
        text-decoration: none;
        color: #fff;
        background-color: #282a2c;
        border: 1px solid #3f4144;
    }

.lang-select {
    display: none;
}

.main-nav-language {
    display: block;
    margin: 0 1rem 0 0;
}

.lang-container {
    display: block;
    position: relative;
    width: 45px;
}

.lang-value {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
    color: #a2a7ac;
    font-size: min(4vw, 0.8rem);
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out;
}

    .lang-value img {
        pointer-events: none;
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .lang-value:hover {
        background-color: #282a2c;
        border: 1px solid #3f4144;
    }

.lang-list {
    z-index: 5;
    position: absolute;
    top: auto;
    right: 0;
    left: 0;
    width: 45px;
    margin: 5px auto 0 auto;
    display: none;
    background-color: #313336;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    border-radius: 5px;
    border: 1px solid #3f4144;
    box-shadow: var(--shadow-elevation-high);
}

    .lang-list::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #46edff;
        position: absolute;
        right: 0;
        left: 0;
        top: -0.7rem;
        opacity: 0;
    }

.lang-list-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #787d81;
    font-size: min(4vw, 0.8rem);
    padding: 0.3rem;
    border-bottom: 1px solid #3f4144;
    transition: color 0.2s ease-in-out;
}

    .lang-list-item img {
        pointer-events: none;
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .lang-list-item:hover {
        color: #ccd2d8;
    }

.container-nav-alternate {
    position: relative;
    position: fixed;
    gap: 0.75rem;
    width: 260px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    top: 0.75rem;
    right: 0;
    left: 0;
    background-color: #282a2c;
    padding: 2rem 0.75rem 3rem 0.75rem;
    z-index: 2;
    border-radius: 0;
    border: 1px solid #313336;
    transform: translateY(-85%);
    box-shadow: var(--shadow-elevation-high);
}

@media only screen and (min-width: 1300px) {
    .container-nav-alternate {
        display: none;
    }
}

.btn-nav-menu {
    position: absolute;
    z-index: 3;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 35px;
    background-color: transparent;
    border-width: 0 0px 0px 0px;
    border-color: #3f4144;
    border-style: solid;
    border-radius: 2px;
    transition: all 0.4s;
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
}

    .btn-nav-menu .icon {
        width: min(10vw, 20px);
        height: min(10vw, 20px);
        pointer-events: none;
    }

.btn-nav-menu-icon-container {
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 30px;
}

    .btn-nav-menu-icon-container:hover {
        background-color: #282a2c;
    }

    .btn-nav-menu-icon-container:active {
        background-color: #313336;
    }

.nav-link {
    opacity: 0.7;
    width: auto;
    display: flex;
    align-items: left;
    gap: 0.75rem;
    margin: 0rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #3f4144;
}

    .nav-link .icon {
        width: min(10vw, 20px);
        height: min(10vw, 20px);
    }

    .nav-link .icon--01 {
        color: #787d81;
    }

    .nav-link .icon--02 {
        color: #787d81;
    }

    .nav-link .icon--03 {
        color: #787d81;
    }

    .nav-link .icon--04 {
        color: #787d81;
    }

    .nav-link:hover {
        opacity: 1;
    }

        .nav-link:hover .icon {
            transition: color 0.5s;
            transition-timing-function: cubic-bezier(0.17, 0.67, 0.63, 1);
        }

        .nav-link:hover .icon--01 {
            color: #fff111;
        }

        .nav-link:hover .icon--02 {
            color: #46edff;
        }

        .nav-link:hover .icon--03 {
            color: #fc3186;
        }

        .nav-link:hover .icon--04 {
            color: #6320ee;
        }

.nav-link--active {
    opacity: 1;
}

    .nav-link--active .icon--01 {
        color: #fff111;
    }

    .nav-link--active .icon--02 {
        color: #46edff;
    }

    .nav-link--active .icon--03 {
        color: #fc3186;
    }

    .nav-link--active .icon--04 {
        color: #6320ee;
    }

.nav-link-label {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
}

#new-user {
    padding: 8rem 0 4rem 0;
    color: #a2a7ac;
    min-height: 700px;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1c1d20;
}

.form {
    box-sizing: border-box;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: #282a2c;
    padding: 0.75rem;
    border-radius: 2px;
    border: 1px solid #313336;
}

    .form h1 {
        margin: 3rem auto;
    }

    .form input {
        min-width: 200px;
        color: #a2a7ac;
        border-color: #3f4144;
        background-color: #313336;
    }

@media only screen and (min-width: 768px) {
    .form {
        flex-direction: row;
    }

        .form input {
            min-width: 450px;
        }

        .form .form-banner {
            max-width: 400px;
            margin-right: 0.3rem;
            width: 100%;
            height: auto;
            flex-direction: row;
        }

            .form .form-banner img {
                border-radius: 2px 0 0 2px;
                width: 100%;
                height: auto;
            }
}

@media only screen and (min-width: 320px) {
    .form input {
        min-width: 250px;
    }
}

@media only screen and (min-width: 400px) {
    .form input {
        min-width: 350px;
    }
}

@media only screen and (min-width: 576px) {
    .form input {
        min-width: 450px;
    }
}

.form-banner {
    overflow: hidden;
    position: relative;
    width: auto;
    display: flex;
    flex-direction: column;
    margin: -0.75rem -0.75rem -0.75rem -0.75rem;
    height: auto;
}

    .form-banner img {
        border-radius: 2px 2px 0 0;
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top;
        object-position: top;
        width: auto;
        height: 300px;
    }

.form-banner-header {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    height: 100%;
    justify-content: center;
}

    .form-banner-header h1 {
        color: #a2a7ac;
        display: flex;
        margin: auto;
        max-width: 200px;
    }

    .form-banner-header p {
        text-align: center;
        color: #ccd2d8;
        display: block;
        margin: auto;
        max-width: 300px;
    }

.form-banner-header-content {
    text-align: center;
    display: inline-flex;
    flex-direction: column;
}

.form-section label {
    display: block;
    margin: 1rem 0 0.4rem 0;
}

.form-footer {
    display: flex;
    width: 100%;
}

    .form-footer .btn {
        margin: 2rem 0 2rem 0;
    }
/*# sourceMappingURL=main.css.map */


.respuesta {
    border-bottom: 1px solid #6d6d6d;
    margin-bottom: 8px;
    height: 24px;
}


.lecture-container {
    margin: 20px;
    padding: 90px 75px;
    font-size: 1.23em;
    font-family: Avenir, sans-serif;
    background-color: #d2d2d2;
    border-radius: 10px;
    color: black;
    background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), radial-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 4px 4px, 8px 8px;
    background-position: 0 0, 1px 1px;
    line-height: 30px;
    text-align: justify;
}

/* Responsive: Ajuste en pantallas pequeñas */
@media (max-width: 600px) {
    .lecture-container {
        padding: 30px 20px;
        font-size: 1em;
        line-height: 24px;
    }
}