body,td,th,textarea { font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 11px; color: #000000; } body{ background-color:rgb(0,0,0,0); font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; } body.fondoNegro{ background-color: #000000; } img{ border:none; } *:focus { outline: none; } body { margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin:0px; height:100%; width:100%; } .noseleccionable{ user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .scrollControlable { scrollbar-width: none; /*Firefox*/ } .scrollControlable::-webkit-scrollbar { width: 0; /*Webkit(Chrome, Android browser, Safari, Edge...)*/ } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } :root { --entorno_color_10 : #4504D91A; /*1A*/ --entorno_color_20 : #4504D933; /*33*/ --entorno_color_30 : #4504D94D; /*4D*/ --entorno_color_40 : #4504D966; /*66*/ --entorno_color_50 : #4504D980; /*80*/ --entorno_color_60 : #4504D999; /*99*/ --entorno_color_70 : #4504D9B3; /*B3*/ --entorno_color_80 : #4504D9CC; /*CC*/ --entorno_color_90 : #4504D9E6; /*E6*/ --entorno_color : #4504D9; /*100%*/ --entorno_color_botones_10 : #8C04D91A; --entorno_color_botones_20 : #8C04D933; --entorno_color_botones_30 : #8C04D94D; --entorno_color_botones_40 : #8C04D966; --entorno_color_botones_50 : #8C04D980; --entorno_color_botones_60 : #8C04D999; --entorno_color_botones_70 : #8C04D9B3; --entorno_color_botones_80 : #8C04D9CC; --entorno_color_botones_90 : #8C04D9E6; --entorno_color_botones : #7804BC; --entorno_color_oscuro : #030585; --entorno_color_claro : #4504D933; --entorno_color_verde : #2ECC71; --entorno_color_verdeoscuro : #0F9447; --entorno_color_rojo : #E74C3C; --entorno_color_amarillo : #F1C40F; --entorno_color_naranja : #F1C40F; } ::-webkit-scrollbar { width: 12px; height: 5px; } ::-webkit-scrollbar-track-piece { background: #FFFFFF00; } ::-webkit-scrollbar-thumb { background: black; border-radius: 20px; border: #FFFFFF 2.5px solid; background-image: -webkit-linear-gradient(var(--entorno_color), var(--entorno_color_oscuro)); background-image: -o-linear-gradient(var(--entorno_color), var(--entorno_color_oscuro)); background-image: linear-gradient(var(--entorno_color), var(--entorno_color_oscuro)); } ::-webkit-scrollbar-thumb:hover { background: var(--entorno_color_botones); } .parpadear{ animation:parpadear 1s infinite; } @keyframes parpadear{ 50% { opacity: 0.9; /*background-color: var(--entorno_color_botones);*/ } 100%{ opacity: 1; } } .parpadeo{ animation: parpadeo 0.3s infinite; } @keyframes parpadeo{ 50% { opacity: 0.5; } 100%{ opacity: 1; } } .parpadeoSuave{ animation: parpadeo 1s infinite; } @keyframes botonear{ 0% { box-shadow: var(--entorno_color_botones) 2px 2px 5px, var(--entorno_color) -2px -2px 5px, inset rgb(0,0,0,0.1) 0px 0px 03px; } 25% { box-shadow: var(--entorno_color_botones) -2px 2px 5px, var(--entorno_color) 2px -2px 5px, inset rgb(0,0,0,0.1) 0px 0px 06px; } 50% { box-shadow: var(--entorno_color_botones) -2px -2px 5px, var(--entorno_color) 2px 2px 5px, inset rgb(0,0,0,0.1) 0px 0px 10px; } 75% { box-shadow: var(--entorno_color_botones) 2px -2px 5px, var(--entorno_color) -2px 2px 5px, inset rgb(0,0,0,0.1) 0px 0px 06px; } 100% { box-shadow: var(--entorno_color_botones) 2px 2px 2px, var(--entorno_color) -2px -2px 5px, inset rgb(0,0,0,0.1) 0px 0px 03px; } } .botonear{ animation: boxshadow 6s infinite; } @keyframes boxshadow{ 00% { box-shadow: white 0px 0px 1px, var(--entorno_color_botones_50) 05px 05px 10px, var(--entorno_color_50) -05px -05px 10px; } 12% { box-shadow: white 0px 0px 2px, var(--entorno_color_botones_50) 00px 05px 10px, var(--entorno_color_50) 00px -05px 10px; } 24% { box-shadow: white 0px 0px 3px, var(--entorno_color_botones_60) -05px 05px 10px, var(--entorno_color_60) 05px -05px 10px; } 36% { box-shadow: white 0px 0px 4px, var(--entorno_color_botones_70) -05px 00px 10px, var(--entorno_color_70) 05px 00px 10px; } 48% { box-shadow: white 0px 0px 5px, var(--entorno_color_botones_80) -05px -05px 10px, var(--entorno_color_80) 05px 05px 10px; } 60% { box-shadow: white 0px 0px 5px, var(--entorno_color_botones_80) 00px -05px 10px, var(--entorno_color_80) 00px 05px 10px; } 72% { box-shadow: white 0px 0px 4px, var(--entorno_color_botones_70) 05px -05px 10px, var(--entorno_color_70) -05px 05px 10px; } 84% { box-shadow: white 0px 0px 3px, var(--entorno_color_botones_60) 05px 00px 10px, var(--entorno_color_60) -05px 00px 10px; } 100% { box-shadow: white 0px 0px 1px, var(--entorno_color_botones_50) 05px 05px 10px, var(--entorno_color_50) -05px -05px 10px; } } .boxshadow{ animation: boxshadow 6s infinite; } .botonear:hover, .boxshadow:hover{ animation: xxx 1s infinite; } @keyframes colores{ 0% { text-shadow: rgb(0,0,0,0.1) 0px 0px 5px; } 50% { color: var(--entorno_color); opacity: 0.7; } 0% { text-shadow: rgb(0,0,0,0.1) 0px 0px 0px; } 100%{ color: var(--entorno_color_botones); opacity: 1; } } .parpadeoColores{ animation: colores 1s infinite; } .cargadorContenedor { position:absolute; top:0px; bottom:0px; right:0px; left:0px; } .cargadorSpin { position:absolute; top:0px; bottom:0px; right:0px; left:0px; width:75%; max-width:150px; height:75%; max-height:150px; box-sizing:border-box; margin:auto; border:3px solid rgba(0,0,0,0.1); border-top:3px solid var(--entorno_color); border-radius:50%; -webkit-animation: spin 0.75s linear infinite; animation: spin 0.75s linear infinite; } .fondoNegro .cargadorSpin {border:3px solid rgba(255,255,255,0.1); border-top:3px solid var(--entorno_color);} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @font-face { font-family: 'Titulo'; src: url('fonts/Righteous-Regular.ttf'); font-weight: 100; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-Thin.ttf'); font-weight: 100; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-ExtraLight.ttf'); font-weight: 200; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-Light.ttf'); font-weight: 300; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-Regular.ttf'); font-weight: 400; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-Regular.ttf'); font-weight: normal; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-Medium.ttf'); font-weight: 500; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-SemiBold.ttf'); font-weight: 600; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-Bold.ttf'); font-weight: 700; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-ExtraBold.ttf'); font-weight: 800; } @font-face { font-family: 'Outfit'; src: url('fonts/Outfit/Outfit-Black.ttf'); font-weight: 900; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-Thin.ttf'); font-weight: 100; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-ExtraLight.ttf'); font-weight: 200; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-Light.ttf'); font-weight: 300; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf'); font-weight: 400; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf'); font-weight: normal; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-Medium.ttf'); font-weight: 500; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-SemiBold.ttf'); font-weight: 600; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf'); font-weight: 700; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-ExtraBold.ttf'); font-weight: 800; } @font-face { font-family: 'Roboto'; src: url('fonts/Roboto_Condensed/RobotoCondensed-Black.ttf'); font-weight: 900; } @font-face { font-family: 'Roboto-lite'; src: url('fonts/Roboto_Condensed/RobotoCondensed-Light.ttf'); } @font-face { font-family: 'Roboto-black'; src: url('fonts/Roboto/Roboto-Black.ttf'); } .roboto { font-family: 'Roboto'; } #cuerpo{ position:relative; box-sizing: border-box; padding-bottom:0px; } #dataLista{ position:relative; box-sizing: border-box; min-height: 250px; } #log{ position: fixed; bottom: 0px; left: 0px; right: 0px; width: fit-content; max-width: 350px; box-sizing:border-box; margin: auto auto 60px 10px; border-radius: 20px; line-height: 30px; color: white; font-size: 12px; font-weight: 800; text-align: left; padding-left: 35px; padding-right: 15px; font-family: 'Roboto'; z-index: 200; background-color: var(--entorno_color_verdeoscuro); box-shadow: rgb(0,0,0,0.5) 0px 2px 10px; background-image: url('png/nuevos/icons8-checkmark-96(1).png'); background-size: 24px; background-position: left+5px center; background-repeat: no-repeat; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: none; } .horizontal #log{ right: auto; width: fit-content; max-width: 350px; margin: 20px; } #log.negro { background-color: #111111; background-image: url("png/nuevos/icons8-info-24(1).png"); } #log.rojo { background-color: var(--entorno_color_rojo); background-image: url('png/nuevos/icons8-help-100(1).png'); } #divControl{ position:fixed; top:-100px; left:-100px; height:1px; width:1px; box-sizing:border-box; opacity:0; } #ventana{ position:fixed; z-index: 90; top: 0px; bottom: 0px; left: 0px; right: 0px; display: none; overflow: hidden; background-color: rgb(0,0,0,0.6); } .fondoNegro #ventana{ background-color:#000; } #ventana .regresar, #ventana .cerrar, #ventana .favicon{ position: absolute; top: 0px; width: 25%; height: 40px; margin: auto; cursor: pointer; z-index: 3; line-height: 40px; font-size: 11px; font-weight: 900; color: white; text-align: center; text-shadow: black 0px 1px 3px; padding: 0px 10px; } #ventana .regresar .icono, #ventana .cerrar .icono, #ventana .favicon .icono{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 40px; height: 40px; margin: auto; background-size: auto 60%; background-repeat: no-repeat; background-position: center center; transition: 0.5s; } #ventana .regresar .icono { margin-left: 10px; background-image: url('png/nuevos/icons8-back-26(1).png'); } #ventana .cerrar .icono { margin-right: 10px; background-image: url('png/nuevos/icons8-multiply-26(1).png'); } #ventana .favicon { left: 0px; right: 0px; width: 50%; height: 80px; opacity: 0.8; z-index: 1; background-size: contain; background-repeat: no-repeat; background-position: top center; background-image: url("empresa/favicon_oscuro.png"); } #ventana.paramovil .favicon { opacity: 0.8; height: 60px; top: 10px; } #ventana .favicon:hover { opacity: 1; } #ventana .regresar { left: 0px; background-image: linear-gradient(to right bottom, rgb(0,0,0,0.6), transparent, transparent); } #ventana.paramovil .regresar { left: 0px; } #ventana .regresar .texto { display: none; } #ventana.paramovil .regresar .texto { display: none; } #ventana .cerrar { right: 0px; background-image: linear-gradient(to left bottom, rgb(0,0,0,0.6), transparent, transparent); } #ventana.paramovil .cerrar { right: 0px; } #ventana .cerrar .texto { display: none; } #ventana.paramovil .cerrar .texto { display: none; } #ventana .loading{ position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin: auto; z-index: 1; width: 100px; height: 100px; border-radius: 50%; display:none; } #ventana .data{ position: absolute; left: 0px; right: 0px; top: 40px; bottom: 0px; margin: auto; box-sizing: border-box; overflow: hidden; z-index: 2; background-color: white; border-radius: 20px 0px 0px 0px; box-shadow: rgb(0,0,0,0.5) 0px 0px 5px, rgb(0,0,0,0.5) 0px 0px 40px; } .fondoNegro #ventana .data{ background-color: black; } #ventana.paramovil .data{ left:0px; right:0px; } #ventana.menuWeb .data{ max-width: 600px; } /************************** Carrusel ************************/ .carrusel{ position: relative; height: fit-content; overflow: hidden; box-sizing: border-box; padding: 25% 0px; margin: 0px 0px 0px 0px; font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; border-radius: 0px; border-left: hidden; border-right: hidden; box-shadow: inset rgb(0,0,0,0) 0px 0px 0px; transition: 0.5s; } .horizontal .carrusel{ padding: 15% 0px; } .carrusel.minimizar{ padding: 25px 0px 10px 0px; } .carrusel.oscuro{ /*background-color: #222;*/ } .carrusel.conbarra{ padding: 0px 0px 20% 0px; } .horizontal .carrusel.conbarra{ padding: 0px 0px 10% 0px; } .horizontal .carrusel.izquierda{ border-radius: 50px 0px 50px 0px; } .horizontal .carrusel.derecha{ border-radius: 0px 50px 0px 50px; } .carrusel.izquierda:not(.conproductos):hover{ box-shadow: inset rgb(0,0,0,0.05) -50px -50px 50px, inset rgb(0,0,0,0.05) 50px 50px 50px; } .carrusel.derecha:not(.conproductos):hover{ box-shadow: inset rgb(0,0,0,0.05) 50px -50px 50px, inset rgb(0,0,0,0.05) -50px 50px 50px; } .carrusel.mini{ margin: 75px 0px; } .carrusel.promo{ margin: 75px 0px 10px 0px; padding: 0px; } .carrusel.enmarcado{ background-color: var(--entorno_color_botones); background-image: linear-gradient(to bottom, var(--entorno_color_oscuro), var(--entorno_color_oscuro), var(--entorno_color_botones)); border-radius: 20px; overflow: hidden; box-shadow: rgb(0,0,0,0.3) 0px 1px 20px; } .carrusel.enmarcado.paramovil{ border-radius: 35px 35px 5px 5px; } .carrusel .fondo{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; box-sizing: border-box; z-index: -1; pointer-events: none; transition: 5s; opacity: 0.3; } .carrusel.claro:not(.conproductos) .fondo{ background-color: #FFF; opacity: 1; border-radius: 0px 0px 20px 20px; background-image: linear-gradient(to bottom, transparent, transparent, var(--entorno_color_botones_20), var(--entorno_color_botones_50)); } .carrusel.oscuro:not(.conproductos) .fondo{ background-color: #111; opacity: 1; border-radius: 0px 0px 20px 20px; background-image: linear-gradient(to bottom, var(--entorno_color_oscuro), var(--entorno_color_botones_10), var(--entorno_color_botones_10), var(--entorno_color_botones_20)); } .horizontal .carrusel.izquierda:not(.conproductos) .fondo{ border-radius: 0px 0px 50px 0px; } .horizontal .carrusel.derecha:not(.conproductos) .fondo{ border-radius: 0px 0px 0px 50px; } .carrusel.izquierda:not(.conproductos) .fondo{ top: 10%; left: 10%; background-image: linear-gradient(to bottom right, transparent 50%, var(--entorno_color)); } .carrusel.derecha:not(.conproductos) .fondo{ top: 10%; right: 10%; background-image: linear-gradient(to bottom left, transparent 50%, var(--entorno_color_botones)); } .carrusel:not(.conproductos):hover .fondo{ top: 0px; left: 0px; opacity: 1; } .carrusel.conproductos .fondo{ top: 0px; left: 0px; opacity: 0; background-image: none; transition: 2s; } .carrusel.conproductos:hover .fondo{ box-shadow: none; opacity: 1; background-image: linear-gradient(to bottom, var(--entorno_color_20), transparent, transparent, transparent); } .carrusel .borde{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 5; border-radius: 20px; pointer-events: none; display: none; } .carrusel .sepp{ position: absolute; bottom: 0px; left: 0px; right: 0px; width: 50%; height: 2px; z-index: 5; margin: auto auto 15px auto; background-color: transparent; border-radius: 3px; pointer-events: none; box-shadow: rgb(0,0,0,0.1) 0px 0px 15px; } .carrusel.oscuro .sepp{ background-image: linear-gradient(to right, transparent, white, transparent); } .carrusel.claro .sepp{ background-image: linear-gradient(to right, transparent, var(--entorno_color_botones), transparent); } .carrusel.focus .borde{ display: block; } .carrusel.inicio{ padding-left: 40px; padding-right: 40px; } .carrusel .titular{ position: relative; box-sizing: border-box; height: fit-content; padding: 0px 0px 25px 0px; cursor: default; margin: auto 25px; line-height: 0.8; font-size: 45px; font-weight: 800; letter-spacing: -3; color: #333; text-shadow: white 0px 0px 5px, rgb(255,255,255,0.2) 0px 0px 10px, rgb(0,0,0,0.2) 2px 1px 2px, var(--entorno_color_20) -1px -1px 2px, var(--entorno_color_botones_20) 1px 1px 2px; opacity: 1; transition: 2.5s; } .carrusel.oscuro .titular{ color: #EEE; text-shadow: black 0px 0px 3px, var(--entorno_color_20) -1px -1px 4px, var(--entorno_color_botones_20) 1px 1px 10px; } .carrusel .titular.nowrap{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; padding: 0px; margin: auto 5%; } .horizontal .carrusel .titular.nowrap{ flex-wrap: nowrap; } .carrusel.izquierda .titular, .carrusel .titular .izquierda{ text-align: left; } .carrusel.derecha .titular, .carrusel .titular .derecha{ text-align: right; } .horizontal .carrusel .titular{ opacity: 1; font-size: 75px; letter-spacing: -2; font-weight: 600; } .horizontal .carrusel.izquierda .titular{ margin: auto 20% auto 5%; } .horizontal .carrusel.derecha .titular{ margin: auto 5% auto 20%; } .carrusel .titular .izquierda{ flex-basis: 100%; line-height: 0.8; font-weight: 700; } .horizontal .carrusel .titular .izquierda{ flex-basis: 66%; } .carrusel .titular .derecha{ flex-basis: 100%; line-height: 1.2; font-weight: 400; padding: 50px 5%; font-size: 18px; letter-spacing: 0px; } .horizontal .carrusel .titular .derecha{ flex-basis: 33%; padding: 40px 5% 20px 5%; font-size: 15px; } .carrusel.oscuro .titular{ color: #EEE; } .carrusel .titular .mini{ position: relative; box-sizing: border-box; height: fit-content; line-height: 1; font-size: 25px; font-weight: 800; letter-spacing: 2; opacity: 0.3; transition: 0.5s; } .carrusel:hover .titular:not(.nowrap){ opacity: 1; letter-spacing: 1; font-weight: 900; text-shadow: white 0px 0px 5px, rgb(255,255,255,0.5) 0px 0px 5px, rgb(0,0,0,0.5) 0px 0px 5px, var(--entorno_color_10) -25px -25px 10px, var(--entorno_color_botones_10) 25px 25px 10px; } .horizontal .carrusel.izquierda:hover .titular{ margin: auto 15% auto 5%; } .horizontal .carrusel.derecha:hover .titular{ margin: auto 5% auto 15%; } .carrusel .btns{ position: relative; width: fit-content; height: fit-content; box-sizing: border-box; margin: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; } .horizontal .carrusel .btns{ margin: auto 10% auto auto; } .carrusel .btns .btn{ position: relative; width: fit-content; height: fit-content; box-sizing: border-box; padding: 0px 20px 0px 20px; margin: 5px 5px; cursor: pointer; line-height: 40px; font-size: 15px; font-weight: 500; text-align: center; letter-spacing: 0px; color: rgb(255,255,255,1); background-color: rgb(0,0,0,0.3); border-radius: 30px; border: white 2px solid; box-shadow: rgb(0,0,0,0.2) 0px 3px 15px; text-shadow: rgb(0, 0, 0, 0.8) 0px 0px 3px, rgb(0, 0, 0, 0.2) 1px 1px 10px; transition: 0.3s; background-position: right+10px center; background-size: 18px; background-repeat: no-repeat; } .carrusel.claro .btns .btn{ background-color: rgb(0,0,0,0); color: var(--entorno_color_botones); text-shadow: none; border: var(--entorno_color_botones) 2px solid; } .carrusel .btns .btn.activo { background-color: var(--entorno_color_botones); border: hidden; color: white; box-shadow: rgb(0,0,0,0.7) 0px 3px 7px; text-shadow: rgb(0, 0, 0, 0.8) 0px 0px 3px, rgb(0, 0, 0, 0.2) 1px 1px 10px; line-height: 50px; font-weight: 800; letter-spacing: 0px; padding: 0px 54px 0px 20px; background-position: right+20px center; background-size: 24px; background-repeat: no-repeat; background-image: url("png/nuevos/icons8-right-48(1).png"); } .carrusel .btns .btn.activo:hover { transform: scale(1.25); z-index: 2; } .carrusel .mosaico{ position: relative; width: auto; height: fit-content; box-sizing: border-box; margin: 0px 5%; padding: 50px 0px 0px 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; color: black; } .carrusel .mosaico.interno{ flex-wrap: wrap; justify-content: flex-end; flex-basis: 100%; margin: 0px; padding: 25px 0px 0px 0px; } .horizontal .carrusel .mosaico.interno{ flex-wrap: wrap; flex-basis: 60%; padding: 0px 0px 0px 25px; } .carrusel.oscuro .mosaico{ color: white; } .carrusel .msco{ position: relative; flex-basis: 50%; box-sizing: border-box; aspect-ratio: 1/1; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; padding: 25px; color: rgb(0,0,0,0.5); transition: 1s; } .carrusel.oscuro .msco{ color: rgb(255,255,255,0.5); } .carrusel.claro .msco{ color: rgb(0,0,0,0.5); } .horizontal .carrusel .msco{ flex-basis: 200px; } .carrusel .msco .agrup{ position: relative; height: fit-content; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; } .carrusel.oscuro .msco:hover{ color: rgb(255,255,255,1); } .carrusel.claro .msco:hover{ color: rgb(0,0,0,1); } .carrusel .msco.video{ flex-basis: 100%; height: 50vh; flex-grow: 1; box-shadow: rgb(0,0,0,0.3) 0px 5px 10px; background-color: black; border-radius: 25px; overflow: hidden; } .horizontal .carrusel .msco.video{ flex-basis: 40%; height: 75vh; } .carrusel .msco.foto{ flex-basis: 100%; height: fit-content; padding: 0px; border-radius: 25px; overflow: hidden; aspect-ratio: auto; box-shadow: rgb(0,0,0,0.1) 0px 5px 25px; } .horizontal .carrusel .msco.foto{ flex-basis: 40%; } .carrusel .msco .border{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: 5px; border-radius: 25px; border: white 2px solid; cursor: default; z-index: -1; transition: 1s; } .carrusel.claro .msco .border{ border: black 2px solid; background-color: white; opacity: 0.1; } .carrusel.oscuro .msco .border{ border: white 2px solid; opacity: 0.05; } .carrusel .msco .icn{ position: relative; width: 50px; height: 50px; margin: 0px; background-position: center center; background-repeat: no-repeat; background-size: 48px; } .carrusel .msco .ttl{ position: relative; width: 100%; height: fit-content; box-sizing: border-box; line-height: 0.8; font-size: 30px; font-weight: 800; letter-spacing: -2px; text-align: right; transition: 1s; } .carrusel.claro .msco .ttl{ color: var(--entorno_color_botones); opacity: 0.2; } .carrusel.oscuro .msco .ttl{ color: white; opacity: 0.05; } .carrusel .msco:hover .ttl{ opacity: 1; letter-spacing: 0px; font-size: 30px; font-weight: 400; } .carrusel .msco .sbttl{ position: relative; height: fit-content; box-sizing: border-box; line-height: 1.5; font-size: 18px; font-weight: 600; letter-spacing: -1px; } .carrusel .msco .txt{ position: relative; height: fit-content; box-sizing: border-box; line-height: 1; font-size: 12px; font-weight: 400; letter-spacing: 0px; opacity: 0.5; } .carrusel .msco .tachado{ text-decoration: line-through; } .carrusel .msco:hover .border{ opacity: 1; } .carrusel .titular .ico{ position: absolute; top: 0px; bottom: 0px; left: 0px; width: 45px; margin: auto; box-sizing: border-box; background-position: center center; background-size: 24px; background-repeat: no-repeat; background-image: url( "png/nuevos/icons8-chevron-down-48.png"); transition: 0.5s; transform: rotate(-90deg); } .carrusel .titular:hover .ico{ transform: rotate(0deg); } .carrusel .titular.click .ico{ transform: rotate(-180deg); } .filtro-contenedor{ position: relative; } .filtro{ position: relative; height: fit-content; box-sizing: border-box; padding: 10px 10px 0px 10px; font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; border: rgb(0,0,0,0.5) 1px solid; border-radius: 10px; margin: 0px 0px 10px 0px; transition: 0.5s; } .filtro.abierto{ border: rgb(0,0,0,0) 1px solid; } .filtro-titular{ position: relative; height: 30px; box-sizing: border-box; padding: 0px 10px 10px 30px; cursor: pointer; line-height: 20px; font-size: 15px; font-weight: 800; text-align: left; letter-spacing: -0px; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; transition: 0.5s; } .filtro-titular:hover{ opacity: 1; } .filtro-titular-icono{ position: absolute; left: 0px; top: 0px; bottom: 10px; width: 20px; box-sizing: border-box; background-position: center center; background-size: 20px; background-repeat: no-repeat; background-image: url( "png/nuevos/icons8-chevron-down-48.png"); transition: 0.5s; transform: rotate(-90deg); } .filtro-titular:hover .filtro-titular-icono{ transform: rotate(0deg); } .filtro-titular.click .filtro-titular-icono{ transform: rotate(-180deg); } .filtro-indicador{ position: relative; box-sizing: border-box; padding: 0px 25px 0px 10px; cursor: pointer; margin: 0px 0px 15px 30px; background-color: var(--entorno_color_botones); border-radius: 20px; background-image: url("png/nuevos/icons8-Delete-24b.png"); background-size: 12px; background-position: right+10px center; background-repeat: no-repeat; line-height: 20px; font-size: 10px; font-weight: 400; text-align: left; letter-spacing: 0.5px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; opacity: 0.8; transition: 0.5s; } .filtro-indicador:hover{ opacity: 1; } .filtro-data{ display: none; } .filtro.abierto .filtro-data{ position: relative; height: fit-content; box-sizing: border-box; padding-bottom: 10px; margin-top: 10px; display: flex; flex-wrap: wrap; flex-direction: row; align-content: flex-start; justify-content: flex-start; align-items: center; } .filtro-data .filtro-boton{ position: relative; width: 100%; box-sizing: border-box; padding: 10px 15px 10px 30px; margin: 2.5px; line-height: 15px; font-size: 12px; font-weight: 700; letter-spacing: 0px; text-align: left; color: rgb(0,0,0,0.7); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; border-radius: 20px; border: white 1px solid; background-color: rgb(0,0,0,0.04); transition: 0.5s; } .filtro-data .filtro-boton:hover{ border: rgb(0,0,0,1) 1px solid; background-color: rgb(0,0,0,0); color: black; } .filtro-data .filtro-boton.click{ background-color: rgb(0,0,0,0.1); color: rgb(0,0,0,0.5); } .filtro-data .filtro-boton .filtro-boton-icono{ position: absolute; top: 0px; bottom: 0px; left: 10px; width: 10px; height: 10px; margin: auto; background-position: center center; background-size: 10px; background-repeat: no-repeat; background-image: url("png/nuevos/icons8-circle-100.png"); opacity: 0.2; transition: 0.5s; } .filtro-data .filtro-boton:hover .filtro-boton-icono{ opacity: 1; transform: scale(1.3); } .filtro-data .filtro-boton.click .filtro-boton-icono{ opacity: 0.5; transform: scale(1.8); background-image: url("png/nuevos/icons8-Ok-24.png"); } .carrusel .post.mas{ position: relative; width: 200px; flex-basis: 200px; height: auto; max-width: 100%; box-sizing: border-box; border-radius: 10px; background-image: linear-gradient(to right, transparent, rgb(0,0,0,0.1)); cursor: pointer; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: center; transition: 0.5s; opacity: 0.5; } .carrusel .post.mas:hover{ transition: 0.5s; opacity: 1; } .carrusel .post.mas .icc{ position: relative; width: 100px; height: 100px; border-radius: 50%; box-sizing: border-box; margin: 15px auto; background-image: url("png/nuevos/icons8-chevron-right-filled-40.png"); box-shadow: rgb(0,0,0,0.3) 0px 2px 10px; background-position: center center; background-repeat: no-repeat; background-size: 40px; opacity: 0.5; } .carrusel .post.mas .tee{ position: relative; box-sizing: border-box; margin: 15px auto; text-align: center; line-height: 20px; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.5; } .carrusel .post.mas .suu{ position: relative; box-sizing: border-box; margin: 15px auto; text-align: center; line-height: 11px; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Titulo/Barra */ .carrusel .titulo{ } .carrusel.conbarra .titulo{ position: relative; width: auto; height: auto; box-sizing: border-box; padding: 0px; z-index: -1; background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center bottom; box-shadow: inset rgb(0,0,0,0.2) 0px -4px 8px; border-radius: 20px 20px 4px 4px; margin: 0px 0px 15% 0px; } .horizontal .carrusel.conbarra .titulo{ margin: 3% 2% 6% 2%; border-radius: 0px 0px 25px 0px; border-radius: 25px; } .carrusel.focus .titulo { color: var(--entorno_color_botones); opacity: 1; } .fondoNegro .carrusel .titulo { color: white; } .fondoNegro .carrusel.focus .titulo { color: var(--entorno_color_botones); opacity: 1; } .carrusel.conbarra .titulo .text { display: none; } .carrusel.conbarra.enmarcado .titulo{ height: 40vw; background-size: cover; background-position: top center; } .carrusel.conbarra.enmarcado.paramovil .titulo{ /*.movil*/ height: 45vw; height: 55vw; } .carrusel.enmarcado.conbarra .titulo{ border-radius: 0px; box-shadow: rgb(0,0,0,0) 0px 0px 0px; margin: 0px; } .carrusel .sombreado{ position:relative; height: fit-content; } .carrusel .sombreado .derecho{ position: absolute; top: 0px; bottom: 0px; right: 0px; width: 25px; margin: 25px 0px; z-index: 5; background-image: linear-gradient(to right, rgb(255,255,255,0), rgb(255,255,255,0.1), rgb(255,255,255,0.5)); pointer-events: none; display: none; } .carrusel .contenedor{ position: relative; height: fit-content; overflow: auto; background-color: transparent; display: flex; flex-wrap: nowrap; flex-direction: row; align-items: stretch; justify-content: flex-start; } .paramovil .carrusel .contenedor{ justify-content: flex-start; } .carrusel.vertical .contenedor{ flex-wrap: nowrap; flex-direction: column; } .carrusel .contenedor .columnas{ position: relative; width: auto; height: auto; padding: 25px 25px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; flex-grow: 1; justify-content: center; } .horizontal .carrusel .contenedor .columnas{ padding: 25px 10%; } .carrusel.vertical .contenedor .columnas{ flex-direction: column; flex-wrap: nowrap; } .carrusel .contenedor .columnas.extendida{ flex-wrap: wrap; justify-content: flex-start; } .carrusel .contenedor .post{ position:relative; box-sizing:border-box; border-radius: 20px; } .carrusel .contenedor .post.focus{ z-index: 2; } .carrusel.max .contenedor .post{ /*float:left;*/ } .carrusel .titulo .contador{ position: absolute; bottom: -100px; left: 0px; width: fit-content; height: 30px; box-sizing: border-box; margin: 10px; line-height: 30px; font-size: 15px; color: rgb(0,0,0,0.6); font-weight: 900; letter-spacing: 0px; background-color: white; border-radius: 15px; padding: 0px 15px; box-shadow: rgb(0,0,0,0.3) 0px 0px 10px; opacity: 0; transition: 0.5s; } .carrusel:hover .titulo .contador{ bottom: 0px; opacity: 1; transition: 0.5s; } .carrusel .titulo .flecha{ position: absolute; bottom: 0px; right: 0px; width: 40px; height: 40px; box-sizing: border-box; margin: 10px; background-color: white; border-radius: 50%; box-shadow: inset rgb(0,0,0,0.3) 0px 1px 7px; background-position: center center; background-repeat: no-repeat; background-size: 20px; background-image: url( "png/nuevos/icons8-forward-50.png"); transition: 0.2s; } .carrusel:hover .titulo .flecha{ transform: rotate(90deg); transition: 0.4s; } .carrusel .filtrosContenedor{ position: relative; /*width: min-content;*/ width: auto; height: 100%; overflow: auto; box-sizing: border-box; font-family: 'Roboto', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; padding: 0px 5px 0px 0px; } .carrusel .filtrosContenedor.top{ max-height: 350px; overflow: hidden; margin: 0px 10px 0px 0px; border: rgb(0,0,0,0) 2px solid; border-radius: 0px; transition: 0.5s; } .carrusel .filtrosContenedor.top:hover{ border-right-color: var(--entorno_color); } .carrusel .filtros{ position: relative; width: auto; height: max-content; overflow: auto; box-sizing: border-box; padding: 0px; font-family: 'Roboto', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; display: flex; flex-direction: column; flex-wrap: nowrap; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .carrusel .filtros .filtrar{ position:relative; flex-grow: 1; /*width: fit-content;*/ height: fit-content; max-width: 200px; box-sizing: border-box; cursor: pointer; line-height: 30px; font-size: 13px; color: rgb(0,0,0,0.8); font-weight: 800; text-align: left; letter-spacing: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background-color: rgb(0,0,0,0); border: rgb(0,0,0,0) 1px solid; border-radius: 20px; padding: 0px 15px 0px 15px; } .carrusel .filtros .filtrar.separador{ position:relative; flex-grow: 1; height: fit-content; box-sizing: border-box; pointer-events: none; font-size: 13px; color: rgb(0,0,0,0.3); font-weight: 800; text-align: left; letter-spacing: 0px; padding: 0px 10px; } .carrusel .filtros .filtrar.concontador{ padding: 0px 10px 0px 10px; } .carrusel .filtros .filtrar:not(.separador):hover{ padding: 0px 10px 0px 35px; color: black; background-color: rgb(0,0,0,0.05); border: rgb(0,0,0,0.5) 1px solid; background-image: linear-gradient(to right, var(--entorno_color), transparent, transparent, transparent, transparent); transition: 0.5s; } .carrusel .filtros .contador{ position: absolute; top: 0px; bottom: 0px; left: -100px; width: 25px; height: 25px; box-sizing: border-box; margin: auto; line-height: 25px; font-size: 13px; color: var(--entorno_color); font-weight: 800; text-align: center; letter-spacing: 0.5px; background-color: white; border-radius: 50%; box-shadow: var(--entorno_color) 0px 0px 10px; } .carrusel .filtros .filtrar:hover .contador{ left: 2.5px; transition: 0.5s; } .carrusel .pie{ position: relative; margin: 25px auto; height: fit-content; z-index: 5; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; opacity: 0; transition: 0.5s; } .carrusel:hover .pie{ opacity: 1; } .carrusel .pie.mostrarsiempre{ opacity: 1; } .horizontal .carrusel.izquierda .pie{ margin: 25px 0px auto 33%; } .horizontal .carrusel.derecha .pie{ margin: 25px 33% auto 0px; } .carrusel .boton{ position: relative; width: fit-content; height: 40px; border-radius: 20px; box-sizing: border-box; margin: auto 5px; cursor: pointer; line-height: 40px; font-size: 15px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 25px; background-color: #FFF; background-position: center center; background-repeat: no-repeat; background-size: 16px; opacity: 0.8; box-shadow: rgb(0,0,0,0.2) 0px 1px 3px; transition: 0.5s; } .carrusel .boton:hover{ opacity: 1; box-shadow: rgb(0,0,0,0.5) 0px 1px 3px; transform: scale(1.05); } .carrusel .boton:active{ transform: scale(1.25); } .carrusel .boton.atras{ width: 40px; background-image:url("png/nuevos/icons8-left-16.png"); } .carrusel .boton.adelante{ width: 40px; background-image:url("png/nuevos/icons8-right-16.png"); } .carrusel .boton.inicio{ background-image: url("png/nuevos/icons8-double-left-16.png"); } .carrusel .boton.final{ background-image: url("png/nuevos/icons8-double-right-16.png"); } .fondoNegro .carrusel .boton.atras{ background-image:url("png/nuevos/icons8-left-16(1).png"); } .fondoNegro .carrusel .boton.adelante{ background-image: url("png/nuevos/icons8-right-16(1).png"); } .fondoNegro .carrusel .boton.inicio{ background-image:url("png/nuevos/icons8-double-left-16(1).png"); } .fondoNegro .carrusel .boton.final{ background-image:url("png/nuevos/icons8-double-right-16(1).png"); } /********************* PUBLICACION GRANDE *****************/ .mipublicacion{ position: relative; flex-basis: 100%; width: auto; height: auto; aspect-ratio: 8/6; box-sizing: border-box; overflow: visible; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; cursor: default; font-family: 'Roboto'; padding: 10% 5% 15% 5%; margin: 0px 0px 0px 0px; } .paramovil .mipublicacion{ position: relative; flex-basis: 100%; width: auto; height: auto; aspect-ratio: 9/5; box-sizing: border-box; overflow: visible; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; cursor: default; font-family: 'Roboto'; padding: 5% 5% 10% 5%; margin: 0px 0px 0px 0px; } .mipublicacion.mini{ flex-basis: 100%; aspect-ratio: 6/4; overflow: hidden; padding: 5%; margin: 0px; } .mipublicacion.video{ flex-basis: 100%; aspect-ratio: 6/4; overflow: hidden; padding: 5%; margin: 0px; /*flex-grow: 1;*/ } .mipublicacion.icono{ flex-basis: 50%; aspect-ratio: auto; overflow: hidden; padding: 3% 1%; margin: 0px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; cursor: default; align-items: flex-start; align-content: flex-start; } .mipublicacion.mini .nombre{ line-height: 16px; font-size: 16px; text-align: left; color: var(--entorno_color_botones); text-shadow: rgb(0,0,0,0.1) 0px 0px 3px; padding: 0px 0px 10px 0px; } .mipublicacion.icono .nombre{ font-family: 'Roboto'; line-height: 14px; font-size: 14px; text-align: center; color: var(--entorno_color_botones); text-shadow: rgb(0,0,0,0.1) 0px 0px 3px; padding: 0px 0px 0px 0px; } .mipublicacion.mini .texto .subtext, .mipublicacion.icono .texto .subtext{ display: block; } .mipublicacion.mini .sombrear{ display: block; } .mipublicacion.icono .sombrear{ display: none; } @media screen and (min-width: 450px) { .mipublicacion.mini { flex-basis: 100%; aspect-ratio: 6/3; } .mipublicacion.mini .nombre { line-height: 20px; font-size: 20px; margin-bottom: 10px; } .mipublicacion.mini .texto .subtext { display: block; } .mipublicacion.mini .sombrear { display: block; } .mipublicacion.icono { flex-basis: 50%; padding: 3% 1%; } .mipublicacion.video { flex-basis: 100%; aspect-ratio: 6/4; } } @media screen and (min-width: 750px) { .mipublicacion.mini { flex-basis: 100%; aspect-ratio: 6/3; } .mipublicacion.mini .nombre { line-height: 30px; font-size: 30px; } .mipublicacion.mini .texto .subtext { display: block; } .mipublicacion.mini .sombrear { display: block; } .mipublicacion.icono { flex-basis: 25%; padding: 2% 1%; } .mipublicacion.video { flex-basis: 100%; aspect-ratio: 6/2; padding: 1% 1%; } .mipublicacion.video .nombre { line-height: 1.1; font-size: 18px; padding: 10px; } } @media screen and (min-width: 1000px) { .mipublicacion.mini { flex-basis: 100%; aspect-ratio: 7/3; padding: 5% 10%; } .mipublicacion.mini .nombre { line-height: 30px; font-size: 30px; margin-bottom: 20px; } .mipublicacion.mini .texto .subtext { display: block; } .mipublicacion.mini .sombrear { display: block; } .mipublicacion.icono { flex-basis: 25%; padding: 2% 1%; } .mipublicacion.video { flex-basis: 50%; aspect-ratio: 6/3; padding: 1.5% 1.5%; } .mipublicacion.video .nombre { line-height: 1.1; font-size: 15px; padding: 10px; } } @media screen and (min-width: 1400px) { .mipublicacion.mini { flex-basis: 50%; aspect-ratio: 6/3.5; padding: 5% 5%; } .mipublicacion.mini .nombre { line-height: 25px; font-size: 25px; } .mipublicacion.icono { flex-basis: 20%; padding: 2% 1%; } .mipublicacion.video { flex-basis: 50%; aspect-ratio: 6/3; padding: 1.5% 1.5%; } .mipublicacion.video .nombre { line-height: 1.1; font-size: 24px; padding: 10px; } } @media screen and (min-width: 1700px) { .mipublicacion.mini { flex-basis: 50%; } .mipublicacion.mini .nombre { line-height: 32px; font-size: 32px; } .mipublicacion.icono { flex-basis: 16.66%; padding: 2% 1%; } .mipublicacion.video { flex-basis: 33.33%; aspect-ratio: 6/4; padding: 1.5% 1.5%; } .mipublicacion.video .nombre { line-height: 1.1; font-size: 16px; padding: 10px; } } .mipublicacion.derecha:not(.mini):not(.icono){ flex-direction: row-reverse; } .paramovil .mipublicacion:not(.mini):not(.icono){ flex-direction: column; aspect-ratio: 4/6; margin: 0px 0px 0px 0px; } .mipublicacion .fondo{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0px; z-index: 3; pointer-events: none; background-color: rgb(0,0,0,0); transition: 0.5s; opacity: 0; } .mipublicacion.izquierda .fondo{ border-radius: 0px 0px; background-image: linear-gradient(to bottom left, transparent 50%, var(--entorno_color_botones)); } .mipublicacion.derecha .fondo{ border-radius: 0px 0px; background-image: linear-gradient(to bottom right, transparent 50%, var(--entorno_color_botones)); } .mipublicacion.icono .fondo{ border-radius: 50px; } .mipublicacion.mini .fondo{ border-radius: 40px; background-image: linear-gradient(to bottom left, transparent 50%, var(--entorno_color_botones)); } .mipublicacion.video .fondo{ border-radius: 40px; margin: 5%; transition: 1s; background-image: linear-gradient(to bottom, rgb(0,0,0,0), rgb(0,0,0,0.1), var(--entorno_color_botones), rgb(0,0,0,0.9)); } .mipublicacion:not(.video):hover .fondo{ opacity: 0.33; } .mipublicacion.icono:hover .fondo{ background-image: linear-gradient(to bottom, rgb(0,0,0,0), rgb(0,0,0,0.4)); opacity: 0.1; } .mipublicacion.video:hover .fondo{ opacity: 1; margin: 1%; border-radius: 20px; } .paramovil .mipublicacion .fondo{ background-color: rgb(0,0,0,0); } .mipublicacion .col{ position: relative; flex-grow: 1; width: auto; height: auto; box-sizing: border-box; margin: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-end; flex-wrap: nowrap; background-color: rgb(0,0,0,0.04); } .mipublicacion.icono .col{ flex-grow: 0; } .mipublicacion.video .col{ margin: 0px; } .mipublicacion .col.foto{ flex-basis: 50%; background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: 5; background-color: rgb(0,0,0,0.5); border-radius: 50px 10px; color: white; transition: 0.5s; opacity: 0.9; } .paramovil .mipublicacion .col.foto{ flex-basis: 70%; } .mipublicacion.derecha .col.foto{ border-radius: 10px 50px; } .mipublicacion.mini .col.foto{ border-radius: 30px 5px 30px 30px; flex-basis: 30%; } .mipublicacion.video .col.foto{ border-radius: 30px 0px 0px 30px; flex-basis: 30%; } .paramovil .mipublicacion.video .col.foto{ border-radius: 30px 30px 0px 0px; flex-basis: fit-content; } .mipublicacion:hover .col.foto{ opacity: 1; transform: scale(1.025); } .mipublicacion.icono .col.foto{ flex-basis: auto; width: 50%; aspect-ratio: 1/1; border-radius: 50%; border: rgb(255,255,255,0.9) 10px solid; box-shadow: inset rgb(0,0,0,0.5) 0px 0px 10px, rgb(0,0,0,0) 0px 0px 0px; transition: 0.3s; } .mipublicacion.icono:hover .col.foto{ transform: scale(1.1); margin-bottom: 20px; border: rgb(255,255,255,0.8) 1px solid; box-shadow: inset var(--entorno_color) 0px -25px 25px, var(--entorno_color_botones) 0px 0px 20px; } .mipublicacion .degradado{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgb(0,0,0,0); z-index: 1; background-image: linear-gradient(to bottom, var(--entorno_color_botones), rgb(33,33,33,1)); pointer-events: none; opacity: 0.7; transition: 1s; } .mipublicacion.promo .degradado{ opacity: 0; } .mipublicacion.video .degradado{ background-color: var(--entorno_color_botones); background-image: linear-gradient(to bottom right, var(--entorno_color_botones), black); pointer-events: none; opacity: 0.9; transition: 1s; } .mipublicacion .col:hover .degradado{ opacity: 0.4; } .mipublicacion.video .col:hover .degradado{ opacity: 1; } .mipublicacion.mini .col .degradado{ opacity: 0.4; } .mipublicacion.icono .col .degradado{ opacity: 0.2; } .mipublicacion .seccion{ position: relative; width: fit-content; height: fit-content; box-sizing: border-box; padding: 0px 20px; z-index: 2; line-height: 20px; font-size: 12px; font-weight: 700; color: white; letter-spacing: 0px; text-shadow: rgb(0,0,0,0.3) 0px 1px 5px; border: white 1px solid; border-radius: 20px; box-shadow: inset rgb(0,0,0,0.2) 0px -3px 10px; transition: 0.5s; } .mipublicacion.izquierda .seccion{ margin: 20px 20px 0px auto; } .mipublicacion.derecha .seccion{ margin: 20px auto 0px 20px; } .mipublicacion.video .seccion{ margin: 10px 10px 10px auto; } .mipublicacion.izquierda .col.text .seccion{ margin: 20px 0px 0px auto; } .mipublicacion.derecha .col.text .seccion{ margin: 20px auto 0px 0px; } .mipublicacion.mini .seccion{ margin: 10px auto 0px 10px; } .mipublicacion.icono .seccion{ display: none; } .mipublicacion .col:hover .seccion{ box-shadow: inset rgb(0,0,0,0.5) 0px -5px 10px; } .mipublicacion .col.text .seccion{ color: white; background-image: linear-gradient(to right bottom, var(--entorno_color_60), var(--entorno_color_botones_30)); border: var(--entorno_color_50) 1px solid; } .mipublicacion .fecha{ position: relative; width: fit-content; height: fit-content; box-sizing: border-box; margin: 0px auto 10px 0px; z-index: 2; font-family: 'Roboto'; line-height: 20px; font-size: 10px; font-weight: 400; letter-spacing: 3px; text-shadow: rgb(0,0,0,0.3) 0px 1px 5px; opacity: 0.3; transition: 0.5s; } .mipublicacion.derecha .fecha{ margin: 0px 0px 10px auto; } .mipublicacion.mini .fecha, .mipublicacion.icono .fecha, .mipublicacion.video .fecha{ display: none; } .mipublicacion .col:hover .fecha{ opacity: 0.5; } .mipublicacion .nombre{ position: relative; width: 100%; height: fit-content; box-sizing: border-box; padding: 20px 20px 0px 20px; z-index: 2; cursor: pointer; font-family: 'Titulo'; line-height: 1; font-size: 20px; letter-spacing: 0px; font-weight: 800; color: white; text-align: right; text-shadow: rgb(0,0,0,0.3) 0px 1px 5px; transition: 1s; } .mipublicacion.derecha .nombre{ text-align: left; } .mipublicacion.icono .nombre{ text-align: center; } .mipublicacion:not(.mini):not(.icono):not(.promo) .col:hover .nombre{ text-shadow: rgb(0,0,0,0.6) 0px 1px 10px; } .mipublicacion .col.text{ flex-basis: 50%; background-color: white; color: black; } .paramovil .mipublicacion .col.text{ flex-basis: 30%; } .mipublicacion.mini .col.text{ padding-top: 0px; flex-basis: 50%; background-color: white; color: black; } .mipublicacion.icono .col.text{ flex-basis: 75%; transition: 0.5s; } .mipublicacion.video .col.text{ display: none; } .mipublicacion .col.videos{ flex-basis: 70%; background-color: black; color: white; display: none; border-radius: 0px 30px 30px 0px; z-index: 4; } .paramovil .mipublicacion .col.videos{ border-radius: 0px 0px 30px 30px; } .mipublicacion.video .col.videos{ display: block; } .mipublicacion .col.text .nombre{ color: var(--entorno_color_botones); padding: 0px 0px; } .mipublicacion.icono .col.text .nombre{ line-height: 14px; font-size: 14px; font-weight: 700; white-space: break-spaces; overflow: hidden; text-overflow: ellipsis; color: var(--entorno_color_botones); } .paramovil .mipublicacion.icono .col.text .nombre, .mipublicacion.icono:hover .col.text .nombre{ } .mipublicacion .marco{ position: relative; height: 70%; width: 100%; overflow: hidden; box-sizing: border-box; } .mipublicacion.mini .marco, .paramovil .mipublicacion .marco{ height: 100%; } .mipublicacion.icono .marco{ position: relative; height: fit-content; width: 100%; overflow: hidden; box-sizing: border-box; } .mipublicacion .sombrear{ position: absolute; bottom: 0px; left: 0px; right: 0px; height: 50%; z-index: 3; background-image: linear-gradient(to bottom, transparent, white); transition: 0.5s; } .paramovil .mipublicacion .sombrear, .mipublicacion.mini .sombrear{ height: 30%; } .mipublicacion .col:hover .sombrear{ height: 30%; } .mipublicacion.mini .col:hover .sombrear{ height: 10%; } .mipublicacion .texto{ position: absolute; top: 0px; bottom: 0px; left: 5%; right: 30%; box-sizing: border-box; padding: 0px 20px; cursor: pointer; line-height: 21px; font-size: 14px; font-weight: 400; letter-spacing: 1px; text-align: justify; opacity: 0.7; transition: 0.5s; } .mipublicacion.derecha .texto{ left: 30%; right: 5%; padding: 0px 20px; } .mipublicacion.mini .texto{ left: 0px; right: 0px; opacity: 0.9; line-height: 18px; font-size: 12px; padding: 0px 20px 0px 10px; } .mipublicacion.icono .texto{ position: relative; left: 0px; right: 0px; opacity: 0.9; line-height: 12px; font-size: 12px; padding: 0px 0px; } .horizontal .mipublicacion.promo.izquierda .texto{ left: 5%; right: 15%; } .horizontal .mipublicacion.promo.derecha .texto{ left: 15%; right: 5%; } .paramovil .mipublicacion .texto{ left: 0px; right: 0px; padding: 0px 0px; } .mipublicacion:hover .col .texto{ opacity: 1; } .mipublicacion .galeria{ position: absolute; bottom: 10%; left: 0px; right: 0px; height: 30%; box-sizing: border-box; z-index: 6; overflow: visible; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; transition: 0.5s; transform: translateY(5px); } .mipublicacion:hover .galeria{ transform: translateY(0px); } .paramovil .mipublicacion .galeria{ height: 30%; bottom: 30%; padding-bottom: 20px; } .mipublicacion.mini .galeria, .mipublicacion.icono .galeria, .mipublicacion.videos .galeria{ display: none; } .mipublicacion .galeria .content{ position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; overflow-x: auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } .mipublicacion.derecha .galeria .content{ flex-direction: row-reverse; } .mipublicacion .galeria .content .desplazar{ position: relative; width: auto; height: 100%; aspect-ratio: 1/1; cursor: pointer; background-color: rgb(0,0,0,0); transition: 0.5s; } .paramovil .mipublicacion .galeria .content .desplazar{ aspect-ratio: 1/2; } .mipublicacion.izquierda .galeria .content .desplazar .izquierda{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 40px; width: 40px; box-sizing: border-box; border-radius: 50%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: 16px; box-shadow: inset rgb(0,0,0,0.1) 0px 0px 25px; background-image: url("png/nuevos/icons8-left-16(1).png"); transition: 0.5s; } .mipublicacion.izquierda .galeria .derecha{ display: none; } .mipublicacion.derecha .galeria .content .desplazar .derecha{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 40px; width: 40px; box-sizing: border-box; border-radius: 50%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: 16px; box-shadow: inset rgb(0,0,0,0.1) 0px 0px 25px; background-image: url("png/nuevos/icons8-right-16(1).png"); transition: 0.5s; } .mipublicacion.derecha .galeria .izquierda{ display: none; } .mipublicacion .galeria .content:hover .desplazar .izquierda, .mipublicacion .galeria .content:hover .desplazar .derecha{ box-shadow: inset var(--entorno_color_botones) 0px 0px 3px, inset rgb(0,0,0,0.4) 0px 0px 40px; } .mipublicacion .galeria .content .miniatura{ position: relative; width: auto; height: 100%; aspect-ratio: 4/3; transition: 0.5s; } .mipublicacion .galeria .content .miniatura:hover{ z-index: 3; } .paramovil .mipublicacion .galeria .content .miniatura{ aspect-ratio: 4/4; } .mipublicacion .galeria .content .miniatura .mifoto{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 7%; cursor: pointer; background-color: white; background-position: center center; background-repeat: no-repeat; background-size: cover; box-shadow: rgb(0,0,0,0.3) 0px 0px 3px, var(--entorno_color) 0px 0px 0px, var(--entorno_color_botones) 0px 0px 0px, rgb(0,0,0,0.3) 0px 0px 0px; border-radius: 20px; transition: 0.5s; } .mipublicacion.cover .galeria .content .miniatura .mifoto{ background-size: cover; } .mipublicacion.contain .galeria .content .miniatura .mifoto{ background-size: contain; } .paramovil .mipublicacion .galeria .content .miniatura .mifoto{ margin: 25px 10px; } .mipublicacion .galeria .content .miniatura .mifoto:hover{ box-shadow: rgb(0,0,0,0.5) 0px 0px 3px, var(--entorno_color) -2px -2px 10px, var(--entorno_color_botones) 2px 2px 10px, rgb(0,0,0,0.2) 0px 2px 25px; } .mipublicacion .galeria .content .miniatura:hover{ transform: scale(1.1); } @media screen and (min-width: 700px){ .mipublicacion .nombre { line-height: 1; font-size: 30px; letter-spacing: -1px; } .mipublicacion .col.text .nombre { font-size: 25px; } } @media screen and (min-width: 1200px){ .mipublicacion .nombre { line-height: 1; font-size: 55px; letter-spacing: -1px; } .mipublicacion .col.text .nombre { font-size: 40px; } } @media screen and (min-width: 1500px){ .mipublicacion .nombre { line-height: 1; font-size: 70px; letter-spacing: -1px; } .mipublicacion .col.text .nombre { font-size: 50px; } } /********************** Mini Producto *********************/ .miproducto{ position: relative; box-sizing: border-box; border-radius: 0px; overflow: hidden; padding: 0px; margin: 5px; font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; width: 250px; aspect-ratio: 5/7; height: auto; background-color: white; } .miproducto.CATALOG{ flex-basis: 100%; } .paramovil .miproducto{ aspect-ratio: 5/4; } .horizontal .miproducto{ width: 250px; aspect-ratio: 5/7; } .miproducto.mini{ flex-basis: auto; width: 250px; height: auto; aspect-ratio: 5/7; } .miproducto.tema{ width: 300px; aspect-ratio: 6/9; margin-right: 20px; border-radius: 30px; box-shadow: white 0px 0px 10px; } .miproducto.tema.linea{ width: auto; aspect-ratio: auto; /*aspect-ratio: 8/1;*/ overflow: visible; margin: 5px 5px 10px 5px; border-radius: 45px; box-shadow: none; background-color: transparent; } .miproducto.tema.hover{ width: 250px; aspect-ratio: 5/5; margin-right: 20px; } /*.miproduct:not(.mini)*/ @media screen and (min-width: 450px){ .miproducto.CATALOG { flex-basis: calc(50% - 10px); aspect-ratio: 5/7; } } @media screen and (min-width: 750px){ .miproducto.CATALOG { flex-basis: calc(33.33% - 10px); } .activarlateral .miproducto.CATALOG { flex-basis: calc(50% - 10px); } } @media screen and (min-width: 1050px){ .miproducto.CATALOG { flex-basis: calc(33.33% - 10px); } .activarlateral .miproducto.CATALOG { flex-basis: calc(33.33% - 10px); } } @media screen and (min-width: 1300px){ .miproducto.CATALOG { flex-basis: calc(25% - 10px); } .activarlateral .miproducto.CATALOG { flex-basis: calc(25% - 10px); } } @media screen and (min-width: 1600px){ .miproducto.CATALOG { flex-basis: calc(20% - 10px); } } .miproducto .miproducto-marco{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; box-sizing: border-box; overflow: hidden; transition: 0.5s; cursor: pointer; } .miproducto.tema.linea .miproducto-marco{ position: relative; height: fit-content; overflow: visible; cursor: default; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: center; align-items: center; } .miproducto.tema.hover .miproducto-marco{ cursor: help; } .miproducto.agregado .miproducto-marco{ bottom: 41px; } .miproducto .video{ background-color: black; } .miproducto .miproducto-contenido{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; box-sizing: border-box; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: space-between; border: white 1px solid; background-color: rgb(0,0,0,0); padding: 10px 15px; border-radius: 0px; transition: 0.5s; } .miproducto.tema.linea .miproducto-contenido{ position: relative; top: auto; bottom: auto; left: auto; right: auto; flex-grow: 1; border: hidden; } .miproducto.mini .miproducto-contenido{ background-color: rgb(0,0,0,0); } .miproducto:not(.hover):not(.linea):hover .miproducto-contenido{ border: #222 1px solid; background-color: rgb(0,0,0,0); } .miproducto .triangulo_top_left { position: absolute; bottom: 0; left: 0; width: 0; height: 0; margin: 0px; z-index: 4; pointer-events: none; border-bottom: 15px solid white; border-right: 15px solid transparent; } .miproducto .triangulo_top_left_click { position: absolute; bottom: 0; left: 0; width: 0; height: 0; margin: 0px; z-index: 3; pointer-events: none; border-bottom: 16px solid #555; border-right: 16px solid transparent; opacity: 0; transition: 0.5s; } .miproducto .triangulo_bottom_left { position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0px; z-index: 4; pointer-events: none; border-top: 15px solid white; border-right: 15px solid transparent; } .miproducto .triangulo_bottom_left_click { position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0px; z-index: 3; pointer-events: none; border-top: 16px solid #555; border-right: 16px solid transparent; opacity: 0; transition: 0.5s; } .miproducto .triangulo_bottom_right { position: absolute; bottom: 0; right: 0; width: 0; height: 0; margin: 0px; z-index: 4; pointer-events: none; border-bottom: 15px solid white; border-left: 15px solid transparent; } .miproducto .triangulo_bottom_right_click { position: absolute; bottom: 0; right: 0; width: 0; height: 0; margin: 0px; z-index: 3; pointer-events: none; border-bottom: 16px solid #555; border-left: 16px solid transparent; opacity: 0; transition: 0.5s; } .miproducto .triangulo_top_right { position: absolute; top: 0; right: 0; width: 0; height: 0; margin: 0px; z-index: 4; pointer-events: none; border-top: 15px solid white; border-left: 15px solid transparent; } .miproducto .triangulo_top_right_click { position: absolute; top: 0; right: 0; width: 0; height: 0; margin: 0px; z-index: 3; pointer-events: none; border-top: 16px solid #555; border-left: 16px solid transparent; opacity: 0; transition: 0.5s; } .miproducto.tema .triangulo_top_right_click { border-top: 16px solid #FFF; } .miproducto .triangulo_activo_click { position: absolute; bottom: 0px; right: 0px; width: 0; height: 0; margin: 0px; z-index: 5; pointer-events: none; border-bottom: 13px solid #FFF; border-left: 13px solid transparent; display: none; } .miproducto.agregado .triangulo_activo_click { opacity: 1; display: block; } .miproducto .triangulo_activo_click_int { position: absolute; bottom: 0px; right: 0px; width: 0; height: 0; margin: 5px; z-index: 5; pointer-events: none; border-top: 10px solid rgb(0,0,0,0.2); border-right: 10px solid transparent; display: none; } .miproducto:hover .triangulo_top_right_click, .miproducto:hover .triangulo_bottom_right_click, .miproducto:hover .triangulo_top_left_click, .miproducto:hover .triangulo_bottom_left_click{ opacity: 1; } .miproducto:hover .triangulo_activo_click, .miproducto:hover .triangulo_activo_click_int{ display: block; } .miproducto .tapa{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; pointer-events: none; background-color: rgb(0,0,0,0.03); margin: 1px; } .horizontal .miproducto .tapa{ background-color: rgb(0,0,0,0.03); } .miproducto:hover .tapa{ background-color: rgb(0,0,0,0); } .miproducto .miproducto-linea{ position: relative; height: fit-content; box-sizing: border-box; padding: 0px 0px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; z-index: 2; } .miproducto .miproducto-linea.vrtcl{ flex-direction: column; flex-wrap: wrap; } .miproducto .miproducto-linea.vrtcl div{ max-width: none; width: 100%; } .miproducto .miproducto-linea.doble{ flex-wrap: nowrap; justify-content: space-between; } .miproducto .miproducto-linea div{ /* position: relative; width: fit-content; max-width: 50%; height: 20px; */ line-height: 20px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.5s; } .miproducto .miproducto-linea .border{ font-size: 12px; font-weight: 600; background-color: #222; color: white; letter-spacing: 0px; border-radius: 20px; padding: 0px 15px; box-shadow: inset rgb(0,0,0,0.3) 0px 2px 10px; text-shadow: rgb(0,0,0,0.4) 0px 1px 3px; transition: 0.5s; } .horizontal .miproducto .miproducto-linea .border{ color: rgb(0,0,0,0.5); background-color: transparent; box-shadow: inset rgb(0,0,0,0.04) 0px 0px 20px; text-shadow: none; } .miproducto:hover .miproducto-linea .border{ background-color: #222; color: white; box-shadow: inset rgb(0,0,0,0.3) 0px 2px 10px; text-shadow: rgb(0,0,0,0.4) 0px 1px 3px; } .miproducto .miproducto-linea.extendida{ flex-grow: 1; transition: 0.5s; } .horizontalxxx .miproducto .miproducto-linea.extendida{ background-color: black; } .miproducto:hover .miproducto-linea.extendida{ background-color: white; } .miproducto .miproducto-foto-fondo{ /*.miproducto-linea*/ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%; max-width: 100%; box-sizing: border-box; z-index: 1; background-color: white; opacity: 1; transition: 0.5s; overflow: hidden; } .miproducto.tema .miproducto-foto-fondo{ /*.miproducto-linea*/ background-color: var(--entorno_color_botones); } .miproducto.tema.linea .miproducto-foto-fondo{ position: relative; top: auto; bottom: auto; left: auto; right: auto; flex-basis: 100px; width: 100px; height: auto; background-color: white; aspect-ratio: 2/2; border-radius: 25%; } .horizontal .miproducto.tema.linea .miproducto-foto-fondo{ flex-basis: 200px; width: 200px; } .miproducto.tema.hover .miproducto-foto-fondo{ /*.miproducto-linea*/ border-radius: 30px; } .horizontal .miproducto .miproducto-foto-fondo{ /*.miproducto-linea*/ opacity: 0.97; } .miproducto.mini .miproducto-foto-fondo{ /*.miproducto-linea*/ opacity: 1; } .miproducto:hover .miproducto-foto-fondo{ /*.miproducto-linea*/ opacity: 1; } .miproducto.tema.linea:hover .miproducto-foto-fondo{ box-shadow: var(--entorno_color_botones) -2px -2px 5px, rgb(0,0,0,0.5) 5px 5px 20px; } .miproducto .miproducto-foto{ /*.miproducto-linea*/ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 90%; height: 90%; box-sizing: border-box; z-index: 2; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: 0.5s; } .miproducto.tema .miproducto-foto{ /*.miproducto-linea*/ width: 100%; height: 100%; background-size: cover; transform: scale(1); z-index: 1; opacity: 0.75; } .miproducto.tema.hover .miproducto-foto{ /*.miproducto-linea*/ border-radius: 30px; } .miproducto:not(.tema):hover .miproducto-foto{ /*.miproducto-linea*/ width: 95%; height: 95%; } .miproducto.tema:hover .miproducto-foto{ width: 100%; height: 100%; transform: scale(1); opacity: 0.1; } .miproducto.tema.linea:hover .miproducto-foto{ opacity: 1; box-shadow: inset var(--entorno_color) -1px -1px 2px; border-radius: 25%; } .miproducto.tema.hover .miproducto-foto{ /*.miproducto-linea*/ width: 100%; height: 100%; transform: scale(1); opacity: 0.4; } .miproducto.tema.linea .sombra{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; border-radius: 50px; background-image: linear-gradient(to right, rgb(0,0,0,0.9), var(--entorno_color_botones), var(--entorno_color)); transition: 1s; opacity: 0; } .miproducto.tema.linea:hover .sombra{ opacity: 1; } .miproducto.tema.linea .col{ position: relative; height: 100%; padding: 0px 5%; box-sizing: border-box; z-index: 2; text-align: left; color: #333; text-shadow: white 1px 1px 1px, white 0px 0px 5px; } .miproducto.tema.linea .col.flecha{ flex-basis: fit-content; padding: 0px; } .miproducto.tema.linea .col.nombre, .miproducto.tema.linea .col.texto{ flex-basis: 100px; height: fit-content; max-height: 80px; overflow: hidden; flex-grow: 1; } .horizontal .miproducto.tema.linea .col.nombre, .horizontal .miproducto.tema.linea .col.texto{ flex-basis: 200px; max-height: 120px; } .miproducto.tema.linea .col.nombre{ line-height: 20px; font-size: 15px; letter-spacing: 0px; font-weight: 700; } .horizontal .miproducto.tema.linea .col.nombre{ line-height: 30px; font-size: 25px; letter-spacing: -1px; font-weight: 700; } .miproducto.tema.linea .col.texto{ line-height: 15px; font-size: 13px; letter-spacing: 0px; font-weight: 400; opacity: 0.8; font-style: italic; border-left: rgb(0,0,0,0.1) 1px solid; } .horizontal .miproducto.tema.linea .col.texto{ line-height: 25px; font-size: 20px; } .horizontal .miproducto.tema.linea .col.texto{ line-height: 25px; font-size: 20px; letter-spacing: 0px; font-weight: 400; opacity: 0.8; font-style: italic; border-left: rgb(0,0,0,0.1) 1px solid; } .miproducto.tema.linea:hover .col{ color: var(--entorno_color_botones); color: white; text-shadow: rgb(0,0,0,0.9) 1px 1px 6px, var(--entorno_color_botones) -1px -1px 2px; } .miproducto:hover .miproducto-linea .border.verde{ background-color: var(--entorno_color_verde); } .miproducto .oculto{ opacity: 0.6; transition: 0.5s; } .horizontal .miproducto .oculto{ opacity: 0.25; transition: 0.5s; } .miproducto:hover .oculto{ opacity: 1; } .miproducto .miproducto-linea .nombre{ font-size: 14px; font-weight: 700; text-align: left; color: rgb(0,0,0,0.8); letter-spacing: 0px; max-width: none; flex-grow: 1; transition: 0.5s; z-index: 3; } .horizontal .miproducto .miproducto-linea .nombre{ font-size: 12px; font-weight: 900; text-align: left; color: rgb(0,0,0,0.75); letter-spacing: 0px; max-width: none; flex-grow: 1; transition: 0.5s; z-index: 3; } .miproducto.tema .miproducto-linea .nombre{ height: fit-content; max-height: 80px; white-space: normal; margin: 10px 0px; line-height: 20px; font-size: 20px; color: white; text-shadow: rgb(0,0,0,0.5) 0px 1px 3px; letter-spacing: -0.5px; font-weight: 800; font-family: 'Roboto'; } .miproducto.tema:hover .miproducto-linea .nombre{ height: fit-content; max-height: none; line-height: 25px; font-size: 25px; color: white; letter-spacing: -0.5px; } .paramovil .miproducto.tema .miproducto-linea .nombre{ height: fit-content; max-height: none; line-height: 25px; font-size: 25px; color: white; letter-spacing: -0.5px; } .miproducto.tema.hover .miproducto-linea .nombre{ height: fit-content; max-height: none; line-height: 20px; font-size: 20px; color: white; letter-spacing: -0.5px; } .miproducto:not(.tema):hover .miproducto-linea .nombre{ font-size: 14px; color: rgb(0,0,0,1); letter-spacing: 0px; } .miproducto .miproducto-linea .regular{ font-size: 12px; font-weight: 900; text-align: left; color: rgb(0,0,0,0.5); letter-spacing: 0px; flex-grow: 1; } .miproducto:hover .miproducto-linea .regular{ color: rgb(0,0,0,1); } .miproducto .miproducto-linea .precio{ height: 25px; line-height: 25px; font-size: 25px; font-weight: 900; text-align: center; color: rgb(0,0,0,0.8); letter-spacing: -1px; } .miproducto .miproducto-linea .precio.ref{ height: 10px; line-height: 10px; font-size: 10px; font-weight: 500; text-align: right; color: rgb(0,0,0,0.5); letter-spacing: 1px; } .miproducto .miproducto-linea .codigo{ height: 13px; line-height: 13px; font-size: 11px; font-weight: 500; text-align: left; color: rgb(0,0,0,0.5); letter-spacing: 0.5px; } .miproducto.tema .miproducto-linea .codigo{ color: rgb(255,255,255,0.5); max-width: 100%; } .miproducto .miproducto-linea .color{ color: var(--entorno_color_botones); font-weight: 600; opacity: 0.5; } .miproducto:hover .miproducto-linea .color{ opacity: 1; } .miproducto .miproducto-carrito{ display: none; opacity: 0; } .miproducto.agregado .miproducto-carrito{ position: absolute; bottom: 1px; left: 1px; right: 0px; height: 39px; box-sizing: border-box; overflow: hidden; background-color: #DDDDDD; background-image: linear-gradient(to right, var(--entorno_color_botones), transparent); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; border-radius: 20px 0px 20px 20px; padding: 0px 5px 0px 5px; box-shadow: inset rgb(0,0,0,0.2) 5px -5px 10px; transition: 0.5s; opacity: 1; } .miproducto.agregado .miproducto-carrito div{ position: relative; height: 30px; line-height: 30px; width: fit-content; color: white; font-size: 13px; font-weight: 500; letter-spacing: 0px; text-shadow: rgb(0,0,0,0.5) 0px 1px 3px; } .miproducto.agregado .miproducto-carrito span{ margin: 0px 2px; white-space: nowrap; } .miproducto.agregado .miproducto-carrito .negrita{ font-weight: 900; } .miproducto.agregado .miproducto-carrito .opaco{ opacity: 0.5; } .miproducto.agregado .miproducto-carrito .icono{ width: 45px; height: 45px; background-image: url("png/nuevos/icons8-checkout-48(1).png"); background-position: center center; background-repeat: no-repeat; background-size: contain; display: none; } .horizontal .miproducto.agregado .miproducto-carrito .icono{ display: block; } .miproducto.agregado .miproducto-carrito .borrar{ width: 30px; cursor: pointer; transform: 0.5s; background-image: url("png/nuevos/icons8-delete-48(1).png"); background-position: center center; background-repeat: no-repeat; background-size: 24px; background-color: var(--entorno_color_rojo); padding: 0px 0px; border-radius: 20px; box-shadow: inset rgb(0,0,0,0.1) 0px -5px 10px, rgb(0,0,0,0.2) 1px 1px 3px; } .miproducto.agregado .miproducto-carrito .borrar:hover{ box-shadow: inset rgb(0,0,0,0.2) 0px -5px 10px, rgb(0,0,0,0.5) 1px 1px 4px; } .miproducto.agregado .miproducto-carrito .radiado{ background-color: rgb(0,0,0,0); background-image: linear-gradient(to right, rgb(0,0,0,0.3), rgb(0,0,0,0.9)); margin: 0px 5px 0px 0px; padding: 0px 10px; border-radius: 20px; flex-grow: 1; font-weight: 600; cursor: pointer; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; } .horizontal .miproducto.agregado .miproducto-carrito .radiado{ margin: 0px 5px; padding: 0px 10px; } /*********** Imágenes (3) de página de inicio ************/ .publicidad{ position:relative; box-sizing:border-box; height:auto; overflow:hidden; padding:35px; padding-left:0px; padding-right:0px; margin-top:50px; } .publicidad .fondoicon{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-image:url(empresa/fondoicon.png); background-repeat:repeat; background-position:top center; background-size:auto 50%; opacity:0.15; } .publicidad .minibanner{ position:relative; width:33.33%; height:250px; float:left; box-sizing:border-box; cursor:pointer; z-index:2; } .publicidad .minibanner .fondo{ position:absolute; top:10px; bottom:10px; left:10px; right:10px; border-radius:20px; overflow:hidden; background-color:#FFF; background-image:linear-gradient(to bottom right, var(--entorno_color_botones), transparent); box-shadow:rgb(0,0,0,0.25) 2px 2px 10px; z-index:1; } .publicidad .minibanner .img{ position:absolute; top:10px; bottom:10px; left:10px; right:10px; border-radius:20px; overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:contain; z-index:2; } .publicidad .minibanner .texto{ position:absolute; top:0px; bottom:0px; left:0px; right:45%; box-sizing:border-box; padding:2.5vw; line-height:1.1vw; font-size:1.1vw; font-weight:900; text-align:left; color:#FFF; text-shadow:rgb(0,0,0,0.1) 0px 1px 3px; letter-spacing:-1px; z-index:3; } @media screen and (max-width: 450px) { .publicidad .minibanner .texto{ padding:25px; line-height:16px; font-size:14px; right:50%;} } .publicidad .minibanner .boton{ position:absolute; bottom:10px; left:20px; right:10px; margin:auto; box-sizing:border-box; padding:1.5vw; padding-top:0px; padding-bottom:0px; margin-top:1.5vw; text-align:center; line-height:1.5vw; font-size:0.9vw; font-weight:900; color:rgb(0,0,0,0.9); letter-spacing:-1px; text-shadow:rgb(255,255,255,0.5) 0px 0px 5px; border-radius:20px 40px 0px 20px; background-image:linear-gradient(to right, rgb(255,255,255,0.7), rgb(255,255,255,1)); } @media screen and (max-width: 450px) { .publicidad .minibanner .boton{ margin-top:20px; line-height:18px; font-size:13px; padding:10px; padding-top:0px; padding-bottom:0px; } } /*********** Indice del Listado de Productos ************/ #cuerpo .indice{ position:relative; box-sizing:border-box; height:50px; overflow:hidden; margin: 0px auto; z-index:3; font-family:'Roboto', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; } #cuerpo .indice .marco{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; width: fit-content; overflow: auto; margin: auto; box-sizing:border-box; padding: 0px 35px; white-space:nowrap; text-align:center; } #cuerpo.paramovil .indice .marco{ width: auto; left:25px; right:25px; } #cuerpo .indice .marco.sombra{ background-color: rgb(0,0,0,0.03); box-shadow: inset rgb(0,0,0,0.3) 0px 2px 5px; border-radius: 35px; } #cuerpo .indice .boton{ position:relative; height:50px; padding: 0px 10px; box-sizing:content-box; cursor:pointer; display:inline-block; line-height:50px; font-size:15px; color:rgb(0,0,0,0.9); font-weight:600; text-align:center; letter-spacing:0px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } .fondoNegro #cuerpo .indice .boton{color:rgb(255,255,255,0.9); } #cuerpo .indice .boton.enmarcado { background-color:rgb(0,0,0,0.05); border-radius:10px; height:35px; line-height:35px; margin-top:20px; margin-bottom:20px; } .fondoNegro #cuerpo .indice .boton.enmarcado { background-color:rgb(255,255,255,0.05); } #cuerpo .indice .boton.descargas, #cuerpo .indice .boton.separador { border: var(--entorno_color_botones) 1px solid; border-right: hidden; height: 20px; line-height:20px; color: var(--entorno_color); padding-left: 15px; padding-right: 0px; border-radius: 20px 0px 0px 20px; margin: 16px 0px 14px 15px; opacity: 1; cursor: default; pointer-events: none; } #cuerpo .indice .boton.separador { border-radius: 0px 20px 20px 0px; margin: 16px 15px 14px 0px; padding-left: 0px; padding-right: 10px; border: var(--entorno_color_botones) 1px solid; border-left: hidden; } #cuerpo .indice .boton.csssub { color: var(--entorno_color_botones); } #cuerpo .indice .boton.click { color:var(--entorno_color); font-weight:800; text-shadow: rgb(0,0,0,0.1) 0px 0px 1px; } #cuerpo .indice .desplazar{ position:absolute; top:5px; bottom:5px; width:15px; height: 15px; margin: auto; border-radius: 20px; background-color: white; cursor:pointer; background-position:center center; background-repeat:no-repeat; background-size:10px; } #cuerpo .indice.sub .desplazar{ position:absolute; top:0px; bottom:0px; width:35px; height: 35px; border-radius: 25px; background-position:center center; background-repeat:no-repeat; background-size:auto 75%; box-shadow: rgb(0,0,0,0.5) 0px 1px 5px; } #cuerpo .indice .desplazar.izquierda { left:0px; z-index:3; background-image:url(png/nuevos/icons8-back-50.png); } #cuerpo .indice .desplazar.derecha { right:0px; z-index:3; background-image:url(png/nuevos/icons8-forward-50.png); } #cuerpo .indice.sub .desplazar.izquierda { margin-left: 3px; } #cuerpo .indice.sub .desplazar.derecha { margin-right: 3px; } #cuerpo .indice .desplazar.fizquierda { left:0px; width: 35px; z-index:2; background-image:linear-gradient(to right, rgb(255,255,255,1), rgb(255,255,255,0.8), transparent); background-size:auto; pointer-events: none; } #cuerpo .indice .desplazar.fderecha { right:0px; width: 35px; z-index:2; background-image:linear-gradient(to left, rgb(255,255,255,1), rgb(255,255,255,0.8), transparent); background-size:auto; pointer-events: none; } .fondoNegro #cuerpo .indice .desplazar.izquierda{ background-image:url('png/nuevos/icons8-back-50(1).png'); } .fondoNegro #cuerpo .indice .desplazar.derecha{ background-image:url('png/nuevos/icons8-forward-50(1).png'); } .fondoNegro #cuerpo .indice .desplazar.fizquierda{ background-image:linear-gradient(to right, rgb(0,0,0,1), transparent); background-size:auto; } .fondoNegro #cuerpo .indice .desplazar.fderecha{ background-image:linear-gradient(to left, rgb(0,0,0,1), transparent); background-size:auto; } /******************* Publicaciones ***********************/ /* Regular */ .publicacion.regular{ position:relative; height:70vh; max-height: 50vw; overflow:hiddenn; box-sizing:border-box; margin:0px 0px 150px 0px; font-family: 'Quicksand', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; } .publicacion.regular.vertical { height:70vh; max-height:none; margin: 10px; } .publicacion.regular.mediano { height:70vh; max-height:none; margin: 10px; display:inline-block; } .publicacion.regular .portada{ position:absolute; top:10px; bottom:10px; width:60%; box-sizing:border-box; overflow:hidden; background-color:rgb(0,0,0,0.1); background-position:center center; background-repeat:no-repeat; background-size:cover; cursor:pointer; } .publicacion.regular.izquierda .portada{ left:0px; border-radius:0px 25px; border-radius:25px; box-shadow: rgb(0,0,0,0.1) 5px 5px 10px; } .publicacion.regular.derecha .portada{ right:0px; border-radius:25px 0px; border-radius:25px; box-shadow: rgb(0,0,0,0.1) -5px -5px 10px; } .publicacion.regular.vertical .portada{ width:auto; left:0px; right:0px; bottom:50%; box-shadow: rgb(0,0,0,0.1) 0px 0px 10px;} .publicacion.regular.mediano .portada{ width:auto; left:0px; right:0px; bottom:50%; box-shadow: rgb(0,0,0,0.1) 0px 0px 10px;} .publicacion.regular .portada .tapa{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; opacity:0.9; background-image:linear-gradient(to bottom, var(--entorno_color_oscuro), transparent 50%); z-index:2; } .publicacion.regular .portada .titulo{ position:relative; box-sizing:border-box; padding:35px; line-height:4vw; font-size:4vw; font-weight:700; color:#FFF; text-shadow:rgb(0,0,0,0.6) 2px 2px 4px; letter-spacing: -1px; font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; z-index:3; } .fondoNegro .publicacion.regular .portada .titulo{text-shadow:rgb(0,0,0,1) 1px 1px 3px;} .publicacion.regular.izquierda .portada .titulo{ text-align:right; } .publicacion.regular.derecha .portada .titulo{ text-align:left; } .publicacion.regular.vertical .portada .titulo{ line-height:8vw; font-size:8vw; padding:25px; } .publicacion.regular.mediano .portada .titulo{ line-height:16px; font-size:16px; padding:25px; font-weight:700; } .publicacion.regular .observacion{ position:absolute; top:0px; bottom:60%; box-sizing:border-box; overflow:hidden; padding-top:25px; line-height:1.6vw; font-size:0.85vw; color:rgb(0,0,0,0.6); font-weight:500; letter-spacing:1px; text-align:left; font-family: 'Roboto', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; cursor:pointer; } .fondoNegro .publicacion.regular .observacion{color:rgb(255,255,255,0.9);} .publicacion.regular.izquierda .observacion{ left:60%; right:0px; padding-left:75px; padding-right:25px; text-align:left; } .publicacion.regular.derecha .observacion{ left:0px; right:60%; padding-left:25px; padding-right:75px; text-align:justify; } .publicacion.regular.vertical .observacion{ left:0px; right:0px; top:60%; bottom:10%; padding-left:25px; padding-right:25px; text-align:center; line-height:4vw; font-size:3.2vw; } .publicacion.regular.mediano .observacion{ left:0px; right:0px; top:60%; bottom:10%; padding-left:25px; padding-right:25px; text-align:center; line-height:16px; font-size:13px; } .publicacion.regular .observacion .sombra{ position:absolute; bottom:0px; left:25px; right:25px; height:75px; box-sizing:border-box; background-image:linear-gradient(to top, rgb(255,255,255,0.8), transparent); z-index:2; } .fondoNegro .publicacion.regular .observacion .sombra{background-image:linear-gradient(to top, rgb(0,0,0,1), transparent);} .publicacion.regular .vermas{ position:absolute; bottom: 50%; width: fit-content; height: fit-content; box-sizing: border-box; border-radius: 25px; z-index: 2; cursor:pointer; font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; line-height:1.5vw; font-size:1vw; background-color: var(--entorno_color_botones); color: white; font-weight:700; letter-spacing:0px; text-align:left; background-repeat: no-repeat; background-position:left+10px center; background-size: auto 80%; background-image:url("png/nuevos/icons8-expand-arrow-50(1).png"); padding: 0px 25px; padding-left: 40px; } .fondoNegro .publicacion.regular .vermas{ color:rgb(255,255,255,1); } .publicacion.regular.izquierda .vermas{ left: 60%; margin-left: 75px; } .publicacion.regular.derecha .vermas{ right:60%; margin-right: 75px; } .publicacion.regular.vertical .vermas{ left:0px; right:0px; bottom: 30px; margin: auto; line-height:4vw; font-size:4vw; } .publicacion.regular.mediano .vermas{ left:0px; right:0px; bottom: 35px; margin: auto; line-height:13px; font-size:13px; } .fondoNegro .publicacion.regular.izquierda .vermas{ background-image:url('png/nuevos/icons8-forward-50(1).png'); } .fondoNegro .publicacion.regular.derecha .vermas{ background-image:url('png/nuevos/icons8-back-50(1).png'); } .fondoNegro .publicacion.regular.vertical .vermas{ } .fondoNegro .publicacion.regular.mediano .vermas{ } .publicacion.regular .categoria{ position: absolute; bottom: 15px; box-sizing: border-box; overflow: hidden; padding: 0px 25px; z-index: 2; font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; line-height: 20px; font-size: 13px; color: rgb(0,0,0,0.6); font-weight: 800; letter-spacing: 0px; white-space: nowrap; text-overflow: ellipsis; cursor:pointer; display:none; } .publicacion.regular.izquierda .categoria{ left:60%; right:0px; text-align:right; } .publicacion.regular.derecha .categoria{ left:0px; right:60%; text-align:left; } .publicacion.regular.vertical .categoria{ left:0px; right:0px; bottom: 5px; font-weight: 600; } .publicacion.regular.mediano .categoria{ left:0px; right:0px; } .publicacion.regular.al100 .categoria{ /*display: block;*/ text-align: center; color: var(--entorno_color_botones); } .publicacion.regular .galeria{ position:absolute; bottom:2%; left:0px; right:0px; height:50%; box-sizing:border-box; overflow:hidden; white-space:nowrap; z-index:2; } .publicacion.regular.izquierda .galeria{ text-align:right; } .publicacion.regular.derecha .galeria{ text-align:left; } .publicacion.regular.vertical .galeria{ text-align:center; bottom:40%; height:22.5%; } .publicacion.regular.mediano .galeria{ text-align:center; bottom:40%; height:22.5%; } .publicacion.regular .galeria .marco{ position:relative; width:33.33%; height:100%; box-sizing:border-box; overflow:hidden; display:inline-block; padding:25px; } .publicacion.regular.vertical .galeria .marco{ width:50%; padding:5px; } .publicacion.regular.mediano .galeria .marco{ width:50%; padding:5px; } .publicacion.regular .galeria .marco .foto{ position:relative; width:100%; height:100%; box-sizing:border-box; overflow:hidden; background-color:rgb(255,255,255,1); background-position:center center; background-repeat:no-repeat; background-size:contain; border-radius:25px; box-shadow:rgb(0,0,0,0.5) 0px 0px 25px; cursor:pointer; } .fondoNegro .publicacion.regular .galeria .marco .foto{ background-color:rgb(0,0,0,1); border:rgb(255,255,255,0.1) 1px solid; box-shadow:rgb(0,0,0,1) 0px 0px 25px;} .publicacion.regular.cover .galeria .marco .foto{ background-size:cover; } .publicacion.regular.vertical .galeria .marco .foto{ box-shadow:rgb(0,0,0,0.6) 0px 0px 5px; } .publicacion.regular.mediano .galeria .marco .foto{ box-shadow:rgb(0,0,0,0.6) 0px 0px 5px; } .publicacion.regular .ocultar, .publicacion.mediano .ocultar{ position:absolute; top:0px; bottom:0px; width:1px; height:1px; opacity:0; overflow:hidden; } /* producto */ .publicacion.catalogo{ position:relative; height:80%; overflow:hidden; box-sizing:border-box; margin-bottom:120px; } .publicacion.catalogo.vertical{ height:90%; } .publicacion.catalogo .portada{ position:absolute; top:0px; bottom:0px; width:40%; box-sizing:border-box; overflow:hidden; background-color:rgb(0,0,0,0.1); background-position:top center; background-repeat:no-repeat; background-size:cover; cursor:pointer; } .publicacion.catalogo.izquierda .portada{ left:0px; border-radius:15px; } .publicacion.catalogo.derecha .portada{ right:0px; border-radius:15px; } .publicacion.catalogo.vertical .portada{ width:auto; left:0px; right:0px; bottom:60%; } .publicacion.catalogo .portada .tapa{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; z-index:2; background-image:linear-gradient(to bottom, rgb(0,0,0,0.5), transparent); } .publicacion.catalogo .portada .recuadro{ position:relative; border:#FFF 2px solid; margin:5px; padding-left:10px; padding-right:10px; border-radius:10px; z-index:2; } .publicacion.catalogo.izquierda .portada .recuadro{ float:left; } .publicacion.catalogo.derecha .portada .recuadro{ float:right; } .publicacion.catalogo .portada .titulo{ position:relative; box-sizing:border-box; padding:35px; line-height:1.5vw; font-size:1vw; font-weight:500; color:#FFF; text-shadow:rgb(0,0,0,0.3) 0px 0px 3px; z-index:3; } .publicacion.catalogo.izquierda .portada .titulo{ text-align:left; } .publicacion.catalogo.derecha .portada .titulo{ text-align:right; } .publicacion.catalogo.vertical .portada .titulo{ line-height:4.5vw; font-size:3vw; } .publicacion.catalogo .observacion .titulo{ position:relative; box-sizing:border-box; margin-bottom:15px; text-align:left; line-height:2vw; font-size:1.6vw; font-weight:500; text-shadow:rgb(0,0,0,0.1) 0px 0px 3px; z-index:3; } .publicacion.catalogo.izquierda .observacion .titulo{ } .publicacion.catalogo.derecha .observacion .titulo{ } .publicacion.catalogo.vertical .observacion .titulo{ line-height:7vw; font-size:5.9vw; } .publicacion.catalogo .observacion{ position:absolute; top:0px; bottom:15%; box-sizing:border-box; overflow:hidden; padding-top:25px; line-height:1.6vw; font-size:0.9vw; color:rgb(0,0,0,0.9); font-weight:400; letter-spacing:1px; text-align:left; cursor:pointer; } .publicacion.catalogo.izquierda .observacion{ left:60%; right:0px; padding-left:75px; padding-right:25px; text-align:left; } .publicacion.catalogo.derecha .observacion{ left:0px; right:60%; padding-left:25px; padding-right:75px; text-align:justify; } .publicacion.catalogo.vertical .observacion{ left:0px; right:0px; top:60%; bottom:10%; padding-left:25px; padding-right:25px; text-align:justify; line-height:5.9vw; font-size:4vw; padding-top:10px; } .publicacion.catalogo .observacion .sombra{ position:absolute; bottom:0px; left:0px; right:0px; height:65px; box-sizing:border-box; background-image:linear-gradient(to top, rgb(255,255,255,1), transparent); z-index:2; } .publicacion.catalogo .vermas{ position:absolute; bottom:0%; height:10%; box-sizing:border-box; line-height:1.5vw; font-size:1vw; color:rgb(0,0,0,1); font-weight:600; letter-spacing:1px; text-align:left; padding-left:75px; padding-right:75px; padding-top:15px; background-size:1.5vw; background-repeat:no-repeat; z-index:2; cursor:pointer; } .publicacion.catalogo.izquierda .vermas{ left:60%; right:0px; text-align:left; background-position:left+25px top+15px; background-image:url(png/nuevos/icons8-forward-50.png); } .publicacion.catalogo.derecha .vermas{ left:0px; right:60%; text-align:right; background-position:right+25px top+15px; background-image:url(png/nuevos/icons8-back-50.png); } .publicacion.catalogo.vertical .vermas{ left:0px; right:0px; bottom:0px; line-height:4vw; font-size:4vw; background-size:4vw; font-weight:800; } .publicacion.catalogo .categoria{ position:absolute; bottom:0px; box-sizing:border-box; overflow:hidden; line-height:20px; font-size:15px; color:var(--entorno_color); font-weight:300; letter-spacing:1px; white-space:nowrap; text-overflow:ellipsis; padding-left:25px; padding-right:25px; z-index:2; cursor:pointer; } .publicacion.catalogo.izquierda .categoria{ left:60%; right:0px; text-align:right; } .publicacion.catalogo.derecha .categoria{ left:0px; right:60%; text-align:left; } .publicacion.catalogo.vertical .categoria{ left:0px; right:0px; } .publicacion.catalogo .galeria{ position:absolute; top:0; bottom:0; width:20%; box-sizing:border-box; overflow:hidden; white-space:nowrap; z-index:2; } .publicacion.catalogo.izquierda .galeria{ left:40%; } .publicacion.catalogo.derecha .galeria{ right:40%; } .publicacion.catalogo.vertical .galeria{ top:auto; bottom:40%; left:0px; right:0px; height:20%; width:auto; } .publicacion.catalogo .galeria .marco{ position:relative; width:100%; height:33.33%; box-sizing:border-box; overflow:hidden; display:block; padding:10px; padding-top:0px; padding-bottom:10px; } .publicacion.catalogo.vertical .galeria .marco{ width:33.33%; height:100%; display:inline-block; padding:10px; } .publicacion.catalogo .galeria .marco .foto{ position:relative; width:100%; height:100%; box-sizing:border-box; overflow:hidden; background-color:rgb(0,0,0,0.1); background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:10px; cursor:pointer; } .publicacion.catalogo.vertical .galeria .marco .foto{} .publicacion.catalogo .ocultar{ position:absolute; top:0px; bottom:0px; width:1px; height:1px; opacity:0; overflow:hidden; } /* galería */ .publicacion.fotogaleria{ position:relative; height:90%; overflow:hidden; box-sizing:border-box; margin-bottom:120px; } .publicacion.fotogaleria.vertical{ height:60%; } .publicacion.fotogaleria .portada{ position:absolute; top:0px; bottom:20%; left:5%; right:5%; border-radius:25px 25px 10px 10px; box-sizing:border-box; overflow:hidden; background-color:rgb(0,0,0,0.1); background-position:top center; background-repeat:no-repeat; background-size:cover; cursor:pointer; } .publicacion.fotogaleria.izquierda .portada{ } .publicacion.fotogaleria.derecha .portada{ } .publicacion.fotogaleria.vertical .portada{ } .publicacion.fotogaleria .portada .tapa{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-image:linear-gradient(to bottom, rgb(0,0,0,0.75), rgb(0,0,0,0.5)); z-index:2; } .publicacion.fotogaleria .portada .titulo{ position:relative; box-sizing:border-box; padding:35px; line-height:4vw; font-size:4vw; font-weight:500; color:#FFF; text-shadow:rgb(0,0,0,0.1) 0px 0px 3px; z-index:3; } .publicacion.fotogaleria.izquierda .portada .titulo{ text-align:right; } .publicacion.fotogaleria.derecha .portada .titulo{ text-align:left; } .publicacion.fotogaleria.vertical .portada .titulo{ line-height:8vw; font-size:8vw; } .publicacion.fotogaleria .observacion{ display:none; } .publicacion.fotogaleria.izquierda .observacion{ } .publicacion.fotogaleria.derecha .observacion{ } .publicacion.fotogaleria.vertical .observacion{ } .publicacion.fotogaleria .observacion .sombra{ } .publicacion.fotogaleria .vermas{ position:absolute; bottom:0px; height:10%; box-sizing:border-box; line-height:1.5vw; font-size:1vw; color:rgb(0,0,0,1); font-weight:400; letter-spacing:1px; text-align:left; padding-left:75px; padding-right:75px; padding-top:15px; background-size:1.5vw; background-repeat:no-repeat; z-index:2; cursor:pointer; } .publicacion.fotogaleria.izquierda .vermas{ left:0px; right:0px; text-align:left; background-position:left+25px top+15px; background-image:url(png/nuevos/icons8-forward-50.png); } .publicacion.fotogaleria.derecha .vermas{ left:0px; right:60%; text-align:right; background-position:right+25px top+15px; background-image:url(png/nuevos/icons8-back-50.png); } .publicacion.fotogaleria.vertical .vermas{ left:0px; right:0px; bottom:0px; line-height:4vw; font-size:4vw; background-size:4vw; } .publicacion.fotogaleria .categoria{ display:none; } .publicacion.fotogaleria.izquierda .categoria{ } .publicacion.fotogaleria.derecha .categoria{ } .publicacion.fotogaleria.vertical .categoria{ } .publicacion.fotogaleria .galeria{ position:absolute; bottom:10%; left:0px; right:0px; height:35%; box-sizing:border-box; overflow:hidden; white-space:nowrap; z-index:2; } .publicacion.fotogaleria.izquierda .galeria{ text-align:right; } .publicacion.fotogaleria.derecha .galeria{ text-align:left; } .publicacion.fotogaleria.vertical .galeria{ } .publicacion.fotogaleria .galeria .marco{ position:relative; width:20%; height:100%; box-sizing:border-box; display:inline-block; padding:10px; } .publicacion.fotogaleria.vertical .galeria .marco{ width:33.33%; padding:0px; } .publicacion.fotogaleria .galeria .marco .foto{ position:relative; width:100%; height:100%; box-sizing:border-box; overflow:hidden; background-color:rgb(0,0,0,0.1); background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:10px; box-shadow:rgb(0,0,0,0.5) 0px 0px 10px; cursor:pointer; } .publicacion.fotogaleria.vertical .galeria .marco .foto{ box-shadow:rgb(0,0,0,0.25) 0px 0px 10px; } .publicacion.fotogaleria .contador{ position:absolute; bottom:45%; height:15px; border-radius:10px; background-color:rgb(0,0,0,0.5); box-sizing:border-box; line-height:15px; font-size:13px; color:rgb(255,255,255,1); font-weight:900; letter-spacing:1px; text-align:left; padding:0px 25px; margin: auto; z-index:2; cursor:pointer; } .publicacion.fotogaleria.izquierda .contador{ left:15%; right:auto;} .publicacion.fotogaleria.derecha .contador{ right:15%; left:auto; } .publicacion.fotogaleria .ocultar{ position:absolute; top:0px; bottom:0px; width:1px; height:1px; opacity:0; overflow:hidden; } /* mini */ .publicacion.mini{ position:relative; display:inline-block; width:175px; height:175px; overflow:hidden; box-sizing:border-box; pointer-events:nonex; font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; } .publicacion.mini .borde{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; box-sizing:border-box; border-radius:25px; overflow:hidden; z-index: -1; background-color: rgb(0,0,0,0.05); margin: 5px; pointer-events: none; } .publicacion.mini .ico-video{ position:absolute; top: 0px; left: 0px; width: 30px; height: 30px; box-sizing:border-box; border-radius:20px; overflow:hidden; z-index: 3; background-image: url("png/nuevos/icons8-YouTube-24b.png"); background-position: center center; background-repeat: no-repeat; background-size: auto 80%; background-color: var(--entorno_color); margin: 15px; pointer-events: none; opacity: 0.9; } .publicacion.mini .ico-file{ position:absolute; top: 0px; right: 0px; width: 30px; height: 30px; box-sizing:border-box; border-radius:20px; overflow:hidden; z-index: 3; background-image: url("png/nuevos/icons8-download-96(1).png"); background-position: center center; background-repeat: no-repeat; background-size: auto 80%; background-color: var(--entorno_color); margin: 15px; pointer-events: none; opacity: 0.9; } .publicacion.mini .portada{ position:absolute; top:0px; bottom:40px; left:0px; right:0px; box-sizing:border-box; border-radius:25px; margin: 10px; overflow:hidden; z-index: 1; background-color: white; background-position:center center; background-repeat:no-repeat; background-size: contain; cursor:pointer; } .publicacion.mini .portada .tapa{ display:none;} .publicacion.mini .portada .titulo{ display:none; } .publicacion.mini .observacion{ position:absolute; left:0px; right:0px; top: auto; bottom: 0px; height:24px; margin: 0px 5px 5px 5px; z-index: 2; line-height: 12px; font-size: 12px; color: rgb(0,0,0,0.8); font-weight: 800; letter-spacing: 0.5px; white-space:wrap; text-overflow:ellipsis; overflow:hidden; cursor:pointer; padding: 10px; display:nonex; } .publicacion.mini .observacion .sombra{ display:nonex; } .publicacion.mini .vermas{ display:none; } .publicacion.mini .categoria{ position:absolute; top:10px; left:45px; right:45px; box-sizing:border-box; overflow:hidden; line-height:10px; font-size:10px; color:rgb(0,0,0,0.5); font-weight:300; letter-spacing:1px; white-space:nowrap; text-overflow:ellipsis; z-index:2; cursor:pointer; display:none; } .publicacion.mini .galeria{ display:none; } .publicacion.mini .galeria .marco{ display:none; } .publicacion.mini .galeria .marco .foto{ display:none; } .publicacion.mini .ocultar{ position:absolute; top:0px; bottom:0px; width:1px; height:1px; opacity:0; overflow:hidden; } /* Video */ .publicacion.video{ position:relative; display:inline-block; width:255px; height: 450px; overflow:hidden; box-sizing:border-box; margin: 10px; border-radius: 25px; box-shadow: rgb(0,0,0,0.3) 0px 2px 10px; } .publicacion.video .video{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; box-sizing:border-box; border-radius:25px; overflow:hidden; background-color:rgb(0,0,0,0.8); border:rgb(255,255,255,0.1) 1px solid; } .publicacion.mini .portada .tapa{ display:none;} .publicacion.mini .portada .titulo{ display:none; } .publicacion.video .nombre{ position: absolute; top: 0px; left: 0px; right: 0px; height: 50px; pointer-events: none; padding: 10px; background-image:linear-gradient(to bottom, rgb(0,0,0,0.8), transparent); font-family: Montserrat; line-height: 50px; font-size: 13px; font-weight: 700; color: white; text-align: center; letter-spacing: 0px; border-radius: 25px 25px 0px 25px; overflow:hidden; text-shadow: rgb(0,0,0,0.5) 0px 2px 5px; white-space:nowrap; text-overflow:ellipsis; } .publicacion.video .nombre .categoria{ position: absolute; top: 10px; left: 15px; right: 15px; height: 15px; overflow:hidden; font-family: Montserrat; line-height: 15px; font-size: 13px; font-weight: 500; color: var(--entorno_color); text-align: center; letter-spacing: 0px; } .publicacion.mini .ocultar{ position:absolute; top:0px; bottom:0px; width:1px; height:1px; opacity:0; overflow:hidden; } /****************** Listado de Productos ****************/ .listado{ position:relative; } .listado .regresar{ position:relative; width:fit-content; height:50px; overflow:hidden; box-sizing:border-box; margin: 10px auto; font-family:'Roboto', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; line-height:50px; font-size:15px; font-weight:700; text-align:center; padding: 0px 25px 0px 50px; background-color:rgb(0,0,0,0); border-radius:20px; cursor:pointer; background-image:url(png/nuevos/icons8-back-50.png), linear-gradient(to top, rgb(0,0,0,0), rgb(0,0,0,0), rgb(0,0,0,0.1)); background-size:15px, auto; background-repeat:no-repeat; background-position:left+15px center, center center; } .fondoNegro .listado .regresar{ background-color:var(--entorno_color_botones); } .listado .contenedor{ position: relative; width: 100%; height: auto; overflow: hidden; box-sizing: border-box; /*padding: 10px 0px 75px 0px;*/ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; } .activarlateral .listado .contenedor{ justify-content: flex-start; } #dataLista .espaciofinal{ position: relative; width: 100%; flex-basis: 100%; flex-grow: 1; height: 100px; background-color: transparent; } .minicontenedor{ position:relative; width:100%; height:auto; overflow:auto; white-space:nowrap; box-sizing:border-box; padding-top:10px; text-align:center; } .listado .contenedor .producto{ position:relative; display:inline-block; height:auto; min-height:350px; overflow:hidden; box-sizing:border-box; padding-bottom:50px; font-family:'Roboto', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; background-color:rgb(255,255,255,1); cursor:default; border-radius:25px; } .listado .contenedor .producto .abrirProducto{ cursor:pointer; } .listado .contenedor .producto.mini{ min-height:0px; margin:10px; margin-bottom:25px; float:none; border-bottom:rgb(0,0,0,0.1) 0px solid; border-radius:15px; } .listado .contenedor .producto .borde{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; height:100%; box-sizing:border-box; z-index: 2; border:rgb(0,0,0,0) 2px solid; border-radius:25px; pointer-events:none; } .listado .contenedor .producto.focus .borde{ border:var(--entorno_color) 2px solid; } .listado .contenedor .producto.focus{ box-shadow: rgb(0,0,0,0.3) 0px 2px 10px; } .listado .contenedor .producto .fotoContenedor{ position:relative; height:250px; border-radius: 25px; overflow:hidden; box-sizing:border-box; background-color:rgb(0,0,0,0); display:none; cursor:pointer; } .listado .contenedor .producto.mini .fotoContenedor{ height:120px; width:25%; border-radius:25px; float:left; } .listado .contenedor .producto.minimizar .fotoContenedor{ height:150px; width:40%; float:left; margin-left: 10px; margin-right: 10px; } .listado .contenedor .producto.imagen .fotoContenedor{ display:block; } .listado .contenedor .producto .fotoContenedor .referencia{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; width:1px; height:1px; overflow:hidden; z-index:-1; } .listado .contenedor .producto .fotoContenedor .foto{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; width:auto; background-position:center center; background-size:contain; background-repeat:no-repeat; background-color:#FFF; } .listado .contenedor .producto.noimagen .fotoContenedor .foto{ background-size:50%; } .listado .contenedor .producto .fotoContenedor .sinfoto{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgb(255,255,255,0.5); } .listado .contenedor .producto .fotoContenedor .foto .agotado{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-color:rgb(0,0,0,0.3); background-image:url(img/agotado.png); background-position:center center; background-size:cover; background-repeat:no-repeat; display:none; } .listado .contenedor .producto .fotoContenedor .foto .agregado{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; border-radius: 10px; background-color:var(--entorno_color_botones); background-image:url('png/nuevos/icons8-buyx-100(1).png'); background-position:top+15px right+15px; background-size:auto 50px; background-repeat:no-repeat; z-index:2; display:none; opacity:0.3; } .listado .contenedor .producto.agregado .fotoContenedor .foto .agregado{ display:block; } .listado .contenedor .producto.agregado.mini .fotoContenedor .foto .agregado{ display:none; } .listado .contenedor .producto .descripcion{ position:relative; height:auto; overflow:hidden; box-sizing:border-box; padding:0px; line-height:22px; font-size:22px; font-weight:500; overflow-wrap:break-word; } .listado .contenedor .producto.mini .descripcion { float:left; width:100%; box-sizing:border-box; } .listado .contenedor .producto.imagen.mini .descripcion { float:left; width:75%; box-sizing:border-box; } .listado .contenedor .producto .descripcion .columna{ position:relative; float:left; width:100%; height:auto; overflow:hidden; box-sizing:border-box; padding:10px 15px; } .listado .contenedor .producto.mini .descripcion .columna{ width:100%; padding:5px 10px; line-height:16px; font-size:15px; } .listado .contenedor .producto.imagen .descripcion{ line-height:20px; font-size:20px; font-weight:600; letter-spacing: 0px; } .listado .contenedor .producto .descripcion .division{ position:relative; color:var(--entorno_color_botones); font-size:13px; margin-bottom:5px; letter-spacing:0.5px; white-space:nowrap; text-overflow:ellipsis; } .listado .contenedor .producto .descripcion .nombre{ max-height:88px; overflow:hidden; cursor:pointer; } .listado .contenedor .producto.imagen .descripcion .nombre{ max-height:60px; overflow:hidden; } .listado .contenedor .producto.imagen.mini .descripcion .nombre{ height:auto; } .listado .contenedor .producto .descripcion .observaciones{ font-size:12px; color:rgb(0,0,0,0.8); line-height:12px; min-height:12px; max-height:12px; letter-spacing:0px; font-weight:normal; overflow:hidden; margin-top:5px; } .listado .contenedor .producto.mini .descripcion .observaciones{ display:none; } .listado .contenedor .producto .descripcion .precio{ position:relative; color:var(--entorno_color_botones); font-weight:500; margin-top:3px; letter-spacing:0px; text-align:right; } .listado .contenedor .producto .descripcion .precio .dato{ float:left; } .listado .contenedor .producto .descripcion .precio .dato.pvp{ font-size:25px; float:right; font-weight:600; } .listado .contenedor .producto .descripcion .precio .dato.pvp.min{ font-size:15px; float:right; } .listado .contenedor .producto.minimizar .descripcion .precio .dato.pvp{ font-size:18px; font-weight: 600; } .listado .contenedor .producto .descripcion .precio .precioAnterior{ float:right; position:relative; box-sizing:border-box; padding-right:10px; color:rgb(0,0,0,0.6); font-size:11px; font-weight:normal; text-decoration:line-through rgb(0,0,0,0.2); letter-spacing:0px; } .listado .contenedor .producto .descripcion .precio .dato.oferta{ font-size:20px; font-weight:bold; } .listado .contenedor .producto .descripcion .precio .dato.monto{ position:relative; width:100%; box-sizing:border-box; padding:5px; padding-left:10px; padding-right:10px; background-color:var(--entorno_color_botones); border-radius:15px; color:#FFF; line-height:15px; font-size:15px; font-weight:600; } .listado .contenedor .producto .descripcion .precio .oferta{ color:var(--entorno_color); height:12px; font-size:12px; line-height:12px; font-weight:500; letter-spacing:-0.5px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-bottom:4px; } .listado .contenedor .producto .descripcion .precio .dato.monto .detalle{ position:relative; float:left; height:15px; line-height:15px; color:rgb(255,255,255,0.7); font-size:15px; font-weight:400; box-sizing:border-box; padding-right:7.5px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .listado .contenedor .producto .descripcion .precio .dato.monto .detalle2{ position:relative; float:right; height:15px; box-sizing:content-box; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .listado .contenedor .producto .descripcion .presentacion{ position:relative; margin-top:0px; font-size:13px; line-height:25px; text-align:left; font-weight:bold; letter-spacing:0px; color:var(--entorno_color_botones); } .listado .contenedor .producto .descripcion .departamentos{ position:relative; float:left; height:auto; overflow: hidden; width:50%; box-sizing:border-box; } .listado .contenedor .producto .descripcion .departamentos .datoD{ position:relative; height:10px; line-height:10px; box-sizing:border-box; color:rgb(0,0,0,0.8); font-size:10px; font-weight:normal; letter-spacing:0px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .listado .contenedor .producto .megusta{ position:absolute; bottom:5px; left:5px; width:40px; height:40px; background-image:url(png/nuevos/icons8-heart-outline-90.png); background-image:url(png/nuevos/icons8-whatsapp-96.png); background-position:center center; background-size:auto 50%; background-repeat:no-repeat; opacity:0.3; cursor:pointer; display:none; } .listado .contenedor .producto.mini .megusta{ display:none; } .listado .contenedor .producto .eliminar{ position:absolute; bottom:60px; left: 5px; right:5px; width:40px; height:40px; margin: auto; box-sizing:border-box; border-radius: 50%; box-shadow: rgb(0,0,0,0.5) 1px 1px 7.5px; background-image:url(png/nuevos/icons8-trash.png); background-color: #FFF; background-position:center center; background-size:auto 60%; background-repeat:no-repeat; opacity:1; cursor:pointer; display:none; z-index: 2; } .listado .contenedor .producto.mini .eliminar{ bottom: 5px; margin-right: 0px; box-shadow: rgb(0,0,0,0.2) 1px 1px 5px; } .listado .contenedor .producto.minimizar .eliminar{ left: 40%; } .listado .contenedor .producto .agregar{ position:absolute; bottom:5px; left:35px; right:35px; width:150px; height:40px; margin:auto; box-sizing:border-box; border-radius:25px; background-color:var(--entorno_color_botones); background-image:none, linear-gradient(to bottom right, rgb(255,255,255,0.2), transparent, transparent, rgb(0,0,0,0.2)); background-position:left+12px center, left center; background-size:20px, cover; background-repeat:no-repeat; padding-left:0px; padding-right:0px; font-size:18px; font-weight:600; color:#FFF; line-height:40px; text-align:center; opacity:1; cursor:pointer; } .listado .contenedor .producto.nostock .agregar{ background-color:rgb(0,0,0,0.5); pointer-events: none; opacity: 0.2; } .listado .contenedor .producto .agregar.activo{ position:absolute; left:5px; bottom:5px; right:5px; width:auto; height:40px; box-sizing:border-box; border-radius: 0px 0px 20px 20px; background-color:rgb(0,0,0,0.1); background-image:url('png/nuevos/icons8-buying-100.png'); background-position:left+5px center; background-size:auto 75%; line-height:40px; font-size:15px; font-weight:700; color:#000; text-align:center; padding-left:50px; padding-right:5px; cursor: default; } .listado .contenedor .producto.mini .agregar.activo{ left: 5px; right: 55px; background-position:left+15px center; padding-left:60px; padding-right:15px; border-radius: 20px; } .listado .contenedor .producto.minimizar .agregar.activo{ left: 0px; right: 0px; background-position:left+15px center; padding-left:60px; padding-right:15px; border-radius: 20px; } .listado .contenedor .producto .agregar.activo.consulta{ left: 35px; right: 35px; bottom: 5px; opacity: 0.25; background-image: url("png/nuevos/icons8-phone-message-50.png"); background-image: none; background-size: auto 90%; background-position:left+15px center; background-color: rgb(0,0,0,0.1); font-size: 15px; color: rgb(0,0,0,1); font-weight: 800; padding: 0px 25px; border-radius: 25px; pointer-events: auto; cursor: pointer; } .listado .contenedor .producto.focus .agregar.activo.consulta{ left: 35px; right: 35px; bottom: 8px; opacity: 1; line-height:37px; background-image: url("png/nuevos/icons8-phone-message-50(1).png"); background-image: none; background-size: auto 90%; background-position:left+15px center; background-color: var(--entorno_color); color: white; border: white 1px solid; text-shadow: rgb(0,0,0,0.3) 0px 1px 3px; pointer-events: auto; cursor: pointer; box-shadow: rgb(0,0,0,0.2) 0px 3px 6px; } .listado .contenedor .producto .agregar .dat{ position:relative; float: left; width: 50%; box-sizing: border-box; display: none; } .listado .contenedor .producto .agregar.activo .dat{ display: block; } .listado .contenedor .producto .agregar .dat.umxt{ font-weight: 400; font-size: 13px; padding-left: 5px; padding-right: 20px; background-image:url('png/nuevos/icons8-expand-arrow-50.png'); background-position: right+5px center; background-size:10px; background-repeat: no-repeat; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .listado .contenedor .producto .agregar .dat .bajar{ position:absolute; top:0px; bottom:0px; left:0px; height: 25px; width: 25px; box-sizing: border-box; margin: auto; background-image:url(' png/nuevos/icons8-subtractb-100.png'); background-repeat:no-repeat; background-size:auto 75%; background-position:center center; cursor: pointer; border-radius: 50%; box-shadow: rgb(0,0,0,0.25) 0px 0px 2px; background-color: rgb(255,255,255,0.5); } .listado .contenedor .producto .agregar .dat .subir{ position:absolute; top:0px; bottom:0px; right:0px; height: 25px; width: 25px; box-sizing: border-box; margin: auto; background-image:url(' png/nuevos/icons8-plusb-math-100(2).png'); background-repeat:no-repeat; background-size:auto 75%; background-position:center center; cursor: pointer; border-radius: 50%; box-shadow: rgb(0,0,0,0.25) 0px 0px 2px; background-color: rgb(255,255,255,0.5); } .listado .contenedor .producto .agregar.activo .efecto{ position:absolute; top:0px; bottom:0px; left:55px; right:10px; display: none; background-image:url(png/nuevos/icons8-sort-90.png), url(png/nuevos/icons8-edit-96.png); background-repeat:no-repeat; background-size:20px; background-position:left center, right center; opacity:1; } .listado .contenedor .producto .agregar .txt{ display:none; } .listado .contenedor .producto .agregar.activo .txt{ display:block; } .listado .contenedor .producto .agregar .textoboton{ display:block; } .listado .contenedor .producto .agregar.activo .textoboton{ display:none; } .listado .contenedor .producto .agregar.activo.consulta .textoboton{ display:block; } .listado .contenedor .micategoria{ position:relative; float:left; box-sizing:border-box; width:100%; background-color:rgb(0,0,0,0); line-height:25px; font-size:20px; font-weight:normal; color:rgb(0,0,0,0.5); text-align:center; letter-spacing:1px; padding:25px; margin-bottom:10px; border-radius:6px; border:#F00 1px solid; } .listado .contenedor .micategoria.sub{ color:rgb(0,0,0,0.8); padding:35px; } .listado .contenedor .micategoria .icono{ position:relative; height:45px; width:45px; margin:auto; margin-bottom:5px; background-image:url(png/nuevos/icons8-click-&-collect-100.png); background-size:contain; background-repeat:no-repeat; background-position:center center; opacity:0.5; border:#F00 1px solid; } .textoOferta{ animation:blinkingText 1.2s infinite; } @keyframes blinkingText{ 50%{ color:transparent; } 100%{ color:var(--entorno_color_botones); } 100%{ color:var(--entorno_color_botones); } 50%{ color:var(--entorno_color); } } /************ Presentación de Página Principal *************/ .presentacion{ position:relative; height:auto; overflow:hidden; box-sizing:border-box; margin-bottom: 75px; /*font-family: 'Dosis', sans-serif;*/ } .presentacion.movil .contenedor{ position:relative; height:auto; box-sizing:border-box; overflow:hidden; text-align:center; display: flex; flex-direction: row; } .presentacion .contenedor .post{ position:relative; float:left; box-sizing:border-box; width:500px; height:500px; border-radius:0px; margin:0px; border:rgb(0,0,0,0.1) 0px solid; z-index:2; cursor:pointer; } .presentacion .titulo{ position:relative; margin:auto; box-sizing:border-box; line-height:45px; font-size:35px; color:var(--entorno_color); font-weight:600; letter-spacing:-1px; text-align:center; padding:25px; z-index:3; cursor:default; } .presentacion .separador{ position:relative; max-width:75%; height:35px; box-sizing:border-box; margin:auto; margin-bottom:10px; background-image:url(png/nuevos/icons8-expand-arrow-50.png); background-position:center center; background-repeat:no-repeat; background-size:auto 100%; } .botonLinea{ line-height:35px; border-radius:35px; border:rgb(0,0,0,0.1) 1px solid; box-sizing:border-box; font-size:15px; font-weight:bold; color:rgb(0,0,0,0.8); text-align:center; background-image:url(png/nuevos/icons8-vanx-100.png); background-size:30px; background-repeat:no-repeat; background-position:left+15px center; padding-left:55px; margin:15px; margin-top:5px; margin-bottom:10px; cursor:pointer; } .micategoria{ position:relative; box-sizing:border-box; background-color:rgb(0,0,0,0); line-height:35px; font-size:35px; font-weight:normal; color:rgb(0,0,0,0.7); text-align:center; letter-spacing:-1px; padding-top:45px; padding-bottom:65px; margin-top:25px; border-radius:6px; } .micategoria .icono{ position:relative; height:64px; width:64px; margin:auto; margin-bottom:5px; background-size:contain; background-repeat:no-repeat; background-position:center center; opacity:1; } .post.producto{ padding-top:250px; padding-bottom:0px; background-color:#FFF; overflow:hidden; white-space:normal; cursor: pointer; box-sizing: border-box; font-family: 'Roboto', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; margin: 0px 10px; } .post.producto.promo { padding-top: 0px; height: 420px; margin: 0px 10px; } .post.producto.mini { padding-top: 0px; height: 420px; margin: 0px 10px; } .post.producto.video { padding-top: 0px; height: 420px; margin: 0px 10px; background-color: rgb(0,0,0,0.8); } .carrusel.mini .post.producto.promo{ padding-top: 0px; height: 200px; margin: 0px 10px; pointer-events: nonex; } .carrusel.mini .post.producto.mini{ border: rgb(0,0,0,0.1) 1px solid; border: hidden; } .post.producto.promo .ico-video{ position:absolute; top: 0px; right: 0px; width: 30px; height: 30px; box-sizing:border-box; border-radius:20px; overflow:hidden; z-index: 3; background-image: url("png/nuevos/icons8-YouTube-24b.png"); background-position: center center; background-repeat: no-repeat; background-size: auto 70%; background-color: var(--entorno_color); margin: 5px; pointer-events: none; opacity: 0.99; box-shadow: inset rgb(0,0,0,0.6) 0px 0px 3px; } .post.producto.promo .ico-file{ position:absolute; top: 0px; right: 0px; width: 30px; height: 30px; box-sizing:border-box; border-radius:20px; overflow:hidden; z-index: 3; background-image: url("png/nuevos/icons8-download-96(1).png"); background-position: center center; background-repeat: no-repeat; background-size: auto 70%; background-color: var(--entorno_color); margin: 5px; pointer-events: none; opacity: 0.99; box-shadow: inset rgb(0,0,0,0.6) 0px 0px 3px; } .post.producto .fotoContenedor{ position:absolute; top:0px; left:0px; right:0px; height:250px; overflow:hidden; border-radius:0px; } .post.producto.promo .fotoContenedor{ height:auto; bottom: 0px; } .post.producto.mini .fotoContenedor{ height:auto; bottom: 0px; } .post.producto.video .fotoContenedor{ height:auto; bottom: 0px; } .producto .fotoContenedor .fotoEfecto{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; z-index:3; display:none; } .producto .fotoContenedor .fotoEfecto .icono{ position:absolute; top:auto; bottom:5px; left:5px; right:auto; width:20%; height:20%; margin:auto; background-image:url('png/nuevos/icons8-search-100-sombra.png'); background-repeat:no-repeat; background-size:contain; background-position:center center; z-index:2; } .producto.promo .fotoContenedor .fotoEfecto .icono { bottom:auto; top:5px; width:20%; height:20%; } .producto.mini .fotoContenedor .fotoEfecto .icono { bottom:auto; top:0px; width:30%; height:15%; } .producto .fotoContenedor .fotoEfecto .color{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-image:linear-gradient(to bottom, transparent, var(--entorno_color_botones)); opacity:0.3; } .producto.promo .fotoContenedor .fotoEfecto .color, .producto.mini .fotoContenedor .fotoEfecto .color { background-image:linear-gradient(to top, transparent, var(--entorno_color)); } .mini .producto.mini .fotoContenedor .fotoEfecto .color { background-image:linear-gradient(to top, transparent, var(--entorno_color_botones)); } .post.producto .fotoContenedor .foto{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin:auto; box-sizing:border-box; background-image:url(png/nuevos/icons8-package-100.png); background-position:center center; background-repeat:no-repeat; background-size:50%; opacity:0.1; } .post.producto .fotoContenedor .foto.img{ opacity:1; background-size:contain; } .post.producto.promo .fotoContenedor .foto.img{ opacity:1; background-size:cover; } .post.producto.mini .fotoContenedor .foto.img{ opacity:1; background-size:contain; margin: 0px; } .post.producto.video .fotoContenedor .foto.img{ opacity:1; background-image:none; } .carrusel.mini .post.producto.promo .fotoContenedor .foto.img{ opacity:1; background-size:contain; bottom:25px; } .post.producto .fotoContenedor .foto.nooriginal{ margin: 33px; opacity: 0.5; } .post.producto .fotoContenedor .foto:hover img { -webkit-transform:scale(1.25); -moz-transform:scale(1.25); -ms-transform:scale(1.25); -o-transform:scale(1.25); transform:scale(1.25); } .post.producto .fotoContenedor .foto .fotoagotado{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-color:rgb(0,0,0,0.5); background-image:url(img/agotado.png); background-position:center center; background-size:cover; background-repeat:no-repeat; display:none; } .post.producto .presentacion{ position:relative; float:right; height:20px; width: 50%; line-height:20px; box-sizing:border-box; padding-left: 15px; padding-right: 15px; font-size:11px; color:rgb(0,0,0,1); font-weight:600; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .post.producto .precio{ position:relative; float: right; height:20px; width: 50%; line-height:20px; box-sizing:border-box; padding-left: 15px; padding-right: 15px; font-size:13px; color:#000; font-weight:800; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .post.producto .precio.min{ font-size:12px; } .post.producto .precio.agotado{ font-size:15px; color:rgb(0,0,0,0.5); font-weight:500; text-align:center; letter-spacing:-1px; } .post.producto .nombre{ position:relative; height:30px; line-height:30px; box-sizing:border-box; padding: 0px 15px; font-size:14px; color:rgb(0,0,0,1); font-weight:600; text-align:center; letter-spacing: 0px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .post.producto.promo .nombre{ position: absolute; bottom: 0px; left: 0px; right: 0px; width: 100%; padding: 20px 5px 5px 5px; height: fit-content; box-sizing: border-box; pointer-events: none; background-image:linear-gradient(to bottom, transparent, var(--entorno_color_botones)); font-family: Montserrat; font-size: 11px; font-weight: 600; color: white; text-shadow: rgb(0,0,0,0.6) 0px 1px 6px; text-align: center; } .paramovil .post.producto.promo .nombre{ font-size: 10px; font-weight: 500; } .post.producto.promo .nombre .ajustar{ position: relative; height: 30px; box-sizing:border-box; pointer-events: none; text-align: right; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; padding: 0px; } .post.producto.video .nombre{ position: absolute; top: 0px; left: 0px; right: 0px; height: 50px; pointer-events: none; box-sizing: content-box; z-index: 2; background-image:linear-gradient(to bottom, rgb(0,0,0,0.8), transparent); font-family: Montserrat; line-height: 50px; font-size: 13px; font-weight: 700; color: white; text-align: center; letter-spacing: 0px; border-radius: 25px 25px 0px 25px; text-shadow: rgb(0,0,0,0.5) 0px 2px 5px; overflow:hidden; padding-top: 10px; padding-bottom: 10px; } .carrusel.mini .post.producto.promo .nombre{ position: absolute; top: auto; bottom: 0px; left: 0px; right: 0px; height: auto; pointer-events: none; background-image: none; padding: 0px; font-family: Montserrat; font-size: 13px; font-weight: 600; color: var(--entorno_color); text-shadow: none; text-align: center; } .post.producto.mini .nombre{ position: absolute; bottom: 0px; left: 0px; right: 0px; height: 50%; pointer-events: none; padding: 20px; padding-top: 130px; background-image:linear-gradient(to bottom, transparent, var(--entorno_color)); font-family: Montserrat; font-size: 15px; font-weight: 700; color: white; text-shadow: rgb(0,0,0,0.33) 0px 2px 5px; text-align: right; } .carrusel.mini .post.producto.mini .nombre{ position: absolute; top: auto; bottom: 0px; left: 0px; right: 0px; height: auto; pointer-events: none; background-image: none; padding: 0px; text-shadow: none; font-family: 'Roboto', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-size: 13px; font-weight: 600; color: rgb(0,0,0,0.5); text-align: center; display: none; } .post.producto .marca{ position:relative; float: left; height:20px; width: 100%; line-height:20px; box-sizing:border-box; padding-left: 15px; padding-right: 15px; font-size:11px; color:var(--entorno_color); font-weight:600; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .post.producto.promo .marca{ display: none; } .post.producto.video .marca{ display: none; } .post.producto.mini .marca{ display: none; } .post.producto .categoria{ position:relative; float: left; height:20px; width: 100%; line-height:20px; box-sizing:border-box; padding-left: 15px; padding-right: 15px; font-size:10px; color:rgb(0,0,0,0.7); font-weight:500; text-align:center; letter-spacing: 0px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .post.producto.promo .categoria{ display: none; } .post.producto.mini .categoria{ display: none; } .post.producto.promo .nombre .categoria{ display: none; } .post.producto.mini .nombre .categoria{ float: none; display: block; text-align: right; font-size: 13px; font-weight: 500; padding: 0px; color: rgb(255,255,255,0.8); } .post.producto.video .categoria{ display: none; } .post.producto.video .nombre .categoria{ position: absolute; top: 10px; left: 15px; right: 15px; height: 15px; overflow:hidden; display: block; padding: 0px; width: auto; font-family: Montserrat; line-height: 15px; font-size: 13px; font-weight: 500; color: var(--entorno_color); text-align: center; letter-spacing: 0px; } .carrusel.mini .post.producto.promo .nombre .categoria{ display: none; } .post.producto .subcategoria{ position:relative; float: left; height:20px; width: 50%; line-height:20px; box-sizing:border-box; padding-left: 15px; padding-right: 15px; font-size:11px; color:rgb(0,0,0,0.5); font-weight:600; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display: none; } .post.producto .agregar{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; border-radius:15px; background-image:linear-gradient(to top, var(--entorno_color) 20%, transparent); padding-top:200px; display:none; z-index:2; opacity:1; cursor: default; } .post.producto .agregar.activo{ display:block; } .post.producto .agregar .icon{ position:absolute; top:0px; left:0px; right:0px; height:190px; background-image:url('png/nuevos/icons8-buyx-100.png'); background-size:40px; background-position:top+10px right+10px; background-repeat:no-repeat; cursor: pointer; } .post.producto .agregar .cantidad{ position:relative; height: auto; box-sizing:border-box; line-height:18px; font-size:14px; font-weight:bold; color:#FFF; text-align:center; text-shadow: rgb(0,0,0,0.25) 1px 1px 2px; } .post.producto .agregar .texto{ position:relative; box-sizing:border-box; line-height:30px; font-size:10px; font-weight:400; letter-spacing:1px; color:rgb(255,255,255,0.75); text-align:center; cursor: pointer; } .post.producto .agregar .contadores{ position: absolute; top: 2px; bottom: 0px; width: 30px; height: 30px; border: rgb(255,255,255,1) 1px solid; border-radius: 50px; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; background-size: auto 75%; cursor: pointer; z-index: 3; } .post.producto .agregar .contadores.bajar{ left: 10px; background-image: url('png/nuevos/icons8-subtractb-100(1).png'); } .post.producto .agregar .contadores.subir{ right: 10px; background-image: url('png/nuevos/icons8-plus-math-100(1).png'); } .post.circulo{ padding-top:120px; padding-bottom:20px; background-color:transparent; box-shadow:none; overflow:hidden; white-space:normal; } .post.circulo .foto{ position:absolute; top:0px; bottom:25px; /*height:110px;*/ left:0px; right:0px; box-sizing:border-box; border-radius:10px; margin:10px; margin-top:10px; background-color:transparent; background-image:url(png/nuevos/icons8-folder-96.png); background-position:center center; background-repeat:no-repeat; background-size:contain; /*box-shadow:rgb(0,0,0,0.1) 0px 0px 3px;*/ opacity:1; } .post.circulo .nombre{ position:relative; margin:5px; margin-top:10px; box-sizing:border-box; line-height:20px; font-size:18px; color:rgb(0,0,0,0.8); font-weight:bold; text-align:center; overflow-wrap:break-word; display:none; } .post.banner{ padding:0px; background-color:transparent; box-shadow:none; overflow:hidden; white-space:normal; } .post.banner .foto{ position:absolute; top:10px; left:10px; right:10px; bottom:10px; box-sizing:border-box; background-color:rgb(255,255,255,1); background-image:url(png/nuevos/icons8-folder-96.png); background-position:center center; background-repeat:no-repeat; background-size:contain; box-shadow:rgb(0,0,0,0.1) 0px 0px 10px; border-radius:5px; opacity:1; } .post.banner .nombre{ position:relative; margin:5px; box-sizing:border-box; line-height:15px; height:15px; overflow:hidden; font-size:15px; color:var(--entorno_color_botones); text-shadow:rgb(0,0,0,0.1) 0px 0px 10px; font-weight:bold; text-align:center; } .post.categoria{ position: relative; width: 180px; height: auto; aspect-ratio: 1/1; box-sizing: border-box; cursor: pointer; z-index: 2; font-family: "Roboto", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; margin: 0px; } .horizontal .post.categoria{ width: 250px; flex-basis: 300px; aspect-ratio: 1/1; } .paramovil .extendida .post.categoria{ flex: 0 1 50%; } @media screen and (min-width: 450px) { .horizontal .extendida .post.categoria{ flex: 0 1 calc(33%); } } @media screen and (min-width: 750px) { .horizontal .extendida .post.categoria{ flex: 0 1 calc(33%); } } @media screen and (min-width: 1000px) { .horizontal .extendida .post.categoria{ flex: 0 1 calc(25%); } } @media screen and (min-width: 1250px) { .horizontal .extendida .post.categoria{ flex: 0 1 calc(20%); } } @media screen and (min-width: 1500px) { .horizontal .extendida .post.categoria{ flex: 0 1 calc(14.20%); } } .post.categoria .foto{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; box-sizing: border-box; z-index: 2; margin: 15px; background-position: top center; background-repeat: no-repeat; background-size: cover; background-color: white; border-radius: 10px; box-shadow: rgb(0,0,0,0.2) 0px 1px 5px; transition: 0.5s; } .paramovil .post.categoria .foto{ margin: 10px; } .post.categoria.sinsombra .foto{ box-shadow: rgb(0,0,0,0) 0px 0px 0px; } .post.categoria:hover .foto{ bottom: 60px; box-shadow: rgb(0,0,0,0.3) 0px 3px 10px; } .post.categoria .foto .foto-pantalla{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; opacity: 0.25; background-image: linear-gradient(to bottom, var(--entorno_color), var(--entorno_color_botones)); box-shadow: inset var(--entorno_color_botones) 0px -25px 25px; transition: 0.5s; } .post.categoria:hover .foto .foto-pantalla{ opacity: 0; } .post.categoria .mm{ position: absolute; height: 70px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; box-sizing: border-box; z-index: 1; padding: 5px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .post.categoria .mm .bb{ position: relative; height: 100%; width: 50%; flex-grow: 1; overflow: hidden; box-sizing: border-box; opacity: 0.5; cursor: pointer; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center; border-radius: 20px; } .post.categoria .mm .bb:hover{ opacity: 1; background-color: rgb(0,0,0,0.03); } .post.categoria .mm .bb .ico{ position: relative; height: 20px; width: 20px; background-position: center center; background-repeat: no-repeat; background-size: 16px; } .post.categoria .mm .bb .tex{ position: relative; height: fit-content; max-height: 22px; padding: 0px 5px; overflow: hidden; line-height: 11px; font-size: 11px; font-weight: 600; text-align: center; letter-spacing: 0px; } .post.categoria .nombre{ position:absolute; bottom:0px; left:0px; right:0px; height:75px; box-sizing:border-box; padding: 10px; line-height:15px; font-size:13px; letter-spacing:0px; color:rgb(0,0,0,0.8); font-weight:700; text-align:center; } .fondoNegro .post.categoria .nombre{ color:var(--entorno_color); } .post.categoria .subtitulo{ line-height:15px; font-size:13px; color:var(--entorno_color); font-weight:600; letter-spacing:0px; white-space:nowrap; opacity:1; } /*** Publicación MIN ***/ .post.publica{ padding-top:0px; padding-bottom:0px; background-color:#FFF; overflow:hidden; white-space:normal; margin-left:7.5px; margin-right:7.5px; } .fondoNegro .post.publica{background-color:#000;} .fondoNegro .post.publica.mini{pointer-events: none;} .post.publica .portada{ position:absolute; top:0px; bottom:0px; width:60%; box-sizing:border-box; overflow:hidden; background-color:rgb(0,0,0,0.1); background-position:top center; background-repeat:no-repeat; background-size:cover; cursor:pointer; } .fondoNegro .post.publica .portada{background-color:rgb(0,0,0,0.1);} .post.publica.izquierda .portada{ left:0px; border-radius:0px 10px; } .post.publica.derecha .portada{ right:0px; border-radius:10px 0px; } .post.publica.vertical .portada{ width:auto; left:0px; right:0px; bottom:40%; } .post.publica.mini .portada{ background-size:contain; background-position:center center; background-color:#FFF; bottom:0%; } .fondoNegro .post.publica.mini .portada{ background-size:contain; background-position:center center; background-color:#000; bottom:0%; } .post.publica .portada .tapa{ position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-image:linear-gradient(to bottom, var(--entorno_color_botones), transparent); z-index:2; opacity:1; } .post.publica.mini .portada .tapa{ display:none; } .post.publica .portada .titulos{ position:relative; box-sizing:border-box; padding:35px; line-height:5vw; font-size:5vw; font-weight:500; color:#FFF; text-shadow:rgb(0,0,0,0.1) 0px 0px 3px; z-index:3; } .fondoNegro .post.publica .portada .titulos{ text-shadow: #000 1px 1px 3px;} .post.publica.izquierda .portada .titulos{ text-align:left; } .post.publica.derecha .portada .titulos{ text-align:left; } .post.publica.vertical .portada .titulos{ line-height:30px; font-size:30px; } .post.publica.mini .portada .titulos{ display:none; } .post.publica .separador{ position:relative; height:auto; overflow:hidden; box-sizing:border-box; margin-bottom:10px; } .post.publica .recuadro{ position:relative; font-size:10px; letter-spacing:0px; border:#000 1px solid; margin-right:5px; padding-left:10px; padding-right:10px; border-radius:10px; z-index:2; } .fondoNegro .post.publica .recuadro{border:#FFF 1px solid;} .post.publica.izquierda .recuadro{ float:left; } .post.publica.derecha .recuadro{ float:right; } .post.publica.vertical .recuadro{ border:#000 2px solid; font-weight:800; } .fondoNegro .post.publica.vertical .recuadro{ border:#FFF 2px solid;} .post.publica .observacion{ position:absolute; top:0px; bottom:60%; box-sizing:border-box; overflow:hidden; padding-top:25px; line-height:1.6vw; font-size:0.9vw; color:rgb(0,0,0,0.9); font-weight:400; letter-spacing:1px; text-align:left; cursor:pointer; } .fondoNegro .post.publica .observacion{color:rgb(255,255,255,0.9);} .post.publica.izquierda .observacion{ left:60%; right:0px; padding-left:75px; padding-right:25px; text-align:left; } .post.publica.derecha .observacion{ left:0px; right:60%; padding-left:25px; padding-right:75px; text-align:justify; } .post.publica.vertical .observacion{ left:0px; right:0px; top:65%; bottom:15%; padding-left:25px; padding-right:25px; text-align:justify; line-height:17px; font-size:13px; } .post.publica.mini .observacion{ text-align:center; top:80%; bottom:0%; display:none; } .post.publica .observacion .sombra{ position:absolute; bottom:0px; left:0px; right:0px; height:50px; box-sizing:border-box; background-image:linear-gradient(to top, rgb(255,255,255,1), transparent); z-index:2; } .fondoNegro .post.publica .observacion .sombra{background-image:linear-gradient(to top, rgb(0,0,0,1), transparent);} .post.publica .vermas{ position:absolute; bottom:50%; height:10%; box-sizing:border-box; line-height:1.5vw; font-size:1vw; color:rgb(0,0,0,1); font-weight:600; letter-spacing:1px; text-align:left; padding-left:75px; padding-right:75px; padding-top:15px; background-size:1.5vw; background-repeat:no-repeat; z-index:2; cursor:pointer; } .fondoNegro .post.publica .vermas{color:rgb(255,255,255,1);} .post.publica.izquierda .vermas{ left:60%; right:0px; text-align:left; background-position:left+25px center; background-image:url(png/nuevos/icons8-forward-50.png); } .post.publica.derecha .vermas{ left:0px; right:60%; text-align:right; background-position:right+25px center; background-image:url(png/nuevos/icons8-back-50.png); } .post.publica.vertical .vermas{ bottom:20px; left:25px; right:25px; margin:auto; background-color:#FFF; border:rgb(0,0,0,0.1) 1px solid; border-radius:5px; height:30px; line-height:30px; font-size:15px; font-weight:800; text-align:center; padding:0px; padding-left:50px; padding-right:50px; background-image:none; } .post.publica.mini .vermas{ display:none; } .fondoNegro .post.publica.izquierda .vermas{ background-image:url('png/nuevos/icons8-forward-50(1).png'); } .fondoNegro .post.publica.derecha .vermas{ background-image:url('png/nuevos/icons8-back-50(1).png'); } .fondoNegro .post.publica.vertical .vermas{ background-color:#000; border:none; } .post.publica .categoria{ position:absolute; bottom:0px; box-sizing:border-box; overflow:hidden; line-height:20px; font-size:10px; color:var(--entorno_color); font-weight:600; letter-spacing:1px; white-space:nowrap; text-overflow:ellipsis; padding-left:25px; padding-right:25px; z-index:2; cursor:pointer; } .post.publica.izquierda .categoria{ left:60%; right:0px; text-align:right; } .post.publica.derecha .categoria{ left:0px; right:60%; text-align:left; } .post.publica.vertical .categoria{ left:0px; right:0px; text-align:center; } .post.publica.mini .categoria{ display:none; } .post.publica .galeria{ position:absolute; bottom:5%; left:0px; right:0px; height:45%; box-sizing:border-box; overflow:hidden; white-space:nowrap; z-index:2; } .post.publica.izquierda .galeria{ text-align:right; } .post.publica.derecha .galeria{ text-align:left; } .post.publica.vertical .galeria{ bottom:33%; height:18%; text-align:center; } .post.publica.mini .galeria{ bottom:0%; height:25%; display:none; } .post.publica .galeria .marco{ position:relative; width:33.33%; height:100%; box-sizing:border-box; overflow:hidden; display:inline-block; padding:25px; } .post.publica.vertical .galeria .marco{ width:30%; padding:10px } .post.publica .galeria .marco .foto{ position:relative; width:100%; height:100%; box-sizing:border-box; overflow:hidden; background-color:rgb(255,255,255,1); background-position:center center; background-repeat:no-repeat; background-size:contain; border-radius:5px; box-shadow:rgb(0,0,0,0.25) 0px 0px 25px; cursor:pointer; } .fondoNegro .post.publica .galeria .marco .foto{ background-color:rgb(0,0,0,1); background-size:contain; border-radius: 10px; } .post.publica.vertical .galeria .marco .foto{ box-shadow:rgb(0,0,0,0.25) 0px 0px 10px; } .fondoNegro .post.publica.vertical .galeria .marco .foto{ box-shadow:var(--entorno_color_botones) 0px 0px 5px; } .post.publica.cover .galeria .marco .foto{ background-size:cover; } .post.publica .ocultar{ position:absolute; top:0px; bottom:0px; width:1px; height:1px; opacity:0; overflow:hidden; } /*** Botón al final de cada Bloque (Página de Inicio) ***/ .botonVerMas{ position:relative; box-sizing:border-box; width:60%; max-width:350px; height:35px; border-radius:20px; background-color:rgb(0,0,0,0); padding-left:15px; padding-right:15px; line-height:35px; font-size:15px; color:rgb(0,0,0,0.5); font-weight:500; text-align:center; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:auto; margin-top:25px; margin-bottom:10px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .fondoNegro .botonVerMas{ background-color:rgb(255,255,255,0.1); color:rgb(255,255,255,1); } .botonVerMas.destacar{ background-color:var(--entorno_color); color:#FFF; font-weight: 700; } /*** Mini-Banner en Línea de Página de Inicio ***/ .LineaBanner{ position:relative; height:auto; overflow:hidden; border-radius:25px; background-color:var(--entorno_color); background-image:linear-gradient(to bottom right, rgb(0,0,0,0.15), transparent); margin: 10px; margin-top:25px; margin-bottom:100px; border:rgb(0,0,0,0.075) 1px solid; border-bottom:hidden; border-right:hidden; } .columnaLineaBanner{ position:relative; height:300px; width:50%; box-sizing:border-box; } .columnaLineaBanner.text{ float:left; } .columnaLineaBanner.img{ float:right; background-image:url(img/motivo.png); background-repeat:no-repeat; background-position:top center; background-size:cover; } .marcoLineaBanner{ position:relative; box-sizing:border-box; width:100%; max-width:450px; height:auto; overflow:hidden; margin:auto; text-align:left; } .LineaBanner.oscuro .marcoLineaBanner{ color:#FFF; } .LineaBanner.claro .marcoLineaBanner{ color:#000; } .marcoLineaBanner.favicon{ background-repeat:no-repeat; background-size:contain; background-position:left center; height:60px; margin-bottom:15px; background-image:url(empresa/logohorizontalpc_oscuro.png); } .marcoLineaBanner.nombre{ line-height:20px; font-size:20px; font-weight:750; text-align:left; text-shadow:rgb(0,0,0,0.5) 0px 0px 3px; } .marcoLineaBanner.descripcion{ line-height:18px; font-size:14px; font-weight:400; text-align:left; margin-top:10px; opacity:0.75; margin-bottom:15px; } .marcoLineaBanner .boton{ float:left; padding-left:25px; padding-right:25px; line-height:20px; font-size:13px; font-weight:750; text-align:center; background-color:rgb(0,0,0,0.1); border:#FFF 2px solid; cursor:pointer; border-radius:15px; margin:10px; margin-left:0px; } .LineaBanner.claro .marcoLineaBanner .boton{ background-color:rgb(255,255,255,0.1); border:#000 2px solid; } .marcoLineaBanner .redes{ position:relative; float:left; width:30px; height:30px; margin-right:10px; border-radius:50%; box-sizing:border-box; cursor:pointer; background-position:center center; background-repeat:no-repeat; background-size:contain; } /*seleccion seleccionado*/ .LineaBanner .linieaSeleccion{ position: relative; height: 40px; line-height: 38px; font-size: 15px; font-weight: 500; padding-left: 40px; padding-right: 10px; border: rgb(0,0,0,0.5) 1px solid; border-radius: 20px; cursor: pointer; margin-bottom: 5px; background-image: url(png/nuevos/icons8-location-52.png); background-size: 20px; background-position: left+10px center; background-repeat: no-repeat; } .LineaBanner .linieaSeleccion.seleccionado{ background-color: var(--entorno_color_botones); background-image: url('png/nuevos/icons8-location-52(1).png'); border: hidden; line-height: 40px; color: #FFF; font-weight: 700; } .LineaBanner .indicador{ position: absolute; top: 0px; bottom: 0px; right: 10px; z-index: 2; width: 75px; height: 25px; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: contain; } .LineaBanner .indicador.agotado { background-image: url(png/nuevos/nivel-agotado.png); } .LineaBanner .indicador.bajo { background-image: url(png/nuevos/nivel-bajo.png); } .LineaBanner .indicador.medio { background-image: url(png/nuevos/nivel-medio.png); } .LineaBanner .indicador.alto { background-image: url(png/nuevos/nivel-alto.png); } .LineaBanner .BanInd{ position:relative; box-sizing: border-box; padding-left: 48px; line-height: 15px; font-size: 11px; font-weight: 600; color: rgb(0,0,0,0.75); text-align: left; background-position: left+10px center; background-repeat: no-repeat; background-size: auto 15px; } .LineaBanner .BanInd.agotado { background-image: url(png/nuevos/nivel-agotado.png); } .LineaBanner .BanInd.bajo { background-image: url(png/nuevos/nivel-bajo.png); } .LineaBanner .BanInd.medio { background-image: url(png/nuevos/nivel-medio.png); } .LineaBanner .BanInd.alto { background-image: url(png/nuevos/nivel-alto.png); }