.overlay{
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;
	background-color: rgb(0,0,0,0.6);
	visibility: hidden;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}.overlay-visible{visibility: visible;}

	.message{
		width: 50%;
		padding: 3rem;
		background-color: #fff;
		border-radius: 0.6rem;
		box-shadow: 0 0 3rem rgba(0,0,0,0.8);
		visibility: hidden;
		opacity: 0;
	}.message.animation{
		visibility: visible;
		animation: animation-message linear 500ms forwards;
	}

		.message-title, .message-sub-title{
			font-family: "IbmPlexMono";
			font-size: 3rem;
			text-align: center;
			opacity: 0;
		}.message.animation > .message-title{
			animation: animation-title linear 0.6s 1 forwards;
			animation-delay: 0.3s;
		}
		.message-sub-title{font-size: 1.6rem; margin-top: 1rem;}
		.message-body{opacity: 0; padding: 2rem;}
		.message.animation > .message-sub-title, .message.animation > .message-body{
			animation-delay: 0.9s;
			animation-timing-function: linear;
			animation-fill-mode: forwards;
			animation-name: animation-sub-title;
			animation-duration: 0.6s;
		}.message.animation > .message-body{animation-name: animation-opacy; animation-delay: 1.5s;}

.cont-form{
	display: block;
	padding: 9rem 0;
	background-image: linear-gradient(
		to right bottom,
		#4FBDFA 60%,
		#036DC1 100%
	);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.form{
	padding: 6rem;
	background-image: linear-gradient(
		to left top,
		rgba(204, 204, 204, 0.2) 15%,
		rgba(255, 255, 255, 0.6) 30%,
		rgba(204, 204, 204, 0.2) 60%,
		rgba(255, 255, 255, 0.6) 80%
	);
	width: 90%;
	margin: 0 auto;
	text-align: center;
	border-radius: 0.6rem;
	border-left: 0.2rem solid rgba(255, 255, 255, 0.9);
	border-top: 0.2rem solid rgba(255, 255, 255, 0.9);
	border-bottom: 0.1rem solid rgba(204, 204, 204, 0.1);
	border-right: 0.1rem solid rgba(204, 204, 204, 0.6);

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

	.form-text{
		width: 40%;
		margin-right: 2rem;
		background-image: linear-gradient(
			to left top,
			rgba(204, 204, 204, 0.2) 15%,
			rgba(255, 255, 255, 0.6) 60%,
			rgba(204, 204, 204, 0.2) 80%
		);
		border-left: 0.2rem solid rgba(255, 255, 255, 0.9);
		border-top: 0.2rem solid rgba(255, 255, 255, 0.9);
		border-bottom: 0.1rem solid rgba(204, 204, 204, 0.6);
		border-right: 0.1rem solid rgba(204, 204, 204, 0.6);
		padding: 2rem;
		border-radius: 0.6rem;
	}

	.form-text > p{
		font-size: 1.3rem;
		letter-spacing: 0.1rem;
		margin-top: 3rem;
		font-family: "Courier";
		font-weight: bold;
	}
	.form-text > p > a{text-decoration: none; color: blue; transition: 500ms all ease;}
	.form-text > p > a:hover{text-decoration: underline;}

	.sub-form{
		width: 60%;
		margin-left: 2rem;
		background-image: linear-gradient(
			to left top,
			rgba(204, 204, 204, 0.2) 15%,
			rgba(255, 255, 255, 0.6) 60%,
			rgba(204, 204, 204, 0.2) 80%
		);
		border-left: 0.2rem solid rgba(255, 255, 255, 0.9);
		border-top: 0.2rem solid rgba(255, 255, 255, 0.9);
		border-bottom: 0.1rem solid rgba(204, 204, 204, 0.6);
		border-right: 0.1rem solid rgba(204, 204, 204, 0.6);
		padding: 2rem;
		border-radius: 0.6rem;
	}

		.form-title{
			text-align: center;
			font-size: 3rem;
			font-family: "Courier";
		}

		.form-control{
			padding: 3rem;
		}

			.form-control > input{
				display: block;
				width: 100%;
				padding: 0.6rem;
				margin-top: 4rem;
				border: none;
				border-bottom: 0.1rem solid rgba(0, 0, 0, 0.8);
				background-color: transparent;
				text-align: center;
				font-size: 1.5rem;
				transition: 350ms all ease;
			}.form-control > input:hover{
				border-color: blue;
			}.form-control > input:focus{
				transform: scale(1.1);
				border-color: blue;
			}

			.form-submit{
				display: block;
				padding: 1rem;
				text-align: center;
			}

			.form-label{
				display: block;
				padding: 1rem;
				text-align: center;
				user-select: none;
				cursor: pointer;
			}

				.form-submit input{
					display: block;
					width: 60%;
					margin: auto;
					padding: 1.6rem 1rem;
					font-weight: bold;
					background-color: var(--brown-2);
					border-radius: 0.6rem;
					cursor: pointer;
					box-shadow: 0 0.1rem 1rem #FAD7A0;
					transition: 500ms all ease;
					border: none;
				}

				.form-submit input:hover, .btn-pd:hover{
					background-color: #FAD7A0;
				}

				.error{
					color: red;
					font-weight: bold;
					text-align: center;
				}

				.container-check{
					position: relative;
					cursor: pointer;
				}

				#idCheckPassword{
					position: relative;
					z-index: 2;
					visibility: hidden;
				}#idCheckPassword:checked + .label-password::after{
					background-color: #B9770E;
					box-shadow: 0 0 0.6rem #D68910;
				}#idCheckPassword:checked + .label-password::before{box-shadow: 0 0 0.6rem #D68910;}
				.label-password{margin-left: 1rem;}
				.label-password::before{
					content: '';
					position: absolute;
					right: 10.5rem;
					top: 0;
					padding: 1rem 1rem;
					border: 0.2rem solid #B9770E;
					border-radius: 0.6rem;
					cursor: pointer; transition: 500ms all ease;
				}.label-password::after{
					content: '';
					position: absolute;
					right: 11.2rem;
					top: 0.7rem;
					padding: 0.5rem;
					border-radius: 50%;
					cursor: pointer; transition: 500ms all ease;
					background-color: transparent;
				}

	.settings-user{
		display: none;
		width: 100%;
		text-align: center;
		padding: 3rem;
		user-select: none;
	}

		.settings-user > span{
			display: block;
			text-align: center;
			font-size: 1.5rem;
			color: var(--white);
			letter-spacing: 0.1rem;
			margin-bottom: 1rem;
		}.settings-user > span > span{
			font-weight: bold;
			letter-spacing: 0.1rem;
		}.settings-user > a{
			display: inline-block;
			font-size: 3.3rem;
			letter-spacing: 0.2rem;
			color: var(--white);
			text-decoration: none;
		}.settings-user > a:hover{
			font-weight: bold;
			transform: scale(1.1);
		}

.articles{
	display: block;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;

	margin-top: 3rem;
}

	.article{
		display: block;
		padding: 9rem;
		border: 0.1rem solid var(--brown2);
		border-radius: 50%;
		box-shadow: 0 0 0.6rem var(--brown1);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: var(--white);
		cursor: pointer;
		transition: 0.4s all ease;
	}.article-0{
		background-image: url('../images/herramientas.png');
	}.article-1{
		background-image: url('../images/precios.png');
	}.article-2{
		background-image: url('../images/mas.png');
	}

	.article:hover{
		border-width: 0.2rem;
		transform: scale(1.1);
	}

	.article-text{
		display: block;
		text-align: center;
		margin-top: 1rem;
		font-family: "IbmPlexMono";
		font-size: 1.8rem;
	}

.cont-job{
	width: 100%;
	margin: 3rem 0;
}

	.job{
		width: 90%;
		margin: 0 auto;
		padding: 6rem;
		background-color: var(--white);
		box-shadow: 0 0 0.6rem rgba(0,0,0,0.3);
		border-radius: 0.6rem;
	}

		.job-title{
			text-align: center;
			font-size: 3rem;
			margin-bottom: 3rem;
			font-family: "IbmPlexMonoItalic";
			color: var(--brown1);
		}

		.sub-cont-job, .sub-cont-job-1{
			margin: 3rem 0;

			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(1, 1fr);
			grid-auto-columns: 1fr;
			grid-auto-rows: 1fr;
			grid-column-gap: 0;

			align-items: center;
		}

			.sub-cont-job > p, .sub-cont-job-1 > p{
				font-family: "RobotoThin";
				line-height: 2.9rem;
				letter-spacing: 0.1rem;
				font-weight: bold;
				text-align: justify;
			}

			.job-figure > img{
				display: block;
				border-radius: 0.6rem 0.6rem 0 0;
				margin: 0 auto;
			}

			.job-figure > figcaption{
				width: 80%;
				margin: 0 auto;
				padding: 0.6rem;
				background-color: var(--gray-1);
				font-size: 1.3rem;
				line-height: 1.9rem;
				border-radius: 0 0 0.6rem 0.6rem;
			}

.cont-info{
	width: 100%;
	margin: 3rem 0;
}

	.info{
		width: 80%;
		margin: 0 auto;
		background-color: var(--white);
		box-shadow: 0 0 0.6rem rgba(0,0,0,0.3);
		border-radius: 0.6rem;
	}

		.info-title{
			padding: 3rem;
			text-align: center;
			font-family: "Arial";
			font-size: 2rem;
			font-weight: bold;
			background-color: var(--brown-3);
			margin-bottom: 3rem;
		}

		.sub-cont-info{
			padding: 3.3rem;

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

			.info-figure{
				background-image: url('../images/sistema-solar.png');
				padding: 9rem;
				border-radius: 50%;
				border: 0.2rem solid var(--black);
			}

			.info-body{
				margin-left: 3rem;
			}

				.info-body > h3, .info-body > p{
					font-family: "RobotoThin";
				}.info-body > p{
					margin-top: 2rem;
					line-height: 2.6rem;
					letter-spacing: 0.1rem;
					font-weight: bold;
					text-align: justify;
				}
.main{
	margin: 3rem 0;
}

	.main-aside{
		padding: 3rem;
		background-color: blue;
	}

	.main-aside-1{
		padding: 3.9rem;
		background-color: black;
		overflow: hidden;
	}

		.aside, .aside-1{
			width: 70%;
			padding: 9rem 2rem;
		}.aside-1, .aside-1 > div{
			float: right;
		}

		.aside > div, .aside-1 > div{
			margin-top: 3rem;
		}

		.aside > h3, .aside-1 > h3{
			font-size: 3.6rem;
			color: var(--white);
		}.aside-1 > h3{
			text-align: right;
		}

		.btn-padding, .btn-padding-black, .btn-padding-white{
		    padding: 1rem;
		    border: 0.2rem solid var(--white);
		    border-radius: 0.6rem;
		    font-size: 1.6rem;
		    font-weight: bold;
		    cursor: pointer;
		    transition: 400ms all ease;
		    background-color: transparent;
		    color: var(--white);
		}.btn-padding:hover{
			background-color: var(--white);
			color: var(--black);
			border-color: var(--black);
		}

		.btn-padding-black, .btn-padding-white{
			border-color: var(--white);
			color: var(--white);
			box-shadow: 0 0 0.6rem rgba(255, 255, 255, 0.6);
		}.btn-padding-black:hover, .btn-padding-white:hover{
			border-color: var(--black);
			background-color: var(--white);
			color: var(--black);
		}

.cont-community{
	display: block;
	width: 100%;
	margin-bottom: 9rem;
}

	.community-image{
		display: block;
		width: 100%;
		height: 60rem;
		background-image: url('../images/fondo-1.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}

		.community-overlay{
			width: 100%;
			height: 60rem;
			background-image: linear-gradient(
				to bottom,
				rgba(0,0,0,1) 10%,
				rgba(0,0,0,0.6) 90%
			);
		}

			.community{
				width: 100%;
				height: 60rem;

				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: center;
			}

				.community > h3{
					font-size: 3rem; font-family: "IbmPlexMonoItalic";
					color: var(--white);
				}

				.community > div{
					margin-top: 6rem;
				}

				.btn-padding-white{
					padding: 1.6rem 6rem; box-shadow: 0 0 0 transparent;
					border-width: 0.2rem;
					font-weight: normal;
				}

	.community-info{
		padding: 3rem;
		background-color: var(--brown-2);
	}

		.community-info > h3{
			font-weight: bold;
			text-align: center;
			margin-bottom: 3rem;
		}

		.community-info > p{
			width: 60%;
			margin: 0 auto;
			text-align: center;
			line-height: 3rem;
			letter-spacing: 0.2rem;
		}

@media screen and (max-width: 900px){
	.message{
		width: 70%;
	}
}

@media screen and (max-width: 700px){
	.message{
		width: 80%;
	}
}

@media screen and (max-width: 750px){
	.form{
		width: 90%;
		padding: 2rem;
		flex-direction: column;
	}

	.form-text, .sub-form{
		width: 100%;
		margin: 1rem 0;
	}

	.articles{
		flex-direction: column;
	}

		.articles > picture{
			text-align: center;
			margin: 1rem 0;
		}

			.article{
				display: inline-block;
			}

	.sub-cont-job, .sub-cont-job-1{
		margin: 0; padding: 0.6rem;
		grid-template-columns: 1fr;
		grid-template-rows: 0.6fr 0.6fr;
		grid-auto-columns: 1fr;
		grid-auto-rows: 1fr;
		grid-column-gap: 0;
		grid-row-gap: 1rem;
	}

		.job-figure{
			width: 100%;
		}

			.job-figure > img, .job-figure > figcaption{
				width: 100%;
			}

	.sub-cont-info{
		flex-direction: column;
	}

		.info-figure{
			margin: 0 auto;
			margin-bottom: 1rem;
		}

		.info-body{margin: 0;}

			.info-body > h3{
				text-align: center;
				margin: 0;
				padding: 0;
				margin-bottom: 2rem;
			}

	.aside, .aside-1{
		width: 100%;
	}.aside > h3, .aside-1 > h3{
		font-size: 2.9rem;
	}

	.community > h3{
		font-size: 1.9rem;
	}
}

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

	.form{
		width: 100%;
		margin: 0;
	}

	.job, .info{
		width: 100%;
		padding: 3rem;
	}.info{
		padding: 0;
	}

	.form-text > p, .sub-cont-job > p, .sub-cont-job-1 > p, 
	.info-body > p, .info-body > p, 
	.community-info > p{
		font-size: 1.3rem;
	}

	.aside > h3, .aside > div, .aside-1 > h3, .aside-1 > div{
		width: 100%;
		text-align: center;
		font-size: 2.3rem;
	}

	.community > h3{
		text-align: center;
		margin: 2rem 0 3rem 0;
		font-size: 1.6rem;
	}

		.community-info > h3{
			text-align: center;
			margin: 2rem 0 3rem 0;
			font-size: 1.6rem;
		}

		.community-info > p{
			width: 100%;
			margin: 0;
			line-height: 2.3rem;
			letter-spacing: 0.2rem;
		}

	.sub-footer-title{
		font-size: 1.9rem;
	}

	.footer > small{
		font-size: 1rem;
	}
}

@media screen and (max-width: 530px){
	.message{
		width: 90%;
	}
}

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

	.message{
		width: 100%;
		padding: 0.3rem;
	}

	.message-body{padding: 1rem;}

		.message-body > p{font-size: 1.3rem !important;}

			.form-submit{text-align: center;}

				.form-submit input{
					font-size: 1rem;
					display: inline-block;
				}

	.message-title{font-size: 1.6rem;}
}

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

	.job, .info, .sub-cont-info, .community-info{
		padding: 0.3rem;
	}

		.form-text > h3, .job-title{font-size: 2.3rem;}

	.aside > h3, .aside > div, .aside-1 > h3, .aside-1 > div{
		font-size: 1.6rem;
	}

	.sub-cont-job > p, .sub-cont-job-1 > p, 
	.info-body > p, .info-body > p, 
	.community-info > p{
		text-align: justify;
	}
}

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

	.sub-form{
		padding: 1rem;
	}

		.form-title{font-size: 1.3rem;}

	.article{
		padding: 6rem;
	}

	.info-figure{
		padding: 6rem;
	}

	.btn-padding, .btn-padding-black, .btn-padding-white{
		padding: 0.6rem;
	}
}