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

div#index { display: block; position: relative; width: 100%; padding: 130px 0 0 0; margin: 0 auto; font-size: 0; }

@media all and (max-width: 1199px) {
	div#index { padding: 0; }
}

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

div#slide { display: block; position: relative; width: 100%; height: 750px; padding: 0; z-index: 1; margin: 0 0 100px 0; }
div#slide *
{
	transition-duration: 1000ms;
	-webkit-transition-duration: 1000ms;
	-moz-transition-duration: 1000ms;
}
div#slide span.bg { display: block; position: absolute; top: 125px; left: 0; width: 100%; height: 465px; background-color: #eef0f1; }
	div#slide div.container { display: block; position: relative; width: 1200px; top: 0; height: 100%; margin: 0 auto; z-index: 2; }
	div#slide .slide { display: block; position: absolute; top: 0; left: 0; width: 1200px; height: 100%; margin: 0; }
	div#slide .slide[data-status="true"] { opacity: 1; z-index: 2; }
	div#slide .slide[data-status="false"] { opacity: 0; z-index: 1; }
		div#slide .slide div.left { display: inline-block; position: relative; width: 555px; height: 100%; vertical-align: top; }
		div#slide .slide div.right { display: inline-block; position: relative; width: 625px; height: 100%; vertical-align: top; padding: 165px 0 0 0; margin: 0 0 0 20px; }
			div#slide .slide span.photo1 { display: block; position: relative; width: 100%; height: 700px; left: 0; border: 5px solid #ffffff; background: no-repeat center center; background-size: cover; }
			div#slide .slide[data-status="false"] span.photo1 { left: -100px; }
			div#slide a.slide:hover span.photo1 { border: 5px solid #f5692c; }
			div#slide .slide span.photo2 { display: block; position: relative; width: 100%; height: 335px; right: 0; border: 5px solid #ffffff; background: no-repeat center center; background-size: cover; }
			div#slide .slide[data-status="false"] span.photo2 { right: -200px; }
			div#slide a.slide:hover span.photo2 { border: 5px solid #f5692c; }
			div#slide .slide div.text { display: block; position: relative; width: 100%; height: 150px; bottom: 0; padding: 0 30px; overflow: hidden; margin: 0 0 100px 0; }
			div#slide .slide[data-status="false"] div.text { bottom: -200px; }
				div#slide .slide div.text span { display: block; position: relative; width: 70px; height: 5px; background-color: #f5692c; margin: 0 0 10px 0; }
				div#slide .slide div.text h1 { display: block; position: relative; color: #262261; text-decoration: none; }
				div#slide a.slide:hover div.text h1 { color: #f5692c; }

@media all and (max-width: 1199px) {
	div#slide { display: none; }
}

/* ================================================================================================================== */
/* ajuda */
/* ================================================================================================================== */

div#index div.help { display: block; position: relative; width: 1200px; margin: 0 auto 100px auto; padding: 65px 150px; background: #f5692c url(../images/bg_orange.png) no-repeat center center; background-size: cover; }
	div#index div.help div.text { display: inline-block; position: relative; width: 650px; vertical-align: middle; }
		div#index div.help div.text h1,
		div#index div.help div.text h2 { color: #ffffff; }
	div#index div.help a { display: inline-block; position: relative; width: auto; margin: 0 0 0 30px; height: auto; font-size: 14px; line-height: 20px; text-decoration: none; color: #262261; cursor: pointer; padding: 3px 30px; border-radius: 5px; border: 1px solid #262261; background: transparent url(./../images/transparent.png) repeat; vertical-align: middle; }
	div#index div.help a:hover { color: #ffffff; border: 1px solid #262261; background: #262261 url(./../images/bg_blue.png) no-repeat center center; background-size: cover; }

@media all and (max-width: 1199px)
{
	div#index div.help { width: auto; margin: 0; padding: 25px 10px; text-align: center; }
		div#index div.help div.text { width: auto; margin: 0 0 20px 0; }
		div#index div.help a { margin: 0; }
}

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

div#index div.categories { display: block; position: relative; width: 100%; padding: 0; margin: 0; background: #262261 url(./../images/bg_blue.png) no-repeat center center; background-size: cover; }
	div#index div.categories div.container { display: block; position: relative; width: 1200px; margin: 0 auto; }
		div#index div.categories div.container div.text { display: inline-block; position: relative; width: 435px; height: auto; vertical-align: top; padding: 100px 0 100px 0; }
			div#index div.categories div.container div.text h1 { color: #ffffff; margin: 0 0 30px 0; }
			div#index div.categories div.container div.text a { color: #ffffff; margin: 0 0 30px 0; text-decoration: none; }
			div#index div.categories div.container div.text a:hover { color: #f5692c; }
		div#index div.categories div.container div.photos { display: inline-block; position: relative; width: 665px; height: 450px; margin: 0 0 0 100px; vertical-align: bottom; }
			div#index div.categories div.container div.photos span { display: block; position: absolute; bottom: 100px; left: 0; width: 100%; height: 100%; background: #ffffff no-repeat center center; background-size: cover; border: 5px solid #ffffff; }
			div#index div.categories div.container div.photos span[data-status="false"] { opacity: 0; }
			div#index div.categories div.container div.photos span[data-status="true"] { opacity: 1; }

@media all and (max-width: 1199px)
{
	div#index div.categories { width: auto; padding: 25px 10px; }
		div#index div.categories div.container { width: auto; text-align: center; padding: 0; }
		div#index div.categories div.container div.text { width: auto; padding: 0; }
		div#index div.categories div.container div.photos { display: none; }
}