$f-pt-condensed: "futura-pt-condensed", sans-serift !important; $f-pt: "futura-pt", sans-serift !important; $supernova: #db0732; $nox: #002863; $lotus: #a0007c; $antara: #b31d77; $fusion: #d19e11; $noxdos: #35d32f; $kosmos: #490e68; $sonik: #1b80b6; $s-pink: #c93895; $moka: #b98049; $vesta: #fe9015; $kosmos-red: #ab0432; @mixin detalle-producto($color: #000000) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //Supernova @mixin detalle-producto($color: $supernova) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //nox @mixin detalle-producto($color: $nox) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //lotus @mixin detalle-producto($color: $lotus) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //antara @mixin detalle-producto($color: $antara) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //fusiĆ³n @mixin detalle-producto($color: $fusion) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //Nox 2.0 @mixin detalle-producto($color: $noxdos) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //Kosmos @mixin detalle-producto($color: $kosmos) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //Sonik @mixin detalle-producto($color: $sonik) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //Supernova Pink @mixin detalle-producto($color: $s-pink) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //Moka @mixin detalle-producto($color: $moka) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; font-weight: 600; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //Vesta @mixin detalle-producto($color: $vesta) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } //Kosmo Red @mixin detalle-producto($color: $kosmos-red) { > div.row { > div.eCommerce_DescripcionProducto { > .Detalle_Caja { > div { .Carpetas_TitulosPrincipal { color: $color; border-top: 3px solid $color; } #ProdDetailDES, #ProdDetailCAR { border-bottom: 3px solid $color; } } > table.ProductoDetallePrecios { tr { td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { color: $color; } td.Detalle_ImporteCentavos { color: $color; } td.Producto_Moneda { color: $color; } } } } } } } body.Fondo_Principal { background-color: #eff0f0; padding-top: 150px; background-image: none !important; min-width: 360px; @media (min-width: 992px) { padding-top: 70px; } #compra { > center { .Control_BarraSuperior { height: 150px; background-color: #5a5a5a; display: flex; justify-content: center; align-items: center; padding: 0 15px !important; min-width: 360px; @media (min-width: 992px) { height: 70px; } @media (min-width: 1200px) { padding: 0 !important; } > div.BarraSuperiorIconos { max-width: 1200px; height: 125px; width: 100%; padding: 0; margin: 0; @media (min-width: 992px) { height: initial; } > div.row { margin: 0; > div.col-md-12 { margin: 0; padding: 0; > table { > tbody > tr { display: flex; align-items: center; height: 50px; flex-wrap: wrap; @media (min-width: 992px) { flex-wrap: nowrap; } > td { width: initial !important; height: initial !important; min-width: initial !important; min-height: initial !important; max-width: initial !important; max-height: initial !important; } > td.BarraToP_Salida { > button { background: transparent; position: relative; right: 20px; } } > td.BarraToP_Buscador { table.buscabox { background-color: transparent !important; border: 0; min-width: 249px; width: calc(100vw - 111px); @media (min-width: 768px) { width: calc(100vw - 141px); } @media (min-width: 992px) { width: auto; } td.buscatd.BarraToP_Buscador_Input { border-top: 0; width: calc(100% - 50px); #SearchDIV { padding-top: 0 !important; padding-left: 0 !important; display: block !important; } input { background-color: #d8d8d8 !important; height: 50px !important; border-radius: 8px 0 0 8px; font-family: "futura-pt"; font-size: 24px; width: 100% !important; } } td.buscatd.BarraToP_Buscador_Boton { background-color: transparent; border-left: 0; border-top: 0; width: 50px; button { background-color: #171717 !important; display: flex; justify-content: center; align-items: center; width: 70px !important; height: 50px !important; border-radius: 0 8px 8px 0; } } } } > td.BarraToP_Monto { order: 10; margin-top: 20px; @media (min-width: 992px) { margin-top: 0; } #SearchMON { display: block !important; .Detalle_LetrasMoneda, .Detalle_ImporteEntero { font-family: "futura-pt"; font-size: 35px; color: #ffffff; } .Detalle_ImporteCentavos { font-family: "futura-pt"; color: #ffffff; } } } > td.BarraToP_Carrito { margin-left: auto; margin-right: 15px; margin-top: 20px; @media (min-width: 992px) { margin-top: 0; } .shopping-cart { background-image: url("https://cdn.kromasol.com/netzen/img/icono-carrito-nuevo.svg"); height: 40px !important; border: 0; border-radius: 8px; background-repeat: no-repeat; background-position: center center; background-size: contain; center { display: flex; justify-content: center; align-items: center; } .shopping-cartItem { font-family: "futura-pt-condensed"; color: #ffffff !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 4px; font-size: 14px !important; b { font-weight: 600 !important; } } } .shopping-cart:hover { background-image: url("https://cdn.kromasol.com/netzen/img/icono-carrito-nuevo.svg"); background-repeat: no-repeat; background-position: center center; } /*button { height: 50px; border: 0; background-color: #171717 !important; border-radius: 8px; > div { display: flex !important; justify-content: center; align-items: center; .shopping-cart:before { content: ''; display: block; background-image: url('https://cdn.kromasol.com/netzen/img/icono-comprar.svg'); background-repeat: no-repeat; background-size: contain; background-position: center center; -webkit-filter: brightness(0%) invert(100%); filter: brightness(0%) invert(100%); } > span.badge { margin-left: 15px; background-color: #FFFFFF; font-family: "futura-pt"; border-radius: 100%; display: flex; justify-content: center; align-items: center; padding: 0; } } }*/ } } } } } } } > div.eCommerce_TOPBarraTienda_PC, .eCommerce_TOPBarraDetalle_PC, .eCommerce_TOPBarraCarrito_PC { > div.BarraSuperiorIconos { > div.row { > div.col-md-12 { > table { > tbody > tr { > td.BarraToP_Regresar { display: flex; justify-content: center; align-items: center; margin-right: 30px; @media (min-width: 768px) { margin-right: 60px; } button, button:hover, button:active, button.active { background-color: transparent; border: 0; outline: 0; outline-offset: 0; box-shadow: none; height: initial !important; width: initial !important; padding-top: 0 !important; padding-left: 0 !important; span { font-size: 30px !important; top: 5px; left: 25px; } span:before { -webkit-filter: brightness(0%) invert(100%); filter: brightness(0%) invert(100%); } } } > td.BarraToP_Buscador { table.buscabox { min-width: 249px; width: 380px !important; max-width: 380px; @media (min-width: 768px) { width: calc(100vw - 141px); } @media (min-width: 992px) { width: auto; } } } } } } } } } } } > .Control_BarraSuperior { height: 150px; background-color: #5a5a5a; display: flex; justify-content: center; align-items: center; padding: 0 15px !important; min-width: 360px; @media (min-width: 992px) { height: 70px; } @media (min-width: 1200px) { padding: 0 !important; } > table { max-width: 1200px; height: 125px; @media (min-width: 992px) { height: initial; } > tbody > tr { display: flex; align-items: center; height: 50px; flex-wrap: wrap; @media (min-width: 992px) { flex-wrap: nowrap; } > td { width: initial !important; height: initial !important; min-width: initial !important; min-height: initial !important; max-width: initial !important; max-height: initial !important; } > td.BarraToP_Buscador { table.buscabox { background-color: transparent !important; border: 0; min-width: 249px; width: calc(100vw - 111px); @media (min-width: 768px) { width: calc(100vw - 141px); } @media (min-width: 992px) { width: auto; } td.buscatd.BarraToP_Buscador_Input { border-top: 0; width: calc(100% - 50px); #SearchDIV { padding-top: 0 !important; padding-left: 0 !important; display: block !important; } input { background-color: #d8d8d8 !important; height: 50px !important; border-radius: 8px 0 0 8px; font-family: "futura-pt"; font-size: 24px; width: 100% !important; } } td.buscatd.BarraToP_Buscador_Boton { background-color: transparent; border-left: 0; border-top: 0; width: 50px; button { background-color: #171717 !important; display: flex; justify-content: center; align-items: center; width: 70px !important; height: 50px !important; border-radius: 0 8px 8px 0; } } } } > td.BarraToP_Monto { order: 10; margin-top: 20px; @media (min-width: 992px) { margin-top: 0; } #SearchMON { display: block !important; > table { margin-right: 30px; > tbody { > tr { > td.BarraToP_Bandera { position: relative; bottom: 30px; > img { width: 30px; height: 30px; &::after { content: ""; width: 30px; height: 30px; } } .flag-bo { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/BO-BANDERA.png"); } } .flag-co { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/CO-BANDERA.png"); } } .flag-cr { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/CR-BANDERA.png"); } } .flag-ec { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/EC-BANDERA.png"); } } .flag-us { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/Bandera-US@2x.png"); } } .flag-gt { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/GT-BANDERA.png"); } } .flag-hn { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/BO-BANDERA.png"); } } .flag-mx { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/Bandera-MX@2x.png"); } } .flag-pe { &::after { background-image: url("https://cdn.kromasol.com/netzen/img/Bandera-PE.png"); } } } } } } .Detalle_LetrasMoneda, .Detalle_ImporteEntero { font-family: "futura-pt"; font-size: 35px; color: #ffffff; } .Detalle_ImporteCentavos { font-family: "futura-pt"; color: #ffffff; } } } > td.BarraToP_Carrito { margin-left: auto; margin-right: 15px; margin-top: 20px; @media (min-width: 992px) { margin-top: 0; } .shopping-cart { background-image: url("https://cdn.kromasol.com/netzen/img/icono-carrito-nuevo.svg"); height: 40px !important; border: 0; border-radius: 8px; background-repeat: no-repeat; background-position: center center; background-size: contain; center { display: flex; justify-content: center; align-items: center; } .shopping-cartItem { font-family: "futura-pt-condensed"; color: #ffffff !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 4px; font-size: 14px !important; b { font-weight: 600 !important; } } } .shopping-cart:hover { background-image: url("https://cdn.kromasol.com/netzen/img/icono-carrito-nuevo.svg"); background-repeat: no-repeat; background-position: center center; } /*button { height: 50px; border: 0; background-color: #171717 !important; border-radius: 8px; > div { display: flex !important; justify-content: center; align-items: center; .shopping-cart:before { content: ''; display: block; background-image: url('https://cdn.kromasol.com/netzen/img/icono-comprar.svg'); background-repeat: no-repeat; background-size: contain; background-position: center center; -webkit-filter: brightness(0%) invert(100%); filter: brightness(0%) invert(100%); } > span.badge { margin-left: 15px; background-color: #FFFFFF; font-family: "futura-pt"; border-radius: 100%; display: flex; justify-content: center; align-items: center; padding: 0; } } }*/ } } } } > .eCommerce_TOPBarraTienda_PC, .eCommerce_TOPBarraDetalle_PC, .eCommerce_TOPBarraCarrito_PC { > table { > tbody > tr { > td.BarraToP_Regresar { display: flex; justify-content: center; align-items: center; margin-right: 30px; @media (min-width: 768px) { margin-right: 60px; } button, button:hover, button:active, button.active { background-color: transparent; border: 0; outline: 0; outline-offset: 0; box-shadow: none; height: initial !important; width: initial !important; padding-top: 0 !important; padding-left: 0 !important; span { font-size: 40px !important; } span:before { -webkit-filter: brightness(0%) invert(100%); filter: brightness(0%) invert(100%); } } } > td.BarraToP_Buscador { table.buscabox { min-width: 249px; width: calc(100vw - 111px); @media (min-width: 768px) { width: calc(100vw - 141px); } @media (min-width: 992px) { width: auto; } } } > td.BarraToP_Carrito { /*button { > div { .shopping-cart:before { width: 15px; height: 15px; @media (min-width: 576px) { width: 25px; height: 25px; } } > span:nth-of-type(2) { font-family: "futura-pt"; font-size: 12px; text-transform: uppercase; color: #FFFFFF; @media (min-width: 576px) { font-size: 20px; } } > span.badge { width: 20px; height: 20px; font-size: 10px; @media (min-width: 576px) { width: 30px; height: 30px; font-size: 20px; } } } }*/ } } } } > .eCommerce_TOPBarraTienda_MB, .eCommerce_TOPBarraDetalle_MB, .eCommerce_TOPBarraCarrito_MB { > table { > tbody > tr { > td.BarraToP_Buscador { table.buscabox { min-width: 360px; width: calc(100vw - 30px); @media (min-width: 992px) { width: auto; } } } > td.BarraToP_Carrito { /*button { > div { .shopping-cart:before { width: 25px; height: 25px; } > span:nth-of-type(2) { font-family: "futura-pt"; font-size: 12px; text-transform: uppercase; color: #FFFFFF; @media (min-width: 576px) { font-size: 20px; } } > span.badge { width: 30px; height: 30px; font-size: 20px; } } }*/ } } } } > #divPRElogo + div.container { width: 100%; max-width: 1200px; padding: 0; } > #compra { > center { > div.eCommerce_NavMenu { width: 100%; max-width: 1200px; padding: 0; margin: auto; nav.navbar { background-color: #02abe9; border-radius: 10px; > .container-fluid { padding: 0; .navbar-collapse { border: 0; padding: 0; .navbar-nav { display: flex; flex-direction: column; @media (min-width: 768px) { flex-direction: row; } > li { flex-grow: 1; border: 0; > a { font-family: "futura-pt-condensed"; font-size: 25px; font-weight: 600; text-transform: uppercase; color: #ffffff; background-color: transparent; height: 60px; display: flex; justify-content: center; align-items: center; } > a:hover { background-color: transparent !important; color: #ffffff; } > a:focus { background-color: transparent !important; color: #ffffff; } .caret { margin-left: 6px; border-top: 12px dashed; border-right: 12px solid transparent; border-left: 12px solid transparent; } .dropdown-menu { background-color: #02abe9; > li { > a { background-color: #02abe9; font-family: "futura-pt-condensed"; font-size: 25px; font-weight: 600; text-transform: uppercase; color: #ffffff; } } } } > li:hover, > li:active { background-color: rgba(0, 0, 0, 0.3); } > li:not(:first-child) { border-left: 2px solid #ffffff; } } } } } } > div.eCommerce_FooterPC { width: 100%; max-width: 1200px; padding: 0; margin: auto; background-color: #ffffff; .PieTienda_Letras, .PieTiendaLink { font-size: 22px; font-family: "futura-pt"; color: #171717; word-break: break-all; } .PieTiendaLink:hover, .PieTiendaLink:active { text-decoration: none; } .PieTienda_Fondo.PieTienda_FondoEspecial { background-color: #ffffff; padding-top: 20px; > div:nth-of-type(1) { display: flex; margin: 0; flex-wrap: wrap; > div { padding: 0; } > div:nth-of-type(1), > div:nth-of-type(2) { width: 100%; @media (min-width: 992px) { width: 50%; } } > div:nth-of-type(1) { > table { display: flex; > tbody { width: 100%; > tr { display: flex; justify-content: center; > td:first-child { width: 70px; display: flex; justify-content: center; .glyphicon-bullhorn:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-campana.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 30px; height: 40px; } } > td:last-child { width: calc(100% - 70px); max-width: 290px; margin-top: 7px; p:first-child { margin-left: 15px; } > p:last-child { table { width: calc(100% + 70px); margin-left: -70px; position: relative; tr { display: flex; td:first-child { width: 100%; input { width: calc(100% - 80px); margin-left: 16px; } } td:last-child { position: absolute; top: -48px; right: 25px; > button { width: 30px; height: 30px; } } } } } } } } } } > div:nth-of-type(2) { > table { display: flex; > tbody { width: 100%; > tr { display: flex; justify-content: center; max-width: 360px; width: 100%; margin: auto; > td { margin-bottom: 0; display: flex; align-items: center; } > td:first-child { width: 30px; margin-right: 20px; .glyphicon-list:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-lista.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 30px; height: 14px; } .glyphicon-sunglasses:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-escudo.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 25px; height: 30px; } } > td:last-child { width: calc(100% - 50px); } } > tr:first-child { margin-bottom: 15px; } } } } > div:nth-of-type(3) { width: 100%; > table { display: flex; > tbody { width: 100%; display: flex; flex-wrap: wrap; > tr:nth-of-type(1) { display: none; } > tr:nth-of-type(2) { display: flex; justify-content: center; width: 100%; margin: auto; @media (min-width: 992px) { width: 50%; } > td { margin-bottom: 0; display: flex; align-items: center; } > td:first-child { width: 55px; margin-right: 10px; .glyphicon-envelope:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-email.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 55px; height: 55px; } } > td:last-child { width: 295px; .PieTiendaLink { font-size: 22px; font-family: "futura-pt"; color: #02abe9; } } } > tr:nth-of-type(3) { display: none; } > tr:nth-of-type(4) { display: flex; justify-content: center; width: 50%; margin: auto; td { > a { img { display: none; } } > a.SocialMediatwitter:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-twitter-azul.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 768px) { width: 55px; height: 55px; } } > a.SocialMediafacebook:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-facebook-azul.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 768px) { width: 55px; height: 55px; } } > a.SocialMediainstagram:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-instagram-azul.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 768px) { width: 55px; height: 55px; } } > a.SocialMediawhatsapp:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-whatsapp-azul.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 768px) { width: 55px; height: 55px; } } } } } } } } > div:nth-of-type(2) { .glyphicon-globe { display: none; } .PieTienda_SelectorIdioma { height: 50px; width: 180px; border-radius: 8px; background: #ffffff; border-color: #171717; font-family: "futura-pt"; font-size: 22px; color: #222222; padding: 10px 5px; } } } .PieTienda_Fondo.eCommerce_FooterPagos { background-color: #ffffff; border-top: 6px solid #d8d8d8; > div { display: flex; margin: 0; > div { padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin: auto; @media (min-width: 576px) { flex-direction: row; width: initial; } .FormaPago_Paypal, .FormaPago_Oxxo { margin: 0 50px 20px; @media (min-width: 576px) { margin: 0 50px; } img { display: none; } } .FormaPago_Paypal:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/logo-paypal@2x.png); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 154px; height: 42px; } .FormaPago_Oxxo:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/logo-oxxo@2x.png); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 146px; height: 54px; } } } } } > div.eCommerce_FooterTE { width: 100%; max-width: 1200px; padding: 0; margin: auto; background-color: #ffffff; .PieTienda_Letras, .PieTiendaLink { font-size: 22px; font-family: "futura-pt"; color: #171717; word-break: break-all; } .PieTiendaLink:hover, .PieTiendaLink:active { text-decoration: none; } .PieTienda_Fondo.PieTienda_FondoEspecial { background-color: #ffffff; padding-top: 20px; > div.row { margin: 0; > div { padding: 0; > table { width: 100%; min-width: 340px; width: calc(100vw - 20px); max-width: 768px; > tbody { display: flex; flex-direction: column; justify-content: center; > tr { display: flex; justify-content: center; width: 100%; margin: auto; margin-bottom: 15px; > td { margin-bottom: 0; display: flex; align-items: center; } > td:first-child { width: 30px; margin-right: 20px; .glyphicon-list:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-lista.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 30px; height: 14px; } .glyphicon-sunglasses:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-escudo.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 25px; height: 30px; } } > td:last-child { width: auto; font-size: 22px; font-family: "futura-pt"; color: #171717; word-break: break-all; } } > tr:nth-of-type(3), > tr:nth-of-type(5) { display: none; } > tr:nth-of-type(4) { margin-top: 15px; > td:first-child { width: 55px; margin-right: 20px; .glyphicon-envelope:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-email.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 55px; height: 55px; } } > td:last-child { width: auto; font-size: 22px; font-family: "futura-pt"; color: #02abe9; word-break: break-all; } } > tr:nth-of-type(6) { display: flex; justify-content: center; td { > a { img { display: none; } } > a.SocialMediatwitter:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-twitter-azul.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 768px) { width: 55px; height: 55px; } } > a.SocialMediafacebook:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-facebook-azul.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 768px) { width: 55px; height: 55px; } } > a.SocialMediainstagram:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-instagram-azul.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 768px) { width: 55px; height: 55px; } } > a.SocialMediawhatsapp:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-whatsapp-azul.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 768px) { width: 55px; height: 55px; } } } } } } } } } .PieTienda_Fondo.eCommerce_FooterPagos { background-color: #ffffff; border-top: 6px solid #d8d8d8; > div { display: flex; margin: 0; > div { padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin: auto; @media (min-width: 576px) { flex-direction: row; width: initial; } .FormaPago_Paypal, .FormaPago_Oxxo { margin: 0 50px 20px; @media (min-width: 576px) { margin: 0 50px; } img { display: none; } } .FormaPago_Paypal:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/logo-paypal@2x.png); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 154px; height: 42px; } .FormaPago_Oxxo:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/logo-oxxo@2x.png); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 146px; height: 54px; } } } } } > div.eCommerce_FooterExtra { width: 100%; max-width: 1200px; padding: 0; margin: auto; > .row { margin: 0; > div { padding: 0; } } .cont_inferior { background-color: #d8d8d8; width: 100%; font-size: 22px; font-family: "futura-pt"; color: #404040; padding: 50px; > center { display: flex; flex-direction: column; @media (min-width: 768px) { flex-direction: row; flex-wrap: wrap; } a.a { color: #404040; } a.a:hover { color: #404040; text-decoration: none; } > div:nth-of-type(1), > div:nth-of-type(3), > div:nth-of-type(6), > div:nth-of-type(8), > div:nth-of-type(10) { display: none; } > div:nth-of-type(2) { margin-top: 0 !important; margin-bottom: 20px !important; margin-left: 0px !important; margin-right: 0px !important; width: 100%; display: flex; flex-direction: column; @media (min-width: 768px) { flex-direction: row; } @media (min-width: 820px) { margin-left: calc((100vw - 820px) / 2) !important; margin-right: calc((100vw - 820px) / 2) !important; } @media (min-width: 1200px) { margin-left: 190px !important; margin-right: 190px !important; } br { display: none; } > div { width: 100%; text-align: center; margin-bottom: 20px; padding: 0 10px; @media (min-width: 768px) { width: 50%; text-align: left; } > b { font-family: "futura-pt-condensed"; font-weight: 600; } } } > div:nth-of-type(4), > div:nth-of-type(5) { width: 100%; display: flex; flex-direction: column; margin-top: 0; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; text-align: center; @media (min-width: 768px) { flex-direction: row; flex-wrap: wrap; width: 50%; text-align: left; max-width: 360px; } > div { display: flex; align-items: center; justify-content: center; img { display: none; } } > div:before { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-documento.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 30px; height: 30px; margin-right: 10px; } } > div:nth-of-type(4) { margin-bottom: 20px; @media (min-width: 768px) { margin-bottom: 40px; } @media (min-width: 820px) { margin-left: calc((100vw - 820px) / 2); } @media (min-width: 1200px) { margin-left: 190px; } } > div:nth-of-type(5) { margin-bottom: 40px; @media (min-width: 768px) { margin-bottom: 40px; } @media (min-width: 820px) { margin-right: calc((100vw - 820px) / 2); } @media (min-width: 1200px) { margin-right: 190px; } } > div:nth-of-type(7) { margin: 0; } } } } iframe { display: none; } } } } body.eCommerce_BodyTienda { #titulosdesarmado { display: flex; align-items: center; justify-content: center; > div { display: flex; align-items: center; justify-content: center; .row { > div { width: 100%; } } } > div:nth-child(1n) { .Carrito_Header_CarritoTitulo { text-transform: uppercase; font-size: 25px; color: #02abe9; font-family: $f-pt-condensed; font-weight: 600; } } > div:nth-child(2n) { #Desarma15 { .btn-primary { text-transform: uppercase; font-size: 17px !important; color: #171717; font-family: $f-pt; background: #ffffff; border-radius: 10px; padding: 15px 20px 15px 60px; border: none; > span { position: relative; &::before { content: ""; width: 45px; height: 31px; background: url("https://cdn.kromasol.com/netzen/img/icon-knasta.png"); background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -10px; right: 0px; } } } } } } #PrincipalGift { >center { >div.jumbotron.GiftSelect { max-width: 60% !important; background: #ffffff; > div:first-child { > div:first-child { background: #02abe9 !important; color: #ffffff; font-family: $f-pt-condensed; font-size: 33px; font-weight: 600; height: auto !important; padding: 20px; } > div:nth-child(2n) { font-size: 25px; color: #727272; font-family: $f-pt; margin-top: 20px; } } > div.row { > div { > button { padding: 10px; font-family: $f-pt-condensed; color: #ffffff; font-size: 25px; text-transform: uppercase; > span { position: relative; top: 5px; } } .btn-default { background: #696969; } .btn-success { background: #00b95c; } } } } } } //Estilos Producto Pop > #compra { > center { .container{ #myModalZOOM{ .modal-dialog{ #ZoomProductoFondoEstilo{ .modal-header{ padding:0px; border-radius: 5px 5px 0px 0px; .close{ font-size: 38px !important; position: relative; top: 15px; right: 30px; color: white; opacity: 0.8; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 25px !important; top: 4px; right: 20px; } } .modal-title{ text-transform: uppercase; color:#FFFFFF; font-family: $f-pt-condensed; font-weight: 600; font-size:60px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 22px; } } } #modal-body{ background:#FFFFFF; #AjaxZoom{ >div{ >ul{ >li{ >a{ text-transform: uppercase; font-family: $f-pt-condensed; font-size: 25px; color: #02ABE9; padding:5px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; } } } .active{ >a{ color: #FFFFFF; font-family: $f-pt-condensed; font-weight: 600; font-size: 25px; background:#02ABE9 !important; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; } } } } .tab-content{ .tab-pane { #myGallery{ .carousel-inner{ .item{ >img{ width: 500px; @media only screen and (max-width: 570px) and (min-width: 320px){ width: 300px; } } } } .carousel-control{ border-radius:10px; } } .row{ .Detalle_Caja_Descripcion{ padding:0px 20px; display: flex; align-items:center; justify-content: space-between; flex-wrap: wrap; .DetalleProductos_TituloPrincipal{ .Carpetas_TitulosPrincipal{ >span{ color: red; font-family: $f-pt-condensed; font-weight:600; font-size: 45px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 30px; } } } .ProdDetailDES{ font-family: $f-pt; color: #171717; font-size: 25px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; } } } .DetalleProductos_PtosNegoCrePub{ display: none; } .ProductoDetallePrecios{ margin: 50px; >tbody{ >tr{ >td{ color: red; font-family:$f-pt; font-size: 60px; } .Detalle_LetrasMoneda, .Detalle_ImporteEntero{ font-size: 60px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 20px; } } .Detalle_ImporteCentavos, .Producto_Moneda{ font-size: 30px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 10px; } } } } } .Detalle_LeyendaCantidad{ position: relative; bottom: 25px; left: 40px; > center{ font-family: $f-pt-condensed; font-size:22px; color: #171717; font-weight: 600; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 11px; font-family: $f-pt; } } } .DetalleProducto_SeccionPrecios{ margin-top: 10px; position: relative; right: 95px; top: 10px; >tbody{ >tr{ >td{ .Detalle_MasMenos{ font-family: $f-pt-condensed; font-size:19px; color: #171717; font-weight: 600; padding:0px; @media only screen and (max-width: 570px) and (min-width: 320px){ color: #727272; } } .Detalle_CampoCantidad{ font-family: $f-pt-condensed; font-size:30px; color: #171717; font-weight: 600; margin: 0px 40px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; margin: 0px 20px; } } } } } } .DetalleProducto_BotonComprar{ >tbody{ >tr{ >td{ .item{ >img{ } .Detalle_Comprar{ background:#02ABE9; color:#FFFFFF; font-size: 25px; font-family: $f-pt-condensed; font-weight: 600; border: none; text-transform: uppercase; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; } } } } } } } } } } } } } } .modal-footer{ background: #363636; border-radius: 0px 0px 5px 5px; padding: 20px; @media only screen and (max-width: 570px) and (min-width: 320px){ padding:10px; } >button{ background:transparent; border:1px solid #ffffff; border-radius:10px; font-size: 25px; font-weight: 600; color: #FFFFFF; font-family:$f-pt-condensed; text-transform: uppercase; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 15px; } } } } .eCommerce_Detalles_Global.MOKA{ .modal-header{ background: $moka; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $moka !important; .Carpetas_TitulosPrincipal{ >span{ color: $moka !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $moka !important; } } } } } } } } } } } .eCommerce_Detalles_Global.ANTARA{ .modal-header{ background: $antara; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $antara !important; .Carpetas_TitulosPrincipal{ >span{ color: $antara !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $antara !important; } } } } } } } } } } } .eCommerce_Detalles_Global.LOTUS{ .modal-header{ background: $lotus; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $lotus !important; .Carpetas_TitulosPrincipal{ >span{ color: $lotus !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $lotus !important; } } } } } } } } } } } .eCommerce_Detalles_Global.SONIK{ .modal-header{ background: $sonik; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $sonik !important; .Carpetas_TitulosPrincipal{ >span{ color: $sonik !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $sonik !important; } } } } } } } } } } } .eCommerce_Detalles_Global.PINK{ .modal-header{ background: $s-pink; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $s-pink !important; .Carpetas_TitulosPrincipal{ >span{ color: $s-pink !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $s-pink !important; } } } } } } } } } } } .eCommerce_Detalles_Global.VESTA{ .modal-header{ background: $vesta; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $vesta !important; .Carpetas_TitulosPrincipal{ >span{ color: $vesta !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $vesta !important; } } } } } } } } } } } .eCommerce_Detalles_Global.SUPERNOVA{ .modal-header{ background: $supernova; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $supernova !important; .Carpetas_TitulosPrincipal{ >span{ color: $supernova !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $supernova !important; } } } } } } } } } } } .eCommerce_Detalles_Global.KOSMOS{ .modal-header{ background: $kosmos; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $kosmos !important; .Carpetas_TitulosPrincipal{ >span{ color: $kosmos !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $kosmos !important; } } } } } } } } } } } .eCommerce_Detalles_Global.NOX{ .modal-header{ background: $nox; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $nox !important; .Carpetas_TitulosPrincipal{ >span{ color: $nox !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $nox !important; } } } } } } } } } } } .eCommerce_Detalles_Global.RED{ .modal-header{ background: $kosmos-red; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $kosmos-red !important; .Carpetas_TitulosPrincipal{ >span{ color: $kosmos-red !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $kosmos-red !important; } } } } } } } } } } } .eCommerce_Detalles_Global.FUSION{ .modal-header{ background: $fusion; } #AjaxZoom{ >div{ .tab-content{ .tab-pane { .row{ .Detalle_Caja_Descripcion{ .DetalleProductos_TituloPrincipal{ border-bottom: 3px solid $fusion !important; .Carpetas_TitulosPrincipal{ >span{ color: $fusion !important; } } } .ProductoDetallePrecios{ >tbody{ >tr{ >td{ color: $fusion !important; } } } } } } } } } } } } } #myModalCART{ .modal-dialog{ #ZoomProductoCart{ .modal-header{ padding:0px; background: #02ABE9 !important; border-radius: 5px 5px 0px 0px !important; .close{ font-size: 25px !important; position: relative; top: 30px; right: 30px; color: white; opacity: 0.8 !important; border:none !important; } .modal-title{ text-transform: uppercase; color:#FFFFFF; font-family: $f-pt-condensed; font-weight: 600; font-size:60px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 22px; } } } .modal-body{ @media only screen and (max-width: 570px) and (min-width: 320px){ padding:0px; } #AjaxCart{ .panel-default{ border:none !important; background:#FFFFFF !important; .panel-body{ position:relative; border: 1px solid #cccccc; border-radius: 10px; .Carrito_Header_EnvioTitulo{ text-align: center; text-transform: uppercase; color: #696969; font-family: $f-pt-condensed; font-weight: 600; font-size: 30px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size:16px; } } .row{ } div:nth-child(1n){ background:#FFFFFF !important; color: #696969; font-size: 30px; font-family: $f-pt; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; } .col-xs-4{ display: none; } .col-xs-8{ background: #EFF0F0 !important; width: 100%; display: flex; align-items: center; justify-content: center; >p{ >font{ color: #696969 !important; font-size: 30px; font-family: $f-pt; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; } } } } } .Fila_Productos{ background:#FFFFFF; border-bottom:3px dashed #D8D8D8; display: flex; align-items: center; justify-content: center; padding: 20px 0px; .Columna-Eliminar{ width: 10%; @media only screen and (max-width: 570px) and (min-width: 320px){ background:transparent !important; width: 100%; padding:0px; } >button{ width: 50px; height: 50px; @media only screen and (max-width: 570px) and (min-width: 320px){ width: 25px; height: 25px; display: flex; align-items:center; justify-content: center; } >span{ font-size: 25px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 15px; } } } } .Columna-Fotografia{ width: 60%; display: block !important; > center{ display: flex; align-items:center; justify-content: space-evenly; >img{ width: 100%; max-width: 185px; min-width: 65px; border: 1px solid #707070; border-radius: 10px; } >table{ >tbody{ >tr{ >td{ >button{ border:none; } > center{ >p{ color: #696969; font-family: $f-pt; font-size: 32px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; } } } } } } } } } .Columna-PrecioProducto{ display: none; } .Columna-PrecioTotal{ >p{ font-family: $f-pt; color: #696969; font-size: 40px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 20px; } } } } .Fila_SubTotal , .Fila_Impuesto1{ padding-top: 10px; @media only screen and (max-width: 570px) and (min-width: 320px){ display: flex; } .Columna_NombreSubTotal , .Columna_NombreImpuesto1{ @media only screen and (max-width: 570px) and (min-width: 320px){ width: 60%; display: flex; } } .Columna_ImporteSubtotal , .Columna_ImporteImpuesto1{ @media only screen and (max-width: 570px) and (min-width: 320px){ width: 40%; display: flex; } } >div{ >p{ >font{ color: #00B95C; font-size: 30px; font-family: $f-pt; text-transform: uppercase; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; width: 75%; } } } } } .Fila_Totales{ padding-top: 10px; border-top:3px dashed #D8D8D8; @media only screen and (max-width: 570px) and (min-width: 320px){ display: flex; } .Columna_NombreTotal{ @media only screen and (max-width: 570px) and (min-width: 320px){ width: 60%; display: flex; } } .Columna_ImporteTotal{ @media only screen and (max-width: 570px) and (min-width: 320px){ width: 100%; display: flex; } } >div{ >p{ >font{ font-size: 30px; font-family: $f-pt; text-transform: uppercase; color: #696969; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; width: 75%; } } } } } } } .eCommerce_ContinuarTerminar{ .row{ >div{ display: flex; align-items: center; justify-content: center; .btn { font-family: $f-pt-condensed; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; padding: 10px 15px; margin: 0px 20px; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 16px; margin: 0px 10px; } } .btn.btn-danger { background-color: #b5304b; border-color: #b5304b; @media (min-width: 576px) { margin-bottom: 0; } >span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-atras.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 25px; height: 37px; margin-right: 30px; @media only screen and (max-width: 570px) and (min-width: 320px){ width: 15px; } } >span{ @media only screen and (max-width: 570px) and (min-width: 320px){ width: 25px; } } } .btn.btn-success { background-color: #00b95c; border-color: #00b95c; > span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-comprar-alt.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 37px; height: 32px; margin-right: 30px; @media only screen and (max-width: 570px) and (min-width: 320px){ width: 22px; } } >span{ @media only screen and (max-width: 570px) and (min-width: 320px){ width: 25px; } } } } } } } } .modal-footer{ background: #363636 !important; border-radius: 0px 0px 5px 5px; padding: 20px; @media only screen and (max-width: 570px) and (min-width: 320px){ padding:10px; } >button{ background:transparent; border:1px solid #ffffff; border-radius:10px; font-size: 25px; font-weight: 600; color: #FFFFFF; font-family:$f-pt-condensed; text-transform: uppercase; @media only screen and (max-width: 570px) and (min-width: 320px){ font-size: 15px; } } } } } } } >div.eCommerce_Productos{ width: 100%; max-width: 1200px; padding: 0; margin: auto; > ul { > li { .thumbnail.Productos_Caja { text-transform: uppercase; > table { tbody { > tr { > td { > div { > center { > img { width: 100%; border: solid 2px #2b27272e; border-radius: 5px; } } } } } } } > img { width: 100%; border: solid 2px #2b27272e; border-radius: 5px; } > div { padding: 20px; font-size: 22px; font-family: $f-pt; } } } } } #BotonesExtra { display: none; } > div { > center { > div.panel-body { display: flex; align-items: center; justify-content: center; > table { background: #ffffff !important; border: none !important; border-radius: 10px; > tbody { > tr { > td { padding: 15px; font-size: 17px !important; color: #171717; font-family: $f-pt; > center { > span { display: none; } } > a { img[title="DESACTIVAR USO DEL KASH"] { background-image: url("https://cdn.kromasol.com/netzen/img/activo.png"); width: 60px; height: 30px; box-sizing: border-box; display: block; position: relative; bottom: 10px; padding-left: 60px; overflow: hidden; } img[title="ACTIVAR USO DEL KASH"] { background: url("https://cdn.kromasol.com/netzen/img/inactivo.png"); width: 60px; height: 30px; box-sizing: border-box; display: block; position: relative; bottom: 10px; padding-left: 60px; overflow: hidden; } } } } } } } } } } } } body.eCommerce_BodyDetalle { > #compra { > center { #BotonesExtra { display: none; } > div { > center { > div.panel-body { display: flex; align-items: center; justify-content: center; > table { background: #ffffff !important; border: none !important; border-radius: 10px; > tbody { > tr { > td { padding: 15px; font-size: 17px !important; color: #171717; font-family: $f-pt; > center { > span { display: none; } } > a { img[title="DESACTIVAR USO DEL KASH"] { background-image: url("https://cdn.kromasol.com/netzen/img/activo.png"); width: 60px; height: 30px; box-sizing: border-box; display: block; position: relative; bottom: 10px; padding-left: 60px; overflow: hidden; } img[title="ACTIVAR USO DEL KASH"] { background: url("https://cdn.kromasol.com/netzen/img/inactivo.png"); width: 60px; height: 30px; box-sizing: border-box; display: block; position: relative; bottom: 10px; padding-left: 60px; overflow: hidden; } } } } } } } } } // CONTENEDOR DETALLES (SOLICITAR CLASE) > div.eCommerce_Detalles_Global { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 1200px; padding: 0; margin: auto; > div.row { display: flex; flex-direction: column; margin: 0; > div { padding: 0; width: 100%; } > div.eCommerce_ContenedorGaleria { margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; @media (min-width: 768px) { flex-direction: row; } > table { width: 100%; > tbody { > tr { display: flex; flex-direction: column; align-items: center; justify-content: center; @media (min-width: 768px) { flex-direction: row; } > td:nth-of-type(1) { ul.thumbnails { display: flex; flex-wrap: nowrap; overflow-x: hidden; overflow-y: hidden; flex-direction: row; height: calc((360px - 10px) / 3); width: 360px; margin-bottom: 0; @media (min-width: 360px) { height: calc((100vw - 10px) / 3); width: 100vw; } @media (min-width: 500px) { width: 500px; height: 160px; } @media (min-width: 768px) { flex-direction: column; height: 500px; width: 160px; } li { width: calc((360px - 10px) / 3); height: calc((360px - 10px) / 3); border-radius: 15px; padding: 0 !important; @media (min-width: 360px) { width: calc((100vw - 10px) / 3); height: calc((100vw - 10px) / 3); } @media (min-width: 500px) { width: 160px; height: 160px; } a { width: calc((360px - 10px) / 3); height: calc((360px - 10px) / 3); @media (min-width: 360px) { width: calc((100vw - 10px) / 3); height: calc((100vw - 10px) / 3); } @media (min-width: 500px) { width: 160px; height: 160px; } img { width: calc((360px - 10px) / 3); height: calc((360px - 10px) / 3); border-radius: 15px; @media (min-width: 360px) { width: calc((100vw - 10px) / 3); height: calc((100vw - 10px) / 3); } @media (min-width: 500px) { width: 160px; height: 160px; } } } } li:not(:first-child) { margin: 0 0 0 5px; @media (min-width: 500px) { margin: 0 0 0 10px; } @media (min-width: 768px) { margin: 10px 0 0 0; } } li:last-child { display: none; } } } > td:nth-of-type(2) { order: -1; width: 360px; margin-right: 0; margin-bottom: 25px; @media (min-width: 360px) { width: 100vw; } @media (min-width: 500px) { width: 500px; } @media (min-width: 768px) { margin-right: 25px; margin-bottom: 0; } div { width: 360px; height: 360px; max-width: 360px; background: transparent; border: none; @media (min-width: 360px) { width: 100vw; height: 100vw; max-width: 100vw; } @media (min-width: 500px) { width: 500px; height: 500px; max-width: 500px; } img { width: 360px; height: 360px; max-width: 360px !important; max-height: 360px; @media (min-width: 360px) { width: 100vw; height: 100vw; max-width: 100vw !important; max-height: 100vw; } @media (min-width: 500px) { width: 500px; height: 500px; max-width: 500px !important; max-height: 500px; } } } } } } } // VersiĆ³n mobile > center { margin-right: 0; margin-bottom: 25px; @media (min-width: 360px) { width: 100vw; } @media (min-width: 500px) { width: 500px; } @media (min-width: 768px) { margin-right: 25px; margin-bottom: 0; } .Detalle_Caja { background-color: transparent; border: none; > img { width: 360px; height: 360px; max-width: 360px !important; max-height: 360px; @media (min-width: 360px) { width: 100vw; height: 100vw; max-width: 100vw !important; max-height: 100vw; } @media (min-width: 500px) { width: 500px; height: 500px; max-width: 500px !important; max-height: 500px; } } } } > .thumbnailsmobil { display: flex; overflow-x: hidden; overflow-y: hidden; height: calc((360px - 10px) / 3); width: 360px; margin-bottom: 0; @media (min-width: 360px) { height: calc((100vw - 10px) / 3); width: 100vw; } @media (min-width: 500px) { width: 500px; height: 160px; } @media (min-width: 768px) { height: 500px; width: 160px; } > table { width: 100%; margin-top: 0 !important; height: calc((360px - 10px) / 3); width: 360px; margin-bottom: 0; @media (min-width: 360px) { height: calc((100vw - 10px) / 3); width: 100vw; } @media (min-width: 500px) { width: 500px; height: 160px; } @media (min-width: 768px) { height: 500px; width: 160px; } > tbody { width: 100%; > tr { width: 100%; display: flex; flex-wrap: nowrap; overflow-x: hidden; overflow-y: hidden; flex-direction: row; @media (min-width: 768px) { flex-direction: column; } td { width: calc((360px - 10px) / 3); height: calc((360px - 10px) / 3); border-radius: 15px; padding: 0 !important; border: none !important; background-color: transparent !important; @media (min-width: 360px) { width: calc((100vw - 10px) / 3); height: calc((100vw - 10px) / 3); } @media (min-width: 500px) { width: 160px; height: 160px; } li { width: calc((360px - 10px) / 3); height: calc((360px - 10px) / 3); padding: 0 !important; @media (min-width: 360px) { width: calc((100vw - 10px) / 3); height: calc((100vw - 10px) / 3); } @media (min-width: 500px) { width: 160px; height: 160px; } img { width: calc((360px - 10px) / 3); height: calc((360px - 10px) / 3); border-radius: 15px; @media (min-width: 360px) { width: calc((100vw - 10px) / 3); height: calc((100vw - 10px) / 3); } @media (min-width: 500px) { width: 160px; height: 160px; } } } } td:not(:first-child) { margin: 0 0 0 5px; @media (min-width: 500px) { margin: 0 0 0 10px; } @media (min-width: 768px) { margin: 10px 0 0 0; } } td:last-child { display: none; } } } } } } > div.eCommerce_DescripcionProducto { > .Detalle_Caja { display: flex; flex-wrap: wrap; padding-left: 0 !important; padding-right: 0 !important; border: none; > div { .Carpetas_TitulosPrincipal { font-family: "futura-pt-condensed"; font-size: 45px; font-weight: 600; color: #02abe9; text-align: left; text-transform: uppercase; margin-bottom: 25px; padding-top: 40px; padding-left: 50px; padding-right: 50px; border-top: 3px solid #02abe9; } #ProdDetailDES, #ProdDetailCAR { font-family: "futura-pt"; font-size: 25px; color: #171717; padding-bottom: 40px; padding-left: 50px; padding-right: 50px; border-bottom: 3px solid #02abe9; display: block; } } > div.DetalleProductos_TituloPrincipal { width: 100%; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0 !important; border-bottom: 20px solid #eff0f0 !important; order: -1; } > table.DetalleProductos_TablaIconos { display: none; } > div.DetalleProductos_PtosNegoCrePub { width: 100%; border-bottom: 3px solid #d8d8d8 !important; padding: 20px !important; > table { display: flex; align-items: center; justify-content: center; tbody { display: flex; align-items: center; justify-content: center; @media only screen and (max-width: 570px) and (min-width: 320px) { flex-direction: column; } > tr { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 10px 20px; @media only screen and (max-width: 570px) and (min-width: 320px) { flex-direction: row; width: 100%; } > td { @media only screen and (max-width: 570px) and (min-width: 320px) { width: 50%; } font-size: 30px; &:nth-child(1n) { font-family: $f-pt-condensed; color: #02abe9; } &:nth-child(2n) { font-family: $f-pt; color: #171717; padding: 0px !important; text-align: center !important; } } } } } } > div.DetalleProductos_Caracteristicas { display: none; width: 100%; padding: 0 35px; border-bottom: 20px solid #eff0f0 !important; } > table.ProductoDetallePrecios { margin-top: 40px; width: 100%; @media (min-width: 768px) { width: 33%; } tr { display: flex; justify-content: center; font-family: "futura-pt" !important; td.Detalle_LetrasMoneda, td.Detalle_ImporteEntero { font-size: 60px; color: #02abe9; @media (min-width: 768px) { font-size: 40px; } @media (min-width: 992px) { font-size: 60px; } } td.Detalle_ImporteCentavos { color: #02abe9; font-size: 30px; @media (min-width: 768px) { font-size: 15px; } @media (min-width: 992px) { font-size: 30px; } } td.Producto_Moneda { color: #02abe9; font-size: 35px; margin-top: 35px; @media (min-width: 768px) { font-size: 15px; } @media (min-width: 992px) { font-size: 35px; } } } } > div.Detalle_LeyendaCantidad { position: absolute; font-family: "futura-pt-condensed"; font-size: 22px; color: #171717; bottom: 295px; left: calc(50% - 31px); @media (min-width: 768px) { bottom: 210px; } } > table.DetalleProducto_SeccionPrecios { margin-top: 60px; width: 100%; @media (min-width: 768px) { width: 33%; } tr { display: flex; justify-content: center; font-family: "futura-pt-condensed"; font-size: 30px; font-weight: 600; color: #171717; td { button { font-size: 20px; color: #171717; } } td:nth-of-type(2) { display: flex; align-items: center; } } } > table.DetalleProducto_BotonComprar { margin-top: 40px; width: 100%; @media (min-width: 768px) { width: 33%; } td { display: flex; justify-content: center; button { background-color: #02abe9; border: 1px solid #337ab7; width: 175px; height: 60px; display: flex; justify-content: center; align-items: center; padding: 0; font-family: "futura-pt-condensed"; font-size: 25px; font-weight: 600; color: #ffffff; text-transform: uppercase; .glyphicon-shopping-cart:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-comprar.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 37px; height: 32px; -webkit-filter: brightness(0%) invert(100%); filter: brightness(0%) invert(100%); } } } } > table.ProductosDetalles_SocialMedia { width: 100% !important; margin-top: 50px !important; margin-bottom: 50px; tr { display: flex; justify-content: center; flex-wrap: wrap; td { width: 35px; height: 35px; margin: 0 10px; padding-left: 0 !important; padding-right: 0 !important; flex: 0 0 auto; @media (min-width: 576px) { width: 55px; height: 55px; margin: 0 25px; } a, div { img { width: 55px !important; height: 55px !important; display: none; } } } td:nth-of-type(1) { a { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-facebook-color.png); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 576px) { width: 55px; height: 55px; } } } td:nth-of-type(2) { a { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-twitter-color.png); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 576px) { width: 55px; height: 55px; } } } td:nth-of-type(3) { a { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-pinterest-color.png); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 576px) { width: 55px; height: 55px; } } } td:nth-of-type(4) { div { content: ""; display: block; background-image: url(https://kromasol.com/cdn/netzen/img/icono-copiar-color.png); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 35px; height: 35px; cursor: pointer; //-webkit-filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); //filter: invert(40%) sepia(99%) saturate(1000%) hue-rotate(165deg); @media (min-width: 576px) { width: 55px; height: 55px; } } } } } } } } } // CONTENEDOR DETALLES (SOLICITAR CLASE) > div.eCommerce_Detalles_Global.supernova { @include detalle-producto($supernova); } > div.eCommerce_Detalles_Global.nox { @include detalle-producto($nox); } > div.eCommerce_Detalles_Global.antara { @include detalle-producto($antara); } > div.eCommerce_Detalles_Global.fusion { @include detalle-producto($fusion); } > div.eCommerce_Detalles_Global.lotus { @include detalle-producto($lotus); } > div.eCommerce_Detalles_Global.noxdos { @include detalle-producto($noxdos); } > div.eCommerce_Detalles_Global.kosmos { @include detalle-producto($kosmos); } > div.eCommerce_Detalles_Global.sonik { @include detalle-producto($sonik); } > div.eCommerce_Detalles_Global.pink { @include detalle-producto($s-pink); } > div.eCommerce_Detalles_Global.moka { @include detalle-producto($moka); } > div.eCommerce_Detalles_Global.vesta { @include detalle-producto($vesta); } > div.eCommerce_Detalles_Global.red { @include detalle-producto($kosmos-red); } } } } body.eCommerce_BodyCarrito { > #compra { > center { .eCommerce_Body_TituloEnvio { .Carrito_Body_Envio { .container { .row { display: flex; align-items: center; justify-content: center; > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; > p { font-family: "futura-pt"; color: #000000; font-size: 22px; text-transform: uppercase; } } } } } } #BotonesExtra { display: none; } > div { > center { > div.panel-body { display: flex; align-items: center; justify-content: center; > table { background: #ffffff !important; border: none !important; border-radius: 10px; > tbody { > tr { > td { padding: 15px; font-size: 17px !important; color: #171717; font-family: $f-pt; > center { > span { display: none; } } > a { img[title="DESACTIVAR USO DEL KASH"] { background-image: url("https://cdn.kromasol.com/netzen/img/activo.png"); width: 60px; height: 30px; box-sizing: border-box; display: block; position: relative; bottom: 10px; padding-left: 60px; overflow: hidden; } img[title="ACTIVAR USO DEL KASH"] { background: url("https://cdn.kromasol.com/netzen/img/inactivo.png"); width: 60px; height: 30px; box-sizing: border-box; display: block; position: relative; bottom: 10px; padding-left: 60px; overflow: hidden; } } } } } } } .eCommerce_Body_TituloEnvio { .Carrito_Body_Envio { .container { .row { > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; > p { font-family: "futura-pt"; color: #000000; font-size: 22px; text-transform: uppercase; } #Ajax_DataEnvio { width: 100% !important; .row { display: flex; align-items: center; justify-content: center; > div { text-align: left; } } } } } } } } } } > div.Carrito_Header_Container { width: 100%; max-width: 1200px; padding: 0; margin: auto; background-color: #d8d8d8; color: #404040; text-transform: uppercase; font-family: "futura-pt-condensed"; font-weight: 600; padding: 25px; margin-bottom: 15px; .Carrito_Header_Carrito { background-color: transparent; border: none; padding: 0; .Carrito_Header_CarritoTitulo { font-size: 33px; text-align: center; margin-bottom: 0; } } } > div.Carrito_Body_Container { width: 100%; max-width: 1200px; padding: 0; margin: auto; .Carrito_Body_Carrito { padding: 10px 20px; font-family: "futura-pt"; font-size: 18px; color: #696969; text-transform: uppercase; @media (min-width: 768px) { font-size: 24px; } @media (min-width: 992px) { padding: 30px 80px; font-size: 30px; } > .row { margin: 0; .col-md-2 { > div { border: none !important; } } } .Fila_Titulos { display: none; } .Fila_Productos { padding: 30px 10px; border-bottom: 3px dotted #d8d8d8; display: flex; align-items: center; flex-wrap: wrap; > div { width: initial; padding: 0; font { color: #696969 !important; } } > div:nth-of-type(1) { width: 30px; height: 30px; margin-right: 15px; @media (min-width: 768px) { width: 50px; height: 50px; margin-right: 25px; } button { width: 30px; height: 30px; display: flex; padding: 0; justify-content: center; align-items: center; @media (min-width: 768px) { width: 50px; height: 50px; } } } > div:nth-of-type(2) { width: 80px; margin-right: 25px; @media (min-width: 992px) { width: 120px; } button { padding: 0; border: 0; border: 0 !important; background-color: transparent; img { width: 80px; max-width: 80px; border: 1px solid #707070; border-radius: 10px; @media (min-width: 992px) { width: 120px; max-width: 120px; } } } } > div:nth-of-type(3) { width: calc(100% - 45px - 105px); @media (min-width: 768px) { width: 10%; } } > div:nth-of-type(4) { width: 40%; margin-top: 10px; @media (min-width: 768px) { margin-top: 0; width: 30%; } } > div:nth-of-type(5), > div:nth-of-type(6), > div:nth-of-type(7) { width: 20%; text-align: right; margin-top: 10px; @media (min-width: 768px) { width: calc((60% - 75px - 105px) / 3); margin-top: 0; } @media (min-width: 992px) { width: calc((60% - 75px - 145px) / 3); } } } .Fila_Totales { padding: 30px 10px; border-top: 3px dotted #d8d8d8; > div { padding: 0; } font { color: #696969 !important; font-family: "futura-pt-condensed"; font-weight: 600; } } .Linea_Espacio { > div { padding: 0; > div { border: none !important; } } } } } > div.ecommerce_carrito_notas { display: flex; align-items: center; justify-content: center; } > div.eCommerce_Header_TituloEnvio { display: none; } > div.eCommerce_Body_TituloEnvio { width: 100%; max-width: 1200px; padding: 0; margin: auto; .Carrito_Body_Envio { border: none; padding: 0; .container { padding: 20px; .row { > div { font-family: $f-pt-condensed; color: #696969; font-size: 30px; font-weight: 600; text-transform: uppercase; > select { font-size: 20px; font-family: $f-pt; } } } } .row { > div { width: 100%; .panel-default { width: 100%; border: none !important; background: #ffffff !important; .panel-body { display: flex; flex-direction: column; align-items: center; justify-content: center; .Carrito_Header_EnvioTitulo { font-family: $f-pt-condensed; color: #696969; font-size: 30px; font-weight: 600; text-transform: uppercase; } .row { margin: 10px; > div { font-family: $f-pt; color: #171717; font-size: 25px; } } } } } } } } .ecommerce_carrito_descripcionMB { width: 100%; max-width: 1200px; padding: 0 20px 15px; text-transform: uppercase; margin: 0 !important; background-color: #ffffff; @media (min-width: 992px) { padding: 0 80px; } > div.row { margin: 0; > div { padding: 0; border-top: 3px dotted #d8d8d8 !important; > font { font-family: "futura-pt"; font-size: 18px; color: #696969 !important; @media (min-width: 768px) { font-size: 24px; } @media (min-width: 992px) { font-size: 30px; } } } } } .ecommerce_carrito_FotoMB { width: 100%; max-width: 1200px; padding: 0 20px 15px; text-transform: uppercase; margin: 0 !important; background-color: #ffffff; @media (min-width: 992px) { padding: 0 80px; } > div.row { margin: 0; display: flex; align-items: center; flex-wrap: wrap; > div { padding: 0; } > div:nth-of-type(1) { width: 30px; height: 30px; margin-right: 15px; @media (min-width: 768px) { width: 50px; height: 50px; margin-right: 25px; } button { width: 30px; height: 30px; display: flex; padding: 0; justify-content: center; align-items: center; @media (min-width: 768px) { width: 50px; height: 50px; } } } > div:nth-of-type(2) { width: 80px; margin-right: 25px; @media (min-width: 992px) { width: 120px; } button { padding: 0; border: 0; border: 0 !important; background-color: transparent; img { width: 80px; max-width: 80px; border: 1px solid #707070; border-radius: 10px; @media (min-width: 992px) { width: 120px; max-width: 120px; } } } } > div:nth-of-type(3) { margin: 0; width: 100%; margin-top: 10px; > div { width: calc(100% / 3); text-align: right; > font { font-family: "futura-pt"; font-size: 18px; color: #696969 !important; @media (min-width: 768px) { font-size: 24px; } @media (min-width: 992px) { font-size: 30px; } } } } } } > div.ecommerce_carrito_precioMB { width: 100%; max-width: 1200px; padding: 0 20px; text-transform: uppercase; margin: 0 0 15px !important; background-color: #ffffff; @media (min-width: 992px) { padding: 0 80px; } > div.row { margin: 0; > div { padding: 0; border-top: 3px dotted #d8d8d8 !important; > div.row { margin: 0; display: flex; justify-content: flex-end; > div { padding: 0; flex: 0 0 auto; width: initial; font { font-family: "futura-pt-condensed"; font-weight: 600; font-size: 18px; color: #696969 !important; @media (min-width: 768px) { font-size: 24px; } @media (min-width: 992px) { font-size: 30px; } } } } } } } > div.eCommerce_ExtraFooterCarrito { width: 100%; max-width: 1200px; padding: 0; margin: 30px auto; .Carrito_Body_Envio { background-color: #eff0f0; border: none; padding: 0; > br { display: none; } > .row { margin: 0; > .col-md-3 { display: none; } > .col-md-6 { padding: 0; width: 100%; display: flex; flex-direction: column; @media (min-width: 768px) { flex-direction: row; flex-wrap: wrap; } > div { width: 100%; flex: 0 0 auto; background-color: #ffffff !important; border: none !important; display: flex; justify-content: center; align-items: center; font-family: "futura-pt"; font-size: 24px; padding: 35px 50px; .Carrito_Header_EnvioTitulo { font-family: "futura-pt-condensed"; font-weight: 600; font-size: 30px; text-transform: uppercase; text-align: center; color: #696969; } select, input { font-family: "futura-pt"; font-size: 24px; text-transform: uppercase; border-radius: 8px; padding: 10px 25px; width: 180px; border: 1px solid #171717; } } > div:nth-of-type(1), > div:nth-of-type(2) { @media (min-width: 768px) { width: calc(50% - 15px); } } > div:nth-of-type(1) { margin-right: 0; margin-bottom: 15px; @media (min-width: 768px) { margin-right: 15px; margin-bottom: 0; } > .panel-body { display: flex; flex-direction: column; width: 100%; > .row { margin: 0; display: flex; align-items: center; flex-direction: column; @media (min-width: 576px) { flex-direction: row; } @media (min-width: 768px) { flex-direction: column; } @media (min-width: 992px) { flex-direction: row; } > div:nth-of-type(1) { width: 100%; margin-bottom: 15px; @media (min-width: 576px) { width: calc(100% - 180px); margin-bottom: 0; } @media (min-width: 768px) { width: 100%; } @media (min-width: 992px) { width: calc(100% - 180px); } } > div:nth-of-type(2) { width: 180px; @media (min-width: 576px) { width: 180px; } @media (min-width: 768px) { width: 100%; } @media (min-width: 992px) { width: 180px; } br { display: none; } } > div:nth-of-type(3) { display: none; } } } } > div:nth-of-type(2) { margin-left: 0; flex-direction: column; @media (min-width: 768px) { margin-left: 15px; } > div { padding: 0; width: 100%; display: flex; justify-content: center; } } > div:nth-of-type(3) { margin: 20px 0 0; > .panel.panel-default { background-color: transparent !important; border: none !important; width: 100%; .panel-body { padding: 0; > .col-md-3 { display: none; } > .col-md-6 { width: 100%; padding: 0; table { width: 100% !important; font-size: 16px; @media (min-width: 768px) { font-size: 24px; } tbody { > tr:first-child { background-color: #02abe9 !important; text-transform: uppercase; color: #ffffff; > td { white-space: normal; word-break: normal; text-align: center !important; } } > tr:not(:first-child) { > td:first-child { img { width: 30px !important; @media (min-width: 768px) { width: 70px !important; } } } > td:last-child { text-align: center !important; input { width: initial !important; } } } } } } } } } > pre { display: none; } } } } } > div.eCommerce_ContinuarTerminar { width: 100%; max-width: 1200px; padding: 0; margin: auto; > .row { margin-right: 0 !important; margin-left: 0; display: flex; justify-content: center; flex-wrap: wrap; > div.col-md-4 { display: none; } > div.col-md-2 { width: initial; .btn { font-family: "futura-pt-condensed"; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; padding: 10px 15px; } .btn.btn-danger { background-color: #b5304b; border-color: #b5304b; margin-bottom: 20px; @media (min-width: 576px) { margin-bottom: 0; } > span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-atras.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 25px; height: 37px; margin-right: 30px; } } .btn.btn-success { background-color: #00b95c; border-color: #00b95c; > span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-comprar-alt.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 37px; height: 32px; margin-right: 30px; } } } } #ConfirmShip { margin-top: 50px; > .row { margin: 0 !important; display: flex; justify-content: center; .col-xs-1.col-md-4 { display: none; } > div.Carrito_Header_Carrito { background-color: #ffffff; margin: 0 auto !important; border: none; padding: 30px 50px !important; width: 100%; max-width: 600px; display: flex; flex-direction: column; > center { font-family: "futura-pt"; font-size: 30px; color: #696969; display: flex; flex-direction: row; flex-wrap: wrap; > br { display: none; } #checkterminos { margin-top: 15px; } .Carrito_Header_CarritoTitulo { margin-top: 15px; font-family: "futura-pt-condensed"; text-transform: uppercase; font-size: 30px; font-weight: 600; width: 100%; text-align: center; } a[target="condiciones"] { margin-top: 20px; margin-left: calc((100% - 40px) / 2); margin-right: calc((100% - 40px) / 2); @media (min-width: 576px) { margin-top: 0; margin-right: 0; margin-left: 0; } .btn.btn-default.btn-sm { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; padding: 0; > span { font-size: 20px; line-height: 20px; } } } .btn.btn-danger, .btn.btn-success { font-family: "futura-pt-condensed"; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; padding: 10px 15px; width: 130px; margin-top: 0; margin-bottom: 0; } .btn.btn-danger { background-color: #b5304b; border-color: #b5304b; margin-left: calc((100% - 130px) / 2); margin-right: calc((100% - 130px) / 2); margin-bottom: 20px; @media (min-width: 576px) { margin-bottom: 0; margin-left: auto; margin-right: 15px; } > span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-tache.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 35px; height: 35px; margin-right: 30px; } } .btn.btn-success { background-color: #00b95c; border-color: #00b95c; margin-left: calc((100% - 130px) / 2); margin-right: calc((100% - 130px) / 2); @media (min-width: 576px) { margin-right: auto; margin-left: 15px; } > span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-paloma.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 35px; height: 35px; margin-right: 30px; } } } } } } } } } #titulosdesarmado { display: flex; align-items: center; justify-content: center; > div:nth-child(1n) { .Carrito_Header_CarritoTitulo { text-transform: uppercase; font-size: 25px; color: #02abe9; font-family: $f-pt-condensed; font-weight: 600; } } > div:nth-child(2n) { #Desarma15 { .btn-primary { text-transform: uppercase; font-size: 17px !important; color: #171717; font-family: $f-pt; background: #ffffff; border-radius: 10px; padding: 15px 20px 15px 60px; border: none; > span { position: relative; &::before { content: ""; width: 45px; height: 31px; background: url("https://cdn.kromasol.com/netzen/img/icon-knasta.png"); background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -10px; right: 0px; } } } } } } #PrincipalGift { > center { > div.jumbotron.GiftSelect { max-width: 60% !important; background: #ffffff; > div:first-child { > div:first-child { background: #02abe9 !important; color: #ffffff; font-family: $f-pt-condensed; font-size: 33px; font-weight: 600; height: auto !important; padding: 20px; } > div:nth-child(2n) { font-size: 25px; color: #727272; font-family: $f-pt; margin-top: 20px; } } > div.row { > div { > button { padding: 10px; font-family: $f-pt-condensed; color: #ffffff; font-size: 25px; text-transform: uppercase; > span { position: relative; top: 5px; } } .btn-default { background: #696969; } .btn-success { background: #00b95c; } } } } } } } body.eCommerce_BodyPagarDatos { background-color: #eff0f0; background-image: none !important; min-width: 360px; > div:not(#AlertaModal):not(#ir-ext-ui) { width: 100%; max-width: 1200px; min-width: 360px; padding: 0; margin: 100px auto !important; .RegistroLogo { display: flex; justify-content: center; padding: 0 15px; margin-bottom: 35px; img { display: none; } } .RegistroLogo:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/logo-grande.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: calc(100vw - 30px); height: 137.5px; @media (min-width: 768px) { width: 597.2px; height: calc(137.5px * (100vw - 30px) / 597.2px); } } [name="Forma"] { background-color: #ffffff; font-family: "futura-pt"; font-size: 16px; @media (min-width: 768px) { font-size: 24px; } > div { border: none; } > .RegistroEncabezado { background-color: #02abe9; font-family: "futura-pt-condensed"; font-size: 40px; font-weight: 600; text-transform: uppercase; display: flex; justify-content: center; border-radius: 10px 10px 0 0; color: #ffffff; margin: 0 0 60px; > .col-sm-2 { display: none; } > .col-sm-8 { display: flex; width: 100%; justify-content: center; align-items: center; h2 { margin-top: 50px; margin-bottom: 25px; display: flex; align-items: center; } .glyphicon-pencil { margin-top: -15px; } .glyphicon-pencil:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-registrate-alt.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 78.7px; height: 58.2px; } } } > .RegistroFormulario { display: flex; flex-direction: column; margin: 0; @media (min-width: 768px) { flex-direction: row; } > .col-sm-2 { display: none; } > .control-label { width: 100%; margin-right: 0; text-transform: uppercase; text-align: left; @media (min-width: 768px) { width: calc(50% - 20px); margin-right: 20px; text-align: right; } } > div:not(.control-label):not(.col-sm-2) { width: 100%; margin-left: 0; @media (min-width: 768px) { width: calc(50% - 20px); margin-left: 20px; } input, select { font-family: "futura-pt"; font-size: 14px; border-color: #767676; border-style: inset; border-width: 2px; border-radius: 4px; height: 30px; padding: 1px 2px; @media (min-width: 768px) { font-size: 18px; } } } } > div:not(.RegistroFormulario):not(.RegistroEncabezado):not(.RegistroError) { display: flex; margin: 0; > .col-sm-2 { display: none; } > .col-sm-8 { width: 100%; margin: 0; padding: 0; .form-group { display: flex; flex-direction: column; margin: 0; @media (min-width: 768px) { flex-direction: row; } > .col-sm-2 { display: none; } > .control-label { width: 100%; margin-right: 0; text-transform: uppercase; text-align: left; @media (min-width: 768px) { width: calc(50% - 20px); margin-right: 20px; text-align: right; } } > div:not(.control-label):not(.col-sm-2) { width: 100%; margin-left: 0; @media (min-width: 768px) { width: calc(50% - 20px); margin-left: 20px; } input, select { font-family: "futura-pt"; font-size: 15px; border-color: #767676; border-style: inset; border-width: 2px; border-radius: 4px; height: 30px; padding: 1px 2px; @media (min-width: 768px) { font-size: 18px; } } } } } } > center { display: flex; flex-direction: column; align-items: center; background-color: #eff0f0; padding-top: 50px; > br { display: none; } > button.RegistroBotonAlmacenar { font-family: "futura-pt-condensed"; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; padding: 10px 15px; background-color: #00b95c; border-color: #00b95c; color: #ffffff; flex: 0 0 auto; > span { order: 10; } > span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-adelante.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 37px; height: 32px; margin-left: 30px; } } > div.RegistroImagenPasos { order: -1; margin-bottom: 50px; img { display: none; } } > div.RegistroImagenPasos:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/image-pasos2@2x.png"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 230px; height: 49px; margin: auto; } > div.RegistroResumen { width: 100%; margin: 0; margin-top: 50px; > div.col-sm-2 { display: none; } > div.col-sm-8 { width: 100%; margin: 0; padding: 0; h3 { background-color: #02abe9; font-family: "futura-pt-condensed"; font-size: 40px; font-weight: 600; text-transform: uppercase; display: flex; justify-content: center; align-items: center; border-radius: 10px 10px 0 0; color: #ffffff; margin: 0 0 60px; width: 100%; justify-content: center; padding: 25px 10px; margin-bottom: 0; } table { th { font-family: "futura-pt-condensed"; font-size: 16px; color: #727272; text-align: right !important; font-weight: 600; text-transform: uppercase; background-color: #ffffff; border-left: none; border-right: none; border-top: none; @media (min-width: 768px) { font-size: 25px; } } td { text-align: right !important; color: #696969; text-transform: uppercase; font-family: "futura-pt"; font-size: 16px; background-color: #ffffff; border-left: none; border-right: none; border-top: none; @media (min-width: 768px) { font-size: 25px; } } } } } } } } } body.eCommerce_BodyPagarMetodos { background-color: #eff0f0; background-image: none !important; min-width: 360px; .Pasarela_Logo { width: 100%; max-width: 1200px; min-width: 360px; padding: 0; display: flex; justify-content: center; padding: 0 15px; margin: 100px auto 25px !important; img { display: none; } } .Pasarela_Logo:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/logo-grande.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: calc(100vw - 30px); height: 137.5px; @media (min-width: 768px) { width: 597.2px; height: calc(137.5px * (100vw - 30px) / 597.2px); } } .Pasarela_Finalizar { width: 100%; max-width: 1200px; min-width: 360px; padding: 0; margin: 0 auto !important; > .row { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; > .col-md-1, > br { display: none; } > div.Detalle_ImagenPasos { order: 0; margin-bottom: 50px; img { display: none; } } > div.Detalle_ImagenPasos:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/image-pasos3@2x.png"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 230px; height: 49px; margin: auto; } > .Pasarela_Detalles { order: 1; width: 100%; margin: 0; padding: 0; h3 { background-color: #02abe9; font-family: "futura-pt-condensed"; font-size: 40px; font-weight: 600; text-transform: uppercase; display: flex; justify-content: center; align-items: center; border-radius: 10px 10px 0 0; color: #ffffff; margin: 0 0 60px; width: 100%; justify-content: center; padding: 25px 10px; margin-bottom: 0; text-align: center; } table { margin-bottom: 0; th { font-family: "futura-pt-condensed"; font-size: 16px; color: #727272; text-align: right !important; font-weight: 600; text-transform: uppercase; background-color: #ffffff; border-left: none; border-right: none; border-top: none; @media (min-width: 768px) { font-size: 25px; } } td { text-align: right !important; color: #696969; text-transform: uppercase; font-family: "futura-pt"; font-size: 16px; background-color: #ffffff; border-left: none; border-right: none; border-top: none; @media (min-width: 768px) { font-size: 25px; } } } > br { display: none; } } > .Pasarela_Referencia { order: 2; width: 100%; margin: 0; padding: 0; background-color: #ffffff; margin-top: 15px; margin-bottom: 50px; > br { display: none; } > div { width: 100%; margin: 0; padding: 15px 30px; font-size: 16px; font-family: "futura-pt"; text-transform: uppercase; color: #696969; @media (min-width: 768px) { font-size: 24px; } > div { width: 100%; display: flex; flex-direction: column; @media (min-width: 768px) { flex-direction: row; } > span:first-child { width: 100%; text-align: left; @media (min-width: 768px) { width: 40%; text-align: right; } } > span:last-child { padding-left: 0; width: 100%; @media (min-width: 768px) { padding-left: 35px; width: 60%; } } } > div:not(:first-child) { margin-top: 10px; } } } > .Pasarela_FormasPago { order: 3; padding: 0; width: 100%; margin-bottom: 50px; .panel.panel-info { border: 0; border-radius: 10px 10px 0 0; .panel-heading { background-color: #02abe9; font-family: "futura-pt-condensed"; font-size: 40px; font-weight: 600; text-transform: uppercase; display: flex; justify-content: center; align-items: center; border-radius: 10px 10px 0 0; color: #ffffff; margin: 0 0 60px; width: 100%; justify-content: center; padding: 25px 10px; margin-bottom: 0; } .panel-heading:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-metodos.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 77px; height: 69px; margin-right: 50px; } .panel-body { display: flex; justify-content: center; flex-wrap: wrap; padding: 0; align-items: center; flex-direction: column; > br { display: none; } > form { margin: 20px 20px; } > .Detalle_Referencia { border-top: 15px solid #eff0f0; width: 100%; background-color: #ffffff; padding: 15px 30px; display: flex; flex-direction: column; font-size: 16px; font-family: "futura-pt"; text-transform: uppercase; color: #696969; @media (min-width: 768px) { font-size: 24px; flex-direction: row; } > div:first-child { width: 100%; text-align: left; padding-right: 0; @media (min-width: 768px) { width: 50%; text-align: right; padding-right: 20px; } } > div:last-child { padding-left: 0; width: 100%; text-align: left; @media (min-width: 768px) { padding-left: 20px; width: 50%; } } } form#frmVisaNet { button.start-js-btn.modal-opener.default { background-image: url("https://cdn.kromasol.com/netzen/img/VyMM@2x.png") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center center !important; width: 170px; height: 140px; } } } } } .botonRealizarCompra { order: 4; margin-bottom: 50px; button { font-family: "futura-pt-condensed"; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; padding: 10px 15px; background-color: #02abe9; border-color: #02abe9; color: #ffffff; > span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-comprar-alt.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 37px; height: 32px; margin-right: 30px; } } } .botonRealizarCompra:hover, .botonRealizarCompra:active { text-decoration: none; } } } } body.eCommerce_BodySeleccionPais { background-color: #eff0f0; background-image: none !important; min-width: 360px; #compra { main { > center { .row.SeleccionPais_Titulo { width: 100%; max-width: 1200px; padding: 0; margin: 0 auto; margin-top: 100px; > div { padding: 0; h1 { font-family: "futura-pt-condensed"; font-size: 46px; color: #404040; font-weight: 600; text-transform: uppercase; margin: 0; text-align: center; } } } } } > div.panel-default { .panel-body { .row { > div.Carrito_Header_EnvioTitulo { font-family: "futura-pt-condensed"; font-size: 35px; color: #404040; font-weight: 600; text-transform: uppercase; margin: 0; text-align: center; margin-bottom: 10px; > br { display: none; } } > div.Carrito_Contenido_Envio { font-family: $f-pt; font-size: 25px; color: #404040; line-height: 25px; text-align: center; margin-bottom: 10px; } > div.container-input { > input { font-size: 25px; height: 40px; width: 130px; text-align: center; } } } } } } .row.SeleccionPais_Titulo { width: 100%; max-width: 1200px; padding: 0; margin: 0 auto; margin-top: 100px; > div { padding: 0; h1 { font-family: "futura-pt-condensed"; font-size: 46px; color: #404040; font-weight: 600; text-transform: uppercase; margin: 0; text-align: center; } } } .row.SeleccionPais_Titulo:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/logo-grande.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: calc(100vw - 30px); height: 137.5px; margin-bottom: 50px; @media (min-width: 768px) { width: 597.2px; height: calc(137.5px * (100vw - 30px) / 597.2px); } } .row.SeleccionPais_Lista { width: 100%; max-width: 1200px; padding: 0; margin: 30px auto !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column; > div { padding: 0; @media only screen and (max-width: 480px) and (min-width: 320px) { width: 60%; } @media only screen and (max-width: 768px) and (min-width: 481px) { width: 35%; margin: 0px 20px; } @media only screen and (max-width: 1024px) and (min-width: 769px) { width: 25%; margin: 10px 20px; } > .BloqueProducto { background-color: #ffffff; border: 1px solid #aaaaaa; border-radius: 10px; padding: 0; height: 100px; width: auto !important; display: flex; > div { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; img { top: 0; left: 0; opacity: 0; width: 100%; height: 150px; position: absolute; z-index: 10; } } > div:before { content: ""; display: block; font-family: "futura-pt-condensed"; font-size: 43px; line-height: 40px; color: #333333; font-weight: 600; text-transform: uppercase; margin-right: 10px; } > div:after { content: ""; display: block; background-repeat: no-repeat; background-size: contain; background-position: center center; width: 40px; height: 40px; } } } > div.SeleccionPais_Lista_BO { > .BloqueProducto { > div:before { content: "BO"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/BO-BANDERA.png"); } } } > div.SeleccionPais_Lista_CO { > .BloqueProducto { > div:before { content: "CO"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/CO-BANDERA.png"); } } } > div.SeleccionPais_Lista_CR { > .BloqueProducto { > div:before { content: "CR"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/CR-BANDERA.png"); } } } > div.SeleccionPais_Lista_EC { > .BloqueProducto { > div:before { content: "EC"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/EC-BANDERA.png"); } } } > div.SeleccionPais_Lista_GT { > .BloqueProducto { > div:before { content: "GT"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/GT-BANDERA.png"); } } } > div.SeleccionPais_Lista_HN { > .BloqueProducto { > div:before { content: "HN"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/HN-BANDERA.png"); } } } > div.SeleccionPais_Lista_MX { > .BloqueProducto { > div:before { content: "MX"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/Bandera-MX@2x.png"); } } } > div.SeleccionPais_Lista_USA { > .BloqueProducto { > div:before { content: "US"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/Bandera-US@2x.png"); } } } > div.SeleccionPais_Lista_PE { > .BloqueProducto { > div:before { content: "PE"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/Bandera-PE.png"); } } } > div.SeleccionPais_Lista_CL { > .BloqueProducto { > div:before { content: "CL"; } > div:after { background-image: url("https://cdn.kromasol.com/netzen/img/CL-BANDERA.png"); } } } } } body.eCommerce_BodyPago { background-color: #eff0f0; background-image: none !important; min-width: 360px; > div.row { display: flex; justify-content: center; > div.col-md-3 { display: none; } > div.col-sm-12.col-md-6 { width: 100%; max-width: 1200px; padding: 0; margin: 0 auto; margin-top: 100px; .panel { background-color: transparent; border: none; .panel-heading { background-color: #02abe9; font-family: "futura-pt-condensed"; font-size: 40px; font-weight: 600; text-transform: uppercase; display: flex; justify-content: center; align-items: center; border-radius: 10px 10px 0 0; color: #ffffff; margin: 0 0 60px; width: 100%; justify-content: center; padding: 25px 10px; margin-bottom: 0; } .panel-body { font-family: "futura-pt"; font-size: 25px; color: #727272; display: flex; flex-direction: column; .control-label { text-transform: uppercase; width: 50%; text-align: right; padding-right: 35px; } .control-label + div { width: 50%; padding-left: 35px; } table { tbody { tr { > td { width: 50%; } td:first-child { text-transform: uppercase; padding-right: 35px; text-align: right; } td:last-child { padding-left: 35px; } } } } } .panel-footer { background-color: #eff0f0; display: flex; justify-content: center; button { font-family: "futura-pt-condensed"; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; padding: 10px 15px; background-color: #02abe9; border-color: #02abe9; flex: 0 0 auto; color: #ffffff; > span:before { content: ""; display: block; background-image: url("https://cdn.kromasol.com/netzen/img/icono-atras.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 25px; height: 37px; margin-right: 30px; } } } } } } } #DataENVIO { background: transparent; display: flex; #Ajax_DataEnvio { .row { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-bottom: 20px; div { font { display: inline; } &.col-xs-6, &.col-sm-4 { width: 100% !important; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; font-size: 20px; text-align: left !important; #SaveSendData { width: 100%; display: flex; justify-content: center; align-items: center; #BotonForma { font-family: "futura-pt-condensed"; text-transform: uppercase; font-size: 25px; display: flex; align-items: center; padding: 10px 15px; background-color: #00b95c; border-color: #00b95c; } } } &.col-xs-12 { > div { width: 100%; .col-sm-4 { padding-left: 0px; margin-left: 0px; input { max-width: 100%; } } } } } } } }