body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  }
footer {
  margin-top: auto;
}
hr.separador {
  width:50%; 
  margin: auto; 
  border: 4px solid MediumOrchid; 
  border-radius: 3px;
}
hr.separadorLigero{
  width:50%; 
  margin: auto; 
  border: 1px solid MediumOrchid; 
  border-radius: 1px;
}
hr.separadorLigeroBlanco{
  width:30%; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 10px; 
  margin-top: 10px; 
  /* border: 1px solid MediumOrchid;  */
  border-radius: 1px;
}

.fade {
    -webkit-mask-image: linear-gradient(180deg, #000 85%, rgba(255,255,255,0.1));
  }

.fade:hover {
  -webkit-mask-image: linear-gradient(180deg, #000 60%, rgba(255,255,255,1));
}
 		  
.product img{margin-left:2em; margin-bottom:10px; width: 28vw; max-height: 70vh;}
.product-small-img img{width: 4vw; border: 1px solid white; padding: 3px; margin: 5px 5px 5px; cursor: pointer}
.product-small-img{margin-left:3em; width: 80%; display: flex;}
.img-container img{height: 460px}
.img-container {padding: 10px; width: 45%;}
	@media screen and (max-width: 500px) {
		.product img{width: 100vw; margin-left:0em}
		.product-small-img img{width: 15vw; border: 1px solid rgba(0,0,0,0.2); padding: 2px; margin: 2px 2px 2px; cursor: pointer;}
		.product-small-img{width: 95%; display: flex; margin-left: 5px;}
		.img-container img{height: 460px}
		.img-container {padding: 10px; width: 45%;}
	}
 
/* div.suspensivos {
  white-space: nowrap;
  width: 100%; 
  height: 13.5em; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}

div.suspensivos:hover {
  overflow: visible;
}
 */
.mySlides {
	display: none;
	/* padding-bottom: 6px; */
}
	@media screen and (max-width: 2000px) {
	  .mySlides {
		height: 84vh;
	  }
	}

	@media screen and (max-width: 500px) {
	  .mySlides {
		height: 100vw;
	  }
	}

img {vertical-align: middle;}

.imagenDestacada {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.productoTS {
}
	@media screen and (max-width: 2000px) {
	  .productoTS {
		min-height: 380px;
	  }
	}

	@media screen and (max-width: 500px) {
	  .productoTS {
		min-height: 350px;
	  }
	}

.imagenNovedad {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
	@media screen and (max-width: 2000px) {
	  .imagenNovedad {
		max-height: 60vh;
	  }
	}

	@media screen and (max-width: 500px) {
	  .imagenNovedad {
		max-width: 90vw;
		max-height: 90vw;
	  }
	}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 52%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  background-color: rgba(0,0,0,0.8);
  font-weight: bold;
  font-size: 18px;
  /* transition: 0.6s ease; */
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.tooltip .tooltiptext {
  max-width:800px;
  visibility: hidden;
  width: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 6px;
}

/* .tooltip .tooltiptext::after { */
  /* content: ""; */
  /* position: absolute; */
  /* top: 100%; */
  /* left: 50%; */
  /* margin-left: -5px; */
  /* border-width: 5px; */
  /* border-style: solid; */
  /* border-color: #555 transparent transparent transparent; */
/* } */

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

.btnDonaGeneral {
  background-color: MediumOrchid;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-weight:bold;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5),15px 15px 8px rgba(128, 0, 128, 0.2);
  width: 250px; 
  height: 80px;
  font-size: 24px;
  padding: 12px 24px;
  top: 50%;
  left: 75%;
/*   transform: translate(-25%, 0%);
  -ms-transform: translate(-25%, 0%);
 */}

.btnDona {
  background-color: MediumOrchid;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-weight:bold;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5),15px 15px 8px rgba(128, 0, 128, 0.2);
  position: absolute;
  width: 250px; 
  height: 80px;
  font-size: 24px;
  padding: 12px 24px;
  top: 47%;
  left: 82%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
 /* .btnDona:hover {
  background-color: black;
} 
 */
 
/* .btnDona {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
} */
 
.btnDona span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btnDona span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btnDona:hover span {
  padding-right: 25px;
}

.btnDona:hover span:after {
  opacity: 1;
  right: 0;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 500px) {
  .prev, .next,.text {font-size: 11px}
  .btnDona {
	width: 140px; 
	height: 43px; 
	font-size: 22px; 
	padding: 5px 12px;
	top: 64%;
	left: 50%;
	transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
}
}

	/* Para ventana emergente */
	.popup {
		background-color: #ffffff;
		color: #888888;
		height: 80vh;
		left: 5%;
		padding: 20px;
		position: fixed;
		top: 15%;
		width: 90vw;
		z-index: 101;
		-moz-box-shadow: 0px 0px 10px 1px #888888;
		-webkit-box-shadow: 0px 0px 10px 1px #888888;
		box-shadow: 0px 0px 10px 1px #888888;
		border-radius:10px;
		-moz-border-radius:10px;
		overflow-y: auto;
	}
	.overlay {
		background: #000000;
		bottom: 0;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 100;
		opacity:0.5;
	}
	a.close2
	{
		cursor: pointer;
		float: right;
		position: relative;
	}
	a.publicidad
	{
		font-weight: bold;
		color: black;
	}
	a.publicidadRojo
	{
		font-weight: bold;
		color: red;
		text-align: center;
	}
	div.novedadDestacada {
	   text-align:center;
	   width:85vw;
	   height:70vh;
	}
	img.novedadDestacadaImg {
	   max-width:100%;
	   height:50vh;
	   max-height:100%;
	   object-fit: cover;
   }
@media screen and (max-width: 610px)
/* pantallas pequeñas */
{
	.popup {
		background-color: #ffffff;
		color: #888888;
		height: 75vh;
		left: 10%;
		padding: 20px;
		position: fixed;
		top: 25%;
		width: 80vw;
		z-index: 101;
		-moz-box-shadow: 0px 0px 10px 1px #888888;
		-webkit-box-shadow: 0px 0px 10px 1px #888888;
		box-shadow: 0px 0px 10px 1px #888888;
		border-radius:10px;
		-moz-border-radius:10px;
	}
	a.publicidad
	{
		font-size: 10px;
		font-weight: bold;
		color: black;
	}
	a.publicidadRojo
	{
		font-size: 10px;
		font-weight: bold;
		color: red;
		text-align: center;
	}
	div.novedadDestacada {
	   text-align:center;
	   width:60vw;
	   height:30%;
	}
	img.novedadDestacadaImg {
	   max-width:100%;
	   height:30vh;
	   max-height:100%;
   }
   
    .iframe-container {
      display: flex;
      justify-content: center;
      overflow: hidden; 
      padding-bottom: 56.25%; 
      position: relative;
      height: 0; 
      margin-left: 50px;
      margin-right: 50px;
      border-radius: 5px;
      
    }

    .iframe-container iframe {
      border: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }


          @media (max-width: 620px) {
            
            .iframe-container{
              margin-left: 10px;
              margin-right: 10px;
            }


          }



          @media (max-width: 445px) {
        
          .iframe-container {
            padding-top: 75%; /* Adjusts the aspect ratio for a taller view, accommodating for the narrower screen */
          }

          
          }