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

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

/* ================================================================================================================== */
/* blocos */
/* ================================================================================================================== */

#index div.thumbnail { display: inline-block; position: relative; width: 30%; padding: 50px 50px 50px 0; text-decoration: none; }
#index div.thumbnail.big { display: inline-block; position: relative; width: 40%; padding: 50px 0 50px 0; text-decoration: none; }
	#index div.thumbnail .inside { display: inline-block; position: relative; width: 100%; height: 340px; overflow: hidden; }
		#index div.thumbnail .inside span.bg { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
		#index div.thumbnail a.inside:hover span.bg { transform: scale(1.05) rotate(-2deg); }
		#index div.thumbnail .company span.bg { background: transparent url(../images/company_bg.jpg) no-repeat center center; background-size: cover; }
		#index div.thumbnail .bike span.bg { background: transparent url(../images/bike_bg.jpg) no-repeat center center; background-size: cover; }
		#index div.thumbnail .stores span.bg { background: transparent url(../images/stores_bg.jpg) no-repeat center center; background-size: cover; }
		#index div.thumbnail .inside div.text { display: inline-block; position: relative; vertical-align: bottom; padding: 35px; }
			#index div.thumbnail .inside div.text h3 { display: block; position: relative; font-size: 2.187em; color: #ffffff; }
			#index div.thumbnail .inside div.text h4 { display: block; position: relative; font-size: 1.56em; color: #ffffff; margin: 10px 0 0 0; }
			#index div.thumbnail .inside div.text a { display: inline-block; position: relative; font-size: 1.56em; color: #ffffff; margin: 0; text-decoration: none; }
			#index div.thumbnail .inside div.text a:first-child { margin: 20px 0 0 0; }
			#index div.thumbnail .inside div.text a:hover { color: #2c2d2f; padding: 0 0 0 20px; }
			#index div.thumbnail .inside div.text span.button { display: inline-block; position: relative; background-color: #ffffff; line-height: 35px; color: #2c2d2f; padding: 0 60px; overflow: hidden; }
			#index div.thumbnail .inside div.text span.button.blue { background-color: #00aeef; color: #ffffff; }
			#index div.thumbnail .inside div.text span.button { margin: 0 0 0 0; height: 0; }
			#index div.thumbnail:hover a.inside div.text span.button { margin: 20px 0 0 0; height: 35px; }
			#index div.thumbnail:hover a.inside div.text span.button.blue { margin: 10px 0 0 0; height: 35px; }

@media all and ( max-width: 1550px ) {
	#index div.thumbnail { padding: 25px 25px 25px 0; }
	#index div.thumbnail.big { padding: 25px 0; }
		#index div.thumbnail .inside { height: 300px; }
			#index div.thumbnail .inside div.text { padding: 15px; }
				#index div.thumbnail .inside div.text h3 { font-size: 1.875em; }
				#index div.thumbnail .inside div.text h4 { font-size: 1.25em; }
}
@media all and ( max-width: 1250px ) {
	#index div.thumbnail { width: 50%; padding: 15px; }
	#index div.thumbnail.big { width: 100%; padding: 15px; }
}
@media all and ( max-width: 700px ) {
	#index div.thumbnail,
	#index div.thumbnail.big { width: 100%; padding: 15px 0; }
}

/* ================================================================================================================== */
/* slogan */
/* ================================================================================================================== */

#index div.slogan { display: block; position: relative; width: auto; height: auto; padding: 50px; background: transparent url(../images/slogan_bg.jpg) fixed no-repeat top center; background-size: cover; text-align: center; }
	#index div.slogan span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00aeef; opacity: 0.8; }
	#index div.slogan h2 { display: block; position: relative; color: #ffffff; font-size: 4.375em; }
	#index div.slogan h3 { display: block; position: relative; color: #ffffff; font-size: 2.187em; margin: 20px 0 0 0; }

@media all and ( max-width: 950px ) {
	#index div.slogan { padding: 50px 15px; }
		#index div.slogan h2 { font-size: 2.5em; }
		#index div.slogan h3 { font-size: 1.875em; }
}

/* ================================================================================================================== */
/* bikes */
/* ================================================================================================================== */

#index div.bikes { display: block; position: relative; width: 100%; height: auto; overflow: hidden; margin: 50px 0 0 0; background-color: #ffffff; }
	#index div.bikes div.item { display: block; position: relative; width: auto; height: auto; text-align: left; white-space: nowrap; }

		#index div.bikes div.item div.main_photo { display: inline-block; position: relative; background: transparent no-repeat center center; background-size: cover; vertical-align: top; text-align: center; white-space: normal; }
		#index div.bikes div.item div.main_photo { transition-property: width,height; -webkit-transition-property: width,height; -moz-transition-property: width,height; transition-duration: 400ms; -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; }
		#index div.bikes div.item[data-status="closed"] div.main_photo { width: 100%; height: 70vh }
		#index div.bikes div.item[data-status="open"] div.main_photo {
			width: 40%;
			height: 100vh;
			height: -webkit-calc(100vh - 100px);
			height:    -moz-calc(100vh - 100px);
			height:         calc(100vh - 100px);
		}
			#index div.bikes div.item div.main_photo span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #231f20; opacity: 0.3; }
			#index div.bikes div.item div.main_photo div.text { display: inline-block; position: relative; width: auto; vertical-align: middle; text-align: center; }
				#index div.bikes div.item div.main_photo div.text h2 { display: block; position: relative; font-size: 4.375em; color: #ffffff; }
				#index div.bikes div.item div.main_photo div.text h3 { display: block; position: relative; font-size: 2.187em; color: #ffffff; margin: 10px 0 0 0; }

		#index div.bikes div.item div.container { display: inline-block; position: relative; width: 60%; min-height: 150vh; vertical-align: top; overflow: hidden; white-space: normal; padding: 0 0 0 50px; }
		#index div.bikes div.item[data-status="closed"] div.container { width: 60%; }
		#index div.bikes div.item[data-status="open"] div.container { width: 60%; }
			#index div.bikes div.item div.container div.photos { display: block; position: relative; width: 100%; height: 100vh; text-align: center; padding: 0 50px; }
				#index div.bikes div.item div.container div.photos div.block { display: inline-block; position: relative; width: 100%; height: auto; vertical-align: middle; }
				#index div.bikes div.item div.container div.photos span.arrow { display: block; position: absolute; top: 50%; margin: -16px 0 0 0; width: 18px; height: 33px; background: transparent url(../images/arrows.png) no-repeat; cursor: pointer; }
				#index div.bikes div.item div.container div.photos span.arrow { display: block; position: absolute; top: 50%; margin: -16px 0 0 0; width: 18px; height: 33px; background: transparent url(../images/arrows.png) no-repeat; cursor: pointer; }
				#index div.bikes div.item div.container div.photos span.arrow.prev { background-position-x: 0; left: 0; }
				#index div.bikes div.item div.container div.photos span.arrow.next { background-position-x: -18px; right: 0; }
				#index div.bikes div.item div.container div.photos span.arrow:hover { background-position-y: -33px; }
				#index div.bikes div.item div.container div.photos div.all_photos { display: block; position: relative; width: auto; height: 445px; margin: 0 30px; overflow: hidden; }
					#index div.bikes div.item div.container div.photos div.all_photos span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff no-repeat center center; background-size: contain; }
					#index div.bikes div.item div.container div.photos div.all_photos span { left: 100%; }
					#index div.bikes div.item div.container div.photos div.all_photos span:first-child { left: 0; }
					#index div.bikes div.item div.container div.photos div.all_photos span[data-status="prev"] { left: -100%; }
					#index div.bikes div.item div.container div.photos div.all_photos span[data-status="actual"] { left: 0; }
					#index div.bikes div.item div.container div.photos div.all_photos span[data-status="next"] { left: 100%; }
			#index div.bikes div.item div.container div.text { display: block; position: relative; width: 100%; text-align: left; padding: 0 80px; }
				#index div.bikes div.item div.container div.text h1 { display: block; position: relative; margin: 0 0 20px 0; }
				#index div.bikes div.item div.container div.text p { display: block; position: relative; margin: 0 0 55px 0; }
				#index div.bikes div.item div.container div.text p:last-child { margin: 0 0 200px 0; }

@media all and ( max-width: 950px ) {
	#index div.bikes div.item div.main_photo { display: none; }

	#index div.bikes div.item div.container { min-height: auto; padding: 0 25px; }
	#index div.bikes div.item[data-status="closed"] div.container { width: 100%; }
	#index div.bikes div.item[data-status="open"] div.container { width: 100%; }
		#index div.bikes div.item div.container div.photos { height: 550px; padding: 0; }
		#index div.bikes div.item div.container div.text { padding: 0; }
}
@media all and ( max-width: 700px ) {
	#index div.bikes div.item div.container div.photos { height: 300px; }
}