html,body{
/*width:100%;*/
max-width: 100%;
height:100%;
overflow-x: hidden;
}
/* Estilo para el searchbox desplegable */
.input-container {
display: none; /* Inicialmente oculto */
position: absolute; /* Para colocarlo encima del contenido */
top: 70px; /* Ajusta según la altura de tu navbar */
left: 50%; /* Centrado horizontal */
transform: translateX(-50%); /* Centra el input horizontalmente */
z-index: 1000; /* Asegúrate de que aparezca encima de otros elementos */
text-align: center;
width: 90%; /* Haz que el contenedor sea más ancho */
}
.input-container input {
width: 100%; /* Haz que el input ocupe todo el ancho del contenedor */
padding: 10px; /* Espacio interno para que sea cómodo escribir */
font-size: 16px; /* Aumenta el tamaño del texto si es necesario */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Opcional: sombra para destacar el input */
border: 1px solid #ccc; /* Borde para mayor visibilidad */
border-radius: 5px; /* Bordes redondeados */
}
.large-font-size{
font-size: 1.1rem;
}
/* Imagen dentro del texto de la long description de una entrada */
.imagen-flotante {
float: left; /* Cambia a left si quieres que la imagen esté a la izquierda */
margin-top: 10px;
margin-right: 18px;
/*margin-bottom: 8px;*/
width: 400px; /* Ajusta el tamaño de la imagen */
}
.align-left {
left: 0; /* Pega el elemento al borde izquierdo */
margin-left: 0; /* Elimina cualquier margen izquierdo */
}
.turn-color-menu:hover{
/*font-weight: bold;*/
color: #ffda44;
}
/*
body{
overflow-x: hidden; /* Supuestamente evita el scroll horizontal en la página. A mí no me ha funcionado en el móvil */
/*background: #dde1e7;*/
/*}
*/
.image-flex-column {
display: flex;
flex-direction: column;
align-items: center; /* Opcional: Para centrar horizontalmente las imágenes */
}
.img-size-search {
margin-bottom: 15px; /* Espacio entre las imágenes */
width: 100%; /* Ajusta al 100% del ancho del contenedor si lo deseas */
max-width: 150px; /* Ajusta el tamaño máximo de las imágenes */
}
/* Asegura que las imágenes tengan el mismo tamaño en el modal */
#modalImage {
width: 100%; /* La imagen ocupará el 100% del ancho del modal */
height: 500px; /* Ajusta esta altura según lo que prefieras */
object-fit: contain; /* Mantén la proporción de la imagen sin que se deforme */
}
/* Esto es para que cualquier tipo de foto sea responsive, ya no necesitamos sólo que sean svg */
.image-container {
max-width: 100%; /* Ajusta esto según tu diseño */
margin: 0 auto; /* Opcional: centra la imagen en el contenedor */
}
.responsive-img {
max-width: 100%;
height: auto;
display: block;
}
.carrusel-prod-img-size{
height: 220px;
width: 100%;
object-fit: contain; /* Mantén la proporción de la imagen sin que se deforme */
}
.carrusel-sup-img-size{
height: 70px;
width: auto;
}
.img-radius{
border-radius: 4px;
}
#mensaje-persistente{
position: fixed;
bottom: 1px; /* Ajusta la posición desde la parte superior */
right: 1px; /* Ajusta la posición desde la parte derecha */
background-color: #007bff; /* Color de fondo */
color: white; /* Color del texto */
padding: 10px; /* Espaciado interno */
border-radius: 5px; /* Bordes redondeados */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra */
z-index: 1000; /* Z-index para asegurar que esté por encima de otros elementos */
cursor: pointer;
opacity: 1;
transition: opacity 0.5s ease-out;
}
/* Zoom de las imágenes de la home cuando ponemos el cursor encima de ellas */
.imagen-zoom, .imagen-zoom-carrusel{
-moz-transition: transform 0.15s ease-in-out;
-webkit-transition: transform 0.15s ease-in-out;
-o-transition: transform 0.15s ease-in-out;
-ms-transition: transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out;
}
.contenedor-img img{
max-width: 100%; /* Ajusta el tamaño de la imagen según sea necesario */
max-height: 100%;
}
/* El zoom de las imágenes del carrusel las hacemos sin contenedor para que no se las coma el contenedor, para que aparezcan enteras */
.contenedor-img:hover .imagen-zoom, .imagen-zoom-carrusel:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
/* Color de fondo cuando pasamos el ratón por el menú lateral de últimas entradas y últimos productos */
.bg-lateral:hover{
background: rgb(246, 245, 244);
}
/* Anchura máxima del container de las páginas excepto las de Aviso Legal, Cookies y Privacidad ya que quedan mejor sin este estilo */
.max-width-container{
max-width: 1200px;
}
.footer {
position: absolute;
bottom: 0; /* NUEVO */
}
/* ========================== */
/* Tamaño de las imágenes de últimas entradas y últimos productos */
.side-img-size{
height: 100%;
width: 100%;
/*width: 100%;*/
/*padding-bottom: 0.4rem;*/
}
/* ========================== */
/* Usado para no dejar selecionar texto. Lo usamos en los resultados de la searchbox ya que en tablets y móviles
cuando pulsamos en uno de los resultados se selecciona el texto, no sé por qué, y queda muy feo */
.text-selection-disable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ========================== */
/*
Lo usamos para centrar imágenes de entradas, productos, etc... de lo que quieras.
Hay un ejemplo en las 2 primeras imágenes de home.html o en esta URL:
https://unipython.com/como-recortar-y-centrar-una-imagen-con-css-y-html/
*/
.container-crop {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
position: relative;
}
.container-crop > .crop {
position:absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
min-height: 100%;
min-width: 100%;
}
/* ========================== */
/* Escalamos los svg que mostramos en search */
.svg_scale{
transform: scale(0.13); /* scales it to half its size */
}
/* Alineación vertical en los textos de lo encontrado en la search box */
.v-align{
display: flex;
align-items: center;
}
/* Estilos de la search box */
.doScroll{
max-height: 27rem;
overflow-y: scroll;
}
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
#searchInput{
border: 0;
}
/* Esto lo usamos para quitar el bordecito azulito que se pone cuando seleccionamos un input text para escribir en él */
#searchInput.form-control:focus{
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
/*-moz-box-shadow: none;*/
-webkit-box-shadow: none;
}
/*
#searchInput {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
#searchInput[type=text] {
background-color: #f1f1f1;
width: 100%;
}
*/
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items li {
padding: 10px;
cursor: pointer;
background-color: #fff;
color: black;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items li:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
/* ========================== */
.dark {
background: black;
float: left;
}
.dark #divE {
opacity: .6;
display: inline;
}
/* Necesario para que las imágenes se muestren correctamente */
.rectImg {
position: relative;
padding-right: 50px;
margin: 0;
width: 100%;
height: 100%;
/*background:#f0f0f0;*/
/*background:white;*/
}
.rectImg2 {
padding:0;
margin:0;
width:100%;
height:100%;
/*background:#f0f0f0;*/
background:white;
}
.rectImg * , .rectImg2 * {
width:100%;
height:100%;
}
/* Lo usamos para el tamaño de las imágenes en el save o update de entradas, por ejemplo */
.imagen-style{
width: 240px;
height: 120px;
}
/* Estilos para las tabs de la paǵina de productos. Lo hacemos por el atributo name="tabs" de la etiqueta ul menos en la clase .tab-pane */
/*
.tabsContent .tab-pane {
/*padding: 1rem 0;*/
/*border:solid 1px black;*/
/*border-top: 0;*/
/*
}
*/
ul[name="tabs"] {
border-bottom: solid 1px black;
}
ul[name="tabs"] .nav-link{
border: solid 1px black;
border-left-width: 0;
}
ul[name="tabs"] .nav-link:hover{
box-shadow: 0 10px 14px 0 rgba(0,0,0,0.22), 0 15px 48px 0 rgba(0,0,0,0.17);
border: solid 1px black;
border-left-width: 0;
}
ul[name="tabs"] .nav-link.active{
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(3,3,37,0) 100%);
font-weight: bolder;
text-decoration: underline;
border: solid 1px black;
border-bottom: solid 1px white;
border-left-width: 0;
}
ul[name="tabs"] .nav-link.active:hover {
box-shadow: none;
cursor: default;
}
/* Ponemos los placeholder que parezcan en blanco. Es por el placeholder de la newsletter (id="emailField"), en Firefox aparece de color gris bonito
pero en Chrome aparece en un gris feísimo. */
#emailField::-webkit-input-placeholder { /* Edge. Va con 2 ":" */
color: white;
opacity: 0.7;
}
/*#emailField:-ms-input-placeholder { /* Internet Explorer 10-11. Va con solo 1 ":" */
/*color: white;
opacity: 0.7;
}*/
#emailField::placeholder { /* Va con 2 ":" */
color: white;
opacity: 0.7;
}
/* Y esto es para que en Chrome no resalte (no ponga el foco en) el input y el button de la newsletter ya que queda horroroso. En Firefox
por defecto no se resalta */
.newsFocus:focus{
outline: 0;
}
#acciones{
/*
padding-left: 20px;
padding-right: 20px;
*/
color: #00b5f8;
font-weight: bold;
font-size: 14px;
}
#acciones a{
text-decoration: none;
}
/* Ponemos estos estilos en los botones de las acciones que podemos realizar de un
producto (ir a la página de Amazon, compartir el producto, ir a la página del fabricante...) */
#acciones .btn{
color: #00b5f8;
font-weight: bold;
font-size: 12px;
background-color: #FFFFFD;
border: 1px solid black;
transition-duration: 0.2s;
opacity: 0.7;
}
#acciones .btn:hover{
background-color: white;
border: 1px solid #B0C4DE;
opacity: 1;
}
/* Estilo para los títulos de las especificaciones de un producto */
.tableSpec tr>td:first-child{
/*background: -webkit-linear-gradient(left, #F5F5F5 , #FFF0F5); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(right, #F5F5F5 , #FFF0F5); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(right, #F5F5F5 , #FFF0F5); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(to right, #F5F5F5 , #FFF0F5); /* Standard syntax */
/*background: #F0F8FF;*/
text-align: right;
font-weight: bold;
font-size: 20px;
/* font-family: 'Bebas Neue', cursive; */
width: 30%;
padding-left: 4px;
}
/* Estilo para las características de un producto */
.tableSpec tr>td:last-child{
/*background: -webkit-linear-gradient(left, #F0F8FF, #F8F8FF); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(right, #F0F8FF, #F8F8FF); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(right, #F0F8FF, #F8F8FF); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(to right, #F0F8FF, #F8F8FF); /* Standard syntax */
padding-left: 10px;
padding-right: 10px;
}
/* Degradado de la info de los productos*/
/*#estiloProducto{
/*background: -webkit-linear-gradient(right, #F5F5F5, #F8F8FF); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(right, #F5F5F5, #F8F8FF); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(right, #F5F5F5, #F8F8FF); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(to right, #FFEBCD, #F0F8FF); /* Standard syntax */
/*}
/* Hace el texto más grande cuando pones el ratón sobre él */
.textBigger{
transition: transform .2s; /* Animation */
}
.textBigger:hover {
display: inline-block; /* Necesario, si no no va a funcionar el transform */
-webkit-transform: scale(1.1); /* For Safari 5.1 to 6.0 */
-o-transform: scale(1.1); /* For Opera 11.1 to 12.0 */
-moz-transform: scale(1.1); /* For Firefox 3.6 to 15 */
transform: scale(1.1); /* Standard syntax */
}
/* Degradado del navbar */
#idNavBar{
/*background: -webkit-linear-gradient(left, #F0FFFF, #B0E0E6); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(right, #F0FFFF, #B0E0E6); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(right, #F0FFFF, #B0E0E6); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(to right, #F0FFFF, #B0E0E6); /* Standard syntax */
background-image: linear-gradient(to top, #005bea 0%, #00c6fb 100%); /* Standard syntax */
background-image: -webkit-linear-gradient(top, #005bea 0%, #00c6fb 100%); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(top, #005bea 0%, #00c6fb 100%); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(top, #005bea 0%, #00c6fb 100%); /* For Firefox 3.6 to 15 */
/*background: #4682B4;*/
color: white;
}
/* Estilos para la tabla de características. */
.tableSpec table{
text-align: justify;
/*text-justify: values;*/
width: 100%;
height: 100%;
/*border-top: 1px solid #000;*/
}
/* Podríamos descomentar el border-top de .tableSpec table{...} y quitar entero .tableSpec tr:first-child{...}
pero así vemos cómo se usa first-child */
.tableSpec tr:first-child{
border-top: 1px solid #000;
}
.tableSpec tr{
border-bottom: 1px solid #000;
}
/* Estilos del título de Características */
.titleSpecif{
/* font-family: 'Bebas Neue', cursive; */
font-size: 27px;
}
/* Texto encima rgb(0, 0, 0)36)36)36) portada */
.bigger {
width: 100%; /* Cubre todo el ancho de la pantalla */
height: 600px; /* Puedes ajustar la altura según tu diseño */
background-size: 100% auto; /* Cubre el 100% horizontalmente y ajusta la altura */
background-position: center; /* Centra la imagen */
background-repeat: no-repeat; /* Evita que la imagen se repita */
position: relative;
/*margin-top: 70px; /* Ajusta según la altura de tu header */
}
.biggerVideo{
width: 100%;
height: auto;
max-height: 600px;
object-fit: cover;
}
.smaller{
width:100%;
height:75px;
background-color: #4682B4;
/*background: linear-gradient(to right, #000080, #4682B4); /* Standard syntax */
opacity: 1;
position: absolute;
bottom:0;
text-align:center;
font-size: xxx-large;
color:white;
}
/* Estilos de la imagen de backgorund de los productos */
#rowTitlePrice{
background-color: rgba(55,155,200,0.8);
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* Clase para convertir un texto a mayúsuculas */
.titleUpperBold{
text-transform: uppercase;
font-weight: bolder;
/*font-size: 250%;*/
}
/* Estilos título de página de productos y últimas entradas */
.tituloPaginaProd{
width:100%;
/* background-color: #4682B4; */
/* background-color: white; */
font-size: xxx-large;
/* font-size: 60px; */
/* color:white; */
/*color: #4682b4;*/
/* font-family: 'Bebas Neue', cursive; */
text-align:center;
display: flex; /* Nos permite alinear objetos fácilmente */
align-items: center; /* Centrado vertical del título de página de productos gracias a flex */
justify-content: center; /* Centrado horizontal del título de página de productos gracias a flex */
}
.neueFont{
font-family:"TheNeue"; /* Hace referencia a font-family: "Orbitron-Black-Webfont"; de @font-face, le ponemos el nombre que queramos, no hace falta que sea uno similar al nombre de la fuente */
}
@font-face{
font-family: "TheNeue";
src: url("../fonts/TheNeue-Black.woff");
/*src: url("../fonts/LeagueGothic-Condensed.woff");*/
}
/* Esto significa: loque esté por debajo de id="divLastEntries" cuya class="tituloPaginaProd" le pones el font-size: x-large, etc. Va atener
las mismas propiedades que .tituloPaginaProd menos las que añadamos nuevas o sobrescribamos (como es el caso de font-size, que pasa de
xxx-large a x-large). OJO: solo me ha funcionado con el div del título de "Últimas entradas", con el td, que se supone que llevaría la misma clase y está
por debajo de #divLastEntries no me hqa funcionado*/
/*
#divLastEntries > .tituloPaginaProd{
font-size: x-large;
text-transform: uppercase;
font-weight: bold;
}
*/
.tituloUE{
/*background-color: #4682B4;
color:white;
font-size: large;
text-transform: uppercase;*/
font-size: large;
font-weight: bold;
border-bottom: 1px solid #d5d5d5;
}
/* Estilos de los botones I18N del navbar */
.btnI18n{
/*background: #ffff;
border: none;
border-radius: 30px;
color: #4b5d73;*/
display: inline-block;
font-weight: 400;
line-height: 1;
padding: 2px 4px;
border-radius: 30px;
background-color: #FFF;
/*
color: #4682B4;
*/
color: black;
border: 1px solid black;
transition-duration: 0.2s;
}
.btnI18n:hover{
background-color: black;
color: white;
border: 1px solid #B0C4DE;
}
/* Sombra a los botones cuando ponemos el ratónencima de ellos */
.btnShadow:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
/* Altura de las 2 primeras imágenes de las paǵinas */
.div-height{
height: 450px;
}
/* Altura y anchura de las 4 siguientes imágenes */
.four-images{
width: 100%;
height: 270px;
}
/* Texto de título de las 4 siguientes imágenes */
.four-images h5{
font-size:24px;
}
/* Texto de descripción de las 4 siguientes imágenes */
.hide-p{
display: inline-block;
/*font-size: 17px;*/
}
/* Tamaño de las imágenes del carousel de productos */
.img-carousel-prod{
width: 450px;
height: 235px;
}
/* Altura y anchura fijas para el carousel de productos */
.height-carousel-prod{
height: 235px;
width: 400px;
}
/* Centrado del título y precio de productos en su div*/
.centerDivTituloProd{
display: flex; /* Nos permite alinear objetos fácilmente */
align-items: center; /* Centrado vertical del título, precio y carousel en productos gracias a flex */
justify-content: center; /* Centrado horizontal del título, precio y carousel en productos gracias a flex */
font-weight: bold;
}
/* Degradado del div de título y precio de producto */
#divTitleProd{
/*background: -webkit-linear-gradient(left, #F0F8FF, #F8F8FF); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(right, #F0F8FF, #F8F8FF); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(right, #F0F8FF, #F8F8FF); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(to right, #F0F8FF, #F8F8FF); /* Standard syntax */
}
/* Centrado y degradado del carousel de productos en su div*/
#carouselProd{
/*background: -webkit-linear-gradient(left, #F8F8FF, #F0F8FF); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(right, #F8F8FF, #F0F8FF); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(right, #F8F8FF, #F0F8FF); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(to right, #F8F8FF, #F0F8FF); /* Standard syntax */
display: flex;
justify-content: center;
align-items: center; /* Centrado vertical del título, precio y carousel en productos gracias a flex */
}
/* Posicionamiento correcto de los indicadores del carrousel de los productos cuando consultamosuna entrada */
#indicadorCarruselProd{
/*position:absolute;
left: -100%;
right: -100%;*/
top: 100%;
/*bottom: -90%;
margin: auto;*/
/*min-height: 100%;
min-width: 100%;*/
}
/* Tamaño de las imágenes del carousel principal */
.img-main-carousel{
max-width: 10vh;
max-height: 5vh;
}
/* Tag li del botón de idioma en la forma dropdown */
.lilang{
margin-left: 10px;
}
/* Estilos botón de idioma en forma botón */
.btni18n{
margin-left: 8px;
}
/* Estilos para el div de los productos */
#divTodosProductos{
padding: 0.3rem;
}
/* Estilos del div de las últimas entradas sin anuncios */
#divLastEntries{
background: -webkit-linear-gradient(top, #F5F5F5, #F8F8FF); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top, #F5F5F5, #F8F8FF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #F5F5F5, #F8F8FF); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top, #B0C4DE, #778899); /* Standard syntax */
/*background: #2E8B57;*/
margin-left: 15px;
margin-top: 15px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
/* Tamaño de letra de título y precio de productos -> Lo ponemos arriba junto al h5 de 4 imágenes, que va a ser lo mismo de tamaño*/
.titleProd{
font-weight: bold;
font-size: 2.2rem;
text-align:center;
/*text-justify:values;*/
-webkit-text-fill-color: black;
-webkit-text-stroke: 1px blue;
}
.priceProd{
font-weight: bold;
font-size: 1.9rem;
text-align:center;
/*text-justify:values;*/
-webkit-text-fill-color: white;
-webkit-text-stroke: 2px orange;
}
/* Estilo de la descripción de un producto */
.txt-descripcion-prod{
/*white-space: pre-line; /* Ésto es para que reconozca los saltos de linea del texto que cogemos de BBDD, de la descripción que nos vienen de BBDD */
text-align: justify; /* Texto justified */
/*font-size: large;*/
}
.ad-padding-right{
padding: 0;
margin-bottom: 0.3rem;
}
.ad-padding-left{
padding: 0;
margin-top: 1rem;
}
.tr-style-side{
height: 7vh;
vertical-align: top;
}
.number-style-side{
font-size: x-large;
font-weight: bold;
}
#firstRowSide{
padding-top: 1.5rem;
}
#secondRowSide{
border-top: 1px dashed #efefef;
padding-top: 1rem;
}
#basic-addon{
background-color: white;
}
#ulSearchBar{
width: 40%
}
/* ============================== */
/*=============*/
/* Media Queries */
/*=============*/
@media (max-width: 1810px) {
#ulSearchBar{
width: 30%
}
}
@media (max-width: 1690px) {
#ulSearchBar{
width: 25%
}
}
@media (max-width: 1585px) {
#ulSearchBar{
display: none;
}
#searchInput{
display: none;
}
#basic-addon{
cursor: pointer;
background-color: transparent;
border: 0;
}
#btnLanguage{
padding-left: 7px;
}
}
@media (max-width: 1225px) {
.bigger .biggerVideo {
height: 450px; /* Puedes ajustar la altura según tu diseño */
}
.lilang{
margin-left: 0px;
margin-top: 10px;
}
/* Estilos botón i18n */
.btni18n{
margin-left: 0px;
margin-top: 8px;
}
.subscribe-form button{
margin-top: 15px;
}
/* Aquí el menú superior ya está colapsado (function expandMenu() en javascript.js) por lo que le damos márgenes al botón de idioma ya que si
no queda muy pegado a los márgenes */
#btnLanguage{
margin: 1rem 0;
}
}
@media (max-width: 1210px) {
/* Todo esto de abajo que esté relacionado con navbar y su colapso lo hacemos para que cuando navbar esté colapsado exoanda sus subemnús y todo se
expanda a lo ancho de la pantalla */
.navbar-collapse.collapse.show .dropdown-menu {
display: block !important; /* Fuerza a mostrar los submenús */
position: static; /* Evita que se comporten como elementos flotantes */
box-shadow: none; /* Sin sombras */
padding: 0; /* Sin padding adicional */
color: white; /* Cambiar el color de texto a blanco */
/* Hacer que los submenús también ocupen todo el ancho */
width: 100%; /* Asegura que los submenús ocupen el ancho completo */
/*background-color: #333; /* Fondo oscuro para diferenciar el submenú */
background-color: transparent; /* Fondo transparente (opcional) */
}
.navbar-collapse.collapse.show .dropdown-item {
padding: 10px 20px; /* Ajusta el espaciado de los elementos */
/* Estilo para los enlaces dentro del submenú */
width: 100%; /* Ocupa todo el ancho */
color: white; /* Texto blanco */
text-align: left; /* Alinear a la izquierda */
}
.navbar-collapse.collapse.show .dropdown-menu .dropdown-item:hover {
color: white; /* Color más claro en hover para mejor visibilidad */
}
/* Asegurar que el navbar expandido ocupe el ancho completo */
.navbar-collapse.collapse.show {
width: 100%; /* Ocupa todo el ancho */
}
/* Hacer que los elementos del menú principal ocupen todo el ancho */
.navbar-collapse.collapse.show .nav-link {
width: 100%;
text-align: left; /* Opcional: Alinear el texto a la izquierda */
}
/* Configurar el contenedor del navbar colapsado como un contenedor flex */
.navbar-collapse {
display: flex;
flex-wrap: wrap; /* Permitir que los elementos se ajusten en líneas múltiples */
justify-content: start; /* Alinear los elementos a la izquierda */
align-items: flex-start; /* Asegurar que todos los elementos estén alineados en la parte superior */
gap: 10px; /* Espaciado entre los elementos */
}
/* Asegurarse de que cada enlace ocupe su tamaño natural */
.navbar-collapse .nav-item {
flex: 0 1 auto; /* Elementos flexibles con tamaños dinámicos */
}
/* Evitar que los submenús rompan la línea */
.navbar-collapse .dropdown-menu {
/*position: absolute; /* Mantener la posición flotante de submenús */
/* left: auto; /* Ajustar según el espacio disponible */
top: 100%; /* Justo debajo del elemento principal */
margin-left: 20px; /* Lo hacemos para sangrar un poco los submenús con respecto sus menús */
}
/* Ajustar los enlaces para que estén alineados visualmente */
.navbar-collapse .nav-link {
line-height: normal; /* Asegurar espaciado adecuado del texto */
padding: 10px; /* Añadir algo de espaciado interno */
}
.default_icon_menu:hover{
color: white;
}
#searchInput{
display: block;
}
#basic-addon{
cursor: default;
background-color: white;
border-left: 1px solid grey;
}
}
@media (max-width: 992px) {
.bigger .biggerVideo{
background-position: top center; /* Siempre alinea la imagen en el borde superior y centrada horizontalmente */
}
.ad-padding-right{
padding-right: 0.5rem;
margin: 0;
}
.ad-padding-left{
padding-left: 0.5rem;
margin: 0;
}
#firstRowSide{
padding-top: 0;
}
#secondRowSide{
border-top: 0;
padding-top: 0;
}
.smaller{
font-size: xx-large;
}
.lilang{
margin-left: 0px;
margin-top: 0px;
}
.div-height{
height: 250px;
}
.four-images{
height: 170px;
}
.four-images h2{
font-size: 1.6rem;
}
.hide-p{
display: none;
}
/* Tamaño del texto del título de la primera imagen */
.min-title{
font-size: 28px;
}
/* Tamaño del texto de la descripción de la primera imagen */
.min-descr{
display: none;
}
/* Altura fija para el carousel de productos */
.height-carousel-prod{
height: 190px;
width: 355px;
}
/* Tamaño de las imágenes del carousel de productos */
.img-carousel-prod{
max-width: 270px;
max-height: 205px;
}
/* Estilos del div de las últimas entradas con anuncios */
#divLastEntriesAndAnn{
margin-top: 25px;
}
/* Estilos del div de las últimas entradas sin anuncios */
#divLastEntries{
margin-right: -15px;
margin-left: -15px;
margin-bottom: 17px;
margin-top: 0px;
}
#resources{
text-align:justify;
/*text-justify:values;*/
}
/* Usado para ir acomodando las imágenes del carousel de los productos cuando seleccionamos una entrada */
.left-side-img-car-prod{
margin-left: 18.5%;
}
/* Minimizamos el título de la primera entrada de la home */
#tituloMain0{
font-size: x-large;
}
/* Minimizamos el título de la segunda entrada de la home */
#tituloMain1{
font-size: x-large;
}
/*
#indicadorCarruselProd{
left: 15%;
}
*/
.carrusel-prod-img-size{
height: 180px;
}
.imagen-flotante{
width: 350px;
}
}
@media (max-width: 788px) {
.imagen-flotante{
width: 300px;
}
.carrusel-prod-img-size{
height: 145px;
}
.ad-padding-right{
padding: 0;
}
.ad-padding-left{
padding: 0;
}
/* Primera imagen de las entradas en home. Le damos estapcio por abajo para que no quede pegada a la segunda imagen cuando estamos en este tamaño de imagen */
/*#primera-img{
padding-bottom: 2vh;
}*/
/* Se refiere a las dos primeras imágenes de las entradas en home */
.row-2primeras{
display: flex; /* Nos permite alinear objetos fácilmente */
align-items: center; /* Centrado vertical del título, precio y carousel en productos gracias a flex */
justify-content: center;
}
/* Bordes de las tablas de características */
.table2 tr:first-child{
border-top: none;
}
#lastTrSpec{
border-bottom: 1px solid #000;
}
.smaller{
font-size: xx-large;
}
.div-height{
height: 200px;
}
/* Altura fija para el carousel de productos */
.height-carousel-prod{
height: 140px;
width: 305px;
}
/* Tamaño de las imágenes del carousel de productos */
.img-carousel-prod{
max-width: 240px;
max-height: 145px;
}
/*
.titleProd h5{
font-size: 20px;
}*/
/*
.four-images h2{
font-size: 18px;
}*/
/* Estilos título de página de productos y últimas entradas */
/*.tituloPaginaProd{
font-size: xx-large;
/*font-size: 45px;*/
/*}*/
#divLastEntries > .tituloPaginaProd{
font-size: xx-large;
}
/* Tamaño del div de título y precio de productos y su margen por abajo */
#divTitleProd{
/*height: 10rem;*/
margin-bottom: 1rem;
}
/* Centrado del título y precio de productos en su div */
/*.centerDivTituloProd{
/*display: flex; /* Nos permite alinear objetos fácilmente */
/*align-items: flex-start; /* Centrado vertical del título, precio y carousel en productos gracias a flex */
/*justify-content: center; /* Centrado horizontal del título, precio y carousel en productos gracias a flex */
/*}*/
}
@media (max-width: 767px){
.bigger .biggerVideo{
height: 420px; /* Puedes ajustar la altura según tu diseño */
}
.carrusel-prod-img-size{
height: 140px;
}
/*
#indicadorCarruselProd{
left: 0;
}
*/
#divTitleProd{
margin-bottom: 10px;
}
}
@media (max-width: 750px){
.bigger .biggerVideo{
height: 410px; /* Puedes ajustar la altura según tu diseño */
}
#divTitleProd{
/*margin-bottom: 2.5rem;*/
}
}
@media (max-width: 740px){
.bigger .biggerVideo{
height: 400px; /* Puedes ajustar la altura según tu diseño */
}
#divTitleProd{
/*margin-bottom: 2.5rem;*/
}
}
@media (max-width: 610px){
.bigger .biggerVideo{
height: 350px; /* Puedes ajustar la altura según tu diseño */
}
.imagen-flotante{
width: 220px;
}
}
@media (max-width: 550px){
.bigger .biggerVideo{
height: 320px; /* Puedes ajustar la altura según tu diseño */
}
#divLastEntries > .tituloPaginaProd{
font-size: x-large;
}
.imagen-flotante{
float: none;
margin-top: 10px;
margin-right: 0;
margin-left: 0;
margin-bottom: 8px;
width: 300px; /* Ajusta el tamaño de la imagen */
}
#mainArticle{
margin: 0;
padding: 0;
}
#selectImg{
text-align: center;
}
}
@media (max-width: 530px){
.bigger .biggerVideo{
height: 270px; /* Puedes ajustar la altura según tu diseño */
}
}
@media (max-width: 447px){
.bigger .biggerVideo{
height: 270px; /* Puedes ajustar la altura según tu diseño */
}
#divTitleProd{
/*margin-bottom: 5rem;*/
}
}
@media (max-width: 440px){
#divTitleProd{
/*margin-bottom: 5rem;*/
}
}
@media (max-width: 400px){
.bigger .biggerVideo{
height: 220px; /* Puedes ajustar la altura según tu diseño */
}
#divTitleProd{
/*margin-bottom: 4rem;*/
}
.smaller{
font-size: large;
}
.figure-caption{
text-align: left;
}
/* Estilos título de página de productos y últimas entradas */
.tituloPaginaProd{
font-size: xx-large;
}
#divLastEntries > .tituloPaginaProd{
font-size: medium;
}
.imagen-flotante{
width: 250px;
}
/* Altura fija para el carousel de productos */
/*.height-carousel-prod{
height: 60px;
width: 160px;
}*/
/* Tamaño de las imágenes del carousel de productos */
/*.img-carousel-prod{
max-width: 110px;
max-height: 35px;
}*/
}
@media (max-width: 355px){
.bigger .biggerVideo{
height: 180px; /* Puedes ajustar la altura según tu diseño */
}
#divTitleProd{
/*margin-bottom: 8rem;*/
}
}
/*
@media (max-width:310px){
#indicadorCarruselProd{
left: 10%;
}
}
*/
/* Hace que la barra de navegación siempre sea visible */
/*
#header{
position: fixed;
width: 100%;
z-index: 1000;
}
*/
/* Estilos para navbar */
.navbar .navbar-nav .nav-link {
color: #000000;
font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover {
color: #808080;
}
.navbar {
/*border-bottom: 1px solid #000000;*/
background-color: #ffffff;
}
.navbar .nav-item.active {
background-color: #88f2fa;
}
.navbar .nav-item.active {
background-color: #88f2fa;
}
/* Hover */
.hover {
overflow: hidden;
position: relative;
/*padding-bottom: 60%;*/
}
.hover-overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 80;
transition: all 0.4s;
}
.hover .divImagen {
position: absolute;
top: 0;
left: 0;
transition: all 0.3s;
}
.hover-content {
position: relative;
z-index: 99;
}
/* Gradiente cuando No ponemos el ratón encima de la entrada, cuando está en reposo la entrada, el color del fondo de la entrada*/
.hover-2 .hover-overlay {
/*background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));*/ /* Con gradiente, abajo más oscuro, arriba más claro */
background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); /* En blanco */
}
.hover-2-title {
width: 100%;
position: absolute;
top: 30%; /* Altura a la que está el título. Cuanto menos porcentaje, más alto está */
left: 0;
text-align: center;
padding: 3px; /* Para que no quede el título muy pegado a los bordes del recuadro, que queda mal */
z-index: 99;
transition: all 0.3s;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 2.00px;
}
.hover-2-description {
width: 100%;
position: absolute;
top: 70%; /* Altura a la que aparece la descripción. Cuanto menos porcentaje, más alto aparece */
left: 0;
bottom: 0;
text-align: center;
padding: 3px; /* Para que no quede la descripción muy pegada a los bordes del recuadro, que queda mal */
z-index: 99;
transition: all 0.3s;
opacity: 0;
/*font-size: 2.3rem;*/
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1.00px;
}
.hover-2:hover .hover-2-title {
transform: translateY(-1.5rem);
}
.hover-2:hover .hover-2-description {
bottom: 0.5rem;
opacity: 1;
}
/* Gradiente cuando ponemos el ratón encima de la entrada */
.hover-2:hover .hover-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)); /* Con gradiente, abajo más oscuro, arriba más calro */
/*background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));*/ /* En blanco */
}
/* Ajuste de las imágenes a su correspondiente div */
/*
*{margin: 0; padding: 0;}
*/
.doc{
display: flex;
flex-flow: column wrap;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background: white;
}
.box{
width: auto;
height: 100%;
background: white;
overflow: hidden;
}
.box img{
width: auto;
height: 100%;
object-fit: cover;
object-position: center center;
}
/*
@supports(object-fit: cover){
.box img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
*/
/* Estilos de los submenús */
.submenu-style{
text-decoration:none;
color:#000000;
font-weight: bold;
}
/*
.li-submenu-style{
margin-bottom: 8px;
}
*/
.submenu-style:hover{
text-decoration:none;
color:#000000;
/*color:#888a85;*/
}
.li-submenu-style:hover{
/*background: #f3f3f3;*/
color:#000000;
text-decoration:none;
}
.dropdown-item{
color:#000000;
font-weight: bold;
}
.dropdown-item:hover{
background: white;
}
/* Flechas de alante y atrás de los carrouseles */
.carousel-control-prev-icon, .carousel-control-next-icon {
filter: invert(69%) sepia(98%) saturate(1573%) hue-rotate(174deg) brightness(101%) contrast(101%);
box-shadow: 0 0 0 2px black; /* Borde negro simulado con sombra */
background-color: transparent; /* Asegura el fondo transparente */
/*background-image: url('data:image/svg+xml;charset=UTF8,%3csvg xmlns="http://www.w3.org/2000/svg" fill="%23000000" viewBox="0 0 8 8"%3e%3cpath d="M4.354 0L0 4l4.354 4 .354-.354L.707 4 4.707.354 4.354 0z"/%3e%3c/svg%3e');*/
height: 30px;
width: 30px;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
/*border: 1px solid red;*/
/*background-image: none;*/
text-align:center;
display: flex; /* Nos permite alinear objetos fácilmente */
align-items: center; /* Centrado vertical del título de página de productos gracias a flex */
justify-content: center; /* Centrado horizontal del título de página de productos gracias a flex */
}
/*
.carousel-control-next-icon::after
{
content: '\227B';
font-size: 20px;
font-weight: bolder;
color: red;
}
.carousel-control-prev-icon::after {
content: '\227A';
font-size: 20px;
font-weight: bolder;
color: red;
}
*/
/* Estilos de los indicadores de los carrouseles */
/*
.carousel-indicators{
margin-bottom: 1.5rem;
}
*/
.carousel-indicators li {
background-color: grey;
}
.carousel-indicators .active {
background-color: red;
}
/* Estilos para las banderas de I18N */
.flags{
width: 20px;
height: 20px;
}
/* Identación Justified de las tags y
de la página de cookies */
.cookieStyle p, li{
text-align:justify;
/*text-justify:values;*/
}
/* padding-top para los de la página de cookies */
.cookieStyle h2{
padding-top: 16px;
}
/* Estilo para los ul */
.cookieStyle ul{
margin-left: 50px;
}
/* Estilos para el tr y td de la tabla de "últimas entradas" */
.tableUE{
/*background: -webkit-linear-gradient(top, #F5F5F5, #F8F8FF); /* For Safari 5.1 to 6.0 */
/*background: -o-linear-gradient(top, #F5F5F5, #F8F8FF); /* For Opera 11.1 to 12.0 */
/*background: -moz-linear-gradient(top, #F5F5F5, #F8F8FF); /* For Firefox 3.6 to 15 */
/*background: linear-gradient(to top, #B0C4DE, #778899); /* Standard syntax */
background: white;
color: black;
/* font-family: 'Bebas Neue', cursive; */
font-size: 0.9em;
/*font-weight: bold;*/
opacity: 0.8;
width: 100%;
}
.tableUE tr{
/*border-top: 1px solid black;*/
cursor: pointer;
}
/* Estilos para las cajas de últimas entradas y últimos productos en el lado de la derecha de, por ejemplo, products.html, donde están los anuncios */
.side-style{
border: 1px solid black;
border-radius: 6px;
max-width: 100%;
}
/* Estilos para los títulos de últimas entradas y últimos productos en el lado de la derecha de, por ejemplo, products.html, donde están los anuncios */
.side-title{
border-radius: 6px 6px 0 0;
box-shadow: 0px 10px 5px #000, 0px 0px 0px #888;
}
.ad-style{
height: 300px;
width: 100%;
border: 1px solid #000;
}
/* ========================== */
/* Estilos para el botón switch de las cookies */
/*
Fíjate cómo usamos variables en CSS!!!! ME habría venido muy bien saberlo antes:
https://es.stackoverflow.com/questions/210041/no-logro-aplicar-bien-los-puntos-suspensivos-con-css
*/
:root {
--color-green: #00a878;
--color-red: #fe5e41;
--color-button: #fdffff;
--color-black: #000;
--color-gray: #515658;
}
.switch-button {
display: inline-block;
}
.switch-button .switch-button__checkbox {
display: none;
}
.switch-button .switch-button__label {
background-color: var(--color-red);
width: 2rem;
height: 1rem;
border-radius: 3rem;
display: inline-block;
position: relative;
}
.switch-button .switch-button__label:before {
transition: .2s;
display: block;
position: absolute;
width: 1rem;
height: 1rem;
background-color: var(--color-button);
content: '';
border-radius: 50%;
box-shadow: inset 0px 0px 0px 1px var(--color-black);
}
.switch-button .switch-button__checkbox:checked + .switch-button__label {
background-color: var(--color-green);
}
.switch-button .switch-button__checkbox:checked + .switch-button__label:before {
transform: translateX(1rem);
}
/* Descomentar si volvemos a poner disabled el checkbox en las cookies de language y accept_cookies */
#languageLabel, #accept_cookiesLabel{
background-color: var(--color-gray);
}
/* No funciona en los navegadores desde Heroku, lo solucionamos con lo que tenemos arriba
.switch-button #language + .switch-button__label {
background-color: var(--color-gray);
}
.switch-button #acceptCookies + .switch-button__label {
background-color: var(--color-black);
}
*/
/* ========================== */
/* Animación de texto */
.con-animate {
position: relative;
/*width: 155%; */
/*background: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.18);*/
height: 50px;
overflow:hidden
}
.con-animate > div {
display: flex;
width: 100%;
/*background: rgb(255, 255, 255);*/
}
.con-animate > div p {
width: 100%;
}
.con-animate > .animate1 {
position: absolute;
left: 0px;
animation: animate1 linear 10s infinite;
transform: translate(0);
}
.con-animate > .animate2 {
position: absolute;
left: 0px;
animation: animate2 linear 10s infinite;
transform: translate(0);
}
@keyframes animate1 {
from {transform:translate(0%)}
to {transform:translate(-100%)}
}
@keyframes animate2 {
from {transform:translate(100%)}
to {transform:translate(0%)}
}
/* ========================== */
/* SEARCHBOX */
/*
Lo usamos para que se pongan 3 puntos al final (ellipsis) cuando mostramos los títulos de productos, entradas, menús y submenús
al buscar o seleccionar un menú o submenú */
/*
Fíjate cómo usamos variables en CSS!!!! ME habría venido muy bien saberlo antes:
https://es.stackoverflow.com/questions/210041/no-logro-aplicar-bien-los-puntos-suspensivos-con-css
*/
.tres-puntos {
--size: 16px;
--line-height: 1.5;
--lineas: 4; /* A partir de la linea 5 ya pone los puntos suspensivos. Puedes cambiar la linea como se te antoje */
--paddingV: .30em;
--paddingH: .30em;
/*width: 300px;
margin: 0 auto;
background-color: rgba(0, 128, 0, 0.5);
*/
display: block;
display: -webkit-box;
height: calc( var(--size) * var(--padding) * var(--line-height) * var(--lineas));
font-size: var(--size);
line-height: var(--line-height);
-webkit-line-clamp: var(--lineas);
padding: var(--paddingV) var(--paddingH);
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Tamañó de imagen del resultado de la searchbox */
.img-size-search{
width: 100%; /* Ajusta al 100% del ancho del contenedor */
height: 8rem; /* Mantiene la proporción de la imagen */
/*max-width: 150px; */ /* Ajusta el tamaño máximo de las imágenes si es necesario */
object-fit: contain; /* Contiene la imagen sin que se deforme */
}
/*
Ésto es para que palabras largas se partan y quepan. Para mostrar guinos hay que poner ‐ o
dentro de la palabra, cosa que no podemos hacer porque viene de BBDD. Aquí se explica:
https://developer.mozilla.org/es/docs/Web/CSS/hyphens
*/
.long-words-adjust {
/*
-ms-word-break: break-all;
-moz-word-break: break-all;
-webkit-word-break: break-all;
word-break: break-all;
*/
word-break: break-word; /* Sólo WebKit -NO DOCUMENTADO */
-ms-hyphens: auto; /* Guiones para separar en sílabas */
-moz-hyphens: auto; /* depende de lang en */
-webkit-hyphens: auto;
hyphens: auto;
}
/* ========================== */
/* Botón flotante del Home */
#floatingBtn{
width: 3rem;
height: 3rem;
float: right;
border-radius: 100%;
background:#1a5fb4;
bottom: 3vh;
position: sticky;
border: none;
outline: none;
color:#FFF;
font-size: 16px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
transition: .3s;
}
#showMore{
font-weight: bold;
/*position: absolute;
left: 50%;*/
}
/* TODO LO DE ABAJO NO ESTÁ USADO */
.btn-flotante {
font-size: 16px; /* Cambiar el tamaño de la tipografia */
text-transform: uppercase; /* Texto en mayusculas */
font-weight: bold; /* Fuente en negrita o bold */
color: #ffffff; /* Color del texto */
border-radius: 5px; /* Borde del boton */
letter-spacing: 2px; /* Espacio entre letras */
background-color: #E91E63; /* Color de fondo */
padding: 18px 30px; /* Relleno del boton */
position: fixed;
bottom: 40px;
float: right;
right: 40px;
transition: all 300ms ease 0ms;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
z-index: 99;
}
.btn-flotante:hover {
background-color: #2c2fa5; /* Color de fondo al pasar el cursor */
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-7px);
}
@media only screen and (max-width: 600px) {
.btn-flotante {
font-size: 14px;
padding: 12px 20px;
bottom: 20px;
right: 20px;
}
}