/* ---------------------- BREAKPOINTS ---------------------- */ /* xx | 576+ xs | 768+ sm | 992+ md | 1200+ lg | 1600+ xl */ /* --------------------------------------------------------- */ /* -------------------- GENERAL -------------------- */ :root { /* colors - some used in embedded svg below */ --dkgreen: rgba(95,173,66,.025); --hr: rgba(95,173,66,.25); --green-shadow: rgba(95,173,66,.5); --green: #5fad42; --green-neon: #7fbd68; --green-hover: #9fce8e; --blue: #0087a3; --blue-neon: #339fb5; --blue-hover: #66b7c8; --purple: #6d56fd; --purple-neon: #8a78fd; --purple-hover: #a79afe; --red: #e44220; --red-neon: #e9684d; --red-hover: #ef8e79; --ltgray1: #ccc; --ltgray2: #aaa; --ltgray3: #999; --ltgray4: #808080; --dkgray: #141414; --mdgray: #282828; --dark: rgba(0,0,0,.25); --darker: rgba(0,0,0,.5); /* spacing */ --header-height: 50px; --nav-header-top: var(--header-height); --cart-bar-height: 50px; --hspace: 20px; --nhspace: calc(-1 * var(--hspace)); --vspace: 50px; --nvspace: calc(-1 * var(--vspace)); --mobile: 320px; --mobile-pad: calc(var(--mobile) - 2 * var(--hspace)); --tablet: 700px; --desktop: 950px; /* other */ --headline-rem: 14px; --letter-spacing: .025em; --pill: 500px; --rounded: 6px; --t1: .2s; --t2: .5s; } @media (min-width: 768px) { /* sm up */ :root { --vspace: 60px; } } @media (min-width: 992px) { /* md up */ :root { --header-height: 70px; --hspace: 30px; --vspace: 80px; --headline-rem: 16px; } } html.noscroll {position: fixed; width: 100vw; height: 100vh; overflow: hidden;} body {background: var(--dkgray); color: #ccc; font-family: Urbanist, sans-serif; line-height: 1.2;} section {position: relative;} hr {height: 1px; margin-top: calc(var(--vspace) / 2); margin-bottom: calc(var(--vspace) / 2); border: 0; background: var(--hr);} .dense hr {margin-top: calc(var(--vspace) * .75); margin-bottom: calc(var(--vspace) * .75);} .abs-center {position: absolute !important; left: 50%; top: 50%; transform: translate(-50%,-50%);} .ajax-fade {opacity: .75;} .spinner {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px;} .spinner:after {content: ''; width: 1em; aspect-ratio: 1; border-radius: 50%; border: .4em solid var(--hr); border-bottom-color: var(--green); animation: spin 1.25s linear infinite;} @keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } .new {animation: newitem 3s 1 ease-in;} @keyframes newitem { 0% {box-shadow: 0 0 30px var(--green); padding-left: 10px; padding-right: 10px;} 99% {box-shadow: 0 0 0 transparent; padding-left: 10px; padding-right: 10px;} 100% {box-shadow: 0 0 0 transparent; padding-left: 0; padding-right: 0;} } .close {position: absolute; right: 0; top: 5px; width: 40px; height: 40px; font-size: 45px; font-weight: 200; color: var(--green); z-index: 5; overflow: hidden;} .close:before {content: '\FF0B'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); transition: font-size var(--t1);} .close:hover:before {color: var(--green-neon); text-shadow: 0 0 10px var(--green); font-size: 110%;} .invisible, .leave-clone-example {display: none !important;} /* -------------------- SPACING -------------------- */ section + section {margin-top: var(--vspace);} section + hr {margin-top: var(--vspace); margin-bottom: var(--vspace);} .m-0 {margin: 0 !important;} .mt-0 {margin-top: 0 !important;} .mb-0 {margin-bottom: 0 !important;} .m-1 {margin: 10px !important;} .mt-1 {margin-top: 10px !important;} .mb-1 {margin-bottom: 10px !important;} .px-1 {padding-left: 10px !important; padding-right: 10px !important;} .pt-1 {padding-top: 10px !important;} .pb-1 {padding-bottom: 10px !important;} .m-2 {margin: 20px !important;} .mt-2 {margin-top: 20px !important;} .mb-2 {margin-bottom: 20px !important;} .px-2 {padding-left: 20px !important; padding-right: 20px !important;} .pt-2 {padding-top: 20px !important;} .pb-2 {padding-bottom: 20px !important;} .m-v {margin: var(--vspace) !important;} .mt-v {margin-top: var(--vspace) !important;} .mb-v {margin-bottom: var(--vspace) !important;} .m-nv {margin: var(--nvspace) !important;} .mt-nv {margin-top: var(--nvspace) !important;} .mb-nv {margin-bottom: var(--nvspace) !important;} .m-hv {margin: calc(var(--vspace) / 2) !important;} .mt-hv {margin-top: calc(var(--vspace) / 2) !important;} .mb-hv {margin-bottom: calc(var(--vspace) / 2) !important;} .m-nhv {margin: calc(var(--nvspace) / 2) !important;} .mt-nhv {margin-top: calc(var(--nvspace) / 2) !important;} .mb-nhv {margin-bottom: calc(var(--nvspace) / 2) !important;} .m-h {margin: var(--hspace) !important;} .mt-h {margin-top: var(--hspace) !important;} .mb-h {margin-bottom: var(--hspace) !important;} .px-h {padding-left: var(--hspace) !important; padding-right: var(--hspace) !important;} .m-nh {margin: var(--nhspace) !important;} .mt-nh {margin-top: var(--nhspace) !important;} .mb-nh {margin-bottom: var(--nhspace) !important;} [class*="mx-c"] {margin-left: auto !important; margin-right: auto !important;} .mx-cm {max-width: var(--mobile);} .mx-ct {max-width: var(--tablet);} .mx-cd {max-width: var(--desktop);} .box {position: relative; padding: var(--vspace) var(--hspace);} .box > :first-child {margin-top: 0;} .pl-h {padding-left: var(--hspace);} .pr-h {padding-right: var(--hspace);} .px-h {padding-left: var(--hspace); padding-right: var(--hspace);} @media (max-width: 1239px) { /* container width down */ .mx-nh, section + hr {margin-left: var(--nhspace); margin-right: var(--nhspace);} table.mx-nh {width: calc(100% + var(--hspace) * 2);} } /* -------------------- BACKGROUNDS / BORDERS -------------------- */ .bkg-dkgray {background-color: var(--dkgray) !important;} .bkg-mdgray {background-color: var(--mdgray) !important;} .bkg-dark {background-color: var(--dark) !important;} .bkg-darker {background-color: var(--darker) !important;} .bkg-hr {background-color: var(--dkgreen) !important;} /* -------------------- TABLES -------------------- */ table {width: 100%; border-spacing: 1em; border-collapse: collapse; background: var(--dark); font-size: 16px;} table.no-bkg {background: none; border-bottom: 1px solid var(--hr);} th, td {padding: 1em calc(var(--hspace) / 2); text-align: left;} tbody th, tbody td {border: 1px solid var(--hr); border-width: 1px 0 0;} table.first-dark tr > :first-child {background: var(--dark);} table.last-dark tr > :last-child {background: var(--dark);} thead th {color: var(--green); font-weight: 600; text-transform: uppercase; line-height: 1; font-size: 14px; letter-spacing: var(--letter-spacing); vertical-align: bottom;} tbody th {color: #fff; font-weight: 500;} table .bull:only-child {display: block; font-size: 4em; line-height: .25; text-align: center;} @media (max-width: 575px) { /* xx only */ table {font-size: 14px;} th, td {padding: 1em calc(var(--hspace) / 2);} } @media (min-width: 576px) { /* xs up */ tr > :first-child, table.first-dark tr > :nth-child(2), table.last-dark tr > :last-child {padding-left: var(--hspace);} tr > :last-child, table.first-dark tr > :first-child, table.last-dark tr > :nth-last-child(2) {padding-right: var(--hspace);} } @media (min-width: 992px) { /* md up */ th, td {padding-top: 1.5em; padding-bottom: 1.5em;} } /* -------------------- TYPOGRAPHY -------------------- */ .sr {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;} /* screen reader only (not visible) */ .cursive {height: 112px; background: 50% 50% no-repeat; background-size: contain; text-indent: -200vw; overflow: hidden;} .warning, .success {margin-bottom: var(--hspace); font-size: 18px; color: var(--green); text-align: center;} .warning {color: var(--red); text-transform: uppercase;} a {color: var(--green); text-decoration: none;} a[data-modal] {cursor: pointer;} ul li::marker, ol li::marker {color: var(--green); font-weight: 600; font-size: 1.5em;} h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .headline {position: relative; display: block; margin: var(--vspace) 0 calc(var(--vspace) / 2); line-height: 1; text-decoration: none !important; font-weight: 300; font-size: var(--headline-rem);} .dense h2, .dense h3, .dense h4, .dense h5, .dense h6 {margin: 2em 0 1em;} h1.sit, h2.sit, h3.sit, h4.sit, h5.sit, h6.sit, .h1.sit, .h2.sit, .h3.sit, .h4.sit, .h5.sit, .h6.sit, .headline.sit {margin-bottom: -.15em;} .h1, .h2, .h3, .h4, .h5, .h6, .dense h2, .dense h3, .dense h4, .dense h5, .dense h6 {text-transform: uppercase; color: var(--green); letter-spacing: var(--letter-spacing);} .f-h1, .f-h2, .f-h3, .f-h4, .f-h5, .f-h6 {line-height: 1;} .h1, .f-h1 {font-size: calc(3 * var(--headline-rem)); font-weight: 100;} .h2, .f-h2, .dense h2 {font-size: calc(2 * var(--headline-rem)); font-weight: 200;} .h3, .f-h3 {font-size: calc(1.75 * var(--headline-rem)); font-weight: 200;} .h4, .f-h4, .dense h3, .lead {font-size: calc(1.5 * var(--headline-rem)); font-weight: 200;} .h5, .f-h5 {font-size: calc(1.25 * var(--headline-rem));} .h6, .f-h6, .dense h4 {font-weight: 500;} .dense h5 {font-size: calc(.9 * var(--hedadline-rem));} .dense h6 {font-size: calc(.8 * var(--hedadline-rem));} .dense strong, .dense b {font-weight: 500; color: #fff;} a.h1:hover, a.h2:hover, a.h3:hover, a.h4:hover, a.h5:hover, a.h6:hover, a.headline:hover {color: var(--green-hover);} .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, .headline a {font-weight: bolder;} .h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover, .headline a:hover {color: var(--green-hover);} .underline:after {content: ''; position: absolute; left: 0; bottom: .12em; right: 0; height: 0; border-bottom: 1px solid var(--hr);} .lead {line-height: 1.3 !important;} .lead {font-weight: 300; color: #fff; letter-spacing: var(--letter-spacing);} .mainhead, .subhead {position: relative; margin: .5em 0; font-weight: 600; line-height: 1;} .mainhead {font-size: 40px; color: #fff;} .subhead {font-size: 14px; color: var(--green); text-transform: uppercase; letter-spacing: var(--letter-spacing);} .subhead:not(:first-child) {margin-top: 3em;} .subhead + .mainhead {margin-top: 0;} .lh-10 {line-height: 1 !important;} .lh-11 {line-height: 1.1 !important;} .lh-12 {line-height: 1.2 !important;} .lh-13 {line-height: 1.3 !important;} .lh-14 {line-height: 1.4 !important;} .lh-15 {line-height: 1.5 !important;} .lh-16 {line-height: 1.6 !important;} .ls {letter-spacing: var(--letter-spacing) !important} .ls-0 {letter-spacing: 0 !important} .t-green {color: var(--green);} .t-green-neon, .t-neon {color: var(--green-neon); text-shadow: 0 0 10px var(--green);} .t-green-hover {color: var(--green-hover);} .t-blue {color: var(--blue);} .t-blue-neon {color: var(--blue-neon); text-shadow: 0 0 10px var(--blue);} .t-blue-hover {color: var(--blue-hover);} .t-purple {color: var(--purple);} .t-purple-neon {color: var(--purple-neon); text-shadow: 0 0 10px var(--purple);} .t-purple-hover {color: var(--purple-hover);} .t-red {color: var(--red);} .t-red-neon {color: var(--red-neon); text-shadow: 0 0 10px var(--red);} .t-red-hover {color: var(--red-hover);} .t-ltgray1 {color: var(--ltgray1);} .t-ltgray2 {color: var(--ltgray2);} .t-ltgray3 {color: var(--ltgray3);} .t-ltgray4 {color: var(--ltgray4);} .t-white {color: #fff;} .t-green-neon a, .t-neon a {color: var(--green-hover);} .t-blue-neon a {color: var(--blue-hover);} .t-purple-neon a {color: var(--purple-hover);} .t-red-neon a {color: var(--red-hover);} .t-green-neon a, .t-neon a, .t-blue-neon a, .t-purple-neon a, .t-red-neon a {text-shadow: inherit; text-decoration: underline;} .t-green-neon a:hover, .t-neon a:hover, .t-blue-neon a:hover, .t-purple-neon a:hover, .t-red-neon a:hover {color: var(--ltgray1) !important;} .t-no-neon {text-shadow: none !important;} .t-left {text-align: left;} .t-center {text-align: center;} .t-right {text-align: right;} .v-top {vertical-align: top;} .v-baseline {vertical-align: baseline;} .case-lower {text-transform: lowercase !important;} .case-none {text-transform: none !important;} .case-upper {text-transform: uppercase !important;} .stats {font-size: 13px; font-weight: 500; color: var(--ltgray2);} .bull {display: inline-block; color: var(--green); font-size: 2em; line-height: .4em; vertical-align: sub;} .bull:before {content: '\2022';} .caption {margin-top: 10px; font-size: 12px; font-weight: 600; text-transform: uppercase;} .f-12 {font-size: 12px !important;} .f-13 {font-size: 13px !important;} .f-14 {font-size: 14px !important;} .f-15 {font-size: 15px !important;} .f-16 {font-size: 16px !important;} .f-17 {font-size: 17px !important;} .f-18 {font-size: 18px !important;} .f-19 {font-size: 19px !important;} .f-20 {font-size: 20px !important;} .f-21 {font-size: 21px !important;} .f-24 {font-size: 24px !important;} .f-27 {font-size: 27px !important;} .f-30 {font-size: 30px !important;} .f-60 {font-size: 60px !important;} .w-1 {font-weight: 100 !important;} .w-2 {font-weight: 200 !important;} .w-3 {font-weight: 300 !important;} .w-4 {font-weight: 400 !important;} .w-5 {font-weight: 500 !important;} .w-6 {font-weight: 600 !important;} .w-7 {font-weight: 700 !important;} .w-8 {font-weight: 800 !important;} /* -------------------- IMAGES -------------------- */ .poster {aspect-ratio: 2 / 3;} .still {aspect-ratio: 16 / 9;} .landscape {aspect-ratio: 16 / 5;} .slim {aspect-ratio: 32 / 5;} .square {aspect-ratio: 1;} .card {aspect-ratio: 42 / 26;} .poster, .still, .landscape, .square, .card, .bkg-cover {position: relative; display: block; width: 100%; background-color: rgba(255,255,255,.05); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; overflow: hidden;} .poster > img, .still > img, .landscape > img, .bkg-cover > img, .landscape video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} .tag:not(:empty) {position: absolute; left: 0; top: 0; padding: 4px 25px 4px 20px; box-shadow: 0 0 10px #000; background: var(--green); color: var(--dkgray); border-radius: 0 0 var(--pill) 0; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: var(--letter-spacing); text-transform: uppercase;} .bkg-cover {height: 100%;} .bkg-contain {background-size: contain;} .bkg-left-top {background-position: left top;} .bkg-center-top {background-position: center top;} .bkg-right-top {background-position: right top;} .bkg-left-center {background-position: left center;} .bkg-center-center {background-position: center center;} .bkg-right-center {background-position: right center;} .bkg-left-bottom {background-position: left bottom;} .bkg-center-bottom {background-position: center bottom;} .bkg-right-bottom {background-position: right bottom;} @media (min-width: 576px) { /* xs up */ .bkg-xs-cover {height: 100%;} } @media (min-width: 768px) { /* sm up */ .bkg-sm-cover {height: 100%;} } @media (min-width: 992px) { /* md up */ .bkg-md-cover {height: 100%;} } /* -------------------- AMENITY ICONS -------------------- */ .amenity-icons, .amenity-icons ul {display: flex; align-items: center; justify-content: center; gap: 1em; font-size: 16px; flex-wrap: wrap;} .amenity-icons ul, ul.amenity-icons {margin: 0; padding: 0; list-style: none; gap: .5em;} .amenity-icons li {position: relative; width: 1em; aspect-ratio: 1; margin: 0; background-size: contain;} .service {display: flex; align-items: center; gap: .5em; color: var(--blue-neon); font-size: 13px; font-weight: 600; text-transform: uppercase;} .tooltip, .tooltip:after {position: absolute; left: 50%; transform: translateX(-50%); background: var(--green);} .tooltip {opacity: .5; left: -200vw; bottom: calc(100% + .8em); padding: .8em 1em .6em; border-radius: .5em; color: var(--dkgray); font-size: 11px; font-weight: 900; text-transform: uppercase; white-space: nowrap; line-height: 1; transition: opacity var(--t1);} .tooltip:after {content: ''; top: calc(100% - .1em); width: 1.2em; height: .6em; clip-path: polygon(0 0, 100% 0, 50% 100%);} *:hover > .tooltip {left: 50%; opacity: 1;} /* -------------------- VIDEOS -------------------- */ .video {position: relative; aspect-ratio: 16 / 9; background: var(--darker);} #modal .video {box-shadow: 0 0 20px #000, 0 0 50px #000;} .video iframe {position: absolute; inset: 0;} .video + .caption {margin-top: 10px;} /* -------------------- BUTTONS -------------------- */ button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled {opacity: .2; cursor: default !important;} button:disabled:hover, input[type="submit"]:disabled:hover, input[type="button"]:disabled:hover {box-shadow: none !important;} .btn, button, input[type="submit"], input[type="button"], .btns a, .btns button {position: relative; display: inline-flex; background: none; border: 0; cursor: pointer;} button, input[type="submit"], input[type="button"] {padding: 0; border: 0; border-radius: 0; text-align: left; color: var(--green);} button:hover, input[type="submit"]:hover, input[type="button"]:hover {color: var(--green-hover);} .btn, .btns a, .btns button {--btn-color: var(--green); --btn-neon: var(--green-neon); flex-direction: column; justify-content: center; align-items: center; border: 2px solid var(--btn-color); border-radius: var(--pill); text-align: center; font-weight: 500; text-transform: uppercase; color: #fff; text-decoration: none !important; line-height: 1; letter-spacing: var(--letter-spacing); transition: color var(--t1), background var(--t1), border-color var(--t2), box-shadow var(--t2);} .btn:not(:disabled):hover, .btns a:not(:disabled):hover, .btns button:not(:disabled):hover {border-color: var(--btn-neon); box-shadow: 0 0 10px var(--btn-color), inset 0 0 10px var(--btn-color); color: #fff !important;} .back-link, .more-link {display: inline-flex; align-items: end; font-size: 12px; font-weight: 600; text-transform: uppercase; line-height: 1; overflow: hidden;} .back-link:hover, .more-link:hover {color: var(--green-neon);} .back-link:before, .more-link:after {content: '\2039'; position: relative; padding: 0 .1em 0 0; line-height: .5; font-size: 2.25em; font-weight: lighter;} .back-link:hover:before, .more-link:hover:after {transform: scale(1.1);} .more-link:after {content: '\203A'; padding: 0 0 0 .1em;} .btns, .btn, [class*="btn-"] { --gap-sm: .5rem; --gap-md: 1rem; --gap: var(--gap-md); --pad-sm: .6em 1.2em .5em; --pad-md: .8em 2.4em; --pad-lg: .6em 1.8em; --pad: var(--pad-md); --font-sm: 14px; --font-md: 16px; --font-lg: 24px; --font: var(--font-md); --basis-2: calc((100% - var(--gap)) / 2); --basis-3: calc((100% - var(--gap) * 2) / 3); --basis-4: calc((100% - var(--gap) * 3) / 4); --arrow: 3.75em; --arrow-lg: 5em; } .btns {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);} .btn, .btns > * {padding: var(--pad); font-size: var(--font);} .btns.btn-small, a.btn-small, button.btn-small, label.btn-small {--gap: var(--gap-sm); --pad: var(--pad-sm); --font: var(--font-sm);} .btns.btn-medium, a.btn-medium, button.btn-medium {--gap: var(--gap-md); --pad: var(--pad-md); --font: var(--font-md);} .btns.btn-large, a.btn-large, button.btn-large {--gap: var(--gap-md); --pad: var(--pad-lg); --font: var(--font-lg);} .btns.case-none > * {text-transform: none;} .btns.btn-dkgray > *, a.btn-dkgray {background: var(--dkgray);} .btns.btn-purple > *, a.btn-purple {--btn-color: var(--purple); --btn-neon: var(--purple-neon);} .btns.btn-neon > *, a.btn-neon {border-color: var(--btn-neon); box-shadow: 0 0 10px var(--btn-color), inset 0 0 10px var(--btn-color); color: #fff !important;} .btns.btn-neon > *:not(:disabled):hover, a.btn-neon:not(:disabled):hover {box-shadow: 0 0 20px var(--btn-color), inset 0 0 20px var(--btn-color);} .btns.btn-arrow > *, .btn-arrow:not(.btns) {padding-left: calc(var(--arrow) * .6); padding-right: calc(var(--arrow) * .75); overflow: hidden;} .btns.btn-arrow > *:after, .btn-arrow:not(.btns):after {content: '\203A'; position: absolute; right: 10px; top: 50%; transform: translateY(calc(-50% - .05em)); font-size: var(--arrow); font-weight: 100; color: var(--btn-color);} .btns.btn-2line > *, .btn-2line:not(.btns) {gap: .125em; min-width: var(--mobile-pad); color: var(--ltgray1); font-weight: 400; text-transform: none;} .btns.btn-2line > *:disabled:hover, .btn-2line:not(.btns):disabled:hover {color: var(--ltgray1) !important;} .btns.btn-2line > * strong, .btn-2line:not(.btns) strong {font-size: 1.25em; text-transform: uppercase; font-weight: 800; color: #fff;} .btns.btn-2line.btn-arrow > *:after, .btn-2line.btn-arrow:not(.btns):after {--arrow: var(--arrow-lg); font-size: var(--arrow);} .btn.rmv, .btn.add {--size: 20px; width: var(--size); aspect-ratio: 1; margin: 0 .5em; padding: 0; border-color: var(--mdgray); text-indent: -200vw; overflow: hidden;} .btn.rmv:before, .btn.add:before, .btn.add:after {content: ''; position: absolute; left: calc(var(--size) / 5); right: calc(var(--size) / 5); top: calc(var(--size) - 3); height: 2px; background: var(--ltgray1);} .btn.add:after {transform: rotate(90deg);} .btns > * {flex-basis: 100%;} .btn-auto > * {flex-basis: auto;} .btns.btn-fixed > * {flex-basis: var(--mobile-pad);} .btn-fixed:not(.btns) {width: var(--mobile-pad); max-width: 100%; margin: 0 auto;} .btn-2 > * {flex-basis: var(--basis-2);} .btn-3 > * {flex-basis: var(--basis-3);} .btn-4 > * {flex-basis: var(--basis-4);} .btn-start {justify-content: start;} .btn-center {justify-content: center;} .btn-end {justify-content: end;} .btn-play {position: relative; width: 3em; height: 3em; padding: 0; background: rgba(20,20,20,.9); box-shadow: 0 0 1em #000, 0 0 2em #000; font-size: inherit; text-indent: -200vw; overflow: hidden;} .btn-play:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1.25em; height: 1.25em; background: url(../img/icon-play.svg) right center no-repeat; background-size: contain;} .btn-play:hover, .still:hover .btn-play, .poster:hover .btn-play {box-shadow: 0 0 1em #000, 0 0 2em #000, inset 0 0 1em var(--green);} @media (min-width: 576px) { /* xs up */ .btns.btn-2line > *, .btn-2line:not(.btns) {min-width: var(--mobile);} .btn-fixed:not(.btns) {width: var(--mobile);} .btns.btn-xs-auto > * {flex-basis: auto;} .btns.btn-xs-fixed > * {flex-basis: var(--mobile);} .btns.btn-xs-1 > * {flex-basis: 100%;} .btns.btn-xs-2 > * {flex-basis: var(--basis-2);} .btns.btn-xs-3 > * {flex-basis: var(--basis-3);} .btns.btn-xs-4 > * {flex-basis: var(--basis-4);} .btns.btn-xs-small, a.btn-xs-small {--gap: var(--gap-sm); --pad: var(--pad-sm); --font: var(--font-sm);} .btns.btn-xs-medium, a.btn-xs-medium {--gap: var(--gap-md); --pad: var(--pad-md); --font: var(--font-md);} .btns.btn-xs-large, a.btn-xs-large {--gap: var(--gap-md); --pad: var(--pad-lg); --font: var(--font-lg);} } @media (min-width: 768px) { /* sm up */ .btns.btn-sm-auto > * {flex-basis: auto;} .btns.btn-sm-fixed > * {flex-basis: var(--mobile);} .btns.btn-sm-1 > * {flex-basis: 100%;} .btns.btn-sm-2 > * {flex-basis: var(--basis-2);} .btns.btn-sm-3 > * {flex-basis: var(--basis-3);} .btns.btn-sm-4 > * {flex-basis: var(--basis-4);} .btns.btn-sm-small, a.btn-sm-small {--gap: var(--gap-sm); --pad: var(--pad-sm); --font: var(--font-sm);} .btns.btn-sm-medium, a.btn-sm-medium {--gap: var(--gap-md); --pad: var(--pad-md); --font: var(--font-md);} .btns.btn-sm-large, a.btn-sm-large {--gap: var(--gap-md); --pad: var(--pad-lg); --font: var(--font-lg);} } @media (min-width: 992px) { /* md up */ .btns.btn-md-auto > * {flex-basis: auto;} .btns.btn-md-fixed > * {flex-basis: var(--mobile);} .btns.btn-md-1 > * {flex-basis: 100%;} .btns.btn-md-2 > * {flex-basis: var(--basis-2);} .btns.btn-md-3 > * {flex-basis: var(--basis-3);} .btns.btn-md-4 > * {flex-basis: var(--basis-4);} .btns.btn-md-small, a.btn-md-small {--gap: var(--gap-sm); --pad: var(--pad-sm); --font: var(--font-sm);} .btns.btn-md-medium, a.btn-md-medium {--gap: var(--gap-md); --pad: var(--pad-md); --font: var(--font-md);} .btns.btn-md-large, a.btn-md-large {--gap: var(--gap-md); --pad: var(--pad-lg); --font: var(--font-lg);} } /* -------------------- ACCORDIONS -------------------- */ [class*="accordion"] {--pad: 1em; border-bottom: 1px solid var(--hr);} .toggle {display: flex; align-items: center; justify-content: space-between; gap: .375em; width: 100%; padding: var(--pad) var(--hspace); line-height: 1; color: #fff; font-weight: 300;} .toggle:not([class*="f-"]) {font-size: 22px;} .toggle.t-center {justify-content: center;} .toggle:hover, .open .toggle {color: var(--green-hover); text-shadow: 0 0 10px var(--green-shadow);} .toggle:after {content: '\203A'; position: relative; align-self: start; bottom: .0325em; color: var(--green); line-height: .5; font-size: 2em; font-weight: lighter; transition: var(--t1);} .toggle:hover:after {transform: scale(1.1);} .open .toggle:after {transform: rotate(90deg); bottom: 0;} [class*="accordion"] .content {display: none; padding: 0 var(--hspace) var(--hspace); background: none;} [class*="accordion"] .always-open .content {display: block;} [class*="accordion"] [class*="always-"] .toggle {cursor: default; color: #fff; text-shadow: none;} [class*="accordion"] [class*="always-"] .toggle:after {visibility: hidden;} [class*="accordion"] .item, .accordion-box .content {border-top: 1px solid var(--hr);} .accordion-box {background: var(--darker); border: 0;} .accordion-box .item {border: 0;} .accordion-box .toggle {justify-content: start; padding: var(--pad); color: var(--ltgray1); font-size: 14px; font-weight: 600; text-transform: uppercase;} .accordion-box .toggle:hover {color: #fff; text-shadow: var(--ltgray2);} .accordion-box .toggle .card {flex-shrink: 0; width: 42px; margin-right: 10px; border-radius: 3px; background: center center no-repeat; background-size: contain;} .accordion-box .card.infinity {background-image: url('data:image/svg+xml;utf8,');} .accordion-box .card.promo {background-image: url('data:image/svg+xml;utf8,');} .accordion-box .card.gift {background-image: url('data:image/svg+xml;utf8,');} .accordion-box .toggle .text {flex-grow: 1;} .accordion-box .toggle:after {font-size: 3em; font-weight: 200;} .accordion-box .content {position: relative; padding: var(--pad);} .accordion-box input, .accordion-box button {background: none !important;} @media (min-width: 1240px) { /* container width up */ .accordion .toggle {padding: var(--pad) .5rem;} .accordion .content {padding: 0 .5rem var(--hspace);} } /* -------------------- FORMS -------------------- */ textarea, select, input:not([type="checkbox"]):not([type="radio"]), .input-group button, .input-group input[type="submit"], .form-item label, form label.legendlike, .radiocheck legend {display: block; padding: .75rem 1rem; line-height: inherit;} textarea, select, input:not([type="checkbox"]):not([type="radio"]), .input-group button, .input-group input[type="submit"] {position: relative; width: 100%; border: 0; border-bottom: 1px solid var(--green); background: rgba(255,255,255,.025); color: #fff; z-index: 2;} textarea, select[multiple] {height: 150px;} select {appearance: none; border-radius: 0;} select:not([multiple]) option {background: var(--mdgray);} :not(.sm) + *::-webkit-datetime-edit-text, :not(.sm) + *::-webkit-datetime-edit-month-field, :not(.sm) + *::-webkit-datetime-edit-day-field, :not(.sm) + *::-webkit-datetime-edit-year-field, :not(.sm) + *::-webkit-datetime-edit-hour-field, :not(.sm) + *::-webkit-datetime-edit-minute-field, :not(.sm) + *::-webkit-datetime-edit-ampm-field {opacity: 0;} ::-webkit-calendar-picker-indicator {cursor: pointer; filter: invert(1);} fieldset {margin: 0; padding: 0; border: 0;} input[type="checkbox"] + label, input[type="radio"] + label {position: static; display: inline-block; padding: 0 1em 0 .1em; white-space: normal; color: var(--ltgray1); font-size: .9em;} label.btn-small input[type="radio"] {margin: 0; vertical-align: top;} .radiocheck {padding: 1rem 1rem .75rem; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--green);} .radiocheck .horiz .option {display: inline-block;} .radiocheck .cols {columns: 2;} .radiocheck .all-none {margin: 0 0 1em; color: var(--ltgray3); font-size: 12px; font-weight: 700; text-transform: uppercase; transition: transform var(--t2);} .radiocheck .all-none button {font: inherit; text-transform: inherit; text-decoration: underline;} .radiocheck legend.sm + .all-none {transform: translateY(-.5em);} .radiocheck input[disabled] + label {opacity: .5;} .radiocheck .option {display: flex; align-items: start; gap: 0.15em; padding: .25em 0;} form label, form label.legendlike, .radiocheck legend {position: absolute; left: 0; top: 0; color: #fff; transition: all var(--t2), transform 0s; z-index: 2; white-space: nowrap; z-index: 1;} form label.legendlike, .radiocheck legend {transform: translateY(-50%);} form label.sm, form label.legendlike.sm, .radiocheck legend.sm {transform: translateY(-1.25em); padding: 0 .25rem; font-size: 13px; font-weight: 500; color: var(--ltgray2);} .req {color: var(--red);} .hint {padding: 5px; font-size: 14px; color: var(--ltgray4); font-weight: 500;} .form-row {position: relative; display: flex; flex-wrap: wrap; gap: 30px; margin: 40px 0;} .form-item {position: relative; flex: 0 0 100%; width: 100%;} .error-msg {display: none; align-items: center; width: 100%; margin-top: .5em; color: var(--red); letter-spacing: .025em; font-weight: 300; font-size: 16px; color: var(--red-neon); line-height: 1; text-shadow: 0 0 10px var(--red);} .error-msg:before {content: '\2191'; align-self: start; margin-right: .25em; line-height: .75; font-size: 2em;} .error .error-msg {display: block;} .input-group {position: relative; margin: 30px 0;} .input-group .form-row {align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0;} .input-group .form-item {flex: 1 1 100%;} .input-group .form-item:last-child {flex: 0 0 0;} .input-group button {height: 100%; color: var(--green); font-size: 75%; font-weight: 600; text-transform: uppercase; white-space: nowrap;} .input-group .btn-arrow:after {font-size: 2.5em; font-weight: 300;} .input-group button:hover {color: var(--green-hover);} @media (min-width: 576px) { /* xs up */ .form-row {flex-wrap: nowrap; gap: 20px;} .form-item {flex: 1 1 100%;} .form-item.half {flex-basis: 50%;} .form-item.third {flex-basis: 33%;} .form-item.twothird {flex-basis: 66%;} .form-item.quarter {flex-basis: 25%;} .form-item.threequarter {flex-basis: 75%;} } /* -------------------- ALERTS -------------------- */ .alert {--color: var(--blue-neon); background: var(--color) url(/img/alert-blue-m.jpg) 50% 50%; background-size: cover;} .alert-green {--color: var(--green-neon); background-image: url(/img/alert-green-m.jpg);} .alert, .alert .link {position: relative; display: flex; align-items: center;} .alert .link {width: 100%; padding: 12px var(--hspace); font-size: 16px; color: #fff !important; line-height: 1.1; overflow: hidden;} .alert .link:before {content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--darker), transparent);} .alert .link > * {position: relative;} .alert .icon {flex-shrink: 0; width: 80px; height: 80px; margin: -20px 20px -20px -30px; background: 50% 50% no-repeat; background-size: contain; color: var(--color);} .alert svg {fill: currentColor;} .alert .text {width: 290px; padding-right: 50px;} .alert .text:after {content: '\203A'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 80px; font-weight: 100; line-height: .5em;} .alert:hover .text:after {transform: translateY(-50%), scale(1.1);} .alert .close:before {color: #fff !important;} .alert .close:hover:before {text-shadow: 0 0 10px var(--darker);} @media (max-width: 575px) { /* xx only */ .alert .text {margin-right: var(--hspace);} } @media (min-width: 992px) { /* md up */ .alert {background-image: url(/img/alert-blue-d.jpg);} .alert-green {background-image: url(/img/alert-green-d.jpg);} .alert .link {justify-content: center;} .alert .link:before {background: linear-gradient(to right, transparent, var(--darker), transparent);} .alert .icon {width: 120px; height: 120px; margin: -20px 30px -40px 0;} } /* -------------------- HEADER -------------------- */ #header {height: var(--header-height); padding: 5px 0; z-index: 100;} #header > .container, #header > .container > * {display: flex; justify-content: space-between; flex-grow: 0;} #header.sticky {position: fixed; left: 0; top: 0; right: 0; background: var(--dkgray); z-index: 10;} #skip {position: absolute; display: inline-block; left: 0; top: 0; width: 1px; height: 1px; color: #fff; font-weight: 700; text-indent: -200vw; word-wrap: normal !important; overflow: hidden; z-index: 11000;} a#skip:focus {width: auto; height: auto; padding: 1em; background: #c00; text-indent: 0;} #logo {position: relative; border-right: 1px solid var(--hr);} #logo > * {display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: 94px; height: var(--header-height); margin: -5px 0 -5px -20px; padding: 5px 20px; color: #fff; text-transform: uppercase; font-size: 7px; letter-spacing: .1em;} #logo strong {height: 20px; background: url(../img/look-logo.svg) 0 0 no-repeat; background-size: 100% auto; text-indent: -200vw; overflow: hidden; white-space: nowrap; animation: logo 10s linear infinite;} @keyframes logo { 0% {background-position: 0 0;} 40% {background-position: 0 0;} 50% {background-position: 0 -20px;} 90% {background-position: 0 -20px;} 100% {background-position: 0 0;} } #logo a strong {transition: transform var(--t1) !important;} #logo span {height: 0; letter-spacing: .24em; font-weight: 500; line-height: 1; overflow: hidden; text-align: center;} #logo > a:hover strong {transform: scale(1.05);} #header-left button {position: relative; display: flex; flex-direction: column; align-items: start; justify-content: center; padding: 0 5px 0 25px; line-height: 1; font-size: 12px; font-weight: 500; overflow: hidden;} #header-left .city, #header-left .current {position: relative; font-size: 16px; color: #fff; font-weight: 600;} #header-left .city:before {content: ''; position: absolute; top: 0; left: -1.25em; width: 1em; height: 1em; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: contain;} #header-left .back-link {display: inline-flex; position: relative; top: 1px;} #cart-nav {display: flex;} #cart-nav button {display: none; padding-left: 10px;} #account-open, #nav-toggle {position: relative; border-left: 1px solid var(--hr); font-weight: 600;} #account-open {display: flex; align-items: center; width: 80px; font-weight: 600; line-height: 1;} #account-open:before {content: ''; flex: 0 0 20px; width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: contain;} #account-open:after {position: absolute; top: 12px; margin-left: 30px;} #account-open .hello {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #account-open:hover .hello {color: var(--green-hover);} #account-open .hello.login {font-size: 10px; text-transform: uppercase;} #account-open:not(.loggedin) .hello.user, #account-open.loggedin .hello.login {display: none;} @media (max-width: 991px) { /* sm down */ #header .hide-header-mobile {display: none !important;} #search-open {display: none;} #account-open {flex-direction: column; justify-content: space-between; margin-left: auto; padding: 2px 5px;} #account-open .hello {width: 100%; font-size: 12px; text-align: center;} #nav-toggle {width: 40px; margin-right: -20px; font-size: 26px; letter-spacing: .125em; color: var(--green); z-index: 101; overflow: hidden;} #nav-toggle:before {content: '\2022\2022\2022'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(90deg); transition: var(--t1);} #nav-toggle:hover:before {color: var(--green-hover); font-size: 110%;} #nav-toggle.close-nav {font-size: 45px; font-weight: 200;} #nav-toggle.close-nav:before {content: '\FF0B'; transform: translate(-50%,-50%) rotate(45deg);} } @media (min-width: 992px) { /* md up */ #header {position: relative; padding: 15px 0;} #header .hide-header-desktop {display: none !important;} #logo > * {justify-content: space-between; width: 122px; margin: -15px 0 -15px -20px; padding: 15px 20px;} #logo strong {height: 31px; animation: none;} #logo span {height: 1em;} #header-left button {padding: 0 20px 0 40px; font-size: 14px;} #header-left .city, #header-left .current {font-size: 21px;} #cart-nav button {padding-left: 20px;} #nav-header {margin-left: auto;} #account-open {/*align-items: baseline;*/ width: 170px; margin-left: 5px; /*padding: 5px 20px 0;*/ padding: 0 20px;} #account-open:before {flex: 0 0 24px; width: 24px; height: 24px; margin-right: 10px;} #account-open:after {flex: 0 0 14px; position: relative; top: 4px; margin: 0;} #account-open .hello {flex: 0 1 122px;} #account-open .hello.login {white-space: normal; font-size: 12px; /*align-self: start;*/} #search-open {padding-bottom: 24px !important;} #search-open:before {content: ''; width: 24px; height: 24px; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: contain;} } /* -------------------- FOOTER -------------------- */ footer {padding: 50px 0; background: var(--dark); font-size: 14px; text-align: center;} footer .hide-footer {display: none !important;} #social {display: flex; justify-content: center; margin: -50px 0 0; padding: 15px 0; list-style: none;} #social li {margin: 0;} #social a {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 5px; border: 2px solid var(--green); border-radius: var(--pill);} #social svg {fill: currentColor; transition: transform var(--t1);} #social a:hover {border-color: var(--green-hover);} #social a:hover svg {transform: scale(1.1);} #nav-footer {width: 100%; margin: 0 0 45px; padding: 45px 0; border: solid var(--hr); border-width: 1px 0; text-align: left;} #nav-footer .container {max-width: 100%; padding: 0;} #nav-footer .nav {columns: 2;} #nav-footer .nav > li:not(.nav-more) {break-inside: avoid-column;} #nav-footer .underline:after {display: none;} #logo-footer a {display: inline-flex; transition: transform var(--t1);} #logo-footer a:hover {transform: scale(1.025);} #copyright {margin: 25px 0 15px; font-size: 12px; color: var(--ltgray4);} @media (min-width: 576px) { /* xs up */ #social {padding: 20px 0;} #social a {width: 50px; height: 50px; margin: 10px;} #nav-footer .nav {columns: 3;} } @media (min-width: 768px) { /* sm up */ #nav-footer .nav {columns: 4;} } @media (min-width: 992px) { /* md up */ footer > .container {display: flex; flex-wrap: wrap;} #nav-footer {padding-top: 0; border-top: 0;} #nav-footer .nav {order: 1; columns: 5;} #logo-footer, #copyright {order: 2; width: 25%; padding: 0 10px; text-align: left;} #social, #legal {order: 3; width: 75%; justify-content: end; margin: 0; padding: 0;} #copyright, #legal {order: 4; align-self: baseline;} #legal {order: 5;} #legal ul {display: flex; justify-content: end;} #legal a {padding: 4px 10px;} } @media (min-width: 1200px) { /* lg up */ /*#nav-footer .nav {columns: 7;}*/ } /* -------------------- NAV -------------------- */ .nav {margin: 0; padding: 0;} .nav .headline {margin: 0 0 10px; font-size: 17px; font-weight: 300; text-transform: uppercase;} .nav-group {margin-top: 30px;} .nav-group.lg .headline {font-size: 23px;} .nav-group ul, .nav-group ul li {margin: 0; padding: 0; list-style: none; break-inside: avoid-column;} .nav-group ul {font-size: 14px; font-weight: 300;} .nav-group.lg ul {font-size: 16px; font-weight: 600;} .nav-group ul a, .nav-group ul button {display: block; width: 100%; padding: 5px 0; color: #fff; text-decoration: none !important;} .nav-group ul a:hover, .nav-group ul button:hover {color: var(--green-hover);} #nav-header {display: flex;} #nav-header .nav-group ul li, #modal .nav-group ul li {padding: 3px 0;} #nav-footer .nav-group {margin: 0 0 30px; padding: 3px 0; break-inside: avoid-column;} #nav-footer .nav-group .headline {margin: 0; padding: 5px 0; font-size: inherit; font-weight: 600;} @media (max-width: 991px) { /* sm down */ #nav-header {display: none; position: fixed; left: 100%; top: var(--nav-header-top); bottom: 0; flex-direction: column; width: calc(100vw + var(--scrollbar)); padding: 20px; background: var(--dkgray) url(../img/main-bkg-m.png) no-repeat; overflow-y: scroll; -webkit-overflow-scrolling: touch; transition: left var(--t2); z-index: 100;} #nav-header.open {left: 0;} #quick-links {margin: -13px -20px 30px;} #quick-links li {min-width: 22vw; padding: 3px;} #quick-links a {display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 6px; color: var(--green); text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 1;} #quick-links a:hover {color: #fff;} #quick-links li:not(:first-child) a {border-left: 1px solid var(--hr);} #quick-links .icon img {width: 32px; height: 32px;} #nav-header .nav {margin-top: 50px;} #nav-header .nav-more > .headline {margin-top: 30px;} #nav-header .nav-more .nav-group {margin: 0;} #nav-header .nav .container {padding: 0;} #nav-header .nav-more .nav-dropdown, #nav-header li:not(.nav-more) ul {columns: 2; column-gap: var(--hspace);} #nav-header .nav-button {margin: 40px 0;} } @media (min-width: 992px) { /* md up */ #nav-header .nav {display: flex !important;} #nav-header .desktop-nav {display: flex !important; flex-direction: column; justify-content: end; height: var(--header-height); margin: -15px 5px; padding: 0 10px 17px; border-bottom: 2px solid transparent; color: #fff; font-size: 24px; font-weight: 300; text-transform: none; line-height: inherit;} #nav-header .desktop-nav:after {display: none;} #nav-header li:hover > .desktop-nav, #nav-header li.hover > .desktop-nav {border-color: var(--green);} #nav-header .nav-dropdown {display: none; position: absolute; left: 0; top: 100%; right: 0; padding: 60px 0; background: var(--dkgray); border-top: 1px solid var(--hr); box-shadow: 0 20px 20px rgba(0,0,0,.5); z-index: 2;} #nav-header li:hover .nav-dropdown, #nav-header li.hover .nav-dropdown {display: block;} #nav-header .nav-dropdown .container {display: flex; justify-content: space-between; gap: 50px;} #nav-header .nav-group {flex-grow: 1; flex-basis: 50%; margin: 0;} #nav-header .nav-group .headline {font-size: 24px;} #nav-header .nav > li:not(.nav-more) ul {columns: 2; column-gap: 50px;} #nav-header .nav-group ul {font-size: 17px;} #nav-header .nav ul li {border: 1px solid transparent; break-inside: avoid-column;} #nav-header .bkg-cover {width: 30%; height: auto; max-width: 500px; margin: -30px 0;} #nav-header .poster {max-width: 180px; margin: -30px 0;} #nav-header .nav-movies .nav-group {flex-basis: 30%;} #nav-header .nav-movies .nav-group + .nav-group {flex-basis: 70%;} #nav-header .nav > li.nav-movies ul {columns: 1;} #nav-header .nav > li.nav-movies .nav-group + .nav-group ul {columns: 3;} } /* -------------------- SEARCH / FIND LOCATIONS -------------------- */ .search-form button {position: relative; overflow: hidden; width: 44px !important; text-indent: -200vw; border-radius: 0;} .search-form button:after {content: ''; position: absolute; inset: 10px; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: contain;} #modal #search-back {display: none;} #search-move {position: relative;} #search-results {display: none; position: relative; left: 100vw; transition: left var(--t2);} #search-results.open {left: 0;} .search-results ul {columns: 2; column-gap: var(--hspace);} .search-results li {break-inside: avoid-column;} .search-results .lg a {display: flex; align-items: center;} .search-results .lg a > span:not(.text) {flex-shrink: 0; align-self: flex-top; margin-right: 10px; transition: box-shadow var(--t1);} .search-results .lg a:hover > span:not(.text) {box-shadow: 0 0 10px var(--green-shadow);} .search-results .lg .title {display: block; font-size: 18px; font-weight: 600;} .search-results .poster {width: 40px;} .search-results .still {width: 96px;} @media (max-width: 575px) { /* xx only */ .search-results ul {columns: 1;} } @media (max-width: 767px) { /* xs down */ #search-mobile .search-form .form-row, #locations-form .form-row {background: rgba(0,0,0,.5);} } @media (min-width: 768px) { /* sm up */ #modal .search-form {font-size: 24px;} #modal .search-form label:not(.sm), #modal #search-input {font-weight: 200;} #modal .search-form button {width: 54px !important;} #modal .search-form button:after {background-image: url('data:image/svg+xml;utf8,');} } /* -------------------- MODAL / MAIN CONTENT -------------------- */ #main {overflow: hidden;} #header.sticky ~ #main {margin-top: var(--header-height);} #cart-bar.visible + #main {margin-top: calc(var(--header-height) + var(--cart-bar-height));} #main > .container {position: relative; margin-top: var(--nvspace);} /* this group handles spacing when no slideshow is present */ #main > .container > :first-child {margin-top: calc(var(--vspace) / 2);} #main > #slideshow + script + .container, #main > .swiperows + .container {margin-top: 0;} #modal {display: none; position: fixed; flex-direction: column; align-items: stretch; width: calc(100vw + var(--scrollbar)); inset: 0; background-position: 0 0 !important; overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 200;} #modal-bkg {position: absolute; inset: 0; cursor: pointer;} #modal-close {position: fixed;} #modal .container {margin: auto;} #modal:not(.video-modal) .container {max-width: var(--desktop);} #modal.full-modal .container {max-width: 100vw; padding: 0;} #modal-content {position: relative; z-index: 2;} #main, #modal {padding: var(--vspace) 0; background: var(--dkgray) url(../img/main-bkg-m.png) 0 0 no-repeat; background-attachment: fixed;} #main a:not([class]):hover, #modal a:not([class]):hover {color: var(--green-hover); text-decoration: underline;} #main p, #modal p {line-height: 1.6;} #main p:last-child, #modal p:last-child {margin-bottom: 0 !important;} @media (min-width: 992px) { /* md up */ #main, #modal {background-image: url(../img/main-bkg-d.png); font-size: 18px;} } /* -------------------- COUNTDOWN -------------------- */ .countdown {position: relative; padding: var(--hspace) 0; border-top: 1px solid var(--hr); text-align: center; overflow: hidden;} .countdown .container {display: flex; align-items: stretch;} .countdown .item {display: flex; flex-direction: column; justify-content: center;} .countdown .item:not(.code) {padding: var(--hspace);} .countdown .just {border: 0 solid var(--hr); border-width: 0 1px 0 0;} .countdown .howlong {font-size: calc(2* var(--headline-rem)); text-transform: uppercase; font-weight: 200; line-height: 1;} .countdown .howlong span {font-size: 2.5em; font-weight: 700; color: #fff;} .qr {width: 180px; aspect-ratio: 1; margin: 0 auto;} @media (max-width: 575px) { /* xx only */ .countdown .container {flex-direction: column; align-items: center;} .countdown .item {flex: 0 1 100%;} .countdown .just {border-width: 0;} } @media (min-width: 576px) and (max-width: 767px) { /* xs only */ .countdown .container {flex-wrap: wrap; justify-content: center; width: 560px;} .countdown .just {width: 100%; margin-bottom: var(--hspace); border-width: 0 0 1px;} .countdown .show {width: 340px;} } @media (min-width: 768px) { /* sm up */ .countdown .just {order: 2;} .countdown .code {order: 1;} .countdown .show {order: 3; flex: 1 0 50%;} } @media (min-width: 992px) { /* md up */ .countdown .item:not(.code) {flex: 1 0 calc(50% - 90px);} } /* -------------------- GENERAL SPLIDE STUFF -------------------- */ .splide__arrow:disabled, .splide__arrow svg {display: none;} .splide__arrow {position: absolute; left: 0; top: 0; width: var(--hspace); height: 100%; padding: 0; background: rgba(0,0,0,.8); border: 0; border-radius: 0; color: var(--green); font-size: 60px; font-weight: 200; line-height: .5em; text-indent: -200vw; overflow: hidden; z-index: 10; transition: var(--t2); opacity: 0;} .splide__arrow--next {left: auto !important; right: 0;} .splide__arrow:after {content: '\2039'; position: absolute; inset: 0 0 .125em; display: flex; align-items: center; justify-content: center; text-indent: 0;} .splide__arrow--next:after {content: '\203A';} .glow-arrows .splide__arrow {width: .3333em; color: var(--dkgray); font-size: 100px; font-weight: 100; background: none;} .glow-arrows .splide__arrow:after {text-shadow: 3px 0 3px var(--green), -1px 0 5px var(--green-neon);} .glow-arrows .splide__arrow--next:after {text-shadow: -3px 0 3px var(--green), 1px 0 5px var(--green-neon);} .photo-carousel .square {width: 75vmin;} .photo-carousel li {max-width: 80vw; padding-left: var(--hspace);} .photo-carousel li:last-child {padding-right: var(--hspace);} .trailer-carousel {font-size: 12px;} .trailer-carousel .splide__arrow {height: calc(200px * 9 / 16);} @media (max-width: 991px) { /* sm down */ .splide__arrows {display: none;} } @media (min-width: 992px) { /* md up */ .glow-arrows .splide__arrow {width: .5em; font-size: 150px;} .splide.is-active:hover .splide__arrow {opacity: 1;} } /* -------------------- SLIDESHOW -------------------- */ #slideshow {position: relative; max-width: 1600px; margin: var(--nvspace) auto var(--vspace); z-index: 2;} #slideshow .splide__slide {position: relative; overflow: hidden;} #slideshow .image, #slideshow .info {position: relative;} #slideshow .info {padding: 2.75em calc(var(--hspace) / 2) 0; text-align: center; font-size: 15px;} #slideshow .info h3 {margin: 0 0 .25em; font-size: 1.2em; line-height: 1; font-weight: 600; color: #fff;} #slideshow .info .stats {font-size: 15px;} #slideshow .info .btns {position: absolute; left: 10px; bottom: 100%; right: 10px; transform: translateY(50%);} #slideshow .btn-play {font-size: 4vw;} #slideshow .splide__arrow {height: .675em; margin-top: calc(15.625% - .3375em); opacity: 1;} #slideshow .splide__arrow:after {align-items: end;} @media (max-width: 575px) { /* xx only */ #slideshow.mobile-poster {margin-top: calc(var(--nvspace) + 20px);} #slideshow.mobile-poster .splide__track {padding: 0 60px !important;} #slideshow.mobile-poster .splide__slide {width: calc(((100% + 20px) / 1) - 20px); margin-right: 20px;} #slideshow.mobile-poster .info h3 {text-transform: uppercase !important;} } @media (min-width: 576px) { /* xs up */ #slideshow .btn-play {font-size: 3vw;} #slideshow .info {padding: 2.75em var(--hspace); font-size: 18px;} #slideshow .info h3 {font-size: 1.5em;} #slideshow .splide__arrows {display: block;} #movie-details {margin-top: calc(var(--nvspace) - 1px) !important; z-index: 1;} } @media (min-width: 992px) { /* md up */ #slideshow {box-shadow: 0 0 20px #000, 0 0 50px #000;} #slideshow .btn-play {flex-shrink: 0; flex-grow: 0; font-size: 1.5rem;} #slideshow .info {--hspace: 2vw; display: flex; gap: var(--hspace); position: absolute; left: 0; bottom: 0; right: 0; align-items: center; padding: var(--hspace); background: rgba(20,20,20,.7); text-align: left; font-size: 22px; font-weight: 300;} #slideshow .text {flex-grow: 1;} #slideshow .info .stats {font-size: 18px;} #slideshow .info .btns {position: static; flex-wrap: nowrap; transform: none;} } @media (min-width: 1600px) { /* slideshow max width up */ #slideshow {margin: calc(-1 * (var(--vspace) - 20px)) auto var(--vspace);} #slideshow .info {--hspace: calc(var(--vspace) * .5);} } /* -------------------- SWIPEROWS -------------------- */ .swiperows {background: var(--darker);} .swiperow.splide + .splide {border-top: 1px solid var(--hr);} .swiperow.splide.centered {visibility: visible;} .swiperow .splide__arrow {height: 36px; margin: 10px 0; background: linear-gradient(to right, transparent, rgba(0,0,0,.8), transparent);} .swiperow .splide__track {padding: 5px 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 30px), transparent calc(100% - 10px)); mask-image: linear-gradient(to right, transparent, rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 30px), transparent calc(100% - 10px)); } .swiperow .splide__list {padding: 0 15px !important;} .swiperow.centered .splide__list {display: flex !important; justify-content: center; user-select: none;} .splide.is-initialized:not(.is-active) .splide__list {display: flex !important;} .swiperow .splide__slide {position: relative; padding: 5px; text-align: center; overflow: hidden;} .swiperow .splide__slide:last-child {padding-right: 30px;} .swiperow .splide__list li > button, .swiperow .splide__list li > a {display: block; padding: .5em 1em; border: 2px solid var(--mdgray); border-radius: var(--pill); font-weight: 300; font-size: 16px; color: #fff; line-height: 1; transition: background var(--t1), border-color var(--t2), font-weight var(--t1); cursor: pointer;} .swiperow .splide__list li > button.disabled, .swiperow .splide__list li > a.disabled {color: var(--ltgray4); pointer: default;} .swiperow .splide__list .no-border {border-color: transparent;} .swiperow .splide__list .pin-icon:before {content: ''; display: inline-block; vertical-align: baseline; width: 20px; height: 20px; margin: -4px 4px -4px 0; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: contain;} .swiperow .splide__list button:not(.disabled):hover, .swiperow .splide__list a[href]:not(.disabled):hover {border-color: var(--green); text-decoration: none !important; color: #fff !important;} .swiperow .splide__list button.selected, .swiperow .splide__list a.selected {border-color: var(--green); background: var(--green); color: var(--dkgray) !important; font-weight: 800; text-transform: uppercase;} .swiperow :not(.selected) > b {font-weight: 500;} .swiperow li > * > span {font-size: 12px; padding-left: .1em;} .swiperow .note {display: flex; align-items: center; justify-content: center; gap: 3px; height: 22px; margin: 0 auto; font-size: 11px; font-weight: 700; color: var(--green);} .swiperow .note .px {width: 19px; height: 12px; overflow: hidden; background: #000;} .swiperow .note.soldout {color: var(--red);} .swiperow[data-swiperow-type="time"] {text-transform: uppercase;} [data-sticky-during].clone {position: fixed; left: 0; top: 0; right: 0; margin: 0 !important; background: var(--dkgray); box-shadow: 0 0 20px var(--green-shadow); z-index: 10;} /* -------------------- TINY ICONS -------------------- */ .px:before {content: ''; display: inline-block; vertical-align: baseline; width: 24px; height: 16px; margin: -4px 0; background: url('data:image/svg+xml;utf8,');} .icon-tiny, .icon-small {display: inline-block; width: 16px; height: 16px; padding: 0; border: 1px solid var(--blue) !important; border-radius: var(--pill); text-indent: -200vw; overflow: hidden; background: 50% 50% no-repeat; background-size: contain;} .icon-small {width: 24px; height: 24px; border-width: 2px;} .icon-tiny:hover, .icon-small:hover {transform: scale(1.1);} .icon-photo {background-image: url('data:image/svg+xml;utf8,');} .icon-info {background-image: url('data:image/svg+xml;utf8,');} .icon-valid:before {content: '\2713';} .icon-invalid:before {content: '\2717';} /* -------------------- SHOWTIMES -------------------- */ .showtimes .movie {height: 100%; background: var(--darker);} .showtimes .info {display: block; padding: 20px; transition: box-shadow var(--t2);} .showtimes .info:hover {box-shadow: 0 0 20px 3px var(--green-shadow);} .showtimes .still {width: calc(100% + 40px); margin: -20px -20px 20px;} .showtimes .title {margin-bottom: .25em; font-size: 20px; font-weight: 600; color: #fff;} .showtimes .times {padding: 0 0 10px; border-top: 1px solid var(--hr);} .showtimes .type {padding: 20px 20px 0; font-size: 14px; font-weight: 600; text-transform: uppercase;} .showtimes .service {padding: .25em 20px 0;} .showtimes + .spinner {bottom: auto; font-size: 150px; height: 2em;} @media (max-width: 767px) { /* xs down */ .showtimes .movie {margin-left: var(--nhspace); margin-right: var(--nhspace);} } /* -------------------- LEGEND + SEAT MAP-------------------- */ .panel > .spinner {position: fixed; font-size: 250px;} .legend {position: relative; padding-right: 30px; font-size: 13px;} .legend .icon-photo {position: absolute; right: 0; top: 0;} .legend > div {display: flex; flex-wrap: wrap; margin-top: 10px;} .legend .item {display: flex; align-items: center; margin-top: 5px; padding-right: 20px;} .legend .item span {width: 12px; margin-right: 6px;} .legend .item span, #seat-map label {position: relative; display: block; aspect-ratio: 1; padding: 0; border-radius: 2px; overflow: hidden;} .legend .item span:before, .legend .item span:after, #seat-map label:before, #seat-map label:after {content: ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% 100%; font-size: 11px; color: var(--ltgray2); font-weight: 700; line-height: 1;} .legend .item span:after, #seat-map label:after {filter: invert(75%);} #seat-map label:after {background-size: 80% 80%;} .selected > *:before {background: var(--green);} .available > *:before, .unavailable > *:before, .occupied > *:before {background: var(--mdgray);} #seat-map .left > * {left: 2px;} #seat-map .right > * {left: -2px;} #seat-map .left > *:after, #seat-map .right > *:after {background-position: 100% 50%;} #seat-map .right > *:after {transform: scaleX(-1);} #auditorium .spinner {bottom: auto; font-size: 150px; height: 75%;} #the-screen {display: flex; align-items: end; justify-content: center; aspect-ratio: 13 / 1; margin: var(--hspace) 0 calc(var(--vspace) / 2); background: url('data:image/svg+xml;utf8,') center top no-repeat; background-size: contain; font-size: 12px; font-weight: 700; color: var(--green); text-transform: uppercase;} #seat-map {--gap: 4px; margin: calc(var(--vspace) / 2) 0;} #seat-map fieldset {display: flex; align-items: stretch; gap: var(--gap); padding: calc(var(--gap) / 2) 0;} #seat-map fieldset > div {position: relative; flex: 1 1 10px; aspect-ratio: 1;} #seat-map input {position: absolute; left: -200vw;} #seat-map label {transition: 0s !important;} #seat-map :focus + label, #seat-map :not(:disabled) + label:hover {outline: 2px solid var(--green);} #seat-map :checked + label:before {background-color: var(--green);} #seat-map :checked + label:after {filter: none;} #seat-map :not(:disabled) + label {cursor: pointer;} /* -------------------- CART BAR AND GENERAL PANELS -------------------- */ #cart-bar {display: none; position: fixed; left: 0; top: var(--header-height); right: 0; padding: 5px 0; background: var(--green); color: var(--dkgray); font-size: 14px; font-weight: 600; z-index: 10;} #cart-bar:before {content: ''; position: absolute; inset: 0; max-width: 519px; background: var(--green) url(../img/main-bkg-m.png) 0 0 no-repeat; background-attachment: fixed; background-blend-mode: color-dodge; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, transparent 100%); mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, transparent 100%); } #cart-bar .container {--gap: 20px; position: relative; display: flex; gap: var(--gap); align-items: stretch; justify-content: end;} #cart-bar .container > * {display: flex; flex-direction: column; align-items: center; justify-content: center;} #cart-timer {justify-content: space-between !important; padding-right: var(--gap); border-right: 1px solid var(--dark); font-weight: 700; line-height: 1;} #cart-timer:before {content: ''; width: 24px; height: 24px; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: contain;} #cart-icon {position: relative; width: 40px; aspect-ratio: 1; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: contain; color: #fff; transition: transform var(--t1);} button#cart-icon:hover {transform: scale(1.05);} #cart-qty {position: absolute; left: 48%; top: 23%;} #cart-amount {font-size: 21px;} @media (min-width: 992px) { /* md up */ #cart-bar:before {max-width: 1136px; background-image: url(/img/main-bkg-d.png);} .panel:not(#seats) {margin-top: calc(var(--vspace) / 2)}; } /* -------------------- MOVIE INFO -------------------- */ .movie-info {color: #fff; line-height: 1;} .movie-info > *:not(.name) {margin-top: 10px; text-transform: uppercase;} .movie-info .name {font-size: 24px; font-weight: 500;} .movie-info .location {color: var(--blue); font-size: 21px; font-weight: 700;} .movie-info .datetime {color: var(--green); font-size: 18px; font-weight: 600;} .movie-info .at, .movie-info .qtyseats {color: var(--ltgray2); font-size: 14px; font-weight: 400;} .movie-info .movie-time b {font-weight: inherit;} .movie-info .movie-time span {font-size: 13px; font-weight: 400; padding-left: .1em;} .movie-info .movie-qty, .movie-info .movie-seats {color: #fff; font-size: 16px; font-weight: 600;} @media (min-width: 992px) { /* md up */ .movie-info > *:not(.name) {margin-top: 10px;} .movie-info .name {font-size: 28px;} .movie-info .location {font-size: 24px;} } /* -------------------- TICKETS -------------------- */ #add-subscription .content .spinner {font-size: 200px; z-index: 2;} #ticket-types .ticket-type {position: relative; display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hr);} #ticket-types .ticket-type label {order: 1; flex-grow: 1; display: flex; flex-direction: column; gap: 4px; position: static; font-size: 16px; font-weight: 600; text-transform: uppercase; white-space: normal;} #ticket-types .ticket-type .type .code {color: var(--blue); word-break: break-all;} #ticket-types .ticket-type label .info {font-size: 18px; font-weight: 300; color: var(--ltgray2); text-transform: none;} #ticket-types .ticket-type label .fee {font-size: 12px; font-weight: 400; color: var(--ltgray4); text-transform: none;} #ticket-types .ticket-type label .limit {font-size: 12px; color: var(--blue-hover);} #ticket-types .ticket-type input {order: 3; width: 60px; padding: 0; border: 0; background: none; font-size: 36px; color: var(--green); font-weight: 200; text-align: center; outline: 0 !important;} #ticket-types .ticket-type .btn {order: 4; flex-shrink: 0; --size: 24px;} #ticket-types .ticket-type .btn.rmv {order: 2;} #ticket-warnings .warning {margin: 0;} @media (min-width: 576px) { /* xs up */ #movie-tickets-h1 {font-size: calc(2.5 * var(--headline-rem)); font-weight: 200 !important;} #ticket-types .ticket-type input {width: 80px; font-size: 45px;} #ticket-types .ticket-type .btn {--size: 30px;} } /* -------------------- CHECKOUT -------------------- */ .accordion-cart {border: 0; font-size: 14px;} .accordion-cart .grid {align-items: baseline; margin: 0; padding: 4px 0;} .accordion-cart .grid > * {order: 3; padding-right: 0; text-align: right;} .accordion-cart .grid > :first-child {order: 1; padding-left: 0; text-align: left;} .accordion-cart .toggle {gap: 0; font-size: 14px; font-weight: 600; text-transform: uppercase;} .accordion-cart .toggle:hover {color: #fff; text-shadow: var(--ltgray2);} .accordion-cart .toggle:after {display: none;} .accordion-cart .toggle > .more-link {order: 2; display: flex; justify-content: end; font-size: 12px; color: var(--purple-neon); overflow: visible;} .accordion-cart .toggle > .more-link:after {transition: var(--t1);} .accordion-cart .toggle:hover > .more-link {color: var(--purple-hover);} .accordion-cart .open .toggle > .more-link:after {transform: rotate(90deg); left: .12em;} .accordion-cart .always-open .more-link, .accordion-cart .always-closed .more-link {visibility: hidden;} .accordion-cart .content {padding: 0 0 10px; color: var(--ltgray2); font-size: 14px;} .accordion-cart .content .grid {padding: 0;} .accordion-cart .content .grid > div {padding-top: 0;} .accordion-cart .totals .grid {padding: 0;} .accordion-cart .totals .grid > :last-child {font-size: 21px; color: var(--green); font-weight: 800;} #gift-cards {display: none;} #gift-cards .gift-card {position: relative; border: 0;} #gift-cards .grid > * {padding-bottom: 5px;} #gift-cards .number {color: var(--blue);} #gift-cards .content {display: block !important;} #gift-cards .content :nth-child(2) {color: #fff; font-weight: 400;} fieldset.radio-box .answer-list {position: relative; display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px;} fieldset.radio-box .answer-div {flex: 1 1 40%;} fieldset.radio-box .answer-div.new {padding: 0 !important; border-radius: var(--rounded);} fieldset.radio-box input {position: absolute; left: -200vw;} fieldset.radio-box label {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 1em; border: 2px solid var(--mdgray); border-radius: var(--rounded); color: var(--green); text-align: center; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer;} fieldset.radio-box.image-only label {padding: 4px;} fieldset.radio-box.pill label {border-radius: var(--pill);} fieldset.radio-box label .icon, fieldset.radio-box label svg {display: block; width: 60px; height: 20px;} fieldset.radio-box.no-svg label .icon {width: auto; height: auto; font-size: 21px; font-weight: 800; line-height: .8; padding-top: .1em;} fieldset.radio-box label .text {color: #fff;} fieldset.radio-box label .text:not(:empty) {margin-top: 5px;} fieldset.radio-box.image-only label img {border-radius: 4px;} fieldset.radio-box label:hover {border-color: var(--green); box-shadow: inset 0 0 10px var(--green), 0 0 10px var(--green);} fieldset.radio-box :checked + label {border-color: var(--green);background: var(--green); color: var(--dkgray); font-weight: 800;} fieldset.radio-box:not(.no-svg) :checked + label .icon {filter: invert(100%);} fieldset.radio-box.no-svg :checked + label .icon {text-shadow: 0 0 10px var(--green-hover);} fieldset.radio-box.no-svg :checked + label .text {color: inherit;} @media (min-width: 576px) { /* xs, sm */ fieldset.radio-box .answer-div {flex-basis: 30%;} } #worldpay-iframe {width: calc(100% + 6px); height: 450px; margin: 0 -3px; border: 0;} #worldpay-iframe.with-captcha { height : 500px; } /* -------------------- SORT BY -------------------- */ .sort {position: relative; display: flex; justify-content: end; margin: calc(var(--nvspace) / 2) 0 var(--vspace); padding-bottom: 5px; font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--green); z-index: 2;} .sort .more-link {display: inline-flex; justify-content: end; font-weight: 700; font-size: inherit; overflow: visible;} .sort .more-link:after {left: .10em; line-height: .5; font-size: 2.25em; transition: var(--t1);} .sort.open .more-link:after {transform: rotate(90deg); left: .12em;} .sort ul, .sort li {margin: 0; padding: 0; list-style: none;} .sort ul {display: none; position: absolute; right: 0; top: 100%; padding: .5em 1em; background: var(--green); border-radius: var(--rounded); text-align: center; font-size: 12px; font-weight: 800; line-height: 1;} .sort li + li {border-top: 1px solid var(--dkgray);} .sort ul button {padding: .75em 1em; color: var(--dkgray); text-transform: uppercase; cursor: pointer;} .sort .bull {color: var(--green); padding: 0 5px;} .sort button:hover .bull {color: var(--dkgray);} @media (min-width: 992px) { /* md up */ .sort {position: absolute; right: 0; top: calc(var(--nvspace) + 20px); margin: 0;} } /* -------------------- POSTER+SQUARE GRIDS / STILLS GRIDS -------------------- */ .posters {justify-content: center; text-align: center; font-weight: 500;} .posters .link {display: block; min-width: 100%; text-align: center;} .posters .link > * {display: block;} .posters .image {margin-bottom: 1rem; transition: box-shadow var(--t2);} .posters .link[href] .image:hover, .posters button.link:hover .image, .posters .selected .image {box-shadow: 0 0 20px 3px var(--green-shadow);} .posters .date, .posters .datetime {margin: 5px 0; font-size: 14px; text-transform: uppercase;} .posters .datetime {color: var(--green); font-size: 18px; font-weight: 600;} .posters .at, .posters .qtyseats {color: var(--ltgray2); font-size: 14px; font-weight: 400; text-transform: uppercase;} .posters .movie-time b {font-weight: inherit;} .posters .movie-time span {font-size: 13px; font-weight: 400; padding-left: .1em;} .posters .movie-qty, .posters .movie-seats {color: #fff; font-size: 16px; font-weight: 600;} .posters .title {margin: 5px 0; color: #fff; font-size: 18px;} .posters .location {margin: 5px 0 0; font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--blue);} .posters .cost {margin: 5px 0 0;} .posters .description {color: var(--ltgray2); font-size: 16px;} .posters .btn {display: inline-block; margin-top: 1rem;} .posters .caption {margin-top: calc(-1rem + 10px); color: #fff;} .posters .spinner, .posters + .spinner {bottom: auto; font-size: 150px; height: 2em;} .posters .selected label {background: var(--green); color: var(--dkgray) !important; font-weight: 800;} .stills .link {display: block; min-width: 100%; height: 100%; padding: 20px; background: var(--darker); font-size: 16px; line-height: 1.2; color: var(--ltgray1); transition: box-shadow var(--t2);} .stills .link[href]:hover, .stills button.link:hover {box-shadow: 0 0 20px 3px var(--green-shadow);} .stills .link > * {display: block;} .stills .link > *:not(:first-child) {margin-top: 5px;} .stills .image {width: calc(100% + 40px); margin: -20px -20px 20px;} .stills .distance, .stills .source {color: var(--green); font-size: 13px; font-weight: 700; text-transform: uppercase;} .stills .arrow {display: flex !important; align-items: center; justify-content: space-between; gap: .375em; color: #fff;} .stills .name {font-size: 20px; font-weight: 600;} .stills .title {font-size: 18px; font-weight: 500;} .stills .category {margin: 0 !important; font-size: 24px; font-weight: 300;} .stills .arrow:after {content: '\203A'; align-self: start; color: var(--green); font-size: 60px; font-weight: 100; line-height: .3125em; transition: scale var(--t1);} .stills .category.arrow:after {line-height: .375em;} .stills .link[href]:hover .arrow:after {transform: scale(1.15);} .stills .phone {font-weight: 600;} .stills .amenity-icons {margin-top: 20px !important;} .stills .amenity-icons ul {justify-content: start;} .stills .date {font-size: 14px; font-weight: 600; color: var(--ltgray4);} @media (max-width: 767px) { /* xs down */ .stills .link {width: calc(100% + 2 * var(--hspace)); margin-left: var(--nhspace); margin-right: var(--nhspace);} } /* -------------------- ADS -------------------- */ .box .ads {margin-left: var(--nhspace); margin-right: var(--nhspace);} .ads [class*="col-"] {padding: 0;} .ad {position: relative; display: flex; align-items: stretch; height: 100%;} .ad.reverse {flex-direction: row-reverse;} .ad > *:not(.background) {position: relative; width: 50%; display: flex; flex-direction: column; justify-content: end;} .ad > .background + .box {width: 100%;} .ad .portrait {display: none;} .ad .background {position: absolute; inset: 0; aspect-ratio: auto; background-size: cover;} .ad .foreground {background-color: transparent;} .ad p {margin-top: 0;} .ad .btns > * {--pad: .5em 1.75em .5em 1em; --font: calc(1.25 * var(--headline-rem)); text-align: left; text-transform: none;} .ad .btns > *:after {font-size: 2.5em;} .ad.bright {color: var(--dkgray); font-weight: 500;} .ad.bright .subhead, .ad.bright .mainhead {color: inherit; font-weight: 700;} .ad.bright .btns a {border-color: transparent;} .ad.bright .btns a:hover {box-shadow: none; color: var(--green-hover) !important;} @media (max-width: 767px) { /* xs down */ .ad {flex-direction: column;} .ad.reverse {flex-direction: column-reverse;} .ad > *:not(.background) {width: 100%;} .ad .portrait {display: block;} .ad .landscape {display: none;} .ad .box {--hspace: 30px; flex-grow: 1; justify-content: start;} } @media (min-width: 768px) { /* sm up */ .ad.column {flex-direction: column;} .ad.column > *:not(.background) {width: 100%;} .ad .box {--hspace: 40px;} } @media (min-width: 992px) { /* md up */ .ad .box {--hspace: 50px;} } @media (min-width: 1200px) { /* lg up */ .ads [class*="col-lg-4"] .ad {flex-direction: column;} .ads [class*="col-lg-4"] .ad.reverse {flex-direction: column-reverse;} .ads [class*="col-lg-4"] .ad > *:not(.background) {width: 100%;} .ads [class*="col-lg-4"] .ad .portrait {display: block;} .ads [class*="col-lg-4"] .ad .landscape {display: none;} .ads [class*="col-lg-4"] .box {flex-grow: 1; justify-content: start;} } /* -------------------- LOCATION -------------------- */ #location-details .amenity-icons ul {font-size: 24px;} #location-links a, #location-links button {display: flex; align-items: center; gap: .5em; width: 100%; padding: .5em 1em .5em 0; color: #fff;} #location-links a:hover, #location-links button:hover {color: var(--green-hover); text-decoration: underline;} #location-links .icon {align-self: start; width: 1.5em; height: 1.5em; background: center center no-repeat; background-size: contain;} #location-links .icon.address {background-image: url('data:image/svg+xml;utf8,');} #location-links .icon.phone {background-image: url('data:image/svg+xml;utf8,');} #location-links .icon.menu {background-image: url('data:image/svg+xml;utf8,');} #location-links .icon.email {background-image: url('data:image/svg+xml;utf8,');} #location-links .icon.newsletter {background-image: url('data:image/svg+xml;utf8,');} #location-links .icon.tour { background-image: url('data:image/svg+xml;utf8,'); } @media (max-width: 767px) { /* xs down */ #location-links {padding-top: var(--hspace); border-top: 1px solid var(--hr);} #location-links li {max-width: 400px; margin-left: auto; margin-right: auto;} } @media (min-width: 768px) { /* sm up */ #location-links {padding-left: var(--hspace); border-left: 1px solid var(--hr);} } /* -------------------- MENU -------------------- */ /*#menu-grid .spinner {bottom: auto; font-size: 150px; height: 2em;} .menu-category .link:after {content: ''; position: absolute; left: 50%; bottom: var(--nhspace); transform: translateX(-50%); width: 30px; height: 15px; background: var(--green); clip-path: polygon(0 100%, 50% 0, 100% 100%); opacity: 0; transition: var(--t2);} .menu-category.open .link:after {bottom: -10px; opacity: 1;} .menu-items {display: none; margin-top: calc(var(--nhspace) + 10px);} .menu {padding: var(--vspace) var(--hspace); background: var(--darker); border-top: 1px solid var(--hr); color: var(--ltgray2); font-size: 16px;} .menu > * {--hspace: 20px; --nhspace: -20px;} .menu .subcategory {font-size: 12px; font-weight: 700; color: var(--green); text-transform: uppercase;} .menu .subcategory:not(:first-child) {margin-top: calc(var(--hspace) * 2);} .menu .subcategory + .note {margin-top: calc(var(--hspace) / 2);} .menu .grid {margin-top: calc(var(--hspace) / 2); margin-bottom: 0;} .menu .grid:before {content: ''; display: block; width: 100%; height: 1px; margin: 0 calc(var(--hspace) / 2) 0; background: var(--hr);} .menu .grid > li {padding-top: 0; padding-bottom: 0;} .menu .item {display: flex; align-items: start; gap: 10px; padding: var(--hspace) 0; border-bottom: 1px solid var(--hr); font-size: 14px;} .menu .item .image {flex: 0 0 80px; margin: 0;} .menu .item .text > * + * {margin-top: .5em;} .menu .item .name, .menu .item .subhead {margin-top: .25em; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #fff;} .menu .item .subhead {margin-top: 1.5em; font-size: 12px;}*/ /*@media (max-width: 767px) { xs down .menu-items {width: 100vw; margin-left: calc(var(--nhspace) / 2); margin-right: calc(var(--nhspace) / 2); padding-left: 0; padding-right: 0;} }*/ ul.menu-list {margin: 0; font-size: 15px; line-height: 1.4; color: var(--ltgray2);} ul.menu-list strong {color: #fff; font-size: 18px; font-weight: 500;} @media (min-width: 576px) and (max-width: 767px), (min-width: 992px) { /* xs, plus md up */ ul.cols {columns: 2; column-gap: calc(var(--vspace) / 2);} } /* -------------------- ACCOUNT -------------------- */ #account-hello {font-size: calc(var(--headline-rem) * 2); line-height: 1;} #account-hello .greeting {padding-left: 3.889em; position: relative; display: flex; flex-direction: column;} #account-hello .hello {position: absolute; left: 0; top: -.05em; width: 3.889em; aspect-ratio: 140/96; background: url(/img/Account-Hello.png) no-repeat; background-size: contain; text-indent: -100vw; overflow: hidden;} #account-hello .name {position: relative; display: flex; align-items: end; color: var(--purple-neon); text-shadow: 0 0 10px var(--purple); font-weight: 300;} #account-hello .name:after {content: ''; flex-shrink: 0; width: .833em; aspect-ratio: 30/63; background: url(/img/Account-Hello-Exclamation.png) no-repeat; background-size: contain;} @media (min-width: 576px) { /* xs up */ #account-hello {padding-left: 4.1667em; font-size: calc(var(--headline-rem) * 2.25);} #account-hello .greeting {padding: 0;} #account-hello .hello {left: -3.889em;} } .current-subscription {border-top: 1px solid var(--hr);} .current-subscription .grid > * {padding: calc(var(--vspace) / 2) var(--hspace); border: solid var(--hr); border-width: 0 0 1px;} .current-subscription .end {border-width: 0;} @media (min-width: 576px) { /* xs up */ .current-subscription .type {border-width: 0 0 1px; margin-bottom: calc(var(--vspace) / 2);} .current-subscription .start {border-width: 0 1px 0 0;} } @media (min-width: 992px) { /* md up */ .current-subscription .type {border-width: 0 1px 0 0; margin: 0;} } .wallet {border-top: 1px solid var(--hr);} .wallet .item {display: flex; flex-wrap: wrap; row-gap: 1em; column-gap: calc(var(--vspace) / 2); padding: calc(var(--vspace) / 2) var(--hspace); border-bottom: 1px solid var(--hr);} .wallet .status, .wallet .actions {flex-shrink: 0;} .wallet .info {flex-grow: 1;} .wallet .actions {display: flex; gap: 10px; flex-wrap: wrap; align-items: start;} .wallet .update {margin: 0;} .wallet .item:not(.leave-clone-example) .update {display: none;} .wallet .isprimary .promote, .wallet .item:not(.isprimary) .primary {display: none;} .wallet button {min-width: 100px; white-space: nowrap;} .wallet .status button, .wallet .actions button {border: 2px solid var(--mdgray); box-shadow: none;} .new-card .status, .new-card .expires, .new-card .actions {opacity: 0; max-height: 0;} @media (max-width: 767px) { /* xs down */ .wallet .item {justify-content: space-between;} .wallet .status {order: 2;} .wallet .actions {order: 3;} .wallet .update {order: 4; flex-wrap: wrap;} .wallet .info, .wallet .ccnum, .wallet .ccsave {width: 100%;} .wallet .ccexp, .wallet .cccvv {flex: 1 1 40%;} .wallet .ccsave {text-align: center;} } @media (min-width: 768px) { /* sm up */ .wallet .status, .wallet .status * {width: 150px;} .wallet .primary {text-align: center;} .wallet .update {align-items: end; padding-left: calc(var(--vspace) / 2 + 150px);} .wallet .ccexp, .wallet .cccvv, .wallet .ccsave {flex: 0 0 100px;} } @media (min-width: 1240px) { /* container width up */ .wallet .item {padding: calc(var(--vspace) / 2) 0;} }