@font-face {
    font-family: 'avenirheavy';
    src: url('/Content/fonts//Avenir-Heavy.woff2') format('woff2'), url('/Content/fonts/Avenir-Heavy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avenirStdBlack';
    src: url('/Content/fonts/AvenirLTStd-Black.woff2') format('woff2'), url('/Content/fonts/AvenirLTStd-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avenirStdBook';
    src: url('/Content/fonts/AvenirLTStd-Book.woff2') format('woff2'), url('/Content/fonts/AvenirLTStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bebas_neueregular';
    src: url('/Content/fonts/bebasneue-regular-webfont.woff2') format('woff2'), url('/Content/fonts/bebasneue-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.dx-theme-generic-typography {
    font-size: 16px !important;
    line-height: 1.5;
}

p {
    margin-bottom: 1.6rem;
}

.grid {
    padding: 0px;
    max-width: 100%;
    overflow: hidden;
}

.row {
    padding: 0;
    overflow: hidden;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.col {
    padding: 0;
    overflow: hidden;
    position: relative;
}

a {
    color: #ffffff !important;
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

.card {
    overflow: hidden;
    border: 0;
    border-radius: 0px;
    transition: all .2s ease-in-out;
    background-color: #000000;
    color: #ffffff;
}

a:hover .card {
    transform: scale(1.05, 1.05);
}

.seccion1 .card {
    height: calc(100vh/3);
}

.seccion2 .card {
    height: 50vh;
}

.seccion3 > .card {
    height: 100vh;
}

@media (max-width: 959px) {
    .seccion1,
    .seccion2 {
        height: 25vh;
    }

        .seccion1 .divIngresoLoginGroup {
            width: calc(100%/3);
            float: left;
        }

        .seccion1 .card {
            width: 100%;
            height: 25vh;
            float: left;
        }

        .seccion1 #postular-sawu {
            width: calc(100%/3);
        }

        .seccion2 .card {
            width: 50%;
            height: 25vh;
            float: left;
        }

    .seccion3 {
        height: 50vh;
    }

        .seccion3 > .card {
            width: 100%;
            height: 50vh;
        }
}

@media (max-width: 576px) {
    .seccion1 {
        height: 40vh;
    }

    .seccion2 {
        height: 20vh;
    }

        .seccion1 .card, .seccion2 .card {
            width: 50%;
            height: 20vh;
        }
}

@media (min-width: 992px) {
    .seccion1.col-lg-3,
    .seccion2.col-lg-3 {
        width: 23%;
    }

    .seccion3.col-lg-6 {
        width: 54%;
    }
}

@media (min-width: 1200px) {
    .seccion1.col-lg-3,
    .seccion2.col-lg-3 {
        width: 20%;
    }

    .seccion3.col-lg-6 {
        width: 60%;
    }
}

.seccion1 {
    overflow: initial;
}

    .seccion1 .card-body {
        position: relative;
        padding: 0;
    }

        .seccion1 .card-body .titulo {
            position: absolute;
            left: 50%;
            top: 48%;
            transform: translateX(-50%);
            text-align: center;
        }

            .seccion1 .card-body .titulo:hover {
                cursor: pointer;
            }

    .seccion1 .divIngresoLoginGroup {
        position: relative;
    }

    .seccion1 .divLogin {
        position: absolute;
        z-index: 99999;
        top: 0;
        left: 0;
        width: 100%;
        /*opacity: 0;*/
        /*visibility: hidden;*/
    }

        .seccion1 .divLogin .visible {
            opacity: 1;
            visibility: visible;
            transform: translateX(100%);
        }

        .seccion1 .divLogin .card-body {
            border: 1px solid #ffffff;
            margin: 16px;
            border-radius: 16px;
        }

        .seccion1 .divLogin .form-control {
            font-size: 1.5rem;
            font-family: 'avenirheavy';
        }

@media (max-width: 959px) {
    .seccion1 .divLogin {
        height: 25vh;
    }

        .seccion1 .divLogin .visible {
            transform: translateY(100%);
        }
}

.seccion1 .divLogin .div_icono_close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 999999;
}

    .seccion1 .divLogin .div_icono_close:hover {
        cursor: pointer;
    }

.seccion1 .divLogin .login-div {
    position: absolute;
    /*left: 50%;*/
    top: 10%;
    /*transform: translate(-50%, -43%);*/
    text-align: center;
    width: 95%;
}

    .seccion1 .divLogin .login-div .email {
        width: calc(100% - 40px);
        margin: auto;
    }

        .seccion1 .divLogin .login-div .email .input-group-text {
            padding: 0.375rem 0.65rem !important;
        }

        .seccion1 .divLogin .login-div .email .icono_email {
            width: 20px;
        }

    .seccion1 .divLogin .login-div .password .icono_lock {
        width: 16px;
    }

    .seccion1 .divLogin .login-div .password {
        margin-top: 8px !important;
        width: calc(100% - 40px);
        margin: auto;
    }

    .seccion1 .divLogin .login-div .loginOptions {
        margin-top: 8px !important;
        height: 16px;
        width: calc(100% - 40px);
        margin: auto;
    }

        .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar {
            font-size: 11px;
            float: left;
            margin: 0;
        }

            .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar #checkRecordar {
                height: 11px;
                width: 11px;
            }

        .seccion1 .divLogin .login-div .loginOptions .olvidoPass {
            font-size: 11px;
            float: right;
            margin: 0;
            margin-top: 4px !important;
        }

    .seccion1 .divLogin .login-div .loginBtn {
        margin-top: 12px;
    }

        .seccion1 .divLogin .login-div .loginBtn:hover {
            cursor: pointer;
        }

@media (min-width: 1900px) {
    .seccion1 .divLogin .login-div .email {
        width: calc(100% - 60px);
    }

    .seccion1 .divLogin .login-div .password {
        width: calc(100% - 60px);
    }

    .seccion1 .divLogin .login-div .loginOptions {
        width: calc(100% - 60px);
    }

        .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar {
            font-size: 12px;
        }

            .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar #checkRecordar {
                height: 12px;
                width: 12px;
            }

        .seccion1 .divLogin .login-div .loginOptions .olvidoPass {
            font-size: 12px;
        }

    .seccion1 .divLogin .login-div .loginBtn {
        margin-top: 14px;
    }
}

@media (min-width: 1201px) and (max-width: 1899px) {
    .seccion1 .divLogin .login-div .email {
        width: calc(100% - 28px);
    }

    .seccion1 .divLogin .login-div .password {
        width: calc(100% - 28px);
    }

    .seccion1 .divLogin .login-div .loginOptions {
        width: calc(100% - 28px);
    }

        .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar {
            font-size: 10px;
        }

            .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar #checkRecordar {
                height: 10px;
                width: 10px;
            }

        .seccion1 .divLogin .login-div .loginOptions .olvidoPass {
            font-size: 10px;
        }
}

@media (min-width: 900px) and (max-width: 1200px) {
    .seccion1 .divLogin .login-div {
        width: 100%;
    }

        .seccion1 .divLogin .login-div .email {
            width: calc(100% - 28px);
        }

        .seccion1 .divLogin .login-div .password {
            width: calc(100% - 28px);
        }

        .seccion1 .divLogin .login-div .loginOptions {
            width: calc(100% - 28px);
        }

            .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar {
                font-size: 10px;
            }

                .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar #checkRecordar {
                    height: 10px;
                    width: 10px;
                }

            .seccion1 .divLogin .login-div .loginOptions .olvidoPass {
                font-size: 10px;
            }

        .seccion1 .divLogin .login-div .loginBtn {
            margin-top: 18px;
        }
}

@media (max-width: 900px) {
    .seccion1 .divLogin .login-div {
        width: 100%;
    }

        .seccion1 .divLogin .login-div .email {
            width: calc(100% - 28px);
        }

        .seccion1 .divLogin .login-div .password {
            width: calc(100% - 28px);
        }

        .seccion1 .divLogin .login-div .loginOptions {
            width: calc(100% - 28px);
        }

            .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar {
                font-size: 10px;
            }

                .seccion1 .divLogin .login-div .loginOptions .divCheckRecordar #checkRecordar {
                    height: 10px;
                    width: 10px;
                }

            .seccion1 .divLogin .login-div .loginOptions .olvidoPass {
                font-size: 10px;
            }

        .seccion1 .divLogin .login-div .loginBtn {
            margin-top: 18px;
        }
}

.seccion1 .card-body {
    position: relative;
    padding: 0;
}

    .seccion1 .card-body .menu {
        position: absolute;
        width: 60%;
        left: 50%;
        top: 60%;
        transform: translate(-50%,-60%);
        padding: 0;
    }

.seccion3 .card-body {
    position: relative;
    padding: 0;
}

    .seccion3 .card-body .textos {
        position: absolute;
        width: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

.card .card-title {
    text-transform: uppercase;
}

.seccion1 .card .title1 {
    font-family: 'bebas_neueregular';
    margin-bottom: 0px;
    font-size: 1.4em;
}

    .seccion1 .card .title1 a {
        font-family: 'bebas_neueregular';
    }

.seccion1 .card .title2 {
    font-family: 'avenirheavy';
    margin-bottom: 0px;
    font-size: 1.6em;
}

    .seccion1 .card .title2 a {
        font-family: 'avenirheavy';
    }

.seccion1 .card .menu-item {
    font-family: 'avenirheavy';
    margin-bottom: 8px;
    font-size: 15px;
    list-style-type: none;
}

    .seccion2 .card .menu-item a {
        font-family: 'avenirheavy';
    }

    .seccion2 .card .menu-item:hover {
        list-style-type: disc;
    }

    .seccion2 .card .menu-item.current {
        list-style-type: disc;
    }

.seccion3 .card .card-title {
    font-family: 'avenirheavy';
    margin-bottom: 8px;
}

@media (min-width: 1900px) {
    .seccion1 .card .title1 {
        font-size: 1.9em;
    }

    .seccion1 .card .title2 {
        font-size: 2.2em;
    }

    .seccion2 .card .menu-item {
        font-size: 1.5em;
    }

    .seccion3 .card-body .textos {
        width: auto;
    }
}

@media (min-width: 1400px) and (max-width: 1899px) {
    .seccion2 .card .menu-item {
        font-size: 1.1em;
    }

    .seccion3 .card-body .textos {
        width: 55%;
    }
}

@media (max-width: 900px) {
    .seccion2 .card .menu-item {
        font-size: 1em;
    }
}

.logo-sawu-img {
    width: 55%;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
}

@media (max-width: 900px) {
    .logo-sawu-img {
        width: 35%;
    }
}

.seccion1 > div > .card > .card-body,
.seccion1 > .card > .card-body {
    background-size: auto 100% !important;
    background-position: 50% 50% !important;
}

.seccion3 .card {
    background-size: auto 100%;
    background-position: 50% 50%;
}

.seccion3 > .card > .card-body {
    background-size: auto 100% !important;
    background-position: 50% 50% !important;
}

@media (max-width: 900px) {
    .seccion3 > .card > .card-body {
        background-size: 100% auto !important;
    }

    .seccion3 .card {
        background-size: auto 100%;
        background-position: 50% 50%;
    }
}

.seccion1 .card .card-body {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}

.seccion1 .card {
    background-size: auto 100%;
    background-position: 50% 50%;
}

.seccion3 > .card > .card-body {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3));
}

.btn-group-fab {
    position: fixed;
    width: 50px;
    height: auto;
    right: 20px;
    bottom: 20px;
}

    .btn-group-fab .btn {
        background: #ffffff;
        position: absolute;
        border-radius: 50%;
        display: block;
        bottom: 0;
        right: 50%;
        width: 50px;
        height: 50px;
        margin: 0;
        margin-right: -50%;
        padding: 0;
        z-index: 99999;
    }

    .btn-group-fab.oculto {
        visibility: hidden;
    }

html:not([data-scroll='0']) .btn-group-fab.oculto {
    visibility: inherit;
}

html {
    height: inherit !important;
}


/*Scrollbar */

/* width */
.container ::-webkit-scrollbar {
    width: 16px;
    background: transparent;
}

/* Track */
.container ::-webkit-scrollbar-track {
    border-radius: 5px;
}

/* Handle */
.container ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,1);
    border-radius: 4px;
    border: 1px solid #ffffff;
}

    /* Handle on hover */
    .container ::-webkit-scrollbar-thumb:hover {
        cursor: pointer;
        background: rgba(0,0,0,0.8);
    }

/* Buttons */
.container ::-webkit-scrollbar-button:single-button {
    background-color: transparent;
    display: block;
    border-style: solid;
    height: 13px;
    width: 16px;
}
    /* Up */
    .container ::-webkit-scrollbar-button:single-button:vertical:decrement {
        border-width: 0 8px 8px 8px;
        border-color: transparent transparent #ffffff transparent;
    }

        .container ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
            border-color: transparent transparent #cccccc transparent;
            cursor: pointer;
        }
    /* Down */
    .container ::-webkit-scrollbar-button:single-button:vertical:increment {
        border-width: 8px 8px 0 8px;
        border-color: #ffffff transparent transparent transparent;
    }

.container ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    border-color: #cccccc transparent transparent transparent;
    cursor: pointer;
}

/* Fin Scrollbar */