@media only screen and (min-device-width :320px) and (max-device-width :480px) {
    td {
        text-align: left;
        width: auto
    }
}

@media (max-width:568px) {
    header {
        line-height: 2;
        padding: 0
    }

    header .logo {
        padding-left: 50px;
        justify-content: center;
        flex: 1 0 80%
    }
    header .ico-tel, header .ico-mail {
        padding-right:0;
        text-indent:  -9999px;        
        display: inline-block;
        position: relative;
    }
    .offcanvas-header img {
        padding:0;
    }

    header .redes {
        justify-content: flex-end
    }

    footer .redes {
        flex: 0
    }

    .label_skitter {
        left: 50% !important;
        top: 50% !important
    }
     #program {
        padding:0!important;
    }
    .posrel {
        padding: 0
    }

    .nav.nav-tabs {
        padding-top: 0;
        border: 0
    }

    .bloquecestaport {
        float: right;
        margin: 0
    }

    .navbar-inverse {
        background: 0;
        border: 0
    }

    .navbar-collapse {
        border-style: none;
        border-color: currentcolor;
        border-width: 0;
        width: 100%;
        margin: 0 0;
        padding: 0;
        background: rgba(0, 0, 0, .8);
        min-height: 0;
        position: absolute;
        top: 0;
        overflow: hidden;
        overflow-y: hidden;
        -webkit-animation: gradient 2s ease forwards;
        animation: gradient 2s ease forwards
    }

    @-webkit-keyframes gradient {
        0% {
            background-position: -100% 5%, 800% 50%, 0 200%
        }

        100% {
            background-position: 2% 5%, 300% 50%, 0 100%
        }
    }

    @keyframes gradient {
        0% {
            background-position: -100% 5%, 800% 50%, 0 200%
        }

        100% {
            background-position: 2% 5%, 300% 50%, 0 100%
        }
    }

    #demo {
        margin-top: 0 !important
    }

    .dropdown-menu {
        position: static
    }

    button.button-menu.collapsed {
        float: left;
        z-index: 333;
        border: 0
    }

    .navbar-default .button-menu:focus,
    .navbar-default .button-menu:hover {
        background-color: transparent
    }

    #bgslide {
        width: 100%;
        margin: 0
    }

    .divcol {
        width: 100%;
        padding: 0
    }

    .tit_h2,
    .tit_h2 * {
        line-height: 40px;
        margin-top: 20px
    }

    .foto_borde {
        width: 100%
    }

    header ul.menu {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 1.5em;
        margin: 0;
        padding: 50% 0;
        text-align: center;
        text-shadow: 2px 2px 5px #000
    }

    header ul.menu li {
        display: block
    }

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

    header ul.menu li a:hover {
        color: #fff
    }

    #mymenu2 li {
        padding: 0
    }

    .divfoto img {
        width: 100%
    }

    #mymenu2 ul.dropdown-menu>li>a {
        padding: 0
    }


    #carousel figure {
        overflow: visible !important;
        /*! padding-top: 90% !important */
    }

    #carousel.head figure {
        overflow: visible !important;
        padding-top: 69% !important
    }

    .carousel .item img {
        min-height: 100%;
        max-width: 200%
    }

    .carousel-indicators {
        bottom: 0
    }

    .caption {
        width: 100%;
        left:50%!important;
        top:40%;
    }
    .caption h1 {
        background-size: 100%;
        text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
        padding: 5% 20% 15%;
        margin:0 0 -20px;
    }
    .caption h2 {
        font-size: 2em
    }

    .caption h2 span {
        font-size: 12px;
        padding: 0
    }
    ul.menus li {
        margin-bottom: 15px;
    }
    .box {
        min-height: 227px
    }

    .btn-button {
        transform: translate(-50%, -50%) scale(.8);
        -webkit-transform: translate(-50%, -50%) scale(.8);
        bottom: 0;
        width: 70%
    }

    .denim h3 {
        font-size: 12px;
        top: 30%
    }

    .item .btn-alfer {
        top: 320px
    }

    #soluciones .box {
        min-height: 185px
    }

    #soluciones .imagen {
        height: 120px
    }

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

    .form-inline {
        float: none
    }

    .arrow-wrap {
        display: none
    }

  

    .tab-content li {
        display: block
    }

    .box-articulo:first-child {
        margin-top: 70px
    }

    #main {
        margin: 0
    }

    .td01 {
        width: 100% !important;
        text-align: left !important
    }

    /*.form-control,
    .form-control1 {
        width: 100% !important;
      
    }*/

    .dot {
        float: none !important
    }

    .infor {
        margin: 0 !important
    }

    .validar {
        padding: 0 !important
    }

    #profile ul {
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-count: 1;
        height: auto
    }

    .tab-content ul {
        min-width: 0
    }

    #site-canvas {
        transform: translateX(0);
        transition: all .4s ease;
        left: 0
    }

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

    .catprod h3 {
        max-height: 100px
    }

    .tr-rect:first-child {
        display: none
    }

    .totales .tr-rect:first-child {
        float: left;
        width: 50% !important
    }

    .td-rect:first-child img {
        transform: translate(0, -40%) scale(.3)
    }

    .totales .tr-rect {
        float: left;
        width: 50%;
        display: block;
        clear: right;
        position: static !important
    }

    .tr-rect:nth-child(1n+3) {
        float: right
    }

    .totales .tr-rect:nth-child(1n+3) {
        float: left
    }

    .totales .th-rect {
        line-height: 42px;
        width: 100%;
        display: inline-block;
        overflow: hidden
    }

    .td-rect {
        width: 100%;
        display: inline-block;
        height: 42px;
        overflow: hidden
    }

    .td-rect.dir2 {
        height: auto
    }

    .th-rect h5 {
        margin-bottom: 13px
    }

    .td-rect h6 {
        padding-top: 15px
    }

    .wrapper {
        max-height: 400px
    }

    .articulo-box {
        min-height: 0;
        max-height: 252px
    }

    .buscar {
        margin: 15px 0;
        float: none;
        width: 100%
    }

    .bloquecestaport .articulo>a {
        background-position-y: -1px
    }

    footer {
        padding: 1rem 0 0;        
    }
    footer .border-top {
        margin:0;
    }
    footer .ico-tel {
        margin: 15px 0;
        display: inline;
        padding: 7px 15px;
    }
footer .ico-mail {
        margin: 15px 0;
        display: inline;
        padding: 7px 25px;
    }
.h-50 {
    height:auto!important;
}
    .btn-pasos ol::after,
    .btn-pasos ol::before {
        background: 0 0
    }

    .btn-pasos ol li {
        margin: 15px 10px
    }

    .btn-pasos ol li::before {
        margin-top: -16px
    }

    .td-rect:first-of-type::before {
        content: "IMAGEN"
    }

    .td-rect:first-of-type.dir2::before {
        content: ""
    }

    .totales .td-rect:first-of-type::before,
    .totales .td-rect:nth-of-type(2)::before,
    .totales .td-rect:nth-of-type(3)::before {
        content: "";
        position: static
    }

    .td-rect:nth-of-type(2)::before {
        content: "MARCA"
    }

    .td-rect.dir2:nth-of-type(2)::before {
        content: ""
    }

    .td-rect:nth-of-type(3)::before {
        content: "PRODUCTO"
    }

    .td-rect:nth-of-type(4)::before {
        content: "COLOR"
    }

    .td-rect:nth-of-type(5)::before {
        content: "TALLA"
    }

    .td-rect:nth-of-type(6)::before {
        content: "PRECIO"
    }

    .td-rect:nth-of-type(7)::before {
        content: "CANTIDAD"
    }

    .td-rect:nth-of-type(8)::before {
        content: "TOTAL"
    }

    .td-rect:nth-of-type(9)::before {
        content: "ELIMINAR"
    }

    .td-rect::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        white-space: nowrap;
        line-height: 42px;
        background-color: #eee
    }

    .td-rect {
        position: relative;
        padding-left: 50%
    }

    .totales .td-rect {
        padding: 0;
        border-top: 1px dotted #000;
        border-left: none
    }

    .totales .td-rect:nth-child(3) {
        height: 56px
    }

    .tr-rect .td-rect:first-child {
        border-top: 1px solid #000;
        padding-left: 50%
    }

    .totales .tr-rect .td-rect:first-child {
        border: 0;
        padding: 0
    }

    .btn-cont {
        width: auto
    }

    .cuenta {
        text-align: center;
        margin-left: -15px;
        margin-right: -15px
    }

    .fx-flex {
        flex-direction: column
    }

    #ctl00_LoginView1_LoginName1 {
        max-width: 120px;
        display: inline-block;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle
    }

    .grid-wrapper {
        grid-template-columns: repeat(auto-fit, 50%);
        grid-gap: 0
    }

    .producto .precio {
        text-align: center;
        width: 100%;
        font-size: 1em
    }

    #formacion .btn-articulo,
    #nosotros .btn-articulo,
    .Hostservicios .btn-articulo {
        padding: 5px 25px;
        font-size: .685em
    }

    #nosotros {
        padding: 15px
    }

    #nosotros h2 {
        font-size: 2em !important
    }

    #productos {
        padding: 0 0 60px
    }

    #productos.bg {
        background-size: 380% 100%
    }

    .box img {
        width: auto;
        min-height: 100%
    }

    #conoce {
        padding: 60px 0
    }

    .box-attcliente li:nth-child(odd) {
        margin: 0;
        padding: 0
    }

    svg.button-menu {
        display: block;        
        transform: scale(.6);
        -webkit-transform: scale(.6);
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        margin-left: -15px;
        transform-origin: right;
        -webkit-transform-origin: right;
    }

    #galeria img {
        left: -40px
    }

    .detalle {
        display: block !important
    }

    #owl-demo .item {
        height: auto;
        padding-bottom: 0;
        position: static
    }

    .box-attcliente {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px
    }
    .productos .box-attcliente {
        grid-template-columns: 1fr;
        justify-items:center;
    }
    ul.receta {
        padding:0;
        font-size:0.865em;
    }
        ul.receta li div {
            width: 60%;
            max-width: 80%;
            overflow: hidden;
            position: relative;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    
    

    ul#mymenu2 {
        padding: 20px 0;
        text-align: left
    }

    

    .flex-container {
        padding: 0
    }
    .datos {
        padding:0;
        margin:0;
    }
    
     
   
    .offcanvas-header .btn-close {
        margin-right:0!important;
    }
   
    ul.list-row {
        flex-direction: column;
        -webkit-flex-direction: column;
    }

    ul.list-row li.column {
        padding: 0;
        height: auto;
    }
    .legal ul {
        text-align: center;
    }
    .productos a:target {
        margin-top: 0;
    }
    .productos h2 {
    font-size: 1.8rem;
    margin: 3rem auto;
}

    .productos h2 span {
        font-size: 1rem;
        display: block;
    }
    #reservas {  
      padding: 0;
    }
    #reservas .input-group {
        flex-direction: column;
    }
    #carta {
        padding:0;
    }
     
   
    ul.box-prt {
        padding: 0;
    }
    footer h1 {    
        margin:0 auto!important;
        text-align: center;
    }
    footer p {
        text-align: center; 
        padding: 0!important;
    }
    footer li {
        /*! display: inline!important; */
        text-align: center!important;
    }
    footer address {
        float:none;
        text-align: center;
        line-height:2;
    }
    footer .column h2 {
       background-position: 25%;
    }
    footer h2 + p, footer h2 + .order {
    padding-left:0;
}
    footer .order .btn-primary {
        margin:0 auto;        
    }
    footer img {
        margin:0 auto;
    }
    header .btn-primary {
        /*! font-size:0.5rem; */
    }
    .productos a[name]:target ~ div {
        margin:0;
    }
    #inicio .hilo, #inicio .hilo2 {
        display: none;
    }
}

@media (min-width:667px) and (max-width:768px) {
    #galeria img {
        left: -40px
    }

    header {
        line-height: 2;
        padding: 0
    }

    header .logo {
        left: calc(40% - 5em);
        width: 10em;
        height: 3em;
        float: left
    }

    .label_skitter {
        left: 50% !important;
        top: 50% !important
    }

    .posrel {
        padding: 0
    }

    .nav.nav-tabs {
        padding-top: 0;
        border: 0
    }

    .bloquecestaport {
        padding-top: 10px
    }

    .navbar-inverse {
        background: 0;
        border: 0
    }

    @-webkit-keyframes gradient {
        0% {
            background-position: -100% 5%, 200% 50%, 50% 200%
        }

        100% {
            background-position: 2% 5%, 150% 50%, 50% 120%
        }
    }

    @keyframes gradient {
        0% {
            background-position: -100% 5%, 200% 50%, 50% 200%
        }

        100% {
            background-position: 2% 5%, 150% 50%, 50% 120%
        }
    }

    .collapse.in {
        min-height: 100vh
    }

    .dropdown-menu {
        position: static
    }

    button.button-menu.collapsed {
        float: left;
        z-index: 333;
        border: 0;
        padding: 0
    }

    .navbar-default .button-menu:focus,
    .navbar-default .button-menu:hover {
        background-color: transparent
    }

    #bgslide {
        width: 100%;
        margin: 0
    }

    .divcol {
        width: 100%;
        padding: 0
    }

    .tit_h2,
    .tit_h2 * {
        line-height: 40px;
        margin-top: 20px
    }

    .foto_borde {
        width: 100%
    }

    #mymenu2 li {
        float: none;
        display: block;
        text-align: left
    }

    .divfoto img {
        width: 100%
    }

    #mymenu2 ul.dropdown-menu>li>a {
        padding: 0
    }

    #carousel {
        top: 0 !important;
        margin-bottom: 0 !important
    }

    #carousel figure {
        overflow: hidden;
        padding-top: 82.62%;
        position: relative
    }

    .carousel .item img {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        min-height: 100%;
        max-width: 200%
    }

    .carousel-indicators {
        bottom: 0
    }
    .caption {
        width: 80%;
    }
    .caption h2 span {
        font-size: 12px;
        padding: 0
    }

    .box {
        min-height: 227px
    }

    .box h3 {
        transform: translate(-50%, -60%) scale(.5);
        -webkit-transform: translate(-50%, -60%) scale(.5);
        margin: 0;
        width: 100%
    }

    .btn-button {
        transform: translate(-50%, -50%) scale(.8);
        -webkit-transform: translate(-50%, -50%) scale(.8);
        bottom: 0;
        width: 70%
    }

    .denim h3 {
        font-size: 12px;
        top: 30%
    }

    .item .btn-alfer {
        top: 320px
    }

    #soluciones .box {
        min-height: 185px
    }

    #soluciones .imagen {
        height: 120px
    }

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

    .form-inline {
        float: none
    }

    .arrow-wrap {
        display: none
    }

    .attcliente {
        position: static
    }

    .box-attcliente li img {
        width: auto;
        display: block
    }

    .tab-content li {
        display: block
    }

    .box-articulo:first-child {
        margin-top: 70px
    }

    #main {
        margin: 0
    }

    .td01 {
        width: 100% !important;
        text-align: left !important
    }

    .form-control,
    .form-control1 {
        width: 100% !important
    }

    .dot {
        float: none !important
    }

    .infor {
        margin: 0 !important
    }

    .validar {
        padding: 0 !important
    }

    #profile ul {
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-count: 1;
        height: auto
    }

    .tab-content ul {
        min-width: 0
    }

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

    #site-menu {
        width: 300px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -300px;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        padding: 15px;
        z-index: 8888
    }

    .catprod h3 {
        max-height: 100px
    }

    .tr-rect:first-child {
        display: none
    }

    .totales .tr-rect:first-child {
        float: left;
        width: 50% !important
    }

    .td-rect:first-child img {
        transform: translate(0, -40%) scale(.3)
    }

    .totales .tr-rect {
        float: left;
        width: 50%;
        display: block;
        clear: right;
        position: static !important
    }

    .tr-rect:nth-child(1n+3) {
        float: right
    }

    .totales .tr-rect:nth-child(1n+3) {
        float: left
    }

    .totales .th-rect {
        line-height: 42px;
        width: 100%;
        display: inline-block;
        overflow: hidden
    }

    .td-rect {
        width: 100%;
        display: inline-block;
        height: 42px;
        overflow: hidden
    }

    .td-rect.dir2 {
        height: auto
    }

    .th-rect h5 {
        margin-bottom: 13px
    }

    .td-rect h6 {
        padding-top: 15px
    }

    .wrapper {
        max-height: 400px
    }

    .articulo-box {
        min-height: 252px;
        max-height: 252px
    }

    .buscar {
        margin: 15px 0
    }

    .bloquecestaport .articulo>a {
        background-position-y: -1px
    }

    footer {
        padding: 1rem 0
    }

    footer .ico-tel {
        margin: 15px 0;
        display: block;
        padding: 7px 15px
    }

    .btn-pasos ol::after,
    .btn-pasos ol::before {
        background: 0 0
    }

    .btn-pasos ol li {
        margin: 15px 10px
    }

    .btn-pasos ol li::before {
        margin-top: -16px
    }

    .navbar-default.navbar-fixed-top {
        background-color: #fff !important
    }

    .td-rect:first-of-type::before {
        content: "IMAGEN"
    }

    .td-rect:first-of-type.dir2::before {
        content: ""
    }

    .totales .td-rect:first-of-type::before,
    .totales .td-rect:nth-of-type(2)::before,
    .totales .td-rect:nth-of-type(3)::before {
        content: "";
        position: static
    }

    .td-rect:nth-of-type(2)::before {
        content: "MARCA"
    }

    .td-rect.dir2:nth-of-type(2)::before {
        content: ""
    }

    .td-rect:nth-of-type(3)::before {
        content: "PRODUCTO"
    }

    .td-rect:nth-of-type(4)::before {
        content: "COLOR"
    }

    .td-rect:nth-of-type(5)::before {
        content: "TALLA"
    }

    .td-rect:nth-of-type(6)::before {
        content: "PRECIO"
    }

    .td-rect:nth-of-type(7)::before {
        content: "CANTIDAD"
    }

    .td-rect:nth-of-type(8)::before {
        content: "TOTAL"
    }

    .td-rect:nth-of-type(9)::before {
        content: "ELIMINAR"
    }

    .td-rect::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        white-space: nowrap;
        line-height: 42px;
        background-color: #e6ebf0
    }

    .td-rect {
        position: relative;
        padding-left: 50%
    }

    .totales .td-rect {
        padding: 0;
        border-top: 1px dotted #000;
        border-left: none
    }

    .totales .td-rect:nth-child(3) {
        height: 56px
    }

    .tr-rect .td-rect:first-child {
        border-top: 1px solid #000;
        padding-left: 50%
    }

    .totales .tr-rect .td-rect:first-child {
        border: 0;
        padding: 0
    }

    .btn-cont {
        width: auto
    }

    .cuenta {
        text-align: center;
        margin-left: -15px;
        margin-right: -15px
    }

    #ctl00_LoginView1_LoginName1 {
        max-width: 120px;
        display: inline-block;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: text-top
    }

    #demo {
        top: 0 !important
    }

    .grid-wrapper {
        grid-template-columns: repeat(auto-fit, 50%);
        grid-gap: 0
    }

    

    .carousel-inner {
        min-height: 430px
    }

    #carousel figure {
        padding-top: 69.62%
    }

    .carousel .item img {
        min-height: 100%;
        max-width: 200%
    }

    .carousel-indicators {
        bottom: 0
    }

    .caption {
        width: 80%;
    }

    .caption h2 span {
        font-size: 12px;
        padding: 0
    }

    ul.list-row {
        flex-direction: column;
        -webkit-flex-direction: column;
    }

    #productos.bg {
        background-size: 380% 100%
    }

    .producto .precio {
        text-align: center;
        width: 100%;
        font-size: 1em
    }

    #formacion .btn-articulo,
    #nosotros .btn-articulo,
    .Hostservicios .btn-articulo {
        padding: 5px 25px;
        font-size: .685em
    }

    .grid-wrapper {
        grid-template-columns: 1fr 1fr 1fr
    }
    .productos a:target {
        margin-top: 0;
    }
    ul.receta {
        padding: 0;
        font-size: 0.865em;
    }
        ul.receta li div {
            width: 60%;
            max-width: 80%;
            overflow: hidden;
            position: relative;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
     #carta {
        padding:0;
    }
   
}