@media (min-width: 760px) and (max-width: 767px) {
    .posrel {
        padding: 8px 0 10px;
    }
    .box-buscar {
        right:80px;
        position:fixed;
        width: 50%;
    }
    .btnbuscar {
        top: 7px;
        right: 70px !important;
    }

    .clientes {
        float: right;
        display: block !important;
    }

    ul.menu li a {
        padding: 8px !important;
    }

    

    #site-canvas {
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transition: all .4s ease;
        transition: all .4s ease;
        left: 0;
    }

    #site-menu {
        width: 300px;
        height: 100%;
        position: fixed;
        top: 0;
        left: -304px;
        background-color: #F2F2F1;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        padding: 15px;
        z-index: 8888;
        box-shadow: 2px 2px 4px rgba(0,0,0,.2);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: all .4s ease;
        transition: all .4s ease;
    }

    aside#filtros {
        max-width: 100% !important;
        position: relative;
        background-color: #f2f2f1;
        border: 0;
        height: 100vh;
        top: 0;
    }
        aside#filtros ul.dropdown-menu {
            background-color:transparent;
        } 
        
        header .logo {
            margin: 0;
            padding: 0;
            left: 20px !important;
            position: absolute;
            transform: scale(0.6);
            transform-origin: 0px 0px 0px;
            padding: 10px;
            z-index: 2;
        }
    .grid-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
    }
    ul.menu {
        /*margin: 0;
        padding: 0;
        text-align: center;
        font-size: 1.5em;*/
        margin: 0;
        padding: 20vh 0;
        text-align: center;
        font-size: 3.5em;
        flex-direction: column;
    }

        ul.menu li {
            display: block;
        }

            ul.menu li a {
                color: #fff;
                width: 100%;
                display: block;
            }

                ul.menu li a:focus, ul.menu li a:active, ul.menu li a:hover {
                    color: #fff;
                    background: 0;
                    text-decoration: underline;
                }
    svg.button-menu {
        display: block !important;
        top: -2px !important;
        fill: transparent !important;
        transition: none;
        -webkit-transition: none;
    }
        svg.button-menu.active {
            right: 60px !important;
            fill: transparent !important;
            transition:none;
            -webkit-transition: none;
        }
    section.dircontacto, section.contacto {
        padding:0;
    }
    section.redes {
        float:none;
        text-align:center;
        margin:0 auto;
    }
    .iso li {
        padding: 15px;
    }
    .accesoclientes .container {
        width: 100%;
    }
    header a.btn-cont {
        padding: 5px;
        margin: 5px;
        display: inline-block;
        text-align: center;
        left: 160px;
        position: fixed;
    }
    header .btn-cont + a {
        display: none;
    }
    .salir .btn-cont {
        display: none;
    }
    .accesoclientes li.salir {
        margin-left: 90px;
    }
    .bloquecesta, .bloquecestaport {
        left:-20px;
    }
    .flex {
        -webkit-flex-basis: 50%;
        max-width: 50%;
        flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
    }
    #nosotros .btn-articulo, .categorias .btn-articulo {
        max-width:50%;
    }
    section#nosotros {
        background-position: 130% 50%;
        padding: 0;
    }
    section.categorias {
        padding:0;
        background-position: -30% 50%;
    }
    
}
    /* Portrait tablet to landscape and desktop*/
    @media (min-width: 768px) and (max-width: 979px) {
        .bg-header {
            width: auto;
        }

        ul.menu {
          margin: 0;
            font-size: 1em;
        }
        ul.menu li a {
            padding: 8px !important;
        }

        #servicios .box {
            min-height: 310px;
        }

        .figcaption {
            left: 0;
            transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
        }

        .buscar input {
            max-width: 100px;
        }

        .btn-button {
            font-size: inherit;
        }

        #carousel {
            min-width: 1024px;
        }

        #soluciones .imagen img.clip {
            margin: 0;
        }
        .box-attcliente {
            margin:0 auto;
            text-align: center;
        }
        .box-attcliente li {
            margin: 0;
        }

        footer .box-attcliente li {
            margin: 0;            
        }

        .btnbuscar {
            top: 7px;
        }

        .posrel {
            padding: 8px 0 20px;
        }


        .box-articulo figure {
            min-height: 285px;
        }

        .iso li {
            padding: 15px !important;
        }

        #site-canvas {
            width: 100%;
            height: 100%;
            position: relative;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            left: 0;
        }

        #site-menu {
            width: 300px;
            height: 100%;
            position: fixed;
            top: 0;
            left: -304px;
            background-color: #fff;
            box-shadow: 0 5px 10px rgba(0,0,0,.2);
            padding: 15px;
            z-index: 8888;
            box-shadow: 2px 2px 4px rgba(0,0,0,.2);
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
        }

        .dropdown-menu {
            position: static;
        }

        aside#filtros {
            position: relative;
            background-color: #fff;
            border: 0;
            max-height: 100vh;
            top: 0;
            width: 100%;
        }

            aside#filtros ul.dropdown-menu {
                background-color: #fff;
            }

        #footer {
            width: 100% !important;
            margin-left: 0 !important;
            margin-bottom: -620px;
            height: 620px;
        }

        li.clientes {
            margin: 0 !important;
        }

        .clientes a {
            padding: 2px;
        }

        section.redes {
            text-align: center;
            margin: 0 25%;
            float:none;
            display:inline-block;
        }

        footer section.contacto {
            padding: 0;
            text-align:center;
        }

        .visibleElement ul.menu {
            left: 45%;
        }

        .visibleElement .bloquecestaport {
            left: 20px;
        }

        .visibleElement .buscar {
            right: 85px;
        }

        .visibleElement .btnbuscar {
            right: 90px;
        }

        svg.button-menu {
            display: none !important;
        }

        .flex {
            -webkit-flex-basis: 50%;
            max-width: 50%;
            flex-basis: 50%;
            -ms-flex-preferred-size: 50%;
        }

        .btn-pasos ol li a.active::before {
            margin-top: -38px;
        }

        .grid-wrapper h2 {
            font-size: inherit !important;
        }

        .bgw {
            width: 100% !important;
            margin-bottom: 15px;
        }
        .grid-wrapper {
            grid-template-columns: 1fr 1fr 1fr;
        }
        .accesoclientes .container {
            width:100%;
        }
        .outlet {
            transform: scale(0.84);
            transform-origin: 0 0;
            -webkit-transform: scale(0.84);
            -webkit-transform-origin: 0 0;
        }
        #nosotros .btn-articulo, .categorias .btn-articulo {
            max-width: 30%;
        }
        #nosotros {
          padding: 0px 20px;
          background-position: -400% 50%;
        }
        section.categorias {
          padding: 0px 20px;
          background-position: 500% 50%;
        }
        .flex-container {
            /*! -webkit-flex-direction: column !important; */
            /*! -ms-flex-direction: column !important; */
            /*! flex-direction: column !important; */
            display: block;
        }
        .gutter {
            flex-direction: column;
        }
        section.dircontacto {
            padding: 5px;
        }
    }

    @media (min-width: 979px) and (max-width: 1152px) {
        .bg-header {
            width: auto;
        }

        ul.menu {
            margin: 0;
        }



        #servicios .box {
            min-height: 310px;
        }

        .figcaption {
            left: 0;
            transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
        }

        .buscar input {
            max-width: 100px;
        }

        .btn-button {
            font-size: inherit;
        }

        #carousel {
            min-width: 1024px;
        }

        #soluciones .imagen img.clip {
            margin: 0;
        }

        .box-attcliente li {
            margin: 5px 30px 100px;
        }

        footer .box-attcliente li {
            margin: 0;
        }

        footer section.contacto {
            padding: 0;
            margin-left: -30px;
        }

        section.redes {
            padding: 0;
            float: none;
            transform: scale(0.8);
            -webkit-transform: scale(0.8);
        }

        .iso li {
            padding: 15px 30px;
        }

        .btnbuscar {
            /*! right: 0 !important; */
            top: 7px;
        }

        .clientes a {
            padding: 2px;
        }

        .box-articulo figure {
            min-height: 366px;
        }

        aside#filtros ul.dropdown-menu {
            padding: 0 !important;
        }

        aside#filtros li {
            font-size: 0.8em;
        }

        #footer {
            width: 100% !important;
            margin-left: 0 !important;
        }

        .visibleElement .bloquecestaport {
            left: 20px;
        }

        .visibleElement .buscar {
            right: 85px;
        }

        .visibleElement .btnbuscar {
            right: 90px;
        }

        svg.button-menu {
            display: none !important;
        }

        .btn-pasos ol li a.active::before {
            margin-top: -38px;
        }

        .grid-wrapper h2 {
            font-size: inherit !important;
        }
        .outlet {
            transform: scale(0.51);
            transform-origin: 0 0;
            -webkit-transform: scale(0.51);
            -webkit-transform-origin: 0 0;
        }
    }