//----
// C O L O R S
// Set your color as rgb sintax, this help to stylus functions like darken,lighten
//---

// Base colors, don't remove this colors

blanco = rgb(255,255,255)
azul = rgb(2, 38, 56,1)
gris = rgb(158,158,158)
negro = rgb(2,40,66,1)
online = rgb(35,160,0)
rojo-cesar = rgb(255, 0, 0)
naranja = primary
rojo-cesar-disabled = rgb(255, 113, 113)
blueinfo = rgb(38, 120, 193) // For all interactions like buttons or anchors, that fire events to load or go to information// For all interactions like buttons or anchors, that fire events to load or go to information
blueExx = rgb(10, 183, 225)
// Your color as ordinal numbers for design system consistency, use a brand colors to set this colors

primary = rgb(165, 236, 145, 1)
secondary = rgb(245, 239, 208,1)
tertiary = rgb(247, 7, 149, 1)
quaternary = rgb(2, 40, 66, 1)
quinary = rgb(3, 42, 72, 1)
fifth = rgb(110, 118, 106)
sixth = rgb(255, 68, 0)
seventh = rgb(181, 181, 181)
senary = rgb(51, 61, 111)
tripgreen = rgb(74, 134, 63)

// ----------------------------------------
// E L E M E N T S
// ----------------------------------------
$borderStyle = 1px solid alpha(blanco, 0.6)
$borderFirstBlock = 1px solid seventh
$bColorWhyContent = rgb(254, 235, 229)
$bColor_quinary = quinary

//
// F O N T  F A M I L Y
// This fonts will declare on scripts.volt to async load, only use Google fonts
//

$fontFamily = 'Source Sans Pro', sans-serif
$fontFamilySecondary = 'Anton'
$fontFamilyAlternative = 'Francois One'
$navUla = quinary
// C for color ------------
// B for bacground ------------

// Element Colors
$cColor_text = negro
$cColor_h1slider =
	color blanco
$cColor_h3-azul = blanco
$slogan = color online
$cColor_text = blanco // Body color font
$cColor_h1 = primary
$cColor_h2 =primary
$cColor_h3 = primary
$cColor_h4 = fifth
$cColor_h5 = quaternary
$cColor_h6 = quaternary
#use
	.booking
		.tab--content
			overflow hidden
			background alpha(blanco, 90%)
			color negro
			.amount--regular
				color negro !important
$h2_sitioM =
	color primary !important
	font-family $fontFamily
	text-transform uppercase
	font-size 2rem
	line-height 2.2rem !important
	margin-bottom 0.5rem

$Small =
	display block
	margin-bottom 2rem
	line-height 1.8rem

//fontsite
$h1_sitio =
	font-family $fontFamilySecondary
	text-transform uppercase
	margin 3rem 0 1.5rem 0 !important
$h2_sitio =
	color $cColor_h2 !important
	font-family $fontFamily
	font-weight 400
	font-size 2.8rem
	line-height 4.5rem !important
	margin-bottom 0.5rem
$h2_intro =
	text-align right
	font-family $fontFamily

$h3_sitio =
	text-transform uppercase
	font-family $fontFamilySecondary
	text-transform uppercase
	color primary
$h4_sitio =
	//color $cColor_h4
	font-family $fontFamily
//Promo
$promoItem =
	margin-bottom 2em
	padding 1rem
	background-color rgba(255, 255, 255, .3)
	.slogan
		font-weight 400
	h3
		color quinary
		font-family $fontFamily
		font-weight 400
		line-height 3.3rem
		margin-top 3rem
	h4
		font-family $fontFamily
		color quinary
		font-weight 400
	p
		font-family $fontFamily !important
		font-size 2.8rem
		line-height 1.375em
	small
		{$Small}
	img
		width 85%
	.columns
		margin-left 0% !important
	.button-mas
		border 1px solid primary
		color primary
		&:hover,
		&:focus
			color blanco
			background primary

$alt_h4 =
	//color naranja
	font-family $fontFamilySecondary
	text-transform uppercase
	margin-bottom 0

$cColor_Rate = fifth

/*POPOVER TOOLTIP*/
$bInfoTooltip =
	padding 0px 8px
	background blueExx
	color blanco
	border-radius 100%
	font-size 1.2em
	&:hover
		cursor pointer
	&:before
		content: "?";
//
// B O D Y
//
// url declaration should be over two folders
$bBody =
	background-color azul

// Main wrap background color
$bColor_main = azul

$fake_checkbox =
	border-radius 5px
	display inline-block
	width 25px
	height 25px
	border 1px solid online
//
// B U T T O N S
//
$bColor_ButtonPrimary = blueinfo
$cColor_ButtonPrimary = blanco

$bButton_first_pay = rojo-cesar
$cButton_first_pay = blanco
$bButton_first_pay_disabled = rojo-cesar-disabled
$paddingbuttonfirst =
	padding-left .5rem !important
	padding-right .983rem !important
	float left

$bColor_ButtonGral = primary
$cColor_ButtonGral = blanco
$ButtomGralProduct =
	color blanco
	border 1px solid blanco
	background-color transparent
	&:hover
	&:focus
		background-color azul
		border 1px solid azul
		color blanco

$bColor_ButtonSecondary = azul
$cColor_ButtonSecondary = blanco

$bColor_ButtonTertiary = tertiary
$cColor_ButtonTertiary = blanco

$bColor_ButtonGhost = blanco !important
$cColor_ButtonGhost = blanco !important

$bColor_ButtonGhost_hover = azul !important
$cColor_ButtonGhost_hover = blanco !important

$bColor_ButtonGhost_why = primary !important
$cColor_ButtonGhost_why = primary !important
$borderColor_ButtonGhost_why = primary !important

$cColor_ButtonGhost_why_hover = blanco !important

$ProductOver =
	color blanco
	height 100%



// I N T E R N A L  S E C T I O N S
$bColor_Body = blanco

//
// H E A D E R
//

// On mobile
$bColor_Header = primary
$bColor_Header_Principal = tertiary
$cColor_Header = secondary

// On desktop

//When turn on fixed
$bColor_HeaderDesktop = azul

//
// F O O T E R
//

//
// F O O T E R
//

$bUpperfooter =
	background-color #022638
	background-position top center
	background-size cover

$bColor_Footer =
	background-color azul

$cColor_Footer = azul
$bColor_BottomFooter =
	background quinary

$bBottomfooter =
	background-color azul


$bColor_Phones = sixth
$cColor_Phones = blanco

$bColor_Discount =
	background-color primary !important
	border-bottom 2px solid primary
	h4
		color tertiary !important
$discountRightM =
	background-color transparent
    color primary
$discountRightD =
	background-color blanco
    color primary

$bColor_footerLinks =
	color blanco
	span
		border-bottom 2px solid blanco
/**
*	N A V I G A T I O N S
*/

/* Main navigation aka */
$bColor_mainNav = secondary
$cColor_MainNav = quaternary

// Anchor color on primary navigation
$cColor_Anchor = blanco
// Dropdown background color on primary navigation
$bColor_mainNavDropdown = primary
// Dropdown separator between items
$dropdownBorderStyle = $borderStyle

/* Toolbar navigation */
//Dropdown background on toolbar navigation
$bColor_toolbarNavDropdown = primary

/* Lateral navigation */
// Background color of wrap of hidden navigation
$bColor_lateralNav = quinary
// Anchor color
$cColor_lateralNav = blanco

/* Breadcrumbs */
$bColor_Breadcrumb = quaternary
$cColor_Breadcrumb = blanco

//Accordion
$bColor_accordion = tertiary
$cColor_accordion = blanco

//Savings
$bColor_saves = blueinfo
$cColor_saves = blanco

//
//  B O O K I N G
//

// Background color of wrap div
$bColor_Booking = azul

$bookingAside =
	background alpha(blanco,90%)
	color azul !important
	.amount--regular
		color negro

//why booking
$whyBookingDescription =
	h4
		color primary
		font-weight 700
		margin-bottom 0.5rem
		//margin 1em 0 3em 0
		font-size 1.6rem
		line-height 2rem
	p
		color fifth
		font-weight 400
		font-size 1.3rem !important
		line-height 2rem
		margin-bottom 3rem !important

$whyBookingTitle =
	h3
		//color quinary
		font-family $fontFamily
		color quinary
		font-size 2.2rem
		font-weight 700
		text-align center
		line-height emify(20px)
// Form elements on booking and buybox
$cColor_border = 1px solid $cColor_text
// Add on
$bColor_addOn = primary
$cColor_addOn = blanco
//Input color
$cColor_input = negro

// Tabs
$bColorTabDefault = primary
$cColorTabDefault = blanco

$bColorTabSecond = sixth
$cColorTabSecond = blanco

$tabContent =
	height emify(45px)
	border-bottom 1px solid primary
	color fifth

$tabContentActive =
	background-color blanco
	border 1px solid primary
	border-bottom 0 none
	color primary

// Tabs as pills
$bColorPills = quinary
$cColorPills = blanco

// Vertical tabs
$bColorTabsVertical = linear-gradient(left, primary 25%, sixth 75%)

// Banner
$bColor_banner = tertiary
$cColor_banner = blanco

//
$bColor_tableHeader = primary
$cColor_tableHeader = blanco


$actividadesQuees =
	margin-bottom 2em
	padding-bottom 5px
//
// P A Q U E T E S
//
$cTitlePaquetes =
	h3
		color primary
	h4,
	h5
		color senary
$bSeparadorPaquetes =
	border-bottom 1px solid alpha(quinary, 5%)
	margin 0
	padding 0
$cAmountOnlineRateBox =
	color online
$ratePayButton =
	background-color rojo-cesar
	color blanco
	text-transform uppercase
	transition background-color 1s ease
	position relative
	width 100%
	&:hover
	&:focus
		background-color darken(rojo-cesar, 30%)
		color blanco
	&:disabled
		background-color rojo-cesar-disabled

	&.done
		background-color online
		.leave
			animation hidde 250ms ease-out
			animation-fill-mode forwards
		.come
			animation show 500ms ease-in
			animation-fill-mode forwards
// HERO
$heroShadow =
	.up
		height 100%
		background alpha(negro, 70%)
// F i l t e r
$bColor_filter = quaternary
$cColor_filter = blanco
$cBorder_item = 1px solid quinary

$itemPackage =
	border-bottom $cBorder_item
	padding $default
	transition box-shadow 0.250s ease-in
	background-color $bColor_item
// I t e m

$bColor_item = blanco
$cColor_item = inherit

// A S I D E

// Aside divider
$bAsideDivider = fifth

// F A Q S

// Topic Highlight
$bColorTopicI = lighten(primary, 80%)
$cBorderTopics = seventh

// M S I
$bColor_Msi =
	border 1px solid seventh

/**
	B A N N E R
*/

/* Booking */
// Background color banner
$bColor_bannerBooking = quaternary
$bColor_bannerBooking_alt = primary
// Type color banner
$cColor_bannerBooking = blanco

/* Ficha */
// Background color banner
$bColor_banner = senary
// Type color banner
$cColor_banner = blanco


$tripadvisor_Xenotes =
	background-color tripgreen
	margin-bottom 0
	background-repeat-y no-repeat
	background-position bottom

// N E W S L E T T E R
$bBottomfooter =
	background-color azul
    background-image url('../../../img/linea_01.png')
    background-position 50%
    background-repeat no-repeat
    margin-bottom 0 !important
    height 10em !important

$cNewsletter = azul
$boton_newsletter =
	background-color azul !important
	border-color primary !important
	margin 0 2remc
	&:hover
	&:focus
		background-color azul
		color azul

$divBox =
	background gris2
	border 1px solid rgb(209,209,209)
	padding 1em
	box-sizing border-box
$bBenefitsNews =
	padding-top 1em
	background-color azul
	h3
		font-weight 400
		color blanco
		text-align center
		p
			font-size 0.7em
			margin 0
		p:nth-of-type(2)
			font-size 0.5em
			.cant_discount
				font-size 3em
$bPaymentNews =
	padding-top 1em
	background-color blue_legals
	h3
		font-weight 400
		color blanco
		text-align center
		p
			margin 0.3em
			font-size 0.8em
			img
				width 60px
				margin 0 auto
/*FAQ*/
$faqDesk =
	background darken(quinary, 5%)
	color blanco
	li
		border-bottom 1px solid alpha(blanco, 50%)
$faqDeskText =
	color primary
$faqTabsActive =
	background quaternary
	color white
$faqContentPanel =
	background-color lighten(primary, 90%)
$faqPanelTitle =
	margin-bottom 0
	border 0
	color negro
	font-weight 400

/*SITEMAP*/
$cMenuSitemap =
	color quinary
	&:active
	&:hover
		color lighten(quinary, 25%)

// Main wrap background color
$bColor_main = alpha(negro, 0.5)

//
// B U T T O N S
//
$bColor_ButtonPrimary = blueinfo
$cColor_ButtonPrimary = blanco

$bColor_ButtonSecondary = quaternary
$bColor_ButtonSecond = primary
$cColor_ButtonSecondary = blanco

$bColor_ButtonTertiary = tertiary
$cColor_ButtonTertiary = blanco

$bColor_ButtonGhost = azul
$cColor_ButtonGhost = blanco

// I N T E R N A L  S E C T I O N S
$bColor_Body = #000

//
// H E A D E R
//

// On mobile
$bColor_Header = quaternary
$cColor_Header = secondary

$bColor_lateralNav = quaternary
$cColor_lateralNav = blanco

// On desktop

//When turn on fixed
$bColor_HeaderDesktop = azul



//
// N A V I G A T I O N
//
$bColor_mainNav = secondary
$cColor_MainNav = quaternary

// Main
// Anchor on mobile
$cColor_Anchor = blanco
// Anchor on desktop
$cColor_AnchorDesktop = tertiary
// Dropdown main navigation
$bColor_mainNavDropdown = negro
//Dropdown border on main nav
$dropdownBorderStyle = 1px solid secondary

// Toolbar
//Dropdown toolbar navigation
$bColor_toolbarNavDropdown = negro

//Breadcrumb
$bColor_Breadcrumb = quaternary
$cColor_Breadcrumb = blanco

//Accordion
$bColor_accordion = tertiary
$cColor_accordion = blanco

//Savings
$bColor_saves = blueinfo
$cColor_saves = blanco

//
//  B O O K I N G
//

// Background color of wrap div
$bColor_Booking = negro
// Form elements on booking and buybox
$cColor_border = 1px solid primary
// Add on
$cColor_addOn = blanco
//Input color
$cColor_input = blanco

// Color of rate
$cColor_Rate = blanco

// Tabs
$bColorTabDefault = primary
$cColorTabDefault = blanco

$bColorTabSecond = sixth
$cColorTabSecond = blanco

// Tabs as pills
$bColorPills = quinary
$cColorPills = blanco

// Vertical tabs
$bColorTabsVertical = linear-gradient(left, primary 25%, secondary 75%)

// Banner
$bColor_banner = tertiary
$cColor_banner = blanco

//
$bColor_tableHeader = quaternary
$cColor_tableHeader = blanco

//
// P A Q U E T E S
//

// F i l t e r
$bColor_filter = quaternary
$cColor_filter = blanco
$cBorder_item = 1px solid seventh

// I t e m

$bColor_item = blanco
$cColor_item = inherit

// A S I D E

// Aside divider
$bAsideDivider = fifth

// F A Q S

// Topic Highlight
$bColorTopicI = darken(fifth, 60%)

// M S I
$bColor_Msi =
	border 0 none


// N E W S L E T T E R
$bColor_Newsletter =
	background-color azul
	background-image url('../../../img/linea_01.png')
	background-position center
	background-repeat no-repeat
//Modal
$cColor_Labels = negro


#myTabsFAQ
	li
		&.active
			background azul(secondary, 30%)
.faq-xenotes-content
	color blanco
	#faqDesck
		background transparent
		h4
			color blanco
	#faqContent
		.panel-title
			color blanco
		.panel
			&:nth-of-type(odd)
				color blanco
				background-color azul
				p
					color blanco
.normas
	width 100%
	
.ffyc
	width 15%

nav
	#currency, #cart
		display none
		
.resp-container
	position relative
	overflow hidden
	padding-top 56.25%

.resp-iframe
	position absolute
	top 0
	left 0
	width 100%
	height 100%
	border 0


@media (min-width : 61.875em)
	.normas
		width 24%