:root {
	--azul: #333366;
	--amarelo:#DDAA22;
	--vermelho:#CC0000;
	--branco: #FFFFFF;
	--preto: #000000;
	--cinza01: #DDDDDD;
	--cinza02: #555555;
}




html, body{
	padding:0px;
	margin:0px;
	overflow-x: hidden;
	font-family: 'Roboto', sans-serif;
	background-color: #F9F9F9;
}
a, ul, li, p, h1, h2, h3, h4, h5, h6, span{	
	text-decoration:none;
	margin: 0px;
	padding: 0px;
	line-height: 150%;
}
a{
	color: inherit;
}
*{
	transition: 0.3s ease;
}
.flex{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.container{
	width:96%;
	max-width:1200px;
	margin:auto;
	border-box:box-sizing;
}

/*HEADER*/
	header{
		width: 100%;
		padding: 15px 0;
		background-color: var(--branco);
	}
	header .container{
		gap: 50px;
		align-items: center;
	}
	.headerMarca{
		width: auto;
	}
	.headerMarca img{
		height: 70px;
	}
	.headerConteudo{
		width: 100%;
		display: flex;
		gap: 50px;
		justify-content: flex-end;
	}
	.headerConteudoMenu{
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	.headerConteudoMenu ul{
		width: 100%;
		display: flex;
		justify-content: flex-end;
		gap: 25px;
		list-style: none;
		padding: 0;
	}
	.headerConteudoMenu li{
		font-size: 18px;
		font-weight: bold;
		font-style: italic;
		text-transform: uppercase;
		color: var(--azul);
	}
	.headerIcone{
		display: flex;
		gap: 15px;
	}
	.headerIconeBg{
		width: auto;
	}
	.headerIconeBg img{
		height: 20px;
		opacity: 0.75;
	}

/*BANNER*/
	.inicialBannerDesktop{
		width: 100%;
	}
	.inicialBannerDesktop img{
		width: 100%;
	}
	.inicialBannerMobile{
		display: none;
	}

/*INICIAL*/
	.inicialTitulo{
		width: 100%;
		padding: 20px 0;
		background-color: var(--azul);
	}
	.inicialTitulo h1{
		font-size: 36px;
		font-weight: normal;
		text-align: center;
		text-transform: uppercase;
		color: var(--branco);
	}
	.inicialTitulo span{
		color: var(--amarelo);
	}

/*LISTA*/
	.lista{
		padding: 50px 0;
	}
	.listaOfertas{
		margin: 50px 0 0;
		display: flex;
		flex-wrap: wrap;
		gap: 3.33%;
	}
	.listaOfertasBg{
		width: 30%;
		height: auto;
		margin: 0 0 3.33%;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 10px;
		box-shadow: 0 0 20px #0001;
		background-color: var(--branco);
	}
	.listaOfertasBg:hover{
		transform: scale(1.03);
		box-shadow: 0 0 20px #0003;
	}
	.listaOfertasTitulo{
		width: 100%;
		padding: 15px 0;
		display: none;
	}
	.listaOfertasTitulo p{
		text-align: center;
		text-transform: uppercase;
		font-weight: 300;
		color: var(--preto);
	}
	.listaOfertasTitulo h2{
		font-size: 20px;
		text-align: center;
		color: var(--azul);
	}	
	.listaOfertasValor{
		height: auto;
		padding: 10px 0;
		text-align: center;
		display: none;
	}
	.listaOfertasValor p{
		font-size: 30px;
		font-weight: bold;
		line-height: 100%;
		color: var(--vermelho);
	}	
	.listaOfertasImagem{
		width: 100%;		
	}
	.listaOfertasImagem img{
		width: 100%;
		margin: 0 0 -8px;
	}

/*CARROUSSEL*/
	.carroussel{
		width: 100%;
		height: auto;
	}
	.carrousselBg{
		width: 100%;
		height: auto;
		background-size: cover;
		background-position: center;
	}

/*IMOVEL*/
	.imovel{
		width: 100%;
		padding: 25px;
		margin: -50px 25px 0 0;
		border-radius: 20px;
		position: relative;
		z-index: 99;
		background-color: var(--branco);
		box-shadow: 0 0 10px #0001
	}	
	.imovelInfo{
		width: 100%;
		display: flex;
		gap: 50px;
	}
	.imovelTitulo{
		width: 100%;
	}
	.imovelTitulo h1{
		font-size: 30px;
		text-transform: uppercase;
		color: var(--azul);
	}
	.imovelTitulo p{
		font-size: 18px;
		font-weight: 300;
		color: var(--preto);
	}
	.imovelValor{
		min-width: 200px;
		border-radius: 10px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		justify-content: center;
		background-color: var(--cinza01);
	}	
	.imovelValor p:first-of-type{
		font-size: 14px;
		color: var(--preto);
	}
	.imovelValor p:last-of-type{
		width: 100%;
		line-height: 100%;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		color: var(--vermelho);
	}
	.imovelDescricao{
		border-top: 1px solid #EEE;
		padding: 25px 0 0;
		margin: 25px 0;
	}
	.imovelDescricao h2{
		font-size: 18px;
		margin: 0 0 10px;
		color: var(--vermelho);
	}
	.imovelDescricao p{
		font-size: 18px;
		font-weight: 300;
		line-height: 150%;
	}

/*FORMULARIO*/
	.formulario{
		width: 50%;
		margin: -50px 0 0 0;
		position: relative;
		z-index: 99;
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 0 10px #0001;
		background-color: var(--branco);
	}
	.formularioTexto{
		padding: 25px;
		background-color: var(--azul);
	}
	.formularioTexto p{
		font-size: 16px;
		text-align: center;
		color: var(--amarelo);
	}
	.formularioBg{
		display: flex;
		flex-direction: column;
		border-box:box-sizing;
		padding: 10px 25px;
	}
	.formularioBg p{
		color: var(--cinza02);
	}
	.formularioInput,
	.formularioSelect,
	.formularioTextarea{
		height: 45px;
		border:1px solid #CCC;
		outline: none;
		padding: 0 10px;
		font-size: 16px;
		border-radius: 5px;
		background-color: #EEE;
	}
	.formularioTextarea{
		height: 200px;
		padding: 10px;
	}
	.formularioSubmit{
		width: 100%;
		height: 50px;
		border: none;
		margin: 0 0 30px;
		font-size: 18px;
		font-weight: bold;
		color: #FFF;
		background-color: var(--vermelho);
	}

/*WHATSAPP*/
	.whatsapp{
		width: 70px;
		height: 70px;
		border-radius: 100px;
		position: fixed;
		z-index: 997;
		bottom:20px;
		right: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background-color: green;
	}
	.whatsapp img{
		width: 30px;
		margin: 3px -2px 0 0;
	}

/*FOOTER*/
	footer{
		width: 100%;
		margin: 50px 0 0;
		padding: 50px 0;
		background-color: var(--cinza01);
	}
	footer .container{
		gap: 50px;
	}
	.footerMarca{
		width: 100%;
		text-align: center;
	}	
	.footerMarca img{
		width: 200px;
	}
	.footerAssinatura{
		width: 100%;
		margin: 25px 0 0;
		padding: 25px 0 0;
		border-top: 1px solid #0001;
	}
	.footerAssinatura p{
		font-size: 12px;
		text-align: center;
		color: var(--cinza02);
	}

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

@media screen and (max-width:769px){
	.flex{
		flex-direction: column;
	}
	/*HEADER*/
		header{
			width: 100%;
			padding: 15px 0;
			background-color: var(--branco);
		}
		header .container{
			gap: 25px;
			align-items: center;
		}
		.headerMarca{
			order: 2;
			width: 100%;
			padding: 50px 0 0;
		}
		.headerMarca img{
			height: 70px;
		}
		.headerConteudo{
			width: 100%;
			height: 20px;
			top: 0;
			padding: 15px;
			position: absolute;
			gap: 25px;
			background-color: var(--cinza01);
		}		
		.headerConteudoMenu ul{
			justify-content: flex-start;
			gap: 20px;
			padding: 0 10px;
		}
		.headerConteudoMenu li{
			font-size: 14px;
		}	
		.headerIcone{
			padding: 0 10px;
		}	
		.headerIconeBg img{
			height: 20px;
		}

	/*BANNER*/
		.inicialBannerDesktop{
			display: none;
		}
		.inicialBannerMobile{
			display: block;
		}
		.inicialBannerMobile img{
			width: 100%;
		}

	/*INICIAL*/
		.inicialTitulo h1{
			max-width: 300px;
			margin: auto;
			font-size: 24px;
		}

	/*LISTA*/
		.lista{
			padding: 50px 0 0;
		}
		.listaOfertas{
			margin: 0;
			gap: 10px;
		}
		.listaOfertasBg{
			width: 100%;
		}

	/*IMOVEL*/
		.imovel{
			width: 90%;
			padding: 25px 5%;
		}	
		.imovelInfo{
			flex-wrap: wrap;
			gap: 15px;
		}
		.imovelTitulo{
			width: 100%;
		}
		.imovelTitulo h1{
			text-align: center;
		}
		.imovelTitulo p{
			text-align: center;
		}
		.imovelValor{
			min-width: 150px;
			margin: auto;
			padding: 15px;
		}	

	/*FORMULARIO*/
		.formulario{
			width: 100%;
			margin: 25px 0 0 0;
		}

	/*POPUP*/
		.popUp{
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			position: fixed;
			z-index: 999;
			display: none;
			justify-content: center;
			align-self: center;
			overflow-y: auto;
			background-color: rgba(0, 0, 0, 0.7);
		}	
		.popUp .container{
			max-width:90% 
		}
		.popUp .flex{
			height: auto;
			position: relative;
			z-index: 999;
			justify-content: center;
			align-items: center;
		}
		.popUpBg{
			width: 100%;
			height: auto;
			max-width: 500px;
			padding: 5px;
			background: #FFF;
			box-shadow: 0 0 5px #000;
		}
		.popUpBgFechar{
			width: 30px;
			height: 30px;
			border-radius: 30px;
			border:5px solid #FFF;
			float: right;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: -25px -30px 0 0;
			font-weight: bold;
			font-family: 'Exo', sans-serif;
			cursor: pointer;
			color: #FFF; 
			background-color: #07A;
		}
		.popUpConteudo{
			height: auto;
			margin: 10px;
		}
		.popUpConteudo h2{
			text-align: center;
			font-size: 30px;
			margin: 0 0 20px;
			color: #07A
		}	
		.popUpConteudo .flex{
			flex-direction: column;
		}
		.popUpConteudoInput,
		.popUpConteudoSelect,
		.popUpConteudoTextarea{
			width: 100%;
			height: 40px;
			margin: 5px 0;
			border:1px solid #CCC;
			background-color: #EEE; 
		}
		.popUpConteudoTextarea{
			height: 100px;
		}
		.popUpConteudoSubmit{
			width: 150px;
			height: 50px;
			border: none;
			margin: 10px;
			font-size:16px;
			color: #FFF;
			background-color: #07A;
		}

	/*FOOTER*/
		footer{
			width: 100%;
			margin: 50px 0 0;
			padding: 50px 0;
			background-color: var(--cinza01);
		}
		footer .container{
			gap: 50px;
		}
		.footerMarca{
			width: 100%;
			text-align: center;
		}	
		.footerMarca img{
			width: 200px;
		}
		.footerAssinatura{
			width: 100%;
			margin: 25px 0 0;
			padding: 25px 0 0;
			border-top: 1px solid #0001;
		}
		.footerAssinatura p{
			font-size: 12px;
			text-align: center;
			color: var(--cinza02);
		}
}