@font-face {
  font-family: Protest;
  src: url(fonts/Protest.ttf);
}

.container-item{
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 10px;
		padding-top: 15px;
		padding-bottom: 20px;
		margin-bottom: 20px;
		box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
		transition-duration: 1s;
	}

	.container-item:hover{
		background:#cd2629;
		transition-duration: 1s;
	}

	.container-item:hover .info h1,
	.container-item:hover .precios h1,
	.container-item:hover .precios h2
	{
		color: #fff;
		transition-duration: 1s;
	}

	.container-item:hover .info h2{
		color: #fba919;
		transition-duration: 1s;
	}

	.container-item:hover .precios a{
		animation: zoom-in-zoom-out 1.5s ease infinite;
	}

	@keyframes zoom-in-zoom-out {
	  0% {
	    scale: 100%
	  }
	  50% {
	    scale: 120%;
	  }
	  100% {
	    scale: 100%;
	  }
}

	.container-item img{
		width: 10%;
		object-fit: cover;
		margin-left: 2%;
		border-radius: 10px;
	}

	.container-item h1{
		color: black;
		height: 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-family: Protest;
		transition-duration: 1s;
	}

	.container-item h2{
		color: gray;
		height: 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-family: Protest;
	}

	.container-item .info{
		width: 58%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.container-item .info h2{
		text-align: center;
		margin-top: 50px;
		width: 80%;
		font-size: 21px;
	}

	.container-item a{
		width: 50%;
		font-family: Protest;
		text-decoration: none;
		color: black;
		background: #fba919;
		text-align: center;
		padding: 10px;
		font-size: 20px;
		border-radius: 10px;
		transition-duration: 1s;
	}

	.container-item a:hover{
		cursor: pointer;
		background: #fff;
		color: black;
		transition-duration: 1s;
	}

	.container-item .precios{
		width: 15%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.container-item .precios h1{
		font-size: 20px;
		text-align: center;
		padding-bottom: 20px;
		padding-top: 10px;
		transition-duration: 1s;
	}

	.container-item .precios h2{
		color: black;
		text-align: center;
		transition-duration: 1s;
	}

	#flauta1, #flauta2, #flauta3{
		width: 40%;
	}

	#preciosf1, #preciosf2, #preciosf3
	{
		width: 15%;
	}

	#preciosf4, #preciosf5, #preciosf6
	{
		width: 15%;
	}

	#preciosf7, #preciosf8, #preciosf9
	{
		width: 15%;
	}

	#preciosf1 h2,
	#preciosf2 h2,
	#preciosf3 h2,
	#preciosf4 h2,
	#preciosf5 h2,
	#preciosf6 h2,
	#preciosf7 h2,
	#preciosf8 h2,
	#preciosf9 h2
	{
		margin-bottom: 40px;
		font-size: 15px;
	}

	@media(max-width:1000px) {
		.imagenes-menu{
			grid-template-columns: repeat(1, 1fr);
			grid-auto-rows: minmax(150px, auto);
		}

		.imagenes-menu img{
			margin-bottom: 0px;

	}
		.container-item{
			flex-direction: column;
		}

		.container-item img{
			width: 90%;
			height: 150px;
			object-fit: cover;
			margin-bottom: 30px;
			margin-left: 0px;
		}

		.container-item .info{
			width: 90%;
			text-align: center;
		}

		.container-item .info h1{
			font-size: 28px;
			margin-bottom: 0px;
			height: auto;
		}

		.container-item .info h2{
			font-size: 17px;
			margin-bottom: 20px;
			height: auto;
		}

		.container-item .precios{
			width: 90%;
			margin-bottom: 10px;
		}

		.container-item .precios h1{
			font-size: 25px;
			margin-top: 30px;
			margin-bottom: 0px;
			
		}

		.container-item .precios h2{
			margin-bottom: 30px;
			height: auto;
		}

		.container-item .precios a{
			margin-bottom: 10px;
		}

		#flauta1, #flauta2, #flauta3{
			width: 90%;
		}

		#preciosf1, #preciosf2, #preciosf3,
		#preciosf4, #preciosf5, #preciosf6,
		#preciosf7, #preciosf8, #preciosf9
		{
			width: 90%;
		}

		#preciosf1 h2, #preciosf2 h2, #preciosf3 h2,
		#preciosf4 h2, #preciosf5 h2, #preciosf6 h2,
		#preciosf7 h2, #preciosf8 h2, #preciosf9 h2
		{
			margin-bottom: 10px;
		}
	}