/* ================================================================================================================== */
/* corpo */
/* ================================================================================================================== */

#index { display: block; position: relative; width: auto; margin: 0; padding: 50px 0 0 0; }

/* ================================================================================================================== */
/* slide */
/* ================================================================================================================== */

div#slide { display: block; position: relative; z-index: 1; margin: 0 18px 0 18px;  }
div#slide
{
	height: 800px;
	height: -webkit-calc(100vh - 150px);
	height:    -moz-calc(100vh - 150px);
	height:         calc(100vh - 150px);
}
	div#slide div.slide_container { display: block; position: absolute; top: 0; left: 0; width: 100%; padding: 0; height: 100%; z-index: 2; }
			div#slide div.slide { display: flex; position: absolute; top: 0; left: 0; justify-content: space-between; align-items: center; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; text-align: center; overflow: hidden; }
			div#slide div.slide span.photo { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; text-align: center; }
			div#slide div.slide[data-status="false"] span.photo { transform: scale(1); }
			div#slide div.slide[data-status="true"] span.photo { transform: scale(1.05); }
			div#slide div.slide[data-status="true"] span.photo
			{
				transition-property: all;
				-webkit-transition-property: all;
				-moz-transition-property: all;

				transition-timing-function: linear;
				-webkit-transition-timing-function: linear;
				-moz-transition-timing-function: linear;

				transition-duration: 10000ms;
				-webkit-transition-duration: 10000ms;
				-moz-transition-duration: 10000ms;
			}
			div#slide div.slide[data-status="false"] span.photo
			{
				transition-property: all;
				-webkit-transition-property: all;
				-moz-transition-property: all;

				transition-timing-function: linear;
				-webkit-transition-timing-function: linear;
				-moz-transition-timing-function: linear;

				-webkit-transition-delay: 1600ms;
				-moz-transition-delay: 1600ms;
				-o-transition-delay: 1600ms;
				transition-delay: 1600ms;

				transition-duration: 0ms;
				-webkit-transition-duration: 0ms;
				-moz-transition-duration: 0ms;
			}
			div#slide div.slide[data-status="true"] { opacity: 1; z-index: 2; }
			div#slide div.slide[data-status="false"] { opacity: 0; z-index: 1; }
				div#slide div.slide span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color4); opacity: 0.30; }
				div#slide div.slide div.text { display: inline-block; position: relative; width: auto; padding: 50px; vertical-align: middle; margin: 0 auto; text-align: center; }
				div#slide div.slide[data-status="false"] div.text { left: -100%; }
				div#slide div.slide[data-status="true"] div.text { left: 0; }
					div#slide div.slide div.text h1 { display: block; position: relative; font-size: 4.16em; overflow: hidden; font-family: var(--font2); }
					div#slide div.slide div.text h2 { display: block; position: relative; font-size: 2.91em; font-family: var(--font2); }
					div#slide div.slide div.text h2 { margin-top: 30px; }
	div#slide div.controllers { display: flex; position: absolute; justify-content: space-between; align-items: flex-start; bottom: 35px; left: 35px; width: auto; height: auto; z-index: 10; text-align: center; }
		div#slide div.controllers div.arrow { display: flex; position: relative; justify-content: space-between; align-items: center; width: 100px; height: 100px; cursor: pointer; }
			div#slide div.controllers div.arrow span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color2); opacity: 0.15; }
			div#slide div.controllers div.arrow:hover span.bg { opacity: 1; background-color: var(--color3); }
			div#slide div.controllers div.arrow span.arrow { display: inline-block; position: relative; width: 24px; height: 17px; margin: 0 auto; background: transparent url(../images/banner_arrow.png) no-repeat; }
			div#slide div.controllers div.arrow.prev span.arrow { background-position-x: 0; }
			div#slide div.controllers div.arrow.next span.arrow { background-position-x: -24px; }
			div#slide div.controllers div.arrow:hover span.arrow { background-position-y: -17px; }

@media all and ( max-width: 650px ) {
	div#slide { margin: 0; }

		div#slide div.slide div.text { padding: 15px; }

		div#slide div.controllers div.arrow { width: 50px; height: 50px; }
			div#slide div.controllers div.arrow span.bg { opacity: 0.35; }
}

/* ================================================================================================================== */
/* empresa e servicos */
/* ================================================================================================================== */

#index div.company_and_services { display: block; position: relative; padding: 150px 0; }
	#index div.company_and_services span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
	#index div.company_and_services div.col { display: inline-block; position: relative; width: 50%; height: auto; vertical-align: top; padding: 0 35px; }
	#index div.company_and_services div.col.left { text-align: right; padding-top: 50px; }
	#index div.company_and_services div.col.left h1.title { font-size: 2.5em; }
	#index div.company_and_services div.col.left h1.subtitle { font-size: 1.666em; }
	#index div.company_and_services div.col.right { text-align: left; }
	#index div.company_and_services div.col.right h1.title { font-size: 0.666em; color: var(--color2); }
	#index div.company_and_services div.col.right p { line-height: 2em; margin-top: 35px; }

@media all and ( max-width: 650px ) {
	#index div.company_and_services div.col.left { text-align: center; padding-bottom: 50px; }
	#index div.company_and_services div.col { width: 100%; padding: 0 10px; }
}

/* ================================================================================================================== */
/* efeitos */
/* ================================================================================================================== */

#index div.effects { display: block; position: relative; padding: 75px 0; background-color: var(--color1); }
	#index div.effects h1 { font-size: 0.66em; color: var(--color2); padding: 0 70px; }
	#index div.effects div.block { display: inline-block; position: relative; width: 20%; height: auto; min-height: 20px; padding: 0 25px; margin-top: 35px; }
		#index div.effects div.block a { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; }
			#index div.effects div.block a .photo { display: block; position: relative; width: 100%; padding-bottom: 100%; background: transparent no-repeat center center; background-size: cover; }
				#index div.effects div.block a .photo div.hover { display: block; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; text-align: center; opacity: 0; }
				#index div.effects div.block a:hover .photo div.hover { opacity: 1; top: 0; left: 0; width: 100%; height: 100%; }
					#index div.effects div.block a .photo div.hover span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color2); opacity: 0.8; }
					#index div.effects div.block a .photo div.hover p { display: inline-block; position: relative; vertical-align: middle; margin: 25px; }
			#index div.effects div.block a p.title { display: block; position: relative; font-size: 0.66em; color: var(--color4); text-align: center; margin-top: 15px; opacity: 1; }
			#index div.effects div.block a:hover p.title { opacity: 0; }

@media all and ( max-width: 1200px ) {
	#index div.effects div.block { width: 25%; }
}
@media all and ( max-width: 800px ) {
	#index div.effects div.block { width: 33%; }
}
@media all and ( max-width: 600px ) {
	#index div.effects div.block { width: 50%; }
}
@media all and ( max-width: 450px ) {
	#index div.effects div.block { width: 100%; }
}

/* ================================================================================================================== */
/* contactos */
/* ================================================================================================================== */

#index div.contacts { display: block; position: relative; margin: 0; background-color: var(--color3); padding: 120px; min-height: 368px; }
	#index div.contacts div.col { display: inline-block; position: relative; margin: 0; width: 50%; vertical-align: top; }
	#index div.contacts div.col.left { padding-right: 100px; }
	#index div.contacts div.col.right { padding-left: 100px; }
		#index div.contacts div.col.left h1.title { font-size: 0.666em; color: var(--color2); }
		#index div.contacts div.col.left h1.title.margin-top { margin-top: 75px; }
		#index div.contacts div.col.left h1.title.margin-bottom { margin-bottom: 35px; }
		#index div.contacts div.col.left p { margin-top: 35px; color: var(--color4); line-height: 2em; }
		#index div.contacts div.col.left a.go { display: inline-block; position: relative; border: 2px solid var(--color4); font-size: 0.588em; margin: 50px 0; color: var(--color4); padding: 5px 50px; text-decoration: none; background-color: transparent; }
		#index div.contacts div.col.left a.go:hover { color: var(--color1); border: 2px solid var(--color2); background-color: var(--color2); }
		#index div.contacts div.col.left a.contacts { font-size: 1.666em; color: var(--color4); text-decoration: none; }
		#index div.contacts div.col.left a.contacts:hover { color: var(--color2); }

@media all and ( max-width: 650px ) {
	#index div.contacts { padding: 50px 10px; }
		#index div.contacts div.col { width: 100%; }
		#index div.contacts div.col.left { padding-right: 0; text-align: center; }
		#index div.contacts div.col.right { padding-left: 0; padding-top: 50px; }
}

/* ================================================================================================================== */
/* orcamento */
/* ================================================================================================================== */

#index form.budget { display: block; position: relative; }
	#index form.budget h1.title { font-family: var(--font2); font-size: 2.91em; color: var(--color2); }
	#index form.budget p.description { font-size: 0.66em; color: var(--color4); margin-bottom: 50px; }
	#index form.budget .columns { align-items: flex-start; }
	#index form.budget .right { text-align: right; }
	#index form.budget label { display: inline-block; position: relative; width: 50%; height: auto; padding-right: 10px; vertical-align: top; margin-bottom: 20px; }
	#index form.budget label.right { padding-left: 10px; padding-right: 0; }
	#index form.budget input[type="text"],
	#index form.budget textarea { display: block; position: relative; width: 100%; line-height: 40px; border: none; border-bottom: 1px solid var(--color4); background-color: transparent; padding: 0 3px; font-size: 0.666em; color: var(--color4); }
	#index form.budget textarea { resize: none; height: 50px; }
	#index form.budget input[type="text"]::placeholder,
	#index form.budget textarea::placeholder { display: block; position: relative; color: var(--color4); font-size: 0.80em; line-height: 40px; }

	#index form.budget label.full { display: block; position: relative; width: 100%; padding: 0; }

	#index form.budget p.terms { display: block; position: relative; font-size: 0.5em; text-align: left; color: var(--color4); margin-bottom: 75px; margin-top: 25px; }
		#index form.budget p.terms a { display: inline-block; position: relative; font-size: 1em; color: var(--color4); text-decoration: underline; }
		#index form.budget p.terms a:hover { color: var(--color2); }

	#index form.budget input[type="submit"] { display: inline-block; position: relative; font-size: 0.583em; line-height: 30px; border: 2px solid var(--color4); background-color: transparent; color: var(--color4); padding: 0 75px; margin: 0; text-decoration: none; cursor: pointer; width: auto; }
	#index form.budget input[type="submit"]:hover { border: 2px solid var(--color2); background-color: var(--color2); color: var(--color1); }

@media all and ( max-width: 1150px ) {
	#index form.budget { text-align: left; }
}

@media all and ( max-width: 650px ) {
		#index form.budget label { width: 100%; padding: 0; }
		#index form.budget label.right { padding: 0; }
}