header nav
{
    width:100%;
    height:100px;
    display: flex;
    align-items: center;
}
header nav .contenido
{
    width:80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header nav .contenido #logo
{
    width: 110px;
}
header nav .contenido #logo img
{
    width:100%;
    height:auto;
}
header nav .contenido
{
    display: flex;
    align-items: center;
}
header nav .contenido ul
{
    padding-top:15px;

    display: flex;
    list-style: none;
}
header nav .contenido ul li
{
    padding:0 5px;
}
header.tema_claro nav .contenido ul li a
{
    white-space: nowrap;
    color:rgb(27, 27, 27);
}
header nav .contenido ul li a
{
    font-weight: bold;
    text-decoration: none;
    color:rgb(241, 235, 235);
    border-radius:50px;
    padding:10px 20px;
}
header nav .contenido ul li a.active
{
    background:red;
    color:white;
}
header nav .mobile
{
    display:none;
    background:#fff;
    width:100%;
    max-height:200px;
}
header nav .mobile .cc
{
    padding:0 20px;
    width:100%;
    height:100%;
}
header nav .mobile .container
{
    padding:0 20px;
    width:100%;
    height:100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header nav .mobile .logo
{
    width:70px;
}
header nav .mobile .logo img
{
    width:100%;
}
header nav .mobile button.menu
{
    border-radius:5px;
    -o-border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px; 
    padding:10px;
    border:none;
    background:none;
    color:#09021b;
    cursor:pointer;
}
header nav .mobile .lista-menu-opciones
{
    overflow: scroll;
    margin:0px auto;
    display: flex;
    width: auto !important;
    padding:5px 5px;
    border-radius:10px;
}
header nav .mobile .lista-menu-opciones::-webkit-scrollbar-thumb
{
    background-color: none;
}
header nav .mobile .lista-menu-opciones::-webkit-scrollbar
{
    background:none;
    width: 0;
    height: 0;
}
header nav .mobile .lista-menu-opciones ul
{
    list-style: none;
    display: flex;
    padding-left:0 !important;
}
header nav .mobile .lista-menu-opciones ul li
{
    padding:5px 7px;
}
header nav .mobile .lista-menu-opciones ul li a.active
{
    background: #f51919;
    color: white;
}
header nav .mobile .lista-menu-opciones ul li a
{
    text-decoration: none;
    cursor:pointer;
    display:table;
    color: #030414;
    font-weight: bold;
    background:transparent;
    border:none;
    border-radius:5px;
    padding:10px 15px;
}
@media(max-width: 299px)
{
    header nav
    {
        width:100%;
        padding:0;
        height:auto;
    }
    header nav .contenido
    {
        width: 100%;
        display:none
    }
    header nav .mobile .lista-menu-opciones
    {
        display:flex;
        padding:5px 5px;
    }
    header nav .mobile .lista-menu-opciones a
    {
        font-size:0.8rem;
    }
    header nav .mobile
    {
        display:block;
        width:100%;
    }
    header nav .mobile .cc
    {
        padding:0 10px;
        width:100%;
    }
    header nav .mobile .container
    {
        padding:0;
        height:100px;
    }
    header nav .mobile .logo
    {
        width:70px;
    }
    header nav .mobile .logo img
    {
        width:100%;
    }
    header nav .mobile button.menu
    {
        font-size:1rem;
        padding:10px;
    }
}
@media(min-width: 300px) and (max-width: 399px)
{
    header nav
    {
        width:100%;
        padding:0;
        height:auto;
    }
    header nav .contenido
    {
        width: 100%;
        display:none
    }
    header nav .mobile .lista-menu-opciones
    {
        width:90% !important;
        margin:0 auto;
        display: flex;
        padding:5px 5px;
    }
    header nav .mobile .lista-menu-opciones a
    {
        font-size:0.8rem;
    }
    header nav .mobile
    {
        display:block;
        width:100%;
    }
    header nav .mobile .cc
    {
        padding:0 10px;
        width:100%;
    }
    header nav .mobile .container
    {
        margin:0 auto;
        width:90%;
        padding:0;
        height:100px;
    }
    header nav .mobile .logo
    {
        width:70px;
    }
    header nav .mobile .logo img
    {
        width:100%;
    }
    header nav .mobile button.menu
    {
        font-size:1rem;
        padding:10px;
    }
}
@media(min-width: 400px) and (max-width: 499px)
{
    header nav
    {
        width:100%;
        padding:0;
        height:auto;
    }
    header nav .contenido
    {
        width: 100%;
        display:none
    }
    header nav .mobile .lista-menu-opciones
    {
        width:90% !important;
        margin:0 auto;
        display: flex;
        padding:5px 5px;
    }
    header nav .mobile .lista-menu-opciones a
    {
        font-size:0.9rem;
    }
    header nav .mobile
    {
        display:block;
        width:100%;
    }
    header nav .mobile .cc
    {
        padding:0 10px;
        width:100%;
    }
    header nav .mobile .container
    {
        margin:0 auto;
        width:90%;
        padding:0;
        height:100px;
    }
    header nav .mobile .logo
    {
        width:75px;
    }
    header nav .mobile .logo img
    {
        width:100%;
    }
    header nav .mobile button.menu
    {
        font-size:1.1rem;
        padding:10px;
    }
}
@media(min-width: 500px) and (max-width: 599px)
{
    header nav
    {
        width:100%;
        padding:0;
        height:auto;
    }
    header nav .contenido
    {
        width: 100%;
        display:none
    }
    header nav .mobile .lista-menu-opciones
    {
        width:90% !important;
        margin:0 auto;
        display: flex;
        padding:5px 5px;
    }
    header nav .mobile .lista-menu-opciones a
    {
        font-size:1rem;
    }
    header nav .mobile
    {
        display:block;
        width:100%;
    }
    header nav .mobile .cc
    {
        padding:0 10px;
        width:100%;
    }
    header nav .mobile .container
    {
        margin:0 auto;
        width:90%;
        padding:0;
        height:100px;
    }
    header nav .mobile .logo
    {
        width:80px;
    }
    header nav .mobile .logo img
    {
        width:100%;
    }
    header nav .mobile button.menu
    {
        font-size:1.1rem;
        padding:10px;
    }
}
@media(min-width: 600px) and (max-width: 699px)
{
    
    header nav
    {
        width:100%;
        padding:0;
        height:auto;
    }
    header nav .contenido
    {
        width: 100%;
        display:none
    }
    header nav .mobile .lista-menu-opciones
    {
        width:85% !important;
        margin:0 auto;
        display: flex;
        padding:5px 5px;
    }
    header nav .mobile .lista-menu-opciones a
    {
        font-size:1.1rem;
    }
    header nav .mobile
    {
        display:block;
        width:100%;
    }
    header nav .mobile .cc
    {
        padding:0 10px;
        width:100%;
    }
    header nav .mobile .container
    {
        margin:0 auto;
        width:90%;
        padding:0;
        height:100px;
    }
    header nav .mobile .logo
    {
        width:85px;
    }
    header nav .mobile .logo img
    {
        width:100%;
    }
    header nav .mobile button.menu
    {
        font-size:1.3rem;
        padding:10px;
    }
}
@media(min-width: 700px) and (max-width: 799px)
{
    header nav
    {
        height:auto;
    }
    header nav .contenido
    {
        display:none
    }
    header nav .mobile
    {
        background: transparent;
        height:auto;
        width:95%;
        margin:0 auto;
        display:block;
    }
    header .this-mobile
    {
        display:none;
    }
    header nav .mobile button.menu
    {
        padding:20px;
        color:#181717;
        font-size:1.3rem;
    }
    header nav .mobile .logo .logo_blanco
    {
        display: none;
    }
    header nav .mobile .logo .logo_oscuro
    {
        display: block;
    }
    header nav .mobile .logo
    {
        width:100px;
    }
    header nav .mobile .lista-menu-opciones
    {
        width:85% !important;
        margin:0 auto;
        display: flex;
    }
    header nav .mobile .cc
    {
        border-bottom-left-radius: 0;
        padding:0 20px;
        width:100%;
        height:100%;
        background:transparent;
    }
}
@media(min-width: 800px) and (max-width: 899px)
{
    header nav
    {
        height:auto;
    }
    header nav .contenido
    {
        display:none
    }
    header nav .mobile
    {
        height:auto;
        width:95%;
        margin:0 auto;
        display:block;
        background: transparent;
    }
    header .this-mobile
    {
        display:none;
    }
    header nav .mobile button.menu
    {
        padding:20px;
        color:#181717;
        font-size:1.3rem;
    }
    header nav .mobile .logo .logo_blanco
    {
        display: none;
    }
    header nav .mobile .logo .logo_oscuro
    {
        display: block;
    }
    header nav .mobile .logo
    {
        width:100px;
    }
    header nav .mobile .lista-menu-opciones
    {
        width:85% !important;
        margin:0 auto;
        display: flex;
    }
    header nav .mobile .cc
    {
        border-bottom-left-radius: 0;
        padding:0 20px;
        width:100%;
        height:100%;
        background:transparent;
    }
}
@media(min-width: 900px) and (max-width: 1075px)
{
    header nav
    {
        height:auto;
    }
    header nav .contenido
    {
        display:none
    }
    header nav .mobile
    {
        height:auto;
        background: transparent;
        width:90%;
        margin:0 auto;
        display:block;
    }
    header .this-mobile
    {
        display:none;
    }
    header nav .mobile button.menu
    {
        padding:20px;
        color:#181717;
        font-size:1.3rem;
    }
    header nav .mobile .logo .logo_blanco
    {
        display: none;
    }
    header nav .mobile .logo .logo_oscuro
    {
        display: block;
    }
    header nav .mobile .logo
    {
        width:100px;
    }
    header nav .mobile .lista-menu-opciones
    {
        display: flex;
        margin:0 auto;
        width:80%;
        justify-content: center;
    }
    header nav .mobile .cc
    {
        border-bottom-left-radius: 0;
        padding:0 20px;
        width:100%;
        height:100%;
        background:transparent;
    }
}