@charset "UTF-8";
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@import url("/css/typo.css");
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
/*
optional alternative styles for banners
set to true to enable the banners grid to have a different style
when doing so, also copy all the variables below so that they inherit properly
*/
/* ----------------------------------------------------------------
Default
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Topbar
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Suckerfish top level menu
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Foldout
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Main menu
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Service menu
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Suckerfish drop-down menu variant
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Search box
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Showcase
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Menu anchor (labels)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Event sticky menu
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Date selector
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Banner
-----------------------------------------------------------------*/
/*
Value getter
returns a (custom) value from a component-specific map
backwards compatible with old variables
the $v_map variable is picked up out the context to prevent having to
pass to every single call
e.g. a map would look like this
$abandonedcart: (
padding: 30px,
margin: 0
)
pass that map to $v_map...
$v_map: $abandonedcart;
v(0, padding)
... would then return 30px.
https://sass-lang.com/documentation/modules/map
*/
/**
* Sets the outer website box to a maximum width.
* Matches these bootstraps breakpoints: wxga, tablet, mobile
*/
/**
* Sets the inner content width (for descriptions, etc.).
*/
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9.
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
script {
display: none !important;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "“" "”" "‘" "’";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type=checkbox],
input[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type=search] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
iframe {
border: none !important;
}
dl,
dt,
dd,
ol,
ul,
li {
margin: 0;
padding: 0;
}
hr {
margin: 15px 0;
padding: 0;
border: none;
border-top: 1px solid #999;
}
::selection,
::-moz-selection,
::-webkit-selection {
background: #D4D4D4;
}
[data-video-url] {
color: #ee1b2e;
}
[data-video-url] iframe {
display: block;
width: 100%;
}
[data-video-url].container {
padding: 0 15px;
}
a {
text-decoration: underline;
color: #000;
}
a:hover, a:active {
text-decoration: none;
color: #000;
}
a img {
border: none;
}
iframe {
border: none !important;
}
.gradientOverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
}
p,
pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset,
form {
margin-bottom: var(--var-default-margins, 30px);
}
fieldset {
padding: 0;
border: none;
}
#wrapper {
width: 100%;
position: relative;
z-index: 0;
margin: 0;
background: #FFF;
}
#wrapper .popover {
padding: 0;
border: 0;
border-radius: 0px;
background: #FFF;
}
#wrapper .popover .arrow:after {
border-bottom-color: #FFF;
}
.popover {
box-shadow: none;
}
.nopadding {
padding: 0 !important;
}
.inline-block {
display: inline-block !important;
float: none !important;
}
/* ----------------------------------------------------------------
Richtext
-----------------------------------------------------------------*/
.richtext p {
margin: 0 0 1.4em 0;
}
.richtext ul,
.richtext ol {
margin: 1.67em 0 1.67em 1.67em;
}
.richtext ul ul,
.richtext ul ol,
.richtext ol ul,
.richtext ol ol {
margin-top: 0;
margin-bottom: 0;
}
.richtext p + ul,
.richtext p + ol {
margin-top: -0.67em;
}
.richtext iframe,
.richtext table {
max-width: 100%;
}
.richtext img {
max-width: 100%;
height: auto;
}
.richtext a:not(.btn) {
text-decoration: underline;
}
.richtext a:not(.btn):hover, .richtext a:not(.btn):active {
text-decoration: none;
}
.status-info .peppered-icon {
display: none;
}
.status-info .label {
all: unset;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.socials__wrapper {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
}
.socials__link {
color: #000;
}
.socials__link svg {
width: 30px;
height: 30px;
}
.socials__link:hover {
color: rgb(76.5, 76.5, 76.5);
}
.socials .peppered-icon {
display: block;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.genres {
display: flex;
flex-wrap: wrap;
overflow: hidden;
margin: 0;
gap: 10px;
}
.genres__item {
list-style: none;
}
.genres__link {
display: block;
padding: 0;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
white-space: nowrap;
line-height: 1.2em;
text-decoration: none;
text-transform: uppercase;
background: transparent;
color: #ee1b2e;
font-size: var(--fs-tiny);
}
.genres__link:hover {
text-decoration: none;
background: transparent;
color: #D11021;
}
.genres--brochure {
flex: 1;
margin: 0;
padding: 0;
font-family: inherit;
font-weight: normal;
line-height: 1.2em;
text-transform: uppercase;
font-size: var(--fs-tiny);
}
.genres--brochure .genres__link {
padding: 0;
border-radius: 0;
text-decoration: none;
background: transparent;
color: #ee1b2e;
}
.genres--brochure .genres__link:hover {
text-decoration: none;
background: transparent;
color: #000;
}
.genres--top {
margin: 20px 0 0 30px;
-webkit-mask-image: linear-gradient(90deg, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0.1) 100%);
mask-image: linear-gradient(90deg, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0.1) 100%);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.notification {
display: flex;
align-items: start;
gap: 0.625rem;
}
.notification__message {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1.25rem;
line-height: 1;
text-transform: none;
animation: message-slide-in 0.2s ease-in-out;
}
.notification--notice .fa,
.notification--notice .peppered-icon, .notification--success .fa,
.notification--success .peppered-icon {
color: #7ED321;
}
.notification--warning .fa,
.notification--warning .peppered-icon {
color: #F6A623;
}
.notification--error .fa,
.notification--error .peppered-icon {
color: #FF426D;
}
/**
* .picture viewport sets aspect ratio
* for containing box. 32/15 is the default
* for images 1920X900 - override elsewhere
* where required
*
* The object-fit and aspect ratio model is used to replace inlined background images
* if you would like the image to maintain its intrinsic size, use the picture--no-aspect
* modifier.
*/
.picture {
display: block;
overflow: hidden;
aspect-ratio: var(--picture-aspect-ratio, 32/15);
}
.picture__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.picture--no-aspect {
display: unset;
aspect-ratio: unset;
width: auto;
max-width: 100%;
height: auto;
}
.picture--no-aspect-portrait {
max-width: auto;
max-height: 100%;
}
.skip-links {
position: absolute;
top: 1rem;
left: 1rem;
z-index: -9999;
padding: 1rem;
border-radius: 0.25rem;
background: white;
}
.skip-links:focus-within {
z-index: 99999;
border: 1px solid black;
}
.skip-links__anchor {
display: block;
padding: 0.5rem;
color: black;
}
.video-control__icon {
display: block;
}
.video-control__icon[aria-hidden=true] {
display: none;
}
html {
font-size: var(--fs-normal);
}
@media (max-width: 768px) {
html {
font-size: var(--fs-small);
}
}
body {
font-family: "FSELLIOT", sans-serif;
font-size: inherit;
line-height: 1.4;
-webkit-hyphens: manual;
hyphens: manual;
color: #000;
}
@media (max-width: 767px) {
body.menu-opened {
overflow: hidden;
}
@supports (max-height: 100dvh) {
body.menu-opened {
max-height: 100dvh;
}
}
@supports not (max-height: 100dvh) {
body.menu-opened {
max-height: 100vh;
}
}
}
h1 {
margin: 30px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
font-size: var(--fs-huge-title);
}
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 15px 0;
font-family: "FSELLIOT", sans-serif;
}
h5,
h6 {
margin-bottom: 20px;
}
h2 {
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
font-size: var(--fs-large-title);
}
h3 {
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
font-size: var(--fs-medium-title);
}
h4 {
font-weight: 700;
line-height: 1.1;
font-size: var(--fs-small-title);
}
h5 {
font-weight: bold;
line-height: 1.1;
font-size: var(--fs-normal);
}
h6 {
font-weight: bold;
line-height: 1.1;
font-size: var(--fs-normal);
}
h1,
h2,
h3,
.title {
-webkit-hyphens: manual;
hyphens: manual;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@keyframes banner-fade-slide-in-from-bottom {
0% {
transform: translateY(30vh);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes banner-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.abandoned-cart-banner {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
overflow: auto;
padding: 30px;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
animation: 0.2s ease-in-out forwards banner-fade-in;
}
.abandoned-cart-banner .banner {
width: 600px;
max-width: calc(100% - 60px);
position: relative;
z-index: 0;
padding: 0;
background: #3469CB;
box-shadow: none;
transform: scale(0);
animation: 0.2s ease-in-out forwards modal-slide-in;
animation-delay: 0.15s;
}
@media (max-width: 600px) {
.abandoned-cart-banner .banner {
max-width: 100%;
position: fixed;
right: 0;
bottom: 0;
left: 0;
animation-name: banner-fade-slide-in-from-bottom;
animation-duration: 0.3s;
}
}
.abandoned-cart-banner .banner .desc {
padding: 30px;
}
.abandoned-cart-banner .banner .image {
overflow: hidden;
}
.abandoned-cart-banner .banner .imageLayer {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: transparent no-repeat center center/cover;
}
.abandoned-cart-banner .banner a.imageLayer + .desc {
pointer-events: none;
}
.abandoned-cart-banner .banner .footer {
padding: 0 30px 30px 30px;
}
.abandoned-cart-banner .banner h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: #FFF;
font-size: var(--fs-huge-title);
}
.abandoned-cart-banner .banner h2 a,
.abandoned-cart-banner .banner h2 a:link,
.abandoned-cart-banner .banner h2 a:visited,
.abandoned-cart-banner .banner h2 a:hover,
.abandoned-cart-banner .banner h2 a:active {
text-decoration: none;
color: inherit;
}
.abandoned-cart-banner .banner .subtitle {
margin: 5px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: #FFF;
font-size: var(--fs-medium-title);
}
.abandoned-cart-banner .banner .subtitle p {
margin: 0;
}
.abandoned-cart-banner .banner .btn {
padding: 12px 15px;
border: none;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
font-size: var(--fs-normal);
}
.abandoned-cart-banner .banner .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.abandoned-cart-banner button.close-button {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
position: absolute;
top: -15px;
right: -15px;
z-index: 2;
margin: 0;
padding: 0;
border: none;
border-radius: 100%;
background: #FFF;
color: #000;
opacity: 0.8;
cursor: pointer;
will-change: opacity;
transition: all 0.2s ease-in-out;
}
.abandoned-cart-banner button.close-button:hover {
transition: all 0.1s ease-in-out;
opacity: 1;
}
@media (max-width: 600px) {
.abandoned-cart-banner button.close-button {
top: 0;
right: 0;
background: transparent;
color: #FFF;
}
}
.abandoned-cart-banner button.close-button > * {
pointer-events: none;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 1200px) {
.collapsed-heading summary .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.collapsed-heading summary:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.collapsed-heading summary .inner {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
position: relative;
padding: 10px 0;
border: none;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1;
text-transform: none;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 20px;
}
.collapsed-heading summary .inner:hover, .collapsed-heading summary .inner:active {
background: transparent;
color: #000;
}
.collapsed-heading summary .inner .peppered-icon {
transform: rotate(90deg);
will-change: transform;
transition: transform 0.25s ease-in-out;
fill: currentcolor;
}
.collapsed-heading summary .inner .peppered-icon svg {
width: 30px;
height: 30px;
}
.richtext details.mce-accordion {
position: relative;
margin: 0;
}
.richtext details.mce-accordion summary {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
position: relative;
padding: 10px 0;
border: none;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1;
text-transform: none;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 20px;
}
.richtext details.mce-accordion summary:hover, .richtext details.mce-accordion summary:active {
background: transparent;
color: #000;
}
.richtext details.mce-accordion summary .peppered-icon {
transform: rotate(90deg);
will-change: transform;
transition: transform 0.25s ease-in-out;
fill: currentcolor;
}
.richtext details.mce-accordion summary .peppered-icon svg {
width: 30px;
height: 30px;
}
.richtext details.mce-accordion[open] summary .peppered-icon,
.collapsed-heading details[open] summary .peppered-icon {
transform: rotate(0deg);
}
.richtext details.mce-accordion p:last-child,
.collapsed-heading details p:last-child {
margin-bottom: 0;
}
summary::-webkit-details-marker {
display: none;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
#cart {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
}
#cart .cart-body {
transition: opacity 0.2s ease-in-out;
}
#cart.busy .cart-body {
opacity: 0.66;
}
#cart .messageList,
#cart .comboList,
#cart .itemList {
list-style: none;
margin: 0 15px 30px 15px;
}
#cart .messageList.itemList,
#cart .comboList.itemList,
#cart .itemList.itemList {
margin-bottom: 15px;
}
#cart .messageList:empty,
#cart .comboList:empty,
#cart .itemList:empty {
margin: 0;
}
#cart .messageList li:not(.cartItemCard),
#cart .comboList li:not(.cartItemCard),
#cart .itemList li:not(.cartItemCard) {
position: relative;
margin: 0 0 15px 0;
padding: 0;
padding-left: 30px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-size: var(--fs-small);
line-height: 20px;
text-transform: none;
color: #000;
}
#cart .messageList li:not(.cartItemCard) h3,
#cart .comboList li:not(.cartItemCard) h3,
#cart .itemList li:not(.cartItemCard) h3 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-size: var(--fs-normal);
line-height: 1;
text-transform: none;
}
#cart .messageList li:not(.cartItemCard) p,
#cart .comboList li:not(.cartItemCard) p,
#cart .itemList li:not(.cartItemCard) p {
margin: 0;
}
#cart .messageList li:not(.cartItemCard) a,
#cart .comboList li:not(.cartItemCard) a,
#cart .itemList li:not(.cartItemCard) a {
color: #3469CB;
}
#cart .messageList li:not(.cartItemCard) a:hover,
#cart .comboList li:not(.cartItemCard) a:hover,
#cart .itemList li:not(.cartItemCard) a:hover {
text-decoration: underline;
}
#cart .cartItemCard {
margin: 0 0 15px 0;
}
#cart .upsellMsg {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-size: var(--fs-small);
line-height: 1.15;
text-transform: none;
}
#cart .upsellDescription {
position: relative;
color: inherit;
}
#cart .upsellDescription p {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-size: var(--fs-tiny);
line-height: 1.17;
text-transform: none;
}
#cart #cart-inner {
width: 400px;
max-width: 100%;
height: 100%;
position: fixed;
right: 0;
margin: auto;
background: #FFF;
color: #000;
box-shadow: none;
transform: translateX(100%);
will-change: transform;
transition: transform 0.2s ease-out;
}
#cart #cart-inner .cart-content {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
background: #FFF;
color: #000;
}
#cart #cart-inner .cart-header {
display: flex;
align-items: baseline;
margin: 0;
padding: 20px 30px 20px 15px;
border-bottom: 1px solid #F0F0F0;
background: #FFF;
color: #000;
}
#cart #cart-inner .cart-header .icon-cart {
margin: 0 10px 0 15px;
}
#cart #cart-inner .cart-header .close-button {
all: unset;
appearance: none;
cursor: pointer;
margin: 0;
color: #999;
transition: all 0.2s ease-in-out;
}
#cart #cart-inner .cart-header .close-button:hover {
color: #000;
transition: all 0.1s ease-in-out;
}
#cart #cart-inner .cart-header #cart-title {
flex: 1;
position: relative;
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
font-size: var(--fs-small-title);
}
#cart #cart-inner .cart-header .badge {
display: inline-block;
min-width: 1em;
height: 1em;
box-sizing: content-box;
position: absolute;
top: 15px;
left: 40px;
z-index: 1;
padding: 2px;
border-radius: 1em;
font-weight: normal;
font-size: var(--fs-tiny);
text-align: center;
line-height: 1;
white-space: nowrap;
background: #3B76E4;
color: #FFF;
}
#cart #cart-inner .cart-body {
padding: 15px 15px 30px 15px;
flex: 1;
overflow: auto;
}
@keyframes emptycart-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#cart #cart-inner .cart-body .empty {
margin: 60px 15px;
text-align: center;
animation: emptycart-fadein 0.15s ease-in-out;
}
#cart #cart-inner .cart-body .empty img {
margin-bottom: 15px;
}
#cart #cart-inner .cart-body .empty p {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-size: var(--fs-small);
line-height: normal;
text-transform: none;
color: #333;
}
#cart #cart-inner .cart-footer {
order: 1;
padding: 15px;
border-top: 1px solid #333;
background: #3B76E4;
text-align: center;
}
#cart #cart-inner .cart-footer .btn {
max-width: 100%;
padding: 12px 15px;
border-radius: 0px;
overflow: hidden;
font-size: var(--fs-normal);
}
#cart #cart-inner .cart-footer .btn.btn-active {
border: none;
background: #ee1b2e;
color: #FFF;
}
#cart #cart-inner .cart-footer .btn.btn-active:hover {
border: none;
background: #D11021;
color: #FFF;
}
#cart #cart-inner .cart-footer .btn.btn-clean {
display: none;
border: none;
text-align: left;
background: transparent;
color: inherit;
}
#cart #cart-inner .cart-footer .btn.btn-clean:hover {
border: none;
background: transparent;
color: inherit;
}
#cart[aria-expanded=false] {
pointer-events: none;
}
#cart[aria-expanded=false]:not(.animating) {
visibility: hidden;
}
#cart[aria-expanded=true] {
background: rgba(0, 0, 0, 0.2);
}
#cart[aria-expanded=true] #cart-inner {
display: block;
transition-delay: 0.15s;
transform: translateX(0);
}
.cartItemCard {
min-height: 100px;
position: relative;
padding: 15px 20px 15px 140px;
border-radius: 0px;
font-size: var(--fs-small);
background: #FFF;
box-shadow: none;
transition: box-shadow 0.2s ease-in-out;
}
.cartItemCard.new {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
@media (max-width: 325px) {
.cartItemCard {
padding-left: 20px;
}
}
.cartItemCard .remove {
width: 25px;
height: 25px;
position: absolute;
top: 0;
right: 0;
padding-top: 5px;
padding-right: 10px;
text-align: right;
color: #000;
}
.cartItemCard .remove:hover {
color: #000;
}
.cartItemCard .thumb {
width: 120px;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 0px 0 0 0px;
background: #DDD no-repeat center/cover;
}
@media (max-width: 325px) {
.cartItemCard .thumb {
display: none;
}
}
.cartItemCard h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-size: var(--fs-normal);
line-height: normal;
text-transform: none;
color: #000;
}
.cartItemCard .meta {
float: none;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.17;
text-transform: none;
color: #1A242F;
}
.cartItemCard .datetime .date > * {
display: inline;
}
.cartItemCard > a,
.cartItemCard > a:hover {
text-decoration: none;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.cookieConsentForm {
color: inherit;
font-size: var(--fs-small);
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.cookieConsentForm {
max-width: none;
}
}
@media (min-width: 768px) {
.cookieConsentForm {
max-width: 750px;
}
}
@media (min-width: 992px) {
.cookieConsentForm {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.cookieConsentForm {
max-width: 1170px;
}
}
.cookieConsentForm .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
@media (min-width: 1200px) {
.cookieConsentForm .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.cookieConsentForm:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.cookieConsentForm p {
margin: 0 0 1.4em 0;
}
.cookieConsentForm p:last-child {
margin: 0;
}
.cookieConsentForm p a {
text-decoration: underline;
color: #000;
}
.cookieConsentForm p a:hover {
text-decoration: none;
color: #000;
}
.cookieConsentForm fieldset.buttons ul {
list-style: none;
display: flex;
justify-content: flex-end;
margin: 0 0 0 auto;
padding: 0;
/* Mobile styles */
}
.cookieConsentForm fieldset.buttons ul li {
position: relative;
margin: 0;
padding: 0 0 0 2em;
}
@media (max-width: 600px) {
.cookieConsentForm fieldset.buttons ul {
display: block;
}
.cookieConsentForm fieldset.buttons ul li {
text-align: center;
padding-right: 0;
padding-left: 0;
}
.cookieConsentForm fieldset.buttons ul li + li {
margin-top: 15px;
}
}
.cookieConsentForm form {
margin: 0 auto;
padding: 0;
}
.cookieConsentForm fieldset {
margin: 0;
padding: 0;
text-align: right;
}
.cookieConsentForm h2 {
margin: 0 0 30px 0;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-huge-title);
}
.cookieConsentForm h3 {
margin: 0;
font-weight: 700;
text-transform: none;
color: inherit;
font-size: var(--fs-small-title);
}
.cookieConsentForm label {
font-weight: normal;
}
.cookieConsentForm input[type=radio] {
position: absolute;
left: 0.5ex;
}
.cookieConsentForm .content {
margin: 0;
overflow: auto;
}
.cookieConsentForm .content p {
margin: 0 0 1.4em 0;
}
.cookieConsentForm .content + fieldset:not(.inline) {
margin-top: 15px;
}
.cookieConsentForm .more-link {
font-weight: bold;
text-decoration: none;
color: inherit;
}
.cookieConsentForm .more-link:hover {
text-decoration: underline;
color: inherit;
}
@media (max-width: 600px) {
.cookieConsentForm .btn {
width: 100%;
}
}
.cookieConsentForm .btn-reject, .cookieConsentForm .btn-accept-limited {
border: none;
background: #EBECEC;
color: #ee1b2e;
}
.cookieConsentForm .btn-reject:hover, .cookieConsentForm .btn-accept-limited:hover {
border: none;
background: #D11021;
color: #FFF;
}
.cookieConsentForm .btn-accept-all {
border: none;
background: #ee1b2e;
color: #FFF;
}
.cookieConsentForm .btn-accept-all:hover {
border: none;
background: #D11021;
color: #FFF;
}
.cookieConsentForm .more {
display: none;
}
.cookieConsentForm.show-more .more-link {
display: none;
}
.cookieConsentForm.show-more .more {
display: block;
}
.cookieConsentForm .cookieConsentOptions {
display: none;
}
.cookieConsentForm .spinner-wrapper {
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(250, 250, 250, 0.7);
color: #333;
}
.cookieConsentForm.waiting .spinner-wrapper {
display: flex;
}
.cookieConsentPlaceholder {
width: 100%;
padding: 60px 30px;
background: #FAFAFA;
}
.cookieConsentPlaceholder > .cookieConsentForm {
max-width: none;
padding: 0;
}
.cookieConsentPlaceholder form {
padding: 0;
}
.cookieConsentBanner {
max-height: 100%;
position: fixed;
overflow: auto;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
border: none;
background: #FAFAFA;
box-shadow: none;
}
.cookieConsentBanner .inner {
display: flex;
flex-direction: column;
max-height: 100vh;
padding: 60px 15px;
}
@media (max-width: 600px) {
.cookieConsentBanner .inner {
padding: 30px 15px;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.richtext ul.cols-grid-2,
.richtext ul.cols-grid-3 {
list-style: none !important;
display: grid;
margin: 0;
padding: 0;
column-gap: 30px;
row-gap: 30px;
}
.richtext ul.cols-grid-2 > * :first-child:last-child,
.richtext ul.cols-grid-3 > * :first-child:last-child {
margin-bottom: 0;
}
.richtext ul.cols-grid-2 {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
.richtext ul.cols-grid-2 {
grid-template-columns: 1fr;
}
.richtext ul.cols-grid-2 .btn {
width: 100%;
}
}
@media (min-width: 769px) {
.richtext ul.cols-grid-2 > *:nth-child(even) {
position: relative;
}
.richtext ul.cols-grid-2 > *:nth-child(even)::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: -15px;
border-left: none;
}
}
.richtext ul.cols-grid-3 {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 992px) {
.richtext ul.cols-grid-3 {
grid-template-columns: 1fr;
}
.richtext ul.cols-grid-3 .btn {
width: 100%;
}
}
@media (min-width: 993px) {
.richtext ul.cols-grid-3 > *:not(:nth-child(3n+1)) {
position: relative;
}
.richtext ul.cols-grid-3 > *:not(:nth-child(3n+1))::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: -15px;
border-left: none;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.donationWrapper {
padding: 30px 0;
background: #3B76E4;
color: #FFF;
}
.donationWrapper form,
.donationWrapper fieldset {
margin: 0;
}
.donationWrapper h2 {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #FFF;
font-size: var(--fs-large-title);
}
.donationWrapper p {
width: 60%;
clear: both;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.33;
text-transform: none;
font-size: var(--fs-large-subtitle);
}
.donationWrapper p:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.donationWrapper p {
width: 100%;
}
}
.donationWrapper .checkboxContainer {
display: block;
margin: 30px 0;
}
.donationWrapper .checkboxContainer label {
display: inline-block;
padding-right: 30px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.17;
text-transform: none;
font-size: var(--fs-large-subtitle);
}
.donationWrapper .checkboxContainer label:last-child {
padding-right: 0;
}
@media (max-width: 767px) {
.donationWrapper .checkboxContainer label {
display: block;
}
}
.donationWrapper .btn.btn-active {
border: none;
background: #ee1b2e;
color: #FFF;
}
.donationWrapper .btn.btn-active:hover {
border: none;
background: #D11021;
color: #FFF;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.favourite {
font-size: var(--fs-small-title);
}
.favourite a,
.favourite button {
margin: 0;
padding: 0 2px;
border: 0;
background: none;
color: #000;
font-size: var(--fs-small-title);
}
.favourite a:hover,
.favourite button:hover {
color: #3B76E4;
}
.favourite .linkGotoWishList {
color: #3B76E4;
}
.favourite .linkGotoWishList:hover {
color: #000;
}
.favourite i {
will-change: transform;
}
.favourite .pending i {
animation-name: pending_hearts;
animation-duration: 600ms;
animation-timing-function: linear;
}
@keyframes pending_hearts {
from {
transform: scale(1);
}
to {
transform: scale(0.6);
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.daterangepicker {
margin-top: 0;
border-radius: 0;
background: #FFF;
border-color: #DDD;
color: #000;
box-shadow: none;
}
.daterangepicker::before, .daterangepicker::after {
display: none;
}
.daterangepicker .drp-calendar.left {
padding: 15px 0 15px 15px;
}
.daterangepicker .drp-calendar.right {
padding: 15px;
}
.daterangepicker .drp-calendar.left,
.daterangepicker .drp-buttons {
border-color: #DDD;
}
.daterangepicker .calendar-table {
background: #FFF;
border-color: #FFF;
color: #000;
}
.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
font-size: var(--fs-tiny);
}
.daterangepicker .calendar-table td {
border-radius: 0;
color: #000;
}
.daterangepicker .calendar-table td.today:not(.active) {
outline: 1px solid rgba(0, 0, 0, 0.25);
}
.daterangepicker .calendar-table td.in-range {
background: rgba(212, 212, 212, 0.25);
color: #000;
}
.daterangepicker .calendar-table td.available:hover {
background: rgba(212, 212, 212, 0.5);
color: #000;
}
.daterangepicker .calendar-table td:not(.has-event) {
color: #7b7b7b;
}
.daterangepicker .calendar-table td.has-longterm,
.daterangepicker .calendar-table td.has-event {
font-weight: bold;
color: #000;
}
.daterangepicker .calendar-table td.start-date,
.daterangepicker .calendar-table td.end-date {
border-radius: 0;
}
.daterangepicker .calendar-table td.active,
.daterangepicker .calendar-table td.active:hover {
font-weight: bold;
background: #D4D4D4;
color: #FFF;
}
.daterangepicker .calendar-table td.active.start-date:not(.end-date),
.daterangepicker .calendar-table td.active:hover.start-date:not(.end-date) {
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.daterangepicker .calendar-table td.active.end-date:not(.start-date),
.daterangepicker .calendar-table td.active:hover.end-date:not(.start-date) {
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.daterangepicker .calendar-table td.off {
font-weight: normal;
background: inherit;
color: #F6F6F6;
}
.daterangepicker .calendar-table .next,
.daterangepicker .calendar-table .prev {
color: #000;
}
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
color: inherit;
border-color: currentcolor;
}
.daterangepicker .calendar-table .next:hover,
.daterangepicker .calendar-table .prev:hover {
background: transparent;
color: #000;
}
@media (max-width: 563px) {
.daterangepicker .ranges ul {
text-align: center;
}
.daterangepicker .ranges ul li {
display: inline-block;
}
}
.daterangepicker .ranges ul li.active {
font-weight: bold;
background: #D4D4D4;
color: #FFF;
}
.input-daterange input::placeholder {
color: #999 !important;
}
.daterangepicker .drp-buttons .btn,
.select-dropdown .btn {
width: auto;
min-width: 0;
padding: 6px 12px;
border: none;
border-radius: 0px;
font-size: var(--fs-tiny);
background: #EBECEC;
color: #ee1b2e;
}
.daterangepicker .drp-buttons .btn:hover,
.select-dropdown .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.daterangepicker .drp-buttons .btn.btn-primary,
.select-dropdown .btn.btn-primary {
border: none;
background: #ee1b2e;
color: #FFF;
}
.daterangepicker .drp-buttons .btn.btn-primary:hover,
.select-dropdown .btn.btn-primary:hover {
border: none;
background: #D11021;
color: #FFF;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
#user-popup,
#language-popup {
position: fixed;
top: 70px;
right: 0;
z-index: 99999;
margin-top: 6px;
margin-right: -60px;
padding: 0 5px 5px 5px;
background: #FFF;
box-shadow: none;
will-change: opacity;
animation: fade-in 0.2s ease-in-out;
}
#user-popup::before,
#language-popup::before {
content: "";
display: block;
position: absolute;
top: -6px;
right: 63px;
border-top: none;
border-right: 6px solid transparent;
border-bottom: 6px solid #FFF;
border-left: 6px solid transparent;
}
#user-popup[aria-expanded=false],
#language-popup[aria-expanded=false] {
display: none;
opacity: 0;
}
.is-scrolled #user-popup,
.is-scrolled #language-popup {
top: 70px;
}
.has-timer #user-popup,
.has-timer #language-popup {
top: 110px;
}
.has-timer.is-scrolled #user-popup,
.has-timer.is-scrolled #language-popup {
top: 110px;
}
#order-header #user-popup,
#order-header #language-popup {
top: 100px;
}
#language-popup {
margin-right: -15px;
padding: 10px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-size: var(--fs-small);
text-transform: uppercase;
background: #FFF;
color: #000;
box-shadow: none;
}
#language-popup::before {
border-bottom-color: #FFF;
right: 50%;
margin-right: -6px;
}
#language-popup ul {
list-style: none;
margin: 0;
padding: 0;
}
#language-popup a {
text-decoration: none;
color: #000;
}
#language-popup a:hover {
text-decoration: underline;
color: #3469CB;
}
#wrapper .popover {
max-width: 50vw;
}
#wrapper .popover .arrow:after {
border-bottom-color: #FFF !important;
}
#wrapper .popover .popover-content {
background: #FFF;
}
header nav.user-menu {
padding: 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-size: var(--fs-small);
line-height: 1.45;
text-transform: none;
background: #FFF;
color: #000;
}
header nav.user-menu a:not(.btn) {
text-decoration: none;
color: #000;
}
header nav.user-menu a:not(.btn):hover {
text-decoration: underline;
color: #3469CB;
}
header nav.user-menu p {
margin: 0 0 15px 0;
padding: 0;
}
header nav.user-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
header nav.user-menu .client-type {
color: #000;
}
header nav.user-menu .client-type img {
max-height: 50px;
}
header nav.user-menu .client-type a {
color: #3469CB;
}
header nav.user-menu .client-type a:hover, header nav.user-menu .client-type a:active {
color: #3469CB;
}
header nav.user-menu h2,
header nav.user-menu .user-info,
header nav.user-menu li {
position: relative;
padding-left: 45px;
background: inherit;
}
header nav.user-menu h2 .peppered-icon,
header nav.user-menu h2 .icon,
header nav.user-menu .user-info .peppered-icon,
header nav.user-menu .user-info .icon,
header nav.user-menu li .peppered-icon,
header nav.user-menu li .icon {
position: absolute;
top: 0;
left: 1px;
font-size: var(--fs-large-subtitle);
line-height: 30px;
}
header nav.user-menu h2 .peppered-icon,
header nav.user-menu .user-info .peppered-icon,
header nav.user-menu li .peppered-icon {
top: 5px;
}
header nav.user-menu h2,
header nav.user-menu .orders,
header nav.user-menu .page,
header nav.user-menu .wishlist {
display: block;
margin: 0 0 15px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-size: var(--fs-large-subtitle);
line-height: 30px;
text-transform: none;
}
header nav.user-menu .wishlist [data-wishlist-count="0"] {
display: none;
}
header nav.user-menu .orders .peppered-icon,
header nav.user-menu .orders i,
header nav.user-menu .page .peppered-icon,
header nav.user-menu .page i,
header nav.user-menu .wishlist .peppered-icon,
header nav.user-menu .wishlist i {
color: inherit;
}
header nav.user-menu li.pages + li:not(.pages) {
margin-top: 15px;
}
header nav.user-menu h2 {
margin: 0;
}
header nav.user-menu h2,
header nav.user-menu h2 a {
color: #3469CB;
}
header nav.user-menu h2 a:hover,
header nav.user-menu h2 a:active {
text-decoration: underline;
color: #3469CB;
}
header nav.user-menu .btn {
margin: 0 0 15px 0;
}
header nav.user-menu .user-info {
margin: 0 0 15px 0;
color: #3469CB;
word-wrap: break-word;
}
header nav.user-menu .timeslot {
margin: 0 0 1em -5px;
padding-right: 5px;
line-height: 30px;
text-indent: 5px;
background: #3469CB;
color: #FFF;
}
header nav.user-menu .balance {
margin: 0 0 1em -5px;
padding-right: 5px;
line-height: 30px;
text-indent: 5px;
background: #3469CB;
color: #FFF;
}
header nav.user-menu .balance .peppered-icon {
left: 5px;
}
header nav.user-menu .secondary {
margin-top: 15px;
}
ul.kijkwijzer {
list-style: none;
margin: 0;
padding: 0;
line-height: 20px;
}
ul.kijkwijzer li {
display: inline-block;
margin: 0 0 1px 0;
padding: 0;
}
ul.kijkwijzer li + li {
margin-left: 1px;
}
ul.kijkwijzer li img {
width: 19px;
height: 19px;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.listItems .location,
.subshow .location {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1.4;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.listItems .venue,
.subshow .venue {
margin: 7px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.4;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.listItems .location + .venue,
.subshow .location + .venue {
margin-top: 0;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.modal:not(.glightbox) {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
background: rgba(0, 0, 0, 0.2);
}
.modal:not(.glightbox) .modal-dialog {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.modal:not(.glightbox) .modal-content {
width: 600px;
max-width: 40rem;
max-height: 100%;
overflow: auto;
margin: 30px;
padding: 30px 30px 15px 30px;
border: none;
border-radius: 0px;
background: #FFF;
color: #000;
box-shadow: none;
animation: 0.2s ease-in-out forwards modal-slide-in;
}
.modal:not(.glightbox) .modal-content form {
margin: 0;
}
.modal:not(.glightbox) .modal-content form .msg {
animation: message-slide-in 0.2s ease-in-out;
}
.modal:not(.glightbox) .modal-content form.newsletter-subscribe-form.success [for=NLSubscribeForm-email],
.modal:not(.glightbox) .modal-content form.newsletter-subscribe-form.success #NLSubscribeForm-email,
.modal:not(.glightbox) .modal-content form.newsletter-subscribe-form.success button,
.modal:not(.glightbox) .modal-content form.newsletter-subscribe-form.success .g-recaptcha {
display: none;
}
.modal:not(.glightbox) .modal-content .modal-header {
margin: 0 0 30px 0;
padding: 0;
border: none;
}
.modal:not(.glightbox) .modal-content .modal-header .close-button {
all: unset;
position: absolute;
top: 15px;
right: 15px;
color: #999;
transition: all 0.2s ease-in-out;
appearance: none;
cursor: pointer;
}
.modal:not(.glightbox) .modal-content .modal-header .close-button:hover {
color: #000;
transition: all 0.1s ease-in-out;
}
.modal:not(.glightbox) .modal-content .modal-header .modal-title {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-large-title);
}
.modal:not(.glightbox)[aria-expanded=true] {
display: block;
}
.modal:not(.glightbox)[aria-expanded=false]:not(.animating) {
display: none;
}
.generic-modal {
container-type: inline-size;
width: 600px;
padding: 30px 30px 15px 30px;
border: none;
border-radius: 0px;
background: #FFF;
color: #000;
box-shadow: none;
animation: 0.2s ease-in-out forwards modal-slide-in;
}
.generic-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: 0 0 30px 0;
border: none;
}
.generic-modal__close-button {
all: unset;
color: #999;
transition: all 0.2s ease-in-out;
appearance: none;
cursor: pointer;
}
.generic-modal__close-button:hover {
color: #000;
transition: all 0.1s ease-in-out;
}
.generic-modal__title {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-large-title);
}
.generic-modal__footer {
width: 100cqw;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.newsItemCard {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
border: none;
border-radius: 0px;
background: #FFF;
color: inherit;
box-shadow: none;
transition: box-shadow 0.2s ease;
overflow: hidden;
font-size: var(--fs-small);
}
.newsItemCard .thumb {
overflow: hidden;
}
.newsItemCard .thumb img {
width: 100%;
}
.featuredNewsItems[data-animations*=shadow] .newsItemCard {
transition: all 0.8s ease-in-out;
}
.featuredNewsItems[data-animations*=shadow] .newsItemCard:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=shadow] .newsItemCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.featuredNewsItems[data-animations*=glow] .newsItemCard {
transition: all 0.8s ease-in-out;
}
.featuredNewsItems[data-animations*=glow] .newsItemCard:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=glow] .newsItemCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.featuredNewsItems[data-animations*=zoom] .newsItemCard .thumb img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredNewsItems[data-animations*=zoom] .newsItemCard:hover .thumb img {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=zoom] .newsItemCard:active .thumb img {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.featuredNewsItems[data-animations*=twist] .newsItemCard .thumb img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredNewsItems[data-animations*=twist] .newsItemCard:hover .thumb img {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=twist] .newsItemCard:active .thumb img {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.featuredNewsItems[data-animations*=saturate] .newsItemCard .thumb img {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.featuredNewsItems[data-animations*=saturate] .newsItemCard:hover .thumb img {
filter: none;
transition: all 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=saturate] .newsItemCard:active .thumb img {
filter: none;
transition: all 0.1s ease-in-out;
}
.featuredNewsItems[data-animations*=desaturate] .newsItemCard .thumb img {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.featuredNewsItems[data-animations*=desaturate] .newsItemCard:hover .thumb img {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=desaturate] .newsItemCard:active .thumb img {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.featuredNewsItems[data-animations*=slide] .newsItemCard {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredNewsItems[data-animations*=slide] .newsItemCard:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=slide] .newsItemCard:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.featuredNewsItems[data-animations*=shift] .newsItemCard .desc {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.featuredNewsItems[data-animations*=shift] .newsItemCard:hover .desc {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=shift] .newsItemCard:active .desc {
transform: none;
transition: transform 0.1s ease-in-out;
}
.featuredNewsItems[data-animations*=skew] .newsItemCard {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.featuredNewsItems[data-animations*=skew] .newsItemCard:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.featuredNewsItems[data-animations*=skew] .newsItemCard:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.newsItemCard .supertitle {
margin: 30px 30px 15px 30px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
background: #FFF;
color: #333;
font-size: var(--fs-small);
}
.newsItemCard .desc {
margin: 0 30px 15px 30px;
flex-grow: 1;
}
.newsItemCard .desc h3 {
margin-top: 0;
margin-bottom: 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-large);
}
.newsItemCard .desc h3 a {
color: inherit;
}
.newsItemCard .desc h3:hover {
color: inherit;
}
.newsItemCard .desc .richtext {
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: inherit;
}
.newsItemCard .desc p {
margin: 0;
}
.newsItemCard .btn.btn-clean {
display: flex;
margin: 15px 30px 30px 30px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 20px;
text-transform: uppercase;
color: #3469CB;
font-size: var(--fs-normal);
}
.newsItemCard .btn.btn-clean:hover {
color: #000;
}
.newsItemCard .btn.btn-active {
display: none;
margin: 15px 30px 30px 30px;
align-self: flex-end;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.pageCard {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
border: none;
border-radius: 0px;
background: #F6F6F6;
color: inherit;
box-shadow: none;
transition: box-shadow 0.2s ease;
overflow: hidden;
font-size: var(--fs-small);
}
.pageCard .thumb {
overflow: hidden;
}
.pageCard .thumb img {
width: 100%;
padding: 0;
border-radius: 0;
}
.pageCard.random-images:not(.large-first) .thumb {
text-align: left;
}
.pageCard.random-images:not(.large-first) .thumb img {
width: auto;
max-width: 100%;
max-height: 400px;
}
.pageCard .horizontal-thumb {
display: none;
margin-right: 15px;
background: transparent no-repeat center/cover;
}
.pageCard .horizontal-thumb img {
width: 100%;
}
.pageItems[data-animations*=shadow] .pageCard {
transition: all 0.8s ease-in-out;
}
.pageItems[data-animations*=shadow] .pageCard:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.pageItems[data-animations*=shadow] .pageCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.pageItems[data-animations*=glow] .pageCard {
transition: all 0.8s ease-in-out;
}
.pageItems[data-animations*=glow] .pageCard:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.pageItems[data-animations*=glow] .pageCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.pageItems[data-animations*=zoom] .pageCard .thumb img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.pageItems[data-animations*=zoom] .pageCard:hover .thumb img {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.pageItems[data-animations*=zoom] .pageCard:active .thumb img {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.pageItems[data-animations*=twist] .pageCard .thumb img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.pageItems[data-animations*=twist] .pageCard:hover .thumb img {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.pageItems[data-animations*=twist] .pageCard:active .thumb img {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.pageItems[data-animations*=saturate] .pageCard .thumb img {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.pageItems[data-animations*=saturate] .pageCard:hover .thumb img {
filter: none;
transition: all 0.3s ease-in-out;
}
.pageItems[data-animations*=saturate] .pageCard:active .thumb img {
filter: none;
transition: all 0.1s ease-in-out;
}
.pageItems[data-animations*=desaturate] .pageCard .thumb img {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.pageItems[data-animations*=desaturate] .pageCard:hover .thumb img {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.pageItems[data-animations*=desaturate] .pageCard:active .thumb img {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.pageItems[data-animations*=slide] .pageCard {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.pageItems[data-animations*=slide] .pageCard:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.pageItems[data-animations*=slide] .pageCard:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.pageItems[data-animations*=shift] .pageCard .desc {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.pageItems[data-animations*=shift] .pageCard:hover .desc {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.pageItems[data-animations*=shift] .pageCard:active .desc {
transform: none;
transition: transform 0.1s ease-in-out;
}
.pageItems[data-animations*=skew] .pageCard {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.pageItems[data-animations*=skew] .pageCard:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.pageItems[data-animations*=skew] .pageCard:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.pageCard .desc {
display: flex;
flex-direction: column;
margin: 30px;
flex-grow: 1;
justify-content: space-between;
}
.pageCard .desc h3 {
margin-top: 15px;
margin-bottom: 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-decoration: inherit;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-medium-title);
}
.pageCard .desc h3.image-middle {
display: block;
display: -webkit-box;
height: 4em;
line-height: 1.3em;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.pageCard .desc h3:hover {
color: rgb(76.5, 76.5, 76.5);
}
.pageCard .desc p {
margin: 0;
}
.pageCard .desc .desc-link {
text-decoration: none;
}
.pageCard .desc .desc-link:hover h3 {
text-decoration: inherit;
}
.pageCard .desc .desc-link:hover .richtext {
text-decoration: none;
}
.pageCard .desc > a.desc-link {
display: block;
}
.pageCard .desc .thumb {
margin-bottom: 15px;
}
.pageCard .desc .publication-date {
display: block;
margin: 15px 0 10px;
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
color: #000;
font-size: inherit;
}
.pageCard .desc .richtext {
flex: 1;
font-family: inherit;
font-weight: 300;
line-height: 150%;
text-decoration: none;
text-transform: none;
color: #000;
font-size: var(--fs-normal);
}
.pageCard .desc .footer {
display: flex;
flex-wrap: wrap;
margin: 25px 0 0 0;
}
.pageCard .desc .footer img {
max-height: 100%;
margin: 0 10px 0 0;
}
.pageCard .desc .footer a,
.pageCard .desc .footer a:link,
.pageCard .desc .footer a:visited {
display: flex;
align-items: center;
height: 30px;
margin: 5px 30px 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 400;
line-height: 1.2;
text-decoration: none;
text-transform: none;
color: #000;
font-size: var(--fs-normal);
}
.pageCard .desc .footer a:hover,
.pageCard .desc .footer a:active {
text-decoration: none;
color: rgb(76.5, 76.5, 76.5);
}
.pageCard--show-date .desc h3 {
margin-top: 0;
}
.pageCard.default {
width: auto;
min-height: 360px;
position: relative;
}
.pageCard.default .thumb {
width: 100%;
height: 100%;
position: absolute;
}
.pageCard.default .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.pageCard.default .desc {
z-index: 1;
color: #FFF;
pointer-events: none;
}
.pageCard.default .desc h3 {
color: inherit;
pointer-events: initial;
}
.pageCard.default .desc h3:hover {
color: inherit;
}
.pageCard.default .desc .richtext {
display: inline-block;
text-decoration: none;
color: #000;
}
.pageCard.default .desc .footer {
pointer-events: initial;
}
.pageCard.default .desc .footer a,
.pageCard.default .desc .footer a:link,
.pageCard.default .desc .footer a:visited {
color: #FFF;
}
.pageCard.default .desc .footer a:hover,
.pageCard.default .desc .footer a:active {
color: #999;
}
@media (min-width: 768px) {
.variant-singular .pageCard {
flex-direction: row;
}
.variant-singular .pageCard > * {
flex: 1;
}
.variant-singular .pageCard .thumb {
display: none;
}
.variant-singular .pageCard .horizontal-thumb {
display: block;
}
}
.variant-singular .pageCard + .pageCard {
margin-top: 30px;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.noUi-target {
height: 6px;
margin-bottom: 18px;
border: none;
border-radius: 0px;
background: #DDD;
box-shadow: none;
}
.noUi-target .noUi-tooltip {
bottom: 100%;
z-index: -1;
padding: 0;
border: none;
background: #FFF;
color: #000;
}
.noUi-target .noUi-connect {
background: #999;
}
.noUi-target .noUi-handle {
width: 36px;
height: 36px;
top: -3px;
left: -18px;
border: none;
border-radius: 100%;
background: #3469CB;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.noUi-target .noUi-handle::before, .noUi-target .noUi-handle::after {
display: none;
}
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
right: -18px;
left: auto;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
body:not(.order) #orderTimer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
text-align: center;
}
#orderTimer.timeup {
animation: FlashInOut 1s infinite;
}
#orderTimer a {
display: block;
padding: 10px 15px;
border-top: none;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-size: var(--fs-normal);
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: none;
background: #3469CB;
color: #FFF;
box-shadow: none;
}
#orderTimer a:hover {
text-decoration: none;
color: #FFF;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
#order-header {
height: 100px;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 2;
padding: 0 15px;
border-bottom: 1px solid #FAFAFA;
background: #3469CB;
box-shadow: none;
}
#order-header ~ #content {
position: relative;
z-index: 1;
padding-top: 100px;
}
#order-header ~ #content [id]:target::before {
content: "";
display: block;
height: 100px;
margin-top: -100px;
}
#order-header .inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
margin: 0 auto;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
#order-header .inner {
max-width: none;
}
}
@media (min-width: 768px) {
#order-header .inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
#order-header .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
#order-header .inner {
max-width: 1170px;
}
}
#order-header .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
#order-header .inner > * {
flex: 1;
}
#order-header .headerWrapper {
position: relative;
}
#order-header .brand {
height: 120px;
max-height: 100%;
padding: 10px 0;
text-align: left;
}
#order-header .brand img {
max-width: 100%;
height: 100%;
}
#order-header #serviceMenuContainer .header-account {
margin: 0;
}
#order-header #serviceMenuContainer .header-account .avatar {
margin: 0;
}
#order-header .avatarWrapper {
text-align: right;
}
#order-header .avatar {
border: none;
border-radius: 6px;
text-transform: none;
text-align: right;
background: transparent;
color: #000;
}
#order-header .avatar:hover, #order-header .avatar:active {
border: none;
background: transparent;
color: #3469CB;
}
#order-header .orderStepWrapper {
max-width: 500px;
position: relative;
top: 5px;
margin: 0;
padding: 0 30px;
font-family: inherit;
font-weight: normal;
font-size: var(--fs-tiny);
line-height: 1;
text-transform: none;
flex: 2;
}
@media (max-width: 768px) {
#order-header .orderStepWrapper {
display: none;
}
}
#order-header .orderStepWrapper .orderSteps {
width: 100%;
margin: -0.5em auto 0 auto;
}
#order-header .orderStepWrapper .orderSteps ul {
list-style: none;
display: flex;
width: 100%;
position: relative;
z-index: 2;
margin: 0;
}
#order-header .orderStepWrapper .orderSteps ul li {
width: 25%;
color: #787878;
text-align: center;
}
#order-header .orderStepWrapper .orderSteps ul li a,
#order-header .orderStepWrapper .orderSteps ul li a:link,
#order-header .orderStepWrapper .orderSteps ul li a:visited {
color: inherit;
}
#order-header .orderStepWrapper .orderSteps ul li a:hover {
color: #000;
}
#order-header .orderStepWrapper .orderSteps ul li .fa-stack {
height: 20px;
line-height: 1;
}
#order-header .orderStepWrapper .orderSteps ul li .fa {
height: 20px;
font-size: 20px;
line-height: 1;
color: #DDD;
}
#order-header .orderStepWrapper .orderSteps ul li .fa-stack .fa-circle {
color: #FFF;
}
#order-header .orderStepWrapper .orderSteps ul li.checked {
color: #000;
}
#order-header .orderStepWrapper .orderSteps ul li.checked .fa-check-circle {
color: #3B76E4;
}
#order-header .orderStepWrapper .orderSteps .stepName {
display: inline-block;
margin-top: 0.5em;
}
#order-header .orderStepWrapper .orderSteps .bar {
position: relative;
}
#order-header .orderStepWrapper .orderSteps .bar::before, #order-header .orderStepWrapper .orderSteps .bar::after {
content: "";
display: block;
width: 75%;
position: absolute;
top: 9px;
left: 12.5%;
}
#order-header .orderStepWrapper .orderSteps .bar::before {
z-index: 1;
border-top: 2px solid #3B76E4;
}
#order-header .orderStepWrapper .orderSteps .bar::after {
z-index: 2;
border-top: 2px solid #DDD;
}
#order-header .orderStepWrapper .orderSteps .bar.step1:after {
width: 75%;
left: 12.5%;
}
#order-header .orderStepWrapper .orderSteps .bar.step2:after {
width: 50%;
left: 37.5%;
}
#order-header .orderStepWrapper .orderSteps .bar.step3:after {
width: 25%;
left: 62.5%;
}
#order-header .orderStepWrapper .orderSteps .bar.step4:after {
display: none;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.simple-paging {
display: flex;
align-items: center;
justify-content: center;
margin: 30px 0;
justify-content: space-between;
}
.simple-paging .spacer {
flex: 1;
}
.simple-paging select {
-webkit-appearance: none;
margin: 0;
padding: 0 20px 0 0;
border: none;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
background: none;
color: inherit;
cursor: pointer;
font-size: inherit;
}
.simple-paging select:hover {
color: inherit;
}
.simple-paging select option {
color: initial;
}
.simple-paging .select-wrapper {
display: inline-flex;
align-items: center;
position: relative;
}
.simple-paging .select-wrapper .peppered-icon {
position: absolute;
right: 4px;
pointer-events: none;
margin-top: 1px;
}
.simple-paging span {
margin: 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: none;
color: inherit;
font-size: inherit;
}
.simple-paging form {
margin: 0 30px;
}
@media (max-width: 480px) {
.simple-paging .btn.prev {
display: none;
}
}
.simple-paging .btn.btn-default {
min-width: auto;
margin: 0;
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-transform: uppercase;
background: #EBECEC;
color: #ee1b2e;
}
.simple-paging .btn.btn-default:hover {
border: none;
background: #D11021;
color: #FFF;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@keyframes banner-fade-slide-in-from-bottom {
0% {
transform: translateY(30vh);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes banner-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
[data-popup-banner-name] {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
overflow: auto;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
animation: 0.2s ease-in-out forwards banner-fade-in;
padding: 30px;
}
[data-popup-banner-name].loading .banner > *:not(.spinner):not(.close-button) {
display: none !important;
}
[data-popup-banner-name] .banner {
position: relative;
z-index: 0;
padding: 0;
background: #3469CB;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #FFF;
box-shadow: none;
transform: scale(0);
animation: 0.2s ease-in-out forwards modal-slide-in;
animation-delay: 0.15s;
width: 600px;
max-width: calc(100% - 60px);
}
@media (max-width: 600px) {
[data-popup-banner-name] .banner {
max-width: 100%;
position: fixed;
right: 0;
bottom: 0;
left: 0;
animation-name: banner-fade-slide-in-from-bottom;
animation-duration: 0.3s;
}
}
[data-popup-banner-name] .banner .desc {
padding: 30px;
}
[data-popup-banner-name] .banner .footer {
padding: 0 30px 30px 30px;
}
[data-popup-banner-name] .banner h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: #FFF;
font-size: var(--fs-huge-title);
}
[data-popup-banner-name] .banner h2 a,
[data-popup-banner-name] .banner h2 a:link,
[data-popup-banner-name] .banner h2 a:visited,
[data-popup-banner-name] .banner h2 a:hover,
[data-popup-banner-name] .banner h2 a:active {
text-decoration: none;
color: inherit;
}
[data-popup-banner-name] .banner .subtitle {
margin: 5px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: #FFF;
font-size: var(--fs-medium-title);
}
[data-popup-banner-name] .banner .subtitle p {
margin: 0;
}
[data-popup-banner-name] .banner .btn {
padding: 12px 15px;
border: none;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
font-size: var(--fs-normal);
}
[data-popup-banner-name] .banner .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
[data-popup-banner-name] button.close-button {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
position: absolute;
top: -15px;
right: -15px;
z-index: 2;
margin: 0;
padding: 0;
border: none;
border-radius: 100%;
background: #FFF;
color: #000;
opacity: 0.8;
cursor: pointer;
will-change: opacity;
transition: all 0.2s ease-in-out;
}
@media (max-width: 600px) {
[data-popup-banner-name] button.close-button {
top: 0;
right: 0;
background: transparent;
color: #FFF;
}
}
[data-popup-banner-name] button.close-button:hover {
transition: all 0.1s ease-in-out;
opacity: 1;
}
[data-popup-banner-name] button.close-button > * {
pointer-events: none;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
[id^=popover-prices].popover {
z-index: 999999;
margin: 15px 0 0 0;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.67;
text-transform: none;
background: #1A242F;
color: #FFF;
font-size: var(--fs-small);
}
[id^=popover-prices].popover[aria-expanded=true] {
display: block;
}
[id^=popover-prices].popover[aria-expanded=false] {
display: none;
}
[id^=popover-prices].popover .popover-content {
padding: 10px 15px;
}
[id^=popover-prices].popover .arrow {
border-top-color: #1A242F;
}
[id^=popover-prices].popover .arrow:after {
border-bottom-color: #1A242F;
}
[id^=popover-prices].popover table {
margin: 0;
}
[id^=popover-prices].popover table .tickettype {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1.67;
text-transform: none;
font-size: var(--fs-small);
}
[id^=popover-prices].popover table .price {
padding-left: 20px;
color: #F3A52A;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.slider-root {
position: relative;
}
.slider-root .slider-nav {
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
margin-left: 0;
pointer-events: none;
}
.slider-root .slider-nav .slick-arrow {
position: absolute;
}
.slider-root .slider-nav .slick-arrow.prevBtn {
left: 0;
}
.slider-root .slider-nav .slick-arrow.nextBtn {
right: 0;
}
.slider-root .slider-nav button {
display: flex;
padding: 30px 10px;
border: 0;
font-size: 50px;
background: none;
color: #999;
transition: color 0.2s ease-in-out;
overflow: hidden;
pointer-events: initial;
}
.slider-root .slider-nav button:hover {
color: #000;
transition: 0.2s color;
}
.slider-root .slider-nav button i {
margin: auto;
font-size: 50px;
color: #FFF;
}
.slider-root .slider-nav button i:hover {
color: #FFF;
}
.slider-root .slider-nav button.with-bg {
width: 50px;
height: 50px;
z-index: 1;
padding: 0;
border-radius: 50%;
background: #3469CB;
}
.slider-root .slider-nav button.with-bg:hover {
background: rgb(43.68, 88.2, 170.52);
}
.slider-root .slider-nav button.with-bg i {
margin: auto;
font-size: 22px;
color: #FFF;
}
.slider-root .slider-nav button.with-bg i:hover {
color: #FFF;
}
@media screen and (min-width: 769px) {
.slider-root .slider-nav button.with-bg.prevBtn {
margin-left: -10px;
}
.slider-root .slider-nav button.with-bg.nextBtn {
margin-right: -10px;
}
}
.slider-root .slider-nav button.slick-disabled {
opacity: 0.2;
}
.slider-root .slider-nav button.with-bg.slick-disabled {
opacity: 1;
background: #F6F6F6;
cursor: default;
}
#reviews button {
display: flex;
padding: 30px 10px;
border: 0;
font-size: 50px;
background: none;
color: #999;
transition: color 0.2s ease-in-out;
overflow: hidden;
pointer-events: initial;
}
#reviews button:hover {
color: #000;
transition: 0.2s color;
}
#reviews button i {
margin: auto;
font-size: 50px;
color: #FFF;
}
#reviews button i:hover {
color: #FFF;
}
#reviews button.with-bg {
width: 50px;
height: 50px;
z-index: 1;
padding: 0;
border-radius: 50%;
background: #3469CB;
}
#reviews button.with-bg:hover {
background: rgb(43.68, 88.2, 170.52);
}
#reviews button.with-bg i {
margin: auto;
font-size: 22px;
color: #FFF;
}
#reviews button.with-bg i:hover {
color: #FFF;
}
@media screen and (min-width: 769px) {
#reviews button.with-bg.prevBtn {
margin-left: -10px;
}
#reviews button.with-bg.nextBtn {
margin-right: -10px;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Slick slider: http://kenwheeler.github.io/slick/;
These are some default styles and I'm not even 100% why they exist...
just keeping them safe here for now.
-----------------------------------------------------------------*/
/* Slider */
.slick-loading .slick-list {
background: #FFF url("/platform/images/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
font-weight: normal;
font-style: normal;
src: url("./fonts/slick.eot");
src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
}
/* Arrows */
.slick-prev,
.slick-next {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
padding: 0;
border: none;
font-size: 0;
line-height: 0;
background: transparent;
color: transparent;
transform: translate(0, -50%);
cursor: pointer;
outline: none;
}
.slick-prev:hover,
.slick-next:hover {
background: transparent;
color: transparent;
outline: none;
}
.slick-prev:hover:before,
.slick-next:hover:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
font-family: sans-serif;
font-size: 20px;
line-height: 1;
opacity: 0.75;
color: #FFF;
}
.slick-prev {
left: -25px;
}
[dir=rtl] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before {
content: "←";
}
[dir=rtl] .slick-prev:before {
content: "→";
}
.slick-next {
right: -25px;
}
[dir=rtl] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before {
content: "→";
}
[dir=rtl] .slick-next:before {
content: "←";
}
#SA {
position: fixed;
top: 2px;
right: 2px;
z-index: 999999;
padding: 20px;
border-radius: 3px;
font-family: sans-serif;
font-size: 11px;
line-height: 1.4545;
background: #000;
color: #B4B4B4;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
}
#SA.env-dev {
background: #541719;
color: #E4E4E4;
}
#SA.closed {
padding: 0;
}
#SA.closed .inner {
display: none;
}
#SA:not(.closed) {
width: 242px;
}
#SA:not(.closed) #SA-tiny-mode {
display: none;
}
#SA p,
#SA h1,
#SA h2,
#SA h3,
#SA h4,
#SA h5 {
all: unset;
display: block;
font-family: inherit;
}
#SA p + p,
#SA h1 + p,
#SA h2 + p,
#SA h3 + p,
#SA h4 + p,
#SA h5 + p {
margin-top: 1em;
}
#SA a,
#SA a:link,
#SA a:visited {
all: unset;
cursor: pointer;
display: inline-block;
font-weight: normal;
text-decoration: underline;
color: rgb(253, 68, 74);
}
#SA a.icon,
#SA a:link.icon,
#SA a:visited.icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
font-size: 16px;
line-height: 1;
text-align: center;
text-decoration: none;
color: rgb(253, 68, 74);
}
#SA a:hover {
color: #BD3338;
}
#SA a:hover.icon {
text-decoration: none;
background: rgba(255, 255, 255, 0.3);
}
#SA p a.icon {
display: inline-flex;
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
}
#SA p a.icon.sa-close {
right: 30px;
}
#SA .button.icon {
margin: 0;
padding: 4px;
}
#SA .sa_logo {
float: left;
position: relative;
top: 2px;
}
#SA section {
margin: 15px 0;
}
#SA section:last-child {
margin-bottom: 0;
}
#SA section:last-child p:last-child {
margin-bottom: 0;
}
#SA form {
margin: 5px 0;
}
#SA input,
#SA select {
box-sizing: border-box;
height: 20px;
margin: 0 0 0.2ex 0;
padding: 0 1ex;
border: 1px solid #999;
font-weight: normal;
line-height: 20px;
background: #222;
color: #E4E4E4;
}
#SA.env-dev input, #SA.env-dev select {
background: #421213;
}
#SA select {
width: 100%;
}
#SA h3 {
margin: 0 0 0.2em 0;
padding: 0;
font-size: 13px;
line-height: 1;
color: #999;
}
#SA h3 + p {
margin-top: 0.6em;
}
#SA p {
margin: 1em 0;
padding: 0;
}
#SA p:first-child {
margin-top: 0;
}
#SA .compact {
font-size: 9px;
line-height: 1.2;
}
#SA .compact p {
margin: 5px 0;
}
#SA .compact p:first-child {
margin-top: 0;
}
#SA a.button,
#SA a.button:link,
#SA a.button:visited,
#SA button {
all: unset;
display: inline-flex;
cursor: pointer;
-webkit-appearance: none;
padding: 0.5ex 1ex;
border: none;
text-decoration: none;
background: rgb(253, 68, 74);
color: #FFF;
}
#SA a.button:hover,
#SA a.button:link:hover,
#SA a.button:visited:hover,
#SA button:hover {
text-decoration: none;
background: #BD3338;
}
#SA a.button svg,
#SA a.button:link svg,
#SA a.button:visited svg,
#SA button svg {
float: left;
margin-top: 2px;
margin-right: 4px;
}
[id^=sa-]:target {
display: block;
position: relative;
z-index: 9999;
outline: 10px solid rgb(253, 68, 74);
}
#image-crop-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999999;
overflow: auto;
font-family: sans-serif;
text-align: center;
line-height: 1;
background: rgba(0, 0, 0, 0.75);
color: #FFF;
}
#image-crop-overlay > div {
padding: 120px 60px;
}
#image-crop-overlay h2 {
font-family: inherit;
color: inherit;
}
#image-crop-overlay a,
#image-crop-overlay a:link,
#image-crop-overlay a:hover,
#image-crop-overlay a:active {
position: relative;
font-family: inherit;
font-size: 9px;
color: inherit;
}
#image-crop-overlay a span,
#image-crop-overlay a:link span,
#image-crop-overlay a:hover span,
#image-crop-overlay a:active span {
position: absolute;
right: 6px;
bottom: 0;
padding: 2px;
background: rgba(0, 0, 0, 0.2);
}
#image-crop-overlay img {
max-width: 200px;
max-height: 200px;
margin: 6px;
border: 2px solid transparent;
}
#image-crop-overlay img:hover {
border-color: #FFF;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.subshows {
clear: both;
background: inherit;
overflow: hidden;
}
@media (min-width: 601px) {
.subshows {
padding: 0 30px;
}
}
@media (max-width: 600px) {
.subshows {
padding: 0;
}
}
.subshows ul {
margin: 0;
box-shadow: none;
}
.subshows [data-only-own-locations=true] .subshow.in-other-location {
display: none;
}
.subshows .location-group-toggle-wrapper label {
margin: 0;
padding: 0;
font-weight: normal;
font-size: var(--fs-tiny);
}
.subshows .location-group-toggle-wrapper label input {
margin: 0 1ex 0 0;
}
.subshows .subshow.row {
margin-right: 0;
margin-left: 0;
}
.subshows .subshow {
list-style: none;
margin: 0;
padding: 20px;
border-top: 1px solid #D4D4D4;
border-right: none;
border-bottom: none;
border-left: none;
line-height: 1;
background: #F6F6F6;
color: inherit;
}
.subshows .subshow[aria-expanded=false] {
display: none;
}
@media (min-width: 768px) {
.subshows .subshow {
display: flex;
align-items: center;
justify-content: space-between;
}
.subshows .subshow > * + * {
margin-left: 30px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.subshows .subshow {
align-items: flex-end;
}
}
.subshows .subshow:first-child {
border-radius: 0 0 0 0;
}
.subshows .subshow:last-child {
margin-bottom: 0;
border-radius: 0 0 0px 0px;
}
.subshows .subshow .btnAddWishList {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 15px;
padding-right: 0;
padding-left: 0;
}
.subshows .subshow form {
margin: 0;
padding: 0;
}
.subshows .subshow .dateTime {
display: block;
padding: 0;
background: none;
color: inherit;
}
@media (min-width: 992px) {
.subshows .subshow .dateTime {
min-width: 185px;
}
}
.subshows .subshow .dateTime .date {
width: auto;
margin: 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
text-transform: none;
color: inherit;
white-space: nowrap;
font-size: var(--fs-normal);
}
.subshows .subshow .dateTime .date > * {
display: inline;
}
.subshows .subshow .dateTime .time,
.subshows .subshow .dateTime .intermission {
margin: 5px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.subshows .subshow .dateTime dl.intermission {
display: grid;
grid-column-gap: 1em;
grid-template-columns: max-content auto;
}
.subshows .subshow .dateTime dl.intermission dt {
white-space: nowrap;
}
.subshows .subshow .dateTime dl.intermission dt,
.subshows .subshow .dateTime dl.intermission dd {
margin: 0;
font-weight: inherit;
line-height: inherit;
}
@media (max-width: 991px) {
.subshows .subshow .dateTime + div {
margin-top: 15px;
}
}
.subshows .subshow .box {
flex-grow: 1;
}
@media (min-width: 992px) {
.subshows .subshow .box {
display: flex;
}
.subshows .subshow .box > * + * {
margin-left: 30px;
}
}
@media (max-width: 991px) {
.subshows .subshow .box + div {
margin-top: 15px;
}
}
.subshows .subshow .buttonBox {
flex-shrink: 0;
text-align: right;
}
.subshows .subshow .priceBox {
display: flex;
align-items: center;
}
.subshows .subshow .priceBox .favourite {
display: inline-block;
margin-right: 30px;
}
@media (max-width: 767px) {
.subshows .subshow .priceBox {
justify-content: space-between;
}
}
.subshows .subshow .btn {
display: inline-block;
width: auto;
min-width: 128px;
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-size: var(--fs-normal);
}
@media (max-width: 767px) {
.subshows .subshow .btn {
display: block;
width: 100%;
}
}
.subshows .subshow .btn .fa {
margin: 0 0 0 1px;
font-size: inherit;
}
.subshows .subshow .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.subshows .subshow .btn .property {
margin-left: 0.5ex;
}
.subshows .subshow .status-info {
display: block;
width: 128px;
padding: 12px 15px;
font-family: inherit;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
color: inherit;
font-size: var(--fs-normal);
}
@media (max-width: 767px) {
.subshows .subshow .status-info {
width: 100%;
}
}
.subshows .subshow .status-info:link {
text-decoration: none;
color: inherit;
}
.subshows .subshow .status-info:link:hover {
text-decoration: none;
color: #000;
}
.subshows .subshow .pricePopoverBtn {
padding: 12px 15px;
padding-right: 0;
padding-left: 0;
border: none;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: none;
white-space: nowrap;
background: #FFF;
color: inherit;
font-size: var(--fs-normal);
}
.subshows .subshow .pricePopoverBtn:hover {
color: #3469CB;
}
.subshows .subshow .error .fa {
margin-right: 5px;
}
.subshows .subshow .supertitle {
display: inline-block;
margin: 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
background: none;
color: #ee1b2e;
font-size: var(--fs-small);
}
.subshows .subshow.cost-message {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: inherit;
font-size: inherit;
}
.subshows .subshow.cost-message > * {
margin: 0;
}
.subshows .subshow.cost-message a {
text-decoration: underline;
color: #000;
}
.subshows .subshow.cost-message a:hover {
text-decoration: none;
color: #000;
}
.subshows .load-more-panel,
.listItems > li .subshows .load-more-panel {
margin: 0;
padding: 20px;
border-top: 1px solid #D4D4D4;
border-right: none;
border-bottom: none;
border-left: none;
line-height: 1;
background: #F6F6F6;
color: inherit;
}
@media only screen and (min-width: 992px) {
.subshows .load-more-panel,
.listItems > li .subshows .load-more-panel {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
.subshows .load-more-panel .btn.btn-default,
.listItems > li .subshows .load-more-panel .btn.btn-default {
display: inline-block;
width: auto;
min-width: 128px;
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-size: var(--fs-normal);
display: block;
width: 100%;
}
@media (max-width: 767px) {
.subshows .load-more-panel .btn.btn-default,
.listItems > li .subshows .load-more-panel .btn.btn-default {
display: block;
width: 100%;
}
}
.subshows .load-more-panel .btn.btn-default .fa,
.listItems > li .subshows .load-more-panel .btn.btn-default .fa {
margin: 0 0 0 1px;
font-size: inherit;
}
.subshows .load-more-panel .btn.btn-default:hover,
.listItems > li .subshows .load-more-panel .btn.btn-default:hover {
border: none;
background: #D11021;
color: #FFF;
}
.subshows .load-more-panel .btn.btn-default .property,
.listItems > li .subshows .load-more-panel .btn.btn-default .property {
margin-left: 0.5ex;
}
@media only screen and (min-width: 992px) {
.subshows .load-more-panel .btn.btn-default,
.listItems > li .subshows .load-more-panel .btn.btn-default {
display: inline-block;
width: auto;
}
}
.subshows .subshow.movie {
display: flex;
justify-content: flex-start;
padding: 30px 0 20px 0;
}
.subshows .subshow.movie > * {
margin: 0 15px 0 15px;
}
@media (min-width: 768px) {
.subshows .subshow.movie > *:first-child {
width: 16.6666666667%;
}
}
.subshows .subshow.movie .subshow-column > * {
display: inline-block;
}
.subshows .subshow.movie form {
margin-bottom: 0;
}
.subshows .subshow.movie .btn,
.subshows .subshow.movie .status-info {
display: inline-block;
width: auto;
min-width: 128px;
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-size: var(--fs-normal);
width: auto;
min-width: 80px;
margin: 0 15px 10px 0;
}
@media (max-width: 767px) {
.subshows .subshow.movie .btn,
.subshows .subshow.movie .status-info {
display: block;
width: 100%;
}
}
.subshows .subshow.movie .btn .fa,
.subshows .subshow.movie .status-info .fa {
margin: 0 0 0 1px;
font-size: inherit;
}
.subshows .subshow.movie .btn:hover,
.subshows .subshow.movie .status-info:hover {
border: none;
background: #D11021;
color: #FFF;
}
.subshows .subshow.movie .btn .property,
.subshows .subshow.movie .status-info .property {
margin-left: 0.5ex;
}
.subshows .subshow.movie .btn span.property,
.subshows .subshow.movie .status-info span.property {
display: inline-block;
position: relative;
top: 0;
margin: 0 0 0 1ex;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: uppercase;
background: transparent;
color: inherit;
font-size: var(--fs-tiny);
}
.subshows .subshow.movie .btn.btn-unavailable,
.subshows .subshow.movie .status-info {
border: none !important;
background: #F6F6F6 !important;
color: #D8D8D8 !important;
}
@media (min-width: 601px) {
.pullout {
padding: 0 30px;
}
}
.pullout .msg {
margin-top: 0;
}
.pullout .firstPriceIndicator {
display: inline-block;
width: auto;
min-height: 20px;
max-height: 20px;
position: relative;
margin-right: 15px;
padding: 1px 12px 2px 8px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
background: #3469CB;
color: #FFF;
white-space: nowrap;
font-size: var(--fs-small);
}
@media (max-width: 480px) {
.pullout .firstPriceIndicator {
display: none;
}
}
.pullout .firstPriceIndicator::after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 100%;
margin-top: -10px;
border: 10px solid transparent;
border-left-color: #3469CB;
pointer-events: none;
}
.pullout .pulloutContent {
height: auto;
margin-bottom: 15px;
padding: 30px;
border-radius: 0 0 0px 0px;
background: #FFF;
color: inherit;
box-shadow: none;
}
.pullout .pulloutContent .btn {
display: inline-block;
width: auto;
margin-left: 20px;
flex-shrink: 0;
border: none;
background: #ee1b2e;
color: #FFF;
}
.pullout .pulloutContent .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.pullout .pulloutContent .btn.btn-default {
border: none;
background: #EBECEC;
color: #ee1b2e;
}
.pullout .pulloutContent .btn.btn-default:hover {
border: none;
background: #D11021;
color: #FFF;
}
.pullout .pulloutContent .btn.btn-default[name=rebook] {
border: none;
background: #EBECEC;
color: #ee1b2e;
}
.pullout .pulloutContent .btn.btn-default[name=rebook]:hover {
border: none;
background: #D11021;
color: #FFF;
}
.pullout .pulloutContent .footer {
text-align: right;
}
@media (max-width: 600px) {
.pullout .pulloutContent .footer .btn {
width: 100%;
min-width: 0;
margin: 0;
}
.pullout .pulloutContent .footer .btn + .btn {
margin-top: 15px;
}
}
.pullout .pulloutContent .tickets-wrapper .tickets {
display: flex;
justify-content: space-between;
font-weight: bold;
}
.pullout .pulloutContent .tickets-wrapper .tickets + .seats {
margin-top: 0.67em;
}
.pullout .pulloutContent .tickets-wrapper + .tickets-wrapper {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #DDD;
}
.pullout .pulloutContent.booked .tickets-wrapper {
position: relative;
padding-left: 30px;
}
.pullout .pulloutContent.booked .tickets-wrapper .fa {
position: absolute;
left: 0;
margin-top: 3px;
}
.pullout .pulloutContent .price {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: none;
font-size: var(--fs-normal);
}
.pullout .pulloutContent .amount {
flex-shrink: 0;
text-align: right;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: none;
font-size: var(--fs-normal);
}
.pullout .pulloutContent .amount select {
min-width: 3em;
}
.pullout .pulloutContent .tickets-wrapper + .footer,
.pullout .pulloutContent fieldset + .footer {
margin-top: 30px;
}
.pullout .pulloutContent form {
margin: 0;
}
.pullout .pulloutContent form input,
.pullout .pulloutContent form select {
color: #000;
}
.pullout .pulloutContent form label {
display: inline;
margin: 0;
font-weight: inherit;
}
.pullout .pulloutContent form fieldset {
margin: 0;
}
.pullout .pulloutContent form .ticket-options,
.pullout .pulloutContent form #ticketsForm-extras {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #DDD;
}
.pullout .pulloutContent form .ticket-options .ticketLbl,
.pullout .pulloutContent form #ticketsForm-extras .ticketLbl,
.pullout .pulloutContent form .tickets-extras .ticketLbl {
text-align: right;
}
.pullout .pulloutContent form .ticket-options .checkbox,
.pullout .pulloutContent form #ticketsForm-extras .checkbox,
.pullout .pulloutContent form .tickets-extras .checkbox {
margin: 0;
padding: 0;
}
.pullout .pulloutContent form .ticket-options .checkbox label,
.pullout .pulloutContent form #ticketsForm-extras .checkbox label,
.pullout .pulloutContent form .tickets-extras .checkbox label {
margin: 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: var(--fs-normal);
}
.pullout .pulloutContent form .ticket-options .checkbox label input[type=checkbox],
.pullout .pulloutContent form #ticketsForm-extras .checkbox label input[type=checkbox],
.pullout .pulloutContent form .tickets-extras .checkbox label input[type=checkbox] {
position: static;
margin: 0 1ex 0 0;
line-height: inherit;
}
.pullout .pulloutContent form table {
width: 100%;
margin-bottom: 0;
}
.pullout .pulloutContent form table td {
padding-bottom: 15px;
line-height: normal;
vertical-align: top;
}
.pullout .pulloutContent form table td:not(:last-child) {
padding-right: 15px;
}
@media (max-width: 767px) {
.pullout .pulloutContent form table td:not(:last-child) {
padding-right: 10px;
}
}
.pullout .pulloutContent form table tr:last-child td {
padding-bottom: 0;
}
.pullout .pulloutContent form table .price-row + .rank-title {
border-top: 1px solid #DDD;
}
.pullout .pulloutContent form table .price-row + .rank-title > * {
padding-top: 15px;
}
@media (max-width: 767px) {
.pullout .pulloutContent form table .price-row td.rank {
display: none;
}
}
@media (min-width: 768px) {
.pullout .pulloutContent form table .rank-title {
display: none;
}
.pullout .pulloutContent form table .rank-title:not(:first-child) + .price-row {
border-top: 1px solid #DDD;
}
.pullout .pulloutContent form table .rank-title:not(:first-child) + .price-row > * {
padding-top: 15px;
}
}
.pullout .pulloutContent form table tr.disabled .ticketLbl label,
.pullout .pulloutContent form table tr.disabled .price {
text-decoration: line-through;
color: #F6F6F6;
}
.pullout .pulloutContent form table td.rank,
.pullout .pulloutContent form table td.ticketLbl label {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: var(--fs-normal);
}
.pullout .pulloutContent form table td.ticketLbl {
width: 100%;
}
.pullout .pulloutContent form table td.rank {
font-weight: bold;
white-space: nowrap;
}
.pullout .pulloutContent form table .img {
width: 25%;
text-align: left;
}
.pullout .pulloutContent form table .img img {
width: 223px;
max-width: 223px;
margin-top: -30px;
margin-left: -75px;
}
.pullout .pulloutContent form table td.soldout,
.pullout .pulloutContent form table .price {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: none;
white-space: nowrap;
text-align: right;
font-size: var(--fs-normal);
}
.pullout .pulloutContent form table .price {
position: relative;
padding-left: 30px;
}
.pullout .pulloutContent form table .price .fa {
position: absolute;
left: 0;
}
.pullout .pulloutContent form table td.soldout {
text-align: right;
}
.pullout .pulloutContent form table .combo-list {
list-style: none;
display: block;
position: relative;
margin: 0;
padding: 2px 0 0 0;
font-style: italic;
color: #333;
font-size: var(--fs-small);
}
.pullout .pulloutContent form table .combo-list > * {
display: flex;
align-items: flex-start;
}
.pullout .pulloutContent form table .combo-list > * i {
margin-top: 2px;
margin-right: 10px;
}
.pullout .pulloutContent form table .combo-list > * p {
margin: 0;
}
.pullout .pulloutContent form table .descExtra {
margin: 0;
padding-bottom: 30px;
}
.pullout .pulloutContent form table .descExtra h3 {
margin-bottom: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 0.89;
text-transform: none;
font-size: var(--fs-large-subtitle);
}
.pullout .pulloutContent form table .descExtra .desc {
height: auto;
max-height: none;
margin: 5px 0 20px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.14;
text-transform: none;
font-size: var(--fs-small);
}
.pullout .pulloutContent form table .descExtra .desc a {
float: none;
margin: 0;
line-height: 1.14;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.modal:not(.glightbox).modal--waitlist .modal-content {
max-height: 80vh;
}
.waitinglist-add__date {
margin: 0;
}
.waitinglist-add__title {
font-weight: bold;
font-size: var(--fs-small-title);
}
.waitinglist-add__form-section {
padding: 6.6666666667px;
background-color: #EEE;
}
@media (min-width: 768px) {
.waitinglist-add__form-section {
padding: 10px;
}
}
.waitinglist-add__form-section .form-group {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
}
.waitinglist-add__form-section .form-group label {
margin: 0;
}
.waitinglist-add__form-section .form-group .form-control {
max-width: 60px;
}
@media (min-width: 768px) {
.waitinglist-add__form-section .form-group .form-control {
max-width: 75px;
}
}
.waitinglist-add__price-tier {
font-size: var(--fs-small);
}
.waitinglist-add__price-tier + * {
padding-top: 10px;
}
.waitinglist-add__price-tier p {
margin: 0;
font-weight: bold;
}
.waitinglist-add__price-tier > :not(p) + * {
padding-top: 6.6666666667px;
}
.waitinglist-add__price-tier .form-group label {
margin: 0;
font-weight: normal;
}
.waitinglist-add__price-tier .form-group .price {
margin-right: 10px;
margin-left: auto;
}
.waitinglist-add__submit {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.mt #content .mtLoginformWrapper hr,
.order #content #paymentForm hr,
.order #content .discountWrapper hr,
.mtEditformWrapper hr,
.formWrapper hr {
border-color: #DDD;
}
.mt #content .mtLoginformWrapper h1,
.mt #content .mtLoginformWrapper h2,
.order #content #paymentForm h1,
.order #content #paymentForm h2,
.order #content .discountWrapper h1,
.order #content .discountWrapper h2,
.mtEditformWrapper h1,
.mtEditformWrapper h2,
.formWrapper h1,
.formWrapper h2 {
margin-bottom: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
font-size: var(--fs-large-title);
}
.mt #content .mtLoginformWrapper h2,
.order #content #paymentForm h2,
.order #content .discountWrapper h2,
.mtEditformWrapper h2,
.formWrapper h2 {
padding-top: 30px;
border-top: 1px solid #FAFAFA;
}
.mt #content .mtLoginformWrapper fieldset:not(.radio),
.order #content #paymentForm fieldset:not(.radio),
.order #content .discountWrapper fieldset:not(.radio),
.mtEditformWrapper fieldset:not(.radio),
.formWrapper fieldset:not(.radio) {
margin: 0 0 30px 0;
}
.mt #content .mtLoginformWrapper legend,
.order #content #paymentForm legend,
.order #content .discountWrapper legend,
.mtEditformWrapper legend,
.formWrapper legend {
margin-top: 30px;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #333;
font-size: var(--fs-small-title);
}
.mt #content .mtLoginformWrapper label,
.order #content #paymentForm label,
.order #content .discountWrapper label,
.mtEditformWrapper label,
.formWrapper label {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.31;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.mt #content .mtLoginformWrapper label .desc,
.order #content #paymentForm label .desc,
.order #content .discountWrapper label .desc,
.mtEditformWrapper label .desc,
.formWrapper label .desc {
margin: 0 0 5px 0;
}
.mt #content .mtLoginformWrapper label.required::after,
.order #content #paymentForm label.required::after,
.order #content .discountWrapper label.required::after,
.mtEditformWrapper label.required::after,
.formWrapper label.required::after {
content: "*";
}
.mt #content .mtLoginformWrapper .form-group,
.order #content #paymentForm .form-group,
.order #content .discountWrapper .form-group,
.mtEditformWrapper .form-group,
.formWrapper .form-group {
clear: both;
}
.mt #content .mtLoginformWrapper .double-group,
.order #content #paymentForm .double-group,
.order #content .discountWrapper .double-group,
.mtEditformWrapper .double-group,
.formWrapper .double-group {
display: flex;
align-items: baseline;
}
.mt #content .mtLoginformWrapper .double-group > *,
.order #content #paymentForm .double-group > *,
.order #content .discountWrapper .double-group > *,
.mtEditformWrapper .double-group > *,
.formWrapper .double-group > * {
flex: 1;
}
.mt #content .mtLoginformWrapper .double-group > *:not(.hidden) + *,
.order #content #paymentForm .double-group > *:not(.hidden) + *,
.order #content .discountWrapper .double-group > *:not(.hidden) + *,
.mtEditformWrapper .double-group > *:not(.hidden) + *,
.formWrapper .double-group > *:not(.hidden) + * {
margin-left: 15px;
}
.mt #content .mtLoginformWrapper .double-group.surname :last-child,
.order #content #paymentForm .double-group.surname :last-child,
.order #content .discountWrapper .double-group.surname :last-child,
.mtEditformWrapper .double-group.surname :last-child,
.formWrapper .double-group.surname :last-child {
flex: 2;
}
.mt #content .mtLoginformWrapper .double-group [name=huisnummer],
.order #content #paymentForm .double-group [name=huisnummer],
.order #content .discountWrapper .double-group [name=huisnummer],
.mtEditformWrapper .double-group [name=huisnummer],
.formWrapper .double-group [name=huisnummer] {
display: inline-block;
width: 50%;
}
.mt #content .mtLoginformWrapper .double-group [name=toevoeging],
.order #content #paymentForm .double-group [name=toevoeging],
.order #content .discountWrapper .double-group [name=toevoeging],
.mtEditformWrapper .double-group [name=toevoeging],
.formWrapper .double-group [name=toevoeging] {
display: inline-block;
width: calc(50% - 15px);
margin-left: 15px;
}
.mt #content .mtLoginformWrapper input[type=file]:focus,
.mt #content .mtLoginformWrapper input[type=checkbox]:focus,
.mt #content .mtLoginformWrapper input[type=radio]:focus,
.mt #content .mtLoginformWrapper .form-control:focus,
.order #content #paymentForm input[type=file]:focus,
.order #content #paymentForm input[type=checkbox]:focus,
.order #content #paymentForm input[type=radio]:focus,
.order #content #paymentForm .form-control:focus,
.order #content .discountWrapper input[type=file]:focus,
.order #content .discountWrapper input[type=checkbox]:focus,
.order #content .discountWrapper input[type=radio]:focus,
.order #content .discountWrapper .form-control:focus,
.mtEditformWrapper input[type=file]:focus,
.mtEditformWrapper input[type=checkbox]:focus,
.mtEditformWrapper input[type=radio]:focus,
.mtEditformWrapper .form-control:focus,
.formWrapper input[type=file]:focus,
.formWrapper input[type=checkbox]:focus,
.formWrapper input[type=radio]:focus,
.formWrapper .form-control:focus {
outline: revert;
outline-offset: revert;
}
.mt #content .mtLoginformWrapper .form-control,
.mt #content .mtLoginformWrapper input:not([type=checkbox]):not([type=radio]),
.mt #content .mtLoginformWrapper .ts-wrapper.form-control .ts-control,
.order #content #paymentForm .form-control,
.order #content #paymentForm input:not([type=checkbox]):not([type=radio]),
.order #content #paymentForm .ts-wrapper.form-control .ts-control,
.order #content .discountWrapper .form-control,
.order #content .discountWrapper input:not([type=checkbox]):not([type=radio]),
.order #content .discountWrapper .ts-wrapper.form-control .ts-control,
.mtEditformWrapper .form-control,
.mtEditformWrapper input:not([type=checkbox]):not([type=radio]),
.mtEditformWrapper .ts-wrapper.form-control .ts-control,
.formWrapper .form-control,
.formWrapper input:not([type=checkbox]):not([type=radio]),
.formWrapper .ts-wrapper.form-control .ts-control {
display: block;
width: 100%;
min-height: calc(2rem + 2px);
margin: 0 0 15px 0;
padding: 1px 6px;
border: 1px solid #333;
border-radius: 3px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: italic;
line-height: 2;
text-transform: none;
background: #FFF;
color: #000;
box-shadow: none;
font-size: var(--fs-normal);
}
.mt #content .mtLoginformWrapper .form-control.checked-invalid,
.mt #content .mtLoginformWrapper input:not([type=checkbox]):not([type=radio]).checked-invalid,
.mt #content .mtLoginformWrapper .ts-wrapper.form-control .ts-control.checked-invalid,
.order #content #paymentForm .form-control.checked-invalid,
.order #content #paymentForm input:not([type=checkbox]):not([type=radio]).checked-invalid,
.order #content #paymentForm .ts-wrapper.form-control .ts-control.checked-invalid,
.order #content .discountWrapper .form-control.checked-invalid,
.order #content .discountWrapper input:not([type=checkbox]):not([type=radio]).checked-invalid,
.order #content .discountWrapper .ts-wrapper.form-control .ts-control.checked-invalid,
.mtEditformWrapper .form-control.checked-invalid,
.mtEditformWrapper input:not([type=checkbox]):not([type=radio]).checked-invalid,
.mtEditformWrapper .ts-wrapper.form-control .ts-control.checked-invalid,
.formWrapper .form-control.checked-invalid,
.formWrapper input:not([type=checkbox]):not([type=radio]).checked-invalid,
.formWrapper .ts-wrapper.form-control .ts-control.checked-invalid {
border-color: #ee1b2e;
background: rgb(253.3, 232.2, 234.1);
}
.mt #content .mtLoginformWrapper .ts-wrapper.form-control,
.order #content #paymentForm .ts-wrapper.form-control,
.order #content .discountWrapper .ts-wrapper.form-control,
.mtEditformWrapper .ts-wrapper.form-control,
.formWrapper .ts-wrapper.form-control {
height: auto;
margin: 0;
padding: 0;
border: none;
background: #FFF;
color: #000;
font-size: var(--fs-normal);
}
.mt #content .mtLoginformWrapper .ts-wrapper.form-control .ts-dropdown,
.order #content #paymentForm .ts-wrapper.form-control .ts-dropdown,
.order #content .discountWrapper .ts-wrapper.form-control .ts-dropdown,
.mtEditformWrapper .ts-wrapper.form-control .ts-dropdown,
.formWrapper .ts-wrapper.form-control .ts-dropdown {
margin: 0;
padding: 1px;
border-color: inherit;
}
.mt #content .mtLoginformWrapper p.account-info,
.mt #content .mtLoginformWrapper div.account-info,
.order #content #paymentForm p.account-info,
.order #content #paymentForm div.account-info,
.order #content .discountWrapper p.account-info,
.order #content .discountWrapper div.account-info,
.mtEditformWrapper p.account-info,
.mtEditformWrapper div.account-info,
.formWrapper p.account-info,
.formWrapper div.account-info {
margin: 5px 0 15px 2rem;
font-size: 12px;
}
.mt #content .mtLoginformWrapper p.account-info label,
.mt #content .mtLoginformWrapper div.account-info label,
.order #content #paymentForm p.account-info label,
.order #content #paymentForm div.account-info label,
.order #content .discountWrapper p.account-info label,
.order #content .discountWrapper div.account-info label,
.mtEditformWrapper p.account-info label,
.mtEditformWrapper div.account-info label,
.formWrapper p.account-info label,
.formWrapper div.account-info label {
padding: 0;
font-size: inherit;
}
.mt #content .mtLoginformWrapper p.account-info i,
.mt #content .mtLoginformWrapper div.account-info i,
.order #content #paymentForm p.account-info i,
.order #content #paymentForm div.account-info i,
.order #content .discountWrapper p.account-info i,
.order #content .discountWrapper div.account-info i,
.mtEditformWrapper p.account-info i,
.mtEditformWrapper div.account-info i,
.formWrapper p.account-info i,
.formWrapper div.account-info i {
margin-left: 0.5ex;
}
.mt #content .mtLoginformWrapper .checkbox label,
.mt #content .mtLoginformWrapper .radio label,
.order #content #paymentForm .checkbox label,
.order #content #paymentForm .radio label,
.order #content .discountWrapper .checkbox label,
.order #content .discountWrapper .radio label,
.mtEditformWrapper .checkbox label,
.mtEditformWrapper .radio label,
.formWrapper .checkbox label,
.formWrapper .radio label {
padding-right: 2em;
}
.mt #content .mtLoginformWrapper .checkbox label + label,
.mt #content .mtLoginformWrapper .radio label + label,
.order #content #paymentForm .checkbox label + label,
.order #content #paymentForm .radio label + label,
.order #content .discountWrapper .checkbox label + label,
.order #content .discountWrapper .radio label + label,
.mtEditformWrapper .checkbox label + label,
.mtEditformWrapper .radio label + label,
.formWrapper .checkbox label + label,
.formWrapper .radio label + label {
margin-left: 30px;
}
.mt #content .mtLoginformWrapper .checkbox input[type=radio],
.mt #content .mtLoginformWrapper .radio input[type=radio],
.order #content #paymentForm .checkbox input[type=radio],
.order #content #paymentForm .radio input[type=radio],
.order #content .discountWrapper .checkbox input[type=radio],
.order #content .discountWrapper .radio input[type=radio],
.mtEditformWrapper .checkbox input[type=radio],
.mtEditformWrapper .radio input[type=radio],
.formWrapper .checkbox input[type=radio],
.formWrapper .radio input[type=radio] {
margin-left: 0;
}
.mt #content .mtLoginformWrapper .checkbox label > input[type=radio],
.mt #content .mtLoginformWrapper .radio label > input[type=radio],
.order #content #paymentForm .checkbox label > input[type=radio],
.order #content #paymentForm .radio label > input[type=radio],
.order #content .discountWrapper .checkbox label > input[type=radio],
.order #content .discountWrapper .radio label > input[type=radio],
.mtEditformWrapper .checkbox label > input[type=radio],
.mtEditformWrapper .radio label > input[type=radio],
.formWrapper .checkbox label > input[type=radio],
.formWrapper .radio label > input[type=radio] {
margin-left: -1.5em;
}
.mt #content .mtLoginformWrapper #sendoptions .radio + .radio,
.order #content #paymentForm #sendoptions .radio + .radio,
.order #content .discountWrapper #sendoptions .radio + .radio,
.mtEditformWrapper #sendoptions .radio + .radio,
.formWrapper #sendoptions .radio + .radio {
margin-top: 10px;
}
.mt #content .mtLoginformWrapper .btn:not(.btn-order),
.order #content #paymentForm .btn:not(.btn-order),
.order #content .discountWrapper .btn:not(.btn-order),
.mtEditformWrapper .btn:not(.btn-order),
.formWrapper .btn:not(.btn-order) {
width: auto;
margin-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
border: none;
}
.mt #content .mtLoginformWrapper .btn:not(.btn-order):hover,
.order #content #paymentForm .btn:not(.btn-order):hover,
.order #content .discountWrapper .btn:not(.btn-order):hover,
.mtEditformWrapper .btn:not(.btn-order):hover,
.formWrapper .btn:not(.btn-order):hover {
border: none;
}
.mt #content .mtLoginformWrapper .btn-wrapper,
.order #content #paymentForm .btn-wrapper,
.order #content .discountWrapper .btn-wrapper,
.mtEditformWrapper .btn-wrapper,
.formWrapper .btn-wrapper {
text-align: right;
}
@keyframes message-slide-in {
0% {
opacity: 0;
margin-top: -1em;
}
50% {
opacity: 0;
margin-top: -0.5em;
}
100% {
opacity: 1;
margin-top: 0;
}
}
.mt #content .mtLoginformWrapper .validationMsg,
.order #content #paymentForm .validationMsg,
.order #content .discountWrapper .validationMsg,
.mtEditformWrapper .validationMsg,
.formWrapper .validationMsg {
display: none;
padding-top: 5px;
text-align: right;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
text-transform: none;
color: #ee1b2e;
animation: message-slide-in 0.2s ease-in-out;
font-size: var(--fs-small);
}
.mt #content .mtLoginformWrapper fieldset.checked-invalid > .validationMsg,
.mt #content .mtLoginformWrapper .checked-invalid ~ .validationMsg,
.order #content #paymentForm fieldset.checked-invalid > .validationMsg,
.order #content #paymentForm .checked-invalid ~ .validationMsg,
.order #content .discountWrapper fieldset.checked-invalid > .validationMsg,
.order #content .discountWrapper .checked-invalid ~ .validationMsg,
.mtEditformWrapper fieldset.checked-invalid > .validationMsg,
.mtEditformWrapper .checked-invalid ~ .validationMsg,
.formWrapper fieldset.checked-invalid > .validationMsg,
.formWrapper .checked-invalid ~ .validationMsg {
display: block;
}
.formWrapper h2 {
margin: 60px 0 0 0;
padding: 0 0 30px 0;
border-top: none;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
font-size: var(--fs-large-title);
}
/* ----------------------------------------------------------------
Edit form
-----------------------------------------------------------------*/
.mtEditformWrapper .container {
padding: 60px 15px;
}
@media (min-width: 769px) {
.mtEditformWrapper .container form > .form {
display: flex;
}
.mtEditformWrapper .container form > .form > * {
flex: 1;
}
.mtEditformWrapper .container form > .form > * + * {
margin-left: 60px;
}
}
.mtEditformWrapper .mandatory-fields-error {
display: inline-block;
}
@media (min-width: 769px) {
.mtEditformWrapper .mandatory-fields-error {
max-width: calc(50% - 30px);
}
}
.mtEditformWrapper .mandatory-fields-error p {
display: block;
margin: 0 0 15px 0;
}
.mtEditformWrapper .mandatory-fields-error ul {
list-style: none;
margin: 0;
color: #ee1b2e;
}
.mtEditformWrapper .mandatory-fields-error li {
display: inline;
}
.mtEditformWrapper .mandatory-fields-error li:not(:last-child)::after {
content: ", ";
}
.mtEditformWrapper h2,
.mtEditformWrapper legend {
margin-bottom: 30px;
padding-top: 30px;
border-top: 1px solid #FAFAFA;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
font-size: var(--fs-large-title);
}
.mtEditformWrapper #passwordForm legend {
margin-bottom: 30px;
padding-top: 30px;
border-top: 1px solid #FAFAFA;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
font-size: var(--fs-large-title);
}
.mtEditformWrapper [for=details_birthdate] + input {
width: 50%;
}
.mtEditformWrapper .mandatoryExp {
margin-bottom: 30px;
}
.mtEditformWrapper .mandatoryExp ul {
list-style: none;
color: #ee1b2e;
}
@keyframes submit-bar-slide-in {
0% {
transform: translateY(30px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes submit-bar-slide-out {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(30px);
opacity: 0;
}
}
#submit-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding-top: 15px;
padding-bottom: 15px;
background: #FFF;
color: #000;
box-shadow: none;
animation: 0.3s submit-bar-slide-in ease-in-out;
}
#submit-bar.out {
display: block;
pointer-events: none;
animation: 0.3s submit-bar-slide-out ease-in-out;
animation-fill-mode: forwards;
}
form fieldset.optin.unavailable {
opacity: 0.3;
}
form fieldset.optin fieldset {
margin-left: 30px !important;
}
/* ----------------------------------------------------------------
Order history / my agenda
-----------------------------------------------------------------*/
.heading {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.heading > * {
margin-bottom: 15px;
}
@media (min-width: 480px) {
.heading-with-button {
display: flex;
align-items: center;
justify-content: space-between;
}
.heading-with-button h1 {
margin-right: 30px;
}
}
.mtWishlistFooter {
text-align: right;
}
/* ----------------------------------------------------------------
Light Login and general exceptions
-----------------------------------------------------------------*/
.light-login-flow,
.account-pages,
.exceptionWrapper {
background: #FFF;
color: #000;
}
.light-login-flow.listWrapper,
.account-pages.listWrapper,
.exceptionWrapper.listWrapper {
background: #FFF;
}
.light-login-flow .container,
.account-pages .container,
.exceptionWrapper .container {
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 1200px) {
.light-login-flow .container > .inner,
.account-pages .container > .inner,
.exceptionWrapper .container > .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.light-login-flow .container:not(.align-left) > .inner,
.account-pages .container:not(.align-left) > .inner,
.exceptionWrapper .container:not(.align-left) > .inner {
margin-left: 16.66666667%;
}
}
.light-login-flow.wide .container,
.account-pages.wide .container,
.exceptionWrapper.wide .container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.light-login-flow.wide .container,
.account-pages.wide .container,
.exceptionWrapper.wide .container {
max-width: none;
}
}
@media (min-width: 768px) {
.light-login-flow.wide .container,
.account-pages.wide .container,
.exceptionWrapper.wide .container {
max-width: 750px;
}
}
@media (min-width: 992px) {
.light-login-flow.wide .container,
.account-pages.wide .container,
.exceptionWrapper.wide .container {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.light-login-flow.wide .container,
.account-pages.wide .container,
.exceptionWrapper.wide .container {
max-width: 1170px;
}
}
.light-login-flow.wide .container .slick-slider,
.account-pages.wide .container .slick-slider,
.exceptionWrapper.wide .container .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
.light-login-flow button,
.light-login-flow .btn,
.account-pages button,
.account-pages .btn,
.exceptionWrapper button,
.exceptionWrapper .btn {
margin: 15px 0 0 0;
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background: #ee1b2e;
color: #FFF;
box-shadow: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
font-size: var(--fs-normal);
}
.light-login-flow button:hover,
.light-login-flow .btn:hover,
.account-pages button:hover,
.account-pages .btn:hover,
.exceptionWrapper button:hover,
.exceptionWrapper .btn:hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.light-login-flow button:active,
.light-login-flow .btn:active,
.account-pages button:active,
.account-pages .btn:active,
.exceptionWrapper button:active,
.exceptionWrapper .btn:active {
box-shadow: none;
}
.light-login-flow button.btn-default,
.light-login-flow .btn.btn-default,
.account-pages button.btn-default,
.account-pages .btn.btn-default,
.exceptionWrapper button.btn-default,
.exceptionWrapper .btn.btn-default {
border: none;
background: #EBECEC;
color: #ee1b2e;
box-shadow: none;
}
.light-login-flow button.btn-default:hover,
.light-login-flow .btn.btn-default:hover,
.account-pages button.btn-default:hover,
.account-pages .btn.btn-default:hover,
.exceptionWrapper button.btn-default:hover,
.exceptionWrapper .btn.btn-default:hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
.light-login-flow button.btn-default:active,
.light-login-flow .btn.btn-default:active,
.account-pages button.btn-default:active,
.account-pages .btn.btn-default:active,
.exceptionWrapper button.btn-default:active,
.exceptionWrapper .btn.btn-default:active {
box-shadow: none;
}
.light-login-flow button:disabled,
.light-login-flow .btn:disabled,
.account-pages button:disabled,
.account-pages .btn:disabled,
.exceptionWrapper button:disabled,
.exceptionWrapper .btn:disabled {
border: none !important;
background: #F6F6F6 !important;
color: #D8D8D8 !important;
cursor: default;
opacity: 1;
}
.light-login-flow button#login_save:disabled,
.light-login-flow .btn#login_save:disabled,
.account-pages button#login_save:disabled,
.account-pages .btn#login_save:disabled,
.exceptionWrapper button#login_save:disabled,
.exceptionWrapper .btn#login_save:disabled {
display: none;
}
.light-login-flow p > .btn,
.account-pages p > .btn,
.exceptionWrapper p > .btn {
margin-top: 0;
}
.light-login-flow .btn + .btn,
.account-pages .btn + .btn,
.exceptionWrapper .btn + .btn {
margin-left: 15px;
}
.light-login-flow input.form-control,
.light-login-flow input.form-control + .validationMsg,
.light-login-flow #change_email_code_code,
.light-login-flow #change_email_code_code + .validationMsg,
.light-login-flow #magic_code_form_code,
.light-login-flow #magic_code_form_code + .validationMsg,
.account-pages input.form-control,
.account-pages input.form-control + .validationMsg,
.account-pages #change_email_code_code,
.account-pages #change_email_code_code + .validationMsg,
.account-pages #magic_code_form_code,
.account-pages #magic_code_form_code + .validationMsg,
.exceptionWrapper input.form-control,
.exceptionWrapper input.form-control + .validationMsg,
.exceptionWrapper #change_email_code_code,
.exceptionWrapper #change_email_code_code + .validationMsg,
.exceptionWrapper #magic_code_form_code,
.exceptionWrapper #magic_code_form_code + .validationMsg {
max-width: 20rem;
}
.light-login-flow #passwordForm legend,
.account-pages #passwordForm legend,
.exceptionWrapper #passwordForm legend {
width: 1px;
height: 1px;
position: absolute;
top: -999px;
left: -999px;
overflow: hidden;
}
.light-login-flow label[for=change_email_code_code],
.light-login-flow label[for=magic_code_form_code],
.account-pages label[for=change_email_code_code],
.account-pages label[for=magic_code_form_code],
.exceptionWrapper label[for=change_email_code_code],
.exceptionWrapper label[for=magic_code_form_code] {
width: 1px;
height: 1px;
position: absolute;
top: -999px;
left: -999px;
overflow: hidden;
}
.light-login-flow #change_email_code_code,
.light-login-flow #magic_code_form_code,
.account-pages #change_email_code_code,
.account-pages #magic_code_form_code,
.exceptionWrapper #change_email_code_code,
.exceptionWrapper #magic_code_form_code {
text-align: center;
letter-spacing: 1em;
}
.light-login-flow form[name=login],
.account-pages form[name=login],
.exceptionWrapper form[name=login] {
margin-top: 60px;
}
.light-login-flow form[name=login] label[for=login_email],
.light-login-flow form[name=login] input#login_email,
.account-pages form[name=login] label[for=login_email],
.account-pages form[name=login] input#login_email,
.exceptionWrapper form[name=login] label[for=login_email],
.exceptionWrapper form[name=login] input#login_email {
width: 1px;
height: 1px;
position: absolute;
top: -999px;
left: -999px;
overflow: hidden;
}
.light-login-flow .user-home h1,
.account-pages .user-home h1,
.exceptionWrapper .user-home h1 {
margin: 0 0 10px 0;
font-size: var(--fs-huge-title);
}
.light-login-flow .user-home h2,
.account-pages .user-home h2,
.exceptionWrapper .user-home h2 {
margin: 0 0 10px 0;
font-size: var(--fs-medium-title);
}
.light-login-flow .user-home ul,
.account-pages .user-home ul,
.exceptionWrapper .user-home ul {
list-style: none;
}
.light-login-flow .user-home ul.client_types li + li,
.account-pages .user-home ul.client_types li + li,
.exceptionWrapper .user-home ul.client_types li + li {
margin-top: 10px;
}
.light-login-flow .user-home .timeslot,
.account-pages .user-home .timeslot,
.exceptionWrapper .user-home .timeslot {
display: inline-flex;
align-items: center;
margin: 0;
padding: 10px;
border-radius: none;
line-height: 1;
background: #3469CB;
color: #FFF;
font-size: var(--fs-normal);
}
@media (max-width: 480px) {
.light-login-flow .user-home .timeslot,
.account-pages .user-home .timeslot,
.exceptionWrapper .user-home .timeslot {
display: flex;
}
}
.light-login-flow .user-home .timeslot .icon,
.account-pages .user-home .timeslot .icon,
.exceptionWrapper .user-home .timeslot .icon {
margin: 0 10px 0 0;
font-size: 18px;
}
.light-login-flow .user-home span.help,
.account-pages .user-home span.help,
.exceptionWrapper .user-home span.help {
display: block;
padding-top: 5px;
}
@keyframes timerbar-fill {
0% {
left: 0;
}
100% {
left: 100%;
}
}
button#magic_link_form_save {
position: relative;
}
button .timer-bar {
display: block;
height: 6px;
position: absolute;
right: 0;
bottom: -15px;
left: 0;
z-index: 1;
border: 1px solid #ee1b2e;
border-radius: inherit;
background: #ee1b2e;
overflow: hidden;
}
button .timer-bar::after {
content: "";
height: 100%;
position: absolute;
right: 0;
left: 0;
border: 1px solid transparent;
border-radius: inherit;
background: rgba(255, 255, 255, 0.66);
will-change: left;
animation: timerbar-fill 20s linear forwards;
}
form[name=cancellation] .option {
display: flex;
align-items: flex-start;
margin-top: 10px;
}
form[name=cancellation] .option input[type=radio] {
margin: 6px 0 0;
}
form[name=cancellation] .option > label {
margin: 0 0 0 10px;
}
form[name=cancellation] .iban-form {
max-width: 50%;
margin: 15px 0;
}
form[name=cancellation] .iban-form #cancellation_iban {
max-width: unset;
margin: 10px 0 5px 0;
}
.context-ticketlist .listItemWrapper .meta .meta-group {
padding: 30px 20px 10px 20px;
}
.context-ticketlist .listItemWrapper .meta .meta-group .btn-cancellation {
width: auto;
flex-grow: 0;
margin-top: 0;
margin-left: auto;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.cinema-planner {
padding-bottom: 40px;
scroll-margin-top: 70px;
}
.cinema-planner .header {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
z-index: 1;
background: #EEE;
overflow: auto;
will-change: transform, opacity;
}
.cinema-planner .header::-webkit-scrollbar {
display: none;
}
.cinema-planner .header h2 {
margin: auto 15px;
color: inherit;
}
@media (max-width: 768px) {
.cinema-planner .header {
cursor: grab;
justify-content: start;
}
}
@media (max-width: 480px) {
.cinema-planner .header {
background: #1A242F;
}
.cinema-planner .header h2 {
color: #FFF;
}
}
.cinema-planner .header .day-filters {
list-style: none;
display: flex;
margin: auto 15px;
}
.cinema-planner .header .day-filters li:not(:last-child) {
margin-right: 10px;
}
.cinema-planner .header .day-filters li .day-option {
width: 100%;
min-width: 60px;
border: 1.5px solid #1A242F;
background: transparent;
}
@media (max-width: 480px) {
.cinema-planner .header .day-filters li .day-option {
min-width: 40px;
padding: 10px 15px;
border: 1.5px solid #FFF;
color: #FFF;
}
}
@media (hover: hover) and (pointer: fine) {
.cinema-planner .header .day-filters li .day-option:hover {
border: 1.5px solid #3469CB;
background: #3469CB;
}
}
.cinema-planner .header .day-filters li .day-option[aria-selected=true] {
border: 1.5px solid #3469CB;
background: #3469CB;
color: #FFF;
}
.cinema-planner .header-buffer.pinned {
animation: buffer-inserted 0.2s ease-in-out;
}
.cinema-planner .header.pinned {
height: 80px;
position: sticky;
top: 69px;
right: 0;
box-shadow: none;
animation: header-slideIn 0.2s ease-in-out;
}
header.has-anchormenu ~ #content .cinema-planner .header.pinned {
top: 114px;
}
@keyframes header-slideIn {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes buffer-inserted {
from {
height: 0;
}
to {
height: 100px;
}
}
.cinema-planner .content {
display: flex;
justify-content: center;
margin: 15px;
}
@media (max-width: 480px) {
.cinema-planner .content {
margin: 0;
}
}
.cinema-planner .content .empty-list {
display: none;
position: relative;
padding-bottom: 30px;
text-align: center;
line-height: 1.4;
background: inherit;
box-shadow: none;
font-size: inherit;
}
.cinema-planner .content .empty-list .peppered-icon {
position: relative;
margin: 20px auto;
color: #F6F6F6;
}
.cinema-planner .content .empty-list .peppered-icon svg {
width: 60px;
height: 60px;
}
.cinema-planner .content .movie-cards {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 2880px) {
.cinema-planner .content .movie-cards {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 1920px) {
.cinema-planner .content .movie-cards {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 1366px) {
.cinema-planner .content .movie-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 850px) {
.cinema-planner .content .movie-cards {
grid-template-columns: 1fr;
}
}
.cinema-planner .content .movie-cards .movie-card {
width: 420px;
min-width: 420px;
margin: 5px;
padding: 20px;
border-radius: 10px;
background: #FFF;
box-shadow: none;
}
@media (max-width: 480px) {
.cinema-planner .content .movie-cards .movie-card {
width: 100vw;
min-width: unset;
margin: 0 0 10px 0;
border-radius: 0;
}
}
.cinema-planner .content .movie-cards .movie-card .card-header {
min-height: 110px;
position: relative;
}
.cinema-planner .content .movie-cards .movie-card .card-header::before {
content: "";
width: 420px;
height: 110px;
position: absolute;
right: -20px;
bottom: -10px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.05) 100%);
}
.cinema-planner .content .movie-cards .movie-card .card-header a {
display: flex;
align-items: center;
}
.cinema-planner .content .movie-cards .movie-card .card-header .info-link {
position: absolute;
right: 0;
bottom: 0;
padding: 0;
text-decoration: underline;
color: #000;
}
.cinema-planner .content .movie-cards .movie-card .card-header .info-link:hover {
text-decoration: underline;
color: #000;
}
.cinema-planner .content .movie-cards .movie-card .card-header .poster {
max-width: 90px;
height: auto;
position: absolute;
top: 5px;
border-radius: 3px;
}
.cinema-planner .content .movie-cards .movie-card .card-header .inner {
display: flex;
flex-direction: column;
margin-left: 105px;
order: 1;
}
.cinema-planner .content .movie-cards .movie-card .card-header .inner h4 {
margin-bottom: 0;
text-transform: uppercase;
color: #000;
}
.cinema-planner .content .movie-cards .movie-card .card-header .inner .subtitle,
.cinema-planner .content .movie-cards .movie-card .card-header .inner .venue {
color: #333;
font-size: var(--fs-small);
}
.cinema-planner .content .movie-cards .movie-card .card-header .inner .supertitle {
margin: 0;
padding: 0;
font-weight: normal;
text-transform: uppercase;
color: #3469CB;
order: -1;
font-size: var(--fs-tiny);
}
.cinema-planner .content .movie-cards .movie-card .card-header .inner .duration {
margin: 5px 0 0 0;
font-weight: bold;
color: #000;
font-size: var(--fs-tiny);
}
.cinema-planner .content .movie-cards .movie-card .events {
margin: 30px 0 20px 0;
}
.cinema-planner .content .movie-cards .movie-card .events .day {
display: grid;
align-items: stretch;
grid-template-columns: 3fr 15px 10fr;
width: 100%;
}
.cinema-planner .content .movie-cards .movie-card .events .day .date {
width: 90px;
margin: 5px 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: right;
align-self: start;
}
@media (max-width: 480px) {
.cinema-planner .content .movie-cards .movie-card .events .day .date {
width: 75px;
}
}
.cinema-planner .content .movie-cards .movie-card .events .day .date .date-day {
font-size: var(--fs-tiny);
font-weight: bold;
text-transform: uppercase;
}
.cinema-planner .content .movie-cards .movie-card .events .day .date .date-extra {
display: block;
color: #787878;
font-size: var(--fs-tiny);
}
.cinema-planner .content .movie-cards .movie-card .events .day .separator {
width: 5px;
margin: 5px;
border-radius: 10px;
}
.cinema-planner .content .movie-cards .movie-card .events .day .separator.not-empty {
background: #EEE;
transition: all 0.3s ease-out;
}
.cinema-planner .content .movie-cards .movie-card .events .day .no-show-placeholder {
display: none;
margin: auto 0;
text-transform: uppercase;
color: #999;
font-size: var(--fs-tiny);
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(auto, 130px));
}
@media (max-width: 260px) {
.cinema-planner .content .movie-cards .movie-card .events .day .shows {
grid-template-columns: 1fr;
}
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows a {
min-width: 130px;
margin: 5px 5px 5px 0;
padding: 8px 10px;
text-align: start;
}
@media (max-width: 480px) {
.cinema-planner .content .movie-cards .movie-card .events .day .shows a {
min-width: unset;
}
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows a.btn {
margin: 5px 5px 5px 0;
border: none;
background: #ee1b2e;
color: #FFF;
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows a.btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows a.status-info {
margin: 5px 5px 5px 0;
border: none;
border-radius: 0px;
background: #F6F6F6;
color: #D8D8D8;
box-shadow: none;
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows .movie-time-start {
font-size: var(--fs-normal);
margin-right: 10px;
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows .movie-time-end {
margin-left: 10px;
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows .property {
margin-top: 3px;
}
.cinema-planner .content .movie-cards .movie-card .events .day .shows .movie-time-separator,
.cinema-planner .content .movie-cards .movie-card .events .day .shows .movie-time-end {
font-weight: normal;
opacity: 0.5;
font-size: var(--fs-tiny);
}
@media (max-width: 768px) {
.cinema-planner .content .movie-cards .movie-card.hide-on-mobile {
display: none;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.newsArchiveRoot {
background: transparent;
}
.newsArchive {
padding: 0 15px 30px 15px;
}
.newsArchive .grid_root {
display: flex;
flex-wrap: wrap;
}
.newsArchive .grid_root > * {
width: 360px;
margin: 0 5px 15px 5px;
}
@supports (display: grid) {
.newsArchive .grid_root {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
}
.newsArchive .grid_root > * {
width: auto;
margin: 0;
}
@media (max-width: 991px) {
.newsArchive .grid_root {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.newsArchive .grid_root {
grid-template-columns: 1fr;
}
}
}
.newsArchive h1 {
margin: 30px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-huge-title);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Help + discount code
-----------------------------------------------------------------*/
.help-discount-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
margin-bottom: 40px;
padding: 0;
}
.help-discount-wrapper > * {
flex: 1;
}
@media (max-width: 991px) {
.help-discount-wrapper {
display: block;
}
.help-discount-wrapper > * + * {
margin-top: 40px;
}
}
.help-discount-wrapper .help-desc > * {
max-width: 40rem;
}
.help-discount-wrapper .help-desc h2 {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
font-size: var(--fs-medium-title);
}
.help-discount-wrapper .help-desc p {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.33;
text-transform: none;
font-size: var(--fs-large-subtitle);
}
.help-discount-wrapper .discount-code {
margin-right: 30px;
}
.help-discount-wrapper .discount-code form {
margin: 0;
}
.help-discount-wrapper .discount-code .form-group {
display: flex;
justify-content: center;
margin: 0;
}
@media (max-width: 481px) {
.help-discount-wrapper .discount-code .form-group {
display: block;
}
}
.help-discount-wrapper .discount-code input {
height: auto;
margin-top: -1px;
margin-bottom: -1px;
padding: 12px 15px;
padding-right: 15px;
padding-left: 15px;
line-height: 1.4;
}
.help-discount-wrapper .discount-code label {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
font-size: var(--fs-medium-title);
}
.help-discount-wrapper .discount-code .btn {
margin-left: 10px;
border: none;
border-radius: 0px;
background: #ee1b2e;
color: #FFF;
}
.help-discount-wrapper .discount-code .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
@media (max-width: 481px) {
.help-discount-wrapper .discount-code .btn {
width: 100%;
margin: 10px auto auto auto;
text-align: center;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Theme order list
-----------------------------------------------------------------*/
.listItems .inSeries {
margin: 0 -15px;
padding: 15px;
background: #999;
}
.listItems .inSeries + .inSeries {
padding-top: 0;
}
.listItems .inSeries.themeItemListHeader {
margin-top: 45px;
}
@media (min-width: 768px) {
.listItems .inSeries.themeItemListHeader {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.listItems .inSeries.themeItemListHeader h2 {
flex: 1;
margin: 0;
color: inherit;
}
.listItems .inSeries.themeItemListHeader .btn {
width: auto;
}
body.order .feedbackList {
list-style: none;
position: relative;
margin: 0 30px 40px 30px;
padding: 30px;
border-radius: 0px;
background: #FFF;
color: #000;
}
@media (max-width: 767px) {
body.order .feedbackList {
margin-right: 0;
margin-left: 0;
padding: 0;
}
}
body.order .feedbackList.errors {
margin-bottom: -48px;
background: #FFF;
color: inherit;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}
body.order .feedbackList.errors::after {
content: "";
display: block;
position: absolute;
right: 30px;
bottom: -16px;
border-top: 16px solid #FFF;
border-right: 16px solid transparent;
border-bottom: none;
border-left: 16px solid transparent;
}
@media (max-width: 767px) {
body.order .feedbackList.errors {
padding: 15px;
}
}
body.order .feedbackList > * {
position: relative;
margin: 0;
padding: 0 0 0 30px;
color: inherit;
}
body.order .feedbackList > * + * {
margin-top: 30px;
}
body.order .feedbackList > * .fa {
position: absolute;
left: -5px;
font-size: 20px;
}
body.order .feedbackList > *.warning .fa {
color: inherit;
}
body.order .feedbackList > * h4 {
margin: 0 0 5px;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
font-size: var(--fs-small-title);
}
body.order .feedbackList > * > p {
display: block;
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: inherit;
text-transform: none;
font-size: inherit;
}
body.order .feedbackList > * ul {
list-style: disc;
}
body.order .feedbackList > *.error input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 38px;
height: 20px;
position: relative;
bottom: -2px;
margin-right: 1ex;
border: none;
border-radius: 20px;
overflow: hidden;
outline: none;
cursor: pointer;
background-color: #999;
transition: background-color ease 0.3s;
}
body.order .feedbackList > *.error input[type=checkbox]::before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
z-index: 2;
border-radius: 100%;
background: #FFF;
color: #FFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
will-change: transform;
transition: all ease-in-out 0.2s;
}
body.order .feedbackList > *.error input[type=checkbox]:checked {
background-color: #0AA332;
}
body.order .feedbackList > *.error input[type=checkbox]:checked::before {
transform: translateX(18px);
}
body.order .feedbackList > *.error > div.checkbox label {
display: flex;
align-items: baseline;
}
body.order .feedbackList > *.error > div.checkbox label input[type=checkbox] {
flex-shrink: 0;
}
body.order .feedbackList > .msg:not(.combo) + .combo {
padding-top: 30px;
}
body.order .feedbackList > .msg:not(.combo) + .combo::before {
content: "";
display: block;
position: relative;
top: -30px;
border-top: 1px solid #DDD;
}
body.order form.is-submitted {
pointer-events: none;
opacity: 0.8;
}
/* ----------------------------------------------------------------
Cineville/Podiumpas
-----------------------------------------------------------------*/
#membership-codes,
.membership-codes {
margin: 15px 0 0 0;
}
#membership-codes h4,
.membership-codes h4 {
margin: 0 0 5px 0;
}
#membership-codes label,
.membership-codes label {
margin-right: 15px;
}
#membership-codes input,
.membership-codes input {
min-width: 200px;
}
/* ----------------------------------------------------------------
Extras
-----------------------------------------------------------------*/
.tickets-extras .extrasImage,
#ticketsForm-extras .extrasImage {
height: 77px;
float: left;
margin: 0 30px 15px 0;
}
.tickets-extras table,
#ticketsForm-extras table {
clear: both;
margin-top: 30px;
}
.tickets-extras > div + div,
#ticketsForm-extras > div + div {
margin-top: 30px;
}
.tickets-extras h4,
.tickets-extras .richtext,
#ticketsForm-extras h4,
#ticketsForm-extras .richtext {
padding-right: 15px;
line-height: normal;
}
.tickets-extras h4,
#ticketsForm-extras h4 {
margin: 0 0 5px;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
font-size: var(--fs-small-title);
}
.tickets-extras p,
#ticketsForm-extras p {
display: block;
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: inherit;
text-transform: none;
font-size: inherit;
}
.listItems li.extras-toggle {
margin-top: 15px;
text-align: center;
}
.listItems li.extras-toggle p.subtitle {
margin-bottom: 10px;
}
.listItems li.extras-toggle button {
display: inline-flex;
width: auto;
margin: 0;
}
.listItems li.extras-toggle button svg {
margin-left: 10px;
}
.listItems li[id^=event-extras][aria-expanded=false] {
display: none;
}
/* ----------------------------------------------------------------
Payment
-----------------------------------------------------------------*/
@media (min-width: 601px) {
.orderListWrapper .pulloutContent .footer {
display: flex;
align-items: center;
justify-content: flex-end;
}
.orderListWrapper .pulloutContent .footer .cost-message p {
margin: 0;
}
}
.orderListWrapper .pulloutContent .footer .cost-message {
font-size: var(--fs-tiny);
}
fieldset#sendoptions {
margin-bottom: 20px;
}
.order #content #paymentForm input[type=tel] {
max-width: 20em;
}
.order #content #paymentForm input[type=tel] + .validationMsg {
text-align: left;
}
/* ----------------------------------------------------------------
Attendace form
-----------------------------------------------------------------*/
.attendanceWrapper {
max-width: 720px;
margin: 60px auto;
}
.attendanceWrapper h3 + p {
margin: 0 0 45px 0;
}
.attendanceWrapper p {
margin: 0 0 15px 0;
}
.attendanceWrapper fieldset {
margin: 0;
}
.attendanceWrapper fieldset + p {
margin-top: 30px;
}
.attendanceWrapper fieldset + fieldset {
margin-top: 5px;
}
.attendanceWrapper fieldset .inner {
display: flex;
}
.attendanceWrapper fieldset .inner > * {
flex: 1;
}
.attendanceWrapper fieldset .inner > * + * {
margin-left: 30px;
}
.attendanceWrapper label {
font-weight: normal;
font-size: 0.9em;
color: #333;
}
.attendanceWrapper button {
margin-top: 30px;
}
/* ----------------------------------------------------------------
Confirmation
-----------------------------------------------------------------*/
.confirmationWrapper .container {
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 1200px) {
.confirmationWrapper .container .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.confirmationWrapper .container:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.confirmationWrapper .btn {
width: auto;
}
.confirmationWrapper .btn + .btn {
margin-left: 30px;
}
@media only screen and (min-width: 768px) {
.purchase-page.spektrix .glightbox-container .ginner-container {
padding: 4rem;
}
}
@media only screen and (min-width: 992px) {
.purchase-page.spektrix .glightbox-container .ginner-container {
padding: 8rem;
}
}
.purchase-page.spektrix .glightbox-button-hidden {
display: none;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 1200px) {
.creditsWrapper .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.creditsWrapper:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.creditsWrapper .inner {
padding: 0;
border: none;
background: transparent;
}
.creditsWrapper h2 {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-large-title);
}
.creditsWrapper .richtext {
font-family: "FSELLIOT", sans-serif;
font-weight: 300;
line-height: 150%;
text-transform: none;
color: #000;
font-size: var(--fs-normal);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.creditsAndProgrammeWrapper .inner {
display: grid;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-template-columns: 1fr;
padding: 0 15px;
border: none;
background: transparent;
}
.creditsAndProgrammeWrapper .inner.column-2 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.creditsAndProgrammeWrapper .inner::before, .creditsAndProgrammeWrapper .inner::after {
display: none;
}
.creditsAndProgrammeWrapper .inner .credits {
padding: 0;
}
.creditsAndProgrammeWrapper .inner .programme {
padding: 0;
}
.creditsAndProgrammeWrapper h2 {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #FFF;
font-size: var(--fs-large-title);
}
.creditsAndProgrammeWrapper .richtext {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.4;
text-transform: none;
color: #FFF;
font-size: var(--fs-normal);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 1200px) {
.desc1Wrapper .container {
display: flex;
}
}
@media (min-width: 1200px) {
.desc1Wrapper .desc1 {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.desc1Wrapper:not(.align-left) .desc1 {
margin-left: 16.66666667%;
}
}
@media (min-width: 1200px) {
.desc1Wrapper.has-meta-info .desc1 {
flex: 1;
margin: 0;
padding-right: 30px;
}
.desc1Wrapper.has-meta-info .desc1 + .metaWrapper {
padding-left: 30px;
}
.desc1Wrapper.has-meta-info:not(.align-left) .desc1 {
padding-right: 0;
padding-left: 30px;
}
.desc1Wrapper.has-meta-info:not(.align-left) .desc1 + .metaWrapper {
padding-right: 30px;
padding-left: 0;
}
}
.desc1Wrapper:not(.align-left) .container {
flex-direction: row-reverse;
}
@media (max-width: 1199px) {
.desc1Wrapper--side-note-above:not(.align-left) .container, .desc1Wrapper--side-note-above .container {
display: flex;
flex-direction: column-reverse;
}
.desc1Wrapper--side-note-above:not(.align-left) .container .metaWrapper, .desc1Wrapper--side-note-above .container .metaWrapper {
margin-top: 0;
margin-bottom: 30px;
}
}
.desc1Wrapper .desc1 {
margin-right: auto;
}
.desc1Wrapper .desc1 p,
.desc1Wrapper .desc1 .richtext {
margin: 0 0 1.4em 0;
font-family: "FSELLIOT", sans-serif;
line-height: 1.67;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.desc1Wrapper .metaWrapper {
width: calc(33.3333% - 30px);
}
.desc1Wrapper .metaWrapper > .inner {
padding: 30px 30px;
border: none;
border-radius: 0px;
background: #F6F6F6;
color: inherit;
}
.desc1Wrapper .metaWrapper > .inner > * + * {
margin-top: 30px;
}
@media (max-width: 1199px) {
.desc1Wrapper .metaWrapper {
width: 100%;
margin-top: 30px;
}
}
.desc1Wrapper .metaWrapper img.poster {
width: 100%;
max-width: 320px;
padding: 0;
}
.desc1Wrapper .metaWrapper .tags {
display: block;
margin-bottom: 0;
padding: 0;
background: none;
}
.desc1Wrapper .metaWrapper .tags li {
list-style: none;
display: inline-block;
margin-right: 5px;
}
.desc1Wrapper .metaWrapper .tags li a {
display: block;
margin-right: 5px;
margin-bottom: 5px;
padding: 4px 15px;
border: none;
border-radius: 2px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-decoration: none;
text-transform: none;
background: #F6F6F6;
color: #ee1b2e;
font-size: var(--fs-tiny);
}
.desc1Wrapper .metaWrapper .tags li a:hover {
border: none;
text-decoration: none;
background: #F6F6F6;
color: #D11021;
}
.desc1Wrapper .metaWrapper .extraInfo {
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 400;
line-height: 1.4;
text-transform: none;
background: none;
color: #333;
font-size: var(--fs-normal);
}
.desc1Wrapper .metaWrapper .extraInfo p {
margin-bottom: 0;
}
.desc1Wrapper .metaWrapper .extraInfo ul li {
margin-left: 1em;
}
.desc1Wrapper .metaWrapper .extraInfo img {
max-width: 100%;
height: auto;
}
.desc1Wrapper .metaWrapper .infoList {
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
background: none;
color: inherit;
font-size: var(--fs-small);
}
.desc1Wrapper .metaWrapper .infoList dl,
.desc1Wrapper .metaWrapper .infoList dd,
.desc1Wrapper .metaWrapper .infoList dt {
margin: 0;
padding: 0;
}
.desc1Wrapper .metaWrapper .infoList dt {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
font-size: var(--fs-small);
}
.desc1Wrapper .metaWrapper .infoList dt.hidden {
display: none;
}
.desc1Wrapper .metaWrapper .infoList dd + dt {
margin-top: 15px;
}
.desc1Wrapper .metaWrapper .infoList .kijkwijzer {
margin-top: 10px;
}
.desc1Wrapper .metaWrapper .partof {
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
background: none;
color: #000;
font-size: var(--fs-small);
}
.desc1Wrapper .metaWrapper .partof ul {
list-style: none;
margin: 0;
padding: 0;
}
.desc1Wrapper .metaWrapper .partof ul li {
margin: 0;
padding: 0;
}
.desc1Wrapper .metaWrapper .partof a {
display: flex;
align-items: center;
margin-top: 0.5em;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
color: #000;
font-size: var(--fs-small);
}
.desc1Wrapper .metaWrapper .partof a > .peppered-icon {
margin-right: 1ex;
}
.desc1Wrapper .metaWrapper .partof a:hover {
color: #000;
}
.desc1Wrapper .metaWrapper .castMember {
position: relative;
}
.desc1Wrapper .metaWrapper .castMember .credits {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 4px 5px;
font-family: inherit;
font-weight: normal;
line-height: 1;
text-transform: none;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
font-size: 12px;
}
.desc1Wrapper .metaWrapper .castMember img {
max-width: 100%;
}
.desc1Wrapper .metaWrapper > :first-child {
margin-top: 0;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.desc2Wrapper .richtext {
font-family: "FSELLIOT", sans-serif;
font-weight: 300;
line-height: 1.67;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.desc2Wrapper .richtext p {
margin: 0 0 1.4em 0;
}
@media (min-width: 1200px) {
.desc2Wrapper:not(.variant-wide) .richtext {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.desc2Wrapper:not(.variant-wide):not(.align-left) .richtext {
margin-left: 16.66666667%;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.descriptionImageWrapper .inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 30px;
}
@media (max-width: 480px) {
.descriptionImageWrapper .inner {
grid-template-columns: 1fr;
}
}
@media (min-width: 992px) {
.descriptionImageWrapper .inner.image_on_right .image {
order: 2;
}
}
.descriptionImageWrapper .inner .image > * {
display: block;
position: relative;
padding: 0;
}
.descriptionImageWrapper .inner .image > * img {
width: 100%;
}
.descriptionImageWrapper .inner .image > * .credits {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 4px 5px;
font-family: inherit;
font-weight: normal;
line-height: 1;
text-transform: none;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
font-size: 12px;
}
.descriptionImageWrapper .inner .desc {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0;
background: transparent;
color: inherit;
flex-grow: 1;
}
.descriptionImageWrapper .inner .desc h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: inherit;
font-size: var(--fs-large-title);
}
.descriptionImageWrapper .inner .desc h2 ~ .richtext {
padding: 15px 0 0 0;
}
.descriptionImageWrapper .inner .desc .richtext {
padding: 0;
font-family: "FSELLIOT", sans-serif;
line-height: 1.67;
text-transform: none;
font-size: var(--fs-normal);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 1200px) {
.discountPageWrapper .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.discountPageWrapper:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.discountPageWrapper form {
margin: 0;
}
.discountPageWrapper form .msg {
margin: 30px 0;
padding: 0;
}
.discountPageWrapper label {
display: block;
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.31;
text-transform: none;
font-size: var(--fs-normal);
}
.discountPageWrapper label .desc {
margin: 0 0 5px 0;
}
.discountPageWrapper input:not([type=checkbox]):not([type=radio]),
.discountPageWrapper textarea {
display: block;
width: 100%;
max-width: 30em;
height: 34px;
margin: 0 0 15px 0;
padding: 0 6px;
border: 1px solid #000;
border-radius: 3px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: italic;
line-height: 34px !important;
text-transform: none;
color: #000;
box-shadow: none;
font-size: var(--fs-normal);
}
.discountPageWrapper textarea {
height: 68px;
}
.discountPageWrapper button {
width: auto;
margin: 15px 0 0 0;
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background: #ee1b2e;
color: #FFF;
cursor: pointer;
transition: all 0.2s ease-in-out;
font-size: var(--fs-normal);
}
.discountPageWrapper button:hover {
border: none;
background: #D11021;
color: #FFF;
transition: all 0.1s ease-in-out;
}
.discountPageWrapper button:disabled {
border: none !important;
background: #F6F6F6 !important;
color: #D8D8D8 !important;
cursor: default;
opacity: 1;
}
.discountPageWrapper p > button {
margin-top: 0;
}
@media (min-width: 1200px) {
.formWrapper.donation form {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.formWrapper.donation:not(.align-left) form {
margin-left: 16.66666667%;
}
}
#donationForm .slider-active {
display: flex;
flex-wrap: wrap;
padding-right: 15px;
}
#donationForm .slider-active label {
width: 100%;
}
#donationForm .slider-active input {
flex: 1;
margin-right: 30px;
}
#donationForm .slider-active .input-slider {
flex: 4;
align-self: flex-end;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header: Show (default)
-----------------------------------------------------------------*/
.detail.course .headerVideoContainer,
.detail.show .headerVideoContainer {
background: #000;
}
.detail.course .headerImgContainer,
.detail.show .headerImgContainer {
padding: 0 15px;
background: #FAFAFA;
}
.detail.course .headerImgContainer .container,
.detail.show .headerImgContainer .container {
position: relative;
}
.detail.course .headerImgContainer .container > img,
.detail.show .headerImgContainer .container > img {
width: 100%;
}
.detail.course .headerImgContainer .container .credits,
.detail.show .headerImgContainer .container .credits {
margin-right: 15px;
margin-left: 15px;
}
.detail.course .headerImgContainer .credits,
.detail.show .headerImgContainer .credits {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 4px 5px;
font-family: inherit;
font-weight: normal;
line-height: 1;
text-transform: none;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
font-size: 12px;
}
.detail.course .headerImgContainer .placeholder,
.detail.show .headerImgContainer .placeholder {
background: transparent no-repeat center/cover;
}
.detail.course .headerImgContainer:not(.video-started) .placeholder,
.detail.show .headerImgContainer:not(.video-started) .placeholder {
padding-bottom: 56.25%;
}
.detail.course .headerImgContainer + .showHeaderWrapper .container,
.detail.show .headerImgContainer + .showHeaderWrapper .container {
margin-top: 0;
}
.detail.course .headerImgContainer .video-play-button,
.detail.course #showHeaderImage .video-play-button,
.detail.show .headerImgContainer .video-play-button,
.detail.show #showHeaderImage .video-play-button {
all: unset;
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -76px;
margin-left: -36px;
border: none;
font-size: 72px;
background: none;
color: #ee1b2e;
cursor: pointer;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.detail.course .headerImgContainer.video-started .video-play-button,
.detail.course #showHeaderImage.video-started .video-play-button,
.detail.show .headerImgContainer.video-started .video-play-button,
.detail.show #showHeaderImage.video-started .video-play-button {
display: none;
}
.detail.course .page-title,
.detail.show .page-title {
height: max(75vh, 500px);
position: relative;
overflow: hidden;
}
.detail.course .page-title .credits,
.detail.show .page-title .credits {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 4px 5px;
font-family: inherit;
font-weight: normal;
line-height: 1;
text-transform: none;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
font-size: 12px;
}
.detail.course .page-title .imageLayer,
.detail.show .page-title .imageLayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent no-repeat center/cover;
will-change: transform;
animation-fill-mode: forwards;
animation: none;
}
.detail.course .page-title .imageLayer .gradientOverlay,
.detail.show .page-title .imageLayer .gradientOverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
}
.detail.course .page-title[data-animations*=zoom] .imageLayer,
.detail.show .page-title[data-animations*=zoom] .imageLayer {
animation: 2s ease-out hero-zoom;
}
.detail.course .page-title[data-animations*=twist] .imageLayer,
.detail.show .page-title[data-animations*=twist] .imageLayer {
animation: 2s ease-out hero-twist;
}
.detail.course .page-title[data-animations*=saturate] .imageLayer,
.detail.show .page-title[data-animations*=saturate] .imageLayer {
animation: 2s ease-out hero-saturate;
}
.detail.course .page-title[data-animations*=desaturate] .imageLayer,
.detail.show .page-title[data-animations*=desaturate] .imageLayer {
animation: 2s ease-out hero-desaturate;
}
.detail.course .page-title[data-animations*=slide] .imageLayer,
.detail.show .page-title[data-animations*=slide] .imageLayer {
animation: 2s ease-out hero-slide;
}
.detail.course .page-title[data-animations*=fade-in] .imageLayer,
.detail.show .page-title[data-animations*=fade-in] .imageLayer {
animation: 2s ease-out hero-fade-in;
}
.detail.course .page-title .credits,
.detail.show .page-title .credits {
top: 0;
bottom: auto;
}
@media (max-width: 600px) {
.detail.course .page-title,
.detail.show .page-title {
height: max(75vh, 500px);
}
}
.detail.course #showHeaderImage,
.detail.show #showHeaderImage {
transition: all 0.2s ease-in-out;
}
.detail.course #showHeaderImage [data-video-url],
.detail.show #showHeaderImage [data-video-url] {
padding-top: 0;
padding-bottom: 0;
color: #ee1b2e;
transition: opacity 0.2s ease-in-out;
}
.detail.course #showHeaderImage.video-started,
.detail.show #showHeaderImage.video-started {
height: auto;
background: #000 !important;
}
.detail.course #showHeaderImage.video-started .container[data-video-url],
.detail.show #showHeaderImage.video-started .container[data-video-url] {
opacity: 1;
}
.detail.course #showHeaderImage.video-started + .showHeaderWrapper .container,
.detail.show #showHeaderImage.video-started + .showHeaderWrapper .container {
margin-top: 0;
}
.detail.course #showHeaderImage.video-started .imageLayer,
.detail.show #showHeaderImage.video-started .imageLayer {
display: none;
}
.detail.course #showHeaderImage.variant-showcase,
.detail.show #showHeaderImage.variant-showcase {
margin-top: -70px;
padding: 0 15px;
}
@media (max-width: 767px) {
.detail.course #showHeaderImage.variant-showcase,
.detail.show #showHeaderImage.variant-showcase {
margin-top: -70px;
}
}
.detail.course #showHeaderImage.variant-showcase .inner,
.detail.show #showHeaderImage.variant-showcase .inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
width: 100%;
position: absolute;
inset: 0;
padding: 30px 15px;
text-align: center;
color: #FFF;
}
.detail.course #showHeaderImage.variant-showcase .date,
.detail.show #showHeaderImage.variant-showcase .date {
text-transform: uppercase;
color: #FFF;
font-weight: 700;
font-size: var(--fs-huge-subtitle);
}
.detail.course #showHeaderImage.variant-showcase .subtitle,
.detail.show #showHeaderImage.variant-showcase .subtitle {
text-transform: uppercase;
color: #FFF;
font-weight: 700;
font-size: var(--fs-huge-subtitle);
}
@media (min-width: 1200px) {
.detail.course #showHeaderImage.variant-showcase .inner,
.detail.show #showHeaderImage.variant-showcase .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.detail.course #showHeaderImage.variant-showcase:not(.align-left) .inner,
.detail.show #showHeaderImage.variant-showcase:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.detail.course #showHeaderImage.variant-showcase .desc,
.detail.show #showHeaderImage.variant-showcase .desc {
display: flex;
flex-direction: column;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 22px;
text-transform: none;
color: inherit;
font-size: var(--fs-huge-subtitle);
}
.detail.course #showHeaderImage.variant-showcase .supertitle,
.detail.show #showHeaderImage.variant-showcase .supertitle {
order: -1;
display: block;
align-self: center;
margin: 15px 0 5px 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.3;
text-transform: uppercase;
background: transparent;
color: #FFF;
font-size: var(--fs-small);
}
.detail.course #showHeaderImage.variant-showcase h1,
.detail.show #showHeaderImage.variant-showcase h1 {
margin: 10px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-huge-title);
}
.detail.course #showHeaderImage.variant-showcase h1.with-supertitle,
.detail.show #showHeaderImage.variant-showcase h1.with-supertitle {
margin-top: 0;
}
.detail.course #showHeaderImage.variant-showcase .tagline,
.detail.show #showHeaderImage.variant-showcase .tagline {
margin: 10px 0 0 0;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.detail.course #showHeaderImage.variant-showcase .credits,
.detail.show #showHeaderImage.variant-showcase .credits {
margin: 10px 0 0 0;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-transform: inherit;
color: inherit;
font-size: inherit;
}
.detail.course #showHeaderImage.variant-showcase .location,
.detail.show #showHeaderImage.variant-showcase .location {
margin: 10px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1.4;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.detail.course #showHeaderImage.variant-showcase .venue,
.detail.show #showHeaderImage.variant-showcase .venue {
margin: 10px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.4;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.detail.course #showHeaderImage.variant-showcase .location + .venue,
.detail.show #showHeaderImage.variant-showcase .location + .venue {
margin-top: 0;
}
.detail.course #showHeaderImage.variant-showcase .btn,
.detail.course #showHeaderImage.variant-showcase .status-info,
.detail.show #showHeaderImage.variant-showcase .btn,
.detail.show #showHeaderImage.variant-showcase .status-info {
display: inline-block;
width: auto;
margin: 45px 0 0 0;
padding: 12px 15px;
text-align: center;
}
.detail.course #showHeaderImage.variant-showcase .btn .fa,
.detail.course #showHeaderImage.variant-showcase .status-info .fa,
.detail.show #showHeaderImage.variant-showcase .btn .fa,
.detail.show #showHeaderImage.variant-showcase .status-info .fa {
transition: transform 0.2s ease-in-out;
}
.detail.course #showHeaderImage.variant-showcase .btn[aria-expanded=true] .fa,
.detail.course #showHeaderImage.variant-showcase .status-info[aria-expanded=true] .fa,
.detail.show #showHeaderImage.variant-showcase .btn[aria-expanded=true] .fa,
.detail.show #showHeaderImage.variant-showcase .status-info[aria-expanded=true] .fa {
transform: rotate(180deg);
}
.detail.course #showHeaderImage.variant-showcase .btn,
.detail.show #showHeaderImage.variant-showcase .btn {
border: none;
border-radius: 0px;
background: #F6F6F6;
color: #000;
box-shadow: none;
font-size: var(--fs-normal);
}
.detail.course #showHeaderImage.variant-showcase .btn:hover,
.detail.show #showHeaderImage.variant-showcase .btn:hover {
border: none;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
.detail.course #showHeaderImage.variant-showcase .btn:active,
.detail.show #showHeaderImage.variant-showcase .btn:active {
box-shadow: none;
}
.detail.course #showHeaderImage.variant-showcase .btn[aria-expanded=true],
.detail.show #showHeaderImage.variant-showcase .btn[aria-expanded=true] {
border: none;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
.detail.course #showHeaderImage.variant-showcase .status-info,
.detail.show #showHeaderImage.variant-showcase .status-info {
font-family: inherit;
font-weight: normal;
line-height: 1.2;
text-transform: none;
text-align: center;
color: inherit;
font-size: inherit;
}
.detail.course #showHeaderImage.variant-showcase .status-info:link,
.detail.show #showHeaderImage.variant-showcase .status-info:link {
text-decoration: none;
color: inherit;
}
.detail.course #showHeaderImage.variant-showcase .status-info:link:hover,
.detail.show #showHeaderImage.variant-showcase .status-info:link:hover {
text-decoration: none;
color: #000;
}
@media (max-width: 767px) {
.detail.course #showHeaderImage.variant-showcase .status-info,
.detail.show #showHeaderImage.variant-showcase .status-info {
color: inherit;
}
.detail.course #showHeaderImage.variant-showcase .status-info:link,
.detail.show #showHeaderImage.variant-showcase .status-info:link {
color: inherit;
}
.detail.course #showHeaderImage.variant-showcase .status-info:link:hover,
.detail.show #showHeaderImage.variant-showcase .status-info:link:hover {
color: #000;
}
}
.detail.course #showHeaderImage.variant-showcase .supertitle,
.detail.show #showHeaderImage.variant-showcase .supertitle {
align-self: center;
}
.detail.course .load-more-panel .btn,
.detail.course .load-more-panel .status-info,
.detail.show .load-more-panel .btn,
.detail.show .load-more-panel .status-info {
display: inline-block;
width: auto;
margin: 45px 0 0 0;
padding: 12px 15px;
text-align: center;
}
.detail.course .load-more-panel .btn .fa,
.detail.course .load-more-panel .status-info .fa,
.detail.show .load-more-panel .btn .fa,
.detail.show .load-more-panel .status-info .fa {
transition: transform 0.2s ease-in-out;
}
.detail.course .load-more-panel .btn[aria-expanded=true] .fa,
.detail.course .load-more-panel .status-info[aria-expanded=true] .fa,
.detail.show .load-more-panel .btn[aria-expanded=true] .fa,
.detail.show .load-more-panel .status-info[aria-expanded=true] .fa {
transform: rotate(180deg);
}
.detail.course .load-more-panel .btn,
.detail.show .load-more-panel .btn {
border: none;
border-radius: 0px;
background: #F6F6F6;
color: #000;
box-shadow: none;
font-size: var(--fs-normal);
}
.detail.course .load-more-panel .btn:hover,
.detail.show .load-more-panel .btn:hover {
border: none;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
.detail.course .load-more-panel .btn:active,
.detail.show .load-more-panel .btn:active {
box-shadow: none;
}
.detail.course .load-more-panel .btn[aria-expanded=true],
.detail.show .load-more-panel .btn[aria-expanded=true] {
border: none;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
.detail.course .load-more-panel .status-info,
.detail.show .load-more-panel .status-info {
font-family: inherit;
font-weight: normal;
line-height: 1.2;
text-transform: none;
text-align: center;
color: inherit;
font-size: inherit;
}
.detail.course .load-more-panel .status-info:link,
.detail.show .load-more-panel .status-info:link {
text-decoration: none;
color: inherit;
}
.detail.course .load-more-panel .status-info:link:hover,
.detail.show .load-more-panel .status-info:link:hover {
text-decoration: none;
color: #000;
}
@media (max-width: 767px) {
.detail.course .load-more-panel .status-info,
.detail.show .load-more-panel .status-info {
color: inherit;
}
.detail.course .load-more-panel .status-info:link,
.detail.show .load-more-panel .status-info:link {
color: inherit;
}
.detail.course .load-more-panel .status-info:link:hover,
.detail.show .load-more-panel .status-info:link:hover {
color: #000;
}
}
.detail.course .load-more-panel .btn,
.detail.show .load-more-panel .btn {
margin-top: 0;
}
.showHeaderWrapper .container {
margin-top: 0;
transition: 0.2s margin-top 0.2s ease-in-out;
}
.headerVideoContainer + .showHeaderWrapper .container {
margin-top: 0;
}
.showHeaderWrapper .showHeader {
min-height: 285px;
position: relative;
z-index: 3;
border-bottom: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background: #FFF;
box-shadow: none;
}
.showHeaderWrapper .showHeader .desc {
display: flex;
flex-direction: column;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 22px;
text-transform: none;
color: inherit;
font-size: var(--fs-huge-subtitle);
}
.showHeaderWrapper .showHeader .supertitle {
order: -1;
display: block;
align-self: center;
margin: 15px 0 5px 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.3;
text-transform: uppercase;
background: transparent;
color: #FFF;
font-size: var(--fs-small);
}
.showHeaderWrapper .showHeader h1 {
margin: 10px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-huge-title);
}
.showHeaderWrapper .showHeader h1.with-supertitle {
margin-top: 0;
}
.showHeaderWrapper .showHeader .tagline {
margin: 10px 0 0 0;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.showHeaderWrapper .showHeader .credits {
margin: 10px 0 0 0;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-transform: inherit;
color: inherit;
font-size: inherit;
}
.showHeaderWrapper .showHeader .location {
margin: 10px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1.4;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.showHeaderWrapper .showHeader .venue {
margin: 10px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.4;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.showHeaderWrapper .showHeader .location + .venue {
margin-top: 0;
}
.showHeaderWrapper .showHeader .btn,
.showHeaderWrapper .showHeader .status-info {
display: inline-block;
width: auto;
margin: 45px 0 0 0;
padding: 12px 15px;
text-align: center;
}
.showHeaderWrapper .showHeader .btn .fa,
.showHeaderWrapper .showHeader .status-info .fa {
transition: transform 0.2s ease-in-out;
}
.showHeaderWrapper .showHeader .btn[aria-expanded=true] .fa,
.showHeaderWrapper .showHeader .status-info[aria-expanded=true] .fa {
transform: rotate(180deg);
}
.showHeaderWrapper .showHeader .btn {
border: none;
border-radius: 0px;
background: #F6F6F6;
color: #000;
box-shadow: none;
font-size: var(--fs-normal);
}
.showHeaderWrapper .showHeader .btn:hover {
border: none;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
.showHeaderWrapper .showHeader .btn:active {
box-shadow: none;
}
.showHeaderWrapper .showHeader .btn[aria-expanded=true] {
border: none;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
.showHeaderWrapper .showHeader .status-info {
font-family: inherit;
font-weight: normal;
line-height: 1.2;
text-transform: none;
text-align: center;
color: inherit;
font-size: inherit;
}
.showHeaderWrapper .showHeader .status-info:link {
text-decoration: none;
color: inherit;
}
.showHeaderWrapper .showHeader .status-info:link:hover {
text-decoration: none;
color: #000;
}
@media (max-width: 767px) {
.showHeaderWrapper .showHeader .status-info {
color: inherit;
}
.showHeaderWrapper .showHeader .status-info:link {
color: inherit;
}
.showHeaderWrapper .showHeader .status-info:link:hover {
color: #000;
}
}
@media (min-width: 768px) {
.showHeaderWrapper .showHeader {
display: flex;
}
.showHeaderWrapper .showHeader > * {
flex-grow: 1;
}
.showHeaderWrapper .showHeader > *:last-child:not(:first-child) {
flex-grow: 0;
flex-shrink: 0;
width: 25%;
}
}
.showHeaderWrapper form {
width: 100%;
margin: 0;
}
.showHeaderWrapper .descWrapper {
padding: 30px 45px;
}
.showHeaderWrapper .genres {
flex-grow: 1;
}
.showHeaderWrapper .genres:not(:last-child) ul {
margin: 0 0 -5px 0;
}
.showHeaderWrapper .genres ul li {
list-style: none;
display: inline-block;
margin-right: 15px;
margin-bottom: 5px;
}
.showHeaderWrapper .genres a {
display: block;
padding: 0;
border: none;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: none;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
background: transparent;
color: inherit;
font-size: 14px;
}
.showHeaderWrapper .genres a:hover {
border: none;
text-decoration: none;
background: transparent;
color: #787878;
}
.showHeaderWrapper .desc > .genres {
order: -1;
}
.showHeaderWrapper .pricePopoverBtn {
margin: 0;
padding: 0;
border: none;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: none;
white-space: nowrap;
background: none;
color: inherit;
font-size: var(--fs-normal);
}
.showHeaderWrapper .pricePopoverBtn:hover {
background: none;
color: #3469CB;
}
.showHeaderWrapper .price {
display: flex;
}
.showHeaderWrapper .price > * + * {
margin-left: 15px;
}
@media (max-width: 767px) {
.showHeaderWrapper .price {
justify-content: space-between;
}
}
.showHeaderWrapper .dateContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding: 30px;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
border-top-left-radius: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0;
background: #3B76E4;
color: #FFF;
text-align: center;
}
@media (max-width: 767px) {
.showHeaderWrapper .dateContainer {
display: none;
}
}
.showHeaderWrapper .dateContainer .dateLabel {
margin: 10px 0 0 0;
text-transform: none;
}
.showHeaderWrapper .dateContainer .date {
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
color: #FFF;
font-size: var(--fs-huge-subtitle);
}
.showHeaderWrapper .dateContainer .date > div {
margin: 0 auto;
}
.showHeaderWrapper .dateContainer .date > span + span::before {
content: ", ";
}
.showHeaderWrapper .dateContainer .date .separator {
display: block;
padding: 0 1ex;
line-height: 1;
}
.showHeaderWrapper .dateContainer .date .separator + .time::before {
display: none;
}
.showHeaderWrapper .dateContainer .time {
margin: 15px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
color: inherit;
font-size: var(--fs-huge-title);
}
.showHeaderWrapper .dateContainer .intermission {
margin: 5px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.showHeaderWrapper .dateContainer dl.intermission {
display: grid;
grid-column-gap: 1em;
grid-template-columns: max-content auto;
}
.showHeaderWrapper .dateContainer dl.intermission dt {
white-space: nowrap;
}
.showHeaderWrapper .dateContainer dl.intermission dt,
.showHeaderWrapper .dateContainer dl.intermission dd {
margin: 0;
font-weight: inherit;
line-height: inherit;
}
.showHeaderWrapper .meta {
display: flex;
align-items: center;
width: 100%;
margin: 30px 0 0 0;
color: inherit;
}
@media (max-width: 479px) {
.showHeaderWrapper .meta {
flex-direction: column;
}
.showHeaderWrapper .meta > * {
width: 100%;
}
.showHeaderWrapper .meta > * + * {
margin-top: 15px;
}
}
@media (min-width: 480px) {
.showHeaderWrapper .meta > *:not(:first-child) {
margin-left: 30px;
}
}
.showHeaderWrapper .meta .stars {
white-space: nowrap;
}
.showHeaderWrapper .meta .favourite a,
.showHeaderWrapper .meta .favourite button {
color: inherit;
}
.showHeaderWrapper .meta .favourite a:hover,
.showHeaderWrapper .meta .favourite button:hover {
color: #3469CB;
}
@media (max-width: 479px) {
.showHeaderWrapper .meta .buttonContainer {
margin: 15px 0 0 0;
}
.showHeaderWrapper .meta .buttonContainer .btn {
width: 100%;
}
}
@media (max-width: 479px) {
.showHeaderWrapper .meta .buttonContainer {
text-align: center;
}
}
@media (min-width: 480px) {
.showHeaderWrapper .meta .buttonContainer {
align-self: flex-end;
}
}
@media (min-width: 768px) {
.showHeaderWrapper .meta .buttonContainer {
display: none;
}
}
.showHeaderWrapper .meta .buttonContainer .status-info,
.showHeaderWrapper .meta .buttonContainer .btn {
margin: 0;
}
.showHeaderWrapper.date-nodate .meta .buttonContainer, .showHeaderWrapper.date-topdate .meta .buttonContainer {
display: block;
}
.showHeaderWrapper .top-date {
order: -2;
margin: 30px 0 0 0;
padding: 0;
font-family: inherit;
font-weight: inherit;
line-height: 1;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
@media (min-width: 768px) {
.showHeaderWrapper .top-date {
display: none;
}
}
.showHeaderWrapper .top-date div {
display: inline-block;
}
@media (min-width: 768px) {
.showHeaderWrapper.date-topdate .top-date {
display: block;
}
}
.showHeaderWrapper.variant-flat {
margin-top: 0;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.showlist-genre-intro .container-inner {
padding: 50px 0;
text-align: center;
background: #FFF;
color: #000;
}
.container .showlist-genre-intro.container {
width: auto;
}
@media (min-width: 1200px) {
.showlist-genre-intro .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.showlist-genre-intro:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.showlist-genre-intro h2 {
margin: 0 0 15px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #333;
font-size: var(--fs-large-title);
}
.showlist-genre-intro h2:first-child:last-child {
margin: 0;
}
.showlist-genre-intro p {
font-family: inherit;
font-weight: normal;
line-height: inherit;
text-transform: none;
font-size: inherit;
}
.showlist-genre-intro p:last-child {
margin: 0;
}
/* ----------------------------------------------------------------
List and generics
-----------------------------------------------------------------*/
.listItems {
margin-top: 30px;
}
.listItems > * + * {
margin-top: 30px;
}
.listItems form {
margin-bottom: 0;
}
.listItems li {
list-style: none;
}
.listItems > li {
list-style: none;
}
.listItems > li.separator {
margin: 0;
text-align: left;
grid-column-start: 1;
grid-column-end: 4;
}
@media (max-width: 991px) {
.listItems > li.separator {
grid-column-end: 3;
}
}
@media (max-width: 767px) {
.listItems > li.separator {
grid-column-end: 2;
}
}
.listItems > li.separator h4 {
margin: 60px 0 30px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
color: #999;
font-size: var(--fs-medium-title);
}
.listItems > li .btn {
display: block;
width: 100%;
min-width: 0;
padding: 12px 15px;
border: none;
border-radius: 0px;
background: #ee1b2e;
color: #FFF;
box-shadow: none;
overflow: hidden;
text-align: center;
}
.listItems > li .btn .fa {
margin: 0 0 0 10px;
font-size: inherit;
transition: transform 0.2s ease-in-out;
}
.listItems > li .btn:hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
.listItems > li .btn:active {
box-shadow: none;
}
.listItems > li .btn[aria-expanded=true]:not(.btn-default) {
border: none;
background: #ee1b2e;
color: #FFF;
box-shadow: none;
}
.listItems > li .btn[aria-expanded=true]:not(.btn-default):hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
.listItems > li .btn[aria-expanded=true]:not(.btn-default) .fa {
transform: rotate(180deg);
}
.listItems > li .status-info {
display: block;
width: 100%;
padding: 12px 15px;
font-family: inherit;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
color: inherit;
font-size: var(--fs-normal);
}
.listItems > li .status-info:link {
text-decoration: none;
background: none;
color: inherit;
}
.listItems > li .status-info:link:hover {
text-decoration: none;
background: none;
color: #000;
}
.listItems > li .status-info .fa {
transition: transform 0.2s ease-in-out;
}
.listItems > li .status-info[aria-expanded=true] .fa {
transform: rotate(180deg);
}
.listItems > li .actions {
text-align: right;
padding: 0 15px 10px 0;
}
.listItems > li .actions form {
all: unset;
display: inline-block;
}
.listItems > li .actions .form-group {
all: unset;
}
.listItems > li .actions button {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
text-align: right;
width: auto;
height: auto;
margin: 0;
padding: 2px 5px;
border: none;
font-size: 12px;
background: #FFF;
color: #000;
box-shadow: none;
}
.listItems > li .actions button:hover {
background: #FFF;
color: #3469CB;
}
.listItems > li .actions button span {
margin-right: 1ex;
}
.listItems > li .actions button i {
width: 16px;
text-align: center;
}
.listItems > li .thumb {
display: block;
position: relative;
overflow: hidden;
}
.listItems > li .thumb .image,
.listItems > li .thumb iframe {
display: block;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.listItems > li .thumb.video-loaded {
aspect-ratio: 16/9;
background: #000 !important;
}
.listItems > li .thumb.video-loaded iframe {
background: #000;
}
.listItems > li .thumb .video-play-button {
all: unset;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.listItems > li .thumb .video-play-button > .peppered-icon {
width: 72px;
height: 72px;
border: none;
font-size: 72px;
background: none;
color: #ee1b2e;
}
.listItems.variant-mobile-ish {
display: flex;
flex-wrap: wrap;
}
.listItems.variant-mobile-ish > * {
width: 360px;
margin: 0 5px 15px 5px;
}
@supports (display: grid) {
.listItems.variant-mobile-ish {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
}
.listItems.variant-mobile-ish > * {
width: auto;
margin: 0;
}
@media (max-width: 991px) {
.listItems.variant-mobile-ish {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.listItems.variant-mobile-ish {
grid-template-columns: 1fr;
}
}
}
@media (max-width: 768px) {
.listItems .subshows.collapse.in {
display: none;
}
}
.gotoButtonContainer {
text-align: right;
}
.gotoButtonContainer .btn {
padding: 12px 15px;
border: none;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
font-size: var(--fs-normal);
}
.gotoButtonContainer .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
/* ----------------------------------------------------------------
Regular event lists
-----------------------------------------------------------------*/
.listItemWrapper {
position: relative;
z-index: 1;
border: none;
border-radius: 0px;
background: #F6F6F6;
box-shadow: none;
transition: box-shadow 0.2s ease;
overflow: hidden;
}
@media (min-width: 768px) {
.listItemWrapper {
display: flex;
}
}
.listItems.variant-mobile-ish .listItemWrapper {
flex-direction: column;
height: 100%;
}
.listItems.variant-mobile-ish .listItemWrapper .expand-sub,
.listItems.variant-mobile-ish .listItemWrapper .subshows,
.listItems.variant-mobile-ish .listItemWrapper .subshows.collapse.in {
display: none !important;
}
@media (max-width: 767px) {
.listItemWrapper .expand-sub,
.listItemWrapper .subshows,
.listItemWrapper .subshows.collapse.in {
display: none !important;
}
}
.listItemWrapper .thumb {
display: block;
flex-shrink: 0;
}
@media (min-width: 768px) {
.listItemWrapper .thumb {
width: 25%;
}
.listItemWrapper .thumb.xl {
width: 33.3333333333%;
}
}
.listItems.variant-mobile-ish .listItemWrapper .thumb {
padding-bottom: 56.5217391304%;
}
@media (max-width: 767px) {
.listItemWrapper .thumb {
padding-bottom: 56.5217391304%;
}
}
.listItems.variant-mobile-ish .listItemWrapper .thumb {
width: 100%;
}
.listItems[data-animations*=shadow] .listItemWrapper {
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=shadow] .listItemWrapper:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=shadow] .listItemWrapper:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=glow] .listItemWrapper {
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=glow] .listItemWrapper:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=glow] .listItemWrapper:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=zoom] .listItemWrapper .thumb:not(.video-loaded) .image {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=zoom] .listItemWrapper:hover .thumb:not(.video-loaded) .image {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=zoom] .listItemWrapper:active .thumb:not(.video-loaded) .image {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=twist] .listItemWrapper .thumb:not(.video-loaded) .image {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=twist] .listItemWrapper:hover .thumb:not(.video-loaded) .image {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=twist] .listItemWrapper:active .thumb:not(.video-loaded) .image {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=saturate] .listItemWrapper .thumb:not(.video-loaded) .image {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=saturate] .listItemWrapper:hover .thumb:not(.video-loaded) .image {
filter: none;
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=saturate] .listItemWrapper:active .thumb:not(.video-loaded) .image {
filter: none;
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=desaturate] .listItemWrapper .thumb:not(.video-loaded) .image {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=desaturate] .listItemWrapper:hover .thumb:not(.video-loaded) .image {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=desaturate] .listItemWrapper:active .thumb:not(.video-loaded) .image {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=slide] .listItemWrapper {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=slide] .listItemWrapper:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=slide] .listItemWrapper:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=shift] .listItemWrapper .desc {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.listItems[data-animations*=shift] .listItemWrapper:hover .desc {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.listItems[data-animations*=shift] .listItemWrapper:active .desc {
transform: none;
transition: transform 0.1s ease-in-out;
}
.listItems[data-animations*=skew] .listItemWrapper {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.listItems[data-animations*=skew] .listItemWrapper:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=skew] .listItemWrapper:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.emptyList .listItemWrapper {
display: block;
position: relative;
padding-bottom: 30px;
text-align: center;
line-height: 1.22em;
background: inherit;
box-shadow: none;
font-size: var(--fs-large-subtitle);
}
.emptyList .listItemWrapper .peppered-icon {
position: relative;
margin: 0 auto 20px auto;
color: #F6F6F6;
}
.emptyList .listItemWrapper .peppered-icon svg {
width: 60px;
height: 60px;
}
.listItemWrapper .inner {
flex-grow: 1;
min-height: 200px;
align-self: flex-end;
z-index: 1;
padding: 0;
background: #F6F6F6;
color: inherit;
}
@media (min-width: 768px) {
.listItems:not(.variant-mobile-ish) .listItemWrapper .inner {
display: flex;
}
}
.variant-compact .listItemWrapper .inner {
min-height: 150px;
}
.type-theme .listItemWrapper .inner {
min-height: 150px;
}
.variant-mobile-ish .listItemWrapper .inner {
display: flex;
flex-direction: column;
}
.listItems.variant-mobile-ish .listItemWrapper .inner {
min-height: 0;
padding: 0;
align-self: stretch;
}
@media (max-width: 767px) {
.listItemWrapper .inner {
min-height: 0;
padding: 0;
align-self: stretch;
}
}
.listItemWrapper .descMetaContainer {
display: flex;
flex-direction: column;
flex-grow: 1;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
}
.listItemWrapper .descMetaContainer .desc {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.listItemWrapper .descMetaContainer .desc, .listItemWrapper .descMetaContainer .desc:hover {
text-decoration: none;
color: inherit;
}
.listItemWrapper .descMetaContainer .supertitle {
order: -1;
display: block;
align-self: flex-start;
margin: 0;
padding: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
background: transparent;
color: #ee1b2e;
font-size: var(--fs-small);
}
.listItemWrapper .descMetaContainer .title {
margin: 0;
margin-bottom: 5px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-decoration: none;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-medium-title);
}
.listItemWrapper .descMetaContainer a:hover .title {
text-decoration: none;
color: rgb(76.5, 76.5, 76.5);
}
.listItemWrapper .descMetaContainer .subtitle {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-large-subtitle);
}
.listItemWrapper .descMetaContainer .partOfTheme,
.listItemWrapper .descMetaContainer .tagline {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.listItemWrapper .meta {
justify-content: space-between;
border-top: none;
line-height: 25px;
background: transparent;
font-size: var(--fs-small);
}
.listItems.variant-mobile-ish .listItemWrapper .meta {
line-height: 41px;
}
@media (max-width: 767px) {
.listItemWrapper .meta {
line-height: 41px;
}
}
@media (min-width: 768px) {
.listItems:not(.variant-mobile-ish) .listItemWrapper .meta {
display: flex;
}
}
.listItemWrapper .meta .meta-group {
display: flex;
}
.listItemWrapper .meta .meta-group:first-child {
flex-grow: 1;
}
.listItemWrapper .meta .meta-group:not(:first-child) {
flex-shrink: 0;
}
.listItemWrapper .meta .meta-group > :first-child {
flex-grow: 1;
}
.listItemWrapper .meta .meta-group .genres li:nth-of-type(1n+4) {
display: none;
}
.listItemWrapper .meta .price {
display: inline-flex;
align-items: center;
justify-content: center;
height: 25px;
font-family: inherit;
font-weight: inherit;
line-height: 1;
text-transform: none;
font-size: inherit;
}
.listItemWrapper .meta .price > * {
text-align: center;
}
.listItemWrapper .meta .price button {
display: inline;
margin: 0;
padding: 0;
border: none;
font-size: inherit;
line-height: inherit;
background: transparent;
color: inherit;
}
.listItemWrapper .meta .price,
.listItemWrapper .meta .stars,
.listItemWrapper .meta .favourite,
.listItemWrapper .meta .kijkwijzer {
flex-shrink: 0;
}
@media (min-width: 768px) {
.listItems:not(.variant-mobile-ish) .listItemWrapper .meta .price,
.listItems:not(.variant-mobile-ish) .listItemWrapper .meta .stars,
.listItems:not(.variant-mobile-ish) .listItemWrapper .meta .favourite,
.listItems:not(.variant-mobile-ish) .listItemWrapper .meta .kijkwijzer {
padding: 0 20px;
text-align: right;
border-left: 1px solid #FAFAFA;
}
}
.listItemWrapper .meta .kijkwijzer {
flex-grow: 0;
display: flex;
align-items: center;
}
.listItemWrapper .meta .favourite,
.listItemWrapper .meta .price {
flex-grow: 0;
}
.listItemWrapper .meta .meta-group.remove {
display: flex;
flex-grow: 0;
flex-shrink: 0;
margin: 0 15px 15px 0;
}
.listItemWrapper .meta .meta-group.remove .btn {
display: inline-flex;
align-items: center;
text-align: left;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
font-weight: normal;
font-size: 12px;
background: #FFF;
color: #000;
box-shadow: none;
}
.listItemWrapper .meta .meta-group.remove .btn:hover {
background: #FFF;
color: #3469CB;
}
.listItemWrapper .meta .meta-group.remove .btn span {
margin-left: 1ex;
}
.listItemWrapper .meta .meta-group.remove .btn i {
width: 16px;
margin: 0;
text-align: center;
}
.listItemWrapper .meta .meta-group.button {
flex-grow: 0;
flex-shrink: 0;
margin: 8px 0 8px 15px;
}
.listItems.variant-mobile-ish .listItemWrapper .meta .meta-group.button {
margin-left: 0;
}
@media (max-width: 767px) {
.listItemWrapper .meta .meta-group.button {
margin-left: 0;
}
}
.listItemWrapper .meta .meta-group.button .btn {
border: none;
background: #ee1b2e;
color: #FFF;
}
.listItems.variant-mobile-ish .listItemWrapper .meta .meta-group.button .btn {
width: 100%;
}
@media (max-width: 767px) {
.listItemWrapper .meta .meta-group.button .btn {
width: 100%;
}
}
.listItemWrapper .meta .meta-group.button .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.listItemWrapper .dateTimeContainer {
flex-shrink: 0;
position: relative;
border-top: none;
border-bottom: none;
background: #F6F6F6;
color: #FFF;
}
@media (min-width: 768px) {
.listItemWrapper .dateTimeContainer {
width: 22.2222222222%;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.listItemWrapper .dateTimeContainer {
width: 26.6666666667%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.listItemWrapper .dateTimeContainer {
width: 33.3333333333%;
}
}
@media (min-width: 768px) {
.listItems:not(.variant-mobile-ish) .listItemWrapper .dateTimeContainer {
border-right: none;
border-left: none;
}
}
.listItems.variant-mobile-ish .listItemWrapper .dateTimeContainer {
width: 100%;
}
.listItemWrapper .dateTimeContainer .dateTimeInner {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
position: relative;
}
.listItemWrapper .dateTimeContainer .btn {
width: 100%;
}
.listItemWrapper .datetime {
text-align: left;
margin: 0;
padding: 0;
background: transparent;
color: inherit;
}
.orderItem .listItemWrapper .datetime {
background: transparent;
color: inherit;
}
.listItems.variant-mobile-ish .listItemWrapper .datetime {
display: none;
}
@media (max-width: 767px) {
.listItemWrapper .datetime {
display: none;
}
}
.listItemWrapper .datetime span {
display: inline-block;
}
.listItemWrapper .datetime .date {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
font-size: var(--fs-large);
}
.listItemWrapper .datetime .date .separator {
padding: 0 1ex;
line-height: 1;
}
.listItemWrapper .datetime .date .separator + .time::before {
display: none;
}
.listItemWrapper .datetime .time {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.orderItem .listItemWrapper .datetime .time {
color: inherit;
}
.listItemWrapper .datetime .time::before {
content: "-";
display: block;
speak: none;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
font-size: var(--fs-large);
}
.listItemWrapper .top-date {
order: -2;
display: none;
align-self: flex-start;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-small);
}
li.topdate .listItemWrapper .top-date {
display: block;
}
.listItems.variant-mobile-ish .listItemWrapper .top-date {
display: block;
}
@media (max-width: 767px) {
.listItemWrapper .top-date {
display: block;
}
}
.listItemWrapper .top-date div {
display: inline-block;
}
.listItemWrapper .dateBox {
order: -1;
flex-shrink: 0;
width: 16.6666666667%;
margin: 0;
padding: 20px 30px 10px 15px;
border-top: none;
border-bottom: none;
border-left: none;
background: transparent;
}
.listItemWrapper .dateBox .datetime {
text-align: left;
}
@media (max-width: 767px) {
.listItemWrapper .dateBox {
display: none;
}
}
.listItemWrapper .dateBox + .descMetaContainer {
border-left: none;
}
.orderItem .listItemWrapper .dateBox {
align-self: stretch;
width: 25%;
}
.listItemWrapper a.mobile-button {
display: none;
}
.listItems.variant-mobile-ish .listItemWrapper a.mobile-button {
display: block;
}
@media (max-width: 767px) {
.listItemWrapper a.mobile-button {
display: block;
}
}
.listItemWrapper .dateLabel {
padding: 10px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
color: inherit;
text-align: center;
font-size: var(--fs-small);
}
@media (min-width: 768px) {
.eventCard.extended .listItemWrapper {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.eventCard.extended .listItemWrapper .inner {
border-top-left-radius: 0px;
}
.eventCard.extended .listItemWrapper .thumb {
min-height: 540px;
position: static;
}
.eventCard.extended .listItemWrapper .thumb .image,
.eventCard.extended .listItemWrapper .thumb iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.listItemWrapper.with-info-link .descMetaContainer {
position: relative;
}
.listItemWrapper.with-info-link .descMetaContainer .tagline > .info-link {
margin-left: 1ex;
}
.listItemWrapper.with-info-link .descMetaContainer .info-link {
padding: 0;
text-decoration: underline;
color: #000;
font-size: var(--fs-small);
}
.listItemWrapper.with-info-link .descMetaContainer .info-link:hover {
text-decoration: underline;
color: #000;
}
.listItemWrapper.with-info-link .descMetaContainer .info-link.single {
padding: 10px 0;
}
.listItemWrapper.with-info-link .descMetaContainer .wishlist {
display: block;
position: absolute;
right: 0;
padding: 20px 30px 10px 30px;
}
@media (min-width: 768px) {
.listItems:not(.variant-mobile-ish) .listItemWrapper.with-info-link .descMetaContainer .wishlist {
display: none;
}
}
.listItemWrapper.with-info-link .meta {
display: flex;
align-items: center;
}
.listItemWrapper.with-info-link .meta .wishlist {
display: none;
}
@media (min-width: 768px) {
.listItems:not(.variant-mobile-ish) .listItemWrapper.with-info-link .meta .wishlist {
display: block;
position: unset;
padding: 0;
}
}
.variant-mobile-ish .tagline > .info-link {
margin-left: 1ex;
}
.variant-mobile-ish .info-link {
padding: 0;
text-decoration: underline;
color: #000;
font-size: var(--fs-small);
}
.variant-mobile-ish .info-link:hover {
text-decoration: underline;
color: #000;
}
.variant-mobile-ish .info-link.single {
padding: 10px 0;
}
.eventCard .desc {
padding: 20px 20px 10px 20px;
}
@media (max-width: 767px) {
.eventCard .desc {
padding: 20px 20px 10px 20px;
}
}
.eventCard .meta {
padding: 0 20px;
}
@media (max-width: 767px) {
.eventCard .meta {
padding: 0 20px;
}
}
.eventCard .meta .genres {
padding: 10px 0;
}
.eventCard .dateTimeInner {
padding: 30px 20px 10px 20px;
}
@media (max-width: 767px) {
.eventCard .dateTimeInner {
padding: 15px;
}
}
.eventCard.variant-mobile-ish .desc {
padding: 20px 20px 10px 20px;
}
.eventCard.variant-mobile-ish .meta {
padding: 0 20px;
}
.eventCard.variant-mobile-ish .dateTimeInner {
padding: 15px;
}
.eventCard--topgenre .desc {
padding: 20px 20px 10px 20px;
}
/* ----------------------------------------------------------------
Brochure
-----------------------------------------------------------------*/
.container.wide {
width: 100%;
padding: 0 15px;
}
@media (min-width: 1366px) {
.container.wide .listItems.variant-brochure {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
}
}
@media (min-width: 1920px) {
.container.wide .listItems.variant-brochure {
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: auto;
}
}
.listItems.variant-brochure {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-auto-flow: dense;
}
.listItems.variant-brochure > * + * {
margin-top: 0;
}
@media (max-width: 991px) {
.listItems.variant-brochure {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: calc(50vw - 15px);
}
}
@media (max-width: 600px) {
.listItems.variant-brochure {
display: block;
}
.listItems.variant-brochure > * {
height: calc(100vw - 2 * 15px);
}
.listItems.variant-brochure > * + * {
margin-top: 15px;
}
}
.listItems.variant-brochure .brochureCard {
background: #F6F6F6;
}
.listItems.variant-brochure .brochureCard .main,
.listItems.variant-brochure .brochureCard .meta-group:not(.buttons) .btn.btn-active,
.listItems.variant-brochure .brochureCard .close-button,
.listItems.variant-brochure .brochureCard .next-button,
.listItems.variant-brochure .brochureCard .prev-button {
display: none;
}
.listItems.variant-brochure .brochureCard .thumb {
overflow: hidden;
}
.listItems.variant-brochure .brochureCard .poster {
display: none;
}
.listItems[data-animations*=shadow] .brochureCard {
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=shadow] .brochureCard:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=shadow] .brochureCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=glow] .brochureCard {
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=glow] .brochureCard:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=glow] .brochureCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=zoom] .brochureCard .thumb:not(.video-loaded) .image {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=zoom] .brochureCard:hover .thumb:not(.video-loaded) .image {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=zoom] .brochureCard:active .thumb:not(.video-loaded) .image {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=twist] .brochureCard .thumb:not(.video-loaded) .image {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=twist] .brochureCard:hover .thumb:not(.video-loaded) .image {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=twist] .brochureCard:active .thumb:not(.video-loaded) .image {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=saturate] .brochureCard .thumb:not(.video-loaded) .image {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=saturate] .brochureCard:hover .thumb:not(.video-loaded) .image {
filter: none;
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=saturate] .brochureCard:active .thumb:not(.video-loaded) .image {
filter: none;
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=desaturate] .brochureCard .thumb:not(.video-loaded) .image {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=desaturate] .brochureCard:hover .thumb:not(.video-loaded) .image {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=desaturate] .brochureCard:active .thumb:not(.video-loaded) .image {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=slide] .brochureCard {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.listItems[data-animations*=slide] .brochureCard:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=slide] .brochureCard:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.listItems[data-animations*=shift] .brochureCard .desc {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.listItems[data-animations*=shift] .brochureCard:hover .desc {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.listItems[data-animations*=shift] .brochureCard:active .desc {
transform: none;
transition: transform 0.1s ease-in-out;
}
.listItems[data-animations*=skew] .brochureCard {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.listItems[data-animations*=skew] .brochureCard:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.listItems[data-animations*=skew] .brochureCard:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.listItems.variant-brochure [data-video-url],
.brochure-modal-root .modal-inner [data-video-url] {
color: #ee1b2e;
}
.listItems.variant-brochure [data-video-url] .image,
.brochure-modal-root .modal-inner [data-video-url] .image {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.listItems.variant-brochure [data-video-url] .video-play-button,
.brochure-modal-root .modal-inner [data-video-url] .video-play-button {
all: unset;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.listItems.variant-brochure [data-video-url] .video-play-button > .peppered-icon,
.brochure-modal-root .modal-inner [data-video-url] .video-play-button > .peppered-icon {
width: 72px;
height: 72px;
border: none;
font-size: 72px;
background: none;
color: #ee1b2e;
}
.listItems.variant-brochure > .brochureCard,
.brochure-modal-root .modal-inner > .brochureCard {
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
border: none;
border-radius: 0px;
box-shadow: none;
}
.listItems.variant-brochure > .brochureCard.has-popover,
.brochure-modal-root .modal-inner > .brochureCard.has-popover {
z-index: 2;
}
.listItems.variant-brochure > .brochureCard.extended,
.brochure-modal-root .modal-inner > .brochureCard.extended {
grid-column-end: span 2;
grid-row-end: span 2;
}
.listItems.variant-brochure > .brochureCard.mini,
.brochure-modal-root .modal-inner > .brochureCard.mini {
height: 50%;
overflow: visible;
}
.listItems.variant-brochure > .brochureCard.mini .thumb,
.listItems.variant-brochure > .brochureCard.mini .dateBox,
.listItems.variant-brochure > .brochureCard.mini .tagline,
.brochure-modal-root .modal-inner > .brochureCard.mini .thumb,
.brochure-modal-root .modal-inner > .brochureCard.mini .dateBox,
.brochure-modal-root .modal-inner > .brochureCard.mini .tagline {
display: none;
}
.listItems.variant-brochure > .brochureCard .picture__image,
.brochure-modal-root .modal-inner > .brochureCard .picture__image {
object-position: center center;
}
.listItems.variant-brochure > .brochureCard .thumb,
.brochure-modal-root .modal-inner > .brochureCard .thumb {
position: relative;
z-index: 1;
flex: 0 1 auto;
}
.listItems.variant-brochure > .brochureCard .thumb .image,
.brochure-modal-root .modal-inner > .brochureCard .thumb .image {
position: static;
}
.listItems.variant-brochure > .brochureCard .thumb, .listItems.variant-brochure > .brochureCard .thumb > *,
.brochure-modal-root .modal-inner > .brochureCard .thumb,
.brochure-modal-root .modal-inner > .brochureCard .thumb > * {
border-radius: inherit;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.listItems.variant-brochure > .brochureCard .thumb.video-loaded ~ .dateBox,
.brochure-modal-root .modal-inner > .brochureCard .thumb.video-loaded ~ .dateBox {
opacity: 0;
}
.listItems.variant-brochure > .brochureCard .thumb iframe,
.brochure-modal-root .modal-inner > .brochureCard .thumb iframe {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
.listItems.variant-brochure > .brochureCard .thumb .video-play-button,
.brochure-modal-root .modal-inner > .brochureCard .thumb .video-play-button {
position: absolute;
}
.listItems.variant-brochure > .brochureCard .dateBox,
.brochure-modal-root .modal-inner > .brochureCard .dateBox {
position: absolute;
top: 0;
left: 0;
z-index: 1;
margin: 15px 0 0 15px;
padding: 0.5em;
border-radius: inherit;
font-family: inherit;
line-height: 1.2;
background: #FFF;
color: inherit;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
font-size: var(--fs-small);
}
.listItems.variant-brochure > .brochureCard .datetime,
.brochure-modal-root .modal-inner > .brochureCard .datetime {
margin: 0;
color: #000;
font-size: var(--fs-small);
}
.listItems.variant-brochure > .brochureCard .desc,
.brochure-modal-root .modal-inner > .brochureCard .desc {
display: flex;
flex: 1 0 auto;
flex-direction: column;
min-height: 20%;
padding: 15px;
}
.listItems.variant-brochure > .brochureCard .desc:link, .listItems.variant-brochure > .brochureCard .desc:link:hover,
.brochure-modal-root .modal-inner > .brochureCard .desc:link,
.brochure-modal-root .modal-inner > .brochureCard .desc:link:hover {
text-decoration: none;
color: inherit;
}
.listItems.variant-brochure > .brochureCard .supertitle,
.brochure-modal-root .modal-inner > .brochureCard .supertitle {
order: -1;
display: block;
align-self: flex-start;
margin: 0 0 5px 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: uppercase;
background: transparent;
color: #ee1b2e;
font-size: var(--fs-tiny);
}
.listItems.variant-brochure > .brochureCard .title,
.brochure-modal-root .modal-inner > .brochureCard .title {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1.2;
text-decoration: none;
text-transform: none;
color: #000;
font-size: var(--fs-small-title);
}
.listItems.variant-brochure > .brochureCard .desc:link:hover .title,
.brochure-modal-root .modal-inner > .brochureCard .desc:link:hover .title {
text-decoration: none;
color: #000;
}
.listItems.variant-brochure > .brochureCard .subtitle,
.brochure-modal-root .modal-inner > .brochureCard .subtitle {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-small);
}
.listItems.variant-brochure > .brochureCard .tagline,
.brochure-modal-root .modal-inner > .brochureCard .tagline {
max-width: unset;
margin: 5px 0 0 0;
color: #000;
font-size: var(--fs-small);
}
.listItems.variant-brochure > .brochureCard .tagline p,
.brochure-modal-root .modal-inner > .brochureCard .tagline p {
margin: 0;
}
.listItems.variant-brochure > .brochureCard .meta,
.brochure-modal-root .modal-inner > .brochureCard .meta {
display: flex;
flex: 1;
align-items: flex-end;
padding: 0 0 15px 0;
}
.listItems.variant-brochure > .brochureCard .meta > *,
.brochure-modal-root .modal-inner > .brochureCard .meta > * {
display: flex;
align-items: center;
}
.listItems.variant-brochure > .brochureCard .meta > *:first-child,
.brochure-modal-root .modal-inner > .brochureCard .meta > *:first-child {
flex: 1;
padding: 0 0 0 15px;
}
.listItems.variant-brochure > .brochureCard .meta > *:last-child,
.brochure-modal-root .modal-inner > .brochureCard .meta > *:last-child {
padding: 0 15px;
}
.listItems.variant-brochure > .brochureCard .meta-group.buttons .date,
.brochure-modal-root .modal-inner > .brochureCard .meta-group.buttons .date {
display: none;
}
.listItems.variant-brochure > .brochureCard .meta-group.buttons > * + *,
.brochure-modal-root .modal-inner > .brochureCard .meta-group.buttons > * + * {
margin-left: 10px;
}
.listItems.variant-brochure > .brochureCard form,
.brochure-modal-root .modal-inner > .brochureCard form {
margin: 0;
}
.listItems.variant-brochure > .brochureCard .status-info,
.listItems.variant-brochure > .brochureCard .btn-unavailable,
.brochure-modal-root .modal-inner > .brochureCard .status-info,
.brochure-modal-root .modal-inner > .brochureCard .btn-unavailable {
display: none !important;
}
.listItems.variant-brochure > .brochureCard .events .btn,
.listItems.variant-brochure > .brochureCard .buttons .btn,
.listItems.variant-brochure > .brochureCard .buttons button,
.listItems.variant-brochure > .brochureCard .buttons [aria-controls],
.brochure-modal-root .modal-inner > .brochureCard .events .btn,
.brochure-modal-root .modal-inner > .brochureCard .buttons .btn,
.brochure-modal-root .modal-inner > .brochureCard .buttons button,
.brochure-modal-root .modal-inner > .brochureCard .buttons [aria-controls] {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
min-width: 0;
height: 32px;
position: relative;
padding: 4px;
border: none;
border-radius: 100%;
background: rgb(232.05, 232.05, 232.05);
color: #333;
}
.listItems.variant-brochure > .brochureCard .events .btn .peppered-icon,
.listItems.variant-brochure > .brochureCard .buttons .btn .peppered-icon,
.listItems.variant-brochure > .brochureCard .buttons button .peppered-icon,
.listItems.variant-brochure > .brochureCard .buttons [aria-controls] .peppered-icon,
.brochure-modal-root .modal-inner > .brochureCard .events .btn .peppered-icon,
.brochure-modal-root .modal-inner > .brochureCard .buttons .btn .peppered-icon,
.brochure-modal-root .modal-inner > .brochureCard .buttons button .peppered-icon,
.brochure-modal-root .modal-inner > .brochureCard .buttons [aria-controls] .peppered-icon {
display: inline-flex;
}
.listItems.variant-brochure > .brochureCard .events .btn .label,
.listItems.variant-brochure > .brochureCard .events .btn .property,
.listItems.variant-brochure > .brochureCard .buttons .btn .label,
.listItems.variant-brochure > .brochureCard .buttons .btn .property,
.listItems.variant-brochure > .brochureCard .buttons button .label,
.listItems.variant-brochure > .brochureCard .buttons button .property,
.listItems.variant-brochure > .brochureCard .buttons [aria-controls] .label,
.listItems.variant-brochure > .brochureCard .buttons [aria-controls] .property,
.brochure-modal-root .modal-inner > .brochureCard .events .btn .label,
.brochure-modal-root .modal-inner > .brochureCard .events .btn .property,
.brochure-modal-root .modal-inner > .brochureCard .buttons .btn .label,
.brochure-modal-root .modal-inner > .brochureCard .buttons .btn .property,
.brochure-modal-root .modal-inner > .brochureCard .buttons button .label,
.brochure-modal-root .modal-inner > .brochureCard .buttons button .property,
.brochure-modal-root .modal-inner > .brochureCard .buttons [aria-controls] .label,
.brochure-modal-root .modal-inner > .brochureCard .buttons [aria-controls] .property {
width: 1px;
height: 1px;
position: absolute;
top: -999px;
left: -999px;
overflow: hidden;
}
.listItems.variant-brochure > .brochureCard .events .btn:hover,
.listItems.variant-brochure > .brochureCard .buttons .btn:hover,
.listItems.variant-brochure > .brochureCard .buttons button:hover,
.listItems.variant-brochure > .brochureCard .buttons [aria-controls]:hover,
.brochure-modal-root .modal-inner > .brochureCard .events .btn:hover,
.brochure-modal-root .modal-inner > .brochureCard .buttons .btn:hover,
.brochure-modal-root .modal-inner > .brochureCard .buttons button:hover,
.brochure-modal-root .modal-inner > .brochureCard .buttons [aria-controls]:hover {
background: rgb(232.05, 232.05, 232.05);
color: #000;
}
.listItems.variant-brochure > .brochureCard .events .btn.event-in-cart,
.listItems.variant-brochure > .brochureCard .buttons .btn.event-in-cart,
.listItems.variant-brochure > .brochureCard .buttons button.event-in-cart,
.listItems.variant-brochure > .brochureCard .buttons [aria-controls].event-in-cart,
.brochure-modal-root .modal-inner > .brochureCard .events .btn.event-in-cart,
.brochure-modal-root .modal-inner > .brochureCard .buttons .btn.event-in-cart,
.brochure-modal-root .modal-inner > .brochureCard .buttons button.event-in-cart,
.brochure-modal-root .modal-inner > .brochureCard .buttons [aria-controls].event-in-cart {
background: #DDD;
color: #3469CB;
}
.listItems.variant-brochure > .brochureCard .events .btn.event-in-cart:hover,
.listItems.variant-brochure > .brochureCard .buttons .btn.event-in-cart:hover,
.listItems.variant-brochure > .brochureCard .buttons button.event-in-cart:hover,
.listItems.variant-brochure > .brochureCard .buttons [aria-controls].event-in-cart:hover,
.brochure-modal-root .modal-inner > .brochureCard .events .btn.event-in-cart:hover,
.brochure-modal-root .modal-inner > .brochureCard .buttons .btn.event-in-cart:hover,
.brochure-modal-root .modal-inner > .brochureCard .buttons button.event-in-cart:hover,
.brochure-modal-root .modal-inner > .brochureCard .buttons [aria-controls].event-in-cart:hover {
background: #DDD;
color: #3469CB;
}
.listItems.variant-brochure > .brochureCard .events,
.brochure-modal-root .modal-inner > .brochureCard .events {
margin: 30px;
font-size: var(--fs-small);
}
@media (min-width: 600px) {
.listItems.variant-brochure > .brochureCard .events,
.brochure-modal-root .modal-inner > .brochureCard .events {
margin-top: 0;
}
}
.listItems.variant-brochure > .brochureCard .events > .btn,
.listItems.variant-brochure > .brochureCard .events > button,
.brochure-modal-root .modal-inner > .brochureCard .events > .btn,
.brochure-modal-root .modal-inner > .brochureCard .events > button {
width: 100%;
min-width: 0;
}
.listItems.variant-brochure > .brochureCard .events button.expand,
.brochure-modal-root .modal-inner > .brochureCard .events button.expand {
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
padding: 5px;
border: none;
background: transparent;
color: #333;
font-size: 12px;
}
.listItems.variant-brochure > .brochureCard .events button.expand:hover,
.brochure-modal-root .modal-inner > .brochureCard .events button.expand:hover {
color: #000;
}
.listItems.variant-brochure > .brochureCard .events ul,
.brochure-modal-root .modal-inner > .brochureCard .events ul {
list-style: none;
}
.listItems.variant-brochure > .brochureCard .events li,
.brochure-modal-root .modal-inner > .brochureCard .events li {
display: flex;
align-items: center;
margin: 0;
padding: 10px 15px;
border-radius: 0px;
background: rgb(247.35, 247.35, 247.35);
}
.listItems.variant-brochure > .brochureCard .events li + li,
.brochure-modal-root .modal-inner > .brochureCard .events li + li {
margin-top: 5px;
}
.listItems.variant-brochure > .brochureCard .events li > :first-child,
.brochure-modal-root .modal-inner > .brochureCard .events li > :first-child {
flex: 1;
margin-right: 20px;
}
.listItems.variant-brochure > .brochureCard .events li > * + *,
.brochure-modal-root .modal-inner > .brochureCard .events li > * + * {
margin-left: 10px;
}
.listItems.variant-brochure > .brochureCard .events li.extra,
.brochure-modal-root .modal-inner > .brochureCard .events li.extra {
display: none;
}
.listItems.variant-brochure > .brochureCard .events .location,
.listItems.variant-brochure > .brochureCard .events .status,
.brochure-modal-root .modal-inner > .brochureCard .events .location,
.brochure-modal-root .modal-inner > .brochureCard .events .status {
margin: 5px 0 0 0;
font-size: var(--fs-tiny);
}
.listItems.variant-brochure > .brochureCard .events .venue,
.brochure-modal-root .modal-inner > .brochureCard .events .venue {
margin: 5px 0 0 0;
font-size: var(--fs-tiny);
}
.listItems.variant-brochure > .brochureCard .events .location + .venue,
.brochure-modal-root .modal-inner > .brochureCard .events .location + .venue {
margin-top: 0;
}
.listItems.variant-brochure > .brochureCard .events .fa-map-marker,
.brochure-modal-root .modal-inner > .brochureCard .events .fa-map-marker {
display: none;
}
.listItems.variant-brochure > .brochureCard .event-list-popover,
.brochure-modal-root .modal-inner > .brochureCard .event-list-popover {
width: 100%;
max-height: 60vh;
position: absolute;
overflow: auto;
top: 100%;
right: 0;
z-index: 2;
border-radius: 0px;
background: #FFF;
box-shadow: inherit;
}
.listItems.variant-brochure > .brochureCard .event-list-popover::before,
.brochure-modal-root .modal-inner > .brochureCard .event-list-popover::before {
content: "";
display: block;
position: absolute;
top: -6px;
right: 26px;
border-top: none;
border-right: 6px solid transparent;
border-bottom: 6px solid #FFF;
border-left: 6px solid transparent;
}
.listItems.variant-brochure > .brochureCard .event-list-popover.heart::before,
.brochure-modal-root .modal-inner > .brochureCard .event-list-popover.heart::before {
right: 66px;
}
.listItems.variant-brochure > .brochureCard .event-list-popover:not([aria-expanded=true]),
.brochure-modal-root .modal-inner > .brochureCard .event-list-popover:not([aria-expanded=true]) {
display: none;
}
.listItems.variant-brochure > .brochureCard .event-list-popover .events,
.brochure-modal-root .modal-inner > .brochureCard .event-list-popover .events {
max-height: inherit;
margin: 0;
padding: 20px;
overflow: auto;
}
.listItems.variant-brochure > .brochureCard .event-list-popover.heart form.tickets, .listItems.variant-brochure > .brochureCard .event-list-popover.heart .cart,
.brochure-modal-root .modal-inner > .brochureCard .event-list-popover.heart form.tickets,
.brochure-modal-root .modal-inner > .brochureCard .event-list-popover.heart .cart {
display: none;
}
.listItems.variant-brochure > .brochureCard .event-list-popover.cart .favourite,
.brochure-modal-root .modal-inner > .brochureCard .event-list-popover.cart .favourite {
display: none;
}
.listItems.variant-brochure > .brochureCard.extended .event-list-popover,
.brochure-modal-root .modal-inner > .brochureCard.extended .event-list-popover {
width: 50%;
}
.brochure-modal-root {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
z-index: 1000;
padding: 0 45px;
background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 900px) {
.brochure-modal-root {
padding: 0 20px;
background: #FFF;
}
}
.brochure-modal-root .modal-inner {
list-style: none;
max-width: 740px;
position: relative;
z-index: 1;
margin: 0 auto;
padding: 30px 0;
border-radius: 0px;
will-change: transform, opacity;
transition: 0.3s ease-in-out;
}
.brochure-modal-root .modal-inner:not(.visible) {
opacity: 0;
transform: scale(0);
}
.brochure-modal-root .modal-inner:not(.visible).to-right {
transform: translateX(-100vw);
}
.brochure-modal-root .modal-inner:not(.visible).to-left {
transform: translateX(100vw);
}
.brochure-modal-root .modal-inner > .brochureCard {
display: block;
position: relative;
z-index: 0;
background: #FFF;
}
@media (max-width: 900px) {
.brochure-modal-root .modal-inner > .brochureCard {
box-shadow: none;
}
}
.brochure-modal-root .modal-inner > .brochureCard .thumb {
position: relative;
overflow: hidden;
}
.brochure-modal-root .modal-inner > .brochureCard .poster-overlay {
width: 60%;
position: absolute;
top: 0;
right: 0;
z-index: 4;
padding-bottom: 56.25%;
background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
pointer-events: none;
}
.brochure-modal-root .modal-inner > .brochureCard .poster {
display: block;
max-width: 235px;
margin: auto;
padding: 0 0 20px 0;
}
.brochure-modal-root .modal-inner > .brochureCard .poster.floating {
position: absolute;
right: 30px;
text-align: center;
z-index: 5;
transform: translateY(-100%);
}
.brochure-modal-root .modal-inner > .brochureCard .tagline {
display: none;
}
.brochure-modal-root .modal-inner > .brochureCard.mini {
height: auto;
}
.brochure-modal-root .modal-inner > .brochureCard.mini .thumb,
.brochure-modal-root .modal-inner > .brochureCard.mini .dateBox,
.brochure-modal-root .modal-inner > .brochureCard.mini .tagline {
display: block;
}
.brochure-modal-root .modal-inner > .brochureCard.mini .desc .datetime {
display: none;
}
@media (min-width: 600px) {
.brochure-modal-root .modal-inner > .brochureCard .main {
display: flex;
}
}
.brochure-modal-root .modal-inner > .brochureCard .main > * {
flex: 2;
}
.brochure-modal-root .modal-inner > .brochureCard .main > *:first-child {
flex: 3;
}
.brochure-modal-root .modal-inner > .brochureCard .desc {
display: flex;
flex-direction: column;
margin: 20px 30px 30px 30px;
padding: 0;
}
.brochure-modal-root .modal-inner > .brochureCard .desc.wrapped {
padding-right: 265px;
}
.brochure-modal-root .modal-inner > .brochureCard .supertitle {
order: -1;
align-self: flex-start;
margin: 0 0 5px 0;
font-size: var(--fs-small);
}
.brochure-modal-root .modal-inner > .brochureCard .title {
margin: 0 0 5px 0;
font-size: var(--fs-large-title);
}
.brochure-modal-root .modal-inner > .brochureCard .subtitle {
margin: 0;
font-size: var(--fs-small-title);
}
.brochure-modal-root .modal-inner > .brochureCard .richtext {
margin: 0 30px;
font-family: inherit;
font-weight: normal;
line-height: 1.4;
text-transform: none;
color: inherit;
font-size: inherit;
}
.brochure-modal-root .modal-inner > .brochureCard .richtext h3 {
font-size: var(--fs-medium-title);
}
.brochure-modal-root .modal-inner > .brochureCard .richtext + .richtext {
margin-top: 30px;
}
.brochure-modal-root .modal-inner > .brochureCard .teaser {
margin: 0 30px;
font-family: inherit;
font-weight: bold;
line-height: 1.4;
text-transform: none;
color: inherit;
font-size: inherit;
}
.brochure-modal-root .modal-inner > .brochureCard .video {
margin: 15px 30px;
}
.brochure-modal-root .modal-inner > .brochureCard .meta {
padding: 0 30px 20px 30px;
}
.brochure-modal-root .modal-inner > .brochureCard .meta > *:first-child {
padding: 0;
}
.brochure-modal-root .modal-inner > .brochureCard .meta > *:last-child {
padding: 0;
}
.brochure-modal-root .modal-inner > .brochureCard .meta .btn-active {
display: inline-block;
margin-left: 15px;
}
.brochure-modal-root .modal-inner > .brochureCard .meta-group.buttons {
display: none;
}
.brochure-modal-root button.prev-button,
.brochure-modal-root button.next-button,
.brochure-modal-root button.close-button {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
position: fixed;
top: 30px;
right: 0;
z-index: 2;
margin: 0;
padding: 0;
border: none;
border-radius: 100%;
background: #FFF;
color: #000;
opacity: 0.8;
cursor: pointer;
will-change: opacity;
transition: all 0.2s ease-in-out;
}
.brochure-modal-root button.prev-button:hover,
.brochure-modal-root button.next-button:hover,
.brochure-modal-root button.close-button:hover {
transition: all 0.1s ease-in-out;
opacity: 1;
}
.brochure-modal-root button.prev-button::before,
.brochure-modal-root button.next-button::before,
.brochure-modal-root button.close-button::before {
content: "";
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
background: transparent;
}
.brochure-modal-root button.prev-button > *,
.brochure-modal-root button.next-button > *,
.brochure-modal-root button.close-button > * {
pointer-events: none;
}
.brochure-modal-root button.close-button {
position: absolute;
top: -15px;
right: -15px;
}
.brochure-modal-root button.prev-button,
.brochure-modal-root button.next-button {
right: 50%;
margin-top: -15px;
margin-right: -400px;
}
.brochure-modal-root button.prev-button .fa-lg,
.brochure-modal-root button.next-button .fa-lg {
display: none;
}
@media (min-width: 901px) {
.brochure-modal-root button.prev-button,
.brochure-modal-root button.next-button {
width: 30px;
height: 200px;
top: 360px;
font-size: 50px;
background: transparent;
color: #FFF;
}
.brochure-modal-root button.prev-button .fa-lg,
.brochure-modal-root button.next-button .fa-lg {
display: block;
}
.brochure-modal-root button.prev-button :not(.fa-lg),
.brochure-modal-root button.next-button :not(.fa-lg) {
display: none;
}
}
.brochure-modal-root button.prev-button {
right: auto;
left: 50%;
margin-right: 0;
margin-left: -400px;
}
@media (max-width: 900px) {
.brochure-modal-root button.next-button,
.brochure-modal-root button.prev-button {
top: 50vh;
}
.brochure-modal-root button.next-button {
margin-right: calc(-50vw + 5px);
}
.brochure-modal-root button.prev-button {
margin-left: calc(-50vw + 5px);
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.featuredFlexgrid.layout-full-width {
padding-right: 0;
padding-left: 0;
}
.featuredFlexgrid .featuredExtraBtn {
text-align: center;
}
.featuredFlexgrid .featuredExtraBtn .btn {
margin: 50px 0;
}
.featuredFlexgrid .featuredExtraTopBtn .inner {
text-align: center;
}
@media (min-width: 768px) {
.featuredFlexgrid .featuredExtraTopBtn .inner {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.featuredFlexgrid .featuredExtraTopBtn .inner .btn {
width: auto;
min-width: 170px;
}
.featuredFlexgrid .featuredExtraTopBtn h2 {
margin: 50px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
color: inherit;
font-size: var(--fs-large-title);
}
.featuredFlexgrid .featuredExtraTopBtn .btn {
margin: 50px 0;
border: none;
background: #ee1b2e;
color: #FFF;
}
.featuredFlexgrid .featuredExtraTopBtn .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.featuredFlexgrid .flexRow {
display: flex;
flex-wrap: wrap;
padding: 0;
/*
alignment strategies:
left: center:
[ =
[ [ = =
[ [ [ = = =
*/
}
.featuredFlexgrid .flexRow > * {
width: 100%;
margin: 0 5px;
}
.featuredFlexgrid .flexRow[data-item-count="2"] > * {
width: 575px;
}
.featuredFlexgrid .flexRow[data-item-count="3"] > * {
width: 380px;
}
.featuredFlexgrid .flexRow[data-item-count="4"] > * {
width: 280px;
}
@supports (display: grid) {
.featuredFlexgrid .flexRow {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: 1fr;
}
.featuredFlexgrid .flexRow[data-item-count] > * {
width: 100%;
margin: 0;
}
.featuredFlexgrid .flexRow[data-item-count="2"] {
grid-template-columns: 1fr 1fr;
}
.featuredFlexgrid .flexRow[data-item-count="3"] {
grid-template-columns: 1fr 1fr 1fr;
}
.featuredFlexgrid .flexRow[data-item-count="4"] {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.featuredFlexgrid .flexRow[data-item-count="2"], .featuredFlexgrid .flexRow[data-item-count="3"] {
grid-template-columns: 1fr 1fr;
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem:last-child {
grid-column: span 2;
}
.featuredFlexgrid .flexRow[data-item-count="4"] {
grid-template-columns: 1fr 1fr;
}
}
}
@media (max-width: 767px) {
.featuredFlexgrid .flexRow {
display: block;
}
.featuredFlexgrid .flexRow .flexItem + .flexItem {
margin-top: 15px;
}
}
.featuredFlexgrid .flexRow:first-child > .flexItem:first-child {
border-top-left-radius: 0;
}
.featuredFlexgrid .flexRow:first-child > .flexItem:last-child {
border-top-right-radius: 0;
}
.featuredFlexgrid .flexRow:last-child > .flexItem:first-child {
border-bottom-left-radius: 0;
}
.featuredFlexgrid .flexRow:last-child > .flexItem:last-child {
border-bottom-right-radius: 0;
}
.featuredFlexgrid .flexRow + .flexRow {
margin-top: 15px;
}
.featuredFlexgrid .flexRow[data-item-count="0"] {
display: none !important;
}
.featuredFlexgrid.layout-boxed .flexRow {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.featuredFlexgrid.layout-boxed .flexRow {
max-width: none;
}
}
@media (min-width: 768px) {
.featuredFlexgrid.layout-boxed .flexRow {
max-width: 750px;
}
}
@media (min-width: 992px) {
.featuredFlexgrid.layout-boxed .flexRow {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.featuredFlexgrid.layout-boxed .flexRow {
max-width: 1170px;
}
}
.featuredFlexgrid.layout-boxed .flexRow .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
.featuredFlexgrid .flex-image {
display: block;
background: transparent no-repeat center/cover;
}
.featuredFlexgrid:not(.variant-flat) .flex-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.featuredFlexgrid .flexItem {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
border-radius: 0;
background: #F6F6F6;
overflow: hidden;
}
.featuredFlexgrid .flexItem a,
.featuredFlexgrid .flexItem a:hover {
text-decoration: none;
cursor: pointer;
}
.featuredFlexgrid .flexItem .top {
display: flex;
flex-direction: column;
position: relative;
color: inherit;
}
.featuredFlexgrid .flexItem .top:hover {
text-decoration: none;
color: inherit;
}
.featuredFlexgrid .flexItem .desc {
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: 1;
width: 100%;
min-height: 250px;
position: relative;
padding: 30px;
color: #FFF;
}
.featuredFlexgrid.variant-flat .flexItem .desc {
background: #F6F6F6;
}
@supports (display: grid) {
.featuredFlexgrid .flexItem .desc {
min-height: 0;
}
}
.featuredFlexgrid .flexItem a:hover .desc {
color: #3469CB;
}
.featuredFlexgrid .flexItem .supertitle {
order: -1;
display: block;
align-self: flex-start;
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.3;
text-transform: uppercase;
font-size: var(--fs-small);
}
.featuredFlexgrid .flexItem .supertitle span {
display: block;
padding: 0;
background: transparent;
color: inherit;
}
.featuredFlexgrid .flexItem a:hover .supertitle {
color: inherit;
}
.featuredFlexgrid .flexItem h2,
.featuredFlexgrid .flexItem .title {
margin-bottom: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-large-title);
}
.featuredFlexgrid .flexItem h2 span,
.featuredFlexgrid .flexItem .title span {
display: block;
padding: 0 0 10px 0;
background: transparent;
color: inherit;
}
.featuredFlexgrid .flexItem a:hover h2,
.featuredFlexgrid .flexItem a:hover .title {
text-decoration: none;
color: inherit;
}
.featuredFlexgrid .flexItem .subtitle {
margin-bottom: 15px;
font-family: inherit;
font-weight: 700;
line-height: 1;
text-transform: none;
color: inherit;
font-size: var(--fs-large-subtitle);
}
.featuredFlexgrid .flexItem .subtitle span {
display: block;
padding: 0;
background: transparent;
color: inherit;
}
.featuredFlexgrid .flexItem .subtitle > * {
margin: 0;
}
.featuredFlexgrid .flexItem a:hover .subtitle {
color: inherit;
}
.featuredFlexgrid .flexItem .date {
order: initial;
margin-bottom: 15px;
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexItem .date > span {
display: block;
padding: 0;
background: transparent;
color: inherit;
}
.featuredFlexgrid .flexItem a:hover .date {
color: inherit;
}
.featuredFlexgrid .flexItem .btn {
margin-top: 15px;
padding: 12px 15px;
border: none;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexItem .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.featuredFlexgrid .flexItem .genres {
margin: 10px 0;
}
.featuredFlexgrid .flexItem .genres__link {
margin: 0 15px 0 0;
padding: 0;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
background: transparent;
color: #999;
font-size: var(--fs-small);
}
.featuredFlexgrid .flexItem .genres__link:hover {
background: transparent;
color: #000;
}
.featuredFlexgrid .flexItem .thumb[data-video-url] {
color: #ee1b2e;
}
.featuredFlexgrid .flexItem .thumb[data-video-url] .image {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
}
.featuredFlexgrid .flexItem .thumb[data-video-url] .video-play-button {
all: unset;
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border: none;
font-size: 72px;
background: none;
color: #ee1b2e;
cursor: pointer;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.featuredFlexgrid[data-animations*=shadow] .flexItem {
transition: all 0.8s ease-in-out;
}
.featuredFlexgrid[data-animations*=shadow] .flexItem:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=shadow] .flexItem:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.featuredFlexgrid[data-animations*=glow] .flexItem {
transition: all 0.8s ease-in-out;
}
.featuredFlexgrid[data-animations*=glow] .flexItem:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=glow] .flexItem:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.featuredFlexgrid[data-animations*=zoom] .flexItem .flex-image:not(.video-loaded) {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredFlexgrid[data-animations*=zoom] .flexItem:hover .flex-image:not(.video-loaded) {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=zoom] .flexItem:active .flex-image:not(.video-loaded) {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.featuredFlexgrid[data-animations*=twist] .flexItem .flex-image:not(.video-loaded) {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredFlexgrid[data-animations*=twist] .flexItem:hover .flex-image:not(.video-loaded) {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=twist] .flexItem:active .flex-image:not(.video-loaded) {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.featuredFlexgrid[data-animations*=saturate] .flexItem .flex-image:not(.video-loaded) {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.featuredFlexgrid[data-animations*=saturate] .flexItem:hover .flex-image:not(.video-loaded) {
filter: none;
transition: all 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=saturate] .flexItem:active .flex-image:not(.video-loaded) {
filter: none;
transition: all 0.1s ease-in-out;
}
.featuredFlexgrid[data-animations*=desaturate] .flexItem .flex-image:not(.video-loaded) {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.featuredFlexgrid[data-animations*=desaturate] .flexItem:hover .flex-image:not(.video-loaded) {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=desaturate] .flexItem:active .flex-image:not(.video-loaded) {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.featuredFlexgrid[data-animations*=slide] .flexItem {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredFlexgrid[data-animations*=slide] .flexItem:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=slide] .flexItem:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.featuredFlexgrid[data-animations*=shift] .flexItem .desc {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.featuredFlexgrid[data-animations*=shift] .flexItem:hover .desc {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=shift] .flexItem:active .desc {
transform: none;
transition: transform 0.1s ease-in-out;
}
.featuredFlexgrid[data-animations*=skew] .flexItem {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.featuredFlexgrid[data-animations*=skew] .flexItem:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.featuredFlexgrid[data-animations*=skew] .flexItem:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.featuredFlexgrid .flexItem .thumb.video-loaded {
background: #000 !important;
}
.featuredFlexgrid .flexItem .thumb.video-loaded iframe {
width: 100%;
height: 100%;
background: #000;
}
.featuredFlexgrid.group-banners .flexItem .desc {
padding: 30px;
}
.featuredFlexgrid.group-banners .flexItem:hover .desc {
color: #3469CB;
}
.featuredFlexgrid.group-banners .flexItem h2,
.featuredFlexgrid.group-banners .flexItem .title {
margin-bottom: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1;
text-decoration: none;
text-transform: none;
color: #000;
font-size: var(--fs-large);
}
.featuredFlexgrid.group-banners .flexItem a:hover h2,
.featuredFlexgrid.group-banners .flexItem a:hover .title {
text-decoration: none;
color: #000;
}
.featuredFlexgrid.group-banners .flexItem .subtitle {
margin-bottom: 15px;
font-family: inherit;
font-weight: 300;
line-height: 150%;
text-transform: none;
color: #000;
font-size: var(--fs-normal);
}
.featuredFlexgrid.group-banners .flexItem a:hover .subtitle {
color: #000;
}
.featuredFlexgrid.group-banners .flexItem .btn {
border: none;
background: #ee1b2e;
color: #FFF;
}
.featuredFlexgrid.group-banners .flexItem .btn:hover {
border: #FFF;
background: #D11021;
color: #FFF;
}
.featuredFlexgrid.group-banners .flexRow {
/*
alignment strategies:
left: center:
[ =
[ [ = =
[ [ [ = = =
*/
}
.featuredFlexgrid.variant-default .flexItem .desc {
pointer-events: none;
}
.featuredFlexgrid.variant-default .flexItem .desc a {
pointer-events: auto;
}
.featuredFlexgrid.variant-flat .flexItem .top {
flex: 1;
}
.featuredFlexgrid.variant-flat .flexItem .bottom {
align-self: left;
}
.featuredFlexgrid .flexRow[data-item-count="2"] .flexItem .supertitle {
font-size: var(--fs-small);
}
.featuredFlexgrid .flexRow[data-item-count="2"] .flexItem .title {
font-size: var(--fs-large-title);
}
.featuredFlexgrid .flexRow[data-item-count="2"] .flexItem .subtitle {
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexRow[data-item-count="2"] .flexItem .date {
font-size: var(--fs-normal);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="2"] .flexItem .title {
font-size: var(--fs-large);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="2"] .flexItem .subtitle {
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem .supertitle {
font-size: var(--fs-small);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem .title {
font-size: var(--fs-large);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem .subtitle {
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem .date {
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem .supertitle {
font-size: var(--fs-small);
}
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem .title {
font-size: var(--fs-huge-title);
}
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem .subtitle {
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem .date {
font-size: var(--fs-normal);
}
@media (max-width: 991px) {
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem .supertitle,
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem .supertitle {
font-size: var(--fs-small);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem .title,
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem .title {
font-size: var(--fs-large-title);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem .subtitle,
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem .subtitle {
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem .date,
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem .date {
font-size: var(--fs-normal);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem:last-child .supertitle,
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem:last-child .supertitle {
font-size: var(--fs-small);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem:last-child .title,
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem:last-child .title {
font-size: var(--fs-large-title);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem:last-child .subtitle,
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem:last-child .subtitle {
font-size: var(--fs-large-subtitle);
}
.featuredFlexgrid .flexRow[data-item-count="3"] .flexItem:last-child .date,
.featuredFlexgrid .flexRow[data-item-count="4"] .flexItem:last-child .date {
font-size: var(--fs-normal);
}
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="3"] .flexItem .title {
font-size: var(--fs-huge-title);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="3"] .flexItem .subtitle {
font-size: var(--fs-normal);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="4"] .flexItem .title {
font-size: var(--fs-huge-title);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="4"] .flexItem .subtitle {
font-size: var(--fs-normal);
}
@media (max-width: 991px) {
.featuredFlexgrid.group-banners .flexRow[data-item-count="3"] .flexItem .title, .featuredFlexgrid.group-banners .flexRow[data-item-count="4"] .flexItem .title {
font-size: var(--fs-large);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="3"] .flexItem .subtitle, .featuredFlexgrid.group-banners .flexRow[data-item-count="4"] .flexItem .subtitle {
font-size: var(--fs-normal);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="3"] .flexItem:last-child .title, .featuredFlexgrid.group-banners .flexRow[data-item-count="4"] .flexItem:last-child .title {
font-size: var(--fs-large);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count="3"] .flexItem:last-child .subtitle, .featuredFlexgrid.group-banners .flexRow[data-item-count="4"] .flexItem:last-child .subtitle {
font-size: var(--fs-normal);
}
}
@media (max-width: 767px) {
.featuredFlexgrid .flexRow[data-item-count] .supertitle, .featuredFlexgrid .flexRow[data-item-count]:last-child .supertitle {
font-size: var(--fs-small);
}
.featuredFlexgrid .flexRow[data-item-count] .title, .featuredFlexgrid .flexRow[data-item-count]:last-child .title {
font-size: var(--fs-large-title);
}
.featuredFlexgrid .flexRow[data-item-count] .subtitle, .featuredFlexgrid .flexRow[data-item-count]:last-child .subtitle {
font-size: var(--fs-large-subtitle);
}
.featuredFlexgrid .flexRow[data-item-count] .date, .featuredFlexgrid .flexRow[data-item-count]:last-child .date {
font-size: var(--fs-normal);
}
}
@media (max-width: 767px) {
.featuredFlexgrid.group-banners .flexRow[data-item-count] .title, .featuredFlexgrid.group-banners .flexRow[data-item-count]:last-child .title {
font-size: var(--fs-large);
}
.featuredFlexgrid.group-banners .flexRow[data-item-count] .subtitle, .featuredFlexgrid.group-banners .flexRow[data-item-count]:last-child .subtitle {
font-size: var(--fs-normal);
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.featuredNewsWrapper .container {
padding: 0 15px;
}
.featuredNewsWrapper .container .inner {
margin: 0;
padding: 0;
text-align: center;
}
@media (min-width: 768px) {
.featuredNewsWrapper .container .inner {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.featuredNewsWrapper .container .inner .btn {
width: auto;
min-width: 170px;
}
.featuredNewsWrapper .featuredNewsHeader {
margin-bottom: 30px;
}
.featuredNewsWrapper h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #333;
font-size: 50px;
}
.featuredNewsWrapper .featuredNewsItems {
display: flex;
flex-wrap: wrap;
}
.featuredNewsWrapper .featuredNewsItems > * {
width: 360px;
margin: 0 5px 15px 5px;
}
@supports (display: grid) {
.featuredNewsWrapper .featuredNewsItems {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
}
.featuredNewsWrapper .featuredNewsItems > * {
width: auto;
margin: 0;
}
@media (max-width: 991px) {
.featuredNewsWrapper .featuredNewsItems {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.featuredNewsWrapper .featuredNewsItems {
grid-template-columns: 1fr;
}
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.featuredSlidesWrapper .inner {
position: relative;
padding: 30px 15px;
}
.featuredSlidesWrapper.layout-boxed .inner {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.featuredSlidesWrapper.layout-boxed .inner {
max-width: none;
}
}
@media (min-width: 768px) {
.featuredSlidesWrapper.layout-boxed .inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
.featuredSlidesWrapper.layout-boxed .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.featuredSlidesWrapper.layout-boxed .inner {
max-width: 1170px;
}
}
.featuredSlidesWrapper.layout-boxed .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
@media (min-width: 769px) {
.featuredSlidesWrapper.fadeout .slick-list {
-webkit-mask-image: linear-gradient(90deg, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0.1) 100%);
mask-image: linear-gradient(90deg, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0.1) 100%);
}
}
.featuredSlidesWrapper .slick-track {
display: flex;
}
.featuredSlidesWrapper .slider:not(.slick-initialized) {
visibility: hidden;
}
.featuredSlidesWrapper .featuredSlidesCard {
display: flex;
flex-direction: column;
height: auto;
float: none;
position: relative;
margin: 20px 10px;
border: none;
border-radius: 0px;
background: #FAFAFA;
box-shadow: none;
transition: box-shadow 0.2s ease;
}
.featuredSlidesWrapper .featuredSlidesCard:hover {
box-shadow: none;
transition: box-shadow 0.4s ease;
}
.featuredSlidesWrapper .featuredSlidesCard .thumb {
display: block;
position: relative;
border-radius: 0px 0px 0 0;
overflow: hidden;
}
.featuredSlidesWrapper .featuredSlidesCard .thumb img {
width: 100%;
padding: 0;
border-radius: 0;
}
.featuredSlidesWrapper[data-animations*=shadow] .featuredSlidesCard {
transition: all 0.8s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=shadow] .featuredSlidesCard:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=shadow] .featuredSlidesCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=glow] .featuredSlidesCard {
transition: all 0.8s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=glow] .featuredSlidesCard:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=glow] .featuredSlidesCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=zoom] .featuredSlidesCard .thumb img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=zoom] .featuredSlidesCard:hover .thumb img {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=zoom] .featuredSlidesCard:active .thumb img {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=twist] .featuredSlidesCard .thumb img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=twist] .featuredSlidesCard:hover .thumb img {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=twist] .featuredSlidesCard:active .thumb img {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=saturate] .featuredSlidesCard .thumb img {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=saturate] .featuredSlidesCard:hover .thumb img {
filter: none;
transition: all 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=saturate] .featuredSlidesCard:active .thumb img {
filter: none;
transition: all 0.1s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=desaturate] .featuredSlidesCard .thumb img {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=desaturate] .featuredSlidesCard:hover .thumb img {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=desaturate] .featuredSlidesCard:active .thumb img {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=slide] .featuredSlidesCard {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=slide] .featuredSlidesCard:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=slide] .featuredSlidesCard:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=shift] .featuredSlidesCard .desc {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=shift] .featuredSlidesCard:hover .desc {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=shift] .featuredSlidesCard:active .desc {
transform: none;
transition: transform 0.1s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=skew] .featuredSlidesCard {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.featuredSlidesWrapper[data-animations*=skew] .featuredSlidesCard:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.featuredSlidesWrapper[data-animations*=skew] .featuredSlidesCard:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.featuredSlidesWrapper .featuredSlidesCard .desc {
display: flex;
flex-direction: column;
position: relative;
margin: 0;
padding: 15px;
border-right: none;
flex-grow: 1;
}
.featuredSlidesWrapper .featuredSlidesCard .desc .top {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.featuredSlidesWrapper .featuredSlidesCard .desc .top h3.image-middle {
display: block;
display: -webkit-box;
height: 4em;
line-height: 1.3em;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.featuredSlidesWrapper .featuredSlidesCard .desc .bottom {
margin: 15px 0 0 0;
text-align: left;
}
.featuredSlidesWrapper .featuredSlidesCard .desc .btn {
display: inline-block;
border: none;
background: #ee1b2e;
color: #FFF;
}
.featuredSlidesWrapper .featuredSlidesCard .desc .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.featuredSlidesWrapper .featuredSlidesCard .supertitle {
order: -1;
display: block;
align-self: flex-start;
margin: 15px 0 5px 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.3;
text-transform: uppercase;
background: transparent;
color: #3469CB;
font-size: var(--fs-tiny);
}
.featuredSlidesWrapper .featuredSlidesCard h3 {
margin: 15px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1.2;
text-transform: none;
color: inherit;
font-size: var(--fs-medium-title);
}
.featuredSlidesWrapper .featuredSlidesCard h3 a {
display: block;
text-decoration: none;
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesCard h3:hover {
text-decoration: none;
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesCard h3.with-supertitle {
margin-top: 0;
}
.featuredSlidesWrapper .featuredSlidesCard .subtitle {
margin: 0 0 15px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-normal);
}
.featuredSlidesWrapper .featuredSlidesCard .tagline {
margin: 10px 0 15px 0;
font-family: inherit;
font-weight: normal;
font-style: normal;
line-height: 1.2;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.featuredSlidesWrapper .featuredSlidesCard .tagline p {
margin: 0;
}
.featuredSlidesWrapper .featuredSlidesCard .date {
order: -2;
margin: 0 0 10px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
text-transform: none;
color: grey1;
font-size: var(--fs-small);
}
.featuredSlidesWrapper .featuredSlidesCard .genres,
.featuredSlidesWrapper .featuredSlidesCard .tags {
margin: 0 0 15px 0;
}
.featuredSlidesWrapper .featuredSlidesCard .genres li,
.featuredSlidesWrapper .featuredSlidesCard .tags li {
list-style: none;
display: inline-block;
margin: 0 15px 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
color: #999;
font-size: var(--fs-small);
}
.featuredSlidesWrapper .featuredSlidesCard .genres li a,
.featuredSlidesWrapper .featuredSlidesCard .tags li a {
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesCard .genres li a:hover,
.featuredSlidesWrapper .featuredSlidesCard .tags li a:hover {
color: #000;
}
.featuredSlidesWrapper .featuredSlidesCard.default {
min-height: 360px;
position: relative;
}
.featuredSlidesWrapper .featuredSlidesCard.default .thumb {
width: 100%;
height: 100%;
position: absolute;
}
.featuredSlidesWrapper .featuredSlidesCard.default img {
height: 100%;
object-fit: cover;
object-position: center;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc {
justify-content: flex-end;
z-index: 1;
pointer-events: none;
color: #FFF;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc .top {
flex-grow: 0;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc .btn {
pointer-events: initial;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc .supertitle {
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc h3 {
color: inherit;
pointer-events: initial;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc h3:hover {
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc .subtitle {
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc .richtext {
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc .date {
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesCard.default .desc .tags {
color: inherit;
}
.featuredSlidesWrapper .featuredSlidesNav button {
color: #999;
}
.featuredSlidesWrapper .featuredSlidesNav button:hover {
color: #000;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.filter-controls {
display: flex;
padding: 15px;
line-height: normal;
font-size: var(--fs-tiny);
}
.filter-controls:empty {
display: none;
}
.filter-controls > :first-child {
flex: 1;
}
.filter-controls svg {
width: 16px;
height: 16px;
}
.filter-resets {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.filter-resets button {
cursor: pointer;
display: inline-flex;
align-items: center;
max-width: 240px;
position: relative;
margin: 2px 5px 2px 0;
padding: 15px 24px 15px 15px;
border: 1px solid #7b7b7b;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
font-size: var(--fs-normal);
line-height: inherit;
text-transform: uppercase;
background: #F6F6F6;
color: #000;
transition: all 0.2s ease-in-out;
}
.filter-resets button > span:first-child {
flex: 1;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.filter-resets button .peppered-icon {
position: absolute;
right: 6px;
margin: 0;
color: #7b7b7b;
transition: inherit;
}
.filter-resets button:hover, .filter-resets button:active {
border: 1px solid currentcolor;
background: #F9F9F9;
color: #000;
transition: all 0.1s ease-in-out;
}
.filter-resets button:hover .peppered-icon, .filter-resets button:active .peppered-icon {
color: #3F3F3F;
}
.filter-resets button.removeAll {
margin-left: 15px;
padding-right: 0;
padding-left: 0;
font-weight: 900;
text-transform: uppercase;
background: transparent;
color: #ee1b2e;
border-color: transparent;
}
.filter-resets button.removeAll:hover, .filter-resets button.removeAll:active {
color: #D11021;
}
form[name=layout-options-form] {
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
margin: 0;
padding: 0;
}
@media (max-width: 767px) {
form[name=layout-options-form] {
display: none;
}
}
form[name=layout-options-form] .select-wrapper {
display: inline-flex;
align-items: center;
position: relative;
margin: 0 0 0 15px;
}
form[name=layout-options-form] .select-wrapper .peppered-icon {
position: absolute;
right: 4px;
pointer-events: none;
margin-top: 1px;
}
form[name=layout-options-form] .select-wrapper select {
margin: 0;
padding: 0 20px 0 0;
border: none;
font-family: inherit;
font-weight: normal;
font-size: inherit;
background: none;
color: #000;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
form[name=layout-options-form] .select-wrapper select option {
color: initial;
}
form[name=layout-options-form] button.list-mode-button {
display: flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
margin: 0 5px 0 0;
padding: 0;
border: none;
font-size: inherit;
line-height: 1;
background: none;
color: #7b7b7b;
cursor: pointer;
appearance: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
form[name=layout-options-form] button.list-mode-button:hover {
transition: all 0.1s ease-in-out;
}
form[name=layout-options-form] button.list-mode-button:hover, form[name=layout-options-form] button.list-mode-button:active, form[name=layout-options-form] button.list-mode-button:disabled {
color: #000;
}
form[name=layout-options-form] button.list-mode-button:disabled {
cursor: default;
}
form[name=layout-options-form] button.list-mode-button[name=list_type] {
margin-left: 6px;
color: #000;
}
form[name=layout-options-form] button.list-mode-button[name=list_type][value=events] {
color: #7b7b7b;
}
form[name=layout-options-form] button.list-mode-button > span:not(.peppered-icon) {
display: block;
padding: 0 2ex 0 0.5ex;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.filterBox {
position: relative;
z-index: 2;
padding: 0 15px;
background: #FFF;
}
@media screen and (max-width: 768px) {
.filterBox {
padding-right: 0;
padding-left: 0;
}
}
.filterBox form {
margin-bottom: 0;
}
.filterBox .container {
padding: 0 15px;
}
.filterBox .grid-root {
display: flex;
flex-wrap: wrap;
}
.filterBox .grid-root > * {
flex: 1;
margin: 0 5px 15px 5px;
}
@supports (display: grid) {
.filterBox .grid-root {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 15px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.filterBox .grid-root #filterToggle {
grid-column-end: 5;
}
@media (min-width: 600px) and (max-width: 991px) {
.filterBox .grid-root {
grid-template-columns: 1fr 1fr 1fr;
}
.filterBox .grid-root #filterToggle {
grid-column-end: 4;
}
}
@media (max-width: 599px) and (min-width: 480px) {
.filterBox .grid-root {
grid-template-columns: 1fr 1fr;
}
.filterBox .grid-root #filterToggle {
grid-column-end: 3;
}
}
@media (max-width: 479px) {
.filterBox .grid-root {
grid-template-columns: 1fr;
}
.filterBox .grid-root #filterToggle {
grid-column-end: 2;
}
}
.filterBox .grid-root > * {
width: auto;
margin: 0;
}
}
.filterBox.context-courses {
background: #1A242F;
}
.filterBox.context-courses .grid-root {
grid-column-gap: 45px;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 767px) {
.filterBox.context-courses .grid-root {
grid-template-columns: 1fr;
}
}
.filterBox.context-courses .days-of-week > div {
display: grid;
grid-column-gap: 5px;
grid-row-gap: 5px;
grid-template-columns: repeat(7, 1fr);
margin-top: 15px;
}
.filterBox.context-courses .days-of-week > div .btn {
margin: 0;
}
.filterBox.context-courses .days-of-week > div .btn[value="32"] {
margin-left: 10px;
}
@media (min-width: 768px) and (max-width: 992px), (max-width: 479px) {
.filterBox.context-courses .days-of-week > div {
grid-template-columns: repeat(5, 1fr);
}
.filterBox.context-courses .days-of-week > div .btn[value="32"] {
margin-left: 0;
}
}
.filterBox.context-courses .input-ages {
margin: 0;
padding: 10px 15px 20px 15px;
border: none;
border-radius: 3px;
background: rgba(0, 0, 0, 0.1);
text-align: left;
}
.filterBox.context-courses .input-ages label {
margin: 0 0 30px 0;
color: #000;
}
.filterBox.context-courses .input-ages input::placeholder {
color: #000;
}
.filterBox.context-courses .age-range {
display: flex;
align-items: center;
position: relative;
z-index: 0;
}
.filterBox.context-courses .age-range #range-input-placeholder {
flex: 1;
margin: 0 1em;
border: none;
border-radius: 3px;
background: #2A364B;
box-shadow: none;
}
.filterBox.context-courses .age-range #range-input-placeholder .noUi-connect {
border: none;
background: #DDD;
}
.filterBox.context-courses .age-range #range-input-placeholder.noUi-horizontal {
height: 10px;
}
.filterBox.context-courses .age-range #range-input-placeholder.noUi-horizontal .noUi-handle {
width: 34px;
height: 34px;
top: -12px;
border: none;
border-radius: 100%;
background: #FFF;
box-shadow: none;
cursor: grab;
}
.filterBox.context-courses .age-range #range-input-placeholder.noUi-horizontal .noUi-handle::after, .filterBox.context-courses .age-range #range-input-placeholder.noUi-horizontal .noUi-handle::before {
display: none;
}
.filterBox.context-courses .age-range #range-input-placeholder.noUi-horizontal .noUi-handle:active {
cursor: grabbing;
}
.filterBox.context-courses .age-range input[type=number] {
-webkit-appearance: none;
max-width: 3em;
margin: 0;
padding: 0;
border: none;
background: none;
}
.filterBox.context-courses .age-range input[type=number]:last-of-type {
text-align: right;
}
.filterBox #filterHeader {
position: relative;
z-index: 1;
padding: 30px 15px 5px 15px;
background: #FFF;
color: #FFF;
}
.filterBox #filterHeader #filterToggle {
display: inline-block;
white-space: nowrap;
justify-self: end;
align-self: center;
border: none;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
background: transparent;
color: #F6F6F6;
cursor: pointer;
font-size: var(--fs-small-title);
}
.filterBox #filterHeader #filterToggle:hover {
color: rgb(230.7, 230.7, 230.7);
}
.filterBox #filterHeader #filterToggle .fa {
margin-right: 1ex;
}
.filterBox #filterHeader .input-daterange {
position: relative;
}
.filterBox #filterHeader .input-daterange input {
width: 100%;
height: auto;
min-height: 2em;
padding: 8px 12px;
padding-left: 30px;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.3;
text-transform: none;
background: #FFF;
color: #333;
text-align: left;
font-size: var(--fs-normal);
}
#filtersForm[data-datepicker-mode=inline] #filterHeader .input-daterange input {
width: 100%;
}
@media (max-width: 991px) {
.filterBox #filterHeader .input-daterange input {
width: 100%;
}
}
@media (max-width: 600px) {
.filterBox #filterHeader .input-daterange .dateRange {
display: none;
}
.filterBox #filterHeader .input-daterange .dateRangeSingle {
display: block;
}
}
@media (min-width: 601px) {
.filterBox #filterHeader .input-daterange .dateRange {
display: block;
}
.filterBox #filterHeader .input-daterange .dateRangeSingle {
display: none;
}
}
.filterBox #filterHeader .input-daterange i {
position: absolute;
top: 50%;
left: 0.5em;
margin-top: -0.5em;
color: #333;
pointer-events: none;
}
.filterBox #filterWrapper {
position: relative;
z-index: 0;
font-family: inherit;
background: #F6F6F6;
color: #FFF;
will-change: height;
transition: all 0.3s ease-in-out;
}
.filterBox #filterWrapper > * {
transition: 0.2s opacity 0.1s ease-in-out;
}
.filterBox #filterWrapper[aria-expanded=false] {
height: 0 !important;
opacity: 0;
overflow: hidden;
}
.filterBox #filterWrapper[aria-expanded=false] > * {
opacity: 0;
}
.filterBox #filterWrapper #filterWidgets {
width: 100%;
position: absolute;
top: 0;
padding: 25px 15px;
border-top: 0;
border-right: none;
border-bottom: none;
border-left: none;
}
.filterBox #filterWrapper #filterWidgets .input-row {
margin: 0;
}
@media (min-width: 768px) {
.filterBox #filterWrapper #filterWidgets .input-row {
display: flex;
flex-wrap: wrap;
}
}
.filterBox #filterWrapper #filterWidgets a {
margin-left: 15px;
color: #FFF;
}
.filterBox #filterWrapper #filterWidgets a:hover {
color: #000;
}
.filterBox #filterWrapper #filterWidgets a[aria-expanded=true] {
display: none;
}
.filterBox #filterWrapper #filterWidgets .tagSelector {
margin: 0;
padding: 0;
}
.filterBox fieldset .btn {
width: auto;
min-width: 4em;
margin: 5px 5px 5px 0;
padding: 15px 24px 15px 15px;
border: none;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
background: #D4D4D4;
color: #3F3F3F;
animation: 0.3s fade-in ease-in;
font-size: var(--fs-normal);
}
.filterBox fieldset .btn:hover {
border: none;
background: #E0E0E0;
color: #3F3F3F;
}
.filterBox fieldset .btn.active {
border: none;
background: #D4D4D4;
color: #3F3F3F;
}
#moreTagsToggle {
cursor: pointer;
}
#courseFilters {
display: flex;
justify-content: flex-end;
position: relative;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
background: #2A364B;
font-size: 20px;
}
#courseFilters .resetButtons {
margin: 0;
padding: 10px 30px;
line-height: inherit;
flex: 1;
}
#courseFilters .resetButtons button {
display: inline-block;
max-width: 240px;
position: relative;
margin: 5px 5px 5px 0;
padding: 6px 30px 6px 15px;
border: none;
border-radius: 15px 15px 15px 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: none;
text-overflow: ellipsis;
background: #1A242F;
color: #FFF;
overflow: hidden;
white-space: nowrap;
font-size: var(--fs-small);
}
#courseFilters .resetButtons button:hover {
border: none;
background: #1A242F;
color: #FFF;
}
#courseFilters .resetButtons button .peppered-icon {
position: absolute;
right: 6px;
margin: 0;
}
#courseFilters .resetButtons button.removeAll {
margin-left: 15px;
padding-right: 0;
padding-left: 0;
background: transparent;
color: #FFF;
border-color: transparent;
font-size: var(--fs-small);
}
#courseFilters .resetButtons button.removeAll:hover {
color: #000;
}
#courseFilters .resetButtons button.removeAll .fa {
margin-right: 0.5ex;
}
#courseFilters .submitFilters {
height: 70px;
margin: 0;
border: none;
border-radius: 0;
background: #ee1b2e;
color: #FFF;
align-self: flex-end;
font-size: var(--fs-small-title);
}
#courseFilters .submitFilters:hover {
border: none;
background: #D11021;
color: #FFF;
}
#courseFilters .submitFilters[disabled] {
border: none;
background: #F6F6F6;
color: #D8D8D8;
}
.select {
min-width: 100%;
max-width: 100%;
position: relative;
}
.select .select-anchor {
display: flex;
align-items: center;
width: 100%;
height: auto;
min-height: 2em;
padding: 8px 12px;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
border-radius: 0px;
line-height: 1.3;
background: #FFF;
box-shadow: none;
text-align: left;
cursor: pointer;
transition: border-radius 0.1s ease;
font-size: var(--fs-normal);
}
.select .select-anchor span {
margin-right: 10px;
text-overflow: ellipsis;
color: #000;
white-space: nowrap;
overflow: hidden;
}
.select .select-anchor span.placeholder {
color: #999;
}
.select .select-anchor .fa {
margin-left: auto;
transition: all 0.3s ease-in-out;
}
.select .select-anchor[aria-expanded=true] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select .select-anchor[aria-expanded=true] .fa {
transform: rotate(180deg);
}
.select .select-anchor:focus {
outline: revert;
outline-offset: revert;
}
.select .select-dropdown {
display: flex;
flex-direction: column;
width: 100%;
max-height: 250px;
position: absolute;
clear: both;
z-index: 1;
margin: 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
background: #FFF;
box-shadow: none;
transform: scaleY(1);
transition: all 0.3s ease;
transition-delay: 50ms;
transform-origin: 100% 0;
border-color: #000;
}
.select .select-dropdown hr {
margin: 0;
}
.select .select-dropdown ul {
overflow-y: scroll;
overflow-x: hidden;
margin: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
opacity: 1;
}
.select .select-dropdown .dropdown-footer {
padding: 8px;
border-top: 1px solid #000;
text-align: right;
}
.select .select-dropdown button {
opacity: 1;
transition: all 0.2s ease-in-out;
}
.select .select-dropdown[aria-expanded=false] {
max-height: 0;
transform: scaleY(0);
overflow: hidden;
visibility: hidden;
}
.select .select-dropdown[aria-expanded=false] button {
opacity: 0;
}
.select .select-dropdown[aria-expanded=false] ul {
opacity: 0;
}
.select .select-dropdown[aria-expanded=true] {
max-height: unset;
}
.select .option-wrapper {
list-style: none;
display: flex;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
font-family: "FSELLIOT", sans-serif;
line-height: 1.3;
background: #FFF;
color: #000;
cursor: pointer;
font-size: var(--fs-normal);
}
.select .option-wrapper:hover {
background: rgba(212, 212, 212, 0.5);
color: #000;
}
.select .option-wrapper label {
width: 100%;
margin: 0;
padding: 6px;
font-weight: normal;
cursor: inherit;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.select .option-wrapper input[type=checkbox],
.select .option-wrapper input[type=radio] {
display: inline-block;
width: calc(1em - 3px);
height: calc(1em - 3px);
margin-right: 0.5em;
margin-left: 0.25em;
border: 1px solid #000;
background: #FFF;
box-shadow: inset 0 0 0 2px #FFF;
appearance: none;
transition: all 0.1s ease-out;
outline: none;
}
.select .option-wrapper input[type=checkbox]:checked,
.select .option-wrapper input[type=radio]:checked {
border-color: currentcolor;
background: #D4D4D4;
}
.select .option-wrapper input[type=checkbox]:focus,
.select .option-wrapper input[type=radio]:focus {
outline: revert;
outline-offset: revert;
}
.select .option-wrapper input[type=radio] {
border-radius: 50%;
}
.simple-filter {
padding: 10px 30px;
background: none;
}
.daterangepicker.simple {
animation: simple-filters-fade-in 0.3s ease 1, simple-filters-move-up 0.3s ease 1;
}
.daterangepicker.simple::after {
content: "";
display: block;
width: 10px;
height: 10px;
position: absolute;
top: -1px;
right: 5px;
bottom: 0;
left: unset !important;
z-index: -99;
margin-left: 0;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background-color: #FFF;
transform: rotate(135deg);
box-sizing: border-box;
transform-origin: 0 0;
}
.simple-filter form {
display: flex;
justify-content: end;
gap: 1em;
height: 45px;
position: relative;
}
.simple-filter form .input-daterange {
width: 45px;
}
.simple-filter form .filter-btn {
display: flex;
width: 45px;
min-width: unset;
height: 45px;
position: relative;
padding: 8px;
border: none;
border-radius: 50%;
background: #ee1b2e;
color: #FFF;
box-shadow: none;
transition: all 0.2s ease-in-out;
pointer-events: auto;
}
.simple-filter form .filter-btn:hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.simple-filter form .filter-btn svg {
margin: auto;
fill: currentcolor;
pointer-events: auto;
}
.simple-filter form .dateRange,
.simple-filter form .dateRangeSingle {
width: 0;
height: 0;
position: absolute;
top: 60px;
right: 30px;
bottom: 0;
margin: 0;
padding: 0;
border: none;
visibility: hidden;
overflow: hidden;
}
.simple-filter form h4 {
margin: 0 0 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
color: #999;
font-size: var(--fs-small-title);
}
.simple-filter form .filter-content {
display: none;
min-width: 400px;
position: absolute;
top: 60px;
right: 0;
z-index: 99;
padding: 30px;
border: 1px solid #000;
background: #FFF;
box-shadow: none;
animation: simple-filters-fade-in 0.3s ease 1, simple-filters-move-up 0.3s ease 1;
}
@media (max-width: 500px) {
.simple-filter form .filter-content {
width: 80vw;
min-width: 80vw;
right: -100%;
transform: translate(10%, 0);
animation: simple-filters-fade-in 0.3s ease 1, simple-filters-move-up-mobile 0.3s ease 1;
}
}
.simple-filter form .filter-content[aria-expanded=true] {
display: block;
}
.simple-filter form .filter-content:after {
content: "";
width: 10px;
height: 10px;
position: absolute;
top: -1px;
right: 5px;
bottom: 0;
z-index: -99;
margin-left: 0;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background-color: #FFF;
transform: rotate(135deg);
box-sizing: border-box;
transform-origin: 0 0;
}
@media (max-width: 500px) {
.simple-filter form .filter-content:after {
right: 23%;
}
}
.simple-filter form .tagSelector {
display: flex;
flex-direction: column;
margin: 0;
}
.simple-filter form .footer {
margin-top: 30px;
align-self: end;
}
.simple-filter form fieldset .btn {
display: inline-flex;
align-items: center;
justify-content: space-evenly;
width: auto;
min-width: 0;
position: relative;
margin: 5px 5px 5px 0;
padding: 15px 24px 15px 15px;
border: none;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
background: #D4D4D4;
color: #3F3F3F;
animation: 0.3s simple-filters-fade-in ease-in;
font-size: var(--fs-normal);
}
.simple-filter form fieldset .btn:hover {
border: none;
background: #E0E0E0;
color: #3F3F3F;
}
.simple-filter form fieldset .btn.active {
border: none;
background: #D4D4D4;
color: #3F3F3F;
}
.simple-filter form fieldset .btn .remove-tag {
display: flex;
align-items: center;
width: 20px;
height: 100%;
position: relative;
right: -10px;
margin: 0;
padding: 0;
color: inherit;
}
.simple-filter form fieldset .btn .remove-tag .peppered-icon {
display: inline-flex;
}
.simple-filter form fieldset .btn .remove-tag:not(.active) {
display: none;
}
.simple-filter form fieldset .btn .remove-tag svg {
max-width: 100%;
}
.simple-filter form fieldset .btn.applyBtn {
width: auto;
min-width: 9em;
margin: 5px 5px 5px 0;
padding: 7px 12px;
border: none;
border-radius: 0;
font-family: inherit;
font-weight: normal;
font-size: var(--fs-normal);
line-height: 1;
text-transform: none;
background: #ee1b2e;
color: #FFF;
animation: 0.3s fade-in ease-in;
font-size: var(--fs-small);
}
.simple-filter form fieldset .btn.applyBtn:hover {
border: none;
background: #1A242F;
color: #FFF;
}
.simple-filter form fieldset .btn.applyBtn.active {
border: none;
background: #1A242F;
color: #FFF;
}
.simple-filter form fieldset .btn.applyBtn.btn-unavailable {
border: none;
background: #F6F6F6;
color: #D8D8D8;
}
.simple-filter form fieldset .btn.resetBtn {
width: auto;
min-width: 9em;
margin: 5px 5px 5px 0;
padding: 7px 12px;
border: none;
border-radius: 0;
font-family: inherit;
font-weight: normal;
font-size: var(--fs-normal);
line-height: 1;
text-transform: none;
background: #ee1b2e;
color: #FFF;
animation: 0.3s fade-in ease-in;
font-size: var(--fs-small);
}
.simple-filter form fieldset .btn.resetBtn:hover {
border: none;
background: #1A242F;
color: #FFF;
}
.simple-filter form fieldset .btn.resetBtn.active {
border: none;
background: #1A242F;
color: #FFF;
}
.simple-filter form fieldset .btn.resetBtn.btn-unavailable, .simple-filter form fieldset .btn.resetBtn.btn-disabled {
border: none;
background: #F6F6F6;
color: #D8D8D8;
}
@keyframes simple-filters-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes simple-filters-move-up {
from {
transform: translateY(40px);
}
to {
transform: translateY(0);
}
}
@keyframes simple-filters-move-up-mobile {
from {
transform: translate(10%, 40px);
}
to {
transform: translate(10%, 0);
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.filter-buttons form {
margin: 0;
}
.filter-buttons ul {
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 8px;
}
.filter-buttons ul li {
list-style: none;
display: inline-block;
}
.filter-buttons ul li .btn {
display: flex;
min-width: unset;
position: relative;
margin: 0;
padding: 12px 15px;
border: none;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
text-transform: capitalize;
background: #EBECEC;
color: #ee1b2e;
box-shadow: none;
cursor: pointer;
font-size: var(--fs-small-title);
}
.filter-buttons ul li .btn:hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
.filter-buttons ul li .btn input[type=checkbox] {
width: 0;
height: 0;
position: absolute;
opacity: 0;
}
.filter-buttons ul li .btn .remove {
display: none;
transform: scale(0);
will-change: transform;
transition: transform 0.2s ease-out;
}
.filter-buttons ul li .btn .remove .peppered-icon {
display: block;
width: 16px;
height: 16px;
align-self: center;
margin-left: 10px;
}
.filter-buttons ul li .btn:has(input:checked) {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
.filter-buttons ul li .btn:has(input:checked) .remove {
display: flex;
transform: scale(1);
}
.filter-buttons ul li .show-more-btn {
border: none;
background: #EBECEC;
color: #ee1b2e;
}
.filter-buttons ul li .show-more-btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.filter-buttons--type {
padding: 15px;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.filtersForm_TR {
position: relative;
margin: 0;
padding: 30px 0;
border-top: none;
border-bottom: none;
background: #1A242F;
}
.filtersForm_TR form {
margin: 0;
}
.filtersForm_TR .inner:not(.wide) {
text-align: left;
float: none;
margin: 0 auto;
}
@media (min-width: 1200px) {
.filtersForm_TR .inner:not(.wide) {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.filtersForm_TR:not(.align-left) .inner:not(.wide) {
margin-left: 16.66666667%;
}
}
.filtersForm_TR .inner div {
display: inline-block;
}
.filtersForm_TR span {
display: inline-block;
padding: 0 0.5ex 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 70px;
text-transform: none;
color: #FFF;
font-size: var(--fs-huge-title);
}
@media (min-width: 768px) {
.filtersForm_TR br {
display: none;
}
}
.filtersForm_TR #startDate,
.filtersForm_TR #endDate {
width: 1px;
position: absolute;
bottom: 0;
left: 50%;
z-index: 0;
padding: 0;
font-size: 1px;
opacity: 0;
}
.filtersForm_TR .popoverBtn {
display: inline-block;
position: relative;
padding: 0 0.5ex 0 0;
cursor: pointer;
color: #FFF;
font-size: var(--fs-huge-title);
}
.filtersForm_TR .popoverBtn span {
display: inline-block;
position: relative;
padding: 0 1ex 0 0;
border-bottom: 2px solid #DDD;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 70px;
text-transform: none;
background: none;
color: #FFF;
font-size: var(--fs-huge-title);
}
.filtersForm_TR .popoverBtn label {
display: inline;
margin: 0;
font-weight: inherit;
cursor: pointer;
}
.filtersForm_TR .popoverBtn .fa {
position: absolute;
top: 0;
right: 6px;
font-size: var(--fs-large);
line-height: 70px;
color: #DDD;
}
.filtersForm_TR .popoverBtn:hover span {
background: none;
color: #FAFAFA;
border-color: #FAFAFA;
}
.filtersForm_TR .popoverBtn:hover .fa {
color: #FAFAFA;
}
.popover.poFilter {
padding: 0;
border-radius: 0px;
background: #FFF;
animation: 0.2s fade-in ease-in-out;
}
.popover.poFilter[aria-expanded=true] {
display: block;
}
.popover.poFilter[aria-expanded=false] {
display: none;
}
.popover.poFilter > .arrow:after {
border-bottom-color: #FFF !important;
}
.popover.poFilter .popover-content {
max-height: 300px;
overflow: auto;
padding: 20px;
}
.popover.poFilter .popover-content ul {
list-style: none;
margin: 0;
}
.popover.poFilter .popover-content ul li a {
margin: 3px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.4;
text-transform: none;
color: #000;
font-size: var(--fs-normal);
}
.popover.poFilter .popover-content ul li a:hover {
border-bottom: none;
color: #DDD;
}
.popover.poFilter .popover-content ul li a.active {
color: #3469CB;
}
.popover.poFilter .popover-content ul li a.active:hover {
color: #2A364B;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.sidebar-agenda {
display: grid;
grid-template-columns: 1fr 4fr;
gap: 10px;
}
@media (max-width: 1200px) {
.sidebar-agenda {
display: block;
}
}
.sidebar-agenda:before {
display: none;
}
.sidebar-agenda input::placeholder {
color: #000 !important;
}
.sidebar-agenda .custom-links {
width: 100%;
position: relative;
}
.sidebar-agenda .custom-links p {
margin: 0 0 1.4em 0;
}
.sidebar-agenda .custom-links p:last-child {
margin: 0;
}
.sidebar-agenda .custom-links p a {
text-decoration: underline;
color: #000;
}
.sidebar-agenda .custom-links p a:hover {
text-decoration: none;
color: #000;
}
.sidebar-agenda .custom-links .peppered-icon {
position: absolute;
right: 0;
}
.sidebar-agenda .sidebar-click-overlay {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 3;
background: rgba(0, 0, 0, 0);
cursor: pointer;
transition: transform 0.3s ease-in;
}
.sidebar-agenda .sidebar-click-overlay.open {
display: block;
background: rgba(0, 0, 0, 0.4);
}
@media (min-width: 1200px) {
.sidebar-agenda .sidebar-click-overlay.open {
display: none;
}
}
.sidebar-agenda .mobile-filters {
display: none;
position: relative;
padding: 20px 0 0 0;
}
.sidebar-agenda .mobile-filters .dateRange,
.sidebar-agenda .mobile-filters .dateRangeSingle {
width: 0;
height: 0;
position: absolute;
top: 60px;
right: 30px;
bottom: 0;
margin: 0;
padding: 0;
border: none;
visibility: hidden;
overflow: hidden;
}
.sidebar-agenda .mobile-filters > * {
flex: 1;
margin: 0 5px 5px 0;
}
.sidebar-agenda .mobile-filters .other-filters,
.sidebar-agenda .mobile-filters .sidebar-date-filter {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: inherit;
font-weight: normal;
font-size: var(--fs-normal);
line-height: 1.4;
text-transform: none;
background: #EBECEC;
color: #ee1b2e;
box-shadow: none;
}
.sidebar-agenda .mobile-filters .other-filters + .btn,
.sidebar-agenda .mobile-filters .sidebar-date-filter + .btn {
margin: 0 0 5px 5px;
}
.sidebar-agenda .mobile-filters .other-filters:hover,
.sidebar-agenda .mobile-filters .sidebar-date-filter:hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
@media (max-width: 1200px) {
.sidebar-agenda .mobile-filters {
display: flex;
}
}
.sidebar-agenda .filter-sidebar {
min-width: 310px;
max-width: 100%;
height: 100vh;
position: sticky;
top: 0;
left: 0;
align-self: start;
background: transparent;
overflow-y: auto;
scrollbar-gutter: stable;
transition: top 0.2s ease-in-out;
}
.sidebar-agenda .filter-sidebar i {
font-size: var(--fs-small-title);
}
header.is-scrolled + main .sidebar-agenda .filter-sidebar {
top: 70px;
}
.sidebar-agenda .filter-sidebar::-webkit-scrollbar-track {
background: #EEE;
-webkit-box-shadow: none;
}
.sidebar-agenda .filter-sidebar::-webkit-scrollbar {
width: 5px;
position: absolute;
background: #EEE;
}
.sidebar-agenda .filter-sidebar::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #999;
}
.sidebar-agenda .filter-sidebar .filterBox.sidebar,
.sidebar-agenda .filter-sidebar .filterBox.sidebar form {
background: transparent;
}
.sidebar-agenda .filter-sidebar .sidebar-filters {
margin: 0;
padding: 15px 15px 15px 0;
font-family: inherit;
font-weight: normal;
font-size: var(--fs-normal);
line-height: 1.4;
text-transform: none;
background: transparent;
color: #ee1b2e;
}
.sidebar-agenda .filter-sidebar .sidebar-filters > * {
padding: 15px 0;
border-top: 1px solid #DDD;
}
.sidebar-agenda .filter-sidebar .sidebar-filters > *:first-child {
border-top: none;
}
@media (max-width: 1200px) {
.sidebar-agenda .filter-sidebar .sidebar-filters {
margin: 0;
}
}
.sidebar-agenda .filter-sidebar .sidebar-filters fieldset {
margin-bottom: 0;
}
@media (max-width: 1200px) {
.sidebar-agenda .filter-sidebar {
width: 50vw;
position: fixed;
z-index: 999;
padding: 30px;
border-right: 1px solid #DDD;
background: #FFF;
box-shadow: none;
transform: translateX(-110%);
transition: transform 0.3s ease-in;
}
.sidebar-agenda .filter-sidebar.open {
top: 70px;
transform: translateX(0);
}
}
@media (max-width: 767px) {
.sidebar-agenda .filter-sidebar {
width: 70vw;
}
}
@media (max-width: 479px) {
.sidebar-agenda .filter-sidebar {
width: 80vw;
}
}
.sidebar-agenda .sidebar-date-filter .input-daterange {
display: flex;
position: relative;
}
.sidebar-agenda .sidebar-date-filter .input-daterange .dateRange,
.sidebar-agenda .sidebar-date-filter .input-daterange .dateRangeSingle {
width: 100%;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
@media (max-width: 600px) {
.sidebar-agenda .sidebar-date-filter .input-daterange .dateRange {
display: none;
}
.sidebar-agenda .sidebar-date-filter .input-daterange .dateRangeSingle {
display: block;
}
}
@media (min-width: 601px) {
.sidebar-agenda .sidebar-date-filter .input-daterange .dateRange {
display: block;
}
.sidebar-agenda .sidebar-date-filter .input-daterange .dateRangeSingle {
display: none;
}
}
.sidebar-agenda .sidebar-date-filter .input-daterange .fa-calendar {
position: absolute;
right: 0;
pointer-events: none;
}
@media (max-width: 1200px) {
.sidebar-agenda .sidebar-date-filter {
display: none;
}
}
.sidebar-agenda .sidebar-tags-toggle {
display: flex;
justify-content: space-between;
}
.sidebar-agenda .select .select-anchor {
padding: 0;
background: transparent;
}
.sidebar-agenda .select .select-anchor:focus {
outline: revert;
outline-offset: revert;
}
.sidebar-agenda .select .option-wrapper {
background: transparent;
}
.sidebar-agenda .select .select-label.placeholder {
color: #000;
}
.sidebar-agenda .select .select-dropdown {
position: relative;
background: transparent;
box-shadow: none;
}
.sidebar-agenda .select .select-dropdown .select-options {
overflow-y: hidden;
box-shadow: none;
}
.sidebar-agenda .select .select-dropdown .select-options button {
margin-bottom: 5px;
}
.sidebar-agenda .select .dropdown-footer {
border: none;
}
.sidebar-agenda .select .select-anchor[aria-expanded=true] .fa {
transform: none;
}
.sidebar-agenda .select .select-options {
padding: 20px 0;
}
.sidebar-agenda .select .icon-wrapper {
width: 16px;
height: 16px;
position: relative;
margin-left: auto;
}
.sidebar-agenda .select .icon-wrapper span {
margin: 0;
}
.sidebar-agenda .select .icon-wrapper .peppered-icon {
position: absolute;
transition: transform 0.2s ease;
}
.sidebar-agenda .select .icon-wrapper .peppered-icon:first-child {
transform: rotate(-90deg);
}
.sidebar-agenda .select .select-anchor[aria-expanded=true] .icon-wrapper .peppered-icon {
transform: rotate(180deg);
}
.sidebar-agenda .select .select-anchor[aria-expanded=true] .icon-wrapper .peppered-icon:first-child {
transform: rotate(0deg);
}
.sidebar-agenda .select div[id=tags] .select-options {
pointer-events: auto;
}
.sidebar-agenda button.close-button {
display: none;
align-items: center;
justify-content: center;
margin-left: auto;
padding: 10px;
border: none;
background: #FFF;
color: #000;
opacity: 0.8;
cursor: pointer;
will-change: opacity;
transition: all 0.2s ease-in-out;
}
.sidebar-agenda button.close-button:hover {
transition: all 0.1s ease-in-out;
opacity: 1;
}
.sidebar-agenda button.close-button::before {
content: "";
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
background: transparent;
}
.sidebar-agenda button.close-button > * {
pointer-events: none;
}
@media (max-width: 1200px) {
.sidebar-agenda button.close-button {
display: flex;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.footerWrapper {
position: relative;
font-family: inherit;
font-weight: 300;
line-height: 150%;
text-align: center;
text-transform: none;
background: #F6F6F6;
overflow: hidden;
font-size: var(--fs-normal);
}
@media (min-width: 768px) {
.footerWrapper {
text-align: left;
}
}
.footerWrapper .inner {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
padding: 0 15px;
}
@media (max-width: 767px) {
.footerWrapper .inner {
max-width: none;
}
}
@media (min-width: 768px) {
.footerWrapper .inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
.footerWrapper .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.footerWrapper .inner {
max-width: 1170px;
}
}
.footerWrapper .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
@media (min-width: 768px) {
.footerWrapper .inner {
display: flex;
}
}
@media (min-width: 1200px) {
.footerWrapper .inner {
max-width: 1170px;
}
}
.footerWrapper .column {
margin: 60px 0 60px 0;
color: #000;
flex: 1;
}
@media (min-width: 768px) {
.footerWrapper .column:not(:last-child) {
padding-right: 15px;
}
}
.footerWrapper .column:first-child:last-child {
text-align: center;
padding-right: 0;
}
.footerWrapper .column ul {
margin-bottom: 0;
}
.footerWrapper .column a:not(.btn) {
text-decoration: underline;
color: #000;
}
.footerWrapper .column a:not(.btn):hover {
text-decoration: none;
color: rgb(76.5, 76.5, 76.5);
}
.footerWrapper h2,
.footerWrapper h3 {
margin: 0 0 15px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 400;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-small-title);
}
.footerWrapper address {
margin-bottom: 20px;
}
.footerWrapper ul li {
list-style: none;
padding-bottom: 5px;
line-height: 1;
}
.footerWrapper .subscribe-widget {
margin-top: 30px;
}
.footerWrapper .subscribe-widget input {
max-width: 30em;
margin: 0 auto;
}
.footerWrapper .subscribe-widget .msg {
max-width: 30em;
margin: 0 auto;
padding-top: 10px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
text-transform: none;
text-align: left;
animation: message-slide-in 0.2s ease-in-out;
}
.footerWrapper .subscribe-widget .msg .peppered-icon {
position: static;
color: #0AA332;
}
.footerWrapper .subscribe-widget .msg.error .peppered-icon {
color: #ee1b2e;
}
.footerWrapper .subscribe-widget .msg.warning .peppered-icon {
color: #F0B53E;
}
.footerWrapper .subscribe-widget .grecaptcha-branding {
font-size: 0.6em;
line-height: 1.2;
color: inherit;
opacity: 0.5;
}
.footerWrapper .subscribe-widget .grecaptcha-branding a,
.footerWrapper .subscribe-widget .grecaptcha-branding a:link,
.footerWrapper .subscribe-widget .grecaptcha-branding a:hover,
.footerWrapper .subscribe-widget .grecaptcha-branding a:active,
.footerWrapper .subscribe-widget .grecaptcha-branding a:visited {
text-decoration: underline;
color: inherit;
}
.footerWrapper .btn.btn-active {
width: auto;
border: none;
background: #ee1b2e;
color: #FFF;
}
.footerWrapper .btn.btn-active:hover {
border: none;
background: #D11021;
color: #FFF;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 1200px) {
.formWrapper .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.formWrapper:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.form--spektrix .form {
width: 50%;
}
.form--spektrix .form__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
margin-bottom: 1rem;
gap: 0.5rem;
}
.form--spektrix .form__row label,
.form--spektrix .form__row input {
flex: 0 0 auto;
width: 100%;
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
.form--spektrix .form__row label {
width: 16.66666667%;
}
.form--spektrix .form__row input {
width: 41.66666667%;
}
}
.form--spektrix .form__error {
margin-bottom: 1.5rem;
padding: 0.75rem;
background-color: #DDD;
color: #ee1b2e;
}
.form--spektrix .form__error p {
margin: 0;
}
.form--spektrix .interests {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.form--spektrix .interests .form__row {
display: block;
}
.form--spektrix .interests .form__row label {
display: flex;
align-items: baseline;
width: auto;
}
.form--spektrix .interests .form__row input[type=checkbox] {
flex: none;
width: auto;
margin-inline-end: 0.5rem;
}
.form--spektrix.is-loading button {
opacity: 0.3;
}
.form--spektrix.was-validated input:invalid {
border-color: #ee1b2e;
}
.form-success {
display: none;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
/*
NOTES:
the z-index stack here is inverse from what you're used to, because the
later elements sit underneath the prior elements; ie. slide out from
under them
*/
header {
position: relative;
z-index: 1000;
/*
offset #-targets so they don't end up below the fixed header
*/
/*
the fixed box switches from inline to fixed/sticky, so we add padding
here to offset the change in height so that the content doesn't jump
*/
/*
basic link style
*/
/*
showcase image layers
*/
/*
submenu toggle (with > icon) base style
*/
/*
the fixed box contains all fixed elements
*/
/*
the top bar is the always visible part
when the page is scrolled (or on mobile) it's less high
*/
/*
The searchbox covers the topbar and slides in from above
*/
/*
event box sticks an event info and a call2action button below the header
*/
}
header ~ footer,
header ~ main {
position: relative;
}
header ~ footer {
z-index: 0;
}
header ~ main {
z-index: 1;
}
header ~ #content [id^=anchor]:target::before,
header ~ #content [id^=pp_page]:target::before {
content: "";
display: block;
height: 130px;
margin-top: -130px;
}
header #fixed-box-buffer {
will-change: height;
}
header.is-scrolled.variant-suckerfish:not(.suckerfish-unified) #fixed-box-buffer {
height: 130px;
}
@media (max-width: 767px) {
header.is-scrolled.variant-suckerfish:not(.suckerfish-unified) #fixed-box-buffer {
height: 70px;
}
}
header.is-scrolled #fixed-box-buffer {
height: 70px;
}
@media (max-width: 767px) {
header.is-scrolled #fixed-box-buffer {
height: 70px;
}
}
header a {
display: inline-block;
text-decoration: none;
}
header .imagelayer,
header .gradientOverlay,
header .clickLayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent no-repeat center/cover;
}
header .gradientOverlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
}
header .submenu-toggle {
display: flex;
align-items: center;
}
header .submenu-toggle > i {
width: 1em;
height: 1em;
position: relative;
font-size: 20px;
line-height: 1;
text-align: center;
color: inherit;
will-change: transform;
transition: transform 0.14s ease-in-out;
}
header .submenu-toggle:hover > i, header .submenu-toggle:active > i {
color: inherit;
}
header .submenu-toggle[aria-expanded=true] > i {
transform: rotate(180deg);
}
header .submenu-toggle.suckerfish > i {
margin: 0 0 0 5px;
color: currentcolor;
}
header .submenu-toggle.suckerfish:hover > i, header .submenu-toggle.suckerfish:active > i {
color: currentcolor;
}
header #fixed-box {
position: relative;
top: 0;
right: 0;
left: 0;
z-index: 3;
background: transparent;
color: inherit;
box-shadow: none;
will-change: background;
transition: all 0.2s ease-in-out;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #fixed-box {
background: transparent;
color: #000;
box-shadow: none;
}
header.is-scrolled #fixed-box {
max-height: 100vh;
position: fixed;
will-change: transform;
animation: topbarSlide 0.2s ease-in-out;
}
@keyframes topbarSlide {
from {
transform: translateY(-70px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
header.has-announcement-bar:not(.is-scrolled) + #content {
margin-top: 1.4rem;
}
header.has-announcement-bar:not(.is-scrolled) #fixed-box {
top: 1.4rem;
}
header #topbar {
width: 100%;
height: 70px;
position: relative;
z-index: 2;
border-bottom: none;
font-family: inherit;
font-weight: normal;
text-transform: none;
background: inherit;
color: inherit;
font-size: inherit;
}
header #topbar > .inner {
height: 100%;
margin: 0 auto;
padding: 10px 0;
}
header #topbar > .inner > .inside {
display: flex;
align-items: flex-start;
height: 100%;
padding: 10px 0;
border-bottom: none;
}
@media (min-width: 768px) {
header #topbar > .inner {
max-width: 100%;
}
}
@media (min-width: 992px) {
header #topbar > .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
header #topbar > .inner {
max-width: 1170px;
}
}
@media (max-width: 767px) {
header #topbar {
align-items: center;
height: 70px;
}
header #topbar > .inner {
padding: 0 15px 0 0;
}
header #topbar > .inner > .inside {
align-items: center;
padding: 0 0;
}
}
header #topbar .brand {
display: block;
height: 60px;
max-height: 100%;
margin: 0;
}
@media (max-width: 767px) {
header #topbar .brand {
height: 100%;
}
}
header #topbar .brand img {
max-width: 100%;
height: 100%;
float: left;
padding: 0;
}
header #topbar .brand img.mobile-logo, header #topbar .brand img.mobile-showcase-logo, header #topbar .brand img.mobile-sticky-logo, header #topbar .brand img.sticky-logo, header #topbar .brand img.showcase-logo {
display: none;
}
@media (max-width: 767px) {
header #topbar .brand img {
display: none;
}
header #topbar .brand img.mobile-logo {
display: inline-block;
}
}
header #topbar .menus {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
line-height: 1;
flex: 1;
overflow: hidden;
}
header #topbar a,
header #topbar a:link,
header #topbar a:visited {
color: inherit;
}
header #topbar a:hover,
header #topbar a:active {
text-decoration: none;
color: #3469CB;
}
header.is-scrolled #topbar {
height: 70px;
box-shadow: none;
}
header.is-scrolled #topbar > .inner {
padding: 0 15px 0 0;
}
header.is-scrolled #topbar > .inner > .inside {
align-items: center;
padding: 0 0;
border-bottom: none;
}
header.is-scrolled #topbar .brand {
margin: 0;
}
header.suckerfish-unified.suckerfish-on-top #topbar .brand img, header.suckerfish-unified.suckerfish-on-top #topbar .brand img.mobile-logo, header.suckerfish-unified.suckerfish-on-top #topbar .brand img.mobile-sticky-logo, header.suckerfish-unified.suckerfish-on-top #topbar .brand img.mobile-showcase-logo, header.suckerfish-unified.suckerfish-on-top #topbar .brand img.showcase-logo, header.is-scrolled #topbar .brand img, header.is-scrolled #topbar .brand img.mobile-logo, header.is-scrolled #topbar .brand img.mobile-sticky-logo, header.is-scrolled #topbar .brand img.mobile-showcase-logo, header.is-scrolled #topbar .brand img.showcase-logo {
display: none;
}
header.suckerfish-unified.suckerfish-on-top #topbar .brand img.sticky-logo, header.is-scrolled #topbar .brand img.sticky-logo {
display: inline-block;
}
@media (max-width: 767px) {
header.suckerfish-unified.suckerfish-on-top #topbar .brand img, header.suckerfish-unified.suckerfish-on-top #topbar .brand img.sticky-logo, header.suckerfish-unified.suckerfish-on-top #topbar .brand img.mobile-logo, header.suckerfish-unified.suckerfish-on-top #topbar .brand img.mobile-showcase-logo, header.suckerfish-unified.suckerfish-on-top #topbar .brand img.showcase-logo, header.is-scrolled #topbar .brand img, header.is-scrolled #topbar .brand img.sticky-logo, header.is-scrolled #topbar .brand img.mobile-logo, header.is-scrolled #topbar .brand img.mobile-showcase-logo, header.is-scrolled #topbar .brand img.showcase-logo {
display: none;
}
header.suckerfish-unified.suckerfish-on-top #topbar .brand img.mobile-sticky-logo, header.is-scrolled #topbar .brand img.mobile-sticky-logo {
display: inline-block;
}
}
@media (min-width: 768px) {
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar {
height: 70px;
}
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar {
border-bottom: none;
}
@media (max-width: 767px) {
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .brand img {
display: none;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .brand img.mobile-showcase-logo {
display: inline-block;
}
}
@media (min-width: 768px) {
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .brand {
height: 60px;
margin: 0;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .brand img {
display: none;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .brand img.showcase-logo {
display: inline-block;
}
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar a,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar a:link,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar a:visited {
color: #000;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar a:hover,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar a:active {
color: #000;
}
header.variant-suckerfish:not(.suckerfish-unified):not(.is-scrolled) #topbar #topbar-suckerfish-menu, header.variant-suckerfish.has-showcase:not(.suckerfish-on-top):not(.suckerfish-unified):not(.is-scrolled) #topbar #topbar-suckerfish-menu {
display: none;
}
header.variant-shortcuts-unified #topbar > .inner > .inside, header.variant-shortcuts-unified-alt #topbar > .inner > .inside, header.variant-suckerfish.suckerfish-unified:not(.suckerfish-right) #topbar > .inner > .inside, header.variant-suckerfish.is-scrolled:not(.suckerfish-right) #topbar > .inner > .inside {
align-items: center;
}
@media (min-width: 1200px) {
header.variant-shortcuts-unified #topbar .menus, header.variant-shortcuts-unified-alt #topbar .menus, header.variant-suckerfish.suckerfish-unified:not(.suckerfish-right) #topbar .menus, header.variant-suckerfish.is-scrolled:not(.suckerfish-right) #topbar .menus {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
@media (min-width: 768px) {
header.variant-shortcuts-unified #topbar .brand, header.variant-shortcuts-unified-alt #topbar .brand, header.variant-suckerfish.suckerfish-unified:not(.suckerfish-right) #topbar .brand, header.variant-suckerfish.is-scrolled:not(.suckerfish-right) #topbar .brand {
position: absolute;
top: auto;
left: 20px;
}
}
@media (min-width: 768px) and (min-width: 1200px) and (max-width: 1340px) {
header.variant-shortcuts-unified #topbar .brand, header.variant-shortcuts-unified-alt #topbar .brand, header.variant-suckerfish.suckerfish-unified:not(.suckerfish-right) #topbar .brand, header.variant-suckerfish.is-scrolled:not(.suckerfish-right) #topbar .brand {
display: none;
}
}
header.variant-shortcuts-unified-alt #topbar .brand {
flex: 0 1 auto;
}
header.variant-shortcuts-unified-alt #topbar .shortcuts-menu {
width: 100%;
}
header.variant-shortcuts-unified-alt #topbar .shortcuts-menu ul {
flex-wrap: nowrap;
justify-content: flex-start;
}
header.variant-shortcuts-unified-alt #topbar .shortcuts-menu ul li {
white-space: nowrap;
}
header.variant-shortcuts-unified-alt #topbar .menus {
justify-content: flex-start;
}
@media (max-width: 767px) {
header.variant-shortcuts-unified-alt #topbar .menus > * {
display: none;
}
}
header.variant-shortcuts-unified-alt #topbar .service-menu {
display: flex;
justify-content: flex-end;
}
header.has-showcase:not(.is-scrolled).variant-suckerfish.suckerfish-unified:not(.suckerfish-right) #topbar > .inner > .inside {
align-items: center;
}
header.variant-suckerfish.suckerfish-right #topbar > .inner > .inside {
align-items: center;
}
@media (min-width: 1200px) {
header.variant-suckerfish.suckerfish-right #topbar .menus {
flex-direction: column-reverse;
align-items: flex-end;
}
}
header #announcement-bar {
position: absolute;
top: -1.4rem;
right: 0;
left: 0;
z-index: 12;
background: #DDD;
}
header #announcement-bar .inner {
display: flex;
align-items: center;
justify-content: flex-end;
height: 1.4rem;
margin: 0 auto;
padding: 0 20px;
white-space: nowrap;
overflow: hidden;
line-height: 1;
text-align: right;
color: #333;
font-size: var(--fs-tiny);
}
@media (min-width: 768px) {
header #announcement-bar .inner {
max-width: 100%;
}
}
@media (min-width: 992px) {
header #announcement-bar .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
header #announcement-bar .inner {
max-width: 1170px;
}
}
header #announcement-bar .inner > * {
margin: 0;
padding: 0;
}
header #announcement-bar .inner a,
header #announcement-bar .inner a:link,
header #announcement-bar .inner a:visited {
text-decoration: none;
color: #333;
}
header #announcement-bar .inner a:hover, header #announcement-bar .inner a:active,
header #announcement-bar .inner a:link:hover,
header #announcement-bar .inner a:link:active,
header #announcement-bar .inner a:visited:hover,
header #announcement-bar .inner a:visited:active {
text-decoration: none;
color: #7697D4;
}
header #announcement-bar img {
margin: 0 0 0 10px;
}
header.is-scrolled #announcement-bar {
display: none;
}
header .shortcuts-menu,
header #topbar .shortcuts-menu {
font-family: inherit;
font-weight: inherit;
line-height: normal;
text-transform: inherit;
font-size: inherit;
}
header .shortcuts-menu a,
header .shortcuts-menu a:link,
header .shortcuts-menu a:visited,
header #topbar .shortcuts-menu a,
header #topbar .shortcuts-menu a:link,
header #topbar .shortcuts-menu a:visited {
display: flex;
align-items: center;
height: 100%;
text-decoration: none;
color: inherit;
}
header .shortcuts-menu a > span,
header .shortcuts-menu a:link > span,
header .shortcuts-menu a:visited > span,
header #topbar .shortcuts-menu a > span,
header #topbar .shortcuts-menu a:link > span,
header #topbar .shortcuts-menu a:visited > span {
text-decoration: none;
}
header .shortcuts-menu a:hover, header .shortcuts-menu a:active,
header .shortcuts-menu a:link:hover,
header .shortcuts-menu a:link:active,
header .shortcuts-menu a:visited:hover,
header .shortcuts-menu a:visited:active,
header #topbar .shortcuts-menu a:hover,
header #topbar .shortcuts-menu a:active,
header #topbar .shortcuts-menu a:link:hover,
header #topbar .shortcuts-menu a:link:active,
header #topbar .shortcuts-menu a:visited:hover,
header #topbar .shortcuts-menu a:visited:active {
color: rgb(76.5, 76.5, 76.5);
}
header .shortcuts-menu a:hover > span, header .shortcuts-menu a:active > span,
header .shortcuts-menu a:link:hover > span,
header .shortcuts-menu a:link:active > span,
header .shortcuts-menu a:visited:hover > span,
header .shortcuts-menu a:visited:active > span,
header #topbar .shortcuts-menu a:hover > span,
header #topbar .shortcuts-menu a:active > span,
header #topbar .shortcuts-menu a:link:hover > span,
header #topbar .shortcuts-menu a:link:active > span,
header #topbar .shortcuts-menu a:visited:hover > span,
header #topbar .shortcuts-menu a:visited:active > span {
text-decoration: none;
}
header .shortcuts-menu .current > a, header .shortcuts-menu .current > a:link, header .shortcuts-menu .current > a:visited,
header #topbar .shortcuts-menu .current > a,
header #topbar .shortcuts-menu .current > a:link,
header #topbar .shortcuts-menu .current > a:visited {
font-weight: inherit;
color: inherit;
}
header .shortcuts-menu .current > a > span, header .shortcuts-menu .current > a:link > span, header .shortcuts-menu .current > a:visited > span,
header #topbar .shortcuts-menu .current > a > span,
header #topbar .shortcuts-menu .current > a:link > span,
header #topbar .shortcuts-menu .current > a:visited > span {
text-decoration: none;
}
header .shortcuts-menu .current > a:hover, header .shortcuts-menu .current > a:active,
header #topbar .shortcuts-menu .current > a:hover,
header #topbar .shortcuts-menu .current > a:active {
color: inherit;
}
header .shortcuts-menu ul,
header #topbar .shortcuts-menu ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin: 0;
padding: 15px 0;
gap: 15px;
}
header .shortcuts-menu li,
header #topbar .shortcuts-menu li {
display: inline-block;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) .shortcuts-menu a,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) .shortcuts-menu a:link,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) .shortcuts-menu a:visited,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .shortcuts-menu a,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .shortcuts-menu a:link,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .shortcuts-menu a:visited {
color: inherit;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) .shortcuts-menu a:hover,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) .shortcuts-menu a:active,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .shortcuts-menu a:hover,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #topbar .shortcuts-menu a:active {
color: rgb(76.5, 76.5, 76.5);
}
@media (max-width: 767px) {
header #topbar-menu,
header #topbar-suckerfish-menu {
display: none;
}
}
header.menu-opened #topbar-menu {
display: none;
}
header.is-scrolled #topbar-menu {
display: none;
}
header #service-menu {
display: flex;
align-items: center;
position: relative;
}
header #service-menu > * {
display: flex;
align-items: center;
height: 30px;
margin: 0;
padding: 0;
}
header #service-menu a,
header #service-menu a:link,
header #service-menu a:visited {
margin: 0 0 0 15px;
padding: 0 5px;
line-height: 1;
text-decoration: none;
color: inherit;
}
header #service-menu a:hover,
header #service-menu a:active {
text-decoration: none;
color: rgb(139.5, 139.5, 139.5);
}
header #service-menu ul {
list-style: none;
margin: 0 0 0 15px;
padding: 0 5px;
white-space: nowrap;
}
header #service-menu ul li {
display: inline-block;
margin: 0;
padding: 0;
}
header #service-menu ul a {
margin: 0;
padding: 0;
}
header #service-menu button {
margin: 0 0 0 15px;
padding: 0 5px;
border: none;
border-radius: 0;
line-height: 1;
background: none;
color: inherit;
-webkit-appearance: none;
}
header #service-menu button:hover, header #service-menu button:active {
color: rgb(139.5, 139.5, 139.5);
}
header #service-menu svg {
width: 20px;
height: 20px;
position: relative;
}
@media (max-width: 991px) {
header #service-menu .shortcut {
display: none;
}
}
header #service-menu .theme-toggle {
position: relative;
}
header #service-menu .theme-toggle .switch {
display: inline-block;
width: 60px;
height: 30px;
position: relative;
margin-bottom: 0;
border: none;
border-radius: 20px;
}
header #service-menu .theme-toggle .switch input {
display: none;
}
header #service-menu .theme-toggle #sun {
fill: #FFF;
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
pointer-events: none;
z-index: 5;
padding: 6px;
}
header #service-menu .theme-toggle #moon {
fill: #FFF;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 5;
padding: 6px;
}
header #service-menu .theme-toggle .slider {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 0;
background: #EEE;
}
header #service-menu .theme-toggle .slider:hover {
background: rgb(250.75, 250.75, 250.75);
}
header #service-menu .theme-toggle .slider.animate {
transition: all 0.3s ease-in-out;
}
header #service-menu .theme-toggle .slider:before {
content: "";
width: 30px;
height: 30px;
position: absolute;
background: #3469CB;
}
header #service-menu .theme-toggle .slider:before:hover {
background: rgb(72.3, 120, 208.2);
}
header #service-menu .theme-toggle .slider.animate:before {
transition: all 0.3s ease-in-out;
}
header #service-menu .theme-toggle input:checked + .slider:before {
transform: translateX(30px);
}
header #service-menu .languages {
text-transform: uppercase;
}
header #service-menu .link {
padding: 0 5px;
}
@media (max-width: 767px) {
header #service-menu .link {
display: none;
}
}
@media (max-width: 1199px) {
header #service-menu .avatar {
display: none;
}
}
header #service-menu .cart, header #service-menu .cart:link, header #service-menu .cart:visited {
padding: 5px;
border-radius: 0px;
background: transparent;
color: inherit;
}
header #service-menu .cart:hover, header #service-menu .cart:active {
background: transparent;
color: rgb(139.5, 139.5, 139.5);
}
header #service-menu .cart::after {
content: attr(data-count);
}
header #service-menu .cart::after,
header #service-menu .cart .tmplugin_basket_badge {
display: inline-block;
padding-left: 0.5ex;
}
header #service-menu .cart[data-count="0"], header #service-menu .cart.tmplugin_basket_icon_empty {
display: none;
padding: 0 5px;
}
header #service-menu .cart[data-count="0"]::after, header #service-menu .cart.tmplugin_basket_icon_empty::after {
content: "";
}
header #service-menu .cart[data-count="0"], header #service-menu .cart[data-count="0"]:link, header #service-menu .cart[data-count="0"]:visited, header #service-menu .cart.tmplugin_basket_icon_empty, header #service-menu .cart.tmplugin_basket_icon_empty:link, header #service-menu .cart.tmplugin_basket_icon_empty:visited {
background: transparent;
color: inherit;
}
header #service-menu .cart[data-count="0"]:hover, header #service-menu .cart[data-count="0"]:active, header #service-menu .cart.tmplugin_basket_icon_empty:hover, header #service-menu .cart.tmplugin_basket_icon_empty:active {
background: transparent;
color: rgb(139.5, 139.5, 139.5);
}
header #service-menu .languages,
header #service-menu .icon-label,
header #service-menu .link {
white-space: nowrap;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu button,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu a,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu a:link,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu a:visited {
color: #F6F6F6;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu button:hover,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu a:hover,
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu a:active {
color: #D2D2D2;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart:link, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart:visited {
background: transparent;
color: #F6F6F6;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart:hover, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart:active {
background: transparent;
color: #D2D2D2;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart[data-count="0"], header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart[data-count="0"]:link, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart[data-count="0"]:visited, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart.tmplugin_basket_icon_empty, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart.tmplugin_basket_icon_empty:link, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart.tmplugin_basket_icon_empty:visited {
background: transparent;
color: #F6F6F6;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart[data-count="0"]:hover, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart[data-count="0"]:active, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart.tmplugin_basket_icon_empty:hover, header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) #service-menu .cart.tmplugin_basket_icon_empty:active {
background: transparent;
color: #D2D2D2;
}
header.is-scrolled #service-menu button:not(.cart),
header.is-scrolled #service-menu a:not(.cart),
header.is-scrolled #service-menu a:link:not(.cart),
header.is-scrolled #service-menu a:visited:not(.cart) {
color: #3F3F3F;
}
header.is-scrolled #service-menu button:hover:not(.cart),
header.is-scrolled #service-menu a:hover:not(.cart),
header.is-scrolled #service-menu a:active:not(.cart) {
color: rgb(139.5, 139.5, 139.5);
}
header.is-scrolled #service-menu .cart, header.is-scrolled #service-menu .cart:link, header.is-scrolled #service-menu .cart:visited {
background: transparent;
color: #3F3F3F;
}
header.is-scrolled #service-menu .cart:hover, header.is-scrolled #service-menu .cart:active {
background: transparent;
color: rgb(139.5, 139.5, 139.5);
}
header.is-scrolled #service-menu .cart[data-count="0"], header.is-scrolled #service-menu .cart[data-count="0"]:link, header.is-scrolled #service-menu .cart[data-count="0"]:visited, header.is-scrolled #service-menu .cart.tmplugin_basket_icon_empty, header.is-scrolled #service-menu .cart.tmplugin_basket_icon_empty:link, header.is-scrolled #service-menu .cart.tmplugin_basket_icon_empty:visited {
background: transparent;
color: #3F3F3F;
}
header.is-scrolled #service-menu .cart[data-count="0"]:hover, header.is-scrolled #service-menu .cart[data-count="0"]:active, header.is-scrolled #service-menu .cart.tmplugin_basket_icon_empty:hover, header.is-scrolled #service-menu .cart.tmplugin_basket_icon_empty:active {
background: transparent;
color: rgb(139.5, 139.5, 139.5);
}
header .hamburger {
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
position: relative;
margin: 0 0 0 15px;
padding: 0 5px;
border: none;
border-radius: 0;
font-size: 20px;
background: none;
color: inherit;
-webkit-appearance: none;
}
header .hamburger .icon {
display: flex;
width: 20px;
height: 20px;
position: relative;
}
header .hamburger .bar {
display: block;
width: 20px;
height: 3px;
position: absolute;
top: 8px;
z-index: 1;
border-radius: 3px;
background: currentcolor;
will-change: transform;
transition: transform 0.1s ease-in-out;
}
header .hamburger .bar:first-child {
transform: translateY(8px);
}
header .hamburger .bar:last-child {
transform: translateY(-8px);
}
header .hamburger[aria-expanded=true] .bar:first-child {
transform: rotate(45deg);
}
header .hamburger[aria-expanded=true] .bar:last-child {
transform: rotate(-45deg);
}
header .hamburger[aria-expanded=true] .bar:not(:first-child):not(:last-child) {
transform: scale(0);
}
header .hamburger:hover {
color: rgb(139.5, 139.5, 139.5);
}
header .hamburger .label {
display: inline-block;
margin: 0 1ex 0 0;
padding: 0;
font-size: 10px;
line-height: 1;
text-transform: none;
color: inherit;
width: 1px;
height: 1px;
position: absolute;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) .hamburger {
color: #F6F6F6;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) .hamburger:hover {
color: #D2D2D2;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled) .hamburger .label {
color: inherit;
}
header.is-scrolled .hamburger {
color: inherit;
}
header.is-scrolled .hamburger:hover {
color: rgb(139.5, 139.5, 139.5);
}
header.is-scrolled .hamburger .label {
color: inherit;
}
header.variant-suckerfish .hamburger {
display: none;
}
@media (max-width: 1199px) {
header.variant-suckerfish .hamburger {
display: flex;
}
}
header .foldout-container {
width: 100%;
max-height: 100dvh;
position: absolute;
top: 0;
border-top: none;
border-bottom: none;
font-family: inherit;
font-weight: inherit;
text-transform: inherit;
background: #F6F6F6;
color: inherit;
box-shadow: none;
overflow: auto;
will-change: top, padding;
transition: top 0.15s ease-in-out, opacity 0.15s ease-in-out, padding 0.15s ease-in-out;
font-size: var(--fs-small-title);
}
header .foldout-container[aria-expanded=false] {
opacity: 0;
top: -100%;
transition: top 0.1s ease-in-out, opacity 0.1s ease-in-out, padding 0.1s ease-in-out;
pointer-events: none;
}
header .foldout-container[aria-expanded=false]:not(.animating) {
visibility: hidden;
}
header .foldout-container > .inner {
min-height: 100%;
margin: 0 auto;
padding: 0 15px;
}
header .foldout-container > .inner > .inside {
display: flex;
justify-content: space-between;
height: 100%;
padding: 0;
border-bottom: none;
}
header .foldout-container > .inner > .inside > *:not(.user-menu) {
width: 50%;
padding: 30px 15px;
}
@media (max-width: 767px) {
header .foldout-container > .inner > .inside > *:not(.user-menu) {
width: 100%;
padding: 15px 0;
}
}
@media (max-width: 767px) {
header .foldout-container > .inner > .inside {
display: block;
}
}
header .foldout-container > .inner > .unfolded-inside {
height: 100%;
padding: 0;
border-bottom: none;
}
header .foldout-container > .inner > .unfolded-inside > *:not(.user-menu) {
padding: 30px 15px;
}
@media (max-width: 767px) {
header .foldout-container > .inner > .unfolded-inside > *:not(.user-menu) {
padding: 15px 0;
}
}
header .foldout-container > .inner > .unfolded-inside .main-menu {
display: flex;
}
header .foldout-container > .inner > .unfolded-inside .unfolded-list {
width: 50%;
flex-shrink: 0;
}
header .foldout-container > .inner > .unfolded-inside .user-menu {
display: flex;
width: 100%;
margin: 0;
}
header .foldout-container > .inner > .unfolded-inside .user-menu > * {
flex: 1;
}
@media (max-width: 767px) {
header .foldout-container > .inner > .unfolded-inside {
display: none;
}
}
@media (min-width: 768px) {
header .foldout-container > .inner {
max-width: 100%;
}
}
@media (min-width: 992px) {
header .foldout-container > .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
header .foldout-container > .inner {
max-width: 1170px;
}
}
header .foldout-container nav {
font-family: inherit;
font-weight: inherit;
line-height: 45px;
text-transform: inherit;
background: inherit;
color: inherit;
font-size: inherit;
}
header .foldout-container nav a:not(.btn) {
text-decoration: none;
color: inherit;
}
header .foldout-container nav a:not(.btn):hover, header .foldout-container nav a:not(.btn):active {
color: rgb(139.5, 139.5, 139.5);
}
header .foldout-container nav a:not(.btn):hover > span, header .foldout-container nav a:not(.btn):active > span {
text-decoration: none;
}
header .foldout-container nav .current > a:not(.btn), header .foldout-container nav .current > a:not(.btn):link, header .foldout-container nav .current > a:not(.btn):visited {
font-weight: inherit;
color: #3F3F3F;
}
header .foldout-container nav .current > a:not(.btn) > span, header .foldout-container nav .current > a:not(.btn):link > span, header .foldout-container nav .current > a:not(.btn):visited > span {
text-decoration: underline;
}
header .foldout-container nav .current > a:not(.btn):hover, header .foldout-container nav .current > a:not(.btn):active {
color: rgb(139.5, 139.5, 139.5);
}
header .foldout-container nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header .foldout-container nav .unfolded-list {
width: 50%;
flex-shrink: 0;
}
header .foldout-container nav li {
position: relative;
margin: 0;
padding: 0;
padding-left: 30px;
}
header .foldout-container nav .submenu-toggle > i {
top: auto;
left: -30px;
margin-right: -1em;
color: #ee1b2e;
}
header .foldout-container nav .submenu-toggle:hover > i, header .foldout-container nav .submenu-toggle:active > i {
color: #D11021;
}
header .foldout-container nav [aria-expanded=true] > i {
transform: rotate(90deg);
}
header .foldout-container nav .submenu-container {
position: relative;
background: inherit;
will-change: height;
transition: height 0.14s ease-in-out;
overflow: hidden;
}
header .foldout-container nav .submenu-container[aria-expanded=false] {
height: 0 !important;
}
header .foldout-container nav .submenu-container[aria-expanded=false]:not(.animating) {
visibility: hidden;
}
header .foldout-container nav .submenu {
padding: 0 0 15px 0;
font-family: inherit;
font-weight: inherit;
line-height: 35px;
text-transform: inherit;
background: inherit;
font-size: var(--fs-normal);
}
header .foldout-container nav .submenu .submenu-toggle > i {
top: auto;
}
header .foldout-container nav .submenu .submenu {
margin-bottom: 15px;
padding: 0;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-transform: inherit;
background: transparent;
font-size: inherit;
}
header .foldout-container nav.user-menu {
width: 33.3%;
margin: 15px 30px;
padding: 30px 15px;
align-self: flex-start;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.45;
text-transform: none;
background: #FFF;
color: #000;
font-size: var(--fs-small);
}
@media (max-width: 991px) {
header .foldout-container nav.user-menu {
width: 50%;
}
}
@media (max-width: 767px) {
header .foldout-container nav.user-menu {
width: 100%;
margin: 0;
padding: 15px;
}
}
header .foldout-container nav.user-menu h2,
header .foldout-container nav.user-menu .orders,
header .foldout-container nav.user-menu .page,
header .foldout-container nav.user-menu .wishlist {
font-size: var(--fs-large-subtitle);
}
header .foldout-container nav.user-menu h2,
header .foldout-container nav.user-menu .user-info,
header .foldout-container nav.user-menu li {
padding-left: 45px;
}
header .foldout-container nav.user-menu a:not(.btn) {
text-decoration: none;
color: #000;
}
header .foldout-container nav.user-menu a:not(.btn):hover {
text-decoration: underline;
color: #3469CB;
}
header .foldout-container .socials {
display: flex;
margin: 30px 0 0 0;
margin-left: 1em;
padding-left: 5px;
border-top: none;
}
header .foldout-container .socials a + a {
margin-left: 10px;
}
header .foldout-container .socials svg {
width: 20px;
height: 20px;
}
header.unfolded .foldout-container > .inner > .inside {
display: none;
}
@media (max-width: 767px) {
header.unfolded .foldout-container > .inner > .inside {
display: block;
}
}
header:not(.unfolded) .foldout-container > .inner > .unfolded-inside {
display: none;
}
header.suckerfish-small .foldout-container.suckerfish-submenu {
width: auto;
}
header.suckerfish-small .foldout-container.suckerfish-submenu > .inner > .inside > * {
width: 100%;
}
header.is-scrolled .foldout-container[aria-expanded=true] {
height: auto;
top: 0;
padding-top: 70px;
}
header:not(.is-scrolled).has-showcase .foldout-container[aria-expanded=true] {
padding-top: 70px;
}
@media (max-width: 767px) {
header:not(.is-scrolled).has-showcase .foldout-container[aria-expanded=true] {
padding-top: 70px;
}
}
header:not(.is-scrolled) .foldout-container[aria-expanded=true] {
height: auto;
top: 0;
padding-top: 70px;
}
@media (min-width: 768px) {
header:not(.is-scrolled) .foldout-container[aria-expanded=true] {
padding-top: 70px;
}
}
header #mobile-service-menu {
display: block;
text-align: left;
padding-left: 30px;
}
@media (min-width: 1200px) {
header #mobile-service-menu {
display: none;
}
}
header #mobile-service-menu a,
header #mobile-service-menu a:link,
header #mobile-service-menu a:visited {
display: block;
line-height: 45px;
text-decoration: none;
color: inherit;
}
header #mobile-service-menu a:hover,
header #mobile-service-menu a:active {
color: rgb(139.5, 139.5, 139.5);
}
header #mobile-service-menu a:hover > span,
header #mobile-service-menu a:active > span {
text-decoration: none;
}
header .main-menu {
position: relative;
order: 1;
}
@media (max-width: 1199px) {
header #topbar-suckerfish-menu,
header #suckerfish-menu {
display: none;
}
}
header #topbar-suckerfish-menu > .inner ul,
header #suckerfish-menu > .inner ul {
justify-content: flex-start;
height: 60px;
margin: 0;
padding: 0;
font-family: inherit;
font-weight: normal;
text-transform: none;
font-size: inherit;
}
header #topbar-suckerfish-menu > .inner ul a,
header #topbar-suckerfish-menu > .inner ul a:link,
header #topbar-suckerfish-menu > .inner ul a:visited,
header #suckerfish-menu > .inner ul a,
header #suckerfish-menu > .inner ul a:link,
header #suckerfish-menu > .inner ul a:visited {
color: #000;
}
header #topbar-suckerfish-menu > .inner ul a:hover,
header #topbar-suckerfish-menu > .inner ul a:link:hover,
header #topbar-suckerfish-menu > .inner ul a:visited:hover,
header #suckerfish-menu > .inner ul a:hover,
header #suckerfish-menu > .inner ul a:link:hover,
header #suckerfish-menu > .inner ul a:visited:hover {
color: #3469CB;
}
header #topbar-suckerfish-menu > .inner ul a:hover > span,
header #topbar-suckerfish-menu > .inner ul a:link:hover > span,
header #topbar-suckerfish-menu > .inner ul a:visited:hover > span,
header #suckerfish-menu > .inner ul a:hover > span,
header #suckerfish-menu > .inner ul a:link:hover > span,
header #suckerfish-menu > .inner ul a:visited:hover > span {
text-decoration: none;
}
header #topbar-suckerfish-menu > .inner ul .current > a, header #topbar-suckerfish-menu > .inner ul .current > a:link, header #topbar-suckerfish-menu > .inner ul .current > a:visited,
header #suckerfish-menu > .inner ul .current > a,
header #suckerfish-menu > .inner ul .current > a:link,
header #suckerfish-menu > .inner ul .current > a:visited {
font-weight: inherit;
color: #3469CB;
}
header #topbar-suckerfish-menu > .inner ul .current > a > span, header #topbar-suckerfish-menu > .inner ul .current > a:link > span, header #topbar-suckerfish-menu > .inner ul .current > a:visited > span,
header #suckerfish-menu > .inner ul .current > a > span,
header #suckerfish-menu > .inner ul .current > a:link > span,
header #suckerfish-menu > .inner ul .current > a:visited > span {
text-decoration: underline;
}
header #topbar-suckerfish-menu > .inner ul .current > a:hover, header #topbar-suckerfish-menu > .inner ul .current > a:active,
header #suckerfish-menu > .inner ul .current > a:hover,
header #suckerfish-menu > .inner ul .current > a:active {
color: #3469CB;
}
header #suckerfish-menu {
position: relative;
z-index: 1;
background: #FFF;
}
header #suckerfish-menu > .inner {
width: 100%;
position: relative;
z-index: 1;
border-top: none;
border-bottom: none;
background: inherit;
}
header #suckerfish-menu > .inner .inside {
margin: 0 auto;
}
@media (min-width: 768px) {
header #suckerfish-menu > .inner .inside {
max-width: 100%;
}
}
@media (min-width: 992px) {
header #suckerfish-menu > .inner .inside {
max-width: 970px;
}
}
@media (min-width: 1200px) {
header #suckerfish-menu > .inner .inside {
max-width: 1170px;
}
}
header #suckerfish-menu .shortcuts-menu {
padding: 0 15px;
}
header #suckerfish-menu .foldout-container {
max-height: 60vh;
z-index: 0;
padding-top: 0;
}
header #suckerfish-menu .foldout-container[aria-expanded=true] {
top: 60px;
}
header #suckerfish-menu .foldout-container[aria-expanded=false] {
padding-top: 0;
}
header #suckerfish-menu .foldout-container[aria-expanded=false]:not(.animating) {
visibility: hidden;
}
header.is-scrolled #suckerfish-menu {
display: none;
}
header.has-showcase.suckerfish-on-top #suckerfish-menu {
z-index: 1;
}
header #search-box {
display: flex;
align-items: center;
justify-content: center;
height: 70px;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 11;
border-bottom: none;
background: transparent;
color: inherit;
will-change: transform;
transition: all 0.2s ease-in-out;
text-align: center;
}
header #search-box[aria-expanded=false] {
opacity: 0;
transform: translateY(-70px);
}
header #search-box[aria-expanded=false]:not(.animating) {
visibility: hidden;
}
header #search-box form {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 10px 0;
border-bottom: none;
}
@media (min-width: 768px) {
header #search-box form {
max-width: 100%;
}
}
@media (min-width: 992px) {
header #search-box form {
max-width: 970px;
}
}
@media (min-width: 1200px) {
header #search-box form {
max-width: 1170px;
}
}
header #search-box form input {
width: 30em;
max-width: 50vw;
margin: 0 15px 0 0;
padding: 5px 0;
border-top: none;
border-right: none;
border-bottom: 1px solid #F6F6F6;
border-left: none;
border-radius: 0;
font-family: inherit;
font-weight: normal;
line-height: 1;
background: transparent;
color: #3F3F3F;
transition: all 0.2s ease-in-out;
-webkit-appearance: none;
font-size: inherit;
}
header #search-box form input::placeholder {
color: #999;
}
header #search-box form button {
height: 20px;
margin: 0 15px 0 0;
padding: 0 5px;
border: none;
background: none;
color: inherit;
-webkit-appearance: none;
}
header #search-box form button svg {
width: 20px;
}
header #search-box form button:hover {
color: rgb(139.5, 139.5, 139.5);
}
@media (max-width: 767px) {
header #search-box {
height: 70px;
}
header #search-box form {
padding: 0 15px 0 0;
}
}
header.is-scrolled #search-box {
height: 70px;
}
header.is-scrolled #search-box form {
padding: 0 15px 0 0;
}
header .showcase-item {
max-height: 600px;
position: relative;
z-index: 1;
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
text-transform: none;
color: #FFF;
text-align: left;
overflow: hidden;
font-size: var(--fs-normal);
}
header .showcase-item, header .showcase-item.slick-slide {
display: flex;
}
@media (max-width: 991px) {
header .showcase-item {
flex-direction: column-reverse;
}
}
header .showcase-item.size-small {
max-height: 300px;
}
header .showcase-item.size-large {
max-height: 900px;
}
header .showcase-item:not(.size-boxed) {
height: 90vh;
padding: 30px 0;
}
@media (max-height: 500px) {
header .showcase-item:not(.size-boxed) {
height: auto;
}
}
header .showcase-item:not(.size-small):not(.size-boxed) {
min-height: 500px;
}
@media (min-height: 501px) and (min-width: 768px) {
header .showcase-item.has-video:not(.size-small, .size-medium, .size-boxed) {
height: 56.25vw;
max-height: 90vh;
}
}
header .showcase-item .credits {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 4px 5px;
font-family: inherit;
font-weight: normal;
line-height: 1;
text-transform: none;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
font-size: 12px;
}
header .showcase-item .container {
position: relative;
overflow: hidden;
padding: 0;
}
header .showcase-item .container img {
width: 100%;
}
header .showcase-item .container > .overlay-buffer {
position: relative;
}
header .showcase-item .container .inner,
header .showcase-item .container .gradientOverlay,
header .showcase-item .container .headerVideoContainer {
width: 100%;
position: absolute;
bottom: 0;
}
header .showcase-item .container .inner {
padding: 0 15px;
}
header .showcase-item a.clickLayer ~ .inner {
pointer-events: none;
}
header .showcase-item a.clickLayer ~ .inner a {
pointer-events: initial;
}
header .showcase-item .imagelayer {
will-change: transform;
animation-fill-mode: forwards;
animation: none;
overflow: hidden;
}
header .showcase-item .imagelayer img {
object-fit: cover;
width: 100%;
height: 100%;
}
header .showcase-item .imagelayer .picture {
width: 100%;
height: 100%;
}
header .showcase-item > .inner {
width: 100%;
align-self: flex-end;
position: relative;
z-index: 1;
margin-top: 70px;
margin-right: auto;
margin-left: auto;
padding: 0 15px;
overflow: hidden;
background: none;
transform: translate3d(0, 0, 0);
}
@media (min-width: 768px) {
header .showcase-item > .inner {
max-width: 100%;
}
}
@media (min-width: 992px) {
header .showcase-item > .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
header .showcase-item > .inner {
max-width: 1170px;
}
}
@media (max-width: 991px) {
header .showcase-item > .inner {
padding-right: 30px;
padding-left: 30px;
}
}
header .showcase-item .banner-title {
max-width: 100%;
margin: 10px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
font-style: normal;
line-height: 1;
text-transform: uppercase;
color: #FFF;
font-size: var(--fs-huge-title);
}
header .showcase-item .banner-title span {
display: block;
padding: 0;
background: transparent;
color: inherit;
}
header .showcase-item .banner-desc {
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
header .showcase-item .banner-desc p {
margin: 0;
}
header .showcase-item .banner-desc span {
display: block;
padding: 0;
background: transparent;
color: inherit;
}
header .showcase-item .banner-btn {
width: auto;
margin: 15px 0 0 0;
border: none;
border-radius: 0px;
background: #ee1b2e;
color: #FFF;
}
header .showcase-item .banner-btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
header .showcase-item .headerVideoContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
header .showcase-item .headerVideoContainer > * {
flex: 1;
}
header .showcase-item .showcaseplayer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
opacity: 0;
background: #000;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
header .showcase-item .showcaseplayer.playing {
opacity: 1;
}
header .showcase-item.size-image-left, header .showcase-item.size-image-right {
display: flex;
padding: 0;
background: #F6F6F6;
}
header .showcase-item.size-image-left.size-image-right, header .showcase-item.size-image-right.size-image-right {
flex-direction: row-reverse;
}
header .showcase-item.size-image-left .imagelayer--object-fit picture, header .showcase-item.size-image-right .imagelayer--object-fit picture {
display: block;
aspect-ratio: 1/1;
}
@media (max-width: 991px) {
header .showcase-item.size-image-left, header .showcase-item.size-image-right {
display: block;
height: auto !important;
min-height: 0 !important;
max-height: none;
}
header .showcase-item.size-image-left .imagelayer, header .showcase-item.size-image-right .imagelayer {
height: 250px;
height: auto;
aspect-ratio: 16/9;
}
}
@media (max-width: 767px) {
header .showcase-item.size-image-left .imagelayer, header .showcase-item.size-image-right .imagelayer {
aspect-ratio: 7/3;
}
}
header .showcase-item.size-image-left > *, header .showcase-item.size-image-right > * {
flex: 1;
position: relative;
}
header .showcase-item.size-image-left .clickLayer, header .showcase-item.size-image-right .clickLayer {
pointer-events: initial;
}
header .showcase-item.size-image-left .inner, header .showcase-item.size-image-right .inner {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
height: 100%;
padding: 30px;
}
@media (max-width: 991px) {
header .showcase-item.size-image-left .inner, header .showcase-item.size-image-right .inner {
max-width: 100%;
}
}
@media (min-width: 992px) {
header .showcase-item.size-image-left .inner, header .showcase-item.size-image-right .inner {
max-width: 485px;
}
}
@media (min-width: 1200px) {
header .showcase-item.size-image-left .inner, header .showcase-item.size-image-right .inner {
max-width: 585px;
}
}
header .showcase-item.size-image-left .inner .banner-title, header .showcase-item.size-image-right .inner .banner-title {
font-weight: 700;
font-size: 48px;
color: #000;
}
header .showcase-item.size-image-left .inner .banner-desc, header .showcase-item.size-image-right .inner .banner-desc {
margin: 0;
color: #000;
}
header .showcase-item.size-image-left .inner .banner-btn, header .showcase-item.size-image-right .inner .banner-btn {
white-space: initial;
}
header .showcase-item.size-image-left.alignment-center .inner, header .showcase-item.size-image-right.alignment-center .inner {
align-items: stretch;
}
header .showcase-item.size-image-left.alignment-right .inner, header .showcase-item.size-image-right.alignment-right .inner {
align-items: flex-end;
}
header .video-control {
position: absolute;
bottom: 15px;
z-index: 1;
padding: 6px 8px;
border: none;
background-color: transparent;
color: #FFF;
-webkit-appearance: none;
right: 30px;
}
header .video-control:hover {
background-color: transparent;
color: rgb(229.5, 229.5, 229.5);
}
header .video-control i {
pointer-events: none;
}
@media (min-width: 992px) {
header .video-control {
right: 60px;
}
}
header.variant-suckerfish:not(.suckerfish-on-top) #showcase:not(.layout-boxed) .showcase-item {
height: calc(90vh - 60px);
}
header #showcase {
margin-top: -70px;
}
header #showcase.slider-root .slider-nav {
right: 30px;
left: 30px;
}
header #showcase:not(.layout-boxed) {
margin-top: -70px;
}
@media (max-width: 767px) {
header #showcase:not(.layout-boxed) {
margin-top: -70px;
}
}
header.has-showcase.suckerfish-on-top #showcase:not(.layout-boxed) {
margin-top: 0;
}
header #header-event-box {
position: fixed;
top: 70px;
right: 0;
left: 0;
z-index: 1;
padding: 20px 0;
border-top: none;
border-bottom: none;
background: #F6F6F6;
color: inherit;
will-change: transform, opacity;
animation: header-event-slideIn 0.2s ease-in-out;
}
@keyframes header-event-slideIn {
0% {
transform: translateY(-100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
header #header-event-box .inner {
margin: 0 auto;
padding: 0 15px;
}
@media (min-width: 768px) {
header #header-event-box .inner {
max-width: 100%;
}
}
@media (min-width: 992px) {
header #header-event-box .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
header #header-event-box .inner {
max-width: 1170px;
}
}
header #header-event-box .inner .inside {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
border-bottom: none;
}
header #header-event-box .description {
margin-right: 30px;
}
header #header-event-box .description .date {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-transform: normal;
color: inherit;
font-size: var(--fs-large);
}
@media (max-width: 479px) {
header #header-event-box .description .date {
display: none;
}
}
header #header-event-box .description .title {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 140%;
text-transform: uppercase;
font-size: var(--fs-medium-title);
}
@media (max-width: 479px) {
header #header-event-box .description .title {
font-size: 22px;
}
}
header #header-event-box .description .subtitle {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 400;
line-height: 140%;
text-transform: normal;
color: inherit;
font-size: var(--fs-large);
}
@media (max-width: 479px) {
header #header-event-box .description .subtitle {
font-weight: normal;
font-size: 16px;
}
}
header #header-event-box form {
margin: 0;
padding: 0;
}
header #header-event-box .btn {
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
font-size: var(--fs-normal);
}
@media (max-width: 479px) {
header #header-event-box .btn {
min-width: 0;
}
}
header #header-event-box .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
header #header-event-box .status-info {
text-transform: inherit;
color: inherit;
}
header.menu-opened #header-event-box,
header #header-event-box.hidden {
display: none;
opacity: 0;
transform: translateY(-100%);
}
header .mobile-inner-menu {
display: none;
}
@media (max-width: 767px) {
header .mobile-inner-menu {
display: block;
}
}
header.variant-shortcuts-unified #topbar .brand {
position: relative;
top: unset;
left: unset;
}
@media (min-width: 1200px) {
header.variant-shortcuts-unified #topbar .brand {
position: absolute;
top: auto;
left: 20px;
}
}
@media (min-width: 1200px) and (max-width: 1340px) {
header.variant-shortcuts-unified #topbar .brand {
display: none;
}
}
header.variant-shortcuts-unified #topbar .menus {
flex-direction: row;
align-items: center;
}
header.variant-shortcuts-unified #topbar-suckerfish-menu {
display: block;
width: 100%;
}
header.variant-shortcuts-unified #topbar-suckerfish-menu ul {
flex-wrap: nowrap;
justify-content: flex-start;
}
header.variant-shortcuts-unified #topbar-suckerfish-menu ul li {
white-space: nowrap;
}
@media (max-width: 1200px) {
header.variant-shortcuts-unified #topbar-suckerfish-menu ul {
justify-content: flex-end;
}
}
header.variant-shortcuts-unified #topbar .inside, header.variant-shortcuts-unified-alt #topbar .inside {
gap: 20px;
}
header.variant-shortcuts-unified #topbar .inside .brand, header.variant-shortcuts-unified-alt #topbar .inside .brand {
order: 0;
}
@media (max-width: 768px) {
header.variant-shortcuts-unified #topbar .inside .brand, header.variant-shortcuts-unified-alt #topbar .inside .brand {
order: -1;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
/*
page anchor navigation sticks to the bottom of the header
*/
.anchor-menu {
height: 45px;
position: relative;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 45px;
text-transform: inherit;
background: #F6F6F6;
color: #ee1b2e;
font-size: inherit;
/**
* modifier when ther isn't enough horizontal space
*/
}
.anchor-menu .inner {
margin: 0 auto;
padding: 0 15px;
}
@media (min-width: 768px) {
.anchor-menu .inner {
max-width: 100%;
}
}
@media (min-width: 992px) {
.anchor-menu .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.anchor-menu .inner {
max-width: 1170px;
}
}
.anchor-menu .anchor-nav {
list-style: none;
white-space: nowrap;
}
.anchor-menu li {
display: inline-block;
}
.anchor-menu li + li {
margin-left: 30px;
}
.anchor-menu a {
display: block;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: inherit;
box-shadow: none;
}
.anchor-menu a:hover, .anchor-menu a:active {
text-decoration: none;
color: #D11021;
}
.anchor-menu .active {
font-family: "FSELLIOT", sans-serif;
font-weight: none;
text-decoration: none;
color: inherit;
}
.anchor-menu--dropdown {
height: 45px;
position: relative;
margin: 0 auto;
line-height: 45px;
}
.anchor-menu--dropdown > .container {
margin-bottom: 0;
}
@media (min-width: 768px) {
.anchor-menu--dropdown > .container {
padding-left: 0;
}
}
.anchor-menu--dropdown .inner {
width: 100%;
max-width: unset;
background-color: #F6F6F6;
transition: height 0.2s ease-in-out;
overflow: hidden;
}
.anchor-menu--dropdown .anchor-nav {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
padding-right: 10px;
padding-left: 10px;
color: #ee1b2e;
}
@media (max-width: 767px) {
.anchor-menu--dropdown .anchor-nav {
max-width: none;
}
}
@media (min-width: 768px) {
.anchor-menu--dropdown .anchor-nav {
max-width: 750px;
}
}
@media (min-width: 992px) {
.anchor-menu--dropdown .anchor-nav {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.anchor-menu--dropdown .anchor-nav {
max-width: 1170px;
}
}
.anchor-menu--dropdown .anchor-nav .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
.anchor-menu--dropdown .anchor-nav li {
display: block;
margin-left: 0;
}
.anchor-menu--dropdown.is-open button i {
transform: rotate(180deg);
}
.anchor-menu__trigger {
border: 0;
font-size: 1rem;
background: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.anchor-menu__trigger i {
transition: transform 0.2 ease-in-out;
}
.menu-opened #anchor-menu {
display: none;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
/*
basic layout is
[<title> --space-- <button>]
when variant is set to "centered"
[ <title> ]
[ <button> ]
for really small screens you can set alignment to left
[<title> ]
[<button> ]
if there is a link, the title is also clickable, but doesn't look like it
... on mobile you don't have a hover anyway, and a call to action button is
always clearer and more explicit
*/
.highlightBannerWrapper .inner {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.highlightBannerWrapper .inner {
max-width: none;
}
}
@media (min-width: 768px) {
.highlightBannerWrapper .inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
.highlightBannerWrapper .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.highlightBannerWrapper .inner {
max-width: 1170px;
}
}
.highlightBannerWrapper .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
.highlightBannerWrapper .inner.with-images + .mediaWrapper {
margin-top: 30px;
}
.highlightBannerWrapper .highlightBanner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
.highlightBannerWrapper .highlightBanner .buttonWrapper {
margin: 0;
}
@media (max-width: 479px) {
.highlightBannerWrapper .highlightBanner {
display: block;
text-align: center;
}
.highlightBannerWrapper .highlightBanner .buttonWrapper {
margin: 15px 0 0 0;
}
}
.highlightBannerWrapper .highlightBanner h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: inherit;
font-size: var(--fs-huge-title);
}
.highlightBannerWrapper .highlightBanner h2 a,
.highlightBannerWrapper .highlightBanner h2 a:link,
.highlightBannerWrapper .highlightBanner h2 a:visited,
.highlightBannerWrapper .highlightBanner h2 a:hover,
.highlightBannerWrapper .highlightBanner h2 a:active {
text-decoration: none;
color: inherit;
}
.highlightBannerWrapper .highlightBanner .subtitle {
margin: 5px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: inherit;
font-size: var(--fs-medium-title);
}
.highlightBannerWrapper .highlightBanner .subtitle p {
margin: 0;
}
.highlightBannerWrapper .highlightBanner .btn {
padding: 12px 15px;
border: none;
font-size: var(--fs-normal);
text-decoration: none;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
}
.highlightBannerWrapper .highlightBanner .btn:hover {
border: none;
text-decoration: none;
background: #D11021;
color: #FFF;
}
.highlightBannerWrapper.variant-centered .highlightBanner {
display: block;
text-align: center;
}
.highlightBannerWrapper.variant-centered .highlightBanner .buttonWrapper {
margin: 15px 0 0 0;
}
.highlightBannerWrapper.variant-image-right .highlightBanner, .highlightBannerWrapper.variant-image-left .highlightBanner {
align-items: flex-start;
justify-content: flex-start;
padding: 0 15px;
text-align: left;
}
.highlightBannerWrapper.variant-image-right .highlightBanner h2, .highlightBannerWrapper.variant-image-left .highlightBanner h2 {
color: inherit;
}
.highlightBannerWrapper.variant-image-right .highlightBanner .subtitle, .highlightBannerWrapper.variant-image-left .highlightBanner .subtitle {
color: inherit;
}
.highlightBannerWrapper.variant-image-right .highlightBanner .image, .highlightBannerWrapper.variant-image-left .highlightBanner .image {
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 41.6666666667%;
position: relative;
margin: 0 30px 0 0;
}
.highlightBannerWrapper.variant-image-right .highlightBanner .image .credits, .highlightBannerWrapper.variant-image-left .highlightBanner .image .credits {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 4px 5px;
font-family: inherit;
font-weight: normal;
line-height: 1;
text-transform: none;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
font-size: 12px;
}
.highlightBannerWrapper.variant-image-right .highlightBanner .picture, .highlightBannerWrapper.variant-image-left .highlightBanner .picture {
display: flex;
width: 100%;
height: 100%;
}
.highlightBannerWrapper.variant-image-right .highlightBanner .desc, .highlightBannerWrapper.variant-image-left .highlightBanner .desc {
flex: 1;
padding: 0;
align-self: center;
}
.highlightBannerWrapper.variant-image-right .highlightBanner .btn, .highlightBannerWrapper.variant-image-left .highlightBanner .btn {
margin: 30px 0 0 0;
}
@media (max-width: 767px) {
.highlightBannerWrapper.variant-image-right .highlightBanner, .highlightBannerWrapper.variant-image-left .highlightBanner {
display: block;
}
.highlightBannerWrapper.variant-image-right .highlightBanner .image, .highlightBannerWrapper.variant-image-left .highlightBanner .image {
flex-shrink: 0;
width: 100%;
margin: 0 0 30px 0;
}
}
.highlightBannerWrapper.variant-image-right .highlightBanner .image {
margin: 0 0 0 30px;
}
@media (max-width: 767px) {
.highlightBannerWrapper.variant-image-right .highlightBanner .image {
margin: 30px 0 0 0;
}
}
.highlightBannerWrapper.variant-hd-card .highlightBanner {
flex-direction: column;
}
.highlightBannerWrapper.variant-hd-card .highlightBanner .desc {
display: grid;
grid-template-columns: repeat(1, 100%);
width: 100%;
margin: 30px 0 0 0;
padding: 0;
grid-template-rows: repeat(2, auto);
}
.highlightBannerWrapper.variant-hd-card .highlightBanner .desc .subtitle:not(.contentLibrary) {
font-weight: 700;
font-size: var(--fs-normal);
}
@media screen and (min-width: 768px) {
.highlightBannerWrapper.variant-hd-card .highlightBanner .desc {
grid-template-columns: repeat(2, 50%);
}
.highlightBannerWrapper.variant-hd-card .highlightBanner .desc .subtitle {
grid-column: 1;
grid-row: 2;
}
.highlightBannerWrapper.variant-hd-card .highlightBanner .desc .btn {
grid-column: 2;
display: block;
margin: 30px 0 0 0;
margin-left: auto;
}
}
.iframeWrapper > .container > .inner {
display: flex;
justify-content: center;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.infoHeaderBoxedImage,
.infoHeaderFlatImage,
.infoHeaderWrapper {
position: relative;
overflow: hidden;
}
.infoHeaderBoxedImage .container,
.infoHeaderFlatImage .container,
.infoHeaderWrapper .container {
position: relative;
}
@media (max-width: 768px) {
.infoHeaderBoxedImage .container,
.infoHeaderFlatImage .container,
.infoHeaderWrapper .container {
width: 100%;
}
}
.infoHeaderBoxedImage img,
.infoHeaderFlatImage img,
.infoHeaderWrapper img {
width: 100%;
will-change: transform;
animation-fill-mode: forwards;
animation: none;
}
.infoHeaderBoxedImage .credits,
.infoHeaderFlatImage .credits,
.infoHeaderWrapper .credits {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 4px 5px;
font-family: inherit;
font-weight: normal;
line-height: 1;
text-transform: none;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
font-size: 12px;
}
.infoHeaderBoxedImage .imageLayer,
.infoHeaderFlatImage .imageLayer,
.infoHeaderWrapper .imageLayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent no-repeat center/cover;
will-change: transform;
animation-fill-mode: forwards;
animation: none;
}
.infoHeaderBoxedImage[data-animations*=zoom] img,
.infoHeaderBoxedImage[data-animations*=zoom] .imageLayer,
.infoHeaderFlatImage[data-animations*=zoom] img,
.infoHeaderFlatImage[data-animations*=zoom] .imageLayer,
.infoHeaderWrapper[data-animations*=zoom] img,
.infoHeaderWrapper[data-animations*=zoom] .imageLayer {
animation: 2s ease-out hero-zoom;
}
.infoHeaderBoxedImage[data-animations*=twist] img,
.infoHeaderBoxedImage[data-animations*=twist] .imageLayer,
.infoHeaderFlatImage[data-animations*=twist] img,
.infoHeaderFlatImage[data-animations*=twist] .imageLayer,
.infoHeaderWrapper[data-animations*=twist] img,
.infoHeaderWrapper[data-animations*=twist] .imageLayer {
animation: 2s ease-out hero-twist;
}
.infoHeaderBoxedImage[data-animations*=saturate] img,
.infoHeaderBoxedImage[data-animations*=saturate] .imageLayer,
.infoHeaderFlatImage[data-animations*=saturate] img,
.infoHeaderFlatImage[data-animations*=saturate] .imageLayer,
.infoHeaderWrapper[data-animations*=saturate] img,
.infoHeaderWrapper[data-animations*=saturate] .imageLayer {
animation: 2s ease-out hero-saturate;
}
.infoHeaderBoxedImage[data-animations*=desaturate] img,
.infoHeaderBoxedImage[data-animations*=desaturate] .imageLayer,
.infoHeaderFlatImage[data-animations*=desaturate] img,
.infoHeaderFlatImage[data-animations*=desaturate] .imageLayer,
.infoHeaderWrapper[data-animations*=desaturate] img,
.infoHeaderWrapper[data-animations*=desaturate] .imageLayer {
animation: 2s ease-out hero-desaturate;
}
.infoHeaderBoxedImage[data-animations*=slide] img,
.infoHeaderBoxedImage[data-animations*=slide] .imageLayer,
.infoHeaderFlatImage[data-animations*=slide] img,
.infoHeaderFlatImage[data-animations*=slide] .imageLayer,
.infoHeaderWrapper[data-animations*=slide] img,
.infoHeaderWrapper[data-animations*=slide] .imageLayer {
animation: 2s ease-out hero-slide;
}
.infoHeaderBoxedImage[data-animations*=fade-in] img,
.infoHeaderBoxedImage[data-animations*=fade-in] .imageLayer,
.infoHeaderFlatImage[data-animations*=fade-in] img,
.infoHeaderFlatImage[data-animations*=fade-in] .imageLayer,
.infoHeaderWrapper[data-animations*=fade-in] img,
.infoHeaderWrapper[data-animations*=fade-in] .imageLayer {
animation: 2s ease-out hero-fade-in;
}
.infoHeaderBoxedImage .headerVideoContainer,
.infoHeaderFlatImage .headerVideoContainer,
.infoHeaderWrapper .headerVideoContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.infoHeaderBoxedImage .headerVideoContainer > *,
.infoHeaderFlatImage .headerVideoContainer > *,
.infoHeaderWrapper .headerVideoContainer > * {
flex: 1;
}
.infoHeaderBoxedImage .headerVideoContainer .video-control,
.infoHeaderFlatImage .headerVideoContainer .video-control,
.infoHeaderWrapper .headerVideoContainer .video-control {
position: absolute;
bottom: 15px;
z-index: 1;
padding: 6px 8px;
border: none;
background-color: transparent;
color: #FFF;
-webkit-appearance: none;
right: 30px;
}
.infoHeaderBoxedImage .headerVideoContainer .video-control:hover,
.infoHeaderFlatImage .headerVideoContainer .video-control:hover,
.infoHeaderWrapper .headerVideoContainer .video-control:hover {
background-color: transparent;
color: rgb(229.5, 229.5, 229.5);
}
.infoHeaderBoxedImage .headerVideoContainer .video-control i,
.infoHeaderFlatImage .headerVideoContainer .video-control i,
.infoHeaderWrapper .headerVideoContainer .video-control i {
pointer-events: none;
}
@media (min-width: 992px) {
.infoHeaderBoxedImage .headerVideoContainer .video-control,
.infoHeaderFlatImage .headerVideoContainer .video-control,
.infoHeaderWrapper .headerVideoContainer .video-control {
right: 60px;
}
}
.infoHeaderBoxedImage .showcaseplayer,
.infoHeaderFlatImage .showcaseplayer,
.infoHeaderWrapper .showcaseplayer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
opacity: 0;
background: #000;
transition: opacity 0.5s ease-in-out;
pointer-events: none;
}
.infoHeaderBoxedImage .showcaseplayer.playing,
.infoHeaderFlatImage .showcaseplayer.playing,
.infoHeaderWrapper .showcaseplayer.playing {
opacity: 1;
}
.infoHeaderFlatImage {
height: 540px;
position: relative;
overflow: hidden;
}
.infoHeaderWrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
background: transparent no-repeat center/cover;
}
@media (min-width: 1200px) {
.infoHeaderWrapper:not(.variant-image-left):not(.variant-image-right) .infoHeaderContent {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.infoHeaderWrapper:not(.variant-image-left):not(.variant-image-right):not(.align-left) .infoHeaderContent {
margin-left: 16.66666667%;
}
}
.infoHeaderWrapper h1 {
margin: 15px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
color: #000;
font-size: var(--fs-huge-title);
}
.infoHeaderWrapper h1 + .richtext {
margin-top: 40px;
}
.infoHeaderWrapper .richtext {
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1.2;
text-transform: none;
color: #000;
font-size: var(--fs-huge-subtitle);
}
.infoHeaderWrapper .richtext .function-detail p {
margin-bottom: 0;
}
.infoHeaderWrapper .gradientOverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
}
.infoHeaderWrapper.type-theme .richtext {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
color: #000;
font-size: var(--fs-huge-subtitle);
}
.infoHeaderWrapper.type-theme .partOf {
margin: 0;
}
.infoHeaderWrapper.type-theme .partOf a {
display: inline-block;
padding: 20px 5px;
border: none;
border-radius: 10px 10px 10px 10px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-decoration: none;
text-transform: none;
white-space: nowrap;
background: #FFF;
color: #ee1b2e;
font-size: var(--fs-small);
}
.infoHeaderWrapper.type-theme .partOf a:hover {
border: none;
text-decoration: none;
background: #FFF;
color: #D11021;
}
.infoHeaderWrapper.type-theme .meta {
display: flex;
align-items: center;
float: right;
margin: 15px 0 0 0;
}
@media (max-width: 768px) {
.infoHeaderWrapper.type-theme .meta {
display: none;
}
}
.infoHeaderWrapper.type-theme .meta > * + * {
margin-left: 15px;
}
.infoHeaderWrapper.type-theme .meta .btn {
width: auto;
border: none;
border-radius: 0px;
background: #ee1b2e;
color: #FFF;
}
.infoHeaderWrapper.type-theme .meta .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.infoHeaderWrapper.type-theme .meta .tickets {
margin-bottom: 0;
}
.infoHeaderWrapper.type-theme .meta .favourite button {
color: #FFF;
}
.infoHeaderWrapper.type-theme .meta .favourite button:hover {
color: #3B76E4;
}
.infoHeaderWrapper.bg:not(.variant-flat) {
min-height: 540px;
}
@media (max-width: 600px) {
.infoHeaderWrapper.bg:not(.variant-flat) {
min-height: 320px;
}
}
.infoHeaderWrapper.bg:not(.variant-flat) h1 {
color: #000;
}
.infoHeaderWrapper.bg:not(.variant-flat) .richtext {
color: #000;
}
.infoHeaderWrapper.bg:not(.variant-flat) .container {
padding: 50px 15px 30px 15px;
}
.infoHeaderWrapper.bg.boxed > .container {
justify-self: stretch;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
.infoHeaderWrapper.bg.boxed > .container .imageLayer {
position: absolute;
top: 0;
right: 15px;
bottom: 0;
left: 15px;
z-index: 0;
background: transparent no-repeat center/cover;
}
.infoHeaderWrapper.bg.boxed > .container .imageLayer ~ * {
z-index: 1;
}
.infoHeaderWrapper.bg.boxed > .container .credits {
right: 15px;
}
.infoHeaderWrapper.bg.boxed > .container h1,
.infoHeaderWrapper.bg.boxed > .container .richtext {
padding-left: 15px;
}
.infoHeaderWrapper.variant-fiftyfifty {
flex-direction: row;
height: 540px;
}
@media (max-width: 768px) {
.infoHeaderWrapper.variant-fiftyfifty {
flex-direction: column-reverse;
height: auto;
}
.infoHeaderWrapper.variant-fiftyfifty .infoHeaderFiftyImage {
padding-bottom: 46.875%;
}
}
.infoHeaderWrapper.variant-fiftyfifty > * {
flex: 1;
}
.infoHeaderWrapper.variant-fiftyfifty .infoHeaderFiftyImage {
background: transparent no-repeat center/cover;
}
.infoHeaderWrapper.variant-fiftyfifty .infoHeaderFiftyTitle {
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px 15px 30px 15px;
text-align: center;
}
.infoHeaderWrapper.variant-fiftyfifty .infoHeaderContent .inner {
display: flex;
flex-direction: column;
}
.infoHeaderWrapper.variant-fiftyfifty .meta {
display: block;
order: 1;
}
.infoHeaderWrapper.variant-image-left > .container, .infoHeaderWrapper.variant-image-right > .container {
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 460px;
position: relative;
}
@media (max-width: 768px) {
.infoHeaderWrapper.variant-image-left > .container, .infoHeaderWrapper.variant-image-right > .container {
display: block;
height: unset;
}
}
.infoHeaderWrapper.variant-image-left > .container > *, .infoHeaderWrapper.variant-image-right > .container > * {
flex: 1;
}
.infoHeaderWrapper.variant-image-left > .container > *:first-child, .infoHeaderWrapper.variant-image-right > .container > *:first-child {
flex: 2;
}
.infoHeaderWrapper.variant-image-left.variant-image-right > .container, .infoHeaderWrapper.variant-image-right.variant-image-right > .container {
flex-direction: row-reverse;
}
.infoHeaderWrapper.variant-image-left h1, .infoHeaderWrapper.variant-image-right h1 {
font-size: var(--fs-large-title);
}
.infoHeaderWrapper.variant-image-left .infoHeaderImage, .infoHeaderWrapper.variant-image-right .infoHeaderImage {
width: 100%;
position: relative;
background: transparent no-repeat center/cover;
}
@media (max-width: 768px) {
.infoHeaderWrapper.variant-image-left .infoHeaderImage, .infoHeaderWrapper.variant-image-right .infoHeaderImage {
height: 230px;
}
}
.infoHeaderWrapper.variant-image-left .infoHeaderTitle,
.infoHeaderWrapper.variant-image-left .infoHeaderTitle > div,
.infoHeaderWrapper.variant-image-left .infoHeaderTitle > div > div, .infoHeaderWrapper.variant-image-right .infoHeaderTitle,
.infoHeaderWrapper.variant-image-right .infoHeaderTitle > div,
.infoHeaderWrapper.variant-image-right .infoHeaderTitle > div > div {
height: 100%;
}
@media (min-width: 769px) {
.infoHeaderWrapper.variant-image-left .infoHeaderTitle, .infoHeaderWrapper.variant-image-right .infoHeaderTitle {
padding-left: 15px;
}
}
@media (max-width: 768px) {
.infoHeaderWrapper.variant-image-left .infoHeaderTitle, .infoHeaderWrapper.variant-image-right .infoHeaderTitle {
padding-top: 15px;
}
}
.infoHeaderWrapper.variant-image-left .infoHeaderTitle .inner, .infoHeaderWrapper.variant-image-right .infoHeaderTitle .inner {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 0;
padding: 0 15px;
border-left: none;
text-align: left;
}
.infoHeaderWrapper.variant-image-left .infoHeaderTitle .inner .meta, .infoHeaderWrapper.variant-image-right .infoHeaderTitle .inner .meta {
display: block;
order: 1;
margin-top: auto;
}
.infoHeaderWrapper.variant-image-left.variant-image-right .infoHeaderTitle, .infoHeaderWrapper.variant-image-right.variant-image-right .infoHeaderTitle {
padding-right: 15px;
padding-left: 0;
}
.infoHeaderWrapper.variant-image-left.variant-image-right .infoHeaderTitle .inner, .infoHeaderWrapper.variant-image-right.variant-image-right .infoHeaderTitle .inner {
border-right: none;
border-left: none;
}
.story-info {
padding: 20px 15px;
background: #FFF;
color: #ee1b2e;
}
.story-info .inner {
display: flex;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
gap: 5px 15px;
font-size: var(--fs-normal);
}
@media (max-width: 768px) {
.story-info .inner {
flex-direction: column;
}
}
.story-info .inner .stories > *,
.story-info .inner .date > *,
.story-info .inner .collection:not(:empty) {
display: inline-flex;
align-items: center;
height: 32px;
margin: 0;
}
.story-info .inner .stories:not(:empty) {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.story-info .inner .stories:not(:empty) {
order: 2;
}
}
.story-info .inner .story img {
width: 32px;
height: 32px;
margin-right: 10px;
}
.story-info .inner .date {
white-space: nowrap;
}
.story-info .inner .collection:not(:empty) {
margin-left: auto;
text-align: right;
}
@media (max-width: 768px) {
.story-info .inner .collection:not(:empty) {
text-align: initial;
margin-left: 0;
}
}
.story-info .inner .collection:not(:empty) a {
font-weight: bold;
font-style: normal;
text-decoration: underline;
text-transform: none;
color: #ee1b2e;
}
.story-info .inner .collection:not(:empty) a:hover {
text-decoration: underline;
color: #D11021;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.mediaWrapper .credits {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 4px 5px;
font-family: inherit;
font-weight: normal;
line-height: 1;
text-transform: none;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
font-size: 12px;
}
.mediaWrapper .image {
height: 550px;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.mediaWrapper .image .imageLayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent no-repeat center/cover;
}
.mediaWrapper img {
width: 100%;
max-width: 100%;
height: auto;
}
.mediaWrapper .wrapper {
position: relative;
overflow: hidden;
}
.mediaWrapper .grid-root {
display: flex;
flex-wrap: wrap;
}
.mediaWrapper .grid-root > * {
width: calc(33.3333333333% - 16px);
margin: 0 8px 15px 8px;
}
@media (max-width: 991px) {
.mediaWrapper .grid-root > * {
width: calc(50% - 16px);
}
}
@media (max-width: 767px) {
.mediaWrapper .grid-root > * {
width: calc(100% - 16px);
}
}
.mediaWrapper .grid-root.wide > * {
width: calc(50% - 16px);
}
@media (max-width: 991px) {
.mediaWrapper .grid-root.wide > * {
width: calc(50% - 16px);
}
}
@media (max-width: 767px) {
.mediaWrapper .grid-root.wide > * {
width: calc(100% - 16px);
}
}
.mediaWrapper .grid-root.four_tiles > * {
width: calc(25% - 16px);
}
@media (max-width: 991px) {
.mediaWrapper .grid-root.four_tiles > * {
width: calc(50% - 16px);
}
}
@media (max-width: 767px) {
.mediaWrapper .grid-root.four_tiles > * {
width: calc(100% - 16px);
}
}
.mediaWrapper .grid-root.compact > * {
width: calc(20% - 16px);
}
@media (max-width: 991px) {
.mediaWrapper .grid-root.compact > * {
width: calc(33.3333333333% - 16px);
}
}
@media (max-width: 767px) {
.mediaWrapper .grid-root.compact > * {
width: calc(50% - 16px);
}
}
@supports (display: grid) {
.mediaWrapper .grid-root {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: repeat(3, 1fr);
}
.mediaWrapper .grid-root > *, .mediaWrapper .grid-root.wide > *, .mediaWrapper .grid-root.four_tiles > *, .mediaWrapper .grid-root.compact > * {
width: auto;
margin: 0;
}
@media (max-width: 991px) {
.mediaWrapper .grid-root {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.mediaWrapper .grid-root {
grid-template-columns: 1fr;
}
}
.mediaWrapper .grid-root.wide {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 767px) {
.mediaWrapper .grid-root.wide {
grid-template-columns: 1fr;
}
}
.mediaWrapper .grid-root.four_tiles {
grid-template-columns: repeat(4, 1fr);
}
.mediaWrapper .grid-root.four_tiles > * {
min-width: 0;
}
@media (max-width: 991px) {
.mediaWrapper .grid-root.four_tiles {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.mediaWrapper .grid-root.four_tiles {
grid-template-columns: 1fr;
}
}
.mediaWrapper .grid-root.compact {
grid-template-columns: repeat(5, 1fr);
}
.mediaWrapper .grid-root.compact > * {
min-width: 0;
}
@media (max-width: 991px) {
.mediaWrapper .grid-root.compact {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.mediaWrapper .grid-root.compact {
grid-template-columns: repeat(2, 1fr);
}
}
}
.mediaWrapper .imageCard {
display: flex;
flex-direction: column;
position: relative;
border-radius: 0px;
text-align: left;
text-decoration: none;
background: #F6F6F6;
color: #000;
box-shadow: none;
will-change: transform;
overflow: hidden;
}
.mediaWrapper .imageCard > .wrapper {
overflow: hidden;
}
.mediaWrapper .imageCard > .wrapper img {
padding: 0;
border-radius: 0;
will-change: transform;
}
.mediaWrapper .imageCard:hover {
text-decoration: none;
color: #000;
}
.mediaWrapper .imageCard:hover .content .title {
text-decoration: none;
color: #000;
}
.mediaWrapper[data-animations*=shadow] .imageCard {
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=shadow] .imageCard:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=shadow] .imageCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=glow] .imageCard {
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=glow] .imageCard:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=glow] .imageCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] .imageCard > .wrapper img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] .imageCard:hover > .wrapper img {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] .imageCard:active > .wrapper img {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=twist] .imageCard > .wrapper img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=twist] .imageCard:hover > .wrapper img {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=twist] .imageCard:active > .wrapper img {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] .imageCard > .wrapper img {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] .imageCard:hover > .wrapper img {
filter: none;
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] .imageCard:active > .wrapper img {
filter: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] .imageCard > .wrapper img {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] .imageCard:hover > .wrapper img {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] .imageCard:active > .wrapper img {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=slide] .imageCard {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=slide] .imageCard:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=slide] .imageCard:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=shift] .imageCard .content {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=shift] .imageCard:hover .content {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=shift] .imageCard:active .content {
transform: none;
transition: transform 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=skew] .imageCard {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.mediaWrapper[data-animations*=skew] .imageCard:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=skew] .imageCard:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.mediaWrapper .imageCard .content {
padding: 20px 25px;
border-radius: 0 0 0px 0px;
}
.mediaWrapper .imageCard .content .title {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-medium-title);
}
.mediaWrapper .imageCard .content .title + .desc {
margin-top: 5px;
}
.mediaWrapper .imageCard .content .desc {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.5;
text-transform: none;
font-size: var(--fs-normal);
}
.mediaWrapper .image-zoom-button {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
position: absolute;
bottom: 0;
left: 0;
line-height: 1;
background: rgba(0, 0, 0, 0.33);
color: #FFF;
}
.mediaWrapper.single .imageCard {
max-width: 350px;
margin-right: auto;
margin-left: auto;
}
.mediaWrapper.single.variant-fullW {
padding: 0 15px;
}
.mediaWrapper.single.variant-fullW .image {
height: auto;
}
.mediaWrapper.single .caption {
padding: 40px;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
text-align: left;
background: #F6F6F6;
color: #4D4D4D;
font-size: var(--fs-medium-title);
}
.mediaWrapper.single .caption .title {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #4D4D4D;
font-size: var(--fs-medium-title);
}
.mediaWrapper.single .caption .title + .desc {
margin-top: 10px;
}
.mediaWrapper.single .caption .desc {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: var(--fs-normal);
}
.mediaWrapper.single .sidebyside {
min-height: 550px;
background: #F6F6F6;
}
@media (max-width: 767px) {
.mediaWrapper.single .sidebyside {
height: auto;
min-height: 0;
}
}
.mediaWrapper.single .sidebyside .caption {
width: auto;
padding: 40px;
text-align: left;
background: #F6F6F6;
}
.mediaWrapper.single .sidebyside .caption .title {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #4D4D4D;
font-size: 26px;
}
.mediaWrapper.single .sidebyside .caption .title + .desc {
margin-top: 10px;
}
.mediaWrapper.single .sidebyside .caption .desc {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #4D4D4D;
font-size: 26px;
}
@media (min-width: 768px) {
.mediaWrapper.single.variant-boxed_content, .mediaWrapper.single.variant-boxed_content > a:link, .mediaWrapper.single.variant-boxed_content_flipped, .mediaWrapper.single.variant-boxed_content_flipped > a:link {
display: flex;
}
}
.mediaWrapper.single.variant-boxed_content > *, .mediaWrapper.single.variant-boxed_content > a:link > *, .mediaWrapper.single.variant-boxed_content_flipped > *, .mediaWrapper.single.variant-boxed_content_flipped > a:link > * {
flex: 1;
}
.mediaWrapper.single.variant-boxed_content, .mediaWrapper.single.variant-boxed_content > a:link {
flex-direction: row-reverse;
}
.mediaWrapper.single.variant-boxed_caption .container {
padding: 0 15px;
}
.mediaWrapper.single.variant-boxed_caption .captionWrapper {
display: block;
}
.mediaWrapper.single.variant-boxed_caption .captionWrapper,
.mediaWrapper.single.variant-boxed_caption .captionWrapper > * {
position: relative;
}
.mediaWrapper.single.variant-boxed_caption .caption {
width: 460px;
max-width: 90%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 767px) {
.mediaWrapper.single.variant-boxed_caption .caption {
width: auto;
max-width: none;
position: relative;
top: 0;
transform: none;
}
}
.mediaWrapper.single.variant-boxed_caption .imgBox {
overflow: hidden;
}
@media (min-width: 768px) {
.mediaWrapper.single.variant-boxed_caption .imgBox {
margin-left: 30%;
}
}
.mediaWrapper.single.variant-boxed_caption_below .container {
padding: 0 15px;
}
.mediaWrapper.single.variant-boxed_caption_below .captionWrapper {
display: block;
}
.mediaWrapper.single.variant-boxed_caption_below .captionWrapper,
.mediaWrapper.single.variant-boxed_caption_below .captionWrapper > * {
position: relative;
}
.mediaWrapper.single.variant-boxed_caption_below .small-caption {
padding: 15px 0 0 0;
text-align: right;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: #999;
font-size: var(--fs-small);
}
.mediaWrapper.single.variant-boxed_caption_left .inner, .mediaWrapper.single.variant-boxed_caption_right .inner {
border-radius: 0px;
background: #F6F6F6;
box-shadow: none;
overflow: hidden;
}
.mediaWrapper.single.variant-boxed_caption_left .inner.grid-root, .mediaWrapper.single.variant-boxed_caption_right .inner.grid-root {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: 1fr;
}
.mediaWrapper.single.variant-boxed_caption_left .inner.grid-root > *, .mediaWrapper.single.variant-boxed_caption_right .inner.grid-root > * {
width: 100%;
margin: unset;
}
.mediaWrapper.single.variant-boxed_caption_left .inner[href], .mediaWrapper.single.variant-boxed_caption_left .inner[href]:hover, .mediaWrapper.single.variant-boxed_caption_right .inner[href], .mediaWrapper.single.variant-boxed_caption_right .inner[href]:hover {
text-decoration: none;
}
.mediaWrapper.single.variant-boxed_caption_left .inner .caption, .mediaWrapper.single.variant-boxed_caption_right .inner .caption {
display: flex;
flex-direction: column;
justify-content: flex-end;
background: transparent;
}
.mediaWrapper.single.variant-boxed_caption_left .inner .image, .mediaWrapper.single.variant-boxed_caption_right .inner .image {
height: 100%;
}
.mediaWrapper.single.variant-boxed_caption_left .inner .image img, .mediaWrapper.single.variant-boxed_caption_right .inner .image img {
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.mediaWrapper.single.variant-boxed_caption_left .inner.grid-root {
grid-template-columns: 1fr 2fr;
}
}
@media (min-width: 768px) {
.mediaWrapper.single.variant-boxed_caption_right .inner.grid-root {
grid-template-columns: 2fr 1fr;
}
}
.mediaWrapper.single.variant-boxed_caption_right .inner .image {
grid-row-start: 1;
grid-column-start: 1;
}
.mediaWrapper.single img,
.mediaWrapper.single .image .imageLayer {
will-change: transform;
animation-fill-mode: forwards;
animation: none;
}
.mediaWrapper.single a:not(.grid-root):link {
display: block;
}
.mediaWrapper[data-animations*=shadow] a:link {
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=shadow] a:link:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=shadow] a:link:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=glow] a:link {
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=glow] a:link:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=glow] a:link:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] a:link img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] a:link:hover img {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] a:link:active img {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] a:link .imageLayer {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] a:link:hover .imageLayer {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] a:link:active .imageLayer {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=twist] a:link img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=twist] a:link:hover img {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=twist] a:link:active img {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=twist] a:link .imageLayer {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=twist] a:link:hover .imageLayer {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=twist] a:link:active .imageLayer {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] a:link img {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] a:link:hover img {
filter: none;
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] a:link:active img {
filter: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] a:link .imageLayer {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] a:link:hover .imageLayer {
filter: none;
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] a:link:active .imageLayer {
filter: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] a:link img {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] a:link:hover img {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] a:link:active img {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] a:link .imageLayer {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] a:link:hover .imageLayer {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] a:link:active .imageLayer {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=slide] a:link {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=slide] a:link:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=slide] a:link:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=shift] a:link .caption > * {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=shift] a:link:hover .caption > * {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=shift] a:link:active .caption > * {
transform: none;
transition: transform 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=skew] a:link {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.mediaWrapper[data-animations*=skew] a:link:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=skew] a:link:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.mediaWrapper.multi {
position: relative;
}
.mediaWrapper.multi .container {
position: relative;
}
.mediaWrapper.multi.variant-fullW_slide .slider-nav {
right: 0;
left: 0;
}
.mediaWrapper.multi .mediaSlider:not(.slick-initialized) {
visibility: hidden;
}
.mediaWrapper.multi .mediaSlider .slide {
position: relative;
overflow: hidden;
margin: 0 10px;
}
.mediaWrapper.multi .mediaSlider .slide img {
width: auto;
height: 550px;
max-height: calc(66vw - 10px);
}
.mediaWrapper[data-animations*=shadow] .slide {
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=shadow] .slide:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=shadow] .slide:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=glow] .slide {
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=glow] .slide:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=glow] .slide:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] .slide img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] .slide:hover img {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=zoom] .slide:active img {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=twist] .slide img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=twist] .slide:hover img {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=twist] .slide:active img {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] .slide img {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] .slide:hover img {
filter: none;
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=saturate] .slide:active img {
filter: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] .slide img {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] .slide:hover img {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=desaturate] .slide:active img {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=slide] .slide {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.mediaWrapper[data-animations*=slide] .slide:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=slide] .slide:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.mediaWrapper[data-animations*=skew] .slide {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.mediaWrapper[data-animations*=skew] .slide:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.mediaWrapper[data-animations*=skew] .slide:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.mediaWrapper.multi .compact .imageCard .content {
padding: 10px;
}
.mediaWrapper.multi .compact .imageCard .content .title {
line-height: 1;
font-size: var(--fs-normal);
}
.mediaWrapper.multi .compact .imageCard .content .title + .desc {
margin-top: 10px;
}
.mediaWrapper.multi .compact .imageCard .content .desc {
line-height: 1.2;
font-size: var(--fs-small);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 768px) {
.newsListWrapper.with-news .container {
display: flex;
}
.newsListWrapper.with-news .container > * {
flex: 1;
}
.newsListWrapper.with-news .container > *:first-child:not(:last-child) {
margin-right: 30px;
}
.newsListWrapper.with-news .container > *:last-child:not(:first-child) {
margin-left: 30px;
}
}
@media (min-width: 1200px) {
.newsListWrapper:not(.with-news) .newsletter:not(.wide) {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.newsListWrapper:not(.with-news):not(.align-left) .newsletter:not(.wide) {
margin-left: 16.66666667%;
}
}
@media (max-width: 767px) {
.newsListWrapper .newslist {
margin-bottom: 60px;
}
}
.newsListWrapper .newslist h2 {
text-align: left;
margin-bottom: 10px;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1.19;
text-transform: none;
color: #333;
font-size: var(--fs-large-title);
}
.newsListWrapper .newslist ul {
text-align: left;
list-style: none;
float: none;
margin-right: 0;
margin-bottom: 0;
}
.newsListWrapper .newslist ul li {
margin: 0 0 0 10px;
padding: 0 0 10px 0;
color: #1A242F;
}
.newsListWrapper .newslist ul li .fa {
position: absolute;
margin: 4px 0 0 0;
}
.newsListWrapper .newslist ul li .newsLinkContainer {
margin: 0 0 0 20px;
}
.newsListWrapper .newslist ul li .newsLinkContainer a {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: #1A242F;
font-size: var(--fs-large-subtitle);
}
.newsListWrapper .newslist ul li .newsLinkContainer a:hover {
border-bottom: none;
color: #3469CB;
}
.newsListWrapper .newsletter {
padding: 0 0;
border-radius: 0;
background: #4D4D4D;
color: #FFF;
text-align: left;
}
.newsListWrapper .newsletter .msg {
padding: 20px 0 0 0;
}
.newsListWrapper .newsletter .newsletter-logo {
width: 100px;
}
.newsListWrapper .newsletter h2 {
margin-bottom: 5px;
font-family: "FSELLIOT", sans-serif;
font-weight: 400;
line-height: 150%;
text-transform: none;
color: inherit;
font-size: var(--fs-small-title);
}
.newsListWrapper .newsletter .desc {
font-family: "FSELLIOT", sans-serif;
font-weight: 300;
line-height: 1.44;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
.newsListWrapper .newsletter .btn {
width: auto;
margin: 0;
border: none;
background: #F6F6F6;
color: #000;
}
.newsListWrapper .newsletter .btn:hover {
border: none;
background: #F6F6F6;
color: rgb(76.5, 76.5, 76.5);
}
.newsletter-subscribe-form {
margin: 0;
}
.newsletter-subscribe-form--inline .form-control,
.newsletter-subscribe-form--inline .btn {
width: 100%;
border-radius: 0px;
}
.newsletter-subscribe-form--inline .grecaptcha-branding {
font-size: 0.6em;
line-height: 1.2;
color: inherit;
opacity: 0.5;
}
.newsletter-subscribe-form--inline .grecaptcha-branding a,
.newsletter-subscribe-form--inline .grecaptcha-branding a:link,
.newsletter-subscribe-form--inline .grecaptcha-branding a:hover,
.newsletter-subscribe-form--inline .grecaptcha-branding a:active,
.newsletter-subscribe-form--inline .grecaptcha-branding a:visited {
text-decoration: underline;
color: inherit;
}
.newsletter-subscribe-form .btn {
margin-top: 0;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.orderBannerWrapper {
margin: 30px 0 0 0;
}
.orderBannerWrapper .orderBanner {
display: block;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 0;
overflow: hidden;
padding: 90px 15px 30px 15px;
}
@media (max-width: 767px) {
.orderBannerWrapper .orderBanner {
padding: 20px 15px;
}
}
.orderBannerWrapper .orderBanner + .orderBanner {
margin-top: 30px;
}
.orderBannerWrapper .orderBanner .desc {
padding: 0;
}
.orderBannerWrapper .orderBanner .image {
overflow: hidden;
}
.orderBannerWrapper .orderBanner .imageLayer {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: transparent no-repeat center center/cover;
}
.orderBannerWrapper .orderBanner .image.with-link + .desc {
pointer-events: none;
}
.orderBannerWrapper .orderBanner .buttonWrapper {
margin: 30px 0 0 0;
}
@media (max-width: 479px) {
.orderBannerWrapper .orderBanner {
display: block;
text-align: center;
}
.orderBannerWrapper .orderBanner .buttonWrapper {
margin: 15px 0 0 0;
}
}
.orderBannerWrapper .orderBanner h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: #FFF;
font-size: var(--fs-huge-title);
}
.orderBannerWrapper .orderBanner h2 a,
.orderBannerWrapper .orderBanner h2 a:link,
.orderBannerWrapper .orderBanner h2 a:visited,
.orderBannerWrapper .orderBanner h2 a:hover,
.orderBannerWrapper .orderBanner h2 a:active {
text-decoration: none;
color: inherit;
}
.orderBannerWrapper .orderBanner .subtitle {
margin: 5px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
font-style: normal;
line-height: 1;
text-transform: none;
color: #FFF;
font-size: var(--fs-medium-title);
}
.orderBannerWrapper .orderBanner .subtitle p {
margin: 0;
}
.orderBannerWrapper .orderBanner .btn {
padding: 12px 15px;
border: none;
font-size: var(--fs-normal);
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
}
.orderBannerWrapper .orderBanner .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
#footerOrder {
position: relative;
padding: 20px 0;
font-family: "FSELLIOT", sans-serif;
font-size: var(--fs-small);
background: #3B76E4;
color: #FFF;
}
#footerOrder .container {
max-width: 975px;
padding: 0 30px;
background: transparent;
}
#footerOrder form {
display: inline-block;
margin: 0;
}
#footerOrder table {
width: 100%;
margin: 0;
padding: 0;
border: none;
}
#footerOrder table.loading {
opacity: 0.8;
}
#footerOrder .btn-clean {
display: inline-flex;
align-items: center;
min-width: 0;
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
color: #FFF;
font-size: var(--fs-small);
}
#footerOrder .btn-clean > * + * {
margin-left: 1ex;
}
#footerOrder .btn-clean:hover {
color: #3469CB;
}
#footerOrder .inner {
display: flex;
align-items: center;
justify-content: space-between;
}
#footerOrder .inner > * + * {
margin-left: 30px;
}
@media (max-width: 768px) {
#footerOrder .inner {
flex-direction: column-reverse;
align-items: flex-end;
}
#footerOrder .inner > * {
margin: 0 0 15px 0;
}
#footerOrder .inner > * + * {
margin: 0 0 30px 0;
}
}
@media (max-width: 480px) {
#footerOrder .inner {
align-items: stretch;
}
}
#footerOrder .order-actions {
display: flex;
}
#footerOrder .order-actions > * + * {
margin-left: 30px;
}
@media (max-width: 480px) {
#footerOrder .order-actions {
display: grid;
justify-content: center;
}
#footerOrder .order-actions > * + * {
margin: 15px auto 0 auto;
}
}
#footerOrder .order-totals {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
#footerOrder .order-totals > * + * {
margin-left: 30px;
}
#footerOrder .order-totals th,
#footerOrder .order-totals td {
vertical-align: baseline;
}
#footerOrder .order-totals th {
padding: 0;
}
#footerOrder .order-totals td {
padding: 0 0 0 1ex;
}
#footerOrder .order-totals tr:last-child:not(:first-child) > * {
padding-top: 5px;
}
@media (max-width: 480px) {
#footerOrder .order-totals {
display: block;
text-align: right;
}
#footerOrder .order-totals > * + * {
margin: 15px 0 0 0;
}
}
#footerOrder .order-totals .subTotalLabel {
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: var(--fs-normal);
}
#footerOrder .order-totals .subAmount {
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
text-align: right;
font-size: var(--fs-normal);
}
#footerOrder .order-totals .totalLabel {
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: var(--fs-normal);
}
#footerOrder .order-totals .totalAmount {
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
text-align: right;
white-space: nowrap;
font-size: var(--fs-large);
}
#footerOrder .order-totals .timerMsg {
margin-top: 5px;
padding-right: 30px;
font-family: inherit;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: var(--fs-small);
}
#footerOrder .order-totals .timerMsg.timeup {
animation: FlashInOut 1s infinite;
}
@media (max-width: 480px) {
#footerOrder .order-totals form {
display: block;
}
}
#footerOrder .order-totals .btn {
position: relative;
}
@media (max-width: 480px) {
#footerOrder .order-totals .btn {
display: block;
width: 100%;
}
}
#footerOrder .order-totals .btn .fa.error {
color: #ee1b2e;
}
#footerOrder .order-totals .btn.btn-active {
border: none;
background: #000;
color: #FFF;
}
#footerOrder .order-totals .btn.btn-active:hover {
border: none;
background: #FFF;
color: #000;
}
#footerOrder .order-totals .btn:disabled, #footerOrder .order-totals .btn:disabled:hover {
border: none;
background: #F6F6F6;
color: #D8D8D8;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.orderListWrapper {
padding: 30px 0 60px 0;
background: #FFF;
color: #000;
}
.orderListWrapper.mtEditformWrapper {
padding-bottom: 0;
}
.orderListWrapper .listItemWrapper {
position: relative;
}
.orderListWrapper .orderItem {
height: auto;
max-height: none;
}
.orderListWrapper .orderItem .dateTime {
min-width: 112px;
float: left;
padding-top: 25px;
padding-right: 0;
padding-left: 30px;
}
.orderListWrapper .orderItem .dateTime .date {
line-height: var(--fs-small-title);
font-size: var(--fs-small-title);
}
.orderListWrapper .orderItem .dateTime .time {
font-size: var(--fs-normal);
}
.orderListWrapper .orderItem .desc {
max-width: 475px;
height: auto;
min-height: 100px;
max-height: none;
float: left;
padding-bottom: 15px;
}
.orderListWrapper .orderItem .pullout {
position: relative;
z-index: 1;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.pageListFilterWrapper {
position: relative;
border-bottom: 30px solid transparent;
background: #F6F6F6;
color: #000;
}
.pageListFilterWrapper > .container {
max-width: 100%;
margin-bottom: -30px;
}
.pageListFilterWrapper::after {
content: "";
display: block;
height: 30px;
position: absolute;
right: 0;
bottom: -30px;
left: 0;
z-index: 0;
background: #FFF;
}
.pageListFilterWrapper.anchor-menu--dropdown::after, .pageListFilterWrapper.anchor-menu--dropdown .current a::after {
display: none;
}
.pageListFilterWrapper ul {
list-style: none;
display: flex;
position: relative;
z-index: 1;
margin: 0;
padding: 0;
}
.pageListFilterWrapper li {
margin: 0;
padding: 0;
border-bottom: 30px solid transparent;
white-space: nowrap;
}
.pageListFilterWrapper a,
.pageListFilterWrapper a:link,
.pageListFilterWrapper a:visited,
.pageListFilterWrapper select {
display: block;
position: relative;
padding: 30px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: none;
background: inherit;
color: inherit;
font-size: var(--fs-large);
}
.pageListFilterWrapper a:hover,
.pageListFilterWrapper a:active {
text-decoration: none;
color: rgb(76.5, 76.5, 76.5);
}
.pageListFilterWrapper .current a::after {
content: "";
display: block;
position: absolute;
top: 100%;
left: 50%;
margin-left: -30px;
border-top: 30px solid #F6F6F6;
border-right: 30px solid transparent;
border-bottom: none;
border-left: 30px solid transparent;
}
.pageListFilterWrapper.has-select {
border-bottom: none;
}
.pageListFilterWrapper.has-select > .container {
margin-bottom: 0;
}
.pageListFilterWrapper.has-select::after,
.pageListFilterWrapper.has-select .current a::after {
display: none;
}
.pageListFilterWrapper.anchor-menu--dropdown {
padding: 0;
border-bottom: none;
}
.pageListFilterWrapper.anchor-menu--dropdown > .container {
margin-bottom: 0;
}
@media (min-width: 768px) {
.pageListFilterWrapper.anchor-menu--dropdown > .container {
padding-left: 0;
}
}
.pageListFilterWrapper.anchor-menu--dropdown .container.inner {
width: 100%;
position: relative;
z-index: 1;
padding-left: 10px;
background: #F6F6F6;
color: #000;
overflow: hidden;
}
.pageListFilterWrapper.anchor-menu--dropdown .anchor-nav {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
display: block;
padding-right: 10px;
padding-left: 10px;
}
@media (max-width: 767px) {
.pageListFilterWrapper.anchor-menu--dropdown .anchor-nav {
max-width: none;
}
}
@media (min-width: 768px) {
.pageListFilterWrapper.anchor-menu--dropdown .anchor-nav {
max-width: 750px;
}
}
@media (min-width: 992px) {
.pageListFilterWrapper.anchor-menu--dropdown .anchor-nav {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.pageListFilterWrapper.anchor-menu--dropdown .anchor-nav {
max-width: 1170px;
}
}
.pageListFilterWrapper.anchor-menu--dropdown .anchor-nav .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
.pageListFilterWrapper.anchor-menu--dropdown .anchor-nav li {
border-bottom: 0;
}
.pageListFilterWrapper.anchor-menu--dropdown .anchor-nav a {
display: block;
margin: 0;
padding: 0;
border: none;
line-height: 45px;
background: transparent;
color: #000;
text-align: left;
}
.tagFiltersWrapper .inner {
padding: 0 15px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.tagFiltersWrapper .inner {
max-width: none;
}
}
@media (min-width: 768px) {
.tagFiltersWrapper .inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
.tagFiltersWrapper .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.tagFiltersWrapper .inner {
max-width: 1170px;
}
}
.tagFiltersWrapper .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
.tagFiltersWrapper ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-items: start;
margin: 0;
padding: 15px 0;
}
.tagFiltersWrapper ul li {
list-style: none;
display: flex;
margin: 0 8px 8px 0;
}
.tagFiltersWrapper ul li a {
display: flex;
align-items: center;
justify-content: center;
min-width: 4em;
height: 46px;
position: relative;
padding: 0 10px;
border: none;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-decoration: none;
text-transform: capitalize;
background: #EBECEC;
color: #ee1b2e;
box-shadow: none;
text-align: center;
cursor: pointer;
font-size: var(--fs-small-title);
}
.tagFiltersWrapper ul li a:hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
.tagFiltersWrapper ul li .remove {
display: none;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -49px;
padding: 5px;
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
cursor: pointer;
transform: scale(0);
transform-origin: center;
transition: transform 0.2s ease-out;
}
.tagFiltersWrapper ul li .remove .peppered-icon {
display: block;
}
.tagFiltersWrapper ul li .remove svg {
fill: #FFF;
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
margin: auto;
transform: translate(-50%, -50%);
transition: transform 0.2s ease-out;
}
.tagFiltersWrapper ul li.current a {
margin: 5px 46px 5px 0;
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
.tagFiltersWrapper ul li.current .remove {
display: block;
width: 46px;
min-width: unset;
height: 46px;
transform: scale(1);
}
.tagFiltersWrapper ul li.current .remove svg {
width: 26px;
height: 26px;
}
.pageListWrapper {
position: relative;
}
.pageListWrapper .inner {
position: relative;
padding: 30px 15px;
}
.pageListWrapper.variant-boxed .inner {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.pageListWrapper.variant-boxed .inner {
max-width: none;
}
}
@media (min-width: 768px) {
.pageListWrapper.variant-boxed .inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
.pageListWrapper.variant-boxed .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.pageListWrapper.variant-boxed .inner {
max-width: 1170px;
}
}
.pageListWrapper.variant-boxed .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
@media (min-width: 768px) {
.pageListWrapper.variant-slider-wide .inner {
margin-right: 60px;
margin-left: 60px;
}
}
@media (min-width: 769px) {
.pageListWrapper.fadeout .slick-list {
-webkit-mask-image: linear-gradient(90deg, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0.1) 100%);
mask-image: linear-gradient(90deg, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0.1) 100%);
}
}
.pageListWrapper .pageItems.grid-root {
display: flex;
flex-wrap: wrap;
}
.pageListWrapper .pageItems.grid-root > * {
width: 360px;
margin: 0 5px 15px 5px;
}
@supports (display: grid) {
.pageListWrapper .pageItems.grid-root {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
}
.pageListWrapper .pageItems.grid-root > * {
width: auto;
margin: 0;
}
@media (max-width: 991px) {
.pageListWrapper .pageItems.grid-root {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.pageListWrapper .pageItems.grid-root {
grid-template-columns: 1fr;
}
}
}
@supports (display: grid) {
.pageListWrapper.variant-grid-large .pageItems.grid-root {
grid-column-gap: 120px;
grid-row-gap: 80px;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 991px) {
.pageListWrapper.variant-grid-large .pageItems.grid-root {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.pageListWrapper.variant-grid-large .pageItems.grid-root {
grid-template-columns: 1fr;
}
}
}
@media (min-width: 992px) {
.pageListWrapper.variant-grid-large.first-large .pageItems.grid-root > *:first-child {
margin-right: 120px;
margin-left: 120px;
grid-column-start: 1;
grid-column-end: span 2;
}
}
.pageListWrapper .slick-track,
.pageListWrapper .slick-slide {
display: flex;
}
.pageListWrapper .slider:not(.slick-initialized) {
visibility: hidden;
}
.pageListWrapper .slider-root section {
height: auto;
margin: 20px 10px;
}
.pageListWrapper .slider-nav button {
color: #999;
}
.pageListWrapper .slider-nav button:hover {
color: #000;
}
.pageListWrapper h2 {
margin: 0 0 15px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
font-style: normal;
line-height: 1;
text-transform: uppercase;
color: inherit;
font-size: var(--fs-large-title);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.people-list h2,
.people-grid h2,
.people-featured h2 {
margin: 0 0 30px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-large-title);
}
.people-list {
font-family: inherit;
font-weight: normal;
line-height: 1.4;
color: inherit;
font-size: inherit;
}
.people-list a {
text-decoration: none;
color: #000;
}
.people-list a:hover {
text-decoration: none;
color: #000;
}
.people-list .roles {
font-weight: inherit;
font-style: italic;
}
.people-list .roles::before {
content: "(";
}
.people-list .roles::after {
content: ")";
}
.people-grid .people-card,
.people-featured .people-card {
display: block;
position: relative;
margin-bottom: 30px;
border-radius: 0px;
overflow: hidden;
}
.people-grid .people-card > *,
.people-featured .people-card > * {
border-radius: inherit;
}
.people-grid .people-card:link:hover,
.people-featured .people-card:link:hover {
text-decoration: none;
}
.people-grid .people-card:link:hover .desc h3,
.people-featured .people-card:link:hover .desc h3 {
text-decoration: none;
}
.people-grid .picture--people-card,
.people-featured .picture--people-card {
aspect-ratio: auto;
}
.people-grid picture,
.people-featured picture {
display: block;
position: relative;
}
.people-grid .imageLayer,
.people-featured .imageLayer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 30px;
background: transparent no-repeat center/cover;
}
.people-grid .gradientOverlay,
.people-featured .gradientOverlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 100%);
}
.people-grid .desc,
.people-featured .desc {
width: 100%;
position: absolute;
bottom: 0;
color: inherit;
}
.people-grid .desc .inner,
.people-featured .desc .inner {
display: flex;
flex-direction: column;
padding: 30px;
}
.people-grid .desc h3,
.people-featured .desc h3 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-decoration: none;
text-transform: none;
hyphens: auto;
font-size: var(--fs-small-title);
}
.people-grid .desc p,
.people-featured .desc p {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.33;
text-transform: none;
font-size: var(--fs-small);
}
.people-grid .grid-root {
display: flex;
flex-wrap: wrap;
}
.people-grid .grid-root > * {
width: 360px;
margin: 0 5px 15px 5px;
}
@supports (display: grid) {
.people-grid .grid-root {
display: grid;
grid-column-gap: 15px;
grid-row-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
}
.people-grid .grid-root > * {
width: auto;
margin: 0;
}
@media (max-width: 991px) {
.people-grid .grid-root {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.people-grid .grid-root {
grid-template-columns: 1fr;
}
}
}
@supports (display: grid) {
.people-grid.grid-size-2 .grid-root {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 991px) {
.people-grid.grid-size-2 .grid-root {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.people-grid.grid-size-2 .grid-root {
grid-template-columns: 1fr;
}
}
.people-grid.grid-size-5 .grid-root {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.people-grid.grid-size-5 .grid-root {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 767px) {
.people-grid.grid-size-5 .grid-root {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 479px) {
.people-grid.grid-size-5 .grid-root {
grid-template-columns: 1fr;
}
}
.people-grid.grid-size-5 .grid-root .desc h3 {
line-height: normal;
font-size: var(--fs-small-title);
}
.people-grid.grid-size-5 .grid-root .desc p {
line-height: 1.33;
font-size: var(--fs-tiny);
}
}
.people-grid .people-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 360px;
height: 360px;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
@supports (display: grid) {
.people-grid .people-card {
width: 100%;
height: auto;
margin-bottom: 0;
}
}
.people-grid .people-card:not(.flat) {
padding-bottom: 100%;
}
.people-grid .people-card.flat {
height: auto;
}
.people-grid .people-card.flat img {
width: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.people-grid .people-card.flat .desc {
position: relative;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: inherit;
}
.people-grid .people-card.flat .desc .inner {
padding: 10px 15px;
}
.people-featured .people-card {
display: flex;
height: 360px;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
.people-featured .people-card > * {
flex: 1;
min-height: 360px;
position: relative;
}
.people-featured .people-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.people-featured .people-card:link {
text-decoration: none;
}
.people-featured .people-card:link:hover {
text-decoration: none;
}
@media (max-width: 991px) {
.people-featured .people-card {
display: block;
height: auto;
}
.people-featured .people-card > * {
min-height: 0;
}
.people-featured .people-card img {
object-fit: contain;
height: auto;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.peopleHeader {
text-align: center;
}
.peopleHeader .inner > img {
max-width: 300px;
margin: 30px 0;
border: none;
border-radius: 100%;
will-change: transform;
animation: none;
animation-fill-mode: forwards;
}
.peopleHeader[data-animations*=zoom] .inner > img {
animation: 2s ease-out hero-zoom;
}
.peopleHeader[data-animations*=twist] .inner > img {
animation: 2s ease-out hero-twist;
}
.peopleHeader[data-animations*=saturate] .inner > img {
animation: 2s ease-out hero-saturate;
}
.peopleHeader[data-animations*=desaturate] .inner > img {
animation: 2s ease-out hero-desaturate;
}
.peopleHeader[data-animations*=slide] .inner > img {
animation: 2s ease-out hero-slide;
}
.peopleHeader[data-animations*=fade-in] .inner > img {
animation: 2s ease-out hero-fade-in;
}
.peopleHeader h1 {
margin: 15px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
color: #000;
font-size: var(--fs-huge-title);
}
.peopleHeader p.roles {
max-width: 36rem;
margin: 15px auto;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1.2;
text-transform: none;
color: #000;
font-size: var(--fs-huge-subtitle);
}
.peopleHeader .richtext {
max-width: 36rem;
margin: 30px auto;
font-family: "FSELLIOT", sans-serif;
font-weight: 300;
line-height: 150%;
text-align: left;
text-transform: none;
color: inherit;
font-size: var(--fs-normal);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
#postFooter {
position: relative;
padding: 30px 0;
font-family: inherit;
line-height: 20px;
text-align: center;
background: #F6F6F6;
color: #000;
font-size: var(--fs-small);
}
@media (min-width: 768px) {
#postFooter.variant-boxedLeftRight .inner {
display: flex;
justify-content: space-around;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
#postFooter.variant-boxedLeftRight .inner > :first-child {
text-align: left;
}
#postFooter.variant-boxedLeftRight .inner > :last-child {
text-align: right;
}
}
@media (min-width: 768px) and (max-width: 767px) {
#postFooter.variant-boxedLeftRight .inner {
max-width: none;
}
}
@media (min-width: 768px) and (min-width: 768px) {
#postFooter.variant-boxedLeftRight .inner {
max-width: 750px;
}
}
@media (min-width: 768px) and (min-width: 992px) {
#postFooter.variant-boxedLeftRight .inner {
max-width: 970px;
}
}
@media (min-width: 768px) and (min-width: 1200px) {
#postFooter.variant-boxedLeftRight .inner {
max-width: 1170px;
}
}
@media (min-width: 768px) {
#postFooter.variant-boxedLeftRight .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
#postFooter .column {
display: inline-block;
}
}
#postFooter.variant-fullWRight {
text-align: right;
}
#postFooter p {
margin: 0;
}
#postFooter a {
color: #000;
}
#postFooter a:hover {
color: rgb(76.5, 76.5, 76.5);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 1200px) {
.productWrapper .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.productWrapper:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.productCard {
position: relative;
border: none;
border-radius: 0px;
background: #FFF;
box-shadow: none;
}
.productCard .desc-wrapper {
display: flex;
padding: 15px 20px;
}
.productCard img {
margin: 0 30px 0 0;
}
.productCard h2 {
margin: 0 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-small-title);
}
.productCard p {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-small);
}
.productCard form {
margin: 0;
}
.productCard .product-option {
display: flex;
align-items: baseline;
justify-content: flex-end;
}
.productCard .product-option > label:not(.screenreader) {
all: revert;
flex: 1;
}
.productCard .product-option select {
margin-left: 15px;
}
.productCard .product-option + .product-option {
margin-top: 5px;
}
.productCard .input-prices {
width: 100%;
margin: 0;
padding: 10px 15px 20px 15px;
border: none;
border-radius: 3px;
background: rgba(0, 0, 0, 0.1);
text-align: left;
}
.productCard .input-prices label {
margin: 0 0 30px 0;
color: #000;
}
.productCard .input-prices input::placeholder {
color: #000;
}
.productCard .price-buttons {
display: flex;
justify-content: flex-start;
flex-flow: row wrap;
margin-bottom: -5px;
}
.productCard .price-buttons button {
min-width: 4em;
margin: 0 15px 5px 0;
}
.productCard .additional-note + .price-buttons {
flex: 2;
}
.productCard .price-range {
display: flex;
align-items: center;
margin-top: 15px;
padding: 10px;
}
.productCard .price-range .range-input-placeholder {
flex: 1;
margin: 0 1em;
border: none;
border-radius: 3px;
background: #2A364B;
box-shadow: none;
}
.productCard .price-range .range-input-placeholder .noUi-connect {
border: none;
background: #DDD;
}
.productCard .price-range .range-input-placeholder.noUi-horizontal {
height: 10px;
}
.productCard .price-range .range-input-placeholder.noUi-horizontal .noUi-tooltip {
margin-bottom: 5px;
padding: 5px 10px;
color: #2A364B;
}
.productCard .price-range .range-input-placeholder.noUi-horizontal .noUi-pips-horizontal {
height: 0;
position: absolute;
top: -50%;
padding: 0;
}
.productCard .price-range .range-input-placeholder.noUi-horizontal .noUi-marker,
.productCard .price-range .range-input-placeholder.noUi-horizontal .noUi-marker-large {
width: 3px;
height: 20px;
border-radius: 3px;
background: #2A364B;
}
.productCard .price-range .range-input-placeholder.noUi-horizontal .noUi-handle {
width: 28px;
height: 28px;
top: -12px;
border: none;
border-radius: 100%;
background: #FFF;
box-shadow: none;
cursor: grab;
}
.productCard .price-range .range-input-placeholder.noUi-horizontal .noUi-handle::after, .productCard .price-range .range-input-placeholder.noUi-horizontal .noUi-handle::before {
display: none;
}
.productCard .price-range .range-input-placeholder.noUi-horizontal .noUi-handle:active {
cursor: grabbing;
}
.productCard .price-range input[type=number] {
-webkit-appearance: none;
max-width: 3em;
margin: 0;
padding: 0;
border: none;
background: none;
}
.productCard .price-range input[type=number]:last-of-type {
text-align: right;
}
.productCard fieldset,
.productCard .footer {
margin: 0;
padding: 10px 20px;
text-align: right;
}
.productCard .footer {
display: flex;
border-top: 1px solid #DDD;
background: transparent;
}
.productCard .footer .btn {
display: inline-block;
width: auto;
}
.productCard .footer input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 38px;
height: 20px;
position: relative;
bottom: -2px;
margin-right: 1ex;
border: none;
border-radius: 20px;
overflow: hidden;
outline: none;
cursor: pointer;
background-color: #999;
transition: background-color ease 0.3s;
}
.productCard .footer input[type=checkbox]::before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
z-index: 2;
border-radius: 100%;
background: #FFF;
color: #FFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
will-change: transform;
transition: all ease-in-out 0.2s;
}
.productCard .footer input[type=checkbox]:checked {
background-color: #0AA332;
}
.productCard .footer input[type=checkbox]:checked::before {
transform: translateX(18px);
}
.productCard .footer .additional-note {
flex: 1;
text-align: left;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: var(--fs-small);
}
.productCard .footer .additional-note label {
margin: 0;
font-weight: inherit;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 1200px) {
.programmeWrapper .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.programmeWrapper:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.programmeWrapper .inner {
padding: 0;
border: none;
border-radius: 0;
background: transparent;
}
.programmeWrapper h2 {
margin: 0 0 30px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-large-title);
}
.programmeWrapper .richtext {
font-family: "FSELLIOT", sans-serif;
font-weight: 300;
line-height: 150%;
text-transform: none;
color: #000;
font-size: var(--fs-normal);
}
.programmeWrapper .richtext ul {
margin: 10px 0 10px 25px;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.quoteWrapper {
text-align: left;
}
@media (min-width: 1200px) {
.quoteWrapper .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.quoteWrapper:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.quoteWrapper blockquote {
margin: 0 auto;
padding: 0;
border: none;
font-size: inherit;
}
.quoteWrapper blockquote footer::before {
content: "";
}
.quoteWrapper:not(.variant-2) blockquote {
padding: 0 calc(var(--fs-medium-title) + 10px);
}
.quoteWrapper:not(.variant-2) p {
position: relative;
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
font-style: normal;
line-height: normal;
text-transform: none;
color: inherit;
quotes: "" "" "" "";
font-size: var(--fs-medium-title);
}
.quoteWrapper:not(.variant-2) p::before, .quoteWrapper:not(.variant-2) p::after {
content: '"';
position: absolute;
top: var(--fs-medium-title);
left: calc(var(--fs-medium-title) * -1 - 10px);
line-height: 0.1em;
color: #000;
font-size: 48px;
}
.quoteWrapper:not(.variant-2) p::after {
content: '"';
top: auto;
right: calc(var(--fs-medium-title) * -1 - 10px);
bottom: 0;
left: auto;
}
@media (max-width: 767px) {
.quoteWrapper:not(.variant-2) p:before {
top: calc(var(--fs-medium-title) - 10px);
}
.quoteWrapper:not(.variant-2) p:after {
top: auto;
}
}
@media (max-width: 479px) {
.quoteWrapper:not(.variant-2) p:before {
top: calc(var(--fs-medium-title) - 15px);
}
.quoteWrapper:not(.variant-2) p:after {
top: auto;
}
}
.quoteWrapper:not(.variant-2) footer {
position: relative;
margin-top: 30px;
padding-top: 20px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
font-style: normal;
line-height: normal;
text-align: center;
text-transform: uppercase;
color: #1A242F;
overflow: hidden;
font-size: var(--fs-normal);
}
.quoteWrapper:not(.variant-2) footer > svg {
width: 1400px;
height: 20px;
position: absolute;
top: 0;
left: -700px;
margin-left: 50%;
}
.quoteWrapper:not(.variant-2) footer path {
stroke: #1A242F;
stroke-width: 2px;
}
.quoteWrapper.variant-2 blockquote {
margin: 30px;
border-top: 1px solid #1A242F;
border-bottom: 1px solid #1A242F;
}
.quoteWrapper.variant-2 p {
margin: 30px 30px 0 30px;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
font-style: italic;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-medium-title);
}
.quoteWrapper.variant-2 p::before {
content: '"';
}
.quoteWrapper.variant-2 p::after {
content: '"';
}
.quoteWrapper.variant-2 footer {
margin: 30px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: #1A242F;
font-size: var(--fs-small);
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
#reviews {
position: relative;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: inherit;
background: #3469CB;
color: #FFF;
}
#reviews .reviewSlider .slide {
padding: 60px;
text-align: center;
}
#reviews .reviewSlider .slide .container {
max-width: 60em;
}
#reviews .reviewSlider .slide a {
display: block;
text-decoration: none;
color: inherit;
}
#reviews .reviewSlider .slide a:hover {
color: #FFF;
}
#reviews .reviewSlider .slide a:hover .title {
text-decoration: underline;
color: inherit;
}
#reviews .reviewSlider .slide a[href="#"] {
pointer-events: none;
}
#reviews .reviewSlider .slide .title {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: inherit;
text-transform: none;
color: inherit;
font-size: var(--fs-large-title);
}
#reviews .reviewSlider .slide .description {
margin: 0 0 15px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
text-transform: none;
font-size: inherit;
}
#reviews .reviewSlider .slide .credits {
font-size: inherit;
}
#reviews .arrows {
display: flex;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
pointer-events: none;
}
#reviews .nextBtn,
#reviews .prevBtn {
position: absolute;
padding: 30px;
border: none;
background: none;
color: inherit;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: 0.4s opacity ease-in-out;
opacity: 0.5;
overflow: hidden;
font-size: 50px;
}
#reviews .nextBtn.prevBtn,
#reviews .prevBtn.prevBtn {
left: 0;
}
#reviews .nextBtn.nextBtn,
#reviews .prevBtn.nextBtn {
right: 0;
}
#reviews .nextBtn:hover,
#reviews .prevBtn:hover {
transition: 0.2s opacity ease-in-out;
opacity: 1;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.searchBar .container {
padding: 0 15px;
}
.searchBar form {
margin: 0;
}
.searchBar .search-box form,
.searchBar .input-daterange {
position: relative;
}
.searchBar [name=s],
.searchBar .input-daterange input {
width: 100%;
height: auto;
min-height: 2em;
padding: 8px 12px;
padding-right: 30px;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
border-radius: 15px 15px 15px 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
background: #FFF;
color: #000;
text-align: left;
font-size: var(--fs-normal);
}
#filtersForm[data-datepicker-mode=inline] #filterHeader .input-daterange input {
width: 100%;
}
@media (max-width: 991px) {
.searchBar [name=s],
.searchBar .input-daterange input {
width: 100%;
}
}
.searchBar [type=submit],
.searchBar .fa-calendar {
position: absolute;
top: 50%;
right: 0.5em;
margin-top: -0.5em;
color: inherit;
}
.searchBar [type=submit] {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 100%;
top: 0;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
background: transparent;
}
.searchBar .fa-calendar {
pointer-events: none;
}
.searchBar .inner > * + * {
margin-top: 15px;
}
@media (min-width: 601px) {
.searchBar .inner {
display: flex;
}
.searchBar .inner > * {
flex: 2;
}
.searchBar .inner > :first-child {
flex: 6;
}
.searchBar .inner > * + * {
margin-top: 0;
margin-left: 30px;
}
}
@media (max-width: 600px) {
.searchBar .dateRange {
display: none;
}
.searchBar .dateRangeSingle {
display: block;
}
}
@media (min-width: 601px) {
.searchBar .dateRange {
display: block;
}
.searchBar .dateRangeSingle {
display: none;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.searchresultWrapper {
margin: 0 auto;
padding: 0 15px;
background: transparent;
}
.searchresultWrapper .superTitle {
margin: 60px 0 0 0;
}
.searchresultWrapper h1 {
margin: 0 0 30px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
color: #000;
font-size: var(--fs-huge-title);
}
.searchresultWrapper h2.resultGroupHeader {
margin: 60px 0 30px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-large-title);
}
.searchresultWrapper h2.resultGroupHeader a,
.searchresultWrapper h2.resultGroupHeader a:visited,
.searchresultWrapper h2.resultGroupHeader a:hover,
.searchresultWrapper h2.resultGroupHeader a:active {
text-decoration: none;
color: inherit;
}
.searchresultWrapper .foundItem {
text-decoration: none;
}
.searchresultWrapper .foundItem h3 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-decoration: underline;
text-transform: none;
color: #000;
font-size: var(--fs-medium-title);
}
.searchresultWrapper .foundItem p {
margin: 0;
color: #000;
}
.searchresultWrapper .foundItem:hover, .searchresultWrapper .foundItem:active {
text-decoration: none;
}
.searchresultWrapper .foundItem:hover h3, .searchresultWrapper .foundItem:active h3 {
text-decoration: none;
color: #000;
}
.searchresultWrapper .buttons {
margin-bottom: -5px;
}
.searchresultWrapper .buttons .btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
margin-bottom: 5px;
}
.searchresultWrapper .buttons .btn > .peppered-icon {
margin-right: 10px;
}
.searchresultWrapper .showAllLinkWrapper {
text-align: right;
margin-bottom: 30px;
}
.searchresultWrapper .showAllLinkWrapper .btn {
margin: 0 0 10px 0;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.headerShowWrapper .inner {
border-bottom: none;
}
.headerShowWrapper h1 {
margin-bottom: 5px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
color: #000;
font-size: var(--fs-huge-title);
}
.headerShowWrapper .desc {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.25;
text-transform: none;
color: #333;
font-size: var(--fs-normal);
}
.headerShowWrapper .shortcutMenu {
float: right;
margin-bottom: 0;
padding: 30px 15px;
text-align: right;
}
.headerShowWrapper .shortcutMenu li {
list-style: none;
display: inline-block;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: inherit;
font-size: var(--fs-small-title);
}
.headerShowWrapper .shortcutMenu li + li {
margin-left: 30px;
}
.headerShowWrapper .shortcutMenu li a {
text-decoration: none;
color: inherit;
}
.headerShowWrapper .shortcutMenu li a:hover {
text-decoration: underline;
color: #3469CB;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.soon2Wrapper > .container {
display: flex;
align-items: flex-start;
padding: 0 15px;
}
.soon2Wrapper > .container > * {
flex: 1;
}
.soon2Wrapper .soon2Banner {
display: block;
flex: 1;
position: relative;
margin-right: 10px;
border-radius: 0;
background: none;
overflow: hidden;
}
.soon2Wrapper .soon2Banner:not(.flat) {
min-height: 460px;
padding: 30px;
background-position: center;
background-size: cover;
}
.soon2Wrapper .soon2Banner:not(.flat) .clickLayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.soon2Wrapper .soon2Banner:not(.flat) .desc {
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
.soon2Wrapper .soon2Banner.flat img {
width: 100%;
}
.soon2Wrapper .soon2Banner .desc {
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
text-align: left;
color: #FFF;
}
.soon2Wrapper .soon2Banner .title,
.soon2Wrapper .soon2Banner h3 {
margin: 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1;
text-transform: none;
font-size: var(--fs-huge-title);
}
.soon2Wrapper .soon2Banner .title a,
.soon2Wrapper .soon2Banner .title a:link,
.soon2Wrapper .soon2Banner h3 a,
.soon2Wrapper .soon2Banner h3 a:link {
text-decoration: underline;
color: inherit;
}
.soon2Wrapper .soon2Banner .title a:hover,
.soon2Wrapper .soon2Banner .title a:active,
.soon2Wrapper .soon2Banner h3 a:hover,
.soon2Wrapper .soon2Banner h3 a:active {
text-decoration: none;
color: inherit;
}
.soon2Wrapper .soon2Banner .subtitle {
margin: 0 0 15px 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
font-size: var(--fs-huge-subtitle);
}
.soon2Wrapper .soon2Banner .subtitle p {
margin: 0;
padding: 0;
}
.soon2Wrapper .soon2Banner .btn {
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-transform: uppercase;
background: #3469CB;
color: #FFF;
font-size: var(--fs-normal);
}
.soon2Wrapper .soon2Banner .btn:hover, .soon2Wrapper .soon2Banner .btn:active {
border: none;
background: #7697D4;
color: #FFF;
}
@media (max-width: 767px) {
.soon2Wrapper.banner-on-mobile > .container {
flex-wrap: wrap;
flex-direction: column;
align-items: stretch;
}
.soon2Wrapper.banner-on-mobile > .container .soon2Banner {
margin-right: 0;
margin-bottom: 30px;
}
.soon2Wrapper.banner-on-mobile.variant-flipped > .container .soon2Banner {
margin-top: 30px;
margin-bottom: 0;
}
.soon2Wrapper:not(.banner-on-mobile) .soon2Banner {
display: none;
}
}
@media (min-width: 769px) {
.soon2Wrapper .soon2Banner + .soon2List {
margin-left: 10px;
}
}
.soon2Wrapper.variant-flipped .soon2Banner {
margin-right: 0;
margin-left: 10px;
order: 2;
}
.soon2Wrapper.variant-flipped .soon2Banner + .soon2List {
margin-left: 0;
}
@media (min-width: 769px) {
.soon2Wrapper.variant-flipped .soon2Banner + .soon2List {
margin-right: 10px;
}
}
.soon2Wrapper.list-toggle tr.extra:not(.revealed) {
display: none !important;
}
.soon2Wrapper.list-toggle tr.production-type-movie {
display: none;
}
.soon2Wrapper.list-toggle[data-list-toggled=movie] tr.production-type-movie {
display: table-row;
}
.soon2Wrapper.list-toggle[data-list-toggled=movie] tr:not(.production-type-movie) {
display: none;
}
.soon2Wrapper .soon2List .soon-toggle-header {
margin: 0;
}
@media (min-width: 480px) {
.soon2Wrapper .soon2List .soon-toggle-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.soon2Wrapper .soon2List .soon-toggle-header h2 {
margin: 0 15px 0 0;
}
}
.soon2Wrapper .soon-toggle {
display: inline-flex;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #DDD;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
text-transform: uppercase;
background: #DDD;
color: #333;
cursor: pointer;
font-size: var(--fs-normal);
}
.soon2Wrapper .soon-toggle span {
display: inline-block;
padding: 12px 15px;
transition: all 0.2s ease-in-out;
}
.soon2Wrapper .soon-toggle span:hover {
transition: all 0.1s ease-in-out;
}
.soon2Wrapper .soon-toggle span:hover, .soon2Wrapper .soon-toggle span:active {
background: #333;
color: #DDD;
}
.soon2Wrapper .soon-toggle span.movie:hover, .soon2Wrapper .soon-toggle span.movie:active {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background: #333;
color: #DDD;
}
.soon2Wrapper .soon-toggle span.default:hover, .soon2Wrapper .soon-toggle span.default:active {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.soon2Wrapper:not([data-list-toggled=movie]) .soon-toggle span.default {
background: #333;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
color: #DDD;
}
.soon2Wrapper:not([data-list-toggled=movie]) .revealButton.movie,
.soon2Wrapper:not([data-list-toggled=movie]) .viewAll.movie {
display: none;
}
.soon2Wrapper[data-list-toggled=movie] .soon-toggle span.movie {
background: #333;
color: #DDD;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.soon2Wrapper[data-list-toggled=movie] .revealButton:not(.movie),
.soon2Wrapper[data-list-toggled=movie] .viewAll:not(.movie) {
display: none;
}
.soon2Wrapper .revealButton {
display: block;
width: 30px;
height: 30px;
float: left;
margin: 10px 0 0 0;
padding: 0;
border: none;
border-radius: 0px;
font-size: 30px;
line-height: 1;
background: transparent;
color: #FF5600;
-webkit-appearance: none;
will-change: transform;
transition: all 0.2s ease-in-out;
}
.soon2Wrapper .revealButton:hover, .soon2Wrapper .revealButton:active {
background: transparent;
color: #1A242F;
}
.soon2Wrapper .revealButton.toggled {
transform: rotate(-180deg);
}
.soon2Wrapper .soon2List {
flex-shrink: 0;
}
.soon2Wrapper .soon2List .list {
padding: 20px 15px;
border-radius: 0;
background: #FFF;
color: #2A364B;
}
.soon2Wrapper .soon2List .soon-envelope {
overflow: hidden;
transition: height 0.2s ease-in-out;
}
.soon2Wrapper .soon2List .select-wrapper,
.soon2Wrapper .soon2List .select-wrapper a,
.soon2Wrapper .soon2List h2 {
margin: 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: uppercase;
font-size: var(--fs-small);
}
.soon2Wrapper .soon2List .btn {
border: none;
background: #ee1b2e;
color: #FFF;
}
@media (max-width: 767px) {
.soon2Wrapper .soon2List .btn {
min-width: 0;
}
}
.soon2Wrapper .soon2List .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.soon2Wrapper .soon2List .status-info {
display: block;
padding: 0;
font-family: inherit;
font-weight: normal;
line-height: 1.2;
text-transform: none;
text-align: center;
white-space: normal;
color: inherit;
font-size: inherit;
}
.soon2Wrapper .soon2List .status-info:link {
text-decoration: none;
color: inherit;
}
.soon2Wrapper .soon2List .status-info:link:hover {
text-decoration: none;
color: #000;
}
@media (max-width: 479px) {
.soon2Wrapper .soon2List .btn,
.soon2Wrapper .soon2List .status-info {
display: inline-flex;
padding: 5px 10px;
}
.soon2Wrapper .soon2List .btn .label,
.soon2Wrapper .soon2List .btn .property,
.soon2Wrapper .soon2List .status-info .label,
.soon2Wrapper .soon2List .status-info .property {
width: 1px;
height: 1px;
position: absolute;
top: -999px;
left: -999px;
overflow: hidden;
}
.soon2Wrapper .soon2List .btn .peppered-icon,
.soon2Wrapper .soon2List .status-info .peppered-icon {
display: inline-block;
}
}
.soon2Wrapper .soon2List .select-wrapper {
position: relative;
clear: both;
}
.soon2Wrapper .soon2List .select-wrapper button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 10px 15px;
border: none;
text-transform: inherit;
background: none;
-webkit-appearance: none;
background: #000;
color: #FFF;
}
.soon2Wrapper .soon2List .select-wrapper button:hover {
background: #000;
color: #FFF;
}
.soon2Wrapper .soon2List .select-wrapper .toggleEnvelope {
list-style: none;
width: 100%;
min-width: 160px;
float: left;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
border: none;
border-radius: 0;
background: #FFF;
box-shadow: none;
visibility: hidden;
}
.soon2Wrapper .soon2List .select-wrapper .toggleEnvelope a {
display: block;
clear: both;
margin: 0;
padding: 10px 15px;
color: inherit;
white-space: nowrap;
}
.soon2Wrapper .soon2List .select-wrapper .toggleEnvelope a:hover {
background: #3B76E4;
color: inherit;
}
.soon2Wrapper .soon2List .select-wrapper .toggleEnvelope[aria-expanded=true] {
visibility: visible;
}
.soon2Wrapper .soon2List form {
display: inline-block;
margin: 0;
}
.soon2Wrapper .soon2List table {
width: 100%;
margin: 0;
padding: 0;
}
.soon2Wrapper .soon2List tr {
border-bottom: 2px solid #2A364B;
}
.soon2Wrapper .soon2List td {
padding: 10px 0;
vertical-align: top;
}
.soon2Wrapper .soon2List td.event {
width: 100%;
}
.soon2Wrapper .soon2List td:not(:last-child) {
padding-right: 15px;
}
.soon2Wrapper .soon2List td.action {
text-align: right;
white-space: nowrap;
}
.soon2Wrapper .soon2List td.action > * {
vertical-align: top;
}
.soon2Wrapper .soon2List .supertitle {
display: block;
margin: 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.3;
text-transform: uppercase;
background: none;
color: #3469CB;
font-size: var(--fs-small);
}
.soon2Wrapper .soon2List .title {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 1.2em;
text-decoration: underline;
text-transform: none;
color: #2A364B;
font-size: var(--fs-large-subtitle);
}
@media (max-width: 479px) {
.soon2Wrapper .soon2List .title {
-webkit-hyphens: auto;
hyphens: auto;
}
}
.soon2Wrapper .soon2List .title:hover, .soon2Wrapper .soon2List .title:active {
text-decoration: none;
color: #1A242F;
}
.soon2Wrapper .soon2List .subtitle {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.2em;
text-transform: none;
color: #2A364B;
font-size: var(--fs-small);
}
.soon2Wrapper .soon2List .date {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 0.8em;
text-transform: none;
white-space: nowrap;
color: #2A364B;
font-size: var(--fs-normal);
}
.soon2Wrapper .soon2List .date span {
display: block;
}
.soon2Wrapper .soon2List .date span + span {
margin-top: 0;
}
.soon2Wrapper .soon2List .time {
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-transform: inherit;
white-space: nowrap;
color: inherit;
font-size: inherit;
}
.soon2Wrapper .soon2List .price {
display: inline-block;
margin: 0 15px 0 0;
font-family: inherit;
font-weight: normal;
line-height: inherit;
text-transform: none;
color: inherit;
font-size: inherit;
}
@media (max-width: 767px) {
.soon2Wrapper .soon2List .price {
display: none;
}
}
.soon2Wrapper .soon2List .genres {
flex-grow: 1;
margin-bottom: 10px;
}
.soon2Wrapper .soon2List .genres li {
list-style: none;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
}
.soon2Wrapper .soon2List .genres li a {
display: block;
padding: 0;
border: none;
border-radius: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: none;
line-height: 1.4px;
text-decoration: underline;
text-transform: uppercase;
background: transparent;
color: #000;
font-size: var(--fs-small);
}
.soon2Wrapper .soon2List .genres li a:hover {
border: none;
text-decoration: none;
background: transparent;
color: #000;
}
.soon2Wrapper .soon2List td.type {
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-transform: inherit;
color: inherit;
white-space: nowrap;
font-size: inherit;
}
@media (max-width: 767px) {
.soon2Wrapper .soon2List td.type {
display: none;
}
}
.soon2Wrapper .soon2List td.type a + a {
margin-left: 1ex;
}
.soon2Wrapper .soon2List td.type a,
.soon2Wrapper .soon2List td.type a:link,
.soon2Wrapper .soon2List td.type a:visited {
display: inline-block;
padding: 0;
border: none;
line-height: inherit;
text-decoration: none;
text-transform: inherit;
background: transparent;
color: inherit;
}
.soon2Wrapper .soon2List td.type a:hover,
.soon2Wrapper .soon2List td.type a:link:hover,
.soon2Wrapper .soon2List td.type a:visited:hover {
border: none;
text-decoration: underline;
background: none;
color: inherit;
}
.soon2Wrapper .soon2List .location,
.soon2Wrapper .soon2List .venue {
display: inline-block;
margin: 10px 0 5px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1.2em;
text-transform: uppercase;
color: #1A242F;
font-size: var(--fs-tiny);
}
.soon2Wrapper .soon2List .location + .venue::before {
content: "—";
}
.soon2Wrapper .soon2List .viewAll {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 10px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-decoration: none;
text-transform: none;
color: #2A364B;
font-size: var(--fs-normal);
}
.soon2Wrapper .soon2List .viewAll:hover, .soon2Wrapper .soon2List .viewAll:active {
text-decoration: underline;
color: #1A242F;
}
.soon2Wrapper .soon2List .viewAll .fa {
margin-left: 5px;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
#sponsor-footer {
padding: 15px 0;
border-top: none;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-align: left;
text-transform: none;
background: #F6F6F6;
color: #FFF;
font-size: var(--fs-small);
}
@media (max-width: 767px) {
#sponsor-footer {
text-align: center;
}
}
#sponsor-footer .inner {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
#sponsor-footer .inner {
max-width: none;
}
}
@media (min-width: 768px) {
#sponsor-footer .inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
#sponsor-footer .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
#sponsor-footer .inner {
max-width: 1170px;
}
}
#sponsor-footer .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
@media (min-width: 1200px) {
#sponsor-footer .inner {
max-width: 1170px;
}
}
#sponsor-footer .heading {
padding-top: 35px;
padding-bottom: 10px;
}
#sponsor-footer .logos a {
display: inline-block;
}
#sponsor-footer .logos a + a {
margin-left: 15px;
}
#sponsor-footer .logos img {
max-height: 100px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.suggestionWrapper.variant-boxed .inner {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.suggestionWrapper.variant-boxed .inner {
max-width: none;
}
}
@media (min-width: 768px) {
.suggestionWrapper.variant-boxed .inner {
max-width: 750px;
}
}
@media (min-width: 992px) {
.suggestionWrapper.variant-boxed .inner {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.suggestionWrapper.variant-boxed .inner {
max-width: 1170px;
}
}
.suggestionWrapper.variant-boxed .inner .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
@media (min-width: 769px) {
.suggestionWrapper.fadeout .slick-list {
-webkit-mask-image: linear-gradient(90deg, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0.1) 100%);
mask-image: linear-gradient(90deg, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0.1) 100%);
}
}
.suggestionWrapper .slick-track,
.suggestionWrapper .slick-slide {
display: flex;
}
.suggestionWrapper .slider:not(.slick-initialized) {
visibility: hidden;
}
.suggestionWrapper .slider-root section {
height: auto;
margin: 20px 10px;
}
.suggestionWrapper .slider-nav button {
color: #999;
}
.suggestionWrapper .slider-nav button:hover {
color: #000;
}
.suggestionWrapper #suggestionHeader {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
@media (max-width: 767px) {
.suggestionWrapper #suggestionHeader {
max-width: none;
}
}
@media (min-width: 768px) {
.suggestionWrapper #suggestionHeader {
max-width: 750px;
}
}
@media (min-width: 992px) {
.suggestionWrapper #suggestionHeader {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.suggestionWrapper #suggestionHeader {
max-width: 1170px;
}
}
.suggestionWrapper #suggestionHeader .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
.suggestionWrapper #suggestionHeader h2 {
margin-bottom: 0;
padding: 0 0 40px 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
color: #333;
text-align: left;
font-size: var(--fs-large-title);
}
.suggestionWrapper #suggestions .suggestionCard {
display: flex;
flex-direction: column;
border: none;
border-radius: 0px;
background: #F6F6F6;
color: #000;
box-shadow: none;
}
.suggestionWrapper #suggestions .suggestionCard ul li {
list-style: none;
}
.suggestionWrapper #suggestions[data-animations*=shadow] .suggestionCard {
transition: all 0.8s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=shadow] .suggestionCard:hover {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=shadow] .suggestionCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=glow] .suggestionCard {
transition: all 0.8s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=glow] .suggestionCard:hover {
box-shadow: 0 0 20px 0 rgba(118, 151, 212, 0.3);
transition: all 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=glow] .suggestionCard:active {
box-shadow: none;
transition: all 0.1s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=zoom] .suggestionCard .thumb img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=zoom] .suggestionCard:hover .thumb img {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=zoom] .suggestionCard:active .thumb img {
transform: scale(1.2);
transition: all 0.1s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=twist] .suggestionCard .thumb img {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=twist] .suggestionCard:hover .thumb img {
transform: scale(1.2) rotate(3deg);
transition: all 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=twist] .suggestionCard:active .thumb img {
transform: scale(1.3) rotate(6deg);
transition: all 0.1s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=saturate] .suggestionCard .thumb img {
will-change: filter;
filter: grayscale(100%);
transition: all 0.8s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=saturate] .suggestionCard:hover .thumb img {
filter: none;
transition: all 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=saturate] .suggestionCard:active .thumb img {
filter: none;
transition: all 0.1s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=desaturate] .suggestionCard .thumb img {
will-change: filter;
filter: grayscale(0%);
transition: all 0.8s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=desaturate] .suggestionCard:hover .thumb img {
filter: grayscale(100%);
transition: all 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=desaturate] .suggestionCard:active .thumb img {
filter: grayscale(100%);
transition: all 0.1s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=slide] .suggestionCard {
will-change: transform;
transition: all 0.8s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=slide] .suggestionCard:hover {
transform: translateY(-10px);
transition: all 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=slide] .suggestionCard:active {
transform: none;
transition: all 0.1s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=shift] .suggestionCard .inner {
will-change: transform;
transition: transform 0.8s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=shift] .suggestionCard:hover .inner {
transform: translateY(-10px);
transition: transform 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=shift] .suggestionCard:active .inner {
transform: none;
transition: transform 0.1s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=skew] .suggestionCard {
will-change: transform;
transition: all 0.8s ease-in-out;
transform-origin: top center;
}
.suggestionWrapper #suggestions[data-animations*=skew] .suggestionCard:hover {
transform: rotate(1deg);
transition: all 0.3s ease-in-out;
}
.suggestionWrapper #suggestions[data-animations*=skew] .suggestionCard:active {
transform: perspective(360px) translateZ(-30px);
transition: all 0.1s ease-in-out;
}
.suggestionWrapper #suggestions .suggestionCard .thumb {
display: block;
position: relative;
border-radius: 0px 0px 0 0;
overflow: hidden;
}
.suggestionWrapper #suggestions .suggestionCard .thumb img {
width: 100%;
padding: 0;
border-radius: 0;
}
.suggestionWrapper #suggestions .suggestionCard .desc {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
padding: 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: none;
flex-grow: 1;
font-size: var(--fs-large-subtitle);
}
.suggestionWrapper #suggestions .suggestionCard .desc p:not(.subtitle) {
margin: 0;
}
.suggestionWrapper #suggestions .suggestionCard .desc .top {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.suggestionWrapper #suggestions .suggestionCard .desc .top h3.image-middle {
display: block;
display: -webkit-box;
height: 4em;
line-height: 1.3em;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.suggestionWrapper #suggestions .suggestionCard .supertitle {
order: -1;
display: block;
align-self: flex-start;
margin: 0 0 5px 0;
padding: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
background: transparent;
color: #ee1b2e;
font-size: var(--fs-tiny);
}
.suggestionWrapper #suggestions .suggestionCard h3 {
margin: 0;
margin-bottom: 5px;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-decoration: none;
text-transform: none;
color: #000;
font-size: var(--fs-medium-title);
}
.suggestionWrapper #suggestions .suggestionCard h3 a {
display: block;
text-decoration: inherit;
color: inherit;
}
.suggestionWrapper #suggestions .suggestionCard h3:hover {
text-decoration: none;
color: #000;
}
.suggestionWrapper #suggestions .suggestionCard .subtitle {
margin: 0;
margin-bottom: 15px;
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: normal;
text-transform: none;
color: #000;
font-size: var(--fs-small);
}
.suggestionWrapper #suggestions .suggestionCard .tagline {
margin: 10px 0 15px 0;
font-family: inherit;
font-weight: inherit;
font-style: normal;
line-height: inherit;
text-transform: inherit;
color: inherit;
font-size: inherit;
}
.suggestionWrapper #suggestions .suggestionCard .tagline p {
margin: 0;
}
.suggestionWrapper #suggestions .suggestionCard .date {
order: -2;
margin-bottom: 10px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
font-style: normal;
line-height: normal;
text-transform: uppercase;
color: #333;
font-size: var(--fs-small);
}
.suggestionWrapper #suggestions .suggestionCard .bottom {
margin: 30px 0 0 0;
text-align: left;
}
.suggestionWrapper #suggestions .suggestionCard .btn.btn-active {
border: none;
background: #ee1b2e;
color: #FFF;
}
.suggestionWrapper #suggestions .suggestionCard .btn.btn-active:hover {
border: none;
background: #D11021;
color: #FFF;
}
.suggestionWrapper #suggestions .suggestionCard.default {
flex-direction: unset;
width: auto;
min-height: 360px;
position: relative;
}
.suggestionWrapper #suggestions .suggestionCard.default .thumb {
width: 100%;
height: 100%;
position: absolute;
}
.suggestionWrapper #suggestions .suggestionCard.default img {
height: 100%;
object-fit: cover;
object-position: center;
}
.suggestionWrapper #suggestions .suggestionCard.default .desc {
align-self: end;
pointer-events: none;
position: relative;
z-index: 1;
color: #FFF;
}
.suggestionWrapper #suggestions .suggestionCard.default .bottom {
text-align: left;
}
.suggestionWrapper #suggestions .suggestionCard.default .btn {
pointer-events: initial;
}
.suggestionWrapper #suggestions .suggestionCard.default .supertitle {
color: inherit;
}
.suggestionWrapper #suggestions .suggestionCard.default h3 {
color: inherit;
pointer-events: initial;
}
.suggestionWrapper #suggestions .suggestionCard.default h3:hover {
color: inherit;
}
.suggestionWrapper #suggestions .suggestionCard.default .subtitle {
color: inherit;
}
.suggestionWrapper #suggestions .suggestionCard.default .date {
color: inherit;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.teaserWrapper .richtext,
.richtext p.teaser {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 400;
line-height: 1.5;
text-transform: none;
color: inherit;
font-size: var(--fs-large);
}
.teaserWrapper .richtext p,
.richtext p.teaser p {
margin-bottom: 0;
}
@media (min-width: 1200px) {
.teaserWrapper .richtext {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.teaserWrapper:not(.align-left) .richtext {
margin-left: 16.66666667%;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
@media (min-width: 1200px) {
.themegroupHeader .inner {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.themegroupHeader:not(.align-left) .inner {
margin-left: 16.66666667%;
}
}
.themegroupHeader .inner {
text-align: center;
}
.themegroupHeader.align-left .inner {
text-align: left;
}
.themegroupHeader h1 {
margin: 30px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
color: #000;
font-size: var(--fs-huge-subtitle);
}
.themegroupHeader .richtext {
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
color: #FFF;
font-size: var(--fs-large-subtitle);
}
.themegroupHeader .richtext > * {
margin: 0;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.listWrapper.theme .title-row {
margin-bottom: 30px;
}
@media (min-width: 768px) {
.listWrapper.theme .title-row {
display: flex;
justify-content: space-between;
}
}
.listWrapper.theme .title-row h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
flex: 1;
font-size: var(--fs-large-title);
}
@media (max-width: 767px) {
.listWrapper.theme .title-row h2 {
margin-bottom: 30px;
}
}
.container.pinned {
display: flex;
align-items: center;
width: 100%;
height: 80px;
position: fixed;
top: 69px;
right: 0;
z-index: 3;
margin: 0;
padding: 0;
background: #FFF;
color: inherit;
box-shadow: none;
will-change: transform, opacity;
animation: header-slideIn 0.2s ease-in-out;
overflow: auto;
}
.container.pinned .title-row {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
flex: 1;
}
@media (max-width: 767px) {
.container.pinned .title-row {
max-width: none;
}
}
@media (min-width: 768px) {
.container.pinned .title-row {
max-width: 750px;
}
}
@media (min-width: 992px) {
.container.pinned .title-row {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.container.pinned .title-row {
max-width: 1170px;
}
}
.container.pinned .title-row .slick-slider {
margin-right: -10px;
margin-left: -10px;
}
.container.pinned .title-row h2 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-transform: none;
font-size: 28px;
}
.container.pinned .title-row .btn {
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
font-size: var(--fs-normal);
}
@media (max-width: 479px) {
.container.pinned .title-row .btn {
min-width: 0;
}
}
.container.pinned .title-row .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
header.has-anchormenu ~ .listWrapper.theme .pinned-row {
top: 114px;
}
.listWrapper.theme .hdrMeta {
display: flex;
align-items: center;
}
.listWrapper.theme .hdrMeta > * + * {
margin-left: 15px;
}
.listWrapper.theme .hdrMeta form {
margin-bottom: 0;
}
.listWrapper.theme .hdrMeta .btn {
width: auto;
min-width: 170px;
float: right;
border: none;
border-radius: 0px;
background: #ee1b2e;
color: #FFF;
}
.listWrapper.theme .hdrMeta .btn:hover {
border: none;
background: #D11021;
color: #FFF;
}
.listWrapper.theme .listItems {
margin-top: 0;
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.themeListWrapper h2 {
margin-bottom: 0;
padding: 0 0 20px 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: normal;
text-transform: uppercase;
color: #000;
text-align: left;
font-size: var(--fs-large-title);
}
.themeListWrapper .imageLayer,
.themeListWrapper .gradientOverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
background: transparent no-repeat center/cover;
}
.themeListWrapper .gradientOverlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
}
.themeListWrapper .imageLayer.large {
display: none;
}
.themeListWrapper .thumb {
display: block;
position: relative;
}
.themeListWrapper .thumb img {
width: 100%;
}
.themeListWrapper .thumb img.large {
display: none;
}
.themeListWrapper .grid-root {
display: flex;
flex-wrap: wrap;
}
.themeListWrapper .grid-root > * {
width: 360px;
margin: 0 5px 15px 5px;
}
.themeListWrapper .grid-root.compact > * {
width: 210px;
}
@supports (display: grid) {
.themeListWrapper .grid-root {
display: grid;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-template-columns: 1fr 1fr 1fr;
}
.themeListWrapper .grid-root > * {
width: auto;
margin: 0;
}
@media (max-width: 991px) {
.themeListWrapper .grid-root {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.themeListWrapper .grid-root {
grid-template-columns: 1fr;
}
}
}
@supports (display: grid) {
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) {
grid-column-end: span 3;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) .imageLayer,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) .thumb img {
display: none;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) .thumb img.large {
display: block;
}
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child {
grid-column-end: span 3;
}
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .imageLayer,
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .thumb img {
display: none;
}
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .thumb img.large {
display: block;
}
@media (max-width: 991px) {
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n), .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child {
grid-column-end: auto;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) .imageLayer,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) .thumb img, .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .imageLayer,
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .thumb img {
display: block;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(4n) .thumb img.large, .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .thumb img.large {
display: none;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(3n) {
grid-column-end: span 2;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(3n) .imageLayer,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(3n) .thumb img {
display: none;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(3n) .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(3n) .thumb img.large {
display: block;
}
}
@media (max-width: 767px) {
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd),
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even), .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child {
grid-column-end: auto;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd) .imageLayer,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd) .thumb img,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even) .imageLayer,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even) .thumb img, .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .imageLayer,
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .thumb img {
display: none;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd) .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd) .thumb img.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even) .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even) .thumb img.large, .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .thumb img.large {
display: block;
}
}
@media (max-width: 479px) {
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd),
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even), .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child {
grid-column-end: auto;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd) .imageLayer,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd) .thumb img,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even) .imageLayer,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even) .thumb img, .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .imageLayer,
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .thumb img {
display: block;
}
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd) .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(odd) .thumb img.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even) .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root > *:nth-child(even) .thumb img.large, .themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .imageLayer.large,
.themeListWrapper:not(.size-small) .grid-root[data-item-count="5"] > *:last-child .thumb img.large {
display: none;
}
}
}
@supports (display: grid) {
@media (min-width: 992px) {
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(4n) {
display: flex;
min-height: 0;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(4n) .thumb img {
display: block;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(4n) .thumb img.large {
display: none;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(4n) > * {
width: 50%;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(4n) > *.thumb {
order: 1;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(4n) > *.desc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(3n) {
display: flex;
min-height: 0;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(3n) .thumb img {
display: block;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(3n) .thumb img.large {
display: none;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(3n) > * {
width: 50%;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(3n) > *.thumb {
order: 1;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root > *:nth-child(3n) > *.desc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
}
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="1"] > *,
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="2"] > * {
display: flex;
min-height: 0;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="1"] > * .thumb img,
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="2"] > * .thumb img {
display: block;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="1"] > * .thumb img.large,
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="2"] > * .thumb img.large {
display: none;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="1"] > * > *,
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="2"] > * > * {
width: 50%;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="1"] > * > *.thumb,
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="2"] > * > *.thumb {
order: 1;
}
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="1"] > * > *.desc,
.themeListWrapper.variant-flat.size-fiftyfifty .grid-root[data-item-count="2"] > * > *.desc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.themeListWrapper .grid-root[data-item-count="1"],
.themeListWrapper .grid-root[data-item-count="2"] {
display: block;
}
.themeListWrapper .grid-root[data-item-count="1"] > * .imageLayer,
.themeListWrapper .grid-root[data-item-count="1"] > * .thumb img,
.themeListWrapper .grid-root[data-item-count="2"] > * .imageLayer,
.themeListWrapper .grid-root[data-item-count="2"] > * .thumb img {
display: none;
}
.themeListWrapper .grid-root[data-item-count="1"] > * .imageLayer.large,
.themeListWrapper .grid-root[data-item-count="1"] > * .thumb img.large,
.themeListWrapper .grid-root[data-item-count="2"] > * .imageLayer.large,
.themeListWrapper .grid-root[data-item-count="2"] > * .thumb img.large {
display: block;
}
.themeListWrapper .grid-root[data-item-count="1"] > * + *,
.themeListWrapper .grid-root[data-item-count="2"] > * + * {
margin-top: 30px;
}
.themeListWrapper:not(.variant-flat) .themeCard {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.themeListWrapper .themeCard {
min-height: 360px;
position: relative;
border-radius: 0px;
background: #F6F6F6;
color: #000;
box-shadow: none;
transition: box-shadow 0.2s ease;
overflow: hidden;
}
@media (max-width: 1199px) {
.themeListWrapper .themeCard {
min-height: 293px;
}
}
.themeListWrapper .themeCard:hover {
color: rgb(139.5, 139.5, 139.5);
}
.themeListWrapper .themeCard:hover,
.themeListWrapper .themeCard:hover a {
text-decoration: none;
}
.themeListWrapper .themeCard:hover .desc h3 {
text-decoration: none;
}
.themeListWrapper .themeCard .desc {
position: relative;
padding: 30px;
text-align: left;
}
.themeListWrapper .themeCard .desc,
.themeListWrapper .themeCard .desc a {
color: inherit;
}
.themeListWrapper .themeCard h3 {
margin: 0;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.15;
text-decoration: none;
text-transform: uppercase;
font-size: var(--fs-large-title);
}
.themeListWrapper .themeCard p {
margin: 10px 0 0 0;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-decoration: underline;
text-transform: none;
font-size: var(--fs-small);
}
@media (min-width: 1200px) {
.videoWrapper.variant-compact .container > * {
width: 66.66666667%;
}
}
@media (min-width: 1200px) {
.videoWrapper.variant-compact:not(.align-left) .container > * {
margin-left: 16.66666667%;
}
}
/* ----------------------------------------------------------------
Font sizes
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Font Families
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Other Typography
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors (don't forget the part BGs in the CMS)
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Colors
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Shadows
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Cards
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Media Credits
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Card Animations
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Radius
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Ordertimer
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Breakpoints
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Spacing units
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Letter Spacing
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Bold.otf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-BoldItalic.otf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Heavy.otf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-HeavyItalic.otf");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Italic.otf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Light.otf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-LightItalic.otf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Regular.otf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-Thin.otf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "FSELLIOT";
src: url("/fonts/FSElliot-ThinItalic.otf");
font-weight: 200;
font-style: italic;
}
/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Buttons
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Header dimensions & other defaults
-----------------------------------------------------------------*/
.welcomeHomeWrapper .content {
display: flex;
align-items: center;
padding: 0 15px;
background: transparent;
}
.welcomeHomeWrapper .content .icon {
margin-right: 15px;
align-self: flex-start;
}
.welcomeHomeWrapper .content .icon, .welcomeHomeWrapper .content .icon:link, .welcomeHomeWrapper .content .icon:hover, .welcomeHomeWrapper .content .icon:active {
text-decoration: none;
color: #FFF;
}
.welcomeHomeWrapper .content .icon svg {
width: 52px;
height: 52px;
}
.welcomeHomeWrapper .content .message {
font-family: "FSELLIOT", sans-serif;
font-weight: bold;
line-height: 0.8;
text-transform: none;
color: #FFF;
flex: 1;
font-size: var(--fs-large-title);
}
.welcomeHomeWrapper .content .message a:not(.btn), .welcomeHomeWrapper .content .message a:not(.btn):link, .welcomeHomeWrapper .content .message a:not(.btn):hover, .welcomeHomeWrapper .content .message a:not(.btn):active {
text-decoration: none;
color: inherit;
}
.welcomeHomeWrapper .content .status {
margin-top: 10px;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: 1;
text-transform: uppercase;
color: #FFF;
font-size: var(--fs-normal);
}
.welcomeHomeWrapper .content .link {
text-align: right;
font-family: "FSELLIOT", sans-serif;
font-weight: normal;
line-height: normal;
text-decoration: none;
text-transform: none;
color: #FFF;
font-size: var(--fs-normal);
}
.welcomeHomeWrapper .content .link > * {
margin: 0;
}
@media (max-width: 768px) {
.welcomeHomeWrapper .content .link {
display: none;
}
}
.welcomeHomeWrapper .content .link a, .welcomeHomeWrapper .content .link a:link {
color: inherit;
}
.welcomeHomeWrapper .content .link a:hover {
text-decoration: underline;
color: #000;
}
.welcomeHomeWrapper .content .link a.btn {
display: inline-block;
padding: 12px 15px;
border: none;
text-transform: uppercase;
background: #ee1b2e;
color: #FFF;
transition: all 0.2s ease-in-out;
font-size: var(--fs-normal);
}
.welcomeHomeWrapper .content .link a.btn:hover {
border: none;
background: #D11021;
color: #FFF;
transition: all 0.1s ease-in-out;
}
.welcomeHomeWrapper .content--link-left {
flex-wrap: wrap;
}
.welcomeHomeWrapper .content--link-left .link {
flex-basis: 100%;
text-align: left;
margin-top: 10px;
}
@media (max-width: 768px) {
.welcomeHomeWrapper .content--show-link-mobile {
flex-wrap: wrap;
}
.welcomeHomeWrapper .content--show-link-mobile .link {
display: block;
flex-basis: 100%;
text-align: left;
margin-top: 10px;
}
}
.welcomeHomeWrapper .balance,
.welcomeHomeWrapper .timeslot {
display: inline-flex;
align-items: center;
margin: 0;
padding: 10px;
border-radius: none;
line-height: 1;
background: #3469CB;
color: #FFF;
font-size: var(--fs-normal);
}
@media (max-width: 480px) {
.welcomeHomeWrapper .balance,
.welcomeHomeWrapper .timeslot {
display: flex;
}
}
.welcomeHomeWrapper .balance .icon,
.welcomeHomeWrapper .timeslot .icon {
margin: 0 10px 0 0;
font-size: 18px;
}
.welcomeHomeWrapper .balance {
margin: 0;
padding: 10px;
background: #3469CB;
color: #FFF;
font-size: var(--fs-normal);
}
.welcomeHomeWrapper .balance .peppered-icon {
margin: 0 10px 0 0;
font-size: 18px;
}
.btn {
min-width: auto;
padding: 12px 15px;
border: none;
border-radius: 0px;
font-family: "FSELLIOT", sans-serif;
font-weight: 900;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background: transparent;
transition: all 0.2s ease-in-out;
font-size: var(--fs-normal);
}
.btn:hover {
text-decoration: none;
transition: all 0.1s ease-in-out;
}
.btn.active, .btn:active {
box-shadow: none;
}
.btn.btn-default {
border: none;
background: #EBECEC;
color: #ee1b2e;
box-shadow: none;
}
.btn.btn-active {
border: none;
background: #ee1b2e;
color: #FFF;
box-shadow: none;
}
.btn.btn-default:hover, .btn.btn-active:hover {
border: none;
background: #D11021;
color: #FFF;
box-shadow: none;
}
.btn.btn-default:active, .btn.btn-active:active {
box-shadow: none;
}
.btn.btn-disabled, .btn:disabled, .btn[disabled] {
border: none !important;
background: #F6F6F6 !important;
color: #D8D8D8 !important;
box-shadow: none;
cursor: default;
opacity: 1;
}
.btn.btn-unavailable {
border: none !important;
background: #F6F6F6 !important;
color: #D8D8D8 !important;
box-shadow: none !important;
opacity: 1;
}
.btn.btn-clean {
display: inline;
width: auto;
padding: 0;
padding: 0;
border: 0;
background: none;
text-align: left;
}
.btn.btn-clean:active {
box-shadow: none;
}
.btn .label {
all: unset;
}
.btn .peppered-icon {
display: none;
}
.peppered-icon {
display: inline-flex;
align-items: center;
}
.peppered-icon .icon-label {
margin-left: 1ex;
line-height: 1;
}
.peppered-icon svg {
display: block;
}
.peppered-icon svg path {
fill: currentcolor;
}
.peppered-icon.icon-play {
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}
.peppered-icon.icon-play svg {
width: 1em;
height: 1em;
}
.peppered-icon.icon-play svg .triangle {
fill: #FFF;
}
.peppered-icon.icon-play svg .circle {
fill-rule: evenodd;
}
.close-cross {
position: relative;
}
.close-cross .icon {
display: block;
width: 20px;
height: 20px;
position: relative;
}
.close-cross .bar {
display: block;
width: 20px;
height: 3px;
position: absolute;
top: 8px;
z-index: 1;
border-radius: 3px;
background: currentcolor;
}
.close-cross .bar:first-child {
transform: rotate(45deg);
}
.close-cross .bar:last-child {
transform: rotate(-45deg);
}
.close-cross .bar:not(:first-child):not(:last-child) {
transform: scale(0);
}
.msg {
position: relative;
margin: 30px 0;
padding: 0 0 0 30px;
line-height: 20px;
}
.msg .fa,
.msg .peppered-icon {
position: absolute;
left: 0;
margin-right: 5px;
}
.msg .btn {
width: auto;
margin-top: 30px;
}
.msg p {
display: inline;
}
.msg.box {
max-width: 40rem;
position: relative;
margin: 0 auto 30px auto;
padding: 15px 30px 15px 40px;
border: 1px solid #0AA332;
border-radius: 0px;
line-height: 20px;
background: #FFF;
color: #000;
}
.msg.box.error {
border-color: #ee1b2e;
}
.msg.box.warning {
border-color: #F0B53E;
}
.msg.box .fa,
.msg.box .peppered-icon {
position: absolute;
left: 10px;
margin: 0;
}
.msg .notice .fa,
.msg .notice .peppered-icon,
.msg .success .fa,
.msg .success .peppered-icon {
color: #0AA332;
}
.msg .warning .fa,
.msg .warning .peppered-icon {
color: #F0B53E;
}
.msg .error .fa,
.msg .error .peppered-icon {
color: #ee1b2e;
}
/* ----------------------------------------------------------------
Quotes & Blockquotes
-----------------------------------------------------------------*/
blockquote p {
margin-bottom: 15px;
}
blockquote.pull-left {
max-width: 300px;
margin: 5px 20px 10px 0;
padding-right: 0;
}
blockquote.pull-right {
max-width: 300px;
margin: 5px 0 10px 20px;
padding-left: 0;
}
.quote {
position: relative;
border: none !important;
}
.quote p {
position: relative;
}
.quote:before {
content: "\e7ad";
width: 48px;
height: 48px;
position: absolute;
top: 0;
left: 0;
font-family: "font-icons", sans-serif;
font-weight: normal;
font-style: normal;
line-height: 48px;
color: #EEE;
speak: none;
font-variant: normal;
font-size: 42px;
}
.quote.blockquote-reverse:before {
content: "\e7ae";
right: 0;
left: auto;
}
.spinner {
display: flex;
justify-content: center;
width: 50px;
height: 40px;
margin: 30px auto;
font-size: 10px;
text-align: center;
}
.spinner > div {
width: 6px;
height: 100%;
margin: 0 1px;
background-color: currentcolor;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
}
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
/* ----------------------------------------------------------------
Bootstrap Specific
-----------------------------------------------------------------*/
label.radio,
label.checkbox {
padding-left: 20px;
}
/* ----------------------------------------------------------------
Google Recaptcha v2
-----------------------------------------------------------------*/
.g-recaptcha-rendered ~ button {
margin-top: 15px;
}
.modal .grecaptcha-badge {
display: none !important;
}
/* ----------------------------------------------------------------
Google Recaptcha v3
https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed
-----------------------------------------------------------------*/
.grecaptcha-badge {
visibility: hidden;
}
.grecaptcha-branding {
margin-top: 30px;
font-size: 0.8em;
color: #999;
}
.grecaptcha-branding a,
.grecaptcha-branding a:link,
.grecaptcha-branding a:visited {
text-decoration: underline;
color: inherit;
}
.grecaptcha-branding a:hover,
.grecaptcha-branding a:active {
color: #000;
}
@keyframes fade-slide-in {
0% {
transform: translateY(-30px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes FlashInOut {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes hero-zoom {
0% {
transform: scale(1.2);
}
100% {
transform: none;
}
}
@keyframes hero-twist {
0% {
transform: scale(1.2) rotate(3deg);
}
100% {
transform: none;
}
}
@keyframes hero-slide {
0% {
transform: scale(1.2) translateY(-10%);
}
100% {
transform: none;
}
}
@keyframes hero-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hero-saturate {
0% {
filter: grayscale(100%);
}
100% {
filter: none;
}
}
@keyframes hero-desaturate {
0% {
filter: grayscale(0%);
}
100% {
filter: grayscale(1000%);
}
}
@keyframes modal-slide-in {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media screen and (max-width: 768px) {
.container-fluid {
padding-right: 0;
padding-left: 0;
}
}
.container-fluid .container {
max-width: 100%;
}
@media (max-width: 479px) {
.container {
box-sizing: border-box;
width: 100%;
}
}
.acceptance-container {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.receiver-row {
margin-top: 10px;
}
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.screenreader {
width: 1px;
height: 1px;
position: absolute;
top: -999px;
left: -999px;
overflow: hidden;
}
.newsListWrapper .newsletter .btn {
align-self: flex-start;
}
.headerShowWrapper {
text-align: center;
}
.collapsed-heading summary .inner .peppered-icon,
.richtext details.mce-accordion summary .peppered-icon {
color: #ee1b2e;
}
.desc1Wrapper .desc1 p,
.desc1Wrapper .desc1 .richtext {
font-weight: 300;
}
.people-grid .desc,
.people-featured .desc,
a.people-card,
.infoHeaderWrapper.type-theme .partOf,
.themeListWrapper .themeCard .desc {
text-decoration: none !important;
}
.people-grid .desc:hover,
.people-featured .desc:hover,
a.people-card:hover,
.infoHeaderWrapper.type-theme .partOf:hover,
.themeListWrapper .themeCard .desc:hover {
text-decoration: none;
color: #000;
}
.people-grid .desc a,
.people-grid .desc h3,
.people-grid .desc p,
.people-featured .desc a,
.people-featured .desc h3,
.people-featured .desc p,
a.people-card a,
a.people-card h3,
a.people-card p,
.infoHeaderWrapper.type-theme .partOf a,
.infoHeaderWrapper.type-theme .partOf h3,
.infoHeaderWrapper.type-theme .partOf p,
.themeListWrapper .themeCard .desc a,
.themeListWrapper .themeCard .desc h3,
.themeListWrapper .themeCard .desc p {
text-decoration: none !important;
}
.people-grid .desc a:hover,
.people-grid .desc h3:hover,
.people-grid .desc p:hover,
.people-featured .desc a:hover,
.people-featured .desc h3:hover,
.people-featured .desc p:hover,
a.people-card a:hover,
a.people-card h3:hover,
a.people-card p:hover,
.infoHeaderWrapper.type-theme .partOf a:hover,
.infoHeaderWrapper.type-theme .partOf h3:hover,
.infoHeaderWrapper.type-theme .partOf p:hover,
.themeListWrapper .themeCard .desc a:hover,
.themeListWrapper .themeCard .desc h3:hover,
.themeListWrapper .themeCard .desc p:hover {
text-decoration: none;
color: #000 !important;
}
.people-grid .people-card.flat h3 {
font-size: var(--fs-normal);
font-weight: 700;
line-height: 1.5;
}
.people-grid .people-card.flat p {
font-size: var(--fs-normal);
font-weight: 300;
line-height: 1.5;
}
header .foldout-container > .inner > .inside {
flex-direction: column-reverse;
}
.detail.show #showHeaderImage.variant-showcase .inner .date {
order: -2;
}
.anchor-menu .inner {
padding: 0 15px 0 60px;
}
@media (max-width: 768px) {
.anchor-menu .inner {
padding: 0 15px;
}
}
header #header-event-box .description .subtitle {
display: none;
}
/* ----------------------------------------------------------------
CUSTOM CVG MY ACCOUNT
-----------------------------------------------------------------*/
header #service-menu [href="/spektrix/Secure/MyAccount"] {
text-indent: -9999px;
overflow: hidden;
height: 25px;
width: 25px;
background: transparent url("/images/avatar.svg") center/contain;
}
header #service-menu [href="/spektrix/Secure/MyAccount"]:hover {
background: transparent url("/images/avatar_hover.svg") center/contain;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled):not(.menu-opened) #service-menu [href="/spektrix/Secure/MyAccount"],
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar [href="/spektrix/Secure/MyAccount"],
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar [href="/spektrix/Secure/MyAccount"] {
text-indent: -9999px;
overflow: hidden;
height: 25px;
width: 25px;
background: transparent url("/images/avatar_showcase.svg") center/contain;
}
header.has-showcase:not(.suckerfish-on-top):not(.is-scrolled):not(.menu-opened) #service-menu [href="/spektrix/Secure/MyAccount"]:hover,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar [href="/spektrix/Secure/MyAccount"]:hover,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar [href="/spektrix/Secure/MyAccount"]:hover {
background: transparent url("/images/avatar_showcase_hover.svg") center/contain;
}
/* ----------------------------------------------------------------
TRANSPARENT HEADER SETTINGS
-----------------------------------------------------------------*/
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar a,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar .shortcuts-menu a,
.detail.show header:not(.is-scrolled):not(.menu-opened) #service-menu > *,
.detail.show header:not(.is-scrolled):not(.menu-opened) #service-menu a,
.detail.show header:not(.is-scrolled):not(.menu-opened) .shortcuts-menu a,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar a,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar .shortcuts-menu a,
.show.detail header:not(.is-scrolled):not(.menu-opened) #service-menu > *,
.show.detail header:not(.is-scrolled):not(.menu-opened) #service-menu a,
.show.detail header:not(.is-scrolled):not(.menu-opened) .shortcuts-menu a {
color: #FFF;
}
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar:link, .detail.show header:not(.is-scrolled):not(.menu-opened) #topbar:visited,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar a:link,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar a:visited,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar .shortcuts-menu a:link,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar .shortcuts-menu a:visited,
.detail.show header:not(.is-scrolled):not(.menu-opened) #service-menu > *:link,
.detail.show header:not(.is-scrolled):not(.menu-opened) #service-menu > *:visited,
.detail.show header:not(.is-scrolled):not(.menu-opened) #service-menu a:link,
.detail.show header:not(.is-scrolled):not(.menu-opened) #service-menu a:visited,
.detail.show header:not(.is-scrolled):not(.menu-opened) .shortcuts-menu a:link,
.detail.show header:not(.is-scrolled):not(.menu-opened) .shortcuts-menu a:visited,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar:link,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar:visited,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar a:link,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar a:visited,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar .shortcuts-menu a:link,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar .shortcuts-menu a:visited,
.show.detail header:not(.is-scrolled):not(.menu-opened) #service-menu > *:link,
.show.detail header:not(.is-scrolled):not(.menu-opened) #service-menu > *:visited,
.show.detail header:not(.is-scrolled):not(.menu-opened) #service-menu a:link,
.show.detail header:not(.is-scrolled):not(.menu-opened) #service-menu a:visited,
.show.detail header:not(.is-scrolled):not(.menu-opened) .shortcuts-menu a:link,
.show.detail header:not(.is-scrolled):not(.menu-opened) .shortcuts-menu a:visited {
color: #FFF;
}
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar:hover,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar a:hover,
.detail.show header:not(.is-scrolled):not(.menu-opened) #topbar .shortcuts-menu a:hover,
.detail.show header:not(.is-scrolled):not(.menu-opened) #service-menu > *:hover,
.detail.show header:not(.is-scrolled):not(.menu-opened) #service-menu a:hover,
.detail.show header:not(.is-scrolled):not(.menu-opened) .shortcuts-menu a:hover,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar:hover,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar a:hover,
.show.detail header:not(.is-scrolled):not(.menu-opened) #topbar .shortcuts-menu a:hover,
.show.detail header:not(.is-scrolled):not(.menu-opened) #service-menu > *:hover,
.show.detail header:not(.is-scrolled):not(.menu-opened) #service-menu a:hover,
.show.detail header:not(.is-scrolled):not(.menu-opened) .shortcuts-menu a:hover {
color: #D2D2D2;
}
header #search-box,
header.is-scrolled #topbar,
header.menu-opened #topbar,
header.menu-opened #fixed-box,
header.menu-opened #service-menu,
header.menu-opened .shortcuts-menu {
background: #FFF;
color: #3F3F3F;
}
header #search-box a:link,
header #search-box button,
header #search-box .hamburger,
header.is-scrolled #topbar a:link,
header.is-scrolled #topbar button,
header.is-scrolled #topbar .hamburger,
header.menu-opened #topbar a:link,
header.menu-opened #topbar button,
header.menu-opened #topbar .hamburger,
header.menu-opened #fixed-box a:link,
header.menu-opened #fixed-box button,
header.menu-opened #fixed-box .hamburger,
header.menu-opened #service-menu a:link,
header.menu-opened #service-menu button,
header.menu-opened #service-menu .hamburger,
header.menu-opened .shortcuts-menu a:link,
header.menu-opened .shortcuts-menu button,
header.menu-opened .shortcuts-menu .hamburger {
color: #3F3F3F !important;
}
header #search-box a:link:hover,
header #search-box button:hover,
header #search-box .hamburger:hover,
header.is-scrolled #topbar a:link:hover,
header.is-scrolled #topbar button:hover,
header.is-scrolled #topbar .hamburger:hover,
header.menu-opened #topbar a:link:hover,
header.menu-opened #topbar button:hover,
header.menu-opened #topbar .hamburger:hover,
header.menu-opened #fixed-box a:link:hover,
header.menu-opened #fixed-box button:hover,
header.menu-opened #fixed-box .hamburger:hover,
header.menu-opened #service-menu a:link:hover,
header.menu-opened #service-menu button:hover,
header.menu-opened #service-menu .hamburger:hover,
header.menu-opened .shortcuts-menu a:link:hover,
header.menu-opened .shortcuts-menu button:hover,
header.menu-opened .shortcuts-menu .hamburger:hover {
color: rgb(139.5, 139.5, 139.5) !important;
}
/* ----------------------------------------------------------------
LOGO SETTINGS
-----------------------------------------------------------------*/
#header-v2.has-showcase #topbar .brand img.showcase-logo,
#header-v2.has-showcase #topbar .brand img.mobile-showcase-logo {
height: 200px;
position: absolute;
top: 0px;
left: 0px;
}
@media (min-width: 768px) {
#header-v2 #topbar .brand img.sticky-logo,
#header-v2 #topbar .brand img {
height: 200px;
position: absolute;
top: 0px;
left: 0px;
}
header #header-event-box .inner .inside {
padding-left: 45px;
}
}
/*# sourceMappingURL=site-bundle.css.map */