/* G E N E R A L E S
--------------------------------------*/
body{
    font-family: "Poppins", sans-serif;
}

a{
    color: inherit;
    text-decoration: none;
}

.uppercase{
    text-transform: uppercase;
}

.visible-lg{
    display: flex;
}

.visible-mac{
    display: none;
}

.flex-flow{
    justify-content: center;
    flex-flow: row;
}

.flex-column{
    flex-direction: column;
}

.relative{
    position: relative;
}

.flex-column-aqui{
    flex-direction: column;
}


/* Fonts */
.h1{
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.titles{
    font-size: 35px;
    font-weight: 700;
}

.subtitles{
    font-family: "Questrial", sans-serif;
    font-size: 30px;
    font-weight: normal;
}

.encabezados{
    font-size: 37px;
    font-weight: 700;
}

.text{
    font-size: 20px;
    font-weight: 700;
}

.semibold{
    font-weight: 600;
}

.medium{
    font-weight: 500;
}

.bold{
    font-weight: 700;
}

.questrial{
    font-family: "Questrial", sans-serif;
}

.poppins{
    font-family: "Poppins", sans-serif;
}
/* End Fonts */


/* Colors */
.c-blue{
    color: #174879;
}

.c-purple{
    color: #674692;
}

.blue{
    color: #4496B0;
}

.white{
    color: white;
}

.transparent{
    color: transparent;
}
/* End Colors */


/* Botones */
.btn-primary{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #674692;
    border: 1px solid #674692;
    padding: 10px 30px;
}

.btn-primary:hover{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #4496B0;
    border: 1px solid #4496B0;
    padding: 10px 30px;
}

.btn-primary-multi-modal{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #674692;
    border: 1px solid #674692;
    padding: 10px 30px;
    border-radius: 100px;
}

.btn-primary-multi-modal:hover{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #367487;
    border: 1px solid #367487;
    padding: 10px 30px;
    border-radius: 100px;
}

.btn-secondary{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #674692;
    border: 1px solid #674692;
    border-radius: 100px;
    padding: 10px 30px;
    display: flex;
    justify-content: center;
}

.btn-secondary:hover{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #4496B0;
    border: 1px solid #4496B0;
    border-radius: 100px;
    padding: 10px 30px;
    display: flex;
    justify-content: center;
}

.btn-help{
    color: #674692;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: transparent;
    border: 3px solid #674692;
    border-radius: 100px;
    padding: 10px 25px;
    display: flex;
    justify-content: center;
}

.btn-help:hover{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #4496B0;
    border: 3px solid #4496B0;
    border-radius: 100px;
    padding: 10px 25px;
    display: flex;
    justify-content: center;
}

.btn-leer{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #6d8fc6;
    border: 1px solid #6d8fc6;
    padding: 10px 30px;
    border-radius: 100px;
    width: 100%;
}

.btn-leer:hover{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #4496B0;
    border: 1px solid #4496B0;
    padding: 10px 30px;
    border-radius: 100px;
    width: 100%;
}

.btn-pdf{
    color: #674692;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: white;
    border: 3px solid #674692;
    border-radius: 100px;
    padding: 10px 25px;
    display: flex;
    justify-content: center;
}

.btn-pdf:hover{
    color: white;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: #4496B0;
    border: 3px solid #4496B0;
    border-radius: 100px;
    padding: 10px 25px;
    display: flex;
    justify-content: center;
}

.w-100{
    width: 100%;
}
/* End Botones */


/* Margins + Paddings + Gap */
.gp-1{
    gap: 1vw;
}

.gp-2{
    gap: 2vw;
}

.gp-3{
    gap: 3vw;
}

.gp-4{
    gap: 4vw;
}

.gp-5{
    gap: 5vw;
}

.py-10{
    padding-top: 10vw;
    padding-bottom: 10vw;
}

.px-nav{
    padding-right: 3rem;
    padding-left: 3rem;
}

.pd-0{
    padding: 0;
}
/* End Margins + Paddings + Gap */

.embed .surface-title .title-container #portrait[data-v-e8ad8800] {
    max-height: 100% !important;
}

.embed .surface-title .title-container #portrait[data-v-e8ad8800] {
    max-height: none !important;
}

.rounded-lg {
    max-height: 100% !important;
}

/* Nuevos */
.mt_1 {
    margin-top: 1rem;
}

.mt_2 {
    margin-top: 2rem;
}

.mt_3 {
    margin-top: 3rem;
}

.mt_4 {
    margin-top: 4rem;
}

.mt_5 {
    margin-top: 5rem;
}

.card-cursos {
    padding: 20px;
    margin: auto 10px;
    position: relative;
    background-color: #FDF6ED;
}
/* End Nuevos */


/* N A V
--------------------------------------*/
#breadcrumb{
    display: flex;
}

#logoMb{
    display: none;
}

.align-items-contain{
    align-items: baseline;
}

.align-items-nav{
    align-items: center;
}

.navbar-toggler{
    border: none;
    text-decoration: none !important;
    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.navbar{
    border-bottom: 1px solid #B6B6B6;
}

.nav-link{
    font-size: 16px;
}

.nb-logo{
    width: 18vw;
}

.breadcrumb{
    font-size: 13px;

}

.icons-nb{
    width: 1.5vw;
}


.nav-underline .nav-link{
    color: #174879;
    font-family: "Questrial", sans-serif;
    font-weight: normal;
}

.nav-underline .nav-link.active, .nav-underline .show>.nav-link{
    font-weight: normal;
    color: #174879;
    border-bottom: 2px solid #674692;
}


.dropbtn {
    background-color: transparent;
    color: inherit;
    font-size: 16px;
    border: none;
    text-transform: uppercase;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5;
}

.dropdown-content a {
    color: black;
    padding: 7px 18px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #EFEBFF;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown-item:hover {background-color: #EFEBFF !important;}

/* F O O T E R
--------------------------------------*/
.py-footer{
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.f-logo{
    width: 9vw;
}

.f-links{
    font-weight: 700;
    text-decoration: underline;
}

.p-footer{
    font-family: "Questrial", sans-serif;
    font-size: 13px;
}

.icon-footer{
    width: 7vw;
}


/* B I E N V E N I D A
--------------------------------------*/
.bg-blue{
    background-color: #4496B0;
}

.w-medicina{
    width: 15vw;
    margin: 20px auto;
}

.p-bienvenida{
    font-family: "Questrial", sans-serif;
    font-size: 35px;
    font-weight: normal;
    letter-spacing: 0.2px;
}


/* E N - V I V O
--------------------------------------*/
.bg-blue-dos{
    background-color: #73BBC5;
}

.lg-medicina{
    width: 20vw;
}

.card-vivo{
    width: 390px;
    height: 365px;
    padding: 20px;
    margin: 20px 10px;
    background-color: #FFF9F2;
}

.title-vivo{
    font-size: 25px;
    font-weight: 700;
}

.sub-vivo{
    color: #80A0CF;
    font-size: 29px;
    font-weight: 700;
    line-height: 30px;
}

.purple{
    color: #674692;
}

.box-grabacion{
    background-color: #FFF6EC;
    padding: 20px 40px;
}

.p-bullets{
    font-family: "Questrial", sans-serif;
}


/* C L A S E S - G R A B A D A S (EN VIVO)
--------------------------------------*/
.justify-content-cards{
    justify-content: start;
}

.justify-content-modulos{
    justify-content: start;
}

.bg-clases{
    background-image: url(./../../assets/images/clases/bg-header.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

.bg-modulo-uno{
    background-color: #DAEAEF;
}

.bg-modulo-dos{
    background-color: #B4D5DF;
}

.card-clases{
    width: 390px;
    /* height: 280px; */
    margin: auto 10px;
    background-color: #FDF6ED;
    padding: 20px;
    position: relative;
}

.box-clases{
    /* height: 155px; */
    background-color: white;
    padding: 20px;
}

.card-etiquetas{
    font-size: 17px;
    font-weight: 700;
}

.card-titulos{
    font-size: 21px;
    font-weight: 700;
    white-space: nowrap;
}

.card-titulos-sm{
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.col-lg-md2{
    width: 24%;
    margin-right: 15px;
}

.progress{
    margin-top: 30px;
}

.progress-bar{
    background-color: #674692;

}

.ps-cards{
    padding-left: 2.3vw;
}

.bg-audios{
    width: 100%;
}

.alert-success{
    color: white;
    font-size: 23px;
    font-weight: 700;
    padding: 20px;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    border-radius: 0;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-color: #4496b0d4;
}

.hr-1{
    height: 15px;
    border-right: 1px solid black !important;
}

.br-vimeo{
    border: 2px solid black;
}

.modal-header-close{
    position: absolute;
    right: 0;
    z-index: 10;
}

.w-procesando{
    width: 10vw;
}

.modal-dialog-sm{
    max-width: 500px !important;
}

.video-num{
    color: rgb(23, 63, 110, 50%);
}

.box-videos{
    text-align: center;
    background-color: #799ACB;
    padding: 10px 35px;
    display: flex;
    align-items: center;
}

/* M O D A L S
--------------------------------------*/
.txt-clase{
    color: #B7B2B2;
    font-weight: 700;
    font-size: 20px;
}

.p-acciones{
    font-size: 12px;
}

.br-1{
    top: 0;
    right: 0;
    height: 15px;
    position: absolute;
    border-right: 1px solid black;
}

.material-symbols-outlined-none {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.title-escuchar{
    color: white;
    font-size: 46px;
    font-weight: 700;
}

.title-recuerda{
    color: white;
    font-size: 40px;
    font-weight: 700;
}

.modal-header{
    border-bottom: none;
    align-items: baseline;
}

.modal-dialog{
    max-width: 860px;
}

.modal-content-aqua{
    background-color: #4496B0;
    border: none;
}

.btn-close {
    opacity: 100%;
    border: none;
    text-decoration: none !important;
    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background-image: url(./../../assets/images/cross.png);
}

.modal-title{
    font-size: 27px !important;
    line-height: 31px;
}

.modal-dialog-lg{
    max-width: 60%;
}

.prettyprint {
    max-width: 500px;
    overflow-x: scroll;
}

.prettyprint::-webkit-scrollbar {
    width: 6px;
}

.prettyprint::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.prettyprint::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}


/* F O R O
--------------------------------------*/
.justify-content-foro{
    justify-content: start;
}


/* B I B L I O T E C A
--------------------------------------*/
.p-biblioteca{
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.card{
    border: none;
}

.card-title{
    font-weight: 600;
    font-size: 24px;
}

.card-text{
    color: #858585;
    font-family: "Questrial", sans-serif;
    font-size: 16px;
}

.card-subtitle{
    color: #BDBDBD;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.card-a{
    color: #23A6F0;
    font-family: "Questrial", sans-serif;
    font-size: 14px;
}

.card-biblioteca{
    width: 25rem;
    padding: 0 20px;
}

.bg-white{
    background-color: white;
}

.h2-interiores{
    font-size: 50px;
    font-weight: 700;
}

.p-interiores{
    font-size: 25px;
    font-weight: 700;
}

.card-color{
    /* width: 25rem; */
    padding: 20px;
    background-color: #FDF6ED;
}

.card-aprende{
    width: 18rem;
}

.tema{
    font-size: 19px;
    font-weight: 700;
}

.clase{
    color: #173F6E;
    font-size: 16px;
    font-weight: 700;
    line-height: 25.5px;
}

.card-description{
    color: inherit;
    font-size: 15px;
}

.publicacion{
    color: #A9A9A9;
    font-size: 19px;
    font-weight: 400;
    text-align: center;
}

.descripcion{
    font-size: 19px;
    font-weight: 400;
    line-height: 28.5px;
}

.cita{
    color: #173F6E;
    font-size: 27px;
    font-weight: 500;
    text-align: center;
}

.consultado{
    color: #64A9BD;
    font-size: 18px;
    font-weight: 600;
}

.img-artic{
    width: 40%;
}


@media only screen and (min-width: 1px) and (max-width: 600px){
    .me-0-sm{
        margin-right: 0 !important;
    }

    .mb-3-sm{
        margin-bottom: 1rem;
    }

    .px-5-sm {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-nav{
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .py-0-sm{
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-bottom-0{
        padding-bottom: 0 !important;
    }

    .flex-sm{
        display: flex;
        flex-direction: column;
    }

    .t-center-sm{
        text-align: center;
    }

    .visible-lg {
        display: none;
    }

    /* Fonts */
    .h1{
        font-size: 25px;
        font-weight: 700;
    }

    .titles{
        font-size: 20px;
        font-weight: 700;
    }

    .subtitles{
        font-family: "Questrial", sans-serif;
        font-size: 18px;
        font-weight: normal;
    }

    .encabezados{
        font-size: 30px;
        font-weight: 700;
    }

    .text{
        font-size: 20px;
        font-weight: 700;
    }

    .bold{
        font-weight: 700;
    }

    .fs-12-sm{
        font-size: 12px !important;
    }
    /* End Fonts */


    /* Nuevos */
    .mt_1_sm {
        margin-top: 1rem !important;
    }
    /* End Nuevos */


    /* N A V
    --------------------------------------*/
    #navegacion{
        display: none;
    }

    #breadcrumb{
        display: none;
    }

    #logoMb{
        display: flex;
    }

    .nb-logo {
        width: 35vw;
    }

    .align-items-contain{
        align-items: center;
    }

    .align-items-nav{
        align-items: flex-start;
    }

    .logo-sm{
        display: none;
    }

    /* B I E N V E N I D A
    --------------------------------------*/
    .bg-blue{
        background-color: #4496B0;
    }

    .w-medicina{
        width: 40vw;
    }

    .p-bienvenida{
        font-family: "Questrial", sans-serif;
        font-size: 18px;
        font-weight: normal;
    }

    /* E N - V I V O
    --------------------------------------*/
    .lg-medicina{
        width: 50vw;
    }

    .card-vivo{
        width: 420px;
        height: 365px;
        padding: 20px;
        margin: 30px auto;
        background-color: #FFF9F2;
    }

    .title-vivo{
        font-size: 25px;
        font-weight: 700;
    }

    .sub-vivo{
        color: #80A0CF;
        font-size: 20px;
        font-weight: 700;
    }

    /* C L A S E S - G R A B A D A S
    --------------------------------------*/
    .justify-content-cards {
        justify-content: center;
    }

    .justify-content-modulos{
        justify-content: center;
    }

    .flex-column-aqui{
        flex-direction: row;
    }

    .card-clases{
        height: auto !important;
        background-color: #FDF6ED;
        padding: 20px;
        margin-bottom: 30px !important;
    }

    .card-titulos {
        font-size: 16px;
        font-weight: 700;
        /* white-space: nowrap; */
    }

    .col-lg-md2 {
        width: 100%;
        margin-right: 0;
    }

    .progress{
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .ps-cards {
        justify-content: center;
        padding-left: initial;
    }

    .box-clases {
        height: auto;
        background-color: white;
        padding: 20px;
    }

    .hr-1 {
        height: 15px;
        padding-right: 5px;
        padding-left: 5px;
        border-right: 1px solid black !important;
    }

    .w-procesando {
        width: 25vw;
    }

    .box-videos {
        margin: 20px auto;
        width: 100%;
        text-align: center;
        background-color: #799ACB;
        padding: 10px 35px;
        display: block;
        align-items: center;
    }


    /* M O D A L S
    --------------------------------------*/
    .title-escuchar {
        color: white;
        font-size: 25px;
        font-weight: 700;
    }

    .modal-dialog-lg {
        max-width: 100%;
    }


    /* F O R O
    --------------------------------------*/
    .justify-content-foro{
        justify-content: center;
    }


    /* B I B L I O T E C A
    --------------------------------------*/
    .p-biblioteca {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.2px;
    }

    .card-biblioteca{
        width: 100%;
    }

    .h2-interiores {
        font-size: 30px;
        font-weight: 700;
        margin-bottom: 0 !important;
    }

    .p-interiores {
        font-size: 18px;
        font-weight: 700;
    }

    .card-color{
        width: 100%;
        padding: 20px;
        background-color: #FDF6ED;
    }

    .card-aprende{
        width: 100%;
    }

    .cita {
        color: #173F6E;
        font-size: 20px;
        font-weight: 500;
        text-align: center;
    }

    .descripcion {
        font-size: 16px;
        font-weight: 400;
        line-height: 28.5px;
    }

    .img-artic {
        width: 100%;
    }

    /* F O O T E R
    --------------------------------------*/
    .icon-footer {
        width: 20vw;
    }

    .f-logo {
        width: 40vw;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 770px) {
    /* Nuevos */
    .mt_1_md {
        margin-top: 1rem !important;
    }
    
    .mt_2_md {
        margin-top: 2rem !important;
    }
    
    .mt_3_md {
        margin-top: 3rem !important;
    }
    
    .mt_4_md {
        margin-top: 4rem !important;
    }
    
    .mt_5_md {
        margin-top: 5rem !important;
    }
    /* End Nuevos */
}

@media only screen and (min-width: 820px) and (max-width: 825px) {
    /* Nuevos */
    .mt_1_md {
        margin-top: 1rem !important;
    }
    
    .mt_2_md {
        margin-top: 2rem !important;
    }
    
    .mt_3_md {
        margin-top: 3rem !important;
    }
    
    .mt_4_md {
        margin-top: 4rem !important;
    }
    
    .mt_5_md {
        margin-top: 5rem !important;
    }
    /* End Nuevos */
}


@media only screen and (min-width: 1200px) and (max-width: 1399px){
    .visible-mac{
        display: flex;
    }

    /* Margins + Paddings + Gap */
    .gp-2-mac{
        gap: 10px !important;
    }

    .gp-18{
        gap: 18px;
    }

    .gp-4{
        gap: 2vw;
    }

    .px-nav{
        padding-right: 1rem;
        padding-left: 1rem;
    }
    /* End Margins + Paddings + Gap */

    .flex-flow{
        justify-content: start;
        flex-flow: wrap;
        gap: 1vw;
    }

    /* N A V
    --------------------------------------*/
    .align-items-contain{
        align-items: baseline !important;
    }


    /* C L A S E S - G R A B A D A S (EN VIVO)
    --------------------------------------*/
    .justify-content-cards{
        justify-content: start;
    }

    .col-lg-3{
        width: 30%;
    }

    .col-lg-md2{
        width: 24%;
        margin-right: 0px;
    }

    .card-clases{
        width: 348px !important;
        /* height: 280px; */
        margin: auto 10px;
        background-color: #FDF6ED;
        padding: 20px;
    }

    .card-etiquetas{
        font-size: 15px;
        font-weight: 700;
    }

    .card-titulos-sm {
        font-size: 17px;
        font-weight: 700;
        white-space: nowrap;
    }


    /* M O D A L S
    --------------------------------------*/


    /* F O R O
    --------------------------------------*/
    .btn-help {
        color: #674692;
        font-family: "Questrial", sans-serif;
        font-size: 12px;
        font-weight: 400;
        background-color: transparent;
        border: 3px solid #674692;
        border-radius: 100px;
        padding: 10px 19px;
        display: flex;
        justify-content: center;
    }

    .btn-help:hover{
        color: white;
        font-family: "Questrial", sans-serif;
        font-size: 12px;
        font-weight: 400;
        background-color: #4496B0;
        border: 3px solid #4496B0;
        border-radius: 100px;
        padding: 10px 19px;
        display: flex;
        justify-content: center;
    }
}




@media only screen and (min-width: 1400px) and (max-width: 1900px) {
    /* Margins + Paddings + Gap */
    .gp-2-mac{
        gap: 10px !important;
    }

    .gp-18{
        gap: 18px;
    }
    /* End Margins + Paddings + Gap */


    /* N A V
    --------------------------------------*/
    .align-items-contain{
        align-items: baseline !important;
    }


    /* C L A S E S - G R A B A D A S (EN VIVO)
    --------------------------------------*/
    .justify-content-cards{
        justify-content: start;
    }

    .col-lg-md2{
        width: 24%;
        margin-right: 0px;
    }


    /* F O R O
    --------------------------------------*/
}

@media (max-width: 1400px) {
    /* C L A S E S - G R A B A D A S (EN VIVO)
    --------------------------------------*/
    .card-clases{
        width: 414px;
        /* height: 280px; */
        margin: auto 10px;
        background-color: #FDF6ED;
        padding: 20px;
    }


    /* M O D A L S
    --------------------------------------*/


    /* F O R O
    --------------------------------------*/
}

@media (max-width: 1440px) {
    /* B I B L I O T E C A
    --------------------------------------*/
    .card-color {
        /* width: 20rem; */
        padding: 0 20px;
        background-color: #FDF6ED;
    }

    .tema {
        font-size: 18px;
        font-weight: 700;
    }

    .btn-help {
        color: #674692;
        font-family: "Questrial", sans-serif;
        font-size: 13px;
        font-weight: 400;
        background-color: transparent;
        border: 3px solid #674692;
        border-radius: 100px;
        padding: 10px 19px;
        display: flex;
        justify-content: center;
    }

    .btn-help:hover{
        color: white;
        font-family: "Questrial", sans-serif;
        font-size: 13px;
        font-weight: 400;
        background-color: #4496B0;
        border: 3px solid #4496B0;
        border-radius: 100px;
        padding: 10px 19px;
        display: flex;
        justify-content: center;
    }

}