/*Queries*/
@media only screen and (max-width: 320px) {
    /* body {
        background-color: skyblue;
    }

        body::before {
            content: 'skyblu';
        }*/

    .columna-drag > div {
        width: 19.5%;
    }

    .horario-data-primary {
        width: 99%;
    }

    #secondpane {
        display: none;
    }

    .alerta div {
        width: 100%;
    }

    .alerta .personaje-mensaje {
        width: 10%;
    }

    .alerta .texto-mensaje {
        width: 85%;
        display: inline-block;
    }

    .secciones-landing img {
        text-align: center;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 25% !important;
    }
}

@media only screen and (min-width: 360px) {
    /* body {
        background-color: green;
    }

        body::before {
            content: 'green';
        }*/

    .columna-drag > div {
        width: 19.5%;
    }

    .horario-data-primary {
        width: 99%;
    }

    .alerta div {
        width: 80%;
    }

    .alerta .personaje-mensaje {
        width: 10%;
    }

    .alerta .texto-mensaje {
        width: 85%;
        display: inline-block;
    }


    #secondpane {
        display: none;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 20% !important;
    }

    .side1 {
        text-align: center;
        width: 100%;
    }

        .side1 img {
        }

    .side2 {
        width: 90%;
        border-left: none;
        border-top: 1px solid black;
    }

        .side2 span {
            display: inline-block;
            margin: 0.5em;
        }

            .side2 span img {
            }

                .side2 span img figcaption {
                    display: block;
                    width: 100%;
                }
}

@media only screen and (min-width: 420px) {
    /* body {
        background-color: yellow;
    }

        body::before {
            content: 'yellow';
        }*/

    .columna-drag > div {
        width: 19.5%;
    }

    .horario-data-primary {
        width: 99%;
    }

    .alerta div {
        width: 80%;
    }

    .alerta .personaje-mensaje {
        width: 10%;
    }

    .alerta .texto-mensaje {
        width: 85%;
        display: inline-block;
    }

    #secondpane {
        display: none;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 25% !important;
    }
}

@media only screen and (min-width: 480px) {
    /* body {
        background-color: red;
    }

        body::before {
            content: 'red';
        }*/

    .columna-drag > div {
        width: 19.5%;
    }

    .horario-data-primary {
        width: 99%;
    }

    #secondpane {
        display: none;
    }

    .alerta div {
        width: 80%;
    }

    .alerta .personaje-mensaje {
        width: 10%;
    }

    .alerta .texto-mensaje {
        width: 85%;
        display: inline-block;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 5% !important;
    }
}

@media only screen and (max-width: 600px) {
    /*body {
        background-color: orange;
    }

        body::before {
            content: 'orange';
        }*/

    .columna-drag > div {
        width: 19.1%;
    }

    .horario-data-primary {
        width: 99%;
    }

    .pd-lista {
        padding: 0 20px 20px 40px;
    }

    #start-home .fecha-matricula h3 {
        color: #2b81bb;
    }

    #start-home ul {
        margin-top: 0%;
    }

    img.responsive-img, video.responsive-video {
        max-width: 80%;
    }

    .side2 {
        padding: 1em 0;
    }

    h1.done {
        font-size: 3.2em;
    }

    .side2 img {
        max-width: 30px;
    }

    .name-sistema {
        font-size: 0.8em;
    }

    header#header-main {
        height: 140px;
    }

    #show_notifications {
        top: -10px;
    }

    .horario-data-primary .up-number-priority {
        border: none;
        padding: 0;
        display: block;
        height: auto;
        font-size: 2em;
        line-height: 45px;
        text-align: center;
    }

    .seleccionar-horario input {
        font-size: 13px;
        width: 100%;
    }

    .dropdown-button.profile-btn {
        margin-top: 0;
        text-align: center;
        display: block;
    }

    .horario-data-primary .profile-btn p i {
        margin: 0;
        float: none !important;
    }

    .menu-horarios.active {
        width: 200px !important;
    }

    .box-name-profesor .name-profesor span {
        font-size: 13px;
    }

    .box-name-profesor i {
        position: absolute;
        right: -25px;
        top: 0;
    }

    .modal {
        max-height: 90%;
        width: 95%;
        margin-left: 10px;
    }

    #buscador-cursos .input-field input[type="text"] {
        width: 96%;
    }

    #modal-extraacademicos .modal-content,
    #modal-electivos .modal-content {
        padding-top: 70px !important;
    }

    .buscador-modals {
        height: 270px;
    }

    #modal-electivos .data-tab-cursos table thead {
        width: 130px;
    }

    #matricula_horarios_creados .horario-new-data .btn-add {
        width: 100%;
    }

    #matricula_horarios_creados .horario-new-data {
        height: 93px;
    }

        #matricula_horarios_creados .horario-new-data .btn-add a {
            font-size: 0.6em;
            padding: 5px;
            text-align: center;
            position: relative;
            height: 91px;
            top: 0;
        }

    #div1::before {
        right: -40px;
    }

    #wrapper {
        width: 370px;
        left: 38px;
    }
}

@media only screen and (min-width: 600px) {
    /*body {
        background-color: orange;
    }

        body::before {
            content: 'orange';
        }*/

    .columna-drag > div {
        width: 19.1%;
    }

    .horario-data-primary {
        width: 99%;
    }

    #secondpane {
        display: none;
    }

    .side1 {
        text-align: center;
        width: 100%;
    }

        .side1 img {
        }

    .side2 {
        width: 100%;
        border-left: none;
        border-top: 1px solid black;
    }

        .side2 span {
            display: inline-block;
            margin: 0.5em;
        }

            .side2 span img {
            }

                .side2 span img figcaption {
                    display: block;
                    width: 100%;
                }
}

@media only screen and (min-width: 690px) and (max-width: 779px) {
    /* body {
        background-color: purple;
    }

        body::before {
            content: 'purple';
        }*/

    .columna-drag > div {
        width: 19.1%;
    }

    .horario-data-primary {
        width: 99%;
    }

    #secondpane {
        display: none;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 5% !important;
    }

    .side1 {
        text-align: center;
        width: 100%;
    }

        .side1 img {
        }

    .side2 {
        width: 100%;
        border-left: none;
        border-top: 1px solid black;
    }

        .side2 span {
            display: inline-block;
            margin: 0.5em;
        }

            .side2 span img {
            }

                .side2 span img figcaption {
                    display: block;
                    width: 100%;
                }
}

@media only screen and (min-width: 780px) {
    /* body {
        background-color: blue;
    }

        body::before {
            content: 'blue';
        }*/

    .columna-drag > div {
        width: 19.5%;
    }

    .horario-data-primary {
        width: 99%;
    }

    #secondpane {
        display: none;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 10% !important;
    }

    .side1 {
        width: 65%;
    }

        .side1 img {
        }

    .side2 {
        width: 40%;
        border-top: none;
        border-left: 1px solid black;
    }

        .side2 span {
            display: block;
            margin: 0.5em;
        }

            .side2 span img {
            }

                .side2 span img figcaption {
                    display: block;
                    width: 100%;
                }
}

@media only screen and (min-width: 810px) {
    /* body {
        background-color: maroon;
    }

        body::before {
            content: 'maroon';
        }*/

    ; .columna-drag > div {
        width: 19.5%;
    }

    .horario-data-primary {
        width: 99%;
    }

    #secondpane {
        display: block;
    }

    .alerta div {
        width: 60%;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 5% !important;
    }

    .side1 {
        width: 65%;
    }

        .side1 img {
        }

    .side2 {
        width: 30%;
        border-top: none;
        border-left: 1px solid black;
    }

        .side2 span {
            display: block;
            margin: 0.5em;
        }

            .side2 span img {
            }

                .side2 span img figcaption {
                    display: block;
                    width: 100%;
                }
}

@media only screen and (min-width: 900px) {
    /* body {
        background-color: skyblue;
    }

        body::before {
            content: '#990099';
        }*/

    .columna-drag > div {
        width: 19.5%;
    }

    .horario-data-primary {
        width: 99%;
    }

    #secondpane {
        display: block;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 5% !important;
    }

    .side1 {
        width: 65%;
    }

        .side1 img {
        }

    .side2 {
        width: 30%;
        border-top: none;
        border-left: 1px solid black;
    }

        .side2 span {
            display: block;
            margin: 0.5em;
        }

            .side2 span img {
            }

                .side2 span img figcaption {
                    display: block;
                    width: 100%;
                }
}

@media only screen and (min-width: 1200px) {
    /* body {
        background-color: peru;
    }

        body::before {
            content: '#330033';
        }*/

    .columna-drag > div {
        width: 19.5%;
    }

    .horario-data-primary {
        width: 99%;
    }

    #secondpane {
        display: block;
    }

    .box-imagen-horarios {
        text-align: center;
        padding: 0 5% !important;
    }

    .side1 {
        width: 65%;
    }

        .side1 img {
        }

    .side2 {
        width: 30%;
        border-top: none;
        border-left: 1px solid black;
    }

        .side2 span {
            display: block;
            margin: 0.5em;
        }

            .side2 span img {
            }

                .side2 span img figcaption {
                    display: block;
                    width: 100%;
                }
}