/* iPhone 5 */
@media (max-width: 320px) {
}

@media (min-width: 400px) and (max-width: 568px) {
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    td {
        text-align: left;
        width: auto;
    }
}
/* Landscape phones and down*/
@media (max-width: 568px) {



    header .navbar-brand img {
        height: 55px !important;
        margin-left: 110px;
        min-width: 65px;
    }

    #skitter-wrapper {
        top: 0 !important;
    }

    .label_skitter {
        left: 30% !important;
        top: 50% !important;
        width: 80% !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 0px;
        padding: 0;
        background: #c09796;
        background: #c09796;
        min-height: 0;
        position: absolute;
        top: 0;
        overflow: hidden;
        overflow-y: hidden;
        animation: gradient 2s ease forwards;
    }

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



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

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

    #demo {
        top: 0 !important;
        position: static;
    }

    .dropdown-menu {
        position: relative;
    }

    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
        background-color: transparent !important;
    }

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

    /*.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle: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 {
        float: none;
        text-align: center;
    }

    #footer, .push {
        height: auto;
    }

    #footer {
        position: relative;
        margin: 0;
    }

        #footer h1 {
            float: none;
            padding: 5px 0;
        }

        #footer address {
            float: none;
        }

        #footer .legal {
            float: none;
            line-height: initial;
        }

        #footer .block {
            position: static;
        }

    .divfoto img {
        width: 100%;
    }

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

    #footer ul#mymenu2 li a img {
        padding: 0;
    }

    #carousel {
        top: 0px !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 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-control1, .form-control {
        width: 100% !important;
    }

    .dot {
        float: none !important;
    }

    .infor {
        margin: 0 !important;
    }

    .validar {
        padding: 0 !important;
    }

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

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

    svg.button-menu {
        display: block;
        top: 35px;
        left: 315px;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        transition: all .4s ease;
        position: relative;
        margin-left: -15px;
    }

    #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: absolute;
        top: 0;
        left: -300px;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        padding: 15px;
        z-index: 8888;
        min-height: 100vh;
    }

    .catprod h3 {
        max-height: 100px;
        font-size: 0.635em;
    }
    /**tabla**/
    .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 .ico-tel {
        margin: 15px 0;
        display: block;
        padding: 7px 25px;
    }

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

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

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

    .td-rect:nth-of-type(1)::before {
        content: "IMAGEN";
    }

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

    .totales .td-rect:nth-of-type(1)::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;
    }

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

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

    .flex-container {
        flex-direction: column;
        height: auto;
    }

    .producto .precio {
        /*! text-align: center; */
        /*! width: 100%; */
        font-size: 0.635em;
    }

    #nosotros {
        padding: 15px;
    }

    .item2 {
        width: 82%;
    }

    .widget {
        justify-content: flex-end;
    }

    .site-menu {
        width: 200px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: -304px;
        background-color: #1b1c1d;
        padding: 15px 15px 0 !important;
        display: block;
        z-index: 8888;
        -webkit-transition: all .4s ease;
        transition: all .4s ease;
    }

    ul.navbar-nav {
        flex-direction: column;
    }

        ul.navbar-nav li a {
            color: #fff !important;
            display: block;
            background-color: #1b1c1d !important;
            white-space: pre-wrap;
        }

    .caja .btn-articulo {
        font-size: 0.635em;
        padding: 5px 5px !important;
        min-width: 55%;
    }

    #footer h1 img {
        height: 85px;
    }

    aside a {
        color: #fff;
    }

        aside a:hover {
            color: #fff;
            text-decoration: underline;
        }

    .sliderprecio {
        color: #fff;
    }

    aside .nav-pills > li > a {
        color: #fff;
    }
}
/* Landscape phone to portrait tablet*/
@media (min-width: 667px) and (max-width: 768px) {
    .navbar-header {
        margin: 0!important;
        padding:0;
    }
    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;
    }

   

    @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: relative;
    }


    
    button.navbar-toggle.collapsed {
        float: left;
        z-index: 333;
        border: 0;
        padding: 0;
    }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle: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;
    }

    #footer {
        position: relative;
        margin: 0;
    }

    

        #footer h1 {
            float: none;
            padding: 5px 0;
        }

        #footer address {
            float: none;
        }

        #footer .legal {
            float: none;
            line-height: initial;
        }

    .divfoto img {
        width: 100%;
    }

    #mymenu2 ul.dropdown-menu > li > a {
        padding: 0;
    }
    #footer ul#mymenu2 li a img {
        padding: 0;
    }
    #carousel {
        top: 0px !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 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-control1, .form-control {
        width: 100% !important;
    }

    .dot {
        float: none !important;
    }

    .infor {
        margin: 0 !important;
    }

    .validar {
        padding: 0 !important;
    }

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

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

    #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: 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;
    }
    /**tabla**/
    .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 .ico-tel {
        margin: 15px 0;
        display: block;
        padding: 7px 15px;
    }

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

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

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

    .navbar-fixed-top {
        position: static;
    }

    .td-rect:nth-of-type(1)::before {
        content: "IMAGEN";
    }

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

    .totales .td-rect:nth-of-type(1)::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;
    }
    #footer .block {
        position: static;
    }
    aside a {
      color: #fff;
    }
    aside a:hover {
      color: #fff;
        text-decoration:underline;
    }
    .sliderprecio {
        color:#fff;
    }
   
}