@media (max-width: 767px) {

    body {padding-top: 70px;}
    .navbar {min-height: 70px;}
    .logo_ppal {max-height: 80px; color: #DE2A29}

    .navbar-header-xs, .navbar-collapse-xs {margin-right: -15px; margin-left: -15px; background-color: #DE2A29; border-bottom: solid 1px white; color: #222; font-family: 'Lato', sans-serif; position: fixed; width: 100%; height: 70px; min-height: 70px;}

    /* rojo #DE2A29 */
    /* amarillo #F6CD1B */

    .navbar-header-menu-xs {margin-right: -15px; margin-left: -15px; background-color: #F6CD1B; border-bottom: solid 1px white; font-size: 14px; color: #222; font-family: 'Lato', sans-serif; position: fixed; width: 100%; margin-top: 70px;}
    .navbar-header-xs table {width: 100%;}
    .navbar-header-xs > table > tbody > tr > td {text-align: center;}
    .navbar-header-xs a, .navbar-header-xs a:active, .navbar-header-xs a:focus {color: #fff;}
    .navbar-collapse-xs:before,.navbar-collapse-xs:after,.navbar-header-xs:before,.navbar-header-xs:after {display: table; content: " ";}
    .navbar-collapse-xs:after,.navbar-header-xs:after {clear: both;}
    .navbar-inverse-xs {background-color: #000; border-color: #080808;}
    .navbar-inverse-xs .navbar-brand {color: #999;}
    .navbar-inverse-xs .navbar-brand:hover,.navbar-inverse-xs .navbar-brand:focus {color: #fff; background-color: transparent;}
    .navbar-inverse-xs .navbar-text {color: #999;}
    .navbar-inverse-xs .navbar-nav-xs > li > a {color: #fff;}
    .navbar-nav-xs > li > a {color: #222;}
    .navbar-inverse-xs .navbar-nav-xs > li > a:hover,.navbar-inverse-xs .navbar-nav-xs > li > a:focus {color: #fff;background-color: transparent;}
    .navbar-inverse-xs .navbar-nav-xs > .active > a,.navbar-inverse-xs .navbar-nav-xs > .active > a:hover,.navbar-inverse-xs .navbar-nav-xs > .active > a:focus {color: #fff}
    .navbar-inverse-xs .navbar-nav-xs > .disabled > a, .navbar-inverse-xs .navbar-nav-xs > .disabled > a:hover, .navbar-inverse-xs .navbar-nav-xs > .disabled > a:focus {color: #fff; background-color: transparent;}
    .navbar-inverse-xs .navbar-toggle .icon-bar {background-color: #fff; color: #FFF;}
    .navbar-inverse-xs .navbar-collapse, .navbar-inverse-xs .navbar-form {border-color: #101010; border-top: solid 1px white; border-bottom: solid 1px white; background-color: #CB251E; padding: 10px; margin-top: 80px;}
    .navbar-inverse-xs .navbar-nav-xs > .open > a,
    .navbar-inverse-xs .navbar-nav-xs > .open > a:hover,
    .navbar-inverse-xs .navbar-nav-xs > .open > a:focus {color: #fff; background-color: #080808;}
    .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > .dropdown-header {border-color: #080808;}
    .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu .divider {background-color: #080808;}
    .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > li > a {color: #FFF;}
    .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > li > a:hover,.navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > li > a:focus {color: #fff; background-color: transparent;}
    .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > .active > a,
    .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > .active > a:hover,
    .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > .active > a:focus {color: #fff; background-color: #080808;}
    .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > .disabled > a,.navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > .disabled > a:hover, .navbar-inverse-xs .navbar-nav-xs .open .dropdown-menu > .disabled > a:focus {color: #FFF; background-color: transparent;}
    .navbar-inverse-xs .navbar-link {color: #FFF;}
    .navbar-inverse-xs .navbar-link:hover {color: #fff;}

    .nav > li > a {padding: 7px 15px;border-bottom: 1px solid #d1af17;}
    .nav > li.dark > a {padding: 7px 15px;border-bottom: 1px solid #999;background-color: #3A3B3A;}

}