@charset "UTF-8";
* {
	box-sizing: border-box;
}
html {
	height: 100%;
	-webkit-text-size-adjust: none;
	overflow-x: hidden;
}
body {
	position: relative;
	min-height: 100%;
	margin: 0;
	font-family: sans-serif;
	line-height: 1.5;
	overflow: hidden;
}
h2{
	color:#8bb9e7;
	line-height: 1.2;
	margin:0;
	letter-spacing: -2px;
}
@media (min-width:  750px){ h2{font-size: 2.2em;} }
@media (min-width: 1050px){ h2{ font-size: 2.5em; } }

a{
	text-decoration: none;
	color: #003399;
}
ul{
	list-style:none;
	padding-left: 1em;
	text-indent: -1em;
}
li:before{
	content:"\2013 ";
	margin-right: .5em;
}

.screen-reader-text {
	position: absolute!important;
	clip: rect(1px,1px,1px,1px);
	width: 1px;
	height: 1px;
	font-size: 1px;
}

.max-width{
	max-width: 500px;
	margin: 0 auto;
}
@media (min-width:  750px){ .max-width{ max-width: 850px } }
@media (min-width: 1050px){ .max-width{ max-width:1050px } }
@media (min-width: 1450px){ .max-width{ max-width:1050px } }

/*
** GENERAL *********************************************
*/
.main{
	padding-bottom: 5em;
}
.section{
	position: relative;
	padding: 1em;
}

/*
** HEADER *********************************************
*/
.header{
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: 2em 1em 0;
}
.header-logo{
	max-width: 100%;
	width: 20em;
	height: auto;
}
@media (min-width:  750px){
	.header{
		text-align: left;
	}
}
@media (min-width:  1050px){
	.header{
		padding-top:3em;
	}
	.header-logo{
		width: 25em;
	}
}

/*
** HERO *********************************************
*/
.hero{
	position:relative;
	z-index: -1;
	min-height: 70vh;
	background-image: url("/images/banner-water-drop-crop.jpg");
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}
.hero-content{
	width: 100%;
	padding: 7em 1em 4em;
}
.hero-title{
	max-width: 8em;
	margin: 0 auto;
	font-size: 2em;
	line-height: 1.2;
	letter-spacing: -2px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
	text-align: center;
}
@media (min-width:  350px){
	.hero-title{
		font-size: 2.5em;
	}
}
@media (min-width:  750px){
	.hero{
		min-height: 45vh;
	}
	.hero-content{
		padding: 7em 1em 6em;
	}
	.hero-title{
		text-align: left;
		margin: 0;
	}
}
@media (min-width:  1050px){
	.hero{
		min-height: 70vh;
	}
	.hero-title{
		max-width: 10em;
		font-size: 3em;
	}
}

/*
** BLOCK-1 *********************************************
*/
.bloco-1{
	position: relative;
	margin-top: -3em;
	padding: 2em 0 3em;
}
.bloco-1:before{
	content:"";
	position:absolute;
	z-index: -1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image: url("/images/bg-art/gray-bg-small.svg");
	background-position: center;
	background-repeat:no-repeat;
	background-size: 100% 100%;
}
.bloco-1-mobile-app{
	display: block;
	margin: 0 auto;
	height: auto;
	width: 17em;
	max-width: 70%;
}
@media (min-width:  750px){
	.bloco-1{
		margin-top: -3.5em;
		padding: 4em 0 3em;
	}
	.bloco-1:before{
		background-image: url("/images/bg-art/gray-bg.svg");
	}
	.bloco-1-mobile-app{
		position: absolute;
		bottom: 0;
		right: 0;
		transform: translateY(100%);
	}
}
@media (min-width:  1050px){
	.bloco-1-mobile-app{
		top: -18em;
	}
}

/*
** BLOCK-2 *********************************************
*/
@media (min-width:  750px){
	.bloco-2{
		padding-right: 18em;
		padding-top: 3em;
	}
}

/*
** BLOCK-3 *********************************************
*/
.bloco-3{
	position: relative;
}
.bloco-3:before{
	content:"";
	position: absolute;
	z-index:-1;
	top: -15em;
	bottom: 0;
	left: 0;
	width: 100%;
	background-image: url("/images/bg-art/waves-gray.svg");
	background-position: left;
	background-repeat:no-repeat;
	background-size: cover;
}
.bloco-3-installation{
	display: block;
	margin: 0 auto;
	height: auto;
	width: 28em;
	max-width: 100%;
	padding-bottom: 3em;
}
@media (min-width:  750px){
	.bloco-3{
		padding: 0 0 5em;
	}
	.bloco-3:before{
		top: -5em;
		bottom: -5em;
	}
	.bloco-3-installation{
		display: inline;
		width: 52%;
		height: auto;
	}
	.bloco-3-content{
		display: inline-block;
		margin-left: -6%;
		width: 53%;
		vertical-align: bottom;
	}
}
@media (min-width:  1050px){
	.bloco-3{
		padding-bottom: 8em;
	}
	.bloco-3:before{
		top: 0;
		bottom: unset;
		padding-top: 51.8%;
	}
	.bloco-3-content{
		margin-left: 0;
		width: 45%;
	}
}

/*
** BLOCK-4 *********************************************
*/
.bloco-4{
	position: relative;
}
.bloco-4:before,
.bloco-4:after{
	content:"";
	background-position: center;
	background-repeat:no-repeat;
}
.bloco-4:before{
	position:absolute;
	z-index: -1;
	bottom: 1em;
	right: 0;
	width: 100%;
	padding-top: 15em;
	background-image: url("/images/bg-art/frame-2.svg");
	background-size: contain;
}
.bloco-4:after{
	display: block;
	width: 100%;
	padding-top: 13em;
	margin: 2em 0 1em;
	background-image: url("/images/city-skyline.jpg");
	background-size: contain;
}
@media (min-width:  360px){
	.bloco-4{
		padding-bottom: 7em;
	}
	.bloco-4:before{
		width: 60%;
	}
	.bloco-4:after{
		position:absolute;
		bottom: 1em;
		right: 0;
		width: 60%;
	}
}
@media (min-width:  750px){
	.bloco-4:before,
	.bloco-4:after{
		padding-top: 25em;
		width: 55%;
		top: -2em;
		bottom: unset;
	}
	.bloco-4:before{
		padding-top: 28em;
		top: -1.7em;
	}
}
@media (min-width:  1050px){
	.bloco-4:before,
	.bloco-4:after{
		padding-top: 38em;
		top: -4em;
		width: 58%;
	}
	.bloco-4:before{
		padding-top: 42em;
	}
}

/*
** BLOCK-5 *********************************************
*/
.bloco-5-contato{
	margin: 0.5em 0;
}
.bloco-5-contato-link{
	display: inline-block;
	padding: 0.6em 1em;
	padding-left: 3em;
	color: #003399;
	background-size: 4.2em;
	background-position: left -0.9em center;
	background-repeat:no-repeat;
}
.bloco-5-whatsapp{
	background-image: url(/images/bg-art/icon-whatsapp.svg);
}
.bloco-5-whatsapp b{
	font-size: 1.5em;
}
.bloco-5-horario{
	display: block;
	margin-top: -0.4em;
	color: #003399;
	position: relative;
	font-size: 0.9em;
}
.bloco-5-email{
	background-image: url(/images/bg-art/icon-email.svg);
}
@media (min-width:  1050px){
	.final-text{
		margin-top: 5em;
	}
}

/*
** FOOTER *********************************************
*/
.footer{
	position: relative;
	padding: 6em 1em;
	text-align: center;
}
.footer-copyright{
	margin: 0;
}
.footer:before{
	content:"";
	position: absolute;
	z-index: -1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image: url("/images/bg-art/waves-footer.svg");
	background-position: center;
	background-repeat:no-repeat;
	background-size: 100% 100%;
}
@media (min-width:  750px){
	.footer{
		padding-top: 8em;
	}
	.footer:before{
		height:150%;
	}
	.footer-copyright{
		display: inline-block;
		margin: 0;
	}
	.footer-copyright:after{
		content: " \2013 ";
	}
}