.cont-form{
	margin: 9rem 0;
	overflow: hidden;
}

	.sub-cont-form{
		width: 100%;

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

		.sub-form, .sub-form-1{
			flex-basis: 50%;
			padding: 43rem 10rem;
		}.sub-form{
			position: relative;
			background-color: rgba(0, 0, 0, 0.1);
		}.sub-form-1{
			width: 100%; height: auto;
			background-image: url('../images/form-image.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

			.form-1{
				position: absolute;
				display: block;
				width: 70rem;
				left: 10rem; top: 6rem;
				background: transparent;
				padding: 6rem 3rem;
			}

				.form-sub-title{
					font-size: 1.5rem;
					letter-spacing: 0.4rem;
					font-family: "IbmPlexMono";
				}.form-title{
					font-size: 3.9rem;
					font-family: "IbmPlexMono";
					margin: 1rem 0;
				}

				.form-labels{
					width: 70%;
					margin: 3.9rem 0;

					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: repeat(4, 1fr);
					grid-auto-rows: 1rem;

					grid-column-gap: 2rem;
					grid-row-gap: 2rem;
				}

					.form-control[control-age]{
						grid-column: 1 / 3;
						grid-row: 2 / 3;
					}

					.form-control[full-width]{
						width: 100%;
						grid-column: 1 / 3;
						grid-row: 3 / 4;
					}

						.form-control > input{
							display: inline-block;
							width: 100%;
							padding: 2.6rem 3.6rem;
							border: none;
							box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
						}.form-control > input::placeholder{
							font-size: 1.6rem;
							font-style: italic;
							font-family: "Arial";
							letter-spacing: 0.1rem;
						}

				#idTextResponse{
					margin: 0 0 1rem 0;
					color: red;
					display: inline-block;
					width: 100%;
					text-align: left;
					font-size: 1.4rem;
					font-weight: bold;
				}

				.form-send{
					display: block;
					width: 100%;
					margin: 3rem 0 6rem 0;
				}

					.form-gender{
						padding-bottom: 2rem;
						user-select: none;
					}.form-gender h3{
						font-size: 2rem;
						letter-spacing: 0.1rem;
						font-family: "RobotoThin";
						margin-bottom: 0.6rem;
					}.form-gender > label{
						position: relative;
						display: inline-block;
					}.form-gender > label[margin-left]{margin-left: 1.6rem;}.form-gender label > span{
						font-family: "RobotoThin";
						font-weight: bold;
						letter-spacing: 0.1rem;
						cursor: pointer;
					}.form-gender > label input{visibility: hidden;}
					.form-gender > label input:checked + div::before{visibility: visible; opacity: 1;}
					.form-gender > label div{
						position: absolute;
						display: inline-block;
						top: 0; right: -1.3rem;
						padding: 1rem;
						border: 0.2rem solid var(--brown);
						border-radius: 50%;
						cursor: pointer;
					}.form-gender > label div::before{
						content: '';
						position: absolute;
						top: 0.4rem; right: 0.4rem;
						padding: 0.6rem;
						border-radius: 50%;
						background-color: var(--brown);
						opacity: 0;
						visibility: hidden;
						transition: 0.3s ease;
					}

					.form-checkbox > label{
						position: relative;
						display: inline-block;
						padding-bottom: 0.6rem;
						user-select: none;
						cursor: pointer;
					}.form-checkbox > label > input{
						display: inline-block;
						margin-right: 2rem;
						opacity: 0;
					}.form-checkbox > label > span{
						letter-spacing: 0.2rem;
						font-size: 1.4rem;
					}.form-checkbox > label > div{
						content: '';
						top: 0; left: 0;
						position: absolute;
						padding: 1rem;
						border: 0.2rem solid var(--brown);
						border-radius: 0.6rem;
					}.form-checkbox > label > div::after, .form-checkbox > label > div::before{
						content: '';
						visibility: hidden;
						opacity: 0;
						position: absolute;
						display: inline-block;
						top: -0.6rem; left: 0;
						transform: rotate(-47deg);
						padding: 1.3rem 0.3rem;
						background-color: var(--brown);
						border-radius: 30%;
						transition: 0.3s ease;
					}.form-checkbox > label > div::before{
						top: -1.7rem; left: 1.8rem;
						transform: rotate(40deg);
						padding: 1.9rem 0.3rem;
					}.form-checkbox > label > input:checked ~ div::before,
					.form-checkbox > label > input:checked ~ div::after{
						visibility: visible;
						opacity: 1;
					}

					.form-terminos div, .form-terminos span{cursor: pointer;}
					.form-terminos input{visibility: hidden;}
					.form-terminos input:checked + div::before,
					.form-terminos input:checked + div::after{visibility: visible; opacity: 1;}
					.form-terminos div{
						position: relative;
						display: inline-block;
						padding: 1rem;
						border: 0.2rem solid var(--brown);
						border-radius: 0.6rem;
					}.form-terminos div::before, .form-terminos div::after{
						content: '';
						position: absolute;
						display: inline-block;
						top: -0.9rem; right: 1.3rem;
						padding: 1.3rem 0.3rem;
						background-color: var(--brown);
						border-radius: 30rem;
						transform: rotate(-45deg);
						opacity: 0;
						visibility: hidden;
						transition: 0.3s ease;
					}.form-terminos div::after{
						padding: 2rem 0.3rem;
						top: -2.3rem; right: -0.4rem;
						transform: rotate(35deg);
					}

					.form-submit, .form-phone{
						width: 30%;
						display: inline-block;
					}

					.form-submit > input{
						padding: 2rem 3.6rem;
						cursor: pointer;
						border: 0.3rem solid var(--brown);
						background: transparent;
						font-size: 1.6rem;
						font-family: "IbmPlexMono";
						font-weight: bold;
						letter-spacing: 0.6rem;
						transition: 400ms all ease;
						text-transform: uppercase;
						box-sizing: content-box;
					}.form-submit > input:hover{
						border-width: 0.6rem;
					}

					.form-phone > span{
						font-family: "Arial";
						letter-spacing: 0.1rem;
						font-weight: bold;
					}.form-phone > span > a{
						display: block;
						margin-top: 1rem;
						text-decoration: none;
						letter-spacing: 0.2rem;
					}.form-phone > span > a:hover{
						transform: scale(1.1) skew(3deg, 3deg);
					}

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

	.sub-cont-form{
		flex-direction: column;
		flex-wrap: wrap;
	}


		.sub-form{padding: 0;}

		.sub-form, .sub-form-1{
			flex-basis: 100%;
		}.sub-form{
			order: 2;
			padding: 5rem 3rem;
		}.sub-form-1{
			order: 1;
			padding: 19rem 10rem;
		}

			.form-1{
				width: 100%;
				margin: 0 auto;
				padding: 0;
				position: static;
			}

				.form-labels{
					width: 100%;
					grid-template-columns: 1fr;
					grid-template-rows: repeat(5, 1fr);
					grid-auto-columns: 1fr;
					grid-auto-rows: 1fr;
				}

					.form-control{display: block;}

					.form-control[full-width]{
						grid-column: 1 / 2;
						grid-row: 3 / 4;
					}

					.form-control[control-age]{
						grid-column: 1 / 2;
						grid-row: 2 / 3;
					}

					.form-control > input{
						display: block;
						width: 100%;
						padding: 2rem 1rem;
					}

			#idTextResponse{
				text-align: center;
			}

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

				.form-submit, .form-phone{
					display: block;
					width: 100%;
					margin: 1.9rem 0;
					text-align: center;
				}
}

@media screen and (max-width: 500px){
	.form-sub-title, .form-title{
		text-align: center;
	}

	#idTextResponse{
		font-size: 1rem;
	}
}