html,body{
  width:100%;
  height:100%;
}

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;*/
}

.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 {
	/*overflow: hidden;*/
}
/* 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%;
	/*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%;
  height:300px;
  background-size:cover;
  background-position:center;
  position:relative;
}
    
.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;
}

@media (max-width: 1225px) {
	.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: 992px) {
	.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%;
	}
}

@media (max-width: 788px) {
	.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: flex-start; /* 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: 2rem;
	}
	
	/* 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){
	#indicadorCarruselProd{
		    left: 0;
	}
}

@media (max-width: 750px){
	#divTitleProd{
		margin-bottom: 2.5rem;
	}
	
}

@media (max-width: 740px){
	#divTitleProd{
		margin-bottom: 2.5rem;
	}
}

@media (max-width: 550px){
	#divLastEntries > .tituloPaginaProd{
		font-size: x-large;
	}
}

@media (max-width: 440px){
	#divTitleProd{
		margin-bottom: 5rem;
	}
}

@media (max-width: 400px){
	#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;
	}
	
	
	/* 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){
	#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: 300px;
  height: 300px;
  background: white;
  overflow: hidden;
}
.box img{
  width: 100%;
  height: auto;
}

@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 {
  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 <p> y <li> de la página de cookies */
.cookieStyle p, li{
	text-align:justify; 
	/*text-justify:values;*/
}

/* padding-top para los <h2> 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: 8rem;
	height: 8rem;
}

/*
	 Ésto es para que palabras largas se partan y quepan. Para mostrar guinos hay que poner &hyphen; o &shy;
     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 <html>      */
    -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;
	}
}