/* ================================================================================================================== */
/* 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; }
	#index div.left { display: inline-block; position: relative; vertical-align: top; width: 350px; margin: 0; }
	#index div.right { display: inline-block; position: relative; vertical-align: top; margin: 0 0 0 35px; }
	#index div.right
	{
		width: auto;
		width: -webkit-calc(100% - 385px);
		width:    -moz-calc(100% - 385px);
		width:         calc(100% - 385px);
	}
	#index div.top { display: block; position: relative; }

@media all and (max-width: 1050px) {
	#index div.left { display: none; }
	#index div.right { display: block; margin: 0; }
	#index div.right
	{
		width: auto;
		width: -webkit-calc(100%);
		width:    -moz-calc(100%);
		width:         calc(100%);
	}
}

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

#index div.category { display: block; position: relative; width: 100%; padding: 25px; background-color: #f6f6f6; }
	#index div.category .title { margin-bottom: 25px; }
		#index div.category .title h1 { font-size: 22px; line-height: 30px; margin: 0; }
		#index div.category .title span.separator { display: block; position: relative; width: 70px; height: 5px; background-color: #e1332a; margin: 10px 0 0 0; }
	#index div.category a { display: block; position: relative; text-decoration: none; line-height: 25px; }
	#index div.category a:hover { color: #e1332a; }

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

#index div#slide { display: block; position: relative; max-width: 1075px; z-index: 1; padding-bottom: 500px; margin-bottom: 35px; margin-left: auto; margin-right: auto; }
	#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; max-width: 60%; }
				#index div#slide div.slide div.text h3 { display: block; position: relative; font-size: 75px; line-height: 85px; color: #e1332a; }
				#index div#slide div.slide div.text h4 { display: block; position: relative; font-size: 60px; line-height: 75px; color: #e1332a; }
			#index div#slide div.slide a.more { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 15px 25px; margin: 0; text-decoration: none; text-align: right; }
			/*#index div#slide div.slide a.more:hover { background-color: #e1332a; color: #ffffff; }*/
				#index div#slide div.slide a.more span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.75; }
				#index div#slide div.slide a.more:hover span.bg { background-color: #ffffff; }
				#index div#slide div.slide a.more p { display: inline-block; position: relative; font-size: 12px; line-height: 38px; border: 2px solid #ffffff; color: #ffffff; padding: 0 50px; margin: 0; text-decoration: none; }
				#index div#slide div.slide a.more:hover p { border: 2px solid #000000; color: #000000; }

#index div.slide_controller { display: none; 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: 750px) {
	#index div#slide { padding-bottom: 200px; }
		#index div#slide div.slide div.text { display: none; }
		#index div#slide div.slide a.more { padding: 5px 10px; }
			#index div#slide div.slide a.more p { padding: 0 25px; line-height: 30px; }
}

/* ================================================================================================================== */
/* icones */
/* ================================================================================================================== */

#index div.icons { display: block; position: relative; width: 100%; margin: 0 0 35px 0; text-align: center; background-color: #f6f6f6; padding: 10px 0; vertical-align: top; }
	#index div.icons span.image1 { display: block; position: absolute; top: 0; left: -25px; width: 332px; height: 144px; background: transparent url(../images/index_icons_image1.png) no-repeat center center; background-size: contain; }
	#index div.icons span.image2 { display: block; position: absolute; bottom: -25px; right: -20px; width: 169px; height: 310px; background: transparent url(../images/index_icons_image2.png) no-repeat center center; background-size: contain; }
	#index div.icons div.col { display: inline-block; position: relative; vertical-align: top; width: auto; margin: 15px; }
		#index div.icons div.col span.icon { display: block; position: relative; width: 92px; height: 55px; background: transparent url(../images/icons.png) no-repeat; background-size: auto 100%; margin: 0 auto 20px auto; }
		#index div.icons div.col span.icon.schedule { background-position-x: 0; }
		#index div.icons div.col span.icon.contacts { background-position-x: -92px; }
		#index div.icons div.col span.icon.package { background-position-x: -184px; }
		#index div.icons div.col span.icon.shipping { background-position-x: -276px; }z
		#index div.icons div.col h2 { display: block; position: relative; font-size: 18px; line-height: 25px; color: #808184; }
		#index div.icons div.col p { display: block; position: relative; line-height: 22px; color: #808184; min-height: 88px; }
		#index div.icons div.col span.border { display: block; position: relative; width: 65px; height: 5px; margin: 10px auto 0 auto; }
		#index div.icons div.col span.border.schedule { background-color: #eb008b; }
		#index div.icons div.col span.border.contacts { background-color: #f6921e; }
		#index div.icons div.col span.border.package { background-color: #009345; }
		#index div.icons div.col span.border.shipping { background-color: #3d2d79; }

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

#index div.parties { display: block; position: relative; width: 100%; margin: 0; text-align: center; }
	#index div.parties a { display: inline-block; position: relative; vertical-align: top; width: 270px; height: 200px; background: transparent no-repeat center center; background-size: cover; margin: 15px; text-align: center; }
	#index div.parties a:nth-child(4n),
	#index div.parties a:nth-child(5n) { width: 450px; }
		#index div.parties a span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; background-color: #0f0f0f; }
		#index div.parties a:hover span.bg { opacity: 0; }
		#index div.parties a p { display: inline-block; position: relative; width: auto; height: auto; font-size: 18px; line-height: 25px; color: #ffffff; }
		#index div.parties a:hover p { opacity: 0; }

/* ================================================================================================================== */
/* productos */
/* ================================================================================================================== */

#index div.products { display: block; position: relative; width: 100%; margin: 35px 0; text-align: left; }
#index div.products .title,
#index div.products .col { display: inline-block; position: relative; vertical-align: top; width: 20%; height: auto; padding: 15px; margin: 15px 5px; text-decoration: none; border: 1px solid transparent; }
#index div.products .title { text-align: left; }
	#index div.products .title h1 { font-size: 22px; line-height: 30px; margin: 0; }
	#index div.products .title span.separator { display: block; position: relative; width: 70px; height: 5px; background-color: #e1332a; margin: 10px 0 0 0; }
	#index div.products .col:hover { border: 1px solid #828386; }
		#index div.products .col div.photo { display: block; position: relative; width: 100%; overflow: hidden; text-align: center; }
			#index div.products .col div.photo span.photo { display: inline-block; position: relative; width: 100%; height: 250px; background: transparent no-repeat center center; background-size: contain; }
			#index div.products .col div.photo span.discount { display: block; position: absolute; bottom: 0; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #ffffff; background-color: #e1332a; border-radius: 100%; transform: rotate(-25deg); }
		#index div.products .col p.text { display: block; position: relative; text-align: center; font-size: 15px; line-height: 20px; margin: 10px 0 0 0; }
		#index div.products .col p.price { display: block; position: relative; text-align: center; font-size: 16px; line-height: 20px; margin: 5px 0 0 0; color: #e1332a; }
		#index div.products .col span.button { display: block; position: relative; text-align: center; font-size: 12px; line-height: 40px; margin: 35px 0 0 0; background-color: #e1332a; color: #ffffff; opacity: 0; }
		#index div.products .col:hover span.button { opacity: 1; }

@media all and (max-width: 750px) {
	#index div.products { display: none; }
}