@import "config.sass"
@import "helpers.sass"

/* components */
#site
	display: flex
	flex-direction: column
	min-height: 100vh
	overflow: hidden
	position: relative
	width: 100%
#header
	width: 100%
	position: relative
	background: $default url(../../img/evento_v2/header-gb.jpg)
	background-size: 100% 100%
	z-index: 1
	overflow: visible
	height: 177px
	box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3)
	a
		color: #fff
		text-decoration: none
	h1
		float: left
		margin: 16px 0 0
		@extend .FX-in-out-slow
		a, img
			float: left
		&:hover
			transform: scale(1.05)
		&:active
			transition: 0s !important
			transform: scale(1.0)

.navMob
	background: rgba($preto , 0.8)
	font-size: 1.6em
	left: 0
	height: 100%
	position: fixed
	text-align: center
	top: 87px
	width: 100%
	z-index: 9
	display: none
	.headIt
		background: #000
		color: #fff
		padding: 30px 0
		font-size: 0.6em
	ul
		overflow: hidden
		background: $default url(../../img/evento_v2/header-gb.jpg)
		li
			text-align: center
			width: 25%
			float: left
	a
		width: 100%
		padding: 20px 0
		display: block

	&.active
		display: block

/* animação volante */
@keyframes giro
	from 
		transform: rotate(0deg)
	35%
		transform: rotate(16deg)
	65%
		transform: rotate(-10deg)
	to
		transform: rotate(0deg)
		

#volante
	transform-origin: top left
	position: absolute
	z-index: 2
	left: -110px
	top: -110px
	transition: 1s ease-in-out
	cursor: pointer
	&.giro
		animation: giro 3s

#links
	color: $bege
	display: block
	text-align: right
	padding: 40px 40px 0 0
	margin-right: -100%
	@extend .FX-in-out-slow
#portaLuvas
	position: absolute
	right: -20px
	top: 0
	width: 270px
	height: 162px
	background: url(../../img/evento_v2/porta-luvas-dentro.png) no-repeat
	background-size: 270px
	z-index: 3
	perspective: 1000px
	#imagemTampa
		z-index: 1
		bottom: 4px
		left: 0
		width: 100%
		height: 100%
		position: absolute
		transform-style: preserve-3d
		transition: all 0.3s ease-in-out
		transform-origin: bottom
		useTranslate3d: true
		transform: translate3d(0,0,0)
		-webkit-transform: translate3d(0,0,0)
		img
			transform: translate3d(0,0,0)
			-webkit-transform: translate3d(0,0,0)
			backface-visibility: hidden
			position: absolute
			width: 270px
			bottom: 0
			left: 0
			cursor: pointer
			&.backTampa
				box-sizing: border-box
				transform: rotateX(180deg)
				display: block
				height: 100%
				left: 2px
			&.frontTampa
				height: 199px
	&.active
		#links
			margin-right: 0
		#imagemTampa
			bottom: 13px
			transform: rotateX(-180deg)
#chave
	float: left
	margin-left: -110px
	margin-top: 47px
	width: 100px
	height: 100px
	position: relative
	img
		position: absolute
		top: 0
		right: 0
	.chave-2
		display: none

#especial-antigos
	margin-top: 50px
#radio
	margin-top: 45px
	overflow: visible
	position: absolute
	left: 50%
	transform: translateX(-50%)
	span
		position: absolute
		top: -18px
		left: 50%
		transform: translateX(-50%)
		background: url(../../img/evento_v2/filtrar-por-decada.png)
		background-size: 180px
		width: 180px
		height: 34px
		text-indent: -999px
		overflow: hidden
	#vertudo
		position: absolute
		left: 50%
		bottom: -18px
		transform: translateX(-50%)
		background: url(../../img/evento_v2/mostrar-todos.png)
		background-position: center top
		background-size: 145px
		width: 145px
		height: 34px
		text-indent: -999px
		overflow: hidden
		transition: 0s !important
		&:hover,
		&.active
			background-position: center 35px
.main-radio
	background: url(../../img/evento_v2/bg-radio.png)
	background-size: 100% 87px
	float: left
	height: 87px
	width: 637px
	font-size: 2em
	text-align: center
	@extend .font3
	ul
		width: 100%
		padding: 20px 0 0
	li
		display: inline-block
		margin: 0 5px
		a
			display: block
			padding: 5px 5px 10px
			text-shadow: 0 0 3px #000
			text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000
			background: url(../../img/evento_v2/ponteiro-radio.png)
			background-position: center 55px
			background-size: 72px
			background-repeat: no-repeat
			@extend .FX-in-out-slow
			&:hover,
			&.active
				background-position: center bottom
				background-size: 24px
			&.active
				position: relative
				&:before
					background: red
					box-shadow: 0 0 5px red
					color: red
					content: " "
					border-radius: 3px
					height: 50px
					left: 50%
					position: absolute
					top: 0
					transform: translateX(-50%)
					width: 3px
					margin-left: -1px
					z-index: 1

.closeNav
	display: none
.openNav,
.closeNav
	float: right
	line-height: 79px
	padding: 0 30px 0 10px
	font-size: 1.6em
	margin-right: -20px
	cursor: pointer
.main-container
	display: block
	flex: 1 
	overflow: hidden
	padding-top: 0
	width: 100%
	z-index: 1
#articleContainer
	margin: 30px auto
	#headLine
		display: block
		padding: 15px 0
		text-align: left
		overflow: visible
		h2
			margin: 0
			font-size: 2em
			text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3)
			a
				color: $laranja1
		span
			text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3)
			font-size: 1em
			line-height: 30px
			@extend .font1
			a
				color: $default
	section
		clear: both
		width: 100%
		position: relative
		overflow: visible
		padding: 15px 0
#busca
	float: right
	padding: 15px 0
	form
		overflow: hidden
	label
		overflow: hidden
		float: left
	input
		background: #fff
		height: 36px
		line-height: 36px
		float: left
		padding: 0 10px
		border: none
		border-radius: 4px
		@extend .font1
		&[type="text"]
			color: $cinza1
		&[type="submit"]
			padding: 0 20px
			background: $laranja1
			color: $bege
			margin-left: 5px
#listaCarros
	display: flex
	flex-wrap: wrap
	margin-left: -10px
	width: calc(100% + 20px)
	width: -webkit-calc(100% + 20px)
.generic-item
	background-color: #fff
	background-image: url(../../img/evento_v2/textura-papel.jpg)
	background-size: 100% 100%
	overflow: hidden
	border-radius: 4px
	margin: 10px
	float: left
	width: calc(100% / 3 - 20px)
	width: -webkit-calc(100% / 3 - 20px)
	box-shadow: 0 0 4px rgba($default , 0.4)
	a
		display: block
		overflow: hidden
		color: $default
		font-size: 0.8em
	img
		width: 100%
		display: block
	figcaption
		color: $preto
		font-size: 1.3em
		margin-top: 5px
		@extend .font1
		span
			display: block
			clear: both
			color: $default
			font-size: 0.82em
	&.placaPreta
		background: #000
		figure
			position: relative
			&:before
				background: #000
				border-radius: 4px
				color: #fff
				content: "PLACA PRETA"
				left: 50%
				line-height: 12px
				padding: 5px 10px
				position: absolute
				text-align: center
				top: -11px
				transform: translateX(-50%)
		figcaption
			color: #bbb
			span
				color: #bbb
	
.code-year
	clear: both
	color: $dourado
	float: left
	font-size: 1.1em
	margin-top: 13px
	span+span
		margin-left: 20px
.price
	float: right
	display: block
	@extend .font1
	color: $laranja2
	font-size: 1.4em
	span
		font-size: 1.4em
#profile
	background: #fff
	box-shadow: 0 0 4px rgba($default , 0.4)
	width: 100%
	border-radius: 4px
	header
		h1
			margin: 0 0 10px
			clear: both
			line-height: 30px
		span
			color: $cinza1
		p
			margin: 0
			font-size: 2.2em
			line-height: 30px
#descricao
	p
		font-size: 1.2em
	.price
		float: left
		text-align: left
		margin-top: 20px
#propriedade
	line-height: 30px
	span
		clear: both
		display: block
		a
			color: $default
.owl-controls
	overflow: hidden
	.owl-prev,
	.owl-next
		position: absolute
		top: 50%
		transform: translateY(-50%)
		background: #fff
		border-radius: 50%
		height: 40px
		width: 40px
		overflow: hidden
		margin-top: 5px
		&:hover
			color: $laranja1
		.fa
			line-height: 40px
	.owl-prev
		left: -26px
		text-indent: 10px
	.owl-next
		right: -26px
		text-indent: 5px

.owl-dots
	display: none !important
	position: absolute
	text-align: center
	bottom: 0
	width: 100%
.owl-dot
	background: #000
	border: 1px solid #fff
	border-radius: 50%
	display: inline-block
	height: 5px
	margin: 0 5px
	width: 5px
	&.active
		background: $laranja1
.thumbFoto
	.owl-dots
		bottom: -20px
	.owl-dot
		background: #666
		&.active
			background: $laranja1
.bigFoto .owl-item img
	height: auto
	margin: 0 auto
	// min-height: 500px
	min-height: 0
	width: auto
#paginacao
	background: url(../../img/evento_v2/placa-paginacao.png) no-repeat center
	background-size: 100%
	width: 270px
	height: 93px
	margin: 30px auto
	border-radius: 14px
	font-size: 2.5em
	box-shadow: 0 0 10px rgba($preto , 0.3)
	color: #fff
	position: relative
	line-height: 34px
	.numbers
		font-size: 36px
		position: absolute
		top: 37px
		left: 50%
		width: 100%
		text-align: center
		transform: translateX(-50%)
		font-weight: 700
		&>span
			position: relative
			top: -2px
	span
		display: inline-block
		color: #bbb
		a
			color: #bbb
			&:hover
				color: #fff
	ul
		display: inline-block
		padding: 0
		margin-left: 5px
		overflow: hidden
	li
		display: inline-block
		margin: 0 7px 0 0
		a
			color: #bbb
			&:hover
				color: #fff
		&.active
			a, a span
				color: $laranja2
		&:last-child
			margin-right: 0
	.prev, .next
		display: none
	
.footer-container
	background: $preto
	width: 100%
	color: $bege
	footer
		overflow: hidden
		line-height: 13px
/*  */

@import "mediaqueries.sass"