@CHARSET "ISO-8859-1";


.titulo-contato{
    margin: 100px auto 0px;
    width: 80%;
}
.titulo-contato h1{
	font-family: 'Montserrat', sans-serif;
    color: #ff5252;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -2px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}


/**** CONTATO *****/
.contato{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-direction: row;
	margin: 0 auto;
	width: 80%;
}

.mapa{
	width: 50%;
}

.mapa iframe{ 
	width: 90%;
	height: 90%
}

.formulario{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	width: 50%;
}
.formulario form{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 90%;
	margin-bottom: 30px;
}
.formulario form .line{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: flex-end;
}
.formulario form .line textarea{
	min-height: 150px;
    height: 34px;
}
.formulario form .line input, .formulario form .line textarea{
	width: 100%;
	background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    line-height: 1.42857;
    margin: 5px 0px;
    padding: 6px 12px;
    transition: border-color 1s;
}
.formulario form .line input:FOCUS, .formulario form .line textarea:FOCUS{
	border: 1px solid #ff5252;
}
.formulario form .line_sucesso{
	color: #00904d;
    font-size: 16px;
    font-weight: 600;
    align-self: center;
    background-color: #ECEFF1;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}
.formulario form .line_info{
	color: #0277BD;
	font-size: 16px;
    font-weight: 600;
    align-self: center;
    background-color: #ECEFF1;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}
.formulario form .line_erro{
	color: #F44336;
	font-size: 16px;
    font-weight: 600;
    align-self: center;
    background-color: #ECEFF1;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}
.formulario form .line_send{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
    margin-top: 10px;
    align-items: center;
}
.formulario form .line_send button{
	color: #fff;
    border: 0px;
    padding: 10px;
    width: 100px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 400;
    background-color: #535353;
    margin: 10px;
}
.formulario form .line_send button:HOVER{
    background-color: #ff5252;
}

.formulario .response{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 90%;
	margin-bottom: 30px;
	text-align: center;
}

.formulario .response p.sucesso{
	width: 100%;
	color: #59B42D;
	font-size: 20px;
    font-weight: 400;
    align-self: center;
	text-align: center;
}

.formulario .response p.erro{
	width: 100%;
	color: #ff5252;
	font-size: 20px;
    font-weight: 400;
    align-self: center;
	text-align: center;
}

.formulario .response a{
	color: #fff;
    border: 0px;
    padding: 10px;
    width: 100px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 400;
    background-color: #535353;
    margin: 10px;
}

.formulario .response a:HOVER{
    background-color: #ff5252;
}


/* ****** MAPA GOOGLE INDEX ******* */
.overflow{
	overflow: hidden;
}
.overlay {
    background: transparent;
    position: relative;
    height: 300px;
    top: 300px;
    margin-top: -300px;
    width: 100%;
}


@media (max-width: 969px) {
	.titulo-contato{
		margin-top: 0px;
		width: 100%;
	}
	.titulo-contato h1{
		margin: 10px 0px;
	}
}

@media (max-width: 768px) {
	.contato{
		flex-direction: column;
		width: 90%;
	}
	.mapa{
		width: 100%;
		order: 2;
	}
	.mapa iframe{ 
		width: 100%;
	}
	.formulario{
		width: 100%;
		order: 1;
	}
}

@media (max-width: 459px) {
	.titulo-contato h1{
		font-size: 40px;
	}
}