@charset "utf-8";
/* CSS Document */
.likStyle{
	text-decoration:none;
	box-sizing: border-box;
	background-color: #f9f9f9;
	/*cursor: pointer;*/
}

.likStyle:hover{
	transform: scale(1.03);
}

.likStyle:hover .tituloBloque {
	color: red 
}

.modalProducto{
	display:flex;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
}

.modalProductoActivo{
	border-bottom:solid 2px #CD9F00;
	border-top:solid 2px #CD9F00;
	padding-top: 60px;
	padding-bottom:1rem;
}

.contenedorInfo{
	padding: 1rem;
	display: flex;
    flex-flow: column wrap;
}

.containerActionElements{
	align-items: flex-end;
    justify-content: flex-end;
	flex-grow: 1;
	box-sizing: border-box;
}

/*CSS HACER HOVER A UN OBJETO Y AFECTAR A OTRO
Me topé con la necesidad de hacer esto y por eso tuve que buscar un poco para saber como se hace.

Aqui esta como:

Si el cubo está directamente en el contenedor:
#container:hover > #cube { background-color: yellow; }
 
Si el cubo es la siguiente (después de los contenedores de la etiqueta de cierre) el contenedor:
#container:hover + #cube { background-color: yellow; }
 
Si el cubo está en algún lugar en el interior del contenedor:
#container:hover #cube { background-color: yellow; }*/

/*.contenedorModal{
	position:fixed;
	width: 100%;
	min-height: 100vh;
	background-color:rgba(6,0,29,0.66);
	z-index: 1;
	max-height: 100%;
	overflow-y: auto;
	top:0;
	left: 0;
}
.modal{
	position:fixed;
	width: 90%;
	min-height: 30vh;
	margin: auto;
	height: auto;
	background-color: aliceblue;
	top: 7vh;
	left: 5%;
	z-index: 1000000;
	display: inline-grid;
	box-sizing: border-box;
}

.contenedorImagenModal{
	width: 66%;
}
.contenedorDatos{
	width: 34%;
	height: 100%;
}
.contenedorDeElementos{	
	display: flex;
	box-sizing: border-box;
	overflow-x: auto;
	flex-flow: row wrap;
	
}*/

@media only screen and (max-width: 600px) {
	
	/*.contenedorDeElementos{
	flex-flow: column wrap;
	
	}
	
	.contenedorImagenModal{
		width: 100%;
	}
	
	.contenedorDatos{
		width: 100%;
		height: 35%;
	}*/
	.contenedorInfo{
	padding: 0rem;
	}
	
	.containerActionElements{
		padding-top: 1rem;
		flex-direction: row;
	
	}
	
}