body {
    min-height: 100%;
    font-family:  'Lato', sans-serif;
    font-size: 1.2rem;
}

.convencion {
    align-items: center;
    border-bottom: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: flex;
    height: 12px;
    margin: 2px;
    width: 12px;
    background-color: red
}

.logo {
    grid-area: logo;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100px;
    background-color: #01512C;
}

.logo_uext {
    width: 50%;
    max-width: 300px;
	padding: 1rem;
}

.titulo {
    width: 80%;
    margin: auto
}

.seccion_conv {
    width: 80%;
    margin: auto;
    background-color: #f9f7f7;
    border-radius: 3px;
    box-shadow: 5px 5px 5px #ebebeb;
}

.titulo_conv {
    width: 80%;
    margin: auto;
    text-align: center;
}

.magnetic {
    position: fixed;
    top: 86%;
    right: -4px;
    transition: margin-right .4s;
    z-index: 800 !important;
    width: 90px !important;
    border: none;
    border-radius: 3px;
    background-color: #c2def5;
    box-shadow: 5px 5px 5px #727171;
    cursor: pointer;
    display: none;
}

.log {
    width: 98%;
    display: flex;
    justify-content: right;
    height: 100%;
}

.facultad {
    grid-area: facultad;
    margin: auto;
    text-align: center;
}

.planestudios {
    grid-area: planestudios;
    margin: auto;
    text-align: center;
}

.convenciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto-fill, 80px);
    grid-row-gap: 5px;
    grid-column-gap: 2px;
    text-align: center;
    width: 90%;
    margin: auto;
    grid-gap: 15px;
}

.titconv {
    font-size: .8125rem;
    font-weight: 900;
    line-height: 1rem;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    color: #31464d;
}

.p_conv {
    font-size: 60%;
    color: black;
	margin: 5px 10px;
}

.h1fac {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 900;
    margin: 5px 0;
    color: #01512C;
}

    .h1fac:after {
        content: '';
        display: block;
        height: 5px;
        width: 7rem;
        position: relative;
        left: 0;
        right: 0;
        margin: 10px auto;
        background-color: #BABC00;
    }

.h2plan {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.5rem;
    margin: 1rem 0 2rem 0;
    color: #31464d;
}

.itemconv {
    border-radius: 3px;
}

.dot {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: inline-block;
}

/*elemento contonedor de la malla curricular, desde css se controla toda la visualización resposive */
.grid-container {
    margin: auto;
    width: 90%;
    display: grid;
    grid-gap: 5px;
    height: auto;
    grid-template-areas:
        "seccion1 seccion2 seccion3 seccion4 seccion5 seccion6 seccion7 seccion8 seccion9 seccion10";
}

.NomMat {
    font-size: 60%;
	padding: 5px;
}

.NomMatOptativa {
    font-size: 60%;
    margin-top: -60%;
}

.grid-container > * {
    text-align: center;
    background-color: #f9f7f7;
    padding: 15px 5px;
    touch-action: none;
    box-shadow: 3px 3px 3px #ebebeb;
}

.materia {
    min-width: 90px;
    max-width: 90px;
    height: auto;
    min-height: 100px;
    background-color: transparent;
    margin: auto;
    border-radius: 3px;
    font-style: italic;
    display: grid;
    align-items: center;
    justify-content: center;
    transition: 0.05s all ease-in-out;
    box-shadow: 3px 3px 5px #a6a6a6;
    color: white;
    cursor: grab
}

    .materia:hover {
        transform: scale(1.05);
    }

.seccion1 {
    grid-area: seccion1;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion2 {
    grid-area: seccion2;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion3 {
    grid-area: seccion3;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion4 {
    grid-area: seccion4;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion5 {
    grid-area: seccion5;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion6 {
    grid-area: seccion6;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion7 {
    grid-area: seccion7;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion8 {
    grid-area: seccion8;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion9 {
    grid-area: seccion9;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

.seccion10 {
    grid-area: seccion10;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 100px);
    grid-row-gap: .5em;
    grid-column-gap: 1em;
    min-width: 10%;
    min-height: 100%;
}

@media(min-width:200px) {

    .NomMat {
        font-size: 50%;
    }

    .grid-container {
        grid-template: "seccion1 seccion2" auto
            "seccion3 seccion4" auto
            "seccion5 seccion6" auto
            "seccion7 seccion8" auto
            "seccion9 seccion10"auto
    }

    .seccion1 {
        grid-area: seccion1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion2 {
        grid-area: seccion2;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion3 {
        grid-area: seccion3;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion4 {
        grid-area: seccion4;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion5 {
        grid-area: seccion5;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion6 {
        grid-area: seccion6;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion7 {
        grid-area: seccion7;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion8 {
        grid-area: seccion8;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion9 {
        grid-area: seccion9;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion10 {
        grid-area: seccion10;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }
}

@media(min-width:600px) {

    .grid-container {
        grid-template: "seccion1 seccion2" auto
            "seccion3 seccion4" auto
            "seccion5 seccion6" auto
            "seccion7 seccion8" auto
            "seccion9 seccion10"auto
    }

    .seccion1 {
        grid-area: seccion1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion2 {
        grid-area: seccion2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion3 {
        grid-area: seccion3;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion4 {
        grid-area: seccion4;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion5 {
        grid-area: seccion5;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion6 {
        grid-area: seccion6;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion7 {
        grid-area: seccion7;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion8 {
        grid-area: seccion8;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion9 {
        grid-area: seccion9;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .seccion10 {
        grid-area: seccion10;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: 5px;
        grid-column-gap: 2px;
    }

    .NomMat {
        font-size: 60%;
    }

}


@media(min-width:1100px) {
    .magnetic {
        display: block;
    }

    .materia {
        min-width: 90px;
        max-width: 90px;
        height: auto;
        min-height: 100px;
        background-color: transparent;
        margin: auto;
        border-radius: 3px;
        font-style: italic;
        display: grid;
        align-items: center;
        justify-content: center;
        transition: 0.05s all ease-in-out;
        box-shadow: 5px 5px 5px #727171;
        color: white;
        cursor: grab
    }

        .materia:hover {
            transform: scale(1.05);
        }

    .NomMat {
        font-size: 60%;
    }

    .grid-container {
        grid-template: "seccion1 seccion2 seccion3 seccion4 seccion5 seccion6 seccion7 seccion8 seccion9 seccion10"
    }

    .seccion1 {
        grid-area: seccion1;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion2 {
        grid-area: seccion2;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion3 {
        grid-area: seccion3;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion4 {
        grid-area: seccion4;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion5 {
        grid-area: seccion5;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion6 {
        grid-area: seccion6;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion7 {
        grid-area: seccion7;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion8 {
        grid-area: seccion8;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion9 {
        grid-area: seccion9;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }

    .seccion10 {
        grid-area: seccion10;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto-fill, 100px);
        grid-row-gap: .5em;
        grid-column-gap: m;
    }
	
		.convenciones {	
    	grid-template-columns: repeat(9, 1fr);
	}
}


.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    padding: 1em;
}

.gu-hide {
    display: none !important;
}

.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.gu-transit {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

.gu-mirror {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

.titsemestre {
    font-size: 80%;
}

.spncreds {
    font-size: 27px;
    font-weight: 700;
    color: #000000;
}

.spnfooter {
    font-size: 70%;
}


.counter {
    font-family: 'Muli', sans-serif;
    text-align: center;
    width: 60px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


    .counter .counter-value {
        color: #333;
        background-color: #fff;
        font-size: 25px;
        font-weight: 700;
        padding: 5px 5px 5px;
        border-radius: 0 8px 0 0;
        display: block;
		font-family: 'Lato';
		box-shadow: 2px 1px 1px #cfc3c3;
    }

    .counter h3 {
        color: #fff;
        background-color: #086b3d;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        padding: 5px 5px;
        margin: 0 -10px;
        border-radius: 0 0 4px 4px;
        position: relative;
		font-family: 'Lato';
    }

        .counter h3:before,
        .counter h3:after {
            content: "";
            background: linear-gradient(to right bottom,transparent 49%,#01481a 50%);
            width: 10px;
            height: 10px;
            position: absolute;
            top: -10px;
            left: 0;
        }

        .counter h3:after {
            transform: rotateY(180deg);
            left: auto;
            right: 0;
        }

.indicador {
    display: grid;
    cursor: not-allowed;
}

.centrar_indicador {
    display: table-cell;
    vertical-align: middle;
}
/*.ind_optativa {
    display: block;
    width: 25px;
    height: 25px;
    position: relative;
    top: -35px;
    right: -50%;
    margin: auto;
    font-size: 15px;
    color: rgb(0, 0, 0);
    background: rgb(255 250 100);
    border-radius: 50%;
}

    .ind_optativa::after {
        content: "★";
        font-style: normal;
    }*/

.ubique {
    cursor: pointer;
}

.hr_punteado {
    border-top: dotted 2px;
}