/* Specific */


   .image_wrapper img {
    width: fit-content;
    max-height: 384px;
}


   .title h1 {
    margin-bottom: 0;
}

.subtitle,
.uptitle {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 1.15rem;
    text-transform: uppercase;
    margin-top: 0.1em;
}

.subtitle {
    margin-bottom: 2rem;

}



header.principal {

    margin-bottom: 2rem;
    margin-top: 2rem;
    position: relative;
    text-align: center;
}

header.principal>a {
    display: inline-block;
}

header.principal svg.logo {

    width: 300px;
    height: 50px;

    display: block;

}

header.principal .user_container {
    display: inline-block;
    top: 0;
    left: 0;
    position: absolute;

}



/* Table cookies */
.table {
    font-size: 90%;
    border-spacing: 1px;
    margin-top: 2rem;
    margin-bottom: 2rem;


    line-height: 1.2;
    border-collapse: separate;
}

.table th.w_10 {
    width: 10%;
}

.table th.w_20 {
    width: 20%;
}

.table th.w_30 {
    width: 30%;
}

.table th.w_40 {
    width: 30%;
}

.table td,
.table th {
    border-bottom: var(--color-dark) dotted 1px;
    border-right: var(--color-dark) dotted 1px;
    padding: 0.5rem;
}

.table th {
    font-family: "Montserrat", sans-serif;
    font-weight: var(--montserrat-normal);
    text-transform: uppercase;

    -webkit-user-select: none;
    user-select: none;
    color: var(--color-dark);


}

.table tr td:last-child,
.table th:last-child {
    border-right: none;
}

table:not(.simple) tr:last-child td {
    border-bottom: none;
}

/* Home */
main#home h1 {
    text-align: center;
}

main#home h2 {
    font-size: 1.1rem;
    margin-top: 0;
}

main#home .columns-2>div {
    padding-bottom: 2rem;
}



main#home a.enter {
    text-align: center;
}

main#home a.enter .curso {
    display: flex;
    position: relative;
    margin-bottom: .5rem;
    overflow: hidden;
    border-radius: 3px;
}

main#home a.enter .descripcion {

    font-size: 1.05rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0;
    padding: 2rem;
    background: #333e4700;
    color: #ffffff00;
   
}

main#home a.enter:hover .descripcion {

    background: #333e47dd;
    color: #ffffffff;
}
main#home img {
    width: 100%;

}


main#home a.enter .descripcion, main#home img {
    transition: all .4s ease-in-out;
}
main#home a.enter:hover img {
   /*  transform: scale(1.2);*/ 
   filter: grayscale(.4) contrast(1.1); 
}




/* Log in */

main#presentacion h1 {
    text-align: center;
}


main#presentacion #content.columns-2 {
    display: grid;
    grid-template-columns: 67% auto;

}



main#presentacion #resumen section {
    margin-top: 3rem;
}

main#presentacion #resumen img {
    width: 100%;
    max-width: 120px;
    border-radius: 3px;
}

main#presentacion #resumen #empezar a {
    width: 100%;
    font-size: 1.15rem;
    max-width: 400px;
    margin: auto;
    display: block;
}

main#presentacion #resumen h2 {
    color: var(--color-corporative);
    font-size: 1.3rem;
    font-weight: 700;
}

main#presentacion #resumen section {
    margin-top: 0;
    margin-bottom: 2rem;
}


main#presentacion #impartido strong {
    display: block;
}

main#presentacion #impartido .cargo {

    font-style: italic;
    font-size: 1.04rem;
    line-height: 1.3;
}

main#presentacion #impartido .columns-2 {
    display: grid;
    grid-template-columns: 125px auto;

}

main#presentacion #impartido .columns-2>div:nth-child(1) {
    padding-right: 0;
}

main#presentacion #impartido .columns-2>div:nth-child(2) {
    padding-left: 1rem ;
}

main#presentacion .preparacion {
    font-family: "Montserrat";
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
}

/********************************
CURSO PASO
/********************************/
/******************************************************************************
    INICIO (VIDEOS DE AYUDA)
    ******************************************************************************/
main#curso_paso h2 {
    text-align: center;

}

main#curso_paso .columns-2 {
    margin-top: 3rem;
    min-height: calc(100vh - 240px);
    display: grid;
    grid-template-columns: 350px auto;
}

main#curso_paso * {
    text-decoration: none;
}


main#curso_paso a:hover svg {
    transform: scale(1.2);
}




main#curso_paso li {
    margin: 0;
}

div.video {
    display: inline-flex;
    align-items: center;
}

main#curso_paso h1 {
    text-align: center;
    margin-bottom: 1rem;
}

main#curso_paso div.nivel {
    margin-bottom: .5rem;

    margin-bottom: 1rem;
}


main#curso_paso a.name svg {
    transition: transform .25s ease-in-out;
}



main#curso_paso div.nivel ul ul a {

    pointer-events: none;
    font-size: .9rem;

}

main#curso_paso div.nivel>ul>li>ul div.block {
    color: var(--color-dark-medium);
    background-color: var(--color-white);
    border-radius: 0;

    border-left: 1px solid var(--color-dark-medium);
    border-right: 1px solid var(--color-dark-medium);
}

main#curso_paso div.block {
    display: flex;
    align-items: center;
    padding: 0;

    background-color: var(--color-corporative);
    position: relative;
    border-radius: 5px;
    -webkit-user-select: none;
    user-select: none;

}

main#curso_paso ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-family: "Montserrat", sans-serif;
    max-width: 500px;
    margin: auto;

}


main#curso_paso ul ul ul .block {
    padding-left: 1rem;
}

main#curso_paso ul ul div.block div.video {

    position: relative;
    margin-right: .7rem;


}



main#curso_paso ul .name {
    text-transform: none;
    font-weight: 500;
    line-height: 1.6rem;
    font-size: 1rem;
}

main#curso_paso ul ul div.block.info .name {
    margin-right: 1.7rem;
}

main#curso_paso div.block a {
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

main#curso_paso div.block .name {
    text-transform: uppercase;
    font-weight: 600;
}



main#curso_paso div.block a.name {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem;
}

main#curso_paso div.block a.name:hover>div {
    color: var(--color-white);
}

main#curso_paso div.block .more {


    display: flex;
    align-items: center;
}





main#curso_paso div.block .info {
    position: absolute;
    right: 0;
    font-size: 1.6rem;
}



/* Opened */
main#curso_paso ul li ul svg {
    opacity: 0;
    width: 1.1rem;
    height: 0;
    transition: opacity .1s ease-in-out, transform .2s ease-in-out, height .2s ease-in-out;
}

main#curso_paso ul li.opened ul svg {
    opacity: 1;
    height: 1.1rem;
}


main#curso_paso div.block span {
    opacity: 0;
    padding: 0;
    line-height: 0;
    display: flex;
    align-items: center;
    transition: line-height .2s ease-in-out, padding .2s ease-in-out, opacity .2s ease-in-out;

}

main#curso_paso .opened div.block span {
    padding: 1rem 0;
    opacity: 1;
    line-height: 1.4;
}


main#curso_paso ul li.opened div.more svg {
    transform: rotate(180deg);
}


main#curso_paso div.nivel>ul>li.opened>ul a {

    width: 100%;
    height: auto;

    pointer-events: all;
    opacity: 1;


    border-bottom-width: 0;
    border-bottom-width: 1px;
}

main#curso_paso div.nivel>ul>li.opened>ul .block {
    border-bottom: 1px dotted var(--color-dark-medium);
}

main#curso_paso div.nivel>ul>li.opened>ul>li:last-child .block {
    border-bottom: 0;
}




main#curso_paso ul li.opened>div.block {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}



main#curso_paso div.nivel>ul>li.opened>ul>li:last-child::after {
    content: "";
    display: block;
    height: 1rem;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: 1px solid var(--color-dark-medium);
    border-left: 1px solid var(--color-dark-medium);
    border-right: 1px solid var(--color-dark-medium);
}

/* Selected */

main#curso_paso div.nivel>ul>li>ul li.sel {
    margin-top: -1px;
}

main#curso_paso div.nivel>ul>li>ul li.sel>div>a {
    pointer-events: none;
    cursor: pointer;
    color: var(--color-white);
}



main#curso_paso div.nivel>ul>li>ul li.sel>div.block {
    background-color: var(--color-dark-medium);
}

/* Video */
main#curso_paso h1 {
    text-align: left;
}

main#curso_paso .subtitle {
    text-transform: uppercase;
}

main#curso_paso #video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
}

main#curso_paso #video iframe {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

main#curso_paso .capitulo a *,
main#curso_paso a.video * {
    pointer-events: none;
}



main#curso_paso div.nivel>ul>li.opened>ul li.sel>div>a svg.svg-icon {

    color: var(--color-white);
}


main#curso_paso .image {
   display:flex;
    align-items: center;
    justify-content: center;
}
main#curso_paso .image img{
    /*width:100%;
    height: 100%;    

    object-fit: contain;
    max-height: 2000px;*/
    max-width: 100%;

}

@media (max-width: 1000px) {
    main#presentacion #impartido .columns-2 {
        display: grid;
        grid-template-columns: 100% ;

    }

    main#presentacion #impartido .columns-2>div:nth-child(2) {
        padding-left: 0;

    }



    main#curso_paso div#menu {
        position: fixed;
        z-index: 1000;
        background: #fff;
        height: 100vh;
        top: 2rem;
        left: 0;
        padding: 1.5rem;
        opacity: 0;
        pointer-events: none;
    }

    main#curso_paso div#menu.visible {
        opacity: 1;
        pointer-events: all;
    }

    main#curso_paso .columns-2 {
        grid-template-columns: 100%;
    }
}

@media (max-width: 800px) {


    main#home .columns-2 {

        grid-template-columns: 50% 50%;
    }

    main#home .columns-2.margin>div:nth-child(odd) {

        padding-right: 2rem;
    }

    main#home .columns-2.margin>div:nth-child(even) {

        padding-left: 2rem;
    }

    main#presentacion #content.columns-2 {
        display: grid;
        grid-template-columns: 100% ;

    }

    main#presentacion  .columns-2>div:nth-child(2) {
        padding-left: 0;

    }

    main#presentacion #impartido .columns-2 {
        display: grid;
        grid-template-columns: 125px auto;

    }

    main#presentacion #impartido .columns-2>div:nth-child(2) {
        padding-left: 1rem;
    }


    main#home .columns-2 {

        grid-template-columns: 100%;
    }

    main#home .columns-2.margin>div:nth-child(odd) {

        padding-right: 0;
    }

    main#home .columns-2.margin>div:nth-child(even) {

        padding-left: 0;
    }


}