* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  -webkit-transition: .2s linear;
  transition: .2s linear;
}

.banner-container {
  padding: 3rem 9%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1.5rem;
}

.banner-container .banner {
  height: 160px;
  overflow: hidden;
  position: relative;
}

.banner-container .banner img {
  object-fit: cover;
  height: 160px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banner-container .banner:hover img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.banner-container .banner .content {
  position: absolute;
  top: 50%;
  left: 2rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.banner-container .banner .content h3 {
  padding-top: .5rem;
  font-size: 2.2rem;
  color: white;
}

.banner-container .banner .content .btn {
  padding: .7rem 2.5rem;
}



/* BOTONES FLOTANTES DE REDES SOCIALES */
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #25d366;
  background-color:#fff;
}

.my-float{
	margin-top:16px;
}

.floatf{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
  bottom: 110px;
	background-color:blue;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.floatf:hover {
	text-decoration: none;
	color: blue;
  background-color:#fff;
}

.my-floatf{
	margin-top:16px;
}



/* CATALOGO */
.catalogo{
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 40px;
  padding: 40px;
  justify-content: center;
}
@media (max-width: 560px){
  .catalogo{
    grid-template-columns: 100%;
  }
}
.productcard{
  list-style: none;
  font-size: 1.5rem;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.productimg{
  width: 200px;
  height: auto;
  background-color: white;
}
@media (max-width: 560px){
  .productimg{
    width: 100%;
    height: auto;
  }
}
.productprecio{
  color: red;
  font-size: 20px;

}
.productboton{
  background-color: #007bff; /* Green */
  border-radius: 12px;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

/* SE USA PARA OCULTAR LOS PRODUCTOS */ 
.hidden{
  display: none;
}

/* ESTILOS DE INPUT DE BUSQUEDA CATALOGO PRINCIPAL */ 
.containerinputbuscar{
  display: grid;
  place-content: center;
}
.inputbuscar{
   text-align: center;
   align-items: center;
   width: 600px;
   padding: 10px;
  /* margin: 8px 0 0 263px; */
   display: grid;
   place-content: center;
   border: 2px solid #007bff;
   border-radius: 7px;
   box-sizing: border-box;

}
@media (max-width: 850px){
  .inputbuscar{
    /* width: 100%; */
    margin: 0px 0px 0px 0px;
  }
}
.principal{
  text-align: center;
  color: #007bff;
}