//---------------------------- [ Import ] ------------------------------/

//@import "skitter.css"

//---------------------------- [ Colores ] ------------------------------/

azultg=#00469f
azultg2=#003b87
azultg3=#00306d
blancotg=#fff
naranjatg=#ff5f00

//---------------------------- [ Fuentes ] ------------------------------/

//fuente='Playball'
fuente='Muli'
fuente1='Muli'
fuente2='Roboto Condensed'
fuente3='Roboto Light'
fuente4='Roboto'


//---------------------------- [ Args ] ------------------------------/
//transition
transition()
	-webkit-transition arguments
	-moz-transition arguments
	-o-transition arguments
	-ms-transition arguments
	transition arguments

//transform
transform()
	-webkit-transform arguments
	-moz-transform arguments
	-o-transform arguments
	-ms-transform arguments
	transform arguments
	
//background-size
background-size()
	-webkit-background-size arguments
	-moz-background-size arguments
	-o-background-size arguments
	-ms-background-size arguments
	background-size arguments

//border-radius
border-radius()
	-wibkit-border-radius arguments
	-moz-border-radius arguments
	-o-border-radius arguments
	-ms-border-radius arguments
	border-radius arguments
	
//opacity
opacity()
	opacity arguments
	-webkit-opacity arguments
	-moz-opacity arguments
	-ms-opacity arguments
	-o-opacity arguments
	
//box-shadow
box-shadow()
	box-shadow arguments
	-webkit-box-shadow arguments
	-moz-box-shadow arguments
	-ms-box-shadow arguments
	-o-box-shadow arguments
	
//text-shadow
text-shadow()
	text-shadow arguments
	-webkit-text-shadow arguments
	-moz-text-shadow arguments
	-ms-text-shadow arguments
	-o-text-shadow arguments
	
//transition
cursor()
	-webkit-cursor arguments
	-moz-cursor arguments
	-o-cursor arguments
	-ms-cursor arguments
	cursor arguments
	
//bloque-tg
bloque-tg()
	display inline-block
	vertical-align top


//________________________________________________________________________/
//_______________________________________________________________________/
//---------------------------- [ ESTILOS ] -----------------------------/




// <----| Contacto |--------------------------------------<<<<

.form-contacto
	width 100%
	height auto
	padding 20px 25px 20px 25px
	background #fff
	border-radius (5px)
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	h2
		font 29px fuente2
		text-align left
		color azultg
	p
		font 15px fuente1
		text-align left
		color #555a61
		padding 5px 0px 0px 5px
	form
		padding 30px 0px 0px 0px
		text-align left
		label
			font 13px fuente1
			color naranjatg
			display block
			margin -10px 0px 10px 0px
			padding 0px 0px 0px 5px
			&:before
				font-family 'tg'
				content '\e912'
				color naranjatg
				font-size 8px
				margin 0px 5px 0px 0px
		input
		textarea
			width 100%
			height 50px
			background #efefef
			border-radius (5px)
			margin 0px 0px 15px 0px
			padding 0px 0px 0px 10px
			font 16px fuente1
			color azultg2
			border 0px solid #dedede
			border-bottom 4px solid #dedede
			transition (all 200ms ease-out 20ms)
			&:hover
			&:focus
				box-shadow (0px 0px 10px 0px rgba(0,0,0,0.3))
		textarea
			padding 10px 0px 20px 10px
			height 100px
		.but
			margin 0px 0px 0px 0px

.form-contacto2
	width 100%
	height auto
	padding 0px 0px 20px 0px
	background #fff
	border-radius (5px)
	h2
		font 29px fuente2
		text-align left
		color azultg
	p
		font 15px fuente1
		text-align left
		color #555a61
		padding 5px 0px 0px 5px
	form
		padding 30px 0px 0px 0px
		text-align left
		label
			font 13px fuente1
			color naranjatg
			display block !important
			width 100%
			margin -10px 0px 15px 0px
			padding 0px 0px 0px 5px
			&:before
				font-family 'tg'
				content '\e912'
				color naranjatg
				font-size 8px
				margin 0px 5px 0px 0px
		input
		textarea
			width 100%
			height 50px
			background #efefef
			border-radius (5px)
			margin 0px 0px 15px 0px
			padding 0px 0px 0px 10px
			font 16px fuente1
			color azultg2
			border 0px solid #dedede
			border-bottom 4px solid #dedede
			transition (all 200ms ease-out 20ms)
			&:hover
			&:focus
				box-shadow (0px 0px 10px 0px rgba(0,0,0,0.3))
		textarea
			padding 10px 0px 0px 10px
			height 100px
		.but
			margin 0px 0px 0px 0px

.contacto-target
	width 100%
	height auto
	padding 20px 25px 20px 25px
	background #fff
	border-radius (5px)
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	h2
		font 29px fuente2
		text-align left
		color azultg
		
.contacto-targtp
	width 100%
	height auto
	padding 20px 0px 20px 0px
	h1
	h2
	h3
	h4
	h5
	h6
		font 17px fuente2
		text-align left
		color azultg3
	p
		font 15px fuente1
		color  #555a61
		text-align left
		line-height 24px
		padding 5px 0px 10px 0px
		
.contacto-redes
	width 100%
	height auto
	bloque-tg ()
	text-align left
	padding 20px 0px 0px 0px
	
.credes-ico
	width 45px
	height 45px
	bloque-tg ()
	background azultg2
	font-size 30px
	color blancotg
	margin-right 8px
	text-align center
	border-radius (50%)
	transition (all 200ms ease-out 20ms)
	span
		bloque-tg ()
		font-size 19px
		color blancotg
		line-height 45px
			
.credes-fb
	background #48649f
	&:hover
		background #234877
		
.credes-tw
	background #55acee
	&:hover
		background #409be0
		
.credes-yt
	background #de2623
	&:hover
		background #b8110e

.credes-fl
	background azultg
	&:hover
		background azultg2


// Contacto - RESPONSIVE  [ INICIO ]***********************************************

// Contacto - [Escritorio]------------------------------------------------------
//@media screen and (max-width: 1200px)

// Contacto - [Tablet]------------------------------------------------------
//@media screen and (max-width: 992px)

// Contacto - [Movil]------------------------------------------------------
@media screen and (max-width: 768px)
	.contacto-target
		margin-top 30px
// Contacto - RESPONSIVE [ FIN ]*************************************

// <----| Fin - Contacto |--------------------------------------<<<<







// <----| Nosotros |--------------------------------------<<<<

.nosotros-img
	background blancotg
	border 10px solid blancotg
	border-radius (10px)
	width 100%
	height auto
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	bloque-tg ()
	img
		width 100%
		height auto

.nosotros-box
	width 100%
	height auto
	padding 20px 30px 20px 30px
	background blancotg
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	text-align left
	border-radius (5px)
	h2
		font 28px fuente2
		color azultg
		padding 0px 0px 10px 0px
	p
		font 15px fuente1
		color  #555a61
		text-align left
		line-height 23px
	hr
		width 100%
		height 1px
		background rgba(0,0,0,.15)
		margin 20px 0px 20px 0px
		
@media screen and (max-width: 768px)
	.nosotros-img
		width 290px
		height auto

	.nosotros-box
		margin-top 30px
// <----| Fin - Nosotros |--------------------------------------<<<<








// <----| Destinos |--------------------------------------<<<<
.destinos-item
	width 100%
	height auto
	background blancotg
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	border-radius (5px)
	padding 0px 0px 20px 0px
	transition (all 200ms ease-out 20ms)
	margin 0px 0px 30px 0px
	overflow hidden
	figure
		width 100%
		height 150px
		overflow hidden
		position relative
		img
			width 100%
			height auto
			margin-top -20%
			transition (all 200ms ease-out 20ms)
	h2
		font 20px fuente2
		color azultg
		padding 10px 0px 0px 0px
	&:hover
		figure
			img
				transform (scale(1.15,1.15))

.destino-txto
	width 100%
	height 80px
	overflow hidden
	h1
	h2
	h3
	h4
	h5
	h6
		font 20px fuente2
		color azultg
		padding 10px 0px 0px 0px
	p
		font 15px fuente1
		color  #555a61
		text-align center
		line-height 23px
		width 100%
		height 80px
		overflow hidden
		padding 10px 15px 0px 15px
				

.destino-desc
	width auto
	height 40px
	background rgba(255,95,0,.9)
	position absolute
	top 0px
	left 0px
	font 19px fuente
	line-height 40px
	color blancotg
	padding 0px 13px 0px 13px
	border-radius (0px 0px 5px 0px)
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
// <----| FIN - Destinos |--------------------------------------<<<<










// <----| Promociones |--------------------------------------<<<<
.proms-item
	width 100%
	height auto
	background blancotg
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	border-radius (5px)
	overflow hidden
	padding 0px 0px 0px 0px
	transition (all 200ms ease-out 20ms)
	margin 0px 0px 30px 0px
	font-size 0px
	overflow hidden
	figure
		width 40%
		height 200px
		overflow hidden
		position relative
		bloque-tg ()
		img
			width 100%
			height 100%
			transition (all 200ms ease-out 20ms)
	.but
		margin 0px 10px 0px 0px
	&:hover
		figure
			img
				transform (scale(1.15,1.15))


.proms-txto
	width 60%
	height auto
	overflow hidden
	bloque-tg ()
	text-align left
	padding 0px 20px 0px 20px
	.promstitulo
		font 20px fuente2
		color azultg
		padding 10px 0px 0px 0px
		text-align left
		width 100%
	h1
	h2
	h3
	h4
	h5
	h6
		font 20px fuente2
		color azultg
		padding 10px 0px 0px 0px
	p
		font 15px fuente1
		color  #555a61
		text-align left
		line-height 23px
		width 100%
		height 92px
		overflow hidden
		padding 10px 0px 0px 0px
		margin-bottom 10px
		

//  - RESPONSIVE  [ INICIO ]***********************************************

//  - [Escritorio]------------------------------------------------------
@media screen and (max-width: 1200px)
	.proms-item
		figure
			width 30%

	.proms-txto
		width 70%

//  - [Tablet]------------------------------------------------------
@media screen and (max-width: 992px)
	.proms-item
		figure
			width 40%

	.proms-txto
		width 60%

//  - [Movil]------------------------------------------------------
//@media screen and (max-width: 768px)

//  - RESPONSIVE [ FIN ]*************************************

// <----| Fin - Promociones |--------------------------------------<<<<











// <----| Galeria |--------------------------------------<<<<
.galeria-item
	width 100%
	height auto
	transition (all 200ms ease-out 20ms)
	margin 0px 0px 30px 0px
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	border-radius (5px)
	overflow hidden
	position relative
	figure
		width 100%
		height 250px
		overflow hidden
		img
			width 100%
			height auto
			transition (all 200ms ease-out 20ms)
	&:hover
		figure
			img
				transform (scale(1.15,1.15))
		.galeria-hover
			opacity (1)
			
.galeria-titulo
	width 100%
	height 100px
	position absolute
	background -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%)
	background -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)))
	background -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%)
	background -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%)
	background -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%)
	background linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%)
	bottom 0px
	left 0px
	h2
		font 22px fuente2
		color blancotg
		line-height 50px
		margin-top 50px
		
.galeria-hover
	width 100%
	height 100%
	position absolute
	top 0px
	left 0px
	background rgba(0,70,179,.7)
	z-index 1
	transition (all 200ms ease-out 20ms)
	opacity (0)
	.but-2
		position absolute
		top calc( 50% - 35px )
		left calc( 50% - 35px )
	
	
// <----| FIN - Galeria |--------------------------------------<<<<








// <----| Single |--------------------------------------<<<<
.sing-precio
	width 100%
	height auto
	transition (all 200ms ease-out 20ms)
	margin 0px 0px 30px 0px
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	border-radius (5px)
	overflow hidden
	position relative
	background blancotg
	text-align left
	padding 0px 0px 20px 0px
	h3
		font 23px fuente1
		color blancotg
		line-height 50px
		background azultg
		padding 0px 0px 0px 20px
		
.sing-inf
	padding 20px 20px 0px 20px
	p
		font 15px fuente1
		color  #555a61
		text-align left
		line-height 23px
		line-height 40px
		border-bottom 1px dotted rgba(0,0,0,.2)
		strong
			font-size 30px
			color naranjatg
			float right
	
.sing-des
	width 100%
	height auto
	transition (all 200ms ease-out 20ms)
	margin 0px 0px 30px 0px
	box-shadow (0px 0px 10px 0px rgba(0,0,0,0.25))
	border-radius (5px)
	overflow hidden
	position relative
	background blancotg
	padding 20px 30px 20px 30px
	text-align left
	h2
	h1
		font 28px fuente1
		color azultg
		text-align left
		padding 10px 0px 20px 5px
	h3
	h4
	h5
	h6
		font 28px fuente1
		color azultg
		text-align left
		padding 10px 0px 20px 5px
	p
		font 15px fuente1
		color  #555a61
		text-align left
		line-height 23px
		padding 20px 0px 0px 5px
	ul
		padding 15px 0px 0px 0px
		li
			font 15px fuente1
			color  #555a61
			text-align left
			line-height 25px
			&:before
				font-family 'tg'
				font-size 15px
				color azultg
				content '\e913'
				margin 0px 5px 0px 0px
	.but-azul
		float right
			
.sing-carousel
	width 100%
	height auto
	
.sing-carousel-item
	width 100%
	height 250px
	border-radius (5px)
	overflow hidden
	img
		width 100%
		height auto
		
.input-date
	width 100% !important
	
.sinpadrow
	padding 0px !important
	margin 0px !important

//  - RESPONSIVE  [ INICIO ]***********************************************

//  - [Escritorio]------------------------------------------------------
//@media screen and (max-width: 1200px)

//  - [Tablet]------------------------------------------------------
//@media screen and (max-width: 992px)

//  - [Movil]------------------------------------------------------
//@media screen and (max-width: 768px)
@media screen and (max-width: 500px)
	.sing-des
		padding 15px 15px 15px 15px
		.but-verde
			float none
			bloque-tg ()
			
	.sing-carousel-item
		width 100%
		height auto

//  - RESPONSIVE [ FIN ]*************************************
// <----| FIN - Single |--------------------------------------<<<<










// <----| Destinos|--------------------------------------<<<<


.dest-item
	width 100%
	height auto
	bloque-tg ()
	background blancotg
	box-shadow (0px 0px 10px rgba(0,0,0,.3))
	border-radius (5px)
	position relative
	overflow hidden
	margin-bottom 30px
	transition (all 200ms ease-out 20ms)
	figure
		width 100%
		height auto
		overflow hidden
		border-radius (5px)
		bloque-tg ()
		img
			bloque-tg ()
			width auto
			height auto
			transition (all 300ms ease-out 30ms)
	&:hover
		.dest-btn
			transform (scaleX(1))
			transition (all 300ms ease-out 30ms)
			opacity (1)
		figure
			img
				transform (scale(1.1,1.1))
			
	
.dest-titulo
	width auto
	height 50px
	font 28px fuente
	color blancotg
	line-height 50px
	position absolute
	padding 0px 20px 0px 20px
	text-align left
	top 20px
	left 0px
	background rgba(1,44,99,.8)
	border-radius (0px 5px 5px 0px)

.dest-desc
	width auto
	height auto
	background rgba(0,0,0,.7)
	position absolute
	padding 20px 20px 20px 20px
	border-radius (0px 5px 5px 0px)
	text-align left
	top 70px
	left 20px
	right 10%
	p
		font 17px fuente3
		color blancotg
		line-height 20px

.dest-btn
	width auto
	height 45px
	background naranjatg
	border-radius (0px 5px 5px 0px)
	bloque-tg ()
	padding 0px 15px 0px 15px
	box-shadow (0px 0px 20px rgba(0,0,0,.8))
	transition (all 300ms ease-out 30ms)
	position absolute
	bottom 10%
	left 0%
	transform (scaleX(0))
	opacity (0)
	p
		font 16px fuente1
		color blancotg
		line-height 45px
		text-transform uppercase
		span
			 color blancotg
			 font-size 15px
			 float left
			 line-height 45px
			 padding 0px 15px 0px 0px
			 margin 0px 10px 0px 0px
			 border-right 2px solid rgba(0,0,0,.1)
	&:hover
		background #da5201
// <----| FIN - Destinos |--------------------------------------<<<<










// <----| Gracias |--------------------------------------<<<<
#gracias
	width 100%
	height auto
	padding 50px 0px 50px 0px
	text-align center
	h1
		font 35px fuente1
		color azultg
		padding 0px 20px 10px 20px
	h2
		font 30px fuente1
		color #555a61
		padding 0px 20px 20px 20px
	p
		font 22px fuente1
		color #555a61
		padding 20px 20px 20px 20px
	figure
		width 350px
		height auto
		bloque-tg ()
		img
			width 100%
			height auto

//  - RESPONSIVE  [ INICIO ]***********************************************

//  - [Escritorio]------------------------------------------------------
//@media screen and (max-width: 1200px)

//  - [Tablet]------------------------------------------------------
//@media screen and (max-width: 992px)

//  - [Movil]------------------------------------------------------
//@media screen and (max-width: 768px)
@media screen and (max-width: 500px)
	#gracias
		padding 25px 0px 25px 0px
		figure
			width 280px
			height auto

//  - RESPONSIVE [ FIN ]*************************************

// <----| Fin - Gracias |--------------------------------------<<<<










//------------------------- [ FIN - ESTILOS ] --------------------------/
//_____________________________________________________________________/