/* =========================================================
   ASHBORNMU - DISEÑO RESPONSIVE
   ========================================================= */

/* Imágenes nunca deben desbordar */
img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 991px) {

    #container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    #content {
        width: 100%;
    }

    .header-info-container {
        width: 100%;
    }

    .header-info {
        width: 100%;
    }

    .webengine-mu-logo {
        max-width: 90%;
        height: auto;
    }

}


/* =========================================================
   CELULARES
   ========================================================= */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 14px;
    }


    /* -----------------------------------------------------
       CONTENEDOR PRINCIPAL
       ----------------------------------------------------- */

    #container {
        width: 100%;
        padding: 0 10px;
    }

    #content {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    /* -----------------------------------------------------
       COLUMNAS BOOTSTRAP
       En celular todas pasan a ocupar 100%
       ----------------------------------------------------- */

    #content .col-xs-8,
    #content .col-xs-4 {
        width: 100%;
        float: none;
        padding-left: 5px;
        padding-right: 5px;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    #header {
        width: 100%;
        text-align: center;
    }

    .webengine-mu-logo {
        max-width: 85%;
        height: auto;
    }


    /* -----------------------------------------------------
       BARRA SUPERIOR
       ----------------------------------------------------- */

    .global-top-bar {
        width: 100%;
    }

    .global-top-bar-content {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }


    /* -----------------------------------------------------
       INFORMACIÓN SUPERIOR DEL SERVIDOR
       ----------------------------------------------------- */

    .header-info-container {
        width: 100%;
    }

    .header-info {
        width: 100%;
    }

    .header-info-block {
        width: 100%;
    }


    /* -----------------------------------------------------
       NOTICIAS
       ----------------------------------------------------- */

    .home-news-block {
        width: 100%;
        margin-bottom: 15px;
    }

    .home-news-block-article {
        width: 100%;
    }

    .home-news-block-article-type {
        font-size: 12px;
    }

    .home-news-block-article-title {
        font-size: 13px;
    }

    .home-news-block-article-date {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       PANELES
       ----------------------------------------------------- */

    .panel-sidebar {
        width: 100%;
        margin-bottom: 15px;
    }

    .panel-body {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       TABLAS
       ----------------------------------------------------- */

    .table {
        width: 100%;
        max-width: 100%;
        table-layout: auto;
    }

    .table th,
    .table td {
        word-break: break-word;
    }


    /* -----------------------------------------------------
       RANKINGS
       ----------------------------------------------------- */

    .panel-sidebar table {
        font-size: 12px;
    }

    .panel-sidebar table th,
    .panel-sidebar table td {
        padding: 6px 4px;
    }


    /* -----------------------------------------------------
       EVENTOS
       ----------------------------------------------------- */

    .panel-sidebar-events {
        width: 100%;
    }

    .panel-sidebar-events table {
        width: 100%;
    }


    /* -----------------------------------------------------
       SERVER INFO
       ----------------------------------------------------- */

    .panel-sidebar .table td {
        vertical-align: middle;
    }


    /* -----------------------------------------------------
       LOGIN
       ----------------------------------------------------- */

    input.form-control {
        max-width: 100%;
    }

    .btn {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       BANNERS
       ----------------------------------------------------- */

    .sidebar-banner {
        width: 100%;
        margin-bottom: 15px;
    }

    .sidebar-banner img {
        width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer {
        width: 100%;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       EVITAR DESBORDE DE TEXTOS
       ----------------------------------------------------- */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    td,
    th,
    span,
    a {
        overflow-wrap: break-word;
    }

}