//
// C A R O U S E L
//


// Wrapper for the slide container and indicators
.carousel
	position relative
	background-color negro
	transform translate3d(0px, 0px, 0px) //Fix firefox scroll
	.embed-responsive
		padding-bottom 60.25%
		margin-top 25vh

	// &.fades
	// 	.carousel-inner
	// 	> .item
	// 		transition-property opacity
	// 		opacity 0
	// 		&.active
	// 			opacity 1

.carousel-inner
	position relative
	overflow hidden
	width 100%

	> .item
		display none
		position relative
		transition .6s ease-in-out left
		margin-bottom 0
		will-change left, opacity
		z-index 1
		height 50vh
		min-height emify(360px)
		background-color alpha(negro, 50%)
		&:before
			content ''
			display block
			padding-top 65.10%
		// Account for jankitude on images
		> img
		> a > img
			@extend .img--responsive
			line-height 1
			position absolute
			top -9999px
			bottom -9999px
			left -9999px
			right -9999px
			margin auto
	> .active,
	> .next,
	> .prev
		display block
	> .active
		left 0
	> .next,
	> .prev
		position absolute
		top 0
		width 100%

	> .next
		left 100%

	> .prev
		left -100%

	> .next.left,

	> .prev.right
		left 0

	> .active.left
		left -100%

	> .active.right
		left 100%
.controls
	width 280px
	position absolute
	margin-top 0 
	margin-bottom 1.5em
	margin-left auto
	margin-right auto
	bottom 4vh
	left 0
	right 0
	z-index 50
.home
	.controls
		bottom -1vh
	.row
		position relative
.item__package
	.controls
		marign-bottom 0
.slide-video
	left 0
	margin 0 auto
	position absolute
	right 0
	text-align center
	bottom 14vh
	width 100%
	z-index 50
	img
		margin 0 auto
	h1
		margin 0
.home
	.slide-video
		bottom 15vh
.pack-slide
	height 60vh
	> .item
		top 0
		bottom 0
		height 100%
		img
			height 100%

// Left/right controls for nav
// ---------------------------

.carousel-control
	position absolute
	bottom 10%
	width remify(40px)
	height remify(40px)
	line-height remify(60px)
	color blanco
	text-align center
	//background-color alpha(negro, 40%)
	border-radius 50%
	//text-shadow $carousel-text-shadow
	//background-color rgba(0, 0, 0, 0)
	z-index 1
	span
		color blanco
		text-shadow 0.05em 0.05em 0.2em #000
		font-size 3.2rem
		// Hover/focus state
	&:hover
	&:focus
		span
			outline 0
			text-decoration none
			opacity 0.9
	
	&.left
		left 0
	
	&.right
		right 0

.slide-hotel
	.carousel-inner
		position relative
		overflow hidden
		width 100%
		> .item
			height auto
			&:before
				padding-top 2em
	.carousel-control
		height 50%

		
// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
		
.carousel-indicators
	//bottom 30px
	//left 0
	list-style none
	//margin auto
	padding-left 0
	//position absolute
	//right 0
	text-align center
	//width 80%
	//z-index 15

	li
		display inline-block
		width 1.00rem
		height 1.00rem
		padding 0em
		margin-right 1.500rem
		text-indent -999px
		//border 1px solid //$carousel-indicator-border-color
		border-radius 50%
		cursor pointer
		background-color #2f387b
		
		&:last-child
			margin-right 0

		// IE8-9 hack for event handling
		//
		// Internet Explorer 8-9 does not support clicks on elements without a set
		// `background-color`. We cannot use `filter` since that's not viewed as a
		// background color by the browser. Thus, a hack is needed.
		// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
		//
		// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
		// set alpha transparency for the best results possible.
		// background-color unquote('#000 \9') // IE8
		// background-color rgba(0, 0, 0, 0) // IE9

	.active
		background-color blanco
		margin-bottom 0.500rem

// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption
	position absolute
	left 15%
	right 15%
	bottom 20px
	z-index 10
	padding-top 20px
	padding-bottom 20px
	//color $carousel-caption-color
	text-align center
	//text-shadow $carousel-text-shadow

	&.btn
		text-shadow none // No shadow for button elements in carousel-caption

// .toModalS
// 	.embed-responsive
// 		padding-bottom 100vh
//-------------
// Up to 768px
//-------------
@media (min-width : 48.000em)
	.carousel
		.embed-responsive
			margin-top 0
	.carousel-inner
		> .item
			height 60vh
	.controls
		bottom 6vh
		.slide-video
			bottom 18vh
	.home
		.controls
				bottom 6vh
	.pack-slide
		height 30vh
		> .item
			top 0
			bottom 0
			height 100%
			img
				height 100%
	.item__package-img
		.controls
			width 200px
	.slide-hotel
		.carousel-control
			height 40%
//-------------
// Up to 990px
//-------------
@media (min-width : 61.875em)
	/*.carousel-control
		margin 18% auto*/
	.carousel-inner
		> .item
			height 80vh
	.controls
		bottom 7vh
	.slide-video
		bottom 15vh
	.home
		.carousel-inner
			> .item
				height 60vh //calc(100vh + 110px)
		.controls
			bottom 18vh
		.slide-video
			bottom 20vh
	.pack-slide
		height 30vh
		> .item
			top 0
			bottom 0
			height 100%
//-------------
// Up to 1024px (1025px)
//-------------		
@media(min-width : 64.063em)
	.image-thum
		width 8rem !important
	.toModalS
		.embed-responsive
			padding-bottom 100vh
	.home
		.controls
			bottom calc(25vh)
		.slide-video
			bottom 35vh
	
	.slide-video
		width 85%
	.pack-slide
		height 40vh
		> .item
			top 0
			bottom 0
			height 100%	


//-------------
// Up to 1200px
//-------------		
@media(min-width : 75.000em)
	.home
		.controls
			bottom calc(25vh)
		.slide-video
			bottom 35vh
		.carousel-inner
			> .item
				height 100vh
	.pack-slide
		height 470px
		> .item
			top 0
			bottom 0
			height 100%
	.carousel-inner
		> .item
			height 100vh
			

@supports ( transform : translate3d(0, 0, 0) )
	//WebKit CSS3 transforms for supported devices
	.carousel-inner	
		> .item
			transition transform .6s ease-in-out
			backface-visibility hidden
			transform perspective(1000px)

			&.next,
			&.active.right
				transform translate3d(100%, 0, 0)
				left 0

			&.prev,
			&.active.left
				transform translate3d(-100%, 0, 0)
				left 0

			&.next.left,
			&.prev.right,
			&.active
				transform translate3d(0, 0, 0)
				left 0