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

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

@media all and ( max-width: 1200px ) {
	#index div.container { margin: 0 15px; }
}

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

#index div.slide { display: block; position: relative; width: auto; margin: 0; z-index: 1; }
#index div.slide
{
	height: 100vh;
	height: -webkit-calc(100vh - 140px - 35px);
	height:    -moz-calc(100vh - 140px - 35px);
	height:         calc(100vh - 140px - 35px);
}
	#index div.slide div.banner { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding: 100px; }
	#index div.slide div.banner[data-status="false"] { z-index: 1; opacity: 0; }
	#index div.slide div.banner[data-status="true"] { z-index: 2; opacity: 1; }
		#index div.slide div.banner div.inner { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
		#index div.slide div.banner span.photo { 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.banner video { display: block; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; text-align: center; overflow: hidden; transform: translate(-50%, -50%); }
		#index div.slide div.banner div.button { display: block; position: absolute; bottom: 25px; left: 25px; width: 35px; height: 35px; background-color: transparent; z-index: 10; border-radius: 100%; cursor: pointer; overflow: hidden; }
			#index div.slide div.banner div.button span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.5; }
			#index div.slide div.banner div.button i.icon { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 24px; height: 24px; }
			#index div.slide div.banner div.button.mute i.icon { background: transparent url(../images/banner_mute.png) no-repeat; }
			#index div.slide div.banner div.button.mute[data-sound="false"] i.icon { background-position-x: 0; }
			#index div.slide div.banner div.button.mute[data-sound="true"] i.icon { background-position-x: -24px; }
			#index div.slide div.banner div.button:hover i.icon { background-position-y: -24px; }
		#index div.slide div.banner div.text { display: inline-block; position: relative; width: auto; height: auto; z-index: 1; padding: 0; vertical-align: bottom; text-align: center; }
			#index div.slide div.banner div.text h1 { display: block; position: relative; font-size: 2.5em; line-height: 1.1em; overflow: hidden; color: #ffffff; text-shadow: 0 0 2px #000000; }
			#index div.slide div.banner div.text h2 { display: block; position: relative; font-size: 2em; line-height: 1em; overflow: hidden; color: #ffffff; margin-top: 25px; text-shadow: 0 0 2px #000000; }
			#index div.slide div.banner div.text p.counter { display: inline-block; position: relative; bottom: -50px; color: #ffffff; text-shadow: 0 0 2px #000000; }
				#index div.slide div.banner div.text p.counter span { display: block; position: absolute; left: 50%; bottom: -80px; width: 2px; height: 60px; margin: 0 0 0 -1px; background-color: #e81c24; }

	#index div.slide span.arrow { display: block; position: absolute; top: 50%; margin-top: -25px; z-index: 10; width: 50px; height: 50px; border: 1px solid #ffffff; cursor: pointer; }
	#index div.slide span.arrow.prev { left: 25px; background: transparent url(../images/button_left.png) no-repeat center center; }
	#index div.slide span.arrow.next { right: 25px; background: transparent url(../images/button_right.png) no-repeat center center; }
	#index div.slide span.arrow.prev:hover { background-color: #ffffff; background-image: url(../images/button_left_red.png); }
	#index div.slide span.arrow.next:hover { background-color: #ffffff; background-image: url(../images/button_right_red.png); }

@media all and ( max-width: 725px ) {
	#index div.slide
	{
		height: 75vh;
		height: -webkit-calc(75vh);
		height:    -moz-calc(75vh);
		height:         calc(75vh);
	}

	#index div.slide div.banner { padding: 100px 15px; }
}
@media all and ( max-width: 450px ) {
	#index div.slide
	{
		height: 300px;
		height: -webkit-calc(300px);
		height:    -moz-calc(300px);
		height:         calc(300px);
	}
		#index div.slide div.banner div.text { display: none; }
}

/* ================================================================================================================== */
/* produtos */
/* ================================================================================================================== */

#index div.products { display: block; position: relative; margin-top: 100px; padding: 50px 0; text-align: left; }
	#index div.products h1 { display: block; position: relative; font-size: 3.125em; color: #e81c24; }
	#index div.products p.description { display: block; position: relative; margin-bottom: 25px; }
	#index div.products div.block { display: inline-block; position: relative; width: 25%; height: 300px; z-index: 1; padding: 0 25px 0 0; margin-bottom: 30px; }
	#index div.products div.block:nth-child(4n) { padding: 0; }
	#index div.products a { display: block; position: relative; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; z-index: 1; }
		#index div.products a div.hover { display: block; position: absolute; width: 0; height: 0; top: 50%; left: 50%; text-align: center; overflow: hidden; }
		#index div.products a:hover div.hover { width: 90%; height: 90%; top: 5%; left: 5%; }
			#index div.products a div.hover span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e81c24; opacity: 0.65; }
			#index div.products a div.hover p { display: inline-block; position: relative; width: 100%; height: auto; line-height: 40px; color: #ffffff; font-size: 1.5em; vertical-align: middle; }

@media all and ( max-width: 825px ) {
	#index div.products { margin-top: 50px; padding: 25px 0; }
		#index div.products div.block { width: 50%; height: 250px; padding: 0 8px; }
		#index div.products div.block:nth-child(4n) { padding: 0 8px; }
}
@media all and ( max-width: 650px ) {
	#index div.products div.block { width: 100%; height: 250px; padding: 0 8px; }
}

/* ================================================================================================================== */
/* icons */
/* ================================================================================================================== */

#index div.icons { display: block; position: relative; margin-top: 100px; border-top: 1px solid #a2a4a7; padding: 150px 0; text-align: center; }
	#index div.icons div.col { display: inline-block; position: relative; width: 200px; height: 200px; vertical-align: top; text-align: center; margin: 25px 50px; }
		#index div.icons div.col span.icon { display: inline-block; position: relative; width: 136px; height: 101px; background: transparent url(../images/icons.png) no-repeat; margin: 0 0 25px 0; }
		#index div.icons div.col.selected span.icon,
		#index div.icons div.col:hover span.icon { height: 0; margin-bottom: 0; }
		#index div.icons div.col span.icon._1 { background-position-x: 0; }
		#index div.icons div.col span.icon._2 { background-position-x: -136px; }
		#index div.icons div.col span.icon._3 { background-position-x: -272px; }
		#index div.icons div.col span.icon._4 { background-position-x: -408px; }
		#index div.icons div.col h1 { display: block; position: relative; color: #a2a4a7; line-height: 25px; margin: 0; padding: 0; }
		#index div.icons div.col.selected h1,
		#index div.icons div.col:hover h1 { margin-bottom: 25px; }
		#index div.icons div.col p { display: block; position: relative; line-height: 25px; height: 0; overflow: hidden; margin: 0; padding: 0; }
		#index div.icons div.col.selected p,
		#index div.icons div.col:hover p { height: 101px; }

@media all and ( max-width: 825px ) {
	#index div.icons { margin-top: 50px; padding: 75px 0; }
		#index div.icons div.col { margin: 10px; height: auto; }
		#index div.icons div.col.selected span.icon,
		#index div.icons div.col:hover span.icon { height: 101px; }
		#index div.icons div.col h1 { margin-bottom: 10px; }
		#index div.icons div.col.selected h1,
		#index div.icons div.col:hover h1 { margin-bottom: 10px; }
		#index div.icons div.col p { height: 101px; }
}