.cont-opacity{
	width: 100%;
	margin-bottom: 3rem;
	padding: 3rem;
	background-color: rgba(0, 192, 255, 0.6);
}

	.opacity{
		display: block;
		width: 50%;
		margin: 0 auto;
		padding: 3rem;
		border-radius: 0.6rem;
		border-top: 0.2rem solid var(--white);
		border-right: 0.1rem solid var(--white);
		border-bottom: 0.1rem solid var(--white);
		border-left: 0.2rem solid var(--white);
		background-image: linear-gradient(
			to left top,
			rgba(255,255,255,0.7) 10%,
			rgba(255,255,255,0.3) 30%,
			rgba(255,255,255,0.7) 60%,
			rgba(255,255,255,0.3) 100%
		);
	}

		.opacity-text{
			text-align: center;
			color: var(--white);
			text-shadow: 0 0 1rem rgba(123, 125, 125, 0.5);
			letter-spacing: 0.2rem;
			user-select: none;
		}

.cont-prices{
	margin: 3rem 0;
	padding: 3rem 1.6rem;
	text-align: center;
}

	.article-prices{
		position: relative;
		display: inline-block;
		padding: 3rem 6rem;
		border-radius: 0.9rem;
		margin: 2rem 3rem;
		max-width: 25rem;
		max-height: 20rem;
		vertical-align: bottom;
		background-image: linear-gradient(
			to bottom,
			var(--brown-1) 10%,
			var(--brown-3) 90%
		);
		transition: 0.4s all ease;
		box-shadow: 
			0 -0.1rem 0.3rem rgba(0, 0, 0, 0.1),
			1rem 0 0.3rem rgba(0, 0, 0, 0.1),
			0 1rem 0.6rem rgba(0, 0, 0, 0.1),
			-1rem 0 0.3rem rgba(0, 0, 0, 0.1);
		user-select: none;
	}.article-prices:hover{
		transform: rotateY(180deg);
		background-image: none;
		background-color: var(--white);
		border-radius: 0;
		outline: 0.3rem solid var(--gray);
		user-select: text;
	}.article-prices:hover > h3, .article-prices:hover > div{
		transform: rotateY(-180deg);
	}

		.article-prices > h3{
			text-align: center;
			font-size: 2rem;
			letter-spacing: 0.1rem;
			line-height: 3rem;
			color: var(--brown1);
			margin-bottom: 3rem;
		}

		.prices-p{
			margin-bottom: 3rem;
		}

			.prices-p > p{
				text-align: center;
				letter-spacing: 0.1rem;
				margin: 0.6rem 0;
				font-size: 1.6rem;
				font-family: "RobotoThin";
				font-weight: bold;
			}

		.prices-button{
			display: block;
			width: 100%;
			position: absolute;
			top: 15rem; left: 0; bottom: 0;
			text-align: center;
			padding: 2rem 1rem;
			visibility: hidden;
		}.article-prices:hover > .prices-button{
			visibility: visible;
		}.article-prices:hover > .prices-button input{
			opacity: 1;
		}

			.prices-button input{
				padding: 1.6rem 2.3rem;
				background-color: #ff7c08;
				text-align: center;
				color: var(--white);
				font-weight: bold;
				font-size: 1.4rem;
				border: none;
				border-radius: 0.6rem;
				cursor: pointer;
				opacity: 0;
				transition: 0.3s all ease;
			}.prices-button input:hover{
				transform: scale(1.1);
			}

.cont-info-prices{
	background-color: #f2f2f2;
	margin: 9rem 0 0 0;
	padding: 6rem 3rem;
}.cont-info-prices > h3{
	text-align: center;
	font-size: 5rem;
	font-weight: bold;
	margin-bottom: 1.6rem;
	letter-spacing: 0.2rem;
}.cont-info-prices > h4{
	font-size: 2rem;
	text-align: center;
	font-weight: normal;
}

	.sub-info-prices{
		width: 100%;
		padding: 1rem;
		margin: 3rem 0 1rem 0;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
	}

		.sub-cont-prices{
			flex-basis: 25%;
			align-self: stretch;

			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: flex-start;
		}

		.info-price{
			flex-basis: 100%;
			align-self: stretch;
			background-color: var(--white);
			padding: 3rem 2.3rem;
			border-radius: 0.6rem;
			border: 0.2rem solid var(--gray-1);
			margin: 2rem 1rem;
			transition: 500ms all ease;
		}.info-price:hover{
			border-color: var(--brown-1);
			box-shadow: 
				0 -0.1rem 1rem rgba(0,0,0,0.1),
				0.3rem 0 1.6rem rgba(0,0,0,0.1),
				0 0.6rem 1rem rgba(0,0,0,0.1),
				-0.3rem 0 1.6rem rgba(0,0,0,0.1);
		}

			.info-price h4, 
			.info-price h3, 
			.info-price > small, 
			.info-price > p, 
			.info-price-button{
				display: block;
				text-align: center;
			}.info-price h4{
				font-weight: normal;
				font-size: 1.6rem;
			}.info-price h3{
				font-size: 4.6rem;
				font-weight: bold;
				margin: 1rem 0;
				letter-spacing: 0.2rem;
			}.info-price h3 > span{
				text-transform: uppercase;
				font-size: 3rem;
			}.info-price h3 > span::before{
				content: 'mxn';
				user-select: text;
			}.info-price > small{
				font-style: italic;
				font-size: 1.6rem;
			}

			.info-price > picture{
				margin: 3rem 0;
				width: 100%;
				max-height: 13rem;
			}.info-price > picture > img{
				width: 60%;
				display: block;
				margin: 1rem auto;
				max-height: 13rem;
				padding: 9rem;
				transform: scale(0.6);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
			}

			.info-rep{
				background-image: url('../images/icon.png');
			}.info-for{
				background-image: url('../images/icon-3.png');
			}.info-ins{
				background-image: url('../images/icon-2.png');
			}.info-man{
				background-image: url('../images/icon-1.png');
			}

			.info-price > p{
				color: var(--gray);
				font-size: 1.3rem;
				margin: 0.6rem 0;
			}

			.info-price-button{
				padding: 3rem 6rem;
			}.info-price-button input{
				padding: 1rem 3rem;
				background-color: #21bedf;
				border-radius: 30rem;
				border: none;
				color: var(--white);
				font-size: 1.6rem;
				font-weight: bold;
				cursor: pointer;
				transition: 0.4s all ease;
			}.info-price-button input:hover{
				background-color: #1aa1bd;
			}

.cont-recommended{
	margin: 0 0 6rem 0;
	padding: 13rem 0;
	overflow: hidden;
	text-align: center;
	background-image: linear-gradient(
		to left,
		var(--brown-2) 10%,
		var(--brown-1) 40%,
		var(--brown) 60%,
		var(--black) 100%
	);
}

	.sub-cont-recommended{
		display: inline-block;
		padding: 1rem;
	}

		.recommended, .recommended-1{
			margin: 0 auto;
			float: left;
		}.recommended{
			width: 60%;
			padding: 1rem 2rem;
		}.recommended-1{
			width: 40%;
		}

			.recommended h3{
				font-family: "IbmPlexMonoItalic";
				font-size: 3rem;
				letter-spacing: 0.3rem;
				color: var(--white);
				text-align: left;
				text-shadow: 0 0.3rem 1rem var(--black);
			}.recommended p{
				margin-top: 3rem;
				font-size: 1.6rem;
				text-align: left;
				letter-spacing: 0.1rem;
				color: var(--white);
				font-family: "Arial";
				font-weight: bold;
			}

			.recommended-button{
				width: 100%;
				margin-top: 6rem;
				text-align: center;
			}.recommended-button > a{
				display: inline-block;
				margin: 1.3rem 0 0 0;
			}.recommended-button > a > input{
				padding: 1.6rem 4rem;
				border: none;
				margin: 0 1rem;
				border-radius: 0.6rem;
				cursor: pointer;
				transition: 400ms all ease;
				font-family: "IbmPlexMonoItalic";
				font-size: 1.6rem;
				font-weight: bold;
				letter-spacing: 0.2rem;
			}

			.btn-recommended > input{
				background-color: var(--brown);
				color: var(--brown-2);
				box-shadow: 0 0.3rem 1rem var(--brown-2);
			}.btn-recommended > input:hover{
				background-color: var(--brown-2);
				color: var(--brown);
			}

			.btn-recommended-1 > input{
				background-color: var(--black);
				color: var(--white);
				box-shadow: 0 0.3rem 1rem var(--black);
			}.btn-recommended-1 > input:hover{
				background-color: var(--white);
				color: var(--black);
				box-shadow: 0 0.3rem 1rem var(--white);
			}

			.recommended-figure{
				position: relative;
				padding: 3rem;
			}.recommended-picture{
				width: 100%;
				overflow: hidden;
			}.recommended-picture > img{
				position: absolute;
				top: 0; left: 0;
				width: 70%;
				height: 16rem;
				border-radius: 0.6rem;
				outline-width: 0.3rem;
				outline-style: dotted;
				outline-color: var(--white);
				outline-offset: 0.4rem;
				box-shadow: 
					0 -0 1rem rgba(0,0,0,0.2),
					0.3rem 0 1rem rgba(0,0,0,0.2),
					0 0.6rem 1rem rgba(0,0,0,0.2),
					-0.3rem 0 1rem rgba(0,0,0,0.2);
			}

			.recommended-picture > img[src="../images/aplications-1.png"]{
				top: 9rem;
				left: 12rem;
			}.recommended-picture > img[src="../images/aplications-2.png"]{
				top: 17rem;
				left: 3rem;
			}

@media screen and (max-width: 980px){
	.recommended h3, .recommended p{
		text-align: center;
	}

		.recommended-picture > img{
			width: 70%;
			height: 10rem;
		}

		.recommended-picture > img[src="../images/aplications-1.png"]{
			left: 6rem;
		}
}

@media screen and (max-width: 735px){

	.opacity{width: 70%;}

	.opacity-text{
		font-size: 2.3rem;
	}
}

@media screen and (max-width: 680px){
	.recommended, .recommended-1{
		display: block;
		width: 100%;
		float: none;
	}

		.recommended-picture > img{
			position: static;
			display: block;
			width: 70%;
			height: 23rem;
			margin: 3rem auto;
		}
}

@media screen and (max-width: 460px){

	.opacity{
		width: 80%;
		padding: 1rem 1.6rem;
	}

		.opacity-text{
			font-size: 2rem;
		}

	.recommended-picture > img{
		width: 100%;
		height: 26rem;
	}
}

@media screen and (max-width: 340px){

	.cont-opacity{padding: 2rem 1.6rem;}

	.opacity{width: 90%;}

	.cont-prices{
		padding: 0;
	}

		.article-prices{
			display: block;
			width: 100%;
			max-width: 100%;
			padding: 1rem;
			margin: 3rem 0;
			border-radius: 0;
		}

	.cont-info-prices{
		padding: 0;
	}

	.sub-info-prices{
		flex-direction: column;
		padding: 0;
	}

		.sub-cont-prices{
			flex-basis: 100%;
			padding: 0;
		}

			.info-price{
				margin: 1.6rem 0;
				padding: 1.6rem 0;
			}

	.sub-cont-recommended, .recommended-figure{
		padding: 0;
	}

	.recommended{
		padding: 1rem;
	}.recommended h3{
		font-size: 2rem;
	}.recommended p{
		font-size: 1.3rem;
	}

	.recommended-picture > img{
		width: 100%;
		height: 25rem;
		outline: none;
		border-radius: 0;
	}
}