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

#index { display: block; position: relative; width: 100%; margin: 0 auto; padding: 0; }
	#index div.container { display: block; position: relative; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0; }

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

#index div#slide { display: block; position: relative; width: 100%; height: 775px; z-index: 1; }
	#index div#slide div.slide { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; }
	#index div#slide div.slide[data-status="false"] { z-index: 1; opacity: 0; transform: scale(0.9); }
	#index div#slide div.slide[data-status="true"] { z-index: 2; opacity: 1; transform: scale(1); }
		#index div#slide div.slide div.text { display: inline-block; position: relative; vertical-align: middle; margin: 50px 100px; }
				#index div#slide div.slide div.text h3 { display: block; position: relative; font-size: 35px; line-height: 85px; color: #ffffff; }
				#index div#slide div.slide div.text a { display: inline-block; position: relative; font-size: 12px; line-height: 38px; border: 2px solid #59bad5; color: #59bad5; padding: 0 50px; margin: 35px 0 0 0; text-decoration: none; }
				#index div#slide div.slide div.text a:hover { background-color: #59bad5; color: #ffffff; }

#index div.slide_controller { display: block; position: absolute; bottom: 15px; left: 0; width: 100%; height: auto; text-align: center; z-index: 4; }
	#index div.slide_controller span.selector { display: inline-block; position: relative; width: 7px; height: 7px; border-radius: 100%; margin: 5px 12px; cursor: pointer; }
	#index div.slide_controller span.selector[data-status="true"] { background-color: #59bad5; }
	#index div.slide_controller span.selector[data-status="false"] { background-color: #cfd2d3; }
	#index div.slide_controller span.selector:hover { background-color: #009ed8; }

@media all and ( max-width: 899px ) {
	#index div#slide { height: 250px; }
		#index div#slide div.slide div.text { display: none; }
}

/* ================================================================================================================== */
/* categorias */
/* ================================================================================================================== */

#index div.categories { display: block; position: relative; width: 100%; margin: 0; text-align: left; }
	#index div.categories div.block { display: inline-block; position: relative; vertical-align: top; height: 435px; width: 40%; padding: 10px 10px 10px 0; }
	#index div.categories div.block:nth-child(1) { width: 20%; }
	#index div.categories div.block:nth-child(3) { padding: 10px 0; }

		#index div.categories div.block a { display: block; position: relative; width: auto; height: 100%; margin: 0; overflow: hidden; }
			#index div.categories div.block a span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; }
			#index div.categories div.block a:hover span.bg { transform: scale(1.05); }
			#index div.categories div.block a p { display: block; position: absolute; bottom: 30px; font-size: 35px; line-height: 40px; color: #ffffff; padding: 0 30px; }
			#index div.categories div.block a:hover p { text-shadow: 0 0 10px #323a47; }

		#index div.categories div.block div.list { display: block; position: relative; top: 0; left: 0; width: 100%; height: 100%; padding: 50px 55px; margin: 0; background: transparent url(../images/index_categories_bg.png) no-repeat center center; background-size: cover; overflow: hidden; }
			#index div.categories div.block div.list div.text { display: inline-block; position: relative; width: auto; vertical-align: middle; }
				#index div.categories div.block div.list div.text a { display: block; position: relative; font-size: 20px; line-height: 35px; color: #ffffff; text-decoration: none; }
				#index div.categories div.block div.list div.text a:hover { color: #323a47; }

@media all and ( max-width: 899px ) {
	#index div.categories div.block { display: block; height: 250px; width: auto; padding: 0; margin: 10px 0 0 0; }
	#index div.categories div.block:nth-child(1) { width: auto; }
	#index div.categories div.block:nth-child(3) { padding: 0; height: auto; }
		#index div.categories div.block div.list { padding: 20px; }
			#index div.categories div.block div.list div.text a { font-size: 16px; line-height: 25px; }
}

/* ================================================================================================================== */
/* qualidade */
/* ================================================================================================================== */

#index div.quality { display: inline-block; position: relative; width: 75%; height: 365px; margin: 0; text-align: left; vertical-align: top; padding: 0 10px 0 0; }
	#index div.quality div.inside { display: block; position: relative; width: auto; height: 100%; text-align: left; background: transparent url(../images/index_quality_bg.jpg) no-repeat center center; background-size: cover; padding: 55px 50px; }
		#index div.quality div.inside span.transparency { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #323a47; opacity: 0.65; }
		#index div.quality div.inside h2.text { display: block; position: relative; vertical-align: bottom; font-size: 45px; line-height: 50px; color: #ffffff; margin-bottom: 25px; }
		#index div.quality div.inside div.icon { display: inline-block; position: relative; width: 150px; height: auto; vertical-align: bottom; margin: 5px; }
			#index div.quality div.inside div.icon span { display: block; position: relative; width: 150px; height: 52px; background: transparent url(../images/quality_icons.png) no-repeat; }
			#index div.quality div.inside div.icon span.politics { background-position-x: 0; }
			#index div.quality div.inside div.icon span.conformity_declaration { background-position-x: -150px; }
			#index div.quality div.inside div.icon span.conformity_certificate { background-position-x: -300px; }
			#index div.quality div.inside div.icon span.pme { background-position-x: -450px; }
			#index div.quality div.inside div.icon p { display: block; position: relative; width: 100%; text-align: center; font-size: 16px; line-height: 20px; color: #ffffff; margin: 5px 0 0 0; }

@media all and ( max-width: 899px ) {
	#index div.quality { display: block; width: auto; height: auto; margin: 10px 0 0 0; padding: 0; }
		#index div.quality div.inside { height: auto; padding: 20px; margin: 0; text-align: center; }
			#index div.quality div.inside h2.text { font-size: 20px; line-height: 25px; margin: 0 0 20px 0; }
			#index div.quality div.inside div.icon { margin: 10px; }
				#index div.quality div.inside div.icon p { font-size: 12px; line-height: 20px; }
}

/* ================================================================================================================== */
/* catalogos */
/* ================================================================================================================== */

#index div.catalogs { display: inline-block; position: relative; width: 25%; height: 365px; margin: 0; padding: 30px 30px 15px 30px; text-align: left; vertical-align: top; background: transparent url(../images/index_catalogs_bg.jpg) no-repeat center center; background-size: cover; }
	#index div.catalogs h2 { display: block; position: relative; font-size: 25px; line-height: 30px; }
	#index div.catalogs span.icon { display: block; position: relative; width: 100%; height: 200px; background: transparent url(../images/catalogs_icon.png) no-repeat center center; background-size: contain; margin: 5px 0; }
	#index div.catalogs a { display: inline-block; position: relative; font-size: 12px; line-height: 38px; border: 2px solid #323a47; padding: 0 50px; margin: 35px 0 0 0; text-decoration: none; }
	#index div.catalogs a:hover { background-color: #323a47; color: #ffffff; }

@media all and ( max-width: 899px ) {
	#index div.catalogs { display: block; width: auto; height: auto; text-align: center; margin: 10px 0 0 0; }
}