@charset "utf-8";
/* CSS Document */

.wrapper {position: relative; display: flex}

input .nombre .telefono .correo {
	width: 10rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border-radius: 0.25rem;
	border: 1px solid #585858;
	color: #000000;
}

textarea .mensaje {
	width: 10rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border-radius: 0.25rem;
	border: 1px solid #585858;
	color: #000000;
}

select:valid{border-color: #55d688;}
select:invalid{border-color: #fd4444;}
select:invalid ~ .validation {opacity: 1;}
select:invalid, select:invalid ~ .validation{ animation: shake 0.1635s 0s 3;
}

.validation{
	position: absolute;
	top: 0.55rem;
	right: 0.7rem;
	opacity: 0;
	color: #fd4444;
}

@keyframes shake{
	0%, 100% { transform: translateX(0);}
	15% { transform: translateX(8px);}
	75% {transform: translateX(-8px);}
}

input:valid{border-color: #55d688;}
input:invalid{border-color: 1px solid rgb(234, 234, 234);}
input:invalid ~ .validation {opacity: 1;}
input:invalid, input:invalid ~ .validation{ animation: shake 0.1635s 0s 3;
}

textarea:valid{border-color: #55d688;}
textarea:invalid{border-color: 1px solid rgb(234, 234, 234);}
textarea:invalid ~ .validation {opacity: 1;}
textarea:invalid, textarea:invalid ~ .validation{ animation: shake 0.1635s 0s 3;
}