/* =========================================
   MIS AMARILLAS - AJUSTES GENERALES
   ========================================= */

html,
body,
#art-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* CABECERA AMARILLA */
.art-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #F8DD00 !important;
    background-image: none !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
}

/* =========================================
   CORRECCION PARA CELULAR
   ========================================= */

@media screen and (max-width: 767px) {

    html,
    body,
    #art-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .art-sheet,
    .art-sheet-body,
    .art-header,
    .art-header-inner,
    .art-layout-wrapper,
    .art-content-layout,
    .art-content-layout-row,
    .art-layout-cell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        left: auto !important;
        right: auto !important;

        float: none !important;
        box-sizing: border-box !important;
    }

    /* FRANJA AMARILLA A TODO EL ANCHO */
    .art-header {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 10px !important;

        background-color: #F8DD00 !important;
        background-image: none !important;

        overflow: hidden !important;
    }

    /* CONTENIDO INTERNO */
    .art-header-inner {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        transform: none !important;
    }

    /* LOGO */
    .art-logo {
        width: 100% !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        margin: 0 auto 10px auto !important;

        text-align: center !important;

        transform: none !important;
    }

    .art-logo img {
        display: block !important;

        width: auto !important;
        max-width: 220px !important;

        height: auto !important;

        margin: 0 auto !important;
    }

    /* COLUMNAS DEL ENCABEZADO */
    .art-header .art-content-layout,
    .art-header .art-content-layout-row {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .art-header .art-layout-cell {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        float: none !important;

        text-align: center !important;
    }

    /* TEXTOS */
    .art-header p,
    .art-header div,
    .art-header a {
        max-width: 100% !important;

        word-wrap: break-word !important;
        overflow-wrap: break-word !important;

        box-sizing: border-box !important;
    }

    /* IMAGENES */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* CAMPOS DEL BUSCADOR */
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* PRUEBA FUERTE - CORREGIR CABECERA DESPLAZADA */

body .art-header {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;

    background: #F8DD00 !important;

    box-sizing: border-box !important;
}

body .art-header-inner {
    position: relative !important;
    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

@media screen and (max-width: 767px) {

    body .art-header {
        position: relative !important;
        left: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;
        padding: 10px !important;

        transform: none !important;
    }

}

@media screen and (max-width: 767px) {
    body {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
}

body {
    border-top: 10px solid red !important;
}