/* 
    Created on : 12 de abr de 2023, 18:31:36
    Author     : giordano
*/

:root {
	--contato-font-family: 'Eric Lite Extended', 'EricLiteExtended';
}

main {
	background: #D9D9D9;
	padding: 0 0 0.25rem;
}

.contato-wrapper {
	--column-min-height: 800px;
}

.contato-wrapper > .column,
.contato-wrapper > .column:last-child {
	display: inline-block;
	vertical-align: top;
	float: none;
	min-height: var( --column-min-height );
}

@media ( max-width: 1200px )
{
	.contato-wrapper > .column,
	.contato-wrapper > .column:last-child {
		--column-min-height: 800px;
	}
}

@media ( max-width: 640px )
{
	.contato-wrapper > .column {
		display: block;
	}
}

/** Contato Header ************************************************************/

.contato-header {
	background: #345447;
	background-image: url("../../img/home/mulher_saude.png");
    background-position: left 20% bottom;
	background-repeat: no-repeat;
	background-size: auto 95%;
	color: #FFF;
	position: relative;
	width: 55%;
}

.representante .contato-header {
	background-image: url("../../img/home/homem_saude.png");
	background-size: auto 100%;
}

.contato-header .image-header img {
	height: 100%;
}

.contato-header .description {
	--description-margin-left: 50%;
	color: #FFFFFF;
	font-family: var( --contato-font-family );
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 23px;
	margin-left: var( --description-margin-left );
	max-width: calc( 100% - var( --description-margin-left ) );
	padding: 3rem 1rem 1rem;
	width: 450px;
}

.representante .contato-header .description {
	color: #345447;
}

.contato-header .description p {
	font-family: var( --contato-font-family );
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 23px;
	margin: 0 0 0.5rem;
}

.contato-header .description h2 {
	color: #FFFFFF;
	font-family: var( --contato-font-family );
	font-style: normal;
	font-weight: 700;
	font-size: 36px;
	line-height: 42px;
	-webkit-text-stroke: 0.3px;
}

.representante .contato-header .description h2 {
	color: #345447;
}

.contato-header .description a.button {
	display: inline-block;
	background: #556A62;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	color: #FFFFFF;
	font-family: var( --contato-font-family );
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	text-align: center;
	width: 220px;
	padding: 1rem;
}

.contato-header .description a.button:hover,
.contato-header .description a.button:focus,
.contato-header .description a.button:active {
	background: #4c5f58;
	color: #FFF;
	-webkit-text-stroke: 0.5px;
}

.contato-header .description a.logo {
	display: inline-block;
	background: rgba(52, 84, 71, 0.25);
	border-radius: 0.2rem;
	margin: 1rem 0 1rem;
	padding: 0.25rem;
}

.representante .contato-header .description a.logo {
	background: rgba(249, 248, 246, 0.15);
}

.contato-header .description a.logo img {
	width: 300px;
	max-width: 100%;
}

@media ( max-width: 1300px ) {
	.contato-wrapper .contato-header,
	.contato-wrapper .contato-header {
		background-position: left 0 bottom;
	}
	
	.representante.contato-wrapper .contato-header,
	.representante.contato-wrapper .contato-header {
		background-position: left 20% bottom;
	}
}

@media ( max-width: 1200px ) {
	.contato-wrapper .contato-header,
	.contato-wrapper .contato-header {
		--column-min-height: 800px;
		background-position: left -10rem bottom;
	}
	
	.contato-header .description {
		--description-margin-left: 40%;
	}
}

@media ( max-width: 1000px ) {
	.contato-wrapper .contato-header,
	.contato-wrapper .contato-header {
		background-position: left -15rem bottom;
	}
}

@media ( max-width: 800px ) {
	.contato-wrapper .contato-header,
	.contato-wrapper .contato-header {
		min-height: 500px;
		width: 100%;
		background-position: left 0 bottom;
	}
	
	.contato-header .description {
		padding: 3rem 0 1rem;
		--description-margin-left: 50%;
		margin-left: var( --description-margin-left );
		max-width: calc( 100% - var( --description-margin-left ) );
	}
}

@media ( max-width: 640px ) {
	.contato-wrapper .contato-header,
	.contato-wrapper .contato-header {
		background-position: left -2rem bottom;
	}
}

@media ( max-width: 500px ) {
	.contato-header .description {
		--description-margin-left: 40%;
	}
	
	.contato-wrapper .contato-header,
	.contato-wrapper .contato-header {
		background-position: left -6rem bottom;
	}
}

@media ( max-width: 400px ) {
	.contato-header .description {
		--description-margin-left: 35%;
	}
	
	.contato-wrapper .contato-header,
	.contato-wrapper .contato-header {
		background-position: left -10rem bottom;
	}
}


/** Contato Form **************************************************************/

.contato-form {
	--form-width: 400px;
	padding: 3rem 2rem 2rem;
	width: 45%;
}

.representante .contato-form {
	background: #345447;
}

.contato-form h3 {
	color: #345447;
	font-family: var( --contato-font-family );
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 23px;
	text-align: left;
	margin: 0 auto 1rem;
	width: var( --form-width );
	max-width: 100%;
	-webkit-text-stroke: 0.5px;
}

.representante .contato-form h3 {
	color: #FFF;
}

.contato-form form {
	width: var( --form-width );
	margin: 0 auto;
	max-width: 100%;
}

.contato-form form .input label {
	color: #000000;
	font-family: var( --contato-font-family );
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	line-height: 14px;
	padding: 0 0.25rem 0.1rem;
}

.representante .contato-form form .input label {
	color: #FFF;
}

.contato-form form .input input {
	margin-bottom: 0.5rem;
}

.contato-form form .input input[type="text"],
.contato-form form .input input[type="email"],
.contato-form form .input select {
	border-radius: 0;
	box-shadow: none;
	border: none;
	padding: 0.7em;
}
.contato-form form .input select {
	font-size: 17px;
	height: auto;
	padding: 0.7em;
	margin-bottom: 0.5rem;
}

.representante form .required > label::after {
    color: #E1A303;
}

.contato-form form .input.estado {
	display: inline-block;
	padding-right: 0.75rem;
	width: 5rem;
}

.contato-form form .input.cidade {
	display: inline-block;
	width: calc(100% - 5rem);
}

.contato-form form .captcha .input {
	display: inline-block;
	padding-right: 1rem;
	width: 50%;
}

.contato-form form .captcha .input input {
	width: 100%;
}

.contato-form form .captcha .input input::placeholder {
	opacity: 0.8;
	color: #555;
}

.contato-form form .captcha .captcha-image {
	display: inline-block;
	width: 50%;
}

.contato-form form .submit input[type="submit"] {
	background: #345447;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	border: none;
	font-family: var( --contato-font-family );
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 23px;
	padding: 1rem 2rem;
	text-align: center;
}

.representante .contato-form form .submit input[type="submit"] {
	background: #556A62;
}

.contato-form form .submit input[type="submit"]:hover {
	background: #2e4b3f;
	-webkit-text-stroke: 0.5px;
}

.representante .contato-form form .submit input[type="submit"]:hover {
	background: #4c5f58;
}

@media ( max-width: 800px ) {
	.contato-wrapper .contato-form,
	.contato-wrapper .column:last-child,
	.contato-wrapper .contato-form:last-child {
		--column-min-height: 500px;
		padding: 2rem 1rem 2rem;
		width: 100%;
	}
}

@media ( max-width: 500px ) {
	.contato-wrapper .contato-form,
	.contato-wrapper .column:last-child,
	.contato-wrapper .contato-form:last-child {
		padding: 2rem 1rem 2rem;
	}
}