@media all and (max-width: 1024px){
    input, select{
        -webkit-appearance: none;
    }

    .desktop{
        display: none !important;
    }

    .wrap{
        width: 100%;
    }

    .btn{
        padding: 0px 15px 0px 10px;
        height: 30px;
        line-height: 30px;
    }

    .btn.der{
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .ico{
        width: 30px;
        height: 30px;
        background-size: 20px;
    }

    .movil{
        display: block !important;
    }

    .movil.horizontal{
        display: none !important;   
    }

    #envoltorio{
        z-index: 1;   
    }

    #contenedor{
        padding-bottom: 270px;
        overflow: hidden;
    }

    /*Cabecera*/
    header{
        position: relative;
        height: 100px;
    }

    header h1{
        height: auto;
        line-height: 100px;
        margin-top: 10px;
    }

    header h1 a{
        height: auto;
        width: 120px;
    }

    header.error h1{
        width: 120px;
        margin: 0 auto;
        float: none;
        padding: 10px;
    }

    header h1 a img{
        width: 100%;
    }

    /*Acceso Usuarios*/
    header #acceso-usuarios{
        position: absolute;
        width: auto;
        float: none;
        top: 40px;
        right: 10px;
        height: auto;
        margin-top: 0px;
    }

    header #acceso-usuarios .titulo{
        float: none;
        width: auto;
        height: auto;
        padding-right: 0px;
        margin-right: 0px;
        border-right: none;
        background-image: url(../../images/iconos/ico_usuario_movil.gif);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        background-size: 22px;
        padding-left: 25px;
    }

    header #acceso-usuarios .titulo p{
        font-size: 20px;
        line-height: 22px;
        margin-top: 0px;
    }

    header #acceso-usuarios form#form-acceso-escritorio,
    header #acceso-usuarios a.olvido-clave{
        display: none;
    }

    header form#form-acceso-moviles{
        display: none;
        position: absolute;
        width: 100%;
        top: 100px;
        background-color: #29295D;
        padding-bottom: 20px;
    }

    header form#form-acceso-moviles label{
        display: block;
        width: 224px;
        margin: 20px auto;
    }

    header form#form-acceso-moviles label input[type=text],
    header form#form-acceso-moviles label input[type=password]{
        font-family: 'sansa-pro-light', sans-serif;
        font-size: 13px;
        display: block;
        background-color: #fff;
        border: none;
        border-radius: 3px;
        height: 24px;
        padding: 3px 10px 3px 40px;
        margin: 0px;
        background-repeat: no-repeat;
        background-position: 5% 50%;
        width: calc(100% - 50px);
    }

    header form#form-acceso-moviles label input[type=text]{
        background-image: url(../../images/general/login_ico_usuario.gif);
    }

    header form#form-acceso-moviles label input[type=password]{
        background-image: url(../../images/general/login_ico_password.gif);
    }

    header form#form-acceso-moviles label input[type=text]:focus,
    header form#form-acceso-moviles label input[type=password]:focus{
        box-shadow: 0px 0px 0px 1px #2CA5DE;
    }

    header form#form-acceso-moviles label input[type=text].error,
    header form#form-acceso-moviles label input[type=password].error{
        box-shadow: 0px 0px 0px 1px #f20;
    }

    header form#form-acceso-moviles label span.ej{
        font-family: 'sansa-pro-normal', sans-serif;
        font-size: 12px;
        display: block;
        color: #a5aabd;
        margin: 5px 0px 0px 5px;
    }

    header form#form-acceso-moviles label span.error{
        font-family: 'sansa-pro-normal', sans-serif;
        font-size: 12px;
        display: block;
        color: #f20;
        margin: 5px 0px 0px 5px;
    }

    header form#form-acceso-moviles input[type=submit]{
        display: block;
        background-color: #2CA5DE;
        border: none;
        border-radius: 3px;
        height: 30px;
        width: 224px;
        font-family: 'sansa-pro-bold', sans-serif;
        font-size: 12px;
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding: 3px 10px;
    }

    header form#form-acceso-moviles a.olvido-clave{
        position: relative;
        display: block;
        font-family: 'sansa-pro-normal', sans-serif;
        font-size: 12px;
        color: #fff;
        padding: 0px 5px;
        text-align: center;
        width: 90px;
        margin: 30px auto 0px auto;
    }

    header form#form-acceso-moviles a.olvido-clave::after{
        position: absolute;
        bottom: -10px;
        left: 0px;
        display: block;
        content: '';
        width: 100%;
        height: 5px;
        background-color: #2ba6df;
    }

    /*Menu navegación*/
    header #btn-menu-moviles{
        position: relative;
        display: block;
        height: 25px;
        width: 40px;
        float: left;
        margin-right: 30px;
        margin-left: 10px;
        margin-top: 38px;
    }

    header #btn-menu-moviles span{
        position: absolute;
        background-color: #fff;
        height: 4px;
        width: 100%;
        border-radius: 3px;
    }

    header #btn-menu-moviles span.top{
        top: 0px;
    }

    header #btn-menu-moviles span.mid{
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
    }

    header #btn-menu-moviles span.bottom{
        bottom: 0px;
    }

    nav{
        display: none;
        position: absolute;
        width: 100%;
        background-color: rgba(255,255,255,1);
        height: auto;
        bottom: auto;
        top: 100px;
        left: 0px;
        z-index: 99999;
    }

    nav .wrap > ul > li{
        display: block;
        margin-right: 0px !important;
        line-height: 45px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        background-repeat: no-repeat;
        background-size: 25px;
        padding-left: 40px;
    }

    nav .wrap > ul > li.inicio{
        background-image: url(../../images/iconos/ico_inicio.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.noticias{
        background-image: url(../../images/iconos/ico_noticias.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.sodexo-club{
        background-image: url(../../images/iconos/ico_sodexoclub.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.crece{
        background-image: url(../../images/iconos/ico_crece.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.inicio{
        background-image: url(../../images/iconos/ico_inicio.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.pagos-facturas{
        background-image: url(../../images/iconos/ico_pagos.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.mi-local{
        background-image: url(../../images/iconos/ico_milocal.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.transacciones{
        background-image: url(../../images/iconos/ico_transacciones.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.promocion{
        background-image: url(../../images/iconos/ico_promocion.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li.asesoria{
        background-image: url(../../images/iconos/ico_asesoria.png);
        background-position: 10px 20px;
    }

    nav .wrap > ul > li:first-child{
        display: block;
    }

    nav .wrap > ul > li > a{
        display: block;
        padding: 10px;
        font-size: 20px;
    }

    nav .wrap > ul > li > a::after{
        display: none;
    }

    nav .wrap > ul > li > ul{
        display: none !important;
    }

    /*Footer*/
    footer{
        padding: 10px 0px;
        height: 250px;
    }

    footer .logo-sodexo{
        position: relative;
        right: auto;
        top: auto;
        width: 174px;
        margin: 0 auto 20px auto;
    }

    footer ul#menu-footer{
        padding: 10px 0px;
        border-top: 1px solid rgba(255,255,255,0.2);
        border-bottom: 1px solid rgba(255,255,255,0.2);
        text-align: center;
    }

    footer ul#menu-footer li{
        display: inline-block;
        margin: 0px 2px 0px 0px;
        padding: 0px 2px 0px 0px;
    }

    footer ul#menu-footer li a{
        font-size: 8px;
        line-height: 8px;
        display: block;
    }

    footer #info-footer{
        border-top: none;
        padding: 10px 20px 0px 20px;
        margin-top: 10px;
    }

    footer #info-footer span.info{
        float: none;
        border-right: none;
        padding: 0px;
        margin-right: 0px;
        text-align: center;
        height: 20px;
        line-height: 20px;
        display: block;
    }

    footer #info-footer span.info.telefono{
        height: 50px;
        background-position: 0px 0px;
        width: 115px;
        text-align: left;
        margin: 0 auto;
    }

    /*Avisos*/
    #aviso span{
        border-right: none;
        float: none;
        margin: 0px auto 15px auto;
        width: 130px;
        display: block;
    }

    #aviso img#btn-cerrar-aviso{
        float: none;
        position: absolute;
        top: -10px;
        right: 10px;
    }

    #aviso p{
        float: none;
        text-align: center; 
        padding: 0px;
        width: 90%;
        margin: 0 auto;
        font-size: 12px;
    }

    /*Sección*/
    main.privado section{
        width: calc(100% - 20px);
        padding: 30px 10px;
    }

    section h4{
        font-size: 22px;
    }

    section p{
        font-size: 13px;
    }

    section h4 + p{
        width: auto;
    }

    section .sub-seccion{
        padding: 10px;
        width: calc(100% - 20px);
    }

    section .titulo{
        position: relative;
    }

    section .titulo h5{
        line-height: 20px;
        width: 87%;
        font-size: 14px;
        margin-bottom: 15px;
    }

    section .titulo h5 + .ico{
        position: absolute;
        float: none;
        top: 0px;
        right: 10px;
        margin-right: 0px !important;
    }

    section .titulo h5::after {
        position: relative;
        width: 115%;
    }

    .sub-seccion .titulo h5 + .ico{
        right: 0px;
    }

    .ico-xls,
    .ico-pdf,
    .ico-doc{
        background-size: 16px;
    }

    .btn.der.ico-xls{
        margin-right: 10px !important;
    }

    .fila{
        padding: 0px;
    }

    .fila.borde{
        padding-bottom: 10px;
    }

    .fila .col.pull-left:not(:first-child){
        margin-left: 0px;
    }

    .tablet.horizontal{
        display: none !important;   
    }

    #mensaje-exito{
        width: 90%;
        margin: 0px auto;
    }

    #mensaje-exito .izq{
        float: none;
    }

    #mensaje-exito img{
        width: 50%;
        margin: 0px auto; 
    }

    #mensaje-exito h3,
    #mensaje-exito h4,
    #mensaje-exito a:not(.btn){
        text-align: center;
        font-size: 20px;
    }

    #mensaje-exito .btn{
        margin: 50px auto 0 auto;
        width: 150px;
        display: block;
    }

    #filtro-busqueda .sk-fading-circle{
        float: none;
        width: 200px;
        margin: 0 auto;
    }

}

@media all and (min-width: 480px) and (max-width: 1024px){
    .movil.horizontal{
        display: block !important;   
    }        
}

@media all and (min-width: 1024px) and (max-height: 768px){
    .tablet.horizontal{
        display: block !important;   
    }        
}

/*Login Independiente*/
@media all and (max-width: 767px){
    .login-independiente{
        background-color: #2CA5DE;
    }

    .login-independiente .bg_slider{
        display: none;
    }

    .login-independiente form{
        width: calc(80% - 60px);
        padding: 10px 30px;
        border-radius: 20px;
    }

    .login-independiente form img{
        width: 100px;
        margin: 0 auto;
    }

    .login-independiente .mensaje{
        margin-bottom: 5px;
    }

    .login-independiente form input[type=submit]{
        margin: 10px auto;
    }

}

@media all and (max-width: 767px) and (orientation: landscape){
    .login-independiente form{
        width: 230px;
        padding: 10px 30px;
        border-radius: 20px;
    }
}