.sectionContacto{
	background-color: var(--hp-light-bg);
	padding-bottom: 250px;
	background-image: url("/assets/images/home/huevos_footer.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: calc(30vw + 350px);
}

.main-content{
	margin: 0 auto;
	padding-top: 73px;
	width: 55%;
}

.datosContacto{
	color: var(--hp-purple);
	margin-top: 76px;
	margin-bottom: 98px;
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	margin-left: 0.8em;
}
.datosContacto p{
	margin-left: 0.2em;
}
.datosContacto img{
	transform: scale(0.95);
}
.datosContacto .footer-with-img{
	margin-bottom: 26px;
}

.contactoGrid{
	display: grid;
	grid-template-columns: 14em auto;
  margin-top: 47px;
  margin-left: 8px;
}

form{
	font-family: 'Roboto', sans-serif;
}
label, textarea, input[type=text], input[type=email]{
	display: block;
}
label{
	margin-top: 7px;
	font-weight: 450;
	font-size: 19px;
	padding: 2px;
	padding-left: 0;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus{
	outline: 2px solid var(--hp-orange);
}
select{
	appearance: none;
}
input[type=text], input[type=email],textarea, .formWhite, select{
	font-size: 17px;
	width: 87%;
	border: none;
	background-color: white;
	font-family: inherit;
	font-size: medium;
	/* margin-bottom: 0.8rem; */
	padding: 1.0em;
	padding-left: 1em;
	padding-right: 1em;
	box-sizing: border-box;
	font-weight: 450;
	border-radius: 8px;
}
.try-validate:invalid{
	outline: 1px dotted #f07f7f;
	background-color: white;
}
.try-validate:invalid:focus{
	outline: 2px solid rgb(255, 87, 87);
}
label.error{
	text-transform: none;
	color:red;
	height: 24px;
	margin: 0;
	font-weight: normal;
	font-size: small;
}
textarea{
	resize: vertical;
	min-height: 10em;
}
form button{
	margin-right: 13%;
	display: block;
	margin-left: auto;
	font-size: 20px;
	font-family: inherit;
	cursor: pointer;
	border: none;
	background-color: #ffb34b;
	color: white;
	padding: 5em;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	box-sizing: border-box;
	border-radius: 30px;
}
form button:hover{background-color: #ffbb5c;}
form button:active{background-color: #ffac39;}
#sendButton{
	grid-column-start: 2;
}


.select-wrapper {
	position: relative;
}
.select-wrapper::after {
	background-image: url(/assets/svg/arrow-down.svg);
	right: 37px;
	position: absolute;
	user-select: none;
	pointer-events: none;
	width: 28px;
  height: 20px;
  content: "";
  background-repeat: no-repeat;
  top: 0px;
}

.formWhite{
	padding-top: 66px;
	padding-bottom: 53px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 48px;
	padding-left: 60px;
}
.formWhite label{
	margin: 0;
	display: inline-block;
	font-size: 17px;
}
.formWhite input[type=checkbox]{
	display: inline-block;
	margin-right: 1em;
}

input[type=checkbox]{
	appearance: none;
	background-color: var(--hp-light-bg);
	width: 12px;
	height: 12px;
	vertical-align: -3px;
	border-radius: 4px;
}
input[type=checkbox]:checked{
	background-color: var(--hp-orange-dark);
}

#title{
	border: none;
	width: 1px;
	height: 1px;
	margin: 0;
	position: absolute;
	left: 1px;
	padding: 0;
	background-color: initial;
}

.popup-container{
	position: relative;
	width: 100%;
	height: 0;
}
.popup{
	position: absolute;
	background-color: white;
	border: black 1px;
	z-index: 1;
	margin: 0 auto;
	padding: 2em;
	top: -22em;
	flex: 0 1 auto;
	text-align: center;
	filter: drop-shadow(0 0.5rem 0.6rem #00000036);
	transition-property: top opacity;
	transition-duration: 0.5s;
	opacity: 1.0;
	width: 60%;
  margin-left: 20%;
}
.popup-anim{
	opacity: 0.0;
	top: 22em;
}
.popup button{
	width: 50%;
	background-color: rgb(29, 29, 29);

	margin-right: auto;
	display: block;
	margin-left: auto;
	font-size: 20px;
	font-family: inherit;
	cursor: pointer;
	border: none;
	background-color: #8d75af;
	color: white;
	padding: 2em;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	box-sizing: border-box;
	border-radius: 30px;
}
.popup button:hover{background-color: #a78ec9;}
.popup button:active{background-color: #745c96;}

@media screen and (max-width: 1370px){
	.main-content{
		width: 85%;
	}
}

@media screen and (max-width: 800px){
	.main-content{
		width: 95%;
	}

	
	input[type=text], input[type=email],textarea, .formWhite, select{
		width: 100%;
		font-size: 12px;
	}

	form button{
		width: 100%;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		font-size: 16px;
	}

	.formWhite {
		padding-left: 0;
		justify-items: center;
	}
	.formWhite label {
		font-size: 11px;
	}

	label{
		font-size: 12px;
	}

	.contactoGrid {
		grid-template-columns: 8em auto;
		margin-left: 0;
	}

	.select-wrapper::after{
		top: 4px;
		right: 12px;
	}

	.popup{
		width: 100%;
		margin-left: 0;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 400px){
	.big_letters{
		font-size: 32px;
	}
/* 	.formWhite {
		grid-template-columns: 1fr;
		padding-left: 2em;
		justify-items: start;
	} */

	.grid_span2{
		grid-column-end: span 2;
	}
	div.grid_span2{
		margin-top: 1em;
	}
	.contactoGrid {
		grid-template-columns: 4em auto;
	}
}