@charset "utf-8";
/* CSS Document */
:root {
  --clr-theme: #eb5360;
  --clr-theme-76: rgba(235,83,96,.76);
  --clr-text: #707070;
  --clr-link: var(--clr-theme);
  --clr-accent: #5775a0;
  --clr-accent-dark: #2c3e50;
  --clr-success: #54ba1d;
  --light2: #f8f8f8;
  --clr-grey: #8a898b;
  --vertical-space: 4em;
  --size-em-n-3-2: -1.5em;
  --radius-btn: 2.25em;
  --pad-card: 1.5em;
  --pad-button: var(--size-em-3-4) var(--size-em-1);
  --pad-input: var(--size-em-3-2) var(--size-em-5-4);
  --pad-select: var(--size-em-1-4) var(--size-em-7-8);
  --bdr-radius: .25em;
}

:root.dark {
  --clr-text: #bdbdbd;
  --light2: #080808;
  --dark-06: rgba(255,255,255,.06);
  --dark-12: rgba(255,255,255,.12);
  --dark-27: rgba(255,255,255,.27);
  --clr-black: #fff;
}

/*______ Dafaults ______*/
/*html { font-size: 16px; }
@media screen and (min-width: 25em) {
	html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (1600 - 400) ); }
}*/

html, body { display: block; }
svg.icon { vertical-align: middle; }

.btns > *, .btns.round > * { margin-right: 0; }
button, [type="button"], [type="reset"], [type="submit"], .btn:not(.border), .file > input[type="file"]+span::before, .btns > *, .tags > * { border: 0 none; box-shadow: none; }
[disabled], [readonly], .file > input[disabled] + span::before, [disabled]:hover, [readonly]:hover, .border[disabled]:hover, .border[readonly]:hover { background-color: var(--clr-theme); opacity: .52; }
.btns.mini { font-size: .75em; margin-top: 1em; }
.tags > * { padding: .5em 1em; }
.btn.accent { background-color: var(--clr-accent); }
.btn::before, .btns > *::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-color: var(--light); border-radius: var(--radius-btn); opacity: 0; transition: all var(--t-qtr); }
.btn:hover::before, .btns > *:hover::before { opacity: .12; }
.btn.hover-light { opacity: .85; }
.btn.hover-light:hover { color: var(--clr-text); background-color: var(--light); opacity: 1; }
.btn.border:hover { color: var(--light); background-color: var(--clr-theme); border-color: transparent !important; }
.btn.grey { --clr-theme: var(--clr-grey); }
.btn.google { background-color: #dd4b39; }
.btn.facebook { background-color: #3b5998; }
.btn.apple { background-color: #000; }

[type="range"] { height: var(--size-em-1-4); border: 0 none; }
table { --bdr-abs: var(--size-px-abs-1) solid var(--dark-06); --bdr-thick-abs: var(--size-px-abs-2) solid var(--dark-06); }
table::before { border-radius: var(--bdr-radius); }
.card table.body { margin: var(--size-em-n-1); width: calc(100% + 2em); }
.card table.body::before { display: none; }

ul.horizontal { display: table; width: 100%; }
ul.horizontal > li { display: table-cell; padding: 0 .5em; }
ul.inline.narrow > li { margin-right: .25em; }
ul.inline.narrow > li.right { margin-left: .25em; }
ul.tabs { display: flex; background-color: var(--light); font-weight: 700; text-align: center; }
.card > ul.tabs.header { padding: 0; border-radius: var(--size-em-3-8) var(--size-em-3-8) 0 0; }
ul.tabs > li { margin-right: 0; }
ul.tabs .links, ul.tabs .links::after { display: block; border-bottom: 0 none; border-radius: var(--size-em-3-8) var(--size-em-3-8) 0 0; }
ul.tabs .links { margin-bottom: var(--size-px-n-1); padding: var(--pad-select); color: var(--clr-text); opacity: .52; transition: all var(--t-qtr); }
.card > ul.tabs.header .links { padding: var(--size-em-1-2) var(--size-em-3-4); }
ul.tabs .links:hover, ul.tabs .links.active { background-color: var(--dark-06); opacity: 1; }
ul.tabs .links.active { background-color: var(--light); }
ul.tabs .links::after { content: ""; position: absolute; top: var(--size-px-n-1); left: var(--size-px-n-1); bottom: var(--size-px-n-1); right: var(--size-px-n-1); border: var(--size-px-1) solid transparent; border-bottom: 0 none; }
ul.tabs .links.active::after, ul.tabs li.active::after { border-color: var(--dark-06); }
ul.tabs .icon { font-size: var(--size-em-1-2); margin-top: var(--size-em-n-1-4); min-height: var(--size-em-1); opacity: .52; }

.card, fieldset { overflow: auto; margin-bottom: var(--size-em-3-2); background-color: var(--light); border: 0 none; box-shadow: 0 0 .5em 0 rgba(0,0,0,.08); }
fieldset { overflow: visible; }
.hilite, .card.flat { background-color: var(--light2); }
.card.flat { box-shadow: none; }
.card .badge { font-size: .75em; position: absolute; top: 1.5em; right: -7.25em; left: auto; bottom: auto; padding: .6666667em 2em; width: 20em; height: auto; z-index: 0; line-height: 1; background-color: var(--clr-success); text-align: center; transform: rotate(45deg); }
.card.flat > .title { margin-bottom: 1.2em; padding-bottom: .6em; color: var(--clr-black); border-bottom: var(--size-px-abs-1) solid var(--dark-06); font-weight: 500; }
.card > .body .loading.text::after { background-color: rgba(255,255,255,.2); }
label > .field, .wysiwyg::before { margin-left: var(--size-em-1-2); }
button, [type="button"], [type="reset"], [type="submit"], .btn, .file > input[type="file"] + span::before, .btns > * { color: var(--light); }
/* fieldset.labeled.left .field { padding-right: var(--size-em-3-4); } */

.separate > *::after { content: ""; position: absolute; z-index: 0; }

/*______ Common Classes ______*/
.transparent { opacity: 0; transition: all 400ms; }
.pos-a { position: absolute; top: 0; }
.pos-a.left { left: 0; }
.pos-a.right { right: 0; }
ul.inline.center { text-align: center; }
.lite { opacity: .52; }
.breather { padding-top: 4.5em; padding-bottom: 4.5em; }
.breather-sm { padding-top: 2em; padding-bottom: 2em; }
.breather-top { padding-top: 2em; }

.alert { font-size: .75em; display: inline-block; padding: .5em 1em; background-color: var(--dark-06); border-radius: var(--radius-btn); transition: all var(--t-qtr);}

.clr-danger { color: var(--clr-danger); }
.clr-success { color: var(--clr-success); }
.clr-black { color: var(--clr-black); }
.faded { opacity: .27; }

.w-min { width: 1.5em; max-width: 100%; }
.w-3 { width: 3em; max-width: 100%; }
.w-6 { width: 6em; max-width: 100%; }
.w-12 { width: 12em; max-width: 100%; }
.w-25 { width: 25em; max-width: 100%; }

.hellip { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-bottom-half { margin-bottom: .5em; }
.m-n1 { margin-bottom: var(--size-em-n-1); }
.m-n3-2 { margin-bottom: var(--size-em-n-3-2); }

.indent { margin-left: var(--size-em-3-2); }

.marker { background-color: #ffeb3b; }
.shift { transition: all var(--t-half); }
.shift.up:hover { margin-top: -.5em; padding-bottom: .5em; }
.shift.right:hover { margin-right: -.5em; padding-left: .5em; }
.bounce { animation: bounce 1.5s infinite; }
/* .dropdown .content { animation: slideDown var(--t-qtr) ease-out 0s 1; } */
@keyframes bounce {
  0%   { transform: scale(1,1)      translateY(0); }
  10%  { transform: scale(1.1,.9)   translateY(0); }
  30%  { transform: scale(.9,1.1)   translateY(-20px); }
  50%  { transform: scale(1.05,.95) translateY(0); }
  57%  { transform: scale(1,1)      translateY(-7px); }
  64%  { transform: scale(1,1)      translateY(0); }
  100% { transform: scale(1,1)      translateY(0); }
}

.logo.appstore, .logo.playstore { width: 4.5em; }
.logo.big { height: 2.25em; width: 6.75em; }

.dropdown .content { margin-top: .5em; padding: .25em 0; }

blockquote.card, blockquote.card + .author { overflow: visible; padding-left: 4em; transition: all var(--t-qtr); }
blockquote.card::before { content: "\201C"; font-size: 6em; border: 0 none; opacity: .52; left: .2em; top: 0; }
blockquote.card::after { position: absolute; top: 100%; left: 3.75em; border-width: .75em .75em 0; border-style: solid; border-color: var(--light2) transparent transparent; transition: all var(--t-qtr); }
blockquote.card + .author .alert { margin: .5em 0 0 -.5em; }
.active > blockquote.card { --light2: var(--clr-theme); color: var(--light); }
.active > blockquote.card + .author .alert { color: var(--clr-theme); background-color: rgba(235,83,96,.12); }

.hero.parallax { background-attachment: fixed; }

.flip-banner { overflow: hidden; display: block; background-color: var(--clr-theme-76); border-radius: 0; }
.flip-banner::after { content: " "; display: block; height: 3em; }
.flip-banner > .toggle { display: block; position: absolute; left: 0; right: 0; line-height: 0; transition: all var(--t-qtr); }
.flip-banner > .toggle:last-child { top: 100%; opacity: 0; }
.flip-banner:hover > .toggle { top: -50%; opacity: 0; }
.flip-banner > .toggle, .flip-banner:hover > .toggle:last-child { top: 50%; opacity: 1; }

/*______ Site Specific ______*/
body.setup { background-color: var(--light2); }
body.auth { background-color: var(--clr-accent-dark); }
body.auth .logo { margin: .5em auto 0; width: 3em; height: .75em; opacity: .27; }
body.auth > .wrapper { --wrapper: 25em; margin-bottom: 1.5em; }
body.auth .title, body.auth > .wrapper > .extra { text-align: center; }
body.auth label > *:focus ~ .field, body.auth label > *:active ~ .field { color: var(--clr-theme) !important; }
body.auth button.submit { margin-top: 1.5em; }
.social-btns .row { overflow: hidden; margin: 0 -.5em -1em; }
.social-btns .row > * { padding: 0 .5em; margin-bottom: 1em; }
.split-or { position: relative; margin: 2em 0; line-height: 0; z-index: 0; opacity: .52; }
.split-or::before, .split-or::after { content: ""; position: absolute; }
.split-or::before { left: 40%; right: 40%; top: -.5em; bottom: -.5em; z-index: -1; background-color: var(--light); }
.split-or::after { left: 0; right: 0; top: 0; bottom: 0; z-index: -2; border-bottom: var(--bdr); }
label.in-country { position: absolute; left: 0; top: auto; width: calc(4em + var(--size-px-1)); z-index: 3; }
label.in-country .select > span { border-top-right-radius: 0; border-bottom-right-radius: 0; }
label.in-country + label { width: calc(100% - 4em); margin-left: 4em; }
label.in-country + label input { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.topbar { padding: 1em 0; color: var(--light); border-color: rgba(255,255,255,0.15); box-shadow: none; }
.topbar.dark { background-color: var(--clr-accent-dark); border-bottom: 0 none; }
.topbar.trans { background-color: transparent; }
body.scroll-down > .topbar { top: -10em; }
body.scroll-up > .topbar { padding: .5em 0; color: var(--clr-text); background-color: var(--light); box-shadow: 0 0 .75em 0 rgba(0, 0, 0, 0.12); }
.topbar .icon { margin-top: -.125em; }
.topbar .logo { margin-right: .5em; }
.nav-primary a { white-space: nowrap; }
.nav-primary > li { padding-top: 0; }
.nav-primary > li.left { padding-top: .375em; }
.nav-primary li .btn { color: inherit; background-color: transparent; }
.nav-primary li.left .btn { font-size: .875em; background-color: transparent; line-height: 1; }
.nav-primary li .btn:hover { background-color: var(--dark-12); }
.nav-primary li.left .btn:hover, .nav-primary .active .btn, .nav-primary li .cta.btn { color: var(--light); background-color: var(--clr-theme) !important; }
.nav-primary .btn::before { display: none; }
.nav-primary .dropdown { display: block;}
.nav-primary .dropdown .content { color: var(--clr-text); }
.nav-primary .dropdown .content a:hover { color: var(--clr-link); background-color: transparent; }
.nav-primary .search-item .content { left: -7.5em; right: -7.5em; }
.nav-primary .bounce { animation-iteration-count: 3; }
.topbar.fixed ~ main, .topbar.fixed ~ .main { top: 0; margin-bottom: 0; }

.topbar.fixed ~ main > *:first-child, .topbar.fixed ~ .main > *:first-child { padding-top: 5em; }
.section-title { font-size: 1.75em; position: relative; padding-bottom: .25em; color: var(--clr-black); }
.section-title::after { content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -1.25em; width: 2.5em; height: var(--size-px-abs-2); background-color: var(--clr-theme); border-radius: var(--size-em-1-4); }
.section-title ~ .content { margin-top: 2.5em; }

.bar, .bar input, .bar select { border-color: transparent; border-radius: 2.25em; }
.bar { position: relative; margin: 0 auto 1.5em; max-width: 80em; color: var(--clr-text); background-color: var(--light); animation: slideDown var(--t-half) ease-out 0s 1; }
.bar input { padding: 2em 1.5em; }
.bar select { padding: 1em 1.25em; height: 4.125em; }
.bar input.has-submit { padding-right: 10em; }
.bar .btn { z-index: 3; }
.bar input.has-submit ~ [type="submit"] { display: block; position: absolute; top: .5em; right: .625em; }
.search-results.menu { color: var(--clr-text); background-color: var(--light); border: var(--bdr-lite); text-align: left; }
.search-results.menu.abs { position: absolute; top: 100%; left: 1em; right: 1em; margin-top: -.25em; padding: 1.25em; z-index: 10; border-radius: var(--bdr-radius); box-shadow: var(--box-shadow); }
.dropdown .search-results.menu { border: 0 none; }
.search-results.menu li { position: relative; margin-bottom: 0; }
.search-results.menu .item > * { display: block; padding: .25em .5em .25em 1.5em; transition: all var(--t-qtr); }
.search-results.menu a { color: inherit; border: 0 none; white-space: normal; }
.search-results.menu a:hover { color: var(--clr-theme); }
.search-results.menu .item .icon { position: absolute; left: 0; top: var(--size-em-3-8); color: var(--clr-theme); opacity: .76; }
.search-results.menu .no-result ~ .icon { display: none; }

body > footer .logo { display: inline-block; }

.modal-container { z-index: 100; background-color: rgba(0,0,0,.76); }
.modal-item { width: var(--wrapper); background-color: var(--light); animation: slideDown var(--t-half) 1 linear; }

@media (max-width: 1279.98px) {
  body > footer .col.last { text-align: center; }
}
@media (max-width: 1023.98px) {
  body > footer { text-align: center; }
  body > footer .links.vertical li { padding-left: 0; }
  body > footer .links.vertical li::before, body > footer .links.vertical li::after { display: none; }
  .separate > *::after { right: 1.5em; left: 1.5em; bottom: 0; border-bottom: var(--bdr-lite); }
}
@media (min-width: 1024px) {
  .separate > *::after { right: 0; top: .5em; bottom: .5em; border-right: var(--bdr-lite); }
}

.booking-form.bar label { margin-bottom: 0; }
.booking-form.bar .loc-picker { position: absolute; top: .5em; right: 7.5em; }
.location-bar input.has-submit { padding-right: 15em; }
.location-bar [type="submit"] { padding: .75em 1.5em; }
.location-bar .loc-picker { position: absolute; top: .5em; right: 6em; }
main.home .hero::before { background-color: var(--dark-27); }
main.home form.search input.has-submit { padding-right: 4em; }
main.home form.search [type="submit"] { z-index: 0; }
main.home .location-bar input.has-submit { padding-right: 18em; }
main.home .location-bar .btn.submit { background-color: var(--clr-accent); }
main.home .location-bar .loc-picker { right: 9em; }

.filters { margin: 1em 0; }
.filters > ul { margin-bottom: .5em; }
.filters > ul:first-child { padding: .25em; border: var(--bdr-lite); border-radius: var(--radius-btn); }
.filters .dropdown > .trigger > span, .filters > ul > li.check span.bold { font-size: .875em; color: var(--clr-text); }
.filters .dropdown > .trigger:hover, .filters .dropdown.active > .trigger { background-color: var(--dark-06); }
.filters .dropdown.active > .trigger > span { color: var(--theme); }
.filters .dropdown > .content { padding: .75em .5em; min-width: 100%; width: 25em; }
.filters .dropdown > .content.big { min-width: 35em; }
.filters .dropdown > .content.small { padding: .25em 0; width: 12em; }
.filters .btn { padding: .5em 1em; font-weight: 700; }
.filters .btn.circle { margin: var(--size-px-n-1); padding: .5em .6875em; }
.filters .dropdown > .content .btn:not(.border) { color: var(--light); }
.filters .axn-btns { display: block; margin-top: 1.5em; text-align: right; }
.filters > ul > li.check { padding: .5em 0; }
.filters > .result > li { font-size: .875em; padding: .25em .75em; }
.filters > .result > li .close { font-size: 1.5em; position: relative; top: var(--size-px-1); line-height: 0; }

main.generic section.thumb-left .thumbnail { float: left; }
main.generic section.thumb-right .thumbnail { float: right; }
main.generic .thumbnail img { display: block; margin: 0 auto; max-height: calc(var(--wrapper) * .5); }
main.generic .thumbnail + * { margin-top: 2em; }
main.generic.app .wrapper.boxed { max-width: 1200px; }
main.generic.app .card.flat { min-height: 11.75em; }
main.generic.app > section:first-child .wrapper.boxed { max-width: 1024px; }
@media screen and (min-width: 1280px) {
  main.generic.app section.features .thumbnail img { float: right; margin: -4.5em auto; }
}
main.generic.join_dineplan > .showcase img { margin-bottom: 2em; width: 100%; height: auto; }
main.generic.join_dineplan > .showcase img:last-child { margin-bottom: 0; }
main.generic.join_dineplan > .plans .card > header { padding: var(--pad-card); background-color: var(--light2); border: 0 none; }
main.generic.join_dineplan > .plans .featured.card { z-index: 1; margin-top: -1.5em; }
main.generic.join_dineplan > .plans .featured.card > header { color: var(--light); background-color: var(--clr-theme); }
main.generic.join_dineplan > .plans .card .badge { color: var(--clr-theme); background-color: var(--light); }
main.generic.join_dineplan > .plans .price .value { font-size: 2em; }
main.generic.join_dineplan > .plans .btn.cta { margin-top: 1.5em; color: var(--clr-theme); background-color: transparent; border: var(--size-px-1) solid var(--clr-theme); }
main.generic.join_dineplan > .plans .btn.cta:hover, main.generic.join_dineplan > .plans .featured .btn.cta { color: var(--light); background-color: var(--clr-theme); }
