:root {
    /* generated with javascript    --window-Width: 0px;*/
    --font-size-device-639-portrait: .85em;
    --left-mask-val: -15%;
    /*Manitas 1874 de with y da -10px*/
    --margin-manitas: -10px;

}

@media only screen and (min-device-width: 360px) and (max-device-width: 480px) {
    div.mask.d-flex.align-items-center {
        position: relative;
        left: var(--left-mask-val);
    }

    .p-rubro {
        line-height: normal;
    }
}


.d-md-block {
    display: block !important;
}

.mask {
    margin: 8% 0;
    display: inline-block;
}

@media only screen and (min-device-width: 320px) and (max-width:480px) {

    /*.custom-control-gsc-width {width: 100%!important}*/

    p.hidden,
    div.hidden,
    span.hidden {
        display: none;
    }

    .p-2 {
        /*padding: .3rem;*/
    }

    .div-logo-cjf {
        top: -.35rem;
    }

    .div-logo-cjf span.fc {
        margin-left: -10px
    }

    .div-logo-UIRMJL h2 {
        padding-right: 0px !important;
    }

    .tit-movil {
        text-align: right;
    }


    span.breadcrumb-segundo {
        padding-left: unset;
    }

    div.container.btn-principales {
        margin-left: -3%;

    }

    .tit-sec {}

    section h2.tit-sec {
        /*font-size: revert;*/
        font-size: larger;
        display: block;
        position: relative;
        top: .4em;
        padding: 0 .2em;
        text-align: left;
    }

    section h2.tit-sec i.fa-2x,
    section h2.tit-sec i.fas,
    section h2.tit-sec span.fa-stack {
        font-size: 1em;
    }

    .ag-courses_box {
        display: contents;
    }

    .ag-courses_item {
        flex-basis: calc(33.33333% - 30px);
        margin: 0 0px 17px
    }

    .ag-courses-item_title {
        min-height: 75px
    }

    .ag-courses-item_link {
        padding: 10px 15px;
    }
}

@media only screen and (min-device-width: 480px) {
    .ag-courses_item {
        flex-basis: calc(50% - 30px);
    }
}

@media only screen and (min-width: 639px) and (max-width: 896px) {
    div.ag-courses-item_title {
        font-size: calc(var(--font-size-device-639-portrait) + .15em);
    }

}

@media only screen and (max-width: 639px) {
    div.ag-courses-item_title {
        font-size: var(--font-size-device-639-portrait);
    }
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:portrait) {

    div.mask.d-flex.align-items-center {
        margin: 30% auto;
    }

    .course-info h2 {
        font-size: 1.2em;
        line-height: normal;
        margin: 20px 0;
    }

    .course-info {
        padding: 5px;
        position: relative;
        width: 60%;
        right: 8px;
    }

    .progress-container {
        position: absolute;
        top: 30px;
        right: 3px;
        text-align: right;
        width: 4em;
    }
}