*{
	box-sizing: border-box;
}
body {
	padding: 0;
	font-family: 'Lato', serif;
	font-size:18px;
	margin:0px;
	color:#FFF;
}


a:link {
	text-decoration: none;
	color: white;
}
a:visited {
	text-decoration: none;
	color: white;
}
a:hover {
	text-decoration: none;
	color: white;
}
a:active {
	text-decoration: none;
	color: white;
}


.flex{
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
	flex-wrap: wrap;
}
.flex_vertical_center{
	align-items:center;
}
.flex_vertical_bottom{
	align-items:flex-end;
}
.flex_vertical_wrap{
	flex-wrap: wrap;
}
.flex_space_right_end{
	justify-content:flex-end;
}
.flex_center{
	justify-content:center;
}
.flex_space_between{
	justify-content:space-between;
}
.flex_space_around{
	justify-content:space-around;
}


/*------------------------------ HOME ------------------------------*/
#topo{
	height: 100px;
	position: relative;
}
#topo .base{
	width: 100%;
	height:100px;
	position: relative;
	/*background-color: #82bc41;*/
}
#topo .base .esquerda{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 350px 400px 0 0;
	/*border-color: #604f9a transparent transparent transparent;*/
	position: absolute;
	z-index: 9;
	top: 0px;
	left: 0px;
}
#topo .base .esquerda_interna{
	width: 100px;
	height: 100px;
}
#topo .base .esquerda_interna_complemento{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 100px 150px 0 0;
	/*border-color: #604f9a transparent transparent transparent;*/
	position: absolute;
	z-index: 9;
	top: 0px;
	left: 100px;
}
#topo .base .logo{
	position: absolute;
	left: 35px;
	top: 35px;
	z-index: 10;
}
#topo .base .logo img{
	height: 120px;
}
#topo .base .logo_interna{
	position: absolute;
	left: 5px;
	top: 10px;
	z-index: 10;
}
#topo .base .logo_interna img{
	height: 90px;
}
#topo .base .direita{
	width: 150px;
	height: 100px;
	/*background-color: #29c1dd;*/
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 15px 15px 0px 0px;
}
#topo .base .direita div{
	margin-bottom: 2px;
}
#topo .base .direita_complemento{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 100px 100px 0;
	/*border-color: transparent #29c1dd transparent transparent;*/
	position: absolute;
	right: 150px;
	top: 0px;
}
#topo .base .direita_baixo{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 50px 50px 50px;
	/*border-color: transparent transparent #f05883 transparent;*/
	position: absolute;
	bottom: 0px;
	right: 150px;
}
#topo .base .menu{
	position: absolute;
	left: 370px;
	bottom: 20px;
}
#topo .base .menu_interna{
	position: absolute;
	left: 250px;
	bottom: 20px;
}
#topo .base .menu .item, #topo .base .menu_interna .item{
	margin-left: 20px;
	font-size: 16px;
}

/* Mobile */
#topo_mobile{
	height: 100px;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 9;
}
#topo_mobile .base{
	width: 100%;
	height:14vh;
	position: inherit;
	/*background-color: #82bc41;*/
}
#topo_mobile .base .esquerda{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 140px 190px 0 0;
	/*border-color: #604f9a transparent transparent transparent;*/
	position: absolute;
	z-index: 9;
	top: 0px;
	left: 0px;
}
#topo_mobile .base .logo{
	position: absolute;
	left: 10px;
	top: 30px;
	z-index: 10;
}
#topo_mobile .base .logo img{
	height: 9vh;
}
#topo_mobile .menu_hamburger{
	height: 14vh;
}
#topo_mobile .menu_hamburger img{
	height: 5vh;
    margin-right: 5vw;
}

#menu_mobile{
	width: 100vw;
	height: 100vh;
	background-color: #82bc41;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99;
	display: none;
}

#menu_mobile img{
	height: 15vh;
}
#menu_mobile .item{
	border-bottom: 1px solid #a7da7f;
	font-size: 20px;
	margin-bottom: 15px;
	padding-bottom: 15px;
	text-align: center;
}
#menu_mobile .fechar{
	position: absolute;
	right: 5vw;
	top: 5vw;
	width: 5vw;
	height: 5vw;
	background-image: url(../img/bt_fechar.png);
	background-size: cover;
}


#foto{
	width: 100%;
	height: 500px;
	background-size: cover;
	background-position: center;
	position: relative;
}
#box {
	position: relative;
}
#box .box{
	position: absolute;
	right: 0px;
	top: -200px;
	width: 500px;
	height: 250px;
	background-color: #6857a5;
	background-image:url(../img/bg_box_home.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding: 40px 60px 0px 20px;
	text-align: right;
}
#box .box .titulo{
	font-size: 28px;
	font-weight: 700;
}
#box .box .subtitulo{
	margin-top: 5px;
	font-size: 15px;
	color: #cec5ed;
}
#box .box .detalhe{
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 275px;
	width: 35px;
	background-color: #f15b54;
}
#box .box .detalhe .topo{
	position: absolute;
	right: 0px;
	top: -35px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 35px 35px;
	border-color: transparent transparent #f15b54 transparent;
}


#box_infs{
	background-color: #ececec;
	width: 100%;
	min-height: 100px;
	margin-top: 120px;
	padding: 80px 40px;
}
#box_infs .item{
	width: 25%;
}
#box_infs .item .titulo{
	font-size: 30px;
	font-weight: 700;
	margin: 10px 0px;
}
#box_infs .item .texto{
	color: #787878;
	font-size: 14px;
	width: 90%;
}
#box_infs .separacao{
	width: 1px;
	border-right: 1px solid #dcdcdc;
}
#box_infs .item .elemento_1{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 35px 35px;
	border-color: transparent transparent #604f9a transparent;
}
#box_infs .item .cor_titulo1{
	color:#604f9a;
}
#box_infs .item .elemento_2{
	width: 35px;
	height: 35px;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
	background-color: #f15b54;
}
#box_infs .item .cor_titulo2{
	color:#f15b54;
}
#box_infs .item .elemento_3{
	width: 20px;
	height: 35px;
	-ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg); /* Standard syntax */
	background-color: #29c1dd;
}
#box_infs .item .cor_titulo3{
	color:#29c1dd;
}


/*------------------------------  RODAPE ------------------------------ */
#rodape{
	border-top: 5px solid #dcdcdc;
	margin-top: 60px;
}
#rodape .imagem{
	background-image: url(../img/img_rodape.png);
	background-repeat:repeat-x;
	background-position: bottom right;
	width: 75%;
}
#rodape .endereco{
	padding: 30px;
	color:#604f9a;
	font-size: 14px;
	text-align: right;
}
#rodape_mobile{
	border-top: 5px solid #dcdcdc;
	margin-top: 60px;
}
#rodape_mobile .imagem{
	background-image: url(../img/img_rodape.png);
	background-position: bottom center;
	background-repeat: repeat-x;
	width: 100%;
	height: 100px;
}
#rodape_mobile .endereco{
	padding: 30px;
	color:#604f9a;
	font-size: 20px;
	text-align: center;
}

/*------------------------------  TITULOS ------------------------------ */
#titulo{
	margin-top: 70px;
}
#titulo .container{
	background-color: #f6f6f6;
	padding: 75px;
	font-size: 48px;
	font-weight: bold;
}
#titulo .texto_nosso_quintal{
	color: #604f9a;
}
#titulo .elemento_nosso_quintal{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 40px 40px;
	border-color: transparent transparent #604f9a transparent;
	margin: 8px 10px 0px 0px;
}
#titulo .texto_fotos{
	color: #f15b54;
}
#titulo .elemento_fotos{
	width: 35px;
	height: 35px;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
	background-color: #f15b54;
	margin: 13px 10px 0px 0px;
}
#titulo .texto_tangram{
	color: #29c1dd;
}
#titulo .elemento_tangram{
	width: 20px;
	height: 35px;
	-ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg); /* Standard syntax */
	background-color: #29c1dd;
	margin: 10px 13px 0px 0px;
}
#titulo .texto_orcamento{
	color: #82bc41;
}
#titulo .elemento_orcamento{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 20px 0;
	border-color: transparent #82bc41 transparent transparent;
	margin: 8px 10px 0px 0px;
}
#titulo .texto_contato{
	color: #f1b70f;
}
#titulo .elemento_contato{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 0 0 40px;
	border-color: transparent transparent transparent #f1b70f;
	margin: 9px 10px 0px 0px;
}



/*------------------------------  NOSSO QUINTAL ------------------------------ */
#nosso_quintal{
	margin-top: 70px;
}
#nosso_quintal .foto{
	width: 35%;
	background-size:cover;
	background-position: center;
}
#nosso_quintal .texto{
	width: 60%;
	color: #383838;
	text-align: left;
}

/*------------------------------  COLÔNIA DE FÉRIAS ------------------------------ */
#coloniadeferias{
	margin-top: 70px;
}
#coloniadeferias .foto{
	width: 90%;
	background-size:cover;
	background-position: center;
}
#coloniadeferias .texto{
	width: 90%;
	color: #383838;
	text-align: left;
}

/*------------------------------  FOTOS ------------------------------ */
#fotos{
	margin-top: 70px;
}
#fotos .item{
	width: 366px;
	height: 280px;
	background-size: cover;
	margin: 0px 0px 40px 0px;
}
#fotos .item .afoto{
	width:100%; height:100%;
	background-size: cover;
}

/*------------------------------  TANGRAM ------------------------------ */
#tangram{
	margin-top: 70px;
}
#tangram .item{
	width: 366px;
	height: 280px;
	background-color: #f15b54;
	margin: 0px 0px 40px 0px;
}

#tangram .foto{
	width: 20%;
}
#tangram .foto img{
	width: 100%;
}
#tangram .texto{
	width: 78%;
	color: #383838;
	text-align: left;
}
#tangram .exemplos{
	margin-top: 70px;
	color:#939393;
}
#tangram .exemplos .item{
	width: 22.2%;
	min-height: 40px;
	background-color: #f7f7f7;
	border: 1px solid #d2d2d2;
	font-size: 28px;
	font-weight: bold;
}


/*------------------------------  ORÇAMENTO ------------------------------ */
#orcamento{
	margin-top: 70px;
}
#orcamento .linha{
	margin-bottom: 20px;
}
#orcamento input{
	border: 1px solid #d2d2d2;
	padding: 20px 30px;
	width: 32%;
}
#orcamento textarea{
	border: 1px solid #d2d2d2;
	padding: 20px 30px;
	width: 100%;
}
#orcamento .bt{
	width: 15%;
	background-color: #82bc41;
	padding: 20px 30px;
	text-align: center;
	cursor: pointer;
}
#orcamento #data{
	background-image: url(../img/ico_calendario.png);
	background-position: right;
	background-repeat: no-repeat;
}


/*------------------------------  CONTATO ------------------------------ */
#contato{
	margin-top: 70px;
}
#contato .formulario{
	width: 50%;
}
#contato input{
	border: 1px solid #d2d2d2;
	padding: 20px 30px;
	margin-bottom: 20px;
	width: 100%;
}
#contato textarea{
	border: 1px solid #d2d2d2;
	padding: 20px 30px;
	width: 100%;
}
#contato .bt{
	width: 25%;
	background-color: #f1b70f;
	padding: 20px 30px;
	text-align: center;
	cursor: pointer;
}
#contato .mapa{
	width: 48%;
	text-align: right;
	color: #959595;
}

#whatsapp {
    padding: 0px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    border-radius: 100px;
    z-index: 999;
}


/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 300px) {
	.container {
		width: 90%;
	}
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 301px) and (max-width: 768px){
	.container {
		width: 90%;
	}
	#topo{
		display: none;
	}
	#topo_mobile{
		display: block;
	}
	#foto{
		width: 100%;
		height: 70vh;
		background-color: #000000;
		position: relative;
	}
	#box .box{
		width: 100%;
		height: auto;
		position: initial;
		background-color: #6857a5;
		background-image:url(../img/bg_box_home.png);
		background-repeat: no-repeat;
		background-position: left top;
		padding: 40px 60px;
		text-align: center;
	}
	#box .box .detalhe{
		display: none;
	}
	#box .box .detalhe .topo{
		display: none;
	}
	#box .box .titulo{
		font-size: 24px;
	}
	#box .box .subtitulo{
		font-size: 16px;
	}
	
	#box_infs{
		background-color: #f6f6f6;
		width: 100%;
		margin-top: 30px;
		padding: 80px 40px;
	}
	#box_infs .item{
		width: 100%;
		margin-bottom: 80px;
	}
	#box_infs .item:last-child{
		margin-bottom: 0px;
	}
	
	
	/*------------------------------  TITULOS ------------------------------ */
	#titulo{
		margin-top: 20vh;
	}
	#titulo .container{
		background-color: #f6f6f6;
		padding: 35px;
		font-size: 30px;
		font-weight: bold;
	}
	#titulo .container .texto_nosso_quintal,
	#titulo .container .texto_fotos,
	#titulo .container .texto_tangram,
	#titulo .container .texto_contato,
	#titulo .container .texto_orcamento{
		width: 100%;
		margin-top: 10px;
	}
	
	/*------------------------------  NOSSO QUINTAL ------------------------------ */
	#nosso_quintal{
		margin-top: 6vh;
	}
	#nosso_quintal .foto{
		width: 100%;
		height: 40vh;
		background-size:cover;
		background-position: center;
	}
	#nosso_quintal .texto{
		width: 100%;
		margin-top: 2vh;
		text-align: center;
	}
	
	/*------------------------------  FOTOS ------------------------------ */
	#fotos {
		margin-top: 6vh;
	}
	#fotos .item{
		width: 100%;
		height: 40vh;
		margin: 0px 0px 40px 0px;
	}
	#fotos .item .afoto{
		width:100%; height:100%;
		background-size: cover;
	}
	
	/*------------------------------  TANGRAM ------------------------------ */
	#tangram {
		margin-top: 6vh;
	}
	#tangram .foto{
		width: 100%;
		margin-bottom: 30px;
	}
	#tangram .foto img{
		width: 30%;
	}
	#tangram .texto{
		width: 100%;
		text-align: center;
	}
	#tangram .exemplos .item{
		width: 100%;
		min-height: 40px;
	}
	
	/*------------------------------  ORÇAMENTO ------------------------------ */
	#orcamento {
		margin-top: 6vh;
	}
	#orcamento .linha{
		margin-bottom: 0px;
	}
	#orcamento input{
		width: 100%;
		margin-bottom: 10px;
	}
	#orcamento textarea{
		width: 100%;
		margin-bottom: 10px;
	}
	#orcamento .bt{
		width: 100%;
		background-color: #82bc41;
		padding: 20px 30px;
		text-align: center;
		cursor: pointer;
	}
	
	/*------------------------------  CONTATO ------------------------------ */
	#contato {
		margin-top: 6vh;
	}
	#contato .formulario{
		width: 100%;
	}
	#contato .bt{
		width: 100%;
		margin-top: 10px;
	}
	#contato .mapa{
		width: 100%;
		text-align: center;
		margin-top: 20px;
	}
	
	/*------------------------------  RODAPE ------------------------------ */
	#rodape{
		display: none;
	}
	#rodape_mobile{
		display: block;
	}
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 769px) and (max-width: 1024px){
	.container {
		width: 90%;
	}
	#topo{
		display: none;
	}
	#topo_mobile{
		display: block;
	}
	#topo .base .menu .item{
		margin-left: 20px;
		font-size: 14px;
	}
	
	/*------------------------------  TITULOS ------------------------------ */
	#titulo{
		margin-top: 20vh;
	}
	#titulo .texto_nosso_quintal{
		width: 100%;
		margin-top: 20px;
		font-size: 40px;
	}
	
	/*------------------------------  NOSSO QUINTAL ------------------------------ */
	#nosso_quintal{
		margin-top: 6vh;
	}
	#nosso_quintal .foto{
		width: 100%;
		height: 40vh;
		background-size:cover;
		background-position: center;
	}
	#nosso_quintal .texto{
		width: 100%;
		margin-top: 2vh;
		text-align: center;
	}
	
	/*------------------------------  FOTOS ------------------------------ */
	#fotos {
		margin-top: 6vh;
	}
	#fotos .item{
		width: 100%;
		height: 40vh;
		background-color: #f15b54;
		margin: 0px 0px 40px 0px;
	}
	#fotos .item .afoto{
		width:100%; height:100%;
		background-size: cover;
	}
	
	/*------------------------------  TANGRAM ------------------------------ */
	#tangram .foto{
		width: 100%;
		margin-bottom: 30px;
	}
	#tangram .foto img{
		width: 30%;
	}
	#tangram .texto{
		width: 100%;
		text-align: center;
	}
	#tangram .exemplos .item{
		width: 49%;
		min-height: 40px;
	}
	
	/*------------------------------  RODAPE ------------------------------ */
	#rodape{
		display: none;
	}
	#rodape_mobile{
		display: block;
	}
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 1025px) and (max-width: 1210px){
	.container {
		width: 90%;
	}
	#topo_mobile{
		display: none;
	}
	#topo .base .menu .item{
		margin-left: 20px;
		font-size: 14px;
	}
	#topo .base .menu .item:first-child{
		display: none;
	}
	#topo .base .menu{
		left: 330px;
		bottom: 20px;
	}
	#topo .base .direita{
		width: 100px;
		font-size: 14px;
	}
	#topo .base .direita_complemento{
		right: 100px;
	}
	#topo .base .direita_baixo{
		right: 100px;
	}
	#topo .base .esquerda{
		border-width: 250px 300px 0 0;
	}
	
	/*------------------------------  FOTOS ------------------------------ */
	#fotos {
		margin-top: 6vh;
	}
	#fotos .item{
		width: 49%;
		height: 40vh;
		background-color: #f15b54;
		margin: 0px 0px 40px 0px;
	}
	#fotos .item .afoto{
		width:100%; height:100%;
		background-size: cover;
	}
	
	/*------------------------------  RODAPE ------------------------------ */
	#rodape_mobile{
		display: none;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1211px){
	.container {
		width: 1170px;
	}
	#topo_mobile{
		display: none;
	}
	#topo .base .menu .item{
		margin-left: 20px;
		font-size: 16px;
	}
	#rodape_mobile{
		display: none;
	}
}