@font-face{ font-family: "Avenir-condensed"; src: url('fonts/Avenir-Next-LT-Pro-Condensed.ttf') format('truetype'); font-display: swap;}
@font-face{ font-family: "Avenir-bold-condensed"; src: url('fonts/Avenir-Next-LT-Pro-Bold-Condensed.ttf') format('truetype'); font-display: swap;}
@font-face{ font-family: "Roboto-Medium"; src: url('fonts/Roboto-Medium.ttf') format('truetype'); font-display: swap;}

/*
font:normal 1rem "Avenir-condensed", Arial, Helvetica, sans-serif;
font:normal 1rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif;
font:normal 1rem "Roboto-Medium", Arial, Helvetica, sans-serif;
*/

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {
/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;
                          box-sizing: border-box;}

/*HTML 5*/
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video { display: block;}

a { text-decoration:none !important; color: #111; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

p { color: #111;}
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
strong { font-weight: normal; font-family:"Avenir-bold-condensed", Arial, Helvetica, sans-serif;}
ul { list-style: none;}


/*FORMULARIO:::::::::::::::::::::::::::::::::::::::::::::::::::*/
label { font-size: 1.1rem; text-align: left; color: #5A5A5A;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0; border-radius: 0; min-width: 0 !important;
                                   box-sizing: border-box;}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="submit"],
textarea, button, select { -webkit-appearance: none; -moz-appearance: none; appearance: none;}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea { font:normal 1.2rem "Avenir-condensed", Arial, Helvetica, sans-serif; color: #2f2f2f; padding: 10px; background-color: #F2F2F2; border: 1px solid #CCCCCC; border-radius: 7px;}

select { font:normal 1rem "Avenir-condensed", Arial, Helvetica, sans-serif; color: #2f2f2f; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; border: 1px solid #C1C1C1; border-radius: 5px;}
input[type="checkbox"] { background-color: #fff !important;}
input[type="file"] {}

input[disabled],
select[disabled] { opacity: 0.7; background-color: #fff;}

::placeholder { color: #2f2f2f; opacity: 1;}

/*BOTONES:::::::::::::::::::::::::::::::::::::::::::::::::::*/
.azul {display: inline-block; background-color:#000000; padding:8px 15px; font:normal 1rem "Avenir-condensed", Arial, Helvetica, sans-serif; color:#FFF; text-align: center; border-radius:50px !important; cursor: pointer;
        -webkit-transition: background-color 0.3s ease-in-out;
         transition: background-color 0.3s ease-in-out;}

.big { font-size: 1.5rem !important; padding: 10px 25px !important;}

.celeste {display: inline-block; background-color:#000; padding:8px 15px; font:normal 1rem "Avenir-condensed", Arial, Helvetica, sans-serif; color:#FFF; border:none;  text-align: center; border-radius:50px !important; cursor: pointer;
        -webkit-transition: background-color 0.3s ease-in-out;
         transition: background-color 0.3s ease-in-out;}

.gris {  font:normal 1.2rem "Avenir-condensed", Arial, Helvetica, sans-serif; color:#707070; }

/*TABLAS:::::::::::::::::::::::::::::::::::::::::::::::::::*/
table, tr, th, td {  border-collapse: collapse; vertical-align: middle;}
table.general { width: 100%; text-align: left;}
    table.general thead { position: relative; overflow: hidden;}
    table.general thead td { padding: 15px 25px; background-color: #F2F2F2;}
    table.general thead td:first-child{ border-radius: 10px 0 0 10px;}
    table.general thead td:last-child{ border-radius: 0 10px 10px 0;}
    table.general thead td p { font-size: 1.2rem; color: #363535;}

    table.general tbody {}
    table.general tbody td { padding: 20px 25px; border-bottom: 1px solid #E3E3E3;
                            -webkit-transition: background-color 0.3s ease;
                            transition: background-color 0.3s ease;}

    table.general tbody tr:last-child td { border: none;}
    table.general tbody td p { font-size: 1.2rem; color: #363535;}

    td[data-info="fecha"] { width: 100px;}
    td[data-info="metodo de pago"] {}
    td[data-info="plazo de pago"] { white-space: nowrap;}

    td[data-info="importe"] { text-align: right; white-space: nowrap;}
    p.ImporteTotal {font-family: "Roboto-Medium", Arial, Helvetica, sans-serif;}

    td[data-info="estado de compra"] {}
    td[data-info="estado de pago"] { }

    p[data-estado] { padding-left:25px; background-size: 16px auto !important; }
    p[data-estado="naranja"] { background: url("imagenes/internas/estado-naranja.svg") no-repeat 0 50%;}
    p[data-estado="verde"] { background: url("imagenes/internas/estado-verde.svg") no-repeat 0 50%;}
    p[data-estado="rojo"] { background: url("imagenes/internas/estado-rojo.svg") no-repeat 0 50%;}

    td[data-info="acciones"] {}
    td[data-info="acciones"] a { display: inline-block; vertical-align: middle; font-size: 1rem; padding: 7px 20px; border-width: 1px; border-style: solid; border-radius: 30px; background-color: #fff;}
    a.BtnDetalle { border-color: #363535; color: #363535;}

    /*Desktop*/
    .Desktop table.general tbody tr:hover td { background-color:#E3E3E3; }
    /*.......*/

/* 1 - META CONTENEDORES.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body {}
html { font-size:15px;  /*1rem = 13px*/
      scroll-behavior: smooth;}

body {
    margin:0 auto;
    text-align:center;
	font-family: "Avenir-condensed", Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, rgba(210,210,210,1) 0%, rgba(246,246,246,1) 240px); ;
  }

.SafeZone { width:100%; min-height:100%; margin:0 auto; font-size:0;}
     .Viewport { position:relative; width:100%; max-width:1680px; height:100%;  margin:0 auto;}

/*MODAL::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.Modal { position:fixed; z-index:9995; top:0; left:0;  overflow-x:hidden; overflow-y: auto;  width:100%; height:100%; padding:40px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.8); opacity:0; visibility:hidden;
			-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
			transition: opacity 0.3s ease, visibility 0.3s ease;}

/*Mobile*/
.Mobile .Modal { overflow-x: scroll; -webkit-overflow-scrolling: touch;}
/*......*/

       a.cerrarx { position:absolute; top:30px; right:30px; cursor:pointer; width:35px; height:35px; background: url("imagenes/icono-menu-close.svg") no-repeat 50% 50%; background-size: 15px auto;
                    display: none;}

        .ContentModal { position: relative; overflow: hidden;  margin: auto; min-width: 340px; max-width:815px;  text-align: left; padding: 15px; background-color: #fff; border:1px solid #BFBFBF; border-radius: 5px;
                        opacity: 0;
                        -webkit-transform: translateY(-20px);
                        transform: translateY(-20px);
                        -webkit-transition: -webkit-transform 0.3s ease-in-out 0.15s, opacity 0.3s ease-in-out 0.15s;
                        transition: transform 0.3s ease-in-out 0.15s, opacity 0.3s ease-in-out 0.15s;}


            .ContentModal a.cerrarx { display: block !important; z-index: 100; top: 15px; right: 15px;}

/*MODAL GENERAL*/
    #ModalGeneral .TopModal { padding: 20px 0; border: none;}
    p.TxtMensaje { font-size: 1.1rem; padding: 0 40px; }
    a.BtnTriggerModal { display: inline-block; cursor: pointer;}

    /*modalgeneral*/
    .modalgeneral { overflow: hidden; }
    .modalgeneral #ModalGeneral{ opacity: 1 !important; visibility: visible !important;}
    .modalgeneral #ContentModalGeneral{ opacity:1;
                                -webkit-transform: translateY(0);
                                 transform: translateY(0);}

/*MODAL ABSORCIÓN*/
#ContentAbsorcion { padding: 55px;}
    p#TituloModal { margin-bottom: 15px; font-size: 2.7rem; color: #6d6e71;}

    p.TxtModal { font-size: 1.4rem; color: #6d6e71;}
    #Goteo { margin-top: 40px;}
        p#TituloGoteo { font-size: 1.7rem; color: #6d6e71;}
        #Goteo ul { margin-top: 20px; list-style: none; display: flex; flex-wrap: wrap;}
            #Goteo li { flex: 1; display: flex; flex-wrap: wrap; text-align: center;}
                #Goteo li figure { flex: 0 0 50px;}
                #Goteo li img { max-width: 100%; display: block;}
                #Goteo li p { flex: 1; text-align: left; padding:0 10px; font-size: 1.3rem; color: #6d6e71;}
                #Goteo li p strong { display: block;}

/*MODAL PRODUCTO AGREGADO*/
#ContentAgregado { padding: 50px; text-align: center;}
#ContentAgregado > img { margin-bottom: 10px;}
#ContentAgregado a.azul { margin-top: 5px; padding: 10px 15px !important; font-size: 1.2rem !important;}
#ContentAgregado a.gris { display: block; margin: 15px auto 0 auto;}

.modalagregado { overflow: hidden; }
.modalagregado #ModalAgregado{ opacity: 1 !important; visibility: visible !important;}
.modalagregado #ContentAgregado { opacity:1;
                                  -webkit-transform: translateY(0);
                                   transform: translateY(0);}

/*activos*/
.modalabsocion { overflow: hidden; }
.modalabsocion #ModalAbsorcion{ opacity: 1 !important; visibility: visible !important;}
.modalabsocion #ContentAbsorcion { opacity:1;
                                  -webkit-transform: translateY(0);
                                   transform: translateY(0);}



/*LISTADO DE PRODUCTOS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*HEADER...................................................................................................................................*/
header.general {}
    #TopHeader { display: flex; align-items: center; padding: 15px 0 0 30px;}
        #BtnMenuMobile { display: none;}

        #Logo { flex: 0 0 200px;}
            #Logo img { max-width: 100%; display: block;}

        #Menus { flex: 1; display: flex; justify-content: flex-end;}
            #MenuGeneral { flex: 0 0 auto; display: flex;}
                #MenuGeneral a {flex: 0 0 auto; display: flex; align-items: center; padding: 15px 30px; font-size: 1.2rem; color: #fff; background-color: #000000; margin-right: 2px;}
                #MenuGeneral a:first-child { display: none;}
                #MenuGeneral a:nth-of-type(2) { border-radius: 30px 0 0 30px;}

                /*select*/
                #MenuGeneral a.select { background-color: #3a3838; cursor: default;}
                /*......*/

            #Buscar { flex: 0 1 300px; padding:5px; background-color: #000000;}
                a#BtnBuscarMobile { display: none;}

                #Buscador { display: flex; align-items: center; width: 100%;}
                    .QuickAV { display: flex; width: 100%; border-radius: 8px;}
                    input.search { flex: 1; border-radius: 5px 0 0 5px; border: none; background-color: #fff;}
                    input.btn-search {font-size: 0; border: none; background: #fff url("imagenes/internas/lupa.svg") no-repeat 0 50%; padding: 0 15px; background-size: 20px auto; cursor: pointer; border-radius: 0 5px 5px 0;}

            #AccionesEcomm { display: flex; align-items: center; background-color: #000000; padding: 0 130px 0 15px;}
                #Login { position: relative; flex: 0 0 auto;}
                    a#BtnLogin{ display: block; width: 25px; height: 30px; padding: 0 30px; background: url("imagenes/internas/icono-log-activo.svg") no-repeat 50% 50%; background-size:20px auto;}
                    a#BtnLoginAuth { display: block; width: 25px; height: 30px; padding: 0 30px; background: url("imagenes/internas/perfil.svg") no-repeat 50% 50%; background-size:20px auto;}


                   .DownPanel { position: absolute; overflow: hidden; z-index:9997; top: 30px; border-radius: 7px; max-height: 0;
                                 box-shadow: 0 30px 28px rgba(0,0,0,0.25);
                                 -webkit-transition: max-height 1s cubic-bezier(.25,.8,.25,1);
                                 transition: max-height 1s cubic-bezier(.25,.8,.25,1);}

                     .mueca { position: relative; margin-top: 20px; padding:20px 5px 15px 5px; text-align:center; background-color: #fff; border-radius: 5px;}
                     .mueca::after { content: ""; position: absolute; z-index: 100; top: -15px; right: 15px; display: block; width: 30px; height: 18px; background: url("imagenes/internas/mueca-blanca.svg") no-repeat 0 0; background-size: 100% auto;}


                   #PanelLogin { width: 220px; left:-80px;}
                       #LogAbierto.mueca::after { right: auto;  left: 50%; margin-left: -15px;}
                           #FormPerfil { width:100%; padding: 0;}
                                #DatosPerfil { padding: 0 0 15px 0;}
                                    p.TxtHola { font-size: 2.5rem; color: #646364;}
                                    p.NombreLog { display: block; font-size: 1.3rem; color:#646364;}

                                #AccionesCarrito { display: block; padding-top: 20px; background: url("imagenes/internas/filete.svg") no-repeat 50% 0;}
                                    #AccionesCarrito a { display: block; width: 110px; margin:0 auto 5px auto;}
                                    #BtnCerrarSesion { display: block; margin: 15px auto 10px auto; font:normal 1rem "Avenir-condensed", Arial, Helvetica, sans-serif; color:#888; cursor: pointer; background: none; border: none; border-radius: 0;}

                /*loginmode*/
                .loginmode #Login .DownPanel { max-height: 600px; z-index:9998;}
                /*......*/


           #MiCarrito { position: relative; flex: 0 0 auto; text-align: left;}
                a#BtnListaCarrito { position: relative; display: block; width: 25px; height: 30px; background: url("imagenes/internas/carrito.svg") no-repeat 50% 50%; background-size:23px auto;}
                   #FormCarrito { width: 100%; height: 100%; display: flex;}
                       #BtnListaCarrito input { min-width: 0; pointer-events: none;}

                       #Bag { flex: 0 0 40px; height:40px; text-align: left;}
                           input#cantidad-items { font:normal 12px "Roboto-Medium", Arial, Helvetica, sans-serif; color:#fff; background-color: #7E5C6E; border-radius: 20px; border: none; padding:3px 5px 3px 5px;
                                                 -webkit-transform-origin: 0 0;
                                                 transform-origin: 0 0;
                                                 -webkit-transform: translate(15px, -3px);
                                                 transform: translate(15px, -3px);}

                       input#precio-total { flex: 1; height:40px; text-align:left; font:normal 0.9rem "Roboto-Medium", Arial, Helvetica, sans-serif; background:none; border:none; color:#FFF; padding: 0 8px 0 15px; border-left: 1px solid #4796d5;}

                 #CarritoLista .DownPanel { width:270px; right: -20px;}

                        /*Vacio*/
                        #CarritoVacio { width:100%; padding:45px 0;  background-color:#fff;}
                            #CarritoVacio p { width:100%; font-size: 1.3rem; color:#999999; text-align:center;}

                        /*Lleno*/
                        #CarritoLleno { width:100%; font-size:0px;  background-color:#fff;}
                            #CarritoLleno ul { width:100%; list-style:none; text-align: left;}
                                #CarritoLleno li { position:relative; overflow:hidden; display: flex; flex-wrap: wrap; align-items: center; max-height:500px; padding:5px 17px;
                                                    -webkit-transition:opacity 0.5s ease, max-height 0.5s ease;
                                                    transition: opacity 0.5s ease, max-height 0.5s ease;}

                                    p.QuickCantidad { position: absolute; top: 20px; left: 5px; font-size: 13px; background-color: #fff; padding: 0 7px; border:1px solid #999; border-radius:10px;}

                                    #CarritoLleno figure { flex: 0 0 50px; display: flex; justify-content: center; align-items: center; background-color: #fff;}
                                        #CarritoLleno figure > img { max-width:100%; display:block;}

                                    #CarritoLleno ul div { flex: 1; padding:10px;}
                                        #CarritoLleno p.QuickNombre,
                                        #CarritoLleno p.QuickExtra { font-size:16px; color:#4D4D4D;}

                                    a.QuickClose { flex: 0 0 23px; font-size:14px; line-height:0;  text-align:center; color:#9B9B9B; cursor:pointer;}

                            #BarraTotal { width: 100%; text-align: center; padding:20px 0 5px 0; background: url("imagenes/internas/filete.svg") no-repeat 50% 5px;}
                                #BarraTotal p.PrecioTotal {  font:normal 2rem "Roboto-Medium", Arial, Helvetica, sans-serif; color: #111; padding:0;}

                            a#BtnMiCarrito { margin: 0 auto; width: 120px;}


                        /*Desktop*/
                        .Desktop a.Close:hover { color:#000;}
                        .Desktop #CarritoLleno li.hover { opacity: 0.5;}
                        .Desktop #CarritoLleno li.hover p { text-decoration:line-through;}


                        /*carritomode*/
                        .carritomode #MiCarrito .DownPanel { max-height: 600px; z-index:9998;}

                        /*out*/
                        #CarritoLleno li.out { max-height:0px;}
                        /*...*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/
main {}
    #NavSocialFlotante { position: fixed; z-index: 8000;  bottom: 40px; right: 20px; text-align: center;}
        #NavSocialFlotante a { width: 40px; height: 40px; margin: 5px auto; display: block; border-radius: 50%; box-shadow: 0 0 2px #8a8a8a;
                              -webkit-transition: background-color 0.3s ease;
                              transition: background-color 0.3s ease;}

        #NavSocialFlotante a[title*="Instagram"] { background:#fff url("imagenes/internas/instagram.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="Facebook"] { background:#fff url("imagenes/internas/facebook.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="Youtube"] { background:#fff url("imagenes/internas/youtube.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="WhatsApp"] { background:#fff url("imagenes/internas/wapp-blanco.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a.BtnWapp { background-color: #26d065;}

    /*Desktop*/
    .Desktop #NavSocialFlotante a:hover { background-color: #D4D4D4;}
    /*.......*/


    #BtnCerrarFiltro { display: none;}

    #ContentGeneralInterna { display: flex; padding-top: 70px;}
        #PanelLateral { flex: 0 0 250px; text-align: left; padding-right: 70px;}
            #PanelLateral h2 { font-size: 3rem; color: #707070; margin-bottom: 15px;}

                .FiltroSubCategoria { padding-top: 15px;}
                    .FiltroSubCategoria > p { font-size: 1.3rem; color: #363535;}

                    .FiltroSubCategoria > div { display: block; width: 100%; margin:10px 0 30px 0;}
                        .FiltroSubCategoria a { display: flex; align-items: center; margin: 15px 0; font-size: 1.3rem; color:#707070;}
                        .FiltroSubCategoria a p { flex: 1; color: #707070;}
                        .FiltroSubCategoria a img { margin-right: 5px;}

                        /*select*/
                        .FiltroSubCategoria a.select p { color: #5692CD;}
                        /*......*/

                 #FiltroGenero a img { width: 8px;}

                 #FiltroAbsorcion a img {  width: 25px; margin-right: 8px;}
                 #FiltroAbsorcion a span { display: block;}
                 a#BtnSaberMas { display: inline-block; padding: 5px 15px 5px 35px; border-radius: 5px;  background: #808080 url("imagenes/icono-pregunta.svg") no-repeat 10px 50%; color: #fff; background-size: 18px auto;}


        #PanelCentral { flex: 1;}
            #TopPanelCentral { padding-top: 7px;}
                #NavFiltros { display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
                    #BtnFiltro { display: none;}

                    #OrderMode { flex: 1; text-align: right; margin-right: 20px;}
                         #OrderMode select { width:120px;}

                    #NavFiltros #BtnVerTalles { display: none;}

                    #ViewMode { flex: 0 0 80px; display: flex; justify-content: flex-end;}
                         a#BtnModoLista,
                         a#BtnModoGrilla { flex: 0 0 30px; height: 30px; border: 1px solid transparent; border-radius: 50%;}

                         a#BtnModoLista { margin-left: 10px; background: url("imagenes/internas/modo-lista.svg") no-repeat 50% 50%; background-size: 15px auto, 15px auto;}
                         a#BtnModoGrilla { background: url("imagenes/internas/modo-grilla.svg") no-repeat 50% 50%; background-size: 15px auto, 15px auto;}

                    /*select*/
                    #ViewMode a.select {  cursor: default; border-color:#7d7b7b;}
                    /*.......*/

            #BottomPanelCentral { margin-top: 20px;}
                #ListaProductos.Items { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); width: 100%;}

                /*GLOBAL ITEMS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
                 .Items {}
                     a.BtnAmpliarProducto { position:relative; overflow: hidden; text-align: center;  background-color: #F2F2F2; border-radius:10px;
                                           box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                                           -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
                                           transition: all 0.3s cubic-bezier(.25,.8,.25,1);}

                     .Items article {  display: flex; flex-direction: column; height: 100%; margin-bottom: -30px;}

                        .Items header { position: relative; overflow: hidden; flex: 0 0 250px; width: 100%; height: 250px; display: flex; align-items: center; justify-content: center; background-color: #fff;}
                            .ExtraTag { position: absolute; display: block; top: 10px; left: 10px; width: 40px; height: 40px;}
                            span[data-genero="ellas"] { background: url("imagenes/articulos/ellas.svg") no-repeat 50% 50%;}
                            span[data-genero="ellos"] { background: url("imagenes/articulos/ellos.svg") no-repeat 50% 50%;}
                            span[data-genero="unisex"] { background: url("imagenes/articulos/todos.svg") no-repeat 50% 50%;}

                                .Items header img { max-width:100%; max-height: 100%; display:block; margin: 0 auto;
                                                     -webkit-transition: -webkit-transform 0.3s ease-in-out;
                                                     transition: transform 0.3s ease-in-out;}

                        .Items footer { flex: 1; display: flex; flex-direction: column; padding: 10px; text-align: left;
                                        -webkit-transform-origin: 50% 0;
                                        transform-origin: 50% 0;
                                        -webkit-transform: translateY(-30px);
                                        transform: translateY(-30px);}

                           .InfoItem { flex: 1; display: flex; flex-direction: column; background-color: #fff; padding: 18px; border-radius: 5px;}
                           .InfoItem > * {}
                                .InfoItem h3 { flex: 0 0 auto; font-size: 1.8rem;  color: #707070;}

                                .PreciosTag { flex: 1; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
                                    .PreciosTag p.Precio { font:normal 1.6rem "Roboto-Medium", Arial, Helvetica, sans-serif; line-height: 1.7em !important; color: #111;}
                                    .PreciosTag p.PrecioAnterior { margin-left: 10px; font:normal 1.3rem "Roboto-Medium", Arial, Helvetica, sans-serif; color: #B8B8B8; text-decoration:line-through;}

                                .ExtraItem { flex: 0 0 auto; position: relative; overflow: hidden; max-height: 0;
                                            -webkit-transition: max-height 0.5s ease;
                                            transition: max-height 0.5s ease;}

                                    .ExtraAcordeon { display: flex; flex-wrap: wrap; align-items: center;}
                                        .ExtraColor { flex: 1; display: flex; margin-bottom: 5px;}
                                        .ExtraColor img { flex: 0 0 auto; width: 15px; margin-right: 5px;}

                                        .ExtraTalle { flex: 0 0 auto; display: flex; justify-content: flex-end; margin-bottom: 5px;}
                                        .ExtraTalle p { font-size: 1.1rem; margin-left: 10px; color: #000;}
                                        .ExtraTalle p:first-child { margin-left: 0;}

                               /*Desktop*/
                               .Desktop a.BtnAmpliarProducto:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
                               .Desktop a.BtnAmpliarProducto:hover .ExtraItem { max-height: 100px;}
                               /*.......*/

                               #NavPaginado { width:100%; text-align:center; margin: 40px 0 80px 0;}
                                    #NavPaginado ul { list-style:none; margin: 0 auto; width: 100%;  max-width: 800px; display: flex; align-items: center; justify-content: center;}
                                    #NavPaginado li { flex: 0 0 auto; font-size:1rem; color:#666666; margin:0 5px;}
                                    #NavPaginado li a { width: 40px; height: 40px; display:flex; align-items: center; justify-content: center; cursor:pointer; border:1px solid transparent;}
                                    #NavPaginado li.PrevPaginado a,
                                    #NavPaginado li.NextPaginado a { border-radius: 50%;}

                                    #NavPaginado li.PrevPaginado a { background:url("imagenes/internas/flecha-left.svg") no-repeat 50% 50%; background-size: 10px auto;}
                                    #NavPaginado li.NextPaginado a { background:url("imagenes/internas/flecha-rigth.svg") no-repeat 50% 50%; background-size: 10px auto;}
                                    #NavPaginado li.Number a { font:normal 1.2rem "Roboto-Medium", Arial, Helvetica, sans-serif; color: #938F94;  padding:5px; border-radius: 50%;}

                                    /*Desktop*/
                                    .Desktop #NavPaginado li:not(.select):hover a { opacity:0.7;}

                                    /*select*/
                                    #NavPaginado li.select a { cursor:default; color: #000; border-color: #000;}
                                    /*.......*/

                 /*listamode*/
                .listamode #ListaProductos.Items { grid-template-columns: repeat(auto-fill, minmax(100%, 100%));}
                .listamode #ListaProductos.Items article { flex-direction: row;}
                .listamode #ListaProductos.Items footer { align-items: flex-start; justify-content: center;
                                                         -webkit-transform: none;
                                                         transform: none;}

                .listamode #ListaProductos.Items .InfoItem { flex: 1; justify-content: center; width: 100%;}

                .listamode #ListaProductos.Items .InfoItem h3 { flex: 0 0 auto; font-size: 2rem; text-align: left;}
                .listamode #ListaProductos.Items .PreciosTag { flex: 0 0 auto; justify-content: flex-start; margin-top: 0;}
                .listamode #ListaProductos.Items .PreciosTag p.Precio { font-size: 2rem;}
                .listamode #ListaProductos.Items .ExtraItem { max-width: 200px; max-height: none;}
                /*.............*/

     #Pie { width: 100%; background:url("imagenes/olas-footer.svg") no-repeat 100% 50%, url("imagenes/foto-footer.jpg") no-repeat 0 100%; background-size: 80% auto, auto 100%; background-color: #fff;}
        #ContentPie { display: flex; flex-wrap: wrap; align-items: center; width: 100%; height: 200px;}
            #Pie p { flex: 1; font-size: 2.5rem; padding: 0 20px 0 170px; text-align: left; color: #5692CD;}

            #LogoPieEldertec { flex: 0 0 auto; padding-right: 30px;}
            #LogoPieEldertec img { width: 130px; display: block; margin-left: auto;}
            #LogoPieEldertec figcaption { display: block; text-align: center; margin-top: 5px; font-size: 13px; color: #676767;}

    /*Talles*/
    #Talles { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin-bottom: 40px;}
        #Talles > div { position: relative; overflow: hidden; border-radius: 8px;  flex: 1; max-width: 420px; display: flex; flex-wrap: wrap; background-color: #fff; margin-right: 10px;
                        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}

            .FotoTalles { flex: 0 0 180px; text-align: left;}
                .FotoTalles figure { display: block; padding-left: 20px;}
                .FotoTalles img { width: 70px;
                                  -webkit-transform-origin: 0 0;
                                  transform-origin: 0 0;
                                  -webkit-transform: rotate(23deg) translateY(-15px);
                                  transform: rotate(23deg) translateY(-15px);}

            .DetalleTalles { flex: 1; padding: 10px 0;}
                .TablaTalles { text-align: left; cursor: default;}
                .TablaTalles td { padding: 8px 20px 8px 8px;}
                .TablaTalles td:last-child { text-align: center;}
                .TablaTalles thead td { border-bottom: 1px solid #E2E2E2;}
                .TablaTalles tbody td:first-child { border-radius: 5px 0 0 5px;}
                .TablaTalles tbody td:last-child { border-radius: 0 5px 5px 0;}
                   .TablaTalles td p { color: #6D6E71;}
                    .TablaTalles td:last-child p { color: #000 !important;}

                    .TablaTalles thead td p { font-size: 1.3rem;}
                    .TablaTalles tbody td p { font-size: 1.1rem;}

            /*Desktop*/
            .Desktop .TablaTalles tbody tr:hover td { background-color: #E0E0E0;}
            /*.......*/

            #TalleEllas .FotoTalles { background: url("imagenes/internas/talles-ellas.png") no-repeat 100% 0; background-size: 100% auto;}
            #TalleEllos .FotoTalles { background: url("imagenes/internas/talles-ellos.png") no-repeat 100% 0; background-size: 100% auto;}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER...................................................................................................................................*/
footer.general { text-align: left; background-color: #fff; border-top: 5px solid #f2f2f2;}
    #TopFooter { display: flex; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px;}
        #Sitemap { flex: 0 0 auto; display: flex; flex-wrap: wrap;}
            #Sitemap > div { flex: 0 0 auto; padding-right: 60px;}
            .CategoriaFooter { display: block; font-size: 1.3rem !important; color: #5F6F7C !important; margin-bottom: 10px !important;}

                #Sitemap ul { display: inline-block; vertical-align: top; margin-right: 25px;}
                #Sitemap ul li { display: block; margin-bottom: 5px;}
                #Sitemap ul a { font-size: 1.3rem; color: #363535; margin-bottom: 5px;}

                #FooterProductos ul { display: flex; flex-wrap: wrap; max-width: 320px;}
                #FooterProductos ul li { flex: 0 1 50%; padding-right: 10px;}

        .NavSocial { flex:1; display: flex;}
            .NavSocial a { flex: 0 0 40px; height: 40px; border: 1px solid #AAA9A9; border-radius: 50%; margin-right: 10px; }
            .NavSocial a[title*="Instagram"] { background:#fff url("imagenes/internas/instagram.svg") no-repeat 50% 50%;}
            .NavSocial a[title*="Facebook"] { background:#fff url("imagenes/internas/facebook.svg") no-repeat 50% 50%;}
            .NavSocial a[title*="Youtube"] { background:#fff url("imagenes/internas/youtube.svg") no-repeat 50% 50%;}
            .NavSocial a[title*="WhatsApp"] { background:#fff url("imagenes/internas/wapp.svg") no-repeat 50% 50%;}

        #LogoFooter { flex: 0 0 200px;}
        #LogoFooter img { max-width: 100%; display: block;}

    #BottomFooter { width: 100%; padding: 20px 0; background-color: #111;}
        #BottomFooter .Viewport { display: flex; flex-wrap: wrap; }
            #Legales { flex: 1;}
            #Cuno { flex: 1; text-align: right;}

            #BottomFooter p,
            #BottomFooter a { font-size: 12px; color: #fff;}

/*RESULTADO BUSQUEDA*/
    p#TxtResultado { font-size: 1rem;}

/*DETALLE DE PRODUCTOS*/
    /*Modal*/
    #ModalFotos { background-color: #fff;}
        .NavArrow { position:absolute; z-index:100; top:50%; left:0; width:100%;}
            .NavArrow a { font-size:50px; color:#000; cursor:pointer;}
            .NavArrow a.Prev,
            .NavArrow a.Next { width: 30px; height: 30px; display: block;}

            .NavArrow a.Prev { float:left; margin-left: 20px; background: url("imagenes/internas/flecha-left.svg") no-repeat 50% 50%; background-size: 20px auto;}
            .NavArrow a.Next { float:right; margin-right: 20px; background: url("imagenes/internas/flecha-rigth.svg") no-repeat 50% 50%; background-size: 20px auto;}

        #ContentFotos { width:100%; padding: 0; max-width: 600px;}


 /*activos*/
 .modalfotos { overflow: hidden; }
 .modalfotos #ModalFotos { opacity: 1 !important; visibility: visible !important;}
 .modalfotos #ContentFotos { opacity:1;
                              -webkit-transform: translateY(0);
                               transform: translateY(0);}

    /*articulo*/
    #Articulo { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; max-width: 1200px; padding: 0 30px; margin: 45px auto;}
        #ArticuloFoto { position:relative; overflow:hidden; flex: 0 0 500px; background-color: #FFFFFF; border: 1px solid #D2D1D1; border-radius: 10px;}
             .slide { position:relative;}
                .slide .SlideItems { position:relative; overflow:hidden; width:100%; height: 500px;}
                   .SlideItems > div { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; opacity: 0; visibility: hidden;
                                     background-repeat: no-repeat;
                                    -webkit-transform: scale(0.8);
                                    transform: scale(0.8);
                                    -webkit-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
                                    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;}

                  .slide div.Video { display: block; height: 100%;}
                       .slide a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
                       .slide img { max-width: 100%; max-height: 100%; display: block;}
                       .slide iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}


               .slide .NavBullets { position:absolute; z-index:200; width: auto; left:50%; bottom:0; text-align:center; background-color: #fff; padding: 10px; border-radius: 10px 10px 0 0;
                                    -webkit-transform: translateX(-50%);
                                    transform: translateX(-50%);}

                  .slide .NavBullets ul { list-style:none; margin:0 auto;}
                  .slide .NavBullets li { display:inline-block; vertical-align:middle; width:10px; height:10px; margin:0 7px;  background-color: #ccc; border-radius: 50%;  cursor:pointer;
                                            -webkit-transition: color 0.5s ease-in-out;
                                            transition: color 0.5s ease-in-out;}

          /*select*/
          .slide div.select { opacity: 1; visibility: visible;
                              -webkit-transform: scale(1);
                              transform: scale(1);}

          .slide .NavBullets li.select { background-color:#06489A; cursor:default;
                                         -webkit-transform: scale(2);
                                         transform: scale(2);}
          /*.......*/

          .EtiquetasRopa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 20px 10px;}
              .EtiquetasRopa figure { flex: 1; margin: 10px;}
              .EtiquetasRopa img { max-width: 100%; display: block;}

          #ExtraArticulo .EtiquetasRopa { display: none;}


        #ArticuloInfo { flex: 1; text-align: left; padding: 30px 0 30px 50px;}
             #Breadcrumb { display: flex; flex-wrap: wrap; width: 100%;}
                #Breadcrumb a,
                #Breadcrumb p { display: inline-block; vertical-align: middle; font-size: 15px; color: #363535;}

                #Breadcrumb a > p { display: inline-block; vertical-align: baseline;}
                #Breadcrumb a::after { content: ""; display: inline-block; vertical-align: baseline; margin: 0 5px; width: 10px; height: 10px; background: url("imagenes/internas/bullet.svg") no-repeat 50% 100%; background-size: 5px auto;}

             #ArticuloInfo header {}
                 #ArticuloInfo h2 { font-size: 4.5rem; color: #363535; margin-bottom: 5px;}
                 #ArticuloInfo h3 { font-size: 1.3rem; line-height: 1.5em !important; color: #363535; width: 100%; max-width: 450px;}

                #FiltrosArticulo { display: flex; flex-wrap: wrap; width: 100%;  max-width: 470px; padding: 20px 0 25px 0;}
                    .CheckChoice { display: flex; align-items: center; width: 100%; text-align: left; margin: 20px 0;}
                        .CheckChoice > p { flex: 0 0 auto; font-size: 1.1rem; color: #707070; margin-right: 10px;}
                        /*.CheckChoice label {flex: 0 0 45px; margin: 0 10px; border-radius: 50%;}*/
                        .CheckChoice select { flex: 1; font-size: 1.3rem !important;}
                        #FiltroColor,
                        #FiltroTalle { flex: 1; margin-right: 20px;}
                        a#BtnVerTalles { font-size: 1.4rem; margin-left: 15px; text-decoration: underline !important;}

                        #FiltroCantidad { flex: 1 1 100%;}
                        #FiltroCantidad input[name="cantidad"] { width: 70px; padding: 5px 10px; text-align: center; font:normal 1.3rem "Avenir-condensed", Arial, Helvetica, sans-serif; background-color: #fff; border:3px solid #5A5A5A; border-radius: 25px; }


                        /*input[type=radio] { position: absolute; opacity: 0;  width: 0; height: 0;}
                        input[type=radio] + img,
                        input[type=radio] + span { cursor: pointer; width: 35px; height: 35px; padding: 2px; border:3px solid transparent; border-radius: 50%;}
                        input[type=radio] + span { display: block; text-align: center; font-size: 1.5rem;}

                        #FiltroCantidad input[name="cantidad"] { width: 70px; padding: 5px 10px; font:normal 1.5rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; background-color: #fff; border:3px solid #5692CD; border-radius: 25px; }*/

                        /*checked*/
                        /*input[type=radio]:checked + img,
                        input[type=radio]:checked + span { border-color:#5692CD; background-color: #fff; }

                        input[type=radio]:checked + span {font-family:"Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #000;}*/
                        /*.......*/

                 #AccionesArticulos { display: flex; flex-wrap: wrap; padding-bottom: 25px;}
                    #PrecioArticulo { flex: 0 0 auto; display: flex; margin-right: 50px; }
                        .PrecioUnitario {font:normal 3rem "Roboto-Medium", Arial, Helvetica, sans-serif; color: #111;}

                        .PinAyuda { position: relative; padding:0 10px;}
                            a.BtnAyuda { position: relative; width: 20px; height: 20px; display: block; background: url("imagenes/internas/pin-ayuda.svg") no-repeat 50% 50%;}

                            .GloboAyuda {  position: absolute;  bottom: 60px; left: -5px; display: block; background-color: #777777; text-align: left; padding: 10px; border-radius: 7px;
                                            opacity: 0; visibility: hidden;
                                            -webkit-transition: opacity 0.3s cubic-bezier(.25,.8,.25,1), visibility 0.5s ease-in-out;
                                            transition: opacity 0.3s cubic-bezier(.25,.8,.25,1), visibility 0.5s ease-in-out;}

                                .GloboAyuda::before { content: ""; position: absolute; bottom: -12px; left: 25px; display: block; width: 12px; height: 12px; background: url("imagenes/internas/mueca-gris.svg") no-repeat 0 0; background-size: 100% auto;}
                                .GloboAyuda p {font:normal 11px "Roboto-Medium", Arial, Helvetica, sans-serif; line-height: 17px !important; color: #fff;}

                            .AyudaPrecio .GloboAyuda { width: 150px;}

                            /*Desktop*/
                            .Desktop .PinAyuda:hover .GloboAyuda { opacity: 1; visibility: visible;}

                            /*Mobile*/
                            .Mobile .PinAyuda.open .GloboAyuda { opacity: 1; visibility: visible;}
                            /*.......*/

                 #ExtraArticulo { display: flex; flex-wrap: wrap; width: 100%; padding-top: 35px; background: url("imagenes/internas/filete.svg") no-repeat 50% 0;}
                     .ExtraModulo {}
                         .ExtraModulo > p:first-child { font-size: 1.1rem; color: #707070; margin-bottom: 5px;}
                         p.ValorExtra { font-size: 2rem; color: #363535;}
                         p.ValorExtra img,
                         p.ValorExtra span { display: inline-block; vertical-align: middle;}

                         p.ValorExtra img { width: 20px; margin-right: 5px;}

                    #Fibra { flex: 1 1 100%; padding-bottom: 30px;}
                         p.ValorFibra {font-size: 1.3rem; line-height: 1.5em !important; color: #363535;}

                   #Codigo  { flex: 0 0 auto; padding-right: 30px;}
                   #NivelAbsocion { flex: 0 0 auto; border-left: 1px solid #A2A2A2; padding:0 30px;}
                   #PorPack { flex: 1; border-left: 1px solid #A2A2A2; padding:0 30px;}

    /*Modulo tecnologias*/
    #MaximaTecnologia { text-align: center; padding:60px 0; background-color: #fff;}

       #MaximaTecnologia h3 {font: normal 2.7rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71; margin: 0 auto 20px auto;}

       #GraficoTecnologia { width: 100%; margin: 0 auto; max-width: 1200px; min-height: 310px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;  background: url("imagenes/grafico.png") no-repeat 50% 50%;}
            #GraficoTecnologia div { flex: 0 1 auto;}
            #GraficoTecnologia p { position: relative; text-align: center; font-size: 1.5rem;  color: #6D6E71; margin: 5px; padding: 15px; border:2px solid #6D6E71; border-radius: 20px; background-color: #fff;}
            #GraficoTecnologia p::after {content: ""; position: absolute; display: block; width: 250px; height: 24px; background: url("imagenes/filete-grafico.svg") no-repeat 100% 50%; background-size: auto 100%;}
            p.capa-exterior::after { top: 50%; right: -250px;
                                    -webkit-transform: translateY(-12px);
                                    transform: translateY(-12px);}

            p.capa-interior::after { top: 50%; right: -235px;
                                    -webkit-transform-origin: 0 0;
                                    transform-origin: 0 0;
                                    -webkit-transform: rotate(180deg) translate(194px, -12px);
                                    transform: rotate(180deg) translate(194px, -12px);}

            .Referencia { display: none;}

       #CaracteristicasTecnologia { display:flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 1100px; margin: 30px auto 0 auto;}
           #CaracteristicasTecnologia > div { text-align: left; margin: 0 15px;}
               ul.General { list-style: none;}
                   ul.General li {  display: flex; flex-wrap: wrap; align-items: center; padding-right: 10px;}
                       ul.General figure { flex: 0 0 50px;}
                       ul.General img { max-width: 100%; display: block;}

                       ul.General h4,
                       ul.General h6 { position: relative; flex: 1; padding-left: 15px;  color: #6D6E71;}

                       ul.General h4 { font-size: 1.5rem; padding-left: 0; margin-left: 10px;}
                       ul.General h6 { font-size: 1.4rem; padding-left: 15px;}

                       ul.General h6::after{ content:"•"; position: absolute; left: 0; top: 0; font-size: 15px; color:#6D6E71;  display: block;}


          #Atributos {flex: 2;}
              #Atributos ul.General { display: flex; flex-wrap: wrap;}
              #Atributos ul.General li { flex: 0 0 50%; margin-bottom: 10px;}

          #Cuidados {flex: 1;}
              #Cuidados h5 { margin-bottom: 5px; font:normal 1.5rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71;}

              #Lavado { display: flex; flex-wrap: wrap;}
                  #Lavado figure { flex: 1; padding: 5px;}
                  #Lavado img { max-width: 100%; display: block;}

/*REGISTRO*/
.Cuenta #ContentGeneralInterna { justify-content: center; align-items: center; width: 100%; min-height: 680px; padding-bottom: 70px;}

    #ActiveForm { width: 100%; max-width: 350px; margin: 0 auto; text-align: left; padding:35px; background-color: #fff; border-radius: 10px; }
    .sombra {box-shadow: 0 3px 3px rgba(0,0,0,0.22);}

        #ActiveForm h2 { font-size: 2rem; color: #363535; margin-bottom: 10px;}

        form.general { text-align: center;}
            form.general > div { width:100%;}

                form.general input[type="text"],
                form.general input[type="email"],
                form.general input[type="tel"],
                form.general input[type="password"],
                form.general select,
                form.general textarea { width:100%; height: 45px;  margin-bottom:10px;}

                form.general select { font-size: 1.2rem;}

                form.general textarea { height:120px; overflow:auto; margin-bottom:10px;}

                form.general input[type="submit"] { margin: 5px auto 0 auto;}

                form.general > div.fila-fluid { display: flex; }
                    form.general > div span { display: block;}
                    form.general > div.fila-fixed span { padding-right:10px !important;}
                    form.general > div.fila-fluid span { flex: 1; margin-right: 10px;}

                        form.general label { display: block; margin-bottom: 5px; margin-top: 10px;}

                        form.general .checkbox-group { display: flex; align-items: center; margin-bottom: 25px;}
                            form.general .checkbox-group input[type="checkbox"] { flex: 0 0 15px; margin-right: 10px;}
                            form.general .checkbox-group label { flex: 1; margin-bottom: 0; margin-top: 0;}

/*LOGIN*/
    #BtnResetPass { display: block; text-align: center; margin: 10px 0; font: normal 1.2rem "Avenir-condensed", Arial, Helvetica, sans-serif; color: #363535;}
    #AccesoRegistro { padding:30px 0 0 0; background: url("imagenes/internas/filete.svg") no-repeat 50% 10px;}

/*RECUPERAR*/
    p.NotaForm { margin-bottom: 10px; font-size: 1.2rem; color: #4B4B4B; text-align: center;}

/*CONTACTO*/
    #ContactoPage #ActiveForm { max-width: 500px;}
        #Captcha { margin-bottom: 10px;}

/*MI CARRITO*/
    #ContentBackEnd { width: 100%; max-width: 1000px; margin: 0 auto; text-align: center;}
        #AlertaCarrito { display: flex; justify-content: center; align-items: center; width: 100%; height: 400px;}
             #AlertaCarrito > div { padding: 30px; border-radius: 5px;}
             #AlertaCarrito p { font-size: 1.9rem; color: #999999;}

        /*display*/
        #AlertaCarrito { display: none;}
        /*.......*/

        #DetallePedido { display: flex; flex-wrap: wrap; justify-content: center;}
            #ListaMiCarrito { flex: 1; margin-right: 15px;}
                #ListaMiCarrito header { padding: 25px 0 15px 0; margin-bottom: 5px; background: url("imagenes/internas/filete.svg") no-repeat 50% 100%;}
                    #ListaMiCarrito h2,
                    #ResumenPedido h3 { text-align: center; font-size: 2rem; color: #000000;}

                    #ListaPedido { width:100%; margin:0; font-size: 1rem; color:#333;}
                        #ListaPedido td {  vertical-align:middle; padding: 10px;}

                        td.miniatura { width: 80px; text-align: left;}
                        td.descripcion { text-align: left;}
                        td.cantidad { width: 80px; text-align: center;}
                        td.precioparcial { white-space:nowrap; text-align: right;}
                        td.cerrar { width: 80px; text-align: center;}

                        #ListaPedido tbody td { border-bottom:1px solid #ccc;
                                                -webkit-transition: background 0.3s ease-in-out, opacity 0.3s ease;
                                                transition: background 0.3s ease-in-out, opacity 0.3s ease;}

                        #ListaPedido tbody tr:last-child td { border: none;}
                          #ListaPedido tbody td p { font-size: 1.6em;  color: #363535; display: inline-block; vertical-align: middle;}
                          #ListaPedido tbody td img { display: inline-block; vertical-align: middle;}

                           a.BtnEliminarItem { width:30px; height: 30px; display: block; margin: 0 auto; border: 1px solid #000; background: url("imagenes/icono-menu-close.svg") no-repeat 50% 50%; background-size: 10px auto; border-radius: 50%;}
                           input.cantidaditem { width: 100%; border: 1px solid #999; border-radius: 20px; padding: 5px 5px 5px 10px; font-family: "Roboto-Medium", Arial, Helvetica, sans-serif; color: #363535; background-color: #fff; text-align: left;}
                           td.precioparcial p { font-family:"Roboto-Medium", Arial, Helvetica, sans-serif;}

                       /*Deskotp*/
                        #ListaPedido tr.hover td { opacity: 0.5;}

                        #ListaPedido tr.hover p,
                        #ListaPedido tr.hover input {  text-decoration:line-through;}

                        /*out*/
                        #ListaPedido tr.out td { opacity:0;}
                        /*......*/


            #ResumenPedido { flex: 0 0 300px; align-self: flex-start;  margin-left: 15px; padding: 25px 2px 2px 2px; border-radius: 7px; background-color: #fff; text-align: center;}
                #ResumenPedido header { display: block; width: 90%; margin: 0 auto; text-align: center; padding:0 15px 15px 15px; background: url("imagenes/internas/filete.svg") no-repeat 50% 100%;}

                #DetalleResumen { padding: 15px 0;}
                    #DetalleResumen > div { display: flex; flex-wrap: wrap; align-items: center; text-align: left; padding-top: 15px;}
                        #ResumenPedido .Leyenda { flex: 1; text-align: left; font-size: 1.5rem; color: #333333; padding-left: 25px;}
                        #ResumenPedido .PrecioResumen { flex: 1rem; text-align: right; font:normal 1.5rem "Roboto-Medium", Arial, Helvetica, sans-serif; padding-right: 25px;}

                 #ResumenPedido footer { margin-top: 20px; padding: 15px 0; background-color: #F2F2F2; border-radius: 5px;}
                    #ResumanTotal { display: flex; flex-wrap: wrap; align-items: center; text-align: left; margin-bottom: 20px;}
                    #ResumanTotal .PrecioResumen { font-size: 2rem; color: #111;}

                    input#BtnPagar { padding-left: 25px !important; padding-right: 25px !important;}

/*MIS DATOS*/
#MiCuenta #ContentGeneralInterna { align-items:flex-start;}
    #GrupoMiCuenta { display: flex; flex-direction: column; width: 100%; max-width: 1000px;}

       #NavMiCuenta { flex: 0 0 auto; width: 100%; display: flex; justify-content: center; margin-bottom: 20px; }
            #NavMiCuenta a { flex: 0 0 auto; font-size: 1.5rem; padding: 7px 15px; margin-right: 15px; text-align: center; color: #6C6C6C; box-shadow: inset 1px 0 0 0 #9A9A9A, inset -1px 0 0 0 #9A9A9A, inset 0 1px 0 0 #9A9A9A, inset 0 -1px 0 0 #9A9A9A; border-radius: 30px;
                              -webkit-transition: box-shadow 0.5s ease, color 0.5s ease;
                              transition: box-shadow 0.5s ease, color 0.5s ease;}

            /*#NavMiCuenta > div {}
                a#BtnSeguirComprando {  max-width: 125px; display: block; font-size: 1.1rem; padding: 7px 15px; border:1px solid #707070; border-radius: 30px;}*/

            /*select*/
            #NavMiCuenta a.select { color: #000000; box-shadow: inset 2px 0 0 0 #000000, inset -2px 0 0 0 #000000, inset 0 2px 0 0 #000000, inset 0 -2px 0 0 #000000;}
            /*......*/

       #PanelMiCuenta {flex: 0 0 auto; width: 100%;}

/*MIS COMPRAS*/
    /*Modal*/
    .ModalMisCompras .ContentModal { padding: 0; max-width: 700px !important;}
        .ModalMisCompras .TopModal { text-align: center; padding: 30px 20px 15px 20px; border: none;}
        .ModalMisCompras .TopModal p { font-size: 2rem;}

        .ModalMisCompras .BottomModal { padding: 0 20px;}

        #ModalDetalleCompra {}
            #ModalDetalleCompra .BottomModal { padding: 0;}
                .ContainerTableModal { position: relative; overflow: auto; width: 100%; max-height: 300px; padding: 0 25px; background-color: #fff; }
                    .ModalMisCompras table.general { width: 100%;}
                    .ModalMisCompras table.general tbody td { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #CCCCCC !important;}
                    .ModalMisCompras table.general tbody td p { font-size: 1.3rem;}

                    .ModalMisCompras table.general td.miniatura { padding-left: 10px; padding-right: 0;}
                    .ModalMisCompras table.general td.articulo { padding-left:10px;}
                    .ModalMisCompras table.general td.cantidad { width: 25%; text-align: left;}
                    .ModalMisCompras table.general td.importe { width: 25%; text-align: right;}
                    .ModalMisCompras table.general tbody td[data-info="importe"] p { font-family:  "Roboto-Medium", Arial, Helvetica, sans-serif; }


                    #BaseTable { width: 100%; padding:0 25px;}
                        #ExtraDetalle {}
                            .ConceptoResumen { padding: 10px 25px 10px 0; border-bottom: 1px solid #CCCCCC;}
                                .ConceptoResumen:last-child { border: none;}
                                    .ConceptoResumen p { display: inline-block; vertical-align: middle; width: 50%; padding-left: 25px;}
                                    .ConceptoResumen p:first-child { font-size: 1.2rem; color: #363535; text-align: left;}
                                    .ConceptoResumen p:last-child { white-space: nowrap; text-align: right;}
                                    p.ValorEnvio { font:normal 1.3rem "Roboto-Medium", Arial, Helvetica, sans-serif; text-align: right; color: #363535;}
                                    p.ValorTotal { font:normal 2rem "Roboto-Medium", Arial, Helvetica, sans-serif; color: #5A5A5A;  text-align: right;}

                    #ExtraDataEnvio { display: flex; flex-wrap: wrap; margin:0; padding:15px 35px; text-align: left; background-color:#F2F2F2; border-radius: 5px;}
                       #ExtraDelivery { flex: 1;}
                           #ExtraDelivery > div,
                           #ExtraEntrega > div {  display: flex; flex-wrap: wrap; padding: 10px 0; margin: 0 15px;  border-bottom: 1px solid #CCCCCC;}

                           #ExtraDelivery > div > *,
                           #ExtraEntrega > div > * { flex: 1; padding-right: 10px; font-size: 1.1rem; color: #363535;}

                           #ExtraDelivery > div > p:last-child,
                           #ExtraEntrega > div > p:last-child { color: #363535;}

                           #EstadoPago p,
                           #EstadoEnvio p { color: #363535;}


                       #ExtraEntrega { flex: 1;}

                       #ExtraObservaciones { flex: 1 1 100%; padding: 10px 15px;}
                          #ExtraObservaciones p { font-size: 1.1rem; color: #363535;}


     /*modales mis compras*/
	.modaldetalle { overflow: hidden; }
	.modaldetalle #ModalDetalleCompra { opacity: 1 !important; visibility: visible !important;}
    .modaldetalle #ContenidoModalDetalleCompra { opacity:1;
                                                -webkit-transform: translateY(0);
                                                 transform: translateY(0);}
    /*........*/

     .ContainerTable { background-color: #fff; padding: 2px; border-radius: 10px;}

/*CHECKOUT*/
#CheckOut #ContentGeneralInterna { align-items:flex-start;}
    #GrupoCheckOut { flex: 1; text-align: center;}
       #PasoAPaso { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 auto; padding:0 0 30px 0; }
             #Steps { list-style: none; flex: 0 0 350px; display: flex; align-items: center;}
                #Steps li:not(.separador) { flex: 0 0 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 18px; color:#999999; border:1px solid #999999; border-radius: 50%;}
                #Steps li.separador { flex: 1 1 110px; margin: 0 5px; border-bottom: 1px solid #06489A;}
                #Steps li.separador.punteado { border-bottom: 2px dotted #999999;}

                /*select*/
                #Steps li.active { background-color:#5A5A5A; border-color:#5A5A5A;  color: #fff;}
                #Steps li.past { background-color: #000; border-color:#000;  color: #fff;}
                /*......*/

        #ContentCheckout { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; width: 100%; max-width: 900px; margin: 0 auto; }
            #ContentCheckout #ActiveForm { flex: 1; max-width: none;}
                .conlabel #ContentMainForm { padding-top: 5px;}

                #ContentCheckout .AccionesForm { text-align: center;}
                    #BtnSiguiente { margin: 0 auto; padding-right: 40px !important; background-image: url("imagenes/internas/icono-flecha-rigth.svg"); background-repeat: no-repeat; background-position:  90% 50%; background-size: 20px auto;}
                    #BtnAnterior { margin: 0 auto; margin-right: 10px; padding-left: 40px !important; background-image: url("imagenes/internas/icono-flecha-left.svg"); background-repeat: no-repeat; background-position:  16% 50%; background-size: 20px auto;}

            #ContentCheckout #ResumenPedido { flex: 0 0 300px; border: 1px solid #ccc;}
                #ContentCheckout #ResumanTotal { margin-bottom: 0;}

/*CHECK OUT - DATOS COMPRA*/
    #NavFormaEnvio { display: flex; margin-bottom: 10px; }
        #NavFormaEnvio a { flex: 1; max-width: 120px; margin-right: 15px; font-size: 1.3rem; text-align: center; padding: 8px 0; box-shadow: inset 1px 0 0 0 #707070, inset -1px 0 0 0 #707070, inset 0 1px 0 0 #707070, inset 0 -1px 0 0 #707070; border-radius: 30px;
                          -webkit-transition: box-shadow 0.5s ease, color 0.5s ease;
                          transition: box-shadow 0.5s ease, color 0.5s ease;}
    #PanelRetiro,
    #PanelEnvio { padding-top: 5px;}

    #PanelRetiro {}
        p.TextModuloRetiro { text-align: left; font-size: 1.1rem; color: #5A5A5A;}

        #ContentDireccion { text-align: left; padding:5px 0 45px 0;}
            #ContentDireccion address,
            #ContentDireccion p { font-size: 2rem; font-style: normal; color: #5b5b5b;}

    /*default*/
    #PanelRetiro,
    #PanelEnvio { display: none;}

    /*select*/
    #NavFormaEnvio a.select {color: #000000; box-shadow: inset 2px 0 0 0 #000, inset -2px 0 0 0 #000, inset 0 2px 0 0 #000, inset 0 -2px 0 0 #000;}
    #PanelEnvio.select,
    #PanelRetiro.select { display: block;}
    /*.......*/

/*CHECK OUT - MEDIOS PAGO*/
    #MediosPago { display: flex; flex-wrap: wrap; margin: 20px 0;}
        #MediosPago div { flex: 0 1 50%; padding: 15px 5px; text-align: center;}
            #MediosPago figure { margin: 0 auto;}
            #MediosPago img { width: 120px; height: 120px;}
            #MediosPago p { font-size: 1rem; color: #111; display: block; text-align: center;}

/*CHECK OUT - CONFIRMACION COMPRA*/
    #ListaMiCarrito { margin-bottom: 15px;}

/*CHECK OUT - FELICIDADES*/
    #OkCard { width: 100%; max-width: 450px; margin: 0 auto; padding: 30px 20px 0 20px; background-color: #fff; border-radius: 10px;}
        #OkCard > div { padding-bottom: 30px;}
            #OkCard h2 { margin-bottom: 5px; font-size: 1.3rem; color: #111;}
            p.NombreRegistrado { font-size: 2.5rem;color: #459EC9;}
            #OkCard h3 { margin: 15px 0; font-size: 1.4rem; color: #333;}
            #OkCard h3 strong { display: block;}
            p.NotaLegal { margin-bottom: 20px; font-size: 1rem; color: #111;}

/*TERMINOS Y CONDICIONES*/
    #BoxSimple {width: 100%; max-width: 1000px; margin: 0 auto; text-align: left; padding: 35px; background-color: #fff; border-radius: 10px;}
        #BoxSimple header {}
            #LogoLegales { width: 100%; max-width: 200px; margin: 0 0 20px 0;}
            #LogoLegales img { max-width: 100%; display: block;}
            #BoxSimple h2 {font-size: 2rem; color: #363535;  margin:35px 0;}

        #TextLegales { width: 100%; margin: 0 auto;}
        #TextLegales p { font-size: 1.1rem; line-height: 1.7em !important; text-align: left; color: #2D2D2D;}

/*COMO COMPRAR*/
#ComoCompar main { background: url("imagenes/olas-footer.svg") no-repeat 100% 50px; background-size: 50% auto;}
    #DataComprar.Viewport { max-width: 1400px; margin-top: 50px; margin-bottom: 70px; text-align: left;}
        #DataComprar > header { padding: 0 10px;}
            #Breadcrumb { display: flex; flex-wrap: wrap; width: 100%; padding-top: 20px; padding-bottom: 10px;}
               #Breadcrumb a,
               #Breadcrumb p { display: inline-block; vertical-align: middle; font-size: 13px; color: #111;}

               #Breadcrumb a > p { display: inline-block; vertical-align: baseline;}
               #Breadcrumb a::after { content: "﹥"; display: inline-block; vertical-align: baseline; margin: 0 5px; font-size: 11px; color:#ccc;}

            #DataComprar h2 { font-size: 3.5rem; line-height: 0.8em !important; color: #707070;}

               #FormasPago { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; padding-top: 80px;}
                   #DataComprar h3 { font-size: 1.7rem; color: #707070;}
                   #FormasPago h3 { flex: 1 1 100%;  margin: 0 0 10px 10px;}

                   .Card { flex: 1; margin: 0 10px; padding: 30px 40px; background-color: #fff; border-radius: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
                       .Card header {}
                       .Card header img { width: 40px;}
                       .Card h4 { margin: 10px 0; font-size: 1.4rem; color: #707070;}

                       .Card p,
                       .Card address,
                       .Card li{ font-size: 1.2rem; line-height: 1.4em !important; color: #707070;}

                       .Card ul { list-style: none; margin-top: 20px;}
                       .Card li { position:relative; display: block; padding-left: 10px; color: #707070;}
                       .Card li:before {content: "\2022"; position: absolute; top: 0; left: 0; font-size: 10px; color: #707070;}

                       .Card address { font-style: normal; display: block; margin-top: 15px;}

                img[alt="Mercadopago"] { max-width: 100%; display: block;}

                img[alt="Deposito"] { width: 50px !important;}
                img[alt="Camion"],
                img[alt="Avion"] { width: 50px !important;}

               #Facturacion { flex: 1 1 100%; margin: 30px 10px 40px 10px; padding: 40px; text-align: center; background-color: #E3E3E3; border-radius: 20px;}
                   #Facturacion p { font-size: 2rem; color: #4B4B4B;}

               #FormasEntrega { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%;}
                   #FormasEntrega h3 { flex: 1 1 100%;  margin: 0 0 5px 20px;}

                   p#TxtFormasEnvio { display: block; margin-bottom: 10px; padding-top: 5px; border-bottom: 1px solid #AEAEAE;}


.SafeZone * { line-height: 1.2em !important;}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*COMPATIBLIDADES///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
	select { padding-right:35px; background:#fff url("imagenes/internas/flecha-select.gif") no-repeat right 50%;}
    select#OrdenarPor { background-color: #dfdfdf; border: 1px solid #7d7b7b;}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*RESPONSIVE///////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1920px) {
html { font-size: 13px; /*1rem = 13px*/}
}

@media (max-width: 1890px) {
.Viewport { padding:0 30px; max-width:none;}
/*header*/
    #AccionesEcomm { padding-right: 40px;}
       #PanelLogin { left: auto; right: 0;}
       #LogAbierto.mueca::after { right: 15px; left: auto; margin: 0;}

/*main*/
    #PanelLateral { padding-left: 70px; padding-right: 30px;}

    #Pie p { padding-left: 250px;}
}

@media (max-width: 1300px) {
/*DETALLE DE PRODUCTO*/
#MaximaTecnologia h3 span { display: block;}
    #GraficoTecnologia { min-width: 900px; min-height: 150px; background-position: 50% 40%;}
        #GraficoTecnologia p { margin-bottom: 10px; font-size: 1.3rem;}
        p.capa-interior::after {right: -260px;}
        ul.General h4 { font-size: 1.1rem;}
        ul.General h6 { font-size: 1.2rem;}
}

@media (max-width: 1260px) {
/*footer*/
    #LogoFooter { display: none;}
    .NavSocial { justify-content: flex-end;}
}

@media (max-width: 1200px) {
/*header*/
header.general { position: relative;}
 a#BtnMenuMobile { display:block; position:absolute; z-index:9200; top:25px; left: 15px; width:35px; height:35px; border-radius: 50%; cursor:pointer;
                   background: url("imagenes/internas/menu.svg") no-repeat 50% 50%, url("imagenes/internas/menu-close.svg") no-repeat 50% 200px; background-size: 15px auto, 15px auto;}

    #Logo { margin-left: 25px;}
    #MenuGeneral { position:fixed; overflow: hidden; z-index:9100; top:0; left:0; margin-left: 0; display:flex; flex-direction: column; align-items:center; justify-content: center; width:100%; height: 0; background:rgba(241,241,241,0.90);  box-shadow: 0 30px 28px rgba(0,0,0,0.25); padding-right: 0; border: none;
                    -webkit-transition: height 1s cubic-bezier(.25,.8,.25,1);
                    transition: height 1s cubic-bezier(.25,.8,.25,1);}

       #MenuGeneral a { flex: 0 0 auto; height: auto; text-align: center; font-size: 2rem; padding: 15px 0; color: #646364; border-radius: 0 !important; background: url("imagenes/internas/filete.svg") no-repeat 50% 100%; background-color: transparent;
                            opacity: 0;
                            -webkit-transform: translateY(50px);
                            transform: translateY(50px);
                            -webkit-transition: -webkit-transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
                            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;}

       #MenuGeneral a:first-child { transition-delay:0.4s; display: block;}
       #MenuGeneral a:nth-of-type(2) { transition-delay:0.5s; }
       #MenuGeneral a:nth-of-type(3) { transition-delay:0.6s; }
       #MenuGeneral a:nth-of-type(4) { transition-delay:0.7s; }
       #MenuGeneral a:last-child { background: none;}

       #Buscar { padding-left: 20px; border-radius: 30px 0 0 30px;}

    /*select*/
    #MenuGeneral a.select { background-color: transparent; color: #06489A;}

    /*menumode*/
    .menumode { overflow:hidden;}
    .menumode a#BtnMenuMobile { background-position: 50% -200px, 50% 50%; }

    .menumode #MenuGeneral { overflow:auto; height: 100%;}

    .menumode #MenuGeneral a {-webkit-transform: translateY(-30px);
                                 transform: translateY(-30px); }

    /*menumode standby*/
    .menumode.standby #MenuGeneral a { opacity:1;
                                        -webkit-transform: translateY(0);
                                        transform: translateY(0); }
    /*........*/

/*main*/
main {}
.Eshop #ContentGeneralInterna { position: relative; padding-top: 30px; display: block; }
    #PanelLateral { position: absolute; z-index: 100; top: 45px; left: 0; width: 200px; padding-top: 10px; padding-left: 60px; padding-right: 0;
                    -webkit-transform: translateX(-100%);
                     transform: translateX(-100%);
                    -webkit-transition: -webkit-transform 0.7s cubic-bezier(.25,.8,.25,1);
                    transition: transform 0.7s cubic-bezier(.25,.8,.25,1);}

        #PanelLateral h2 { font-size: 2.3rem;}

    #PanelCentral { position: relative; overflow: hidden; width: 100%;
                     -webkit-transition: padding 0.4s cubic-bezier(.25,.8,.25,1);
                     transition: padding 0.4s cubic-bezier(.25,.8,.25,1);}

        #TopPanelCentral { position: relative; overflow: hidden;}

        #BtnFiltro {display: block; flex: 0 0 40px; height: 40px; background: url("imagenes/internas/filtro.svg") no-repeat 0 50%, url("imagenes/internas/menu-close.svg") no-repeat 100px 50%; background-size: 18px auto, 18px auto;}


    /*filtermode*/
    .filtermode {}
    .filtermode #PanelLateral {-webkit-transform: translateX(0);
                               transform: translateX(0); }

    .filtermode #PanelCentral { padding-left: 200px;}
    .filtermode #OrderMode,
    .filtermode #ViewMode{ display: none;}

    .filtermode #BtnFiltro { background-position:100px 50%, 0 50%; }
    /*.........*/


/*DETALLE DE PRODUCTO*/
    #ArticuloFoto { flex: 1 1 100%;}
        .EtiquetasRopa { width: 100%; padding:0 0 25px 0;}
              .EtiquetasRopa figure { flex: 1; text-align: center; margin:10px 20px;}
              .EtiquetasRopa img { max-width: 100%; display: block; margin: 0 auto;}

        #ArticuloFoto .EtiquetasRopa { display:none;}
        #ExtraArticulo .EtiquetasRopa { display:flex;}

    #ArticuloInfo { flex: 1 1 100%; padding-left: 15px; padding-right: 15px;}
}

@media (max-width: 1100px) {
/*COMO COMPRAR*/
    .Card { flex: 0 0 calc(50% - 20px); margin-bottom: 20px;}
}

@media (max-width: 1023px) {
/*MI CARRITO*/
    #MiCarritoPage #ListaMiCarrito { flex: 1 1 100%; margin-right: 0; }
        #MiCarritoPage #ResumenPedido { margin-left: 0; margin-top: 20px;}

/*MIS COMPRAS*/
.ContainerTable { border: none; border-radius: 0; background: none; box-shadow: none;}
    main table.general thead { display: none; }

    main table.general,
    main table.general tbody,
    main table.general tbody tr,
    main table.general tbody td { display: block; width: 100%; text-align: left !important;}

    main table.general tbody { display: flex; flex-wrap: wrap; font-size: 0;}
    main table.general tbody tr { flex: 1 1 200px; display: flex; flex-direction: column; margin: 10px; background-color: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.22); border-radius: 10px;}
        main table.general tbody td { flex: 0 0 auto; border:none; padding-bottom: 10px !important;}
            main table.general tbody td::before {content: attr(data-info); font-variant: small-caps; display: block; margin-bottom: 10px; font-size: 13px; color: #999;}
            main table.general tbody td p { font-size: 1.5rem; }

        main table.general tbody td[data-info="fecha"] { padding-top: 30px !important;}
        main table.general tbody td[data-info="acciones"] { padding-bottom: 15px !important;}
            main table.general tbody td[data-info="acciones"]::before { display: none;}
            main table.general tbody td[data-info="acciones"] a { display: block !important; margin-right: 0 !important; margin-left: 0 !important; text-align: center;}

    /*Desktop*/
    .Desktop main table.general tbody tr:hover td { background:none; }
    /*.......*/
}

@media (max-width: 970px) {
/*footer*/
    #Sitemap { width: 100%; flex-direction: column;}
    #Sitemap > div { flex: 0 0 auto; padding-right: 0;}
        #FooterGenero {}
        #FooterGenero ul { display: flex; flex-wrap: wrap;}
        #FooterGenero li { margin-right: 25px;}

        #FooterProductos { margin:20px 0 18px 0;}
        .NavSocial { flex: 1 1 100%; justify-content: flex-start; margin-top: 25px;}

/*DETALLE DE PRODUCTO*/
    #GraficoTecnologia { min-width: auto; background-size: 100% auto;}

/*CHECKOUT*/
    #ContentCheckout #ActiveForm { flex: 1 1 100%;}
    #ContentCheckout #ResumenPedido { margin-top: 20px;}

    #PanelRetiro,
    #PanelEnvio { padding-top: 15px;}
}

@media (max-width: 900px) {
/*main*/
    #ContentPie { height: 180px;}
       #Pie p { padding-left: 220px; font-size: 1.8rem;}
}

@media (max-width: 870px) {
/*LISTA DE PRODUCTOS*/
    .FotoTalles { flex: 0 0 120px; background-size: auto 100% !important;}

/*DETALLE DE PRODUCTO*/
    #GraficoTecnologia p { font-size: 1rem;}
    #GraficoTecnologia p::after { width: 50px;}

    p.capa-exterior::after { top: 50%; right: -50px;}
    p.capa-interior::after { top: 50%; right: -95px;}

    #Atributos,
    #Cuidados { flex: 1 1 100%;}

    #Cuidados { padding-top: 25px;}
    #Lavado { max-width: 50%; margin-bottom: 10px;}
}

@media (max-width: 800px) {
/*footer*/
    #BottomFooter .Viewport { flex-direction: column; align-items: center;}
       #BottomFooter .Viewport > * { flex: 0 0 auto;}

            #Legales { margin-bottom: 20px; text-align: center;}
                #Legales a { display: block; margin-top: 10px;}
                #Legales span { display: none !important;}

            p#CreacionUno { margin-top: 15px;}
}

@media (max-width: 750px) {
/*header*/
#AccionesEcomm { padding-left: 0;}

    /*Buscar*/
        #Buscar { flex: 0 0 50px; padding-left: 15px;}
            a#BtnBuscarMobile { display: block; flex: 0 0 30px; height: 30px; background: url("imagenes/internas/lupa-blanco.svg") no-repeat 0 50%; background-size: 25px auto;}

            #Buscador { position:fixed; overflow: hidden; z-index:9100; top:0; left:0; display:flex; flex-wrap: wrap; align-items:center; justify-content:center; width:100%; height: 0; background-color:rgba(242, 242, 242, 0.9); box-shadow: 0 30px 28px rgba(0,0,0,0.25); padding: 0;
                         -webkit-transition: height 1s cubic-bezier(.25,.8,.25,1);
                          transition: height 1s cubic-bezier(.25,.8,.25,1);}

             a.cerrarx { display: block; }
             a#BtnCerrarBuscador { display: block;}
                 .QuickAV { max-width: 400px;}
                 input#busqueda-quickav { font-size: 1.5rem;}

            /*buscarmode*/
            .searchmode { overflow:hidden;}
            .searchmode a#BtnMenuMobile  { display: none;}
            .searchmode #Buscador { overflow:auto; height: 100%;}
            /*..........*/

    /*Login*/
    a#BtnLogin {}
        #Login .DownPanel { position:fixed; z-index: 9100; width:100%; height:0; max-height: none; top:0; display:flex; flex-wrap: wrap; align-content: center; justify-content:center; border-radius: 0 !important; background-color:rgba(242, 242, 242, 0.9);
                           -webkit-transition: height 1s cubic-bezier(.25,.8,.25,1);
                            transition: height 1s cubic-bezier(.25,.8,.25,1); }

            .mueca { background: none; border: none;}
            .mueca::after { display: none;}
            #PanelLogin { top: 0; left: 0;}
                p.TxtHola { font-size: 3rem;}
                p.NombreLog { font-size: 1.8rem;}

        /*loginmode*/
        .loginmode #Login .DownPanel { height: 100%; max-height: none;}
        /*....*/

    /*mi carrito*/
    #PanelCarrito { display: none;}

/*main*/
    #Goteo {}
        #Goteo li { flex-direction: column;}
        #Goteo li figure,
        #Goteo li p { flex: 0 0 auto;}
        #Goteo li figure img { width: 50px; margin: 0 0 10px 10px; max-width: none;}


    #ContentPie { height: auto; display: block; text-align: left; padding-top: 25px; padding-bottom: 25px;}
        #Pie p { display: block; margin-bottom: 15px; padding-left: 240px; padding-right: 0;}
        #LogoPieEldertec { display: block; padding-left: 240px; padding-right: 0; text-align: left;}
            #LogoPieEldertec img { margin: 0; width: 100px;}
            #LogoPieEldertec figcaption { text-align: left;}

/*PRODUCTOS CATEGORIAS*/
    #NavPaginado { margin-bottom: 40px;}

    #Talles > div { flex: 1 1 100%; max-width: 360px; margin: 10px 0;}

/*DETALLE PRODUCTO*/
    #ArticuloInfo { padding-left: 10px; padding-right: 10px;}
        #ArticuloInfo h3 { max-width: none;}
        .EtiquetasRopa figure { flex: 0 0 33%; margin: 0; padding:5px 15px;}

        #PrecioArticulo { flex: 0 0 auto;}
        #BtnAgregarCarrito { flex: 1;}

/*REGISTRO*/
    .Cuenta #ContentGeneralInterna { min-height: auto;}
}

@media (max-width: 690px) {
/*main*/
    /*listamode*/
    .listamode #ListaProductos.Items {grid-gap: 10px;}
    .listamode #ListaProductos.Items article { height: auto; margin-bottom: 0;}
    .listamode #ListaProductos.Items header { flex: 0 0 100px; height: auto;}
    .listamode #ListaProductos.Items .InfoItem { padding: 10px;}
    .listamode #ListaProductos.Items .InfoItem h3 { font-size: 1.5rem;}
    .listamode #ListaProductos.Items .PreciosTag p.Precio { font-size: 1.5rem;}
    .listamode #ListaProductos.Items .ExtraColor img { width: 10px;}
    /*........*/

/*MI CARRITO*/
#ListaPedido { display: block; width: 100%; text-align: left !important;}
    #ListaPedido tbody { display: flex; flex-wrap: wrap;}
    #ListaPedido tbody tr { position: relative; flex: 1 1 200px; max-width: 430px; display: flex;  flex-wrap: wrap; background-color: #fff; border: 1px solid #E4E4E4; border-radius: 7px; padding: 15px; margin: 5px;}
        #ListaPedido tbody td { text-align: left; border: none; padding: 5px 0;}
        td.miniatura { flex: 0 0 50px;}
        td.descripcion { flex: 1 1 100%;}
        td.cantidad { flex: 0 0 80px; margin-right: 20px;}
        td.precioparcial { flex: 1;}

        #ListaPedido tbody td::before {content: attr(data-info); display: block; font-size: 0.7rem; color: #999;}

        input.cantidaditem {}
        a.BtnEliminarItem { position: absolute; top: 15px; right: 10px;}


        /*Deskotp*/
        #ListaPedido tr.hover td { background: none;}
        /*.......*/
}

@media (max-width: 660px) {
/*CATEGORIAS*/
    #NavSocialFlotante { display: none;}

/*MIS COMPRAS*/
    #ExtraDelivery,
    #EstadoEnvio { flex: 1 1 100%;}

/*COMO COMPRAR*/
    #DataComprar.Viewport { margin-bottom: 35px;}
        #FormasPago { padding-top: 50px;}
            .Card { flex: 1 1 100%; margin-left: 0; margin-right: 0;}

            #Facturacion { margin-top: 15px; margin-left: 0; margin-right: 0;}
            #Facturacion p { font-size: 1.5rem;}
}

@media (max-width: 600px) {
/*main*/
    #Pie { background-size: 80% auto, auto 150px;}
        #Pie p { padding-left: 15px; margin-bottom: 55px; font-size: 2.1rem;}
        #LogoPieEldertec { padding-left: 200px;}

    #Sitemap ul { margin-right: 0;}


/*DETALLE PRODUCTO*/
    .slide .SlideItems { height: 350px;}

    #FiltrosArticulo { max-width: none;}
        #FiltroTalle { flex: 1 1 100%;}

    a#BtnAgregarCarrito { flex: 1 1 100%; margin-top: 15px;}

    #CaracteristicasTecnologia > div { flex: 1 1 100%;}
    #CaracteristicasTecnologia > div:first-child { margin-bottom: 15px;}
    #Atributos ul.General li { flex: 1 1 100%;}

    #Cuidados { padding-top: 0;}
        #Lavado { max-width: 70%;}

/*MIS COMPRAS*/
    #ModalDetalleCompra table.general thead { display: none;}
    #ModalDetalleCompra table.general,
    #ModalDetalleCompra table.general tbody,
    #ModalDetalleCompra table.general tr,
    #ModalDetalleCompra table.general td { display: block;}

    #ModalDetalleCompra table.general tr { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 5px;}
        #ModalDetalleCompra table.general td { border: none !important;}
        /*#ModalDetalleCompra table.general td.miniatura { flex:  0 0 80px;}*/
        #ModalDetalleCompra table.general td[data-info="articulo"] { flex: 1; padding-right: 0;}
        #ModalDetalleCompra table.general td[data-info="cantidad"] { flex: 0 0 auto; margin-left: 10px; padding-top: 0; }
        #ModalDetalleCompra table.general td[data-info="importe"] { flex: 0 0 auto; padding-top: 0; width: auto;}

        /*Desktop*/
        .Desktop table.general tbody tr:hover td { background: none;}
        /*........*/

        #ExtraDetalle { margin-top: 5px;}
            .ConceptoResumen { border: none; padding-top: 0;}
}

@media (max-width: 500px) {
.Modal:not(#ModalGeneral) { background-color: #fff;}
    .ContentModal:not(#ContentModalGeneral) { border: none;}
    .ContentModal:not(#ContentModalGeneral) a.cerrarx { top: 0; right: 0;}

/*header*/
    a#BtnMenuMobile { top: 20px; left: 5px;}
    #Logo {flex: 0 0 150px; margin-left: 10px;}
    #AccionesEcomm { padding-right: 20px;}

/*main*/
   #ContentAbsorcion { padding: 25px;}
       #Goteo ul { flex-direction: column;}
       #Goteo li { flex-direction: row; margin:7px 0;}

   #PanelLateral {padding-left: 45px;}
       #OrderMode select { width: 100%;}

       /*filtermode*/
       .filtermode #PanelCentral { padding-left: 200px;}
       /*........*/

 /*footer*/
     #FooterGenero ul { justify-content: space-between; border-bottom: 1px solid #CECECE;}
     #FooterGenero ul li { flex: 0 0 auto; margin-right: 0;}

/*CATEGORIA PRODUCTOS*/
    #OrderMode { margin-right: 0;}
    #NavFiltros #BtnVerTalles { display: block; font-size: 1.2rem; margin: 0 10px !important; }

    .TablaTalles thead td p {font-size: 1.1rem;}

/*DETALLE PRODUCTO*/
#Articulo { padding: 0;}
    #ArticuloFoto { border: none; border-radius: 0;}
        #ArticuloInfo { padding: 30px 20px 0 20px;}
            #ArticuloInfo h2 { font-size: 3.5rem;}
            #Codigo,
            #NivelAbsocion,
            #PorPack { flex: 1 1 100%; border: none; padding: 0;}

            #Codigo,
            #NivelAbsocion { padding-bottom: 25px;}

        #MaximaTecnologia { padding-top: 35px; padding-bottom: 35px;}
            #MaximaTecnologia h3 { margin-bottom: 0; font-size: 2.3rem;}

            #GraficoTecnologia { padding-top: 20px; padding-bottom: 35px;}
                #GraficoTecnologia div:first-child { -webkit-transform: translateX(-30px); transform: translateX(-30px);}
                #GraficoTecnologia div:last-child { -webkit-transform: translateX(30px); transform: translateX(30px);}

                #CaracteristicasTecnologia { margin-top: 0;}
                    #Lavado { max-width: 100%;}
                    #Cuidados h5 { margin-bottom: 5px;}
                    ul.General h4,
                    ul.General h6 { font-size: 1.3rem;}

                    #Atributos ul.General figure { flex: 0 0 40px;}

/*MI CARRITO*/
    #ResumenPedido { flex: 1 1 100%; margin: 5px;}

/*MIS COMPRAS*/
    #NavMiCuenta a { font-size: 1.3rem;}

    .ContainerTableModal,
    #BaseTable { padding-left: 0; padding-right: 0;}

    #ModalDetalleCompra table.general td[data-info="articulo"] { padding-left: 10px;}
    #ModalDetalleCompra table.general td[data-info="importe"] { padding-right: 10px;}

    .ConceptoResumen { padding-right: 10px;}
    .ConceptoResumen p { padding-left: 10px;}

    #ExtraDetalle { padding-top: 5px;}
    #ExtraDataEnvio { padding-left: 0; padding-right: 0;}


/*CHECKOUT*/
    #Steps { flex: 0 0 300px;}

    form.general > div.fila-fluid { flex-wrap: wrap;}
    form.general > div.fila-fluid span,
    form.general > div.fila-fixed span  { flex: 1 1 100%; padding-right: 0 !important; margin-right: 0;}

    #ContentCheckout #ResumenPedido { flex: 1 1 100%; margin: 25px 0 0 0;}

    #MediosPago { margin-top: 0;}
    #MediosPago img { width: 90px; height: 90px;}


}

@media (max-width: 450px) {
.Viewport { padding:0 15px;}
.Cuenta .Viewport { padding:0 25px;}


/*DETALLE PRODUCTO*/
    .AyudaPrecio .GloboAyuda { width: 110px;}

    #MaximaTecnologia .Viewport { padding-left: 15px; padding-right: 15px;}
        #GraficoTecnologia { flex-direction: column; margin-top: 30px; padding-top: 150px; padding-bottom: 10px; background: url("imagenes/grafico-mobile.png") no-repeat 100% 0; background-size: 130% auto;}
            #GraficoTecnologia div { flex: 0 0 auto; width: 100%;
                                    -webkit-transform: none !important;
                                    transform: none !important;}

            #GraficoTecnologia p { padding: 9px; text-align: center; font-size: 1.4rem; margin: 0 0 10px 0; border-radius: 8px; border-width: 1px;}
                .Referencia { display: flex; align-content: center; justify-content: center; margin: 0 auto 5px auto; width: 24px; height: 24px; border: 1px solid #ccc; border-radius: 50%;}
                #GraficoTecnologia p br { display: none;}
                #GraficoTecnologia p::after { display: none;}

                #Atributos ul.General h4,
                #Atributos ul.General h6 { font-size: 1.4rem;}

                #Atributos ul.General li { margin-bottom: 15px;}

}