@layer components { .ds-rich-text h1, .ds-rich-text h2, .ds-rich-text h3, .ds-rich-text h4, .ds-rich-text h5, .ds-rich-text h6 { margin: 0; } .ds-rich-text p { margin: 0; } .ds-rich-text a { color: currentColor; text-decoration: underline; } .ds-rich-text a:hover { text-decoration: none; } .ds-rich-text ul, .ds-rich-text ol { margin-left: -1ch; } .ds-rich-text ul li, .ds-rich-text ol li { margin-bottom: 0.5em; } .ds-rich-text ul { list-style: disc; margin-left: 3ch; } } .theme-eurojackpot { --color-black: rgb(0, 0, 0); --color-white: rgb(255, 255, 255); --color-white-opacity-0: rgba(255, 255, 255, 0); --color-white-opacity-100: rgba(255, 255, 255, 0.05); --color-white-opacity-200: rgba(255, 255, 255, 0.1); --color-white-opacity-300: rgba(255, 255, 255, 0.2); --color-white-opacity-400: rgba(255, 255, 255, 0.3); --color-white-opacity-500: rgba(255, 255, 255, 0.4); --color-white-opacity-600: rgba(255, 255, 255, 0.5); --color-white-opacity-700: rgba(255, 255, 255, 0.6); --color-white-opacity-800: rgba(255, 255, 255, 0.7); --color-white-opacity-900: rgba(255, 255, 255, 0.8); --color-white-opacity-1000: rgba(255, 255, 255, 0.9); --color-black-opacity-0: rgba(0, 0, 0, 0); --color-black-opacity-100: rgba(0, 0, 0, 0.05); --color-black-opacity-200: rgba(0, 0, 0, 0.1); --color-black-opacity-300: rgba(0, 0, 0, 0.2); --color-black-opacity-400: rgba(0, 0, 0, 0.3); --color-black-opacity-500: rgba(0, 0, 0, 0.4); --color-black-opacity-600: rgba(0, 0, 0, 0.5); --color-black-opacity-700: rgba(0, 0, 0, 0.6); --color-black-opacity-800: rgba(0, 0, 0, 0.7); --color-black-opacity-900: rgba(0, 0, 0, 0.8); --color-black-opacity-1000: rgba(0, 0, 0, 0.9); --color-neutral-100: rgb(242, 242, 242); --color-neutral-200: rgb(228, 228, 228); --color-neutral-300: rgb(213, 213, 213); --color-neutral-400: rgb(198, 198, 198); --color-neutral-500: rgb(180, 180, 180); --color-neutral-600: rgb(161, 161, 161); --color-neutral-700: rgb(140, 140, 140); --color-neutral-800: rgb(114, 114, 114); --color-neutral-900: rgb(81, 81, 81); --color-neutral-1000: rgb(57, 57, 57); --color-primary-100: rgb(250, 237, 214); --color-primary-200: rgb(248, 227, 194); --color-primary-300: rgb(246, 218, 173); --color-primary-400: rgb(241, 200, 132); --color-primary-500: rgb(237, 181, 91); --color-primary-600: rgb(232, 163, 50); --color-primary-700: rgb(186, 130, 40); --color-primary-800: rgb(139, 98, 30); --color-primary-900: rgb(93, 65, 20); --color-primary-1000: rgb(70, 49, 15); --color-secondary-100: rgb(164, 171, 171); --color-secondary-200: rgb(149, 157, 157); --color-secondary-300: rgb(134, 142, 142); --color-secondary-400: rgb(105, 112, 112); --color-secondary-500: rgb(75, 83, 83); --color-secondary-600: rgb(46, 53, 53); --color-secondary-700: rgb(37, 42, 42); --color-secondary-800: rgb(28, 32, 32); --color-secondary-900: rgb(18, 21, 21); --color-secondary-1000: rgb(14, 16, 16); --color-cta: rgb(253, 185, 0); --color-cta-hover: rgb(240, 175, 0); --color-attention: rgb(229, 23, 23); --font-family-brand: Open Sans; --font-family-text: Open Sans; --font-weight-brand-100: 800; --font-weight-100: 400; --font-weight-200: 600; --font-weight-300: 700; --font-weight-400: 800; --text-size-text-xsmall: 1.2rem; --text-size-text-small: 1.4rem; --text-size-text-medium: 1.6rem; --text-size-text-large: 1.8rem; --text-size-text-xlarge: 2rem; --text-size-text-xxlarge: 2.4rem; --text-size-headline-xxsmall: 2.4rem; --text-size-headline-xsmall: 2.8rem; --text-size-headline-small: 3.2rem; --text-size-headline-medium: 4.2rem; --text-size-headline-large: 5.2rem; --text-size-headline-xlarge: 6rem; --text-size-headline-xxlarge: 7.2rem; --text-size-headline-xxxlarge: 8rem; --leading-text-xsmall: 1.8rem; --leading-text-small: 2rem; --leading-text-medium: 2.2rem; --leading-text-large: 2.4rem; --leading-text-xlarge: 2.6rem; --leading-text-xxlarge: 3rem; --leading-headline-xxsmall: 2.6rem; --leading-headline-xsmall: 3rem; --leading-headline-small: 3.4rem; --leading-headline-medium: 4.4rem; --leading-headline-large: 5.4rem; --leading-headline-xlarge: 6.2rem; --leading-headline-xxlarge: 7.4rem; --leading-headline-xxxlarge: 8.2rem; /* ===== COMPONENTS ===== */ /* text */ /* paragraphs */ --font-family-paragraph: var(--font-family-text); --text-color-paragraph: var(--color-neutral-1000); --text-color-paragraph-inverted: var(--color-white); /* headlines */ --font-family-headlines: var(--font-family-brand); --text-color-headlines: var(--color-black); --text-color-headlines-inverted: var(--color-white); /* links */ --font-family-link: var(--font-family-text); --text-color-link: var(--color-secondary-600); --text-color-link-light: var(--color-white); /* buttons */ /* base */ --radius-button: var(--radius-9999); --border-width-width-button: 0.1rem; --font-family-button-small: var(--font-family-brand); --font-weight-button-small: var(--font-weight-400); --text-size-button-small: var(--text-size-text-xsmall); --leading-button-small: var(--leading-text-small); --letter-spacing-button-small: var(--spacing-1); --spacing-button-small-icon: var(--spacing-12); --spacing-button-small-x: var(--spacing-18); --spacing-button-small-y: var(--spacing-0); --height-button-small: 4.2rem; --font-family-button-medium: var(--font-family-text); --font-weight-button-medium: var(--font-weight-400); --text-size-button-medium: var(--text-size-text-small); --leading-button-medium: var(--leading-text-medium); --letter-spacing-button-medium: var(--spacing-1); --spacing-button-medium-icon: var(--spacing-14); --spacing-button-medium-x: var(--spacing-20); --spacing-button-medium-y: var(--spacing-0); --height-button-medium: 5.6rem; --font-family-button-large: var(--font-family-text); --font-weight-button-large: var(--font-weight-400); --text-size-button-large: var(--text-size-text-medium); --leading-button-large: var(--leading-text-large); --letter-spacing-button-large: var(--spacing-1); --spacing-button-large-icon: var(--spacing-18); --spacing-button-large-x: var(--spacing-24); --spacing-button-large-y: var(--spacing-0); --height-button-large: 6.2rem; /* primary */ --background-color-button-primary: var(--color-cta); --background-color-button-primary-inverted: var(--color-white); --background-color-button-primary-hover: var(--color-cta-hover); --background-color-button-primary-hover-inverted: var(--color-white-opacity-900); --background-color-button-primary-focused: var(--color-cta); --background-color-button-primary-focused-inverted: var(--color-white); --background-color-button-primary-disabled: var(--color-black-opacity-200); --background-color-button-primary-disabled-inverted: var(--color-white-opacity-400); --text-color-button-primary: var(--color-black); --text-color-button-primary-inverted: var(--color-black); --text-color-button-primary-disabled: var(--color-black-opacity-300); --text-color-button-primary-disabled-inverted: var(--color-black-opacity-700); --border-color-button-primary: var(--color-cta); --border-color-button-primary-inverted: var(--color-white); --border-color-button-primary-hover: var(--color-cta-hover); --border-color-button-primary-hover-inverted: var(--color-white-opacity-0); --border-color-button-primary-focused: var(--color-cta); --border-color-button-primary-focused-inverted: var(--color-white-opacity-0); --border-color-button-primary-disabled: var(--color-white-opacity-0); --border-color-button-primary-disabled-inverted: var(--color-white-opacity-0); /* secondary */ --background-color-button-secondary: var(--color-white-opacity-0); --background-color-button-secondary-inverted: var(--color-white-opacity-0); --background-color-button-secondary-hover: var(--color-white-opacity-0); --background-color-button-secondary-hover-inverted: var(--color-white-opacity-0); --background-color-button-secondary-focused: var(--color-white-opacity-0); --background-color-button-secondary-focused-inverted: var(--color-white-opacity-0); --background-color-button-secondary-disabled: var(--color-white-opacity-0); --background-color-button-secondary-disabled-inverted: var(--color-white-opacity-0); --text-color-button-secondary: var(--color-black); --text-color-button-secondary-inverted: var(--color-white); --text-color-button-secondary-disabled: var(--color-black-opacity-300); --text-color-button-secondary-disabled-inverted: var(--color-white-opacity-500); --border-color-button-secondary: var(--color-black-opacity-300); --border-color-button-secondary-inverted: var(--color-white-opacity-500); --border-color-button-secondary-hover: var(--color-black-opacity-500); --border-color-button-secondary-hover-inverted: var(--color-white-opacity-800); --border-color-button-secondary-focused: var(--color-black-opacity-300); --border-color-button-secondary-focused-inverted: var(--color-white-opacity-500); --border-color-button-secondary-disabled: var(--color-black-opacity-200); --border-color-button-secondary-disabled-inverted: var(--color-white-opacity-400); /* tertiary */ --background-color-button-tertiary: var(--color-secondary-600); --background-color-button-tertiary-inverted: var(--color-white); --background-color-button-tertiary-hover: var(--color-secondary-800); --background-color-button-tertiary-hover-inverted: var(--color-white-opacity-800); --background-color-button-tertiary-focused: var(--color-secondary-600); --background-color-button-tertiary-focused-inverted: var(--color-white); --background-color-button-tertiary-disabled: var(--color-black-opacity-200); --background-color-button-tertiary-disabled-inverted: var(--color-white-opacity-400); --text-color-button-tertiary: var(--color-white); --text-color-button-tertiary-inverted: var(--color-secondary-600); --text-color-button-tertiary-disabled: var(--color-black-opacity-300); --text-color-button-tertiary-disabled-inverted: var(--color-black-opacity-700); --border-color-button-tertiary: var(--color-black-opacity-0); --border-color-button-tertiary-inverted: var(--color-white-opacity-0); --border-color-button-tertiary-hover: var(--color-black-opacity-0); --border-color-button-tertiary-hover-inverted: var(--color-white-opacity-0); --border-color-button-tertiary-focused: var(--color-black-opacity-0); --border-color-button-tertiary-focused-inverted: var(--color-white-opacity-0); --border-color-button-tertiary-disabled: var(--color-black-opacity-0); --border-color-button-tertiary-disabled-inverted: var(--color-white-opacity-0); /* form-elements */ /* input-select */ --text-size-input-select-label-small: var(--text-size-text-xsmall); --leading-input-select-label-small: var(--leading-text-xsmall); --text-size-input-select-label-large: var(--text-size-text-medium); --leading-input-select-label-large: var(--leading-text-medium); --text-size-input-select-input: var(--text-size-text-medium); --leading-input-select-input: var(--leading-text-medium); --font-family-input-select: var(--font-family-text); --text-size-input-select-helper: var(--text-size-text-xsmall); --leading-input-select-helper: var(--leading-text-xsmall); --font-weight-input-select: var(--font-weight-100); --text-color-input-select-default-label: var(--color-neutral-800); --text-color-input-select-disabled-label: var(--color-neutral-500); --text-color-input-select-default-text: var(--color-neutral-1000); --text-color-input-select-disabled-text: var(--color-neutral-500); --text-color-input-select-error-text: var(--color-attention); --background-color-input-select: var(--color-white); --border-color-input-select: var(--color-black-opacity-400); --border-color-input-select-hover: var(--color-black-opacity-600); --border-color-input-select-focused: var(--color-secondary-600); --border-color-input-select-disabled: var(--color-black-opacity-200); --border-color-input-select-error: var(--color-attention); --border-width-width-input-select: 0.1rem; --border-width-width-input-select-hover: 0.1rem; --border-width-width-input-select-focused: 0.2rem; --border-width-width-input-select-disabled: 0.1rem; --border-width-width-input-select-error: 0.1rem; --radius-input-select: var(--radius-4); --color-input-select-icon: var(--color-neutral-900); --color-input-select-icon-disabled: var(--color-neutral-400); --spacing-input-select-medium-icon: var(--spacing-10); --spacing-input-select-medium-y: var(--spacing-0); --spacing-input-select-medium-x: var(--spacing-14); --height-input-select-medium: 5.2rem; /* text-area */ --font-family-text-area: var(--font-family-text); --font-weight-text-area: var(--font-weight-100); --text-size-text-area-label-small: var(--text-size-text-xsmall); --leading-text-area-label-small: var(--leading-text-xsmall); --text-size-text-area-label-large: var(--text-size-text-medium); --leading-text-area-label-large: var(--leading-text-medium); --text-size-text-area-input: var(--text-size-text-medium); --leading-text-area-input: var(--leading-text-medium); --text-size-text-area-helper: var(--text-size-text-xsmall); --leading-text-area-helper: var(--leading-text-xsmall); --text-color-text-area-default-label: var(--color-neutral-800); --text-color-text-area-disabled-label: var(--color-neutral-500); --text-color-text-area-error-label: var(--color-neutral-800); --text-color-text-area-default-text: var(--color-neutral-1000); --text-color-text-area-disabled-text: var(--color-neutral-500); --text-color-text-area-error-text: var(--color-attention); --background-color-text-area: var(--color-white); --border-color-text-area: var(--color-black-opacity-400); --border-color-text-area-hover: var(--color-black-opacity-600); --border-color-text-area-focused: var(--color-secondary-600); --border-color-text-area-disabled: var(--color-black-opacity-200); --border-color-text-area-error: var(--color-attention); --border-width-width-text-area: 0.1rem; --border-width-width-text-area-hover: 0.1rem; --border-width-width-text-area-focused: 0.2rem; --border-width-width-text-area-disabled: 0.1rem; --border-width-width-text-area-error: 0.1rem; --radius-text-area: var(--radius-4); --color-text-area-icon: var(--color-neutral-900); --color-text-area-icon-disabled: var(--color-neutral-400); --spacing-text-area-medium-icon: var(--spacing-0); --spacing-text-area-medium-top: var(--spacing-6); --spacing-text-area-medium-x: var(--spacing-14); /* checkbox */ --background-color-checkbox: var(--color-white); --background-color-checkbox-focused: var(--color-secondary-600); --font-family-checkbox: var(--font-family-text); --font-weight-checkbox: var(--font-weight-100); --text-size-checkbox: var(--text-size-text-small); --leading-checkbox: var(--leading-text-small); --text-color-checkbox: var(--color-neutral-1000); --text-color-checkbox-disabled: var(--color-neutral-600); --text-color-checkbox-error: var(--color-attention); --border-width-width-checkbox: 0.1rem; --radius-checkbox: 0.4rem; --border-color-checkbox: var(--color-black-opacity-400); --border-color-checkbox-hover: var(--color-black-opacity-600); --border-color-checkbox-focused: var(--color-secondary-600); --border-color-checkbox-disabled: var(--color-black-opacity-200); --border-color-checkbox-error: var(--color-attention); --color-checkbox-icon: var(--color-neutral-900); --color-checkbox-icon-active: var(--color-white); --color-checkbox-icon-disabled: var(--color-neutral-300); /* radiobutton */ --background-color-radiobutton: var(--color-white); --background-color-radiobutton-focused: var(--color-secondary-600); --font-family-radiobutton: var(--font-family-text); --font-weight-radiobutton: var(--font-weight-100); --text-size-radiobutton: var(--text-size-text-small); --leading-radiobutton: var(--leading-text-small); --text-color-radiobutton: var(--color-neutral-1000); --text-color-radiobutton-disabled: var(--color-neutral-600); --text-color-radiobutton-error: var(--color-attention); --border-width-width-radiobutton: 0.1rem; --border-color-radiobutton: var(--color-black-opacity-400); --border-color-radiobutton-hover: var(--color-black-opacity-600); --border-color-radiobutton-focused: var(--color-secondary-600); --border-color-radiobutton-disabled: var(--color-black-opacity-200); --border-color-radiobutton-error: var(--color-attention); --color-radiobutton-icon: var(--color-neutral-900); --color-radiobutton-icon-active: var(--color-white); --color-radiobutton-icon-disabled: var(--color-neutral-300); /* ===== MODULES ===== */ /* footer */ --background-color-footer: var(--color-primary-600); /* step */ /* max-width */ --max-width-step-desktop: 112rem; --max-width-step-tablet: 65.2rem; --max-width-step-mobile: 76.7rem; /* card */ --radius-step-card: var(--radius-8); --border-width-width-step-card: var(--spacing-0); --border-color-step-card: var(--color-white-opacity-0); --spacing-step-card-top: var(--spacing-56); --spacing-step-card-bottom: var(--spacing-40); --spacing-step-card-left: var(--spacing-32); --spacing-step-card-right: var(--spacing-32); --spacing-step-card-content-top: var(--spacing-12); --spacing-step-card-between-desktop: var(--spacing-20); --spacing-step-card-between-tablet: var(--spacing-64); --spacing-step-card-between-mobile: var(--spacing-56); --text-color-step-card: var(--color-neutral-1000); --text-color-step-card-headline: var(--color-black); --background-color-step-card: var(--color-white); /* number */ --radius-step-number: var(--radius-9999); --border-width-width-step-number: var(--spacing-0); --border-color-step-number: var(--color-white-opacity-0); --spacing-step-number-top: var(--spacing-0); --spacing-step-number-bottom: var(--spacing-0); --text-color-step-number: var(--color-white); --background-color-step-number: var(--color-primary-600); /* inner-section */ --radius-inner-section: 0rem; /* content */ --background-color-content: #ffffff00; /* desktop */ --spacing-content-desktop-content: var(--spacing-36); --spacing-content-desktop-top-content: var(--spacing-20); --spacing-content-desktop-bottom-content: var(--spacing-18); --spacing-content-desktop-header: var(--spacing-6); --spacing-content-desktop-button: var(--spacing-12); --max-width-content-desktop: 112rem; /* tablet */ --spacing-content-tablet-content: var(--spacing-36); --spacing-content-tablet-top-content: var(--spacing-20); --spacing-content-tablet-bottom-content: var(--spacing-20); --spacing-content-tablet-header: var(--spacing-6); --spacing-content-tablet-button: var(--spacing-12); --max-width-content-tablet: 65rem; /* mobile */ --spacing-content-mobile-content: var(--spacing-36); --spacing-content-mobile-top-content: var(--spacing-16); --spacing-content-mobile-bottom-content: var(--spacing-20); --spacing-content-mobile-header: var(--spacing-6); --spacing-content-mobile-button: var(--spacing-12); /* navigation */ --background-color-navigation: var(--color-primary-600); --navigation-bottom-border: var(--color-primary-600); /* right-left */ --background-color-right-left: #ffffff00; /* radius */ --radius-right-left-image: 0rem; --radius-right-left-module: 0rem; /* desktop */ --spacing-right-left-desktop-right: 0rem; --spacing-right-left-desktop-left: 0rem; --spacing-right-left-desktop-top: 0rem; --spacing-right-left-desktop-bottom: 0rem; --spacing-right-left-desktop-gap-left: var(--spacing-20); --spacing-right-left-desktop-gap-right: var(--spacing-40); --spacing-right-left-desktop-content: var(--spacing-36); --spacing-right-left-desktop-top-content: var(--spacing-20); --spacing-right-left-desktop-bottom-content: var(--spacing-18); --spacing-right-left-desktop-header: var(--spacing-6); --spacing-right-left-desktop-button: var(--spacing-12); --max-width-right-left-desktop: 112rem; /* tablet */ --spacing-right-left-tablet-right: 0rem; --spacing-right-left-tablet-left: 0rem; --spacing-right-left-tablet-top: var(--spacing-40); --spacing-right-left-tablet-bottom: 0rem; --spacing-right-left-tablet-content: var(--spacing-36); --spacing-right-left-tablet-top-content: var(--spacing-20); --spacing-right-left-tablet-bottom-content: var(--spacing-20); --spacing-right-left-tablet-header: var(--spacing-6); --spacing-right-left-tablet-button: var(--spacing-12); --max-width-right-left-tablet: 65rem; /* mobile */ --spacing-right-left-mobile-right: 0rem; --spacing-right-left-mobile-left: 0rem; --spacing-right-left-mobile-top: var(--spacing-20); --spacing-right-left-mobile-bottom: 0rem; --spacing-right-left-mobile-content: var(--spacing-36); --spacing-right-left-mobile-top-content: var(--spacing-16); --spacing-right-left-mobile-bottom-content: var(--spacing-20); --spacing-right-left-mobile-header: var(--spacing-6); --spacing-right-left-mobile-button: var(--spacing-12); --max-width-right-left-mobile: 65rem; /* cards */ /* padding */ --spacing-card-right: var(--spacing-24); --spacing-card-left: var(--spacing-24); --spacing-card-top: var(--spacing-24); --spacing-card-bottom: var(--spacing-32); --spacing-card-content: var(--spacing-24); --spacing-card-top-content: var(--spacing-16); --spacing-card-bottom-content: var(--spacing-16); --spacing-card-header: var(--spacing-6); --spacing-card-button: var(--spacing-12); /* radius */ --radius-card-module: var(--radius-10); /* desktop */ --max-width-card-desktop: 112rem; /* tablet */ --max-width-card-tablet: 65rem; /* mobile */ --max-width-card-mobile: 76.7rem; /* legal */ /* radius */ --radius-legal-module: var(--radius-0); /* desktop */ --spacing-legal-desktop-content: var(--spacing-48); --spacing-legal-desktop-header: var(--spacing-6); --spacing-legal-desktop-padding-top: var(--spacing-56); --spacing-legal-desktop-padding-bottom: var(--spacing-56); --spacing-legal-desktop-padding-left: var(--spacing-56); --spacing-legal-desktop-padding-right: var(--spacing-56); --max-width-legal-desktop: 112rem; /* tablet */ --spacing-legal-tablet-content: var(--spacing-36); --spacing-legal-tablet-header: var(--spacing-6); --spacing-legal-tablet-padding-top: var(--spacing-56); --spacing-legal-tablet-padding-bottom: var(--spacing-56); --spacing-legal-tablet-padding-left: var(--spacing-56); --spacing-legal-tablet-padding-right: var(--spacing-56); --max-width-legal-tablet: 65rem; /* mobile */ --spacing-legal-mobile-content: var(--spacing-36); --spacing-legal-mobile-header: var(--spacing-6); --spacing-legal-mobile-padding-top: var(--spacing-28); --spacing-legal-mobile-padding-bottom: var(--spacing-28); --spacing-legal-mobile-padding-left: var(--spacing-24); --spacing-legal-mobile-padding-right: var(--spacing-24); /* accordion */ /* border-color */ --border-color-accordion-dark: var(--color-black-opacity-0); --border-color-accordion-light: var(--color-white-opacity-0); --border-width-width-accordion: 0rem; /* margin */ --spacing-accordion-between: var(--spacing-8); /* font-color */ --text-color-accordion-dark: var(--color-black); --text-color-accordion-light: var(--color-white); /* background */ --background-color-accordion-dark: var(--color-black-opacity-100); --background-color-accordion-light: var(--color-white-opacity-200); --background-color-accordion-dark-icon: var(--color-black-opacity-100); --background-color-accordion-light-icon: var(--color-black-opacity-300); --background-color-accordion-dark-arrow: var(--color-black); --background-color-accordion-light-arrow: var(--color-white); /* padding */ --spacing-accordion-desktop-right: var(--spacing-16); --spacing-accordion-desktop-left: var(--spacing-28); --spacing-accordion-desktop-top: var(--spacing-14); --spacing-accordion-desktop-bottom: var(--spacing-14); --spacing-accordion-mobile-right: var(--spacing-12); --spacing-accordion-mobile-left: var(--spacing-20); --spacing-accordion-mobile-top: var(--spacing-10); --spacing-accordion-mobile-bottom: var(--spacing-10); /* radius */ --radius-accordion-module: 4rem; --radius-accordion-icon: var(--radius-9999); /* desktop */ --max-width-accordion-desktop: 112rem; /* tablet */ --max-width-accordion-tablet: 65rem; /* mobile */ --max-width-accordion-mobile: 76.7rem; } /** * Swiper 4.4.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2018 [object Object] * * Released under the MIT License * * Released on: October 30, 2018 */ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* IE10 Windows Phone 8 Fixes */ .swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: #007aff; } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #ffffff; } .swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, 0.25); } .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #ffffff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000000; } .swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, 0.25); } .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ''; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-coverflow .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 1200px; } /* =========================================== settings.colors ========================================= */ /* New theming colors (use these in future, convert old colors along the way) ========================================================================== */ /* Color variables used in AvalonComponents, Poker and Casino projects /* (Old theming colors, should be slowly removed) ========================================================================== */ /* Corporate colors ========================================================================== */ /* Poker colors ========================================================================== */ /* Casino colors ========================================================================== */ /* Bingo colors ========================================================================== */ /* Casino colors ========================================================================== */ /* Oddset colors ========================================================================== */ /* Virtuel colors ========================================================================== */ /* EuroJackpot colors ========================================================================== */ /* Set Color Variables ========================================================================== */ /* Components ========================================================================== */ /* =========================================== elements.anchor ========================================= */ .avalon-area a { text-decoration: none; } .avalon-area a:hover { text-decoration: none; } .avalon-area a:not([class]) { color: inherit; font-weight: 600; transition: 0.25s ease; text-decoration: underline; } .avalon-area a:not([class]):hover { text-decoration: underline; color: #feb700; } /* =========================================== elements.headings ========================================= */ .avalon-area h1, .avalon-area h2, .avalon-area h3, .avalon-area h4, .avalon-area h5 { margin-bottom: 2rem; margin-top: 0; text-transform: uppercase; overflow-wrap: break-word; } .region-avalon-bingo .avalon-area h1, .region-avalon-bingo .avalon-area h2, .region-avalon-bingo .avalon-area h3, .region-avalon-bingo .avalon-area h4, .region-avalon-bingo .avalon-area h5 { text-transform: none; } .avalon-area h1 { font-size: 3.4rem; line-height: 1; font-weight: 800; } @media screen and (min-width: 768px) { .avalon-area h1 { font-size: 5rem; } .region-avalon-bingo .avalon-area h1 { font-size: 4.6rem; letter-spacing: -0.01em; } } .avalon-area h2 { font-size: 2.8rem; line-height: 1.1; font-weight: 800; } @media screen and (min-width: 768px) { .avalon-area h2 { font-size: 3.2rem; } } .avalon-area h3 { font-size: 2.2rem; line-height: 1.2; font-weight: 600; } @media screen and (min-width: 768px) { .avalon-area h3 { font-size: 2.4rem; } } .avalon-area h4 { font-size: 1.6rem; line-height: 1.3; } @media screen and (min-width: 768px) { .avalon-area h4 { font-size: 1.8rem; } } .avalon-area h5 { font-size: 1.6rem; line-height: 1.3; } /* =========================================== elements.iframe ========================================= */ .avalon-area iframe { border: none; } /* =========================================== elements.lists ========================================= */ .avalon-area ul:not([class]), .avalon-area ol:not([class]) { margin-left: 0; padding: 0 0 0 4rem; } .avalon-area ul:not([class]) li, .avalon-area ol:not([class]) li { list-style-type: none; margin-bottom: 1rem; position: relative; } .avalon-area ul:not([class]) li:before, .avalon-area ol:not([class]) li:before { width: 2rem; position: absolute; left: -4rem; font-size: 2.4rem; color: white; text-align: right; font-weight: 900; direction: rtl; } .avalon-area ol:not([class]) { counter-reset: list; } .avalon-area ol:not([class]) > li { counter-increment: list; } .avalon-area ol:not([class]) > li:before { content: '.' counter(list); left: -3.5rem; top: -0.85rem; } .avalon-area ul:not([class]) li:before { content: "\2022"; top: 0; line-height: 0.95; font-family: serif; } /* =========================================== elements.paragraph ========================================= */ .avalon-area p:not([class]) { margin-top: 0; margin-bottom: 1em; } .avalon-area p:not([class]):last-child { margin-bottom: 0; } /* =========================================== elements.typography ========================================= */ .avalon-area { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1.6rem; color: black; line-height: 1.6; } .avalon-area strong { font-weight: bold; } .flip-clock { /* VARIABLES */ /* FUNCTIONS */ /* SIZES */ /* STYLES */ display: block; padding: 0.5rem 0.5rem 2.5rem; /* PLAY */ /* SHADOW */ /* DOWN */ /* NO FLIPPING */ } .flip-clock ul.flip { border-radius: 0.33333333rem; width: 6.5rem; height: 5rem; font-size: 3.5rem; line-height: 5rem; box-shadow: 0 0.11111111rem 0.16666667rem rgba(0, 0, 0, 0.7); } .flip-clock ul.flip:after { top: 5rem; font-size: 1.2rem; height: 2.64rem; line-height: 2.64rem; } .flip-clock.flip-clock--xsmall ul.flip:after { font-size: 1rem; height: 2.2rem; line-height: 2.2rem; } .flip-clock.flip-clock--small ul.flip:after { font-size: 1.1rem; height: 2.42rem; line-height: 2.42rem; } .flip-clock.flip-clock--xlarge ul.flip:after { font-size: 1.3rem; height: 2.86rem; line-height: 2.86rem; } .flip-clock ul.flip li .flipper div.up:after { top: calc(( 5rem / 2) - 1px); } .flip-clock ul.flip li .flipper div div.inn { border-radius: 0.33333333rem; } .flip-clock ul.flip:nth-child(1):after { content: "Dage"; } .flip-clock ul.flip:nth-child(2):after { content: "Timer"; } .flip-clock ul.flip:nth-child(3):after { content: "Minutter"; } .flip-clock ul.flip:nth-child(4):after { content: "Sekunder"; } .flip-clock.flip-clock--xsmall ul.flip:nth-child(3):after, .flip-clock.flip-clock--small ul.flip:nth-child(3):after { content: "Min."; } .flip-clock.flip-clock--xsmall ul.flip:nth-child(4):after, .flip-clock.flip-clock--small ul.flip:nth-child(4):after { content: "Sek."; } .flip-clock.flip-clock--xsmall ul.flip { border-radius: 0.2rem; width: 3.9rem; height: 3rem; font-size: 2.1rem; line-height: 3rem; box-shadow: 0 0.06666667rem 0.1rem rgba(0, 0, 0, 0.7); } .flip-clock.flip-clock--xsmall ul.flip:after { top: 3rem; font-size: 1.2rem; height: 2.64rem; line-height: 2.64rem; } .flip-clock.flip-clock--xsmall.flip-clock--xsmall ul.flip:after { font-size: 1rem; height: 2.2rem; line-height: 2.2rem; } .flip-clock.flip-clock--xsmall.flip-clock--small ul.flip:after { font-size: 1.1rem; height: 2.42rem; line-height: 2.42rem; } .flip-clock.flip-clock--xsmall.flip-clock--xlarge ul.flip:after { font-size: 1.3rem; height: 2.86rem; line-height: 2.86rem; } .flip-clock.flip-clock--xsmall ul.flip li .flipper div.up:after { top: calc(( 3rem / 2) - 1px); } .flip-clock.flip-clock--xsmall ul.flip li .flipper div div.inn { border-radius: 0.2rem; } .flip-clock.flip-clock--xsmall ul.flip:nth-child(1):after { content: "Dage"; } .flip-clock.flip-clock--xsmall ul.flip:nth-child(2):after { content: "Timer"; } .flip-clock.flip-clock--xsmall ul.flip:nth-child(3):after { content: "Minutter"; } .flip-clock.flip-clock--xsmall ul.flip:nth-child(4):after { content: "Sekunder"; } .flip-clock.flip-clock--xsmall.flip-clock--xsmall ul.flip:nth-child(3):after, .flip-clock.flip-clock--xsmall.flip-clock--small ul.flip:nth-child(3):after { content: "Min."; } .flip-clock.flip-clock--xsmall.flip-clock--xsmall ul.flip:nth-child(4):after, .flip-clock.flip-clock--xsmall.flip-clock--small ul.flip:nth-child(4):after { content: "Sek."; } .flip-clock.flip-clock--small ul.flip { border-radius: 0.26666667rem; width: 5.2rem; height: 4rem; font-size: 2.8rem; line-height: 4rem; box-shadow: 0 0.08888889rem 0.13333333rem rgba(0, 0, 0, 0.7); } .flip-clock.flip-clock--small ul.flip:after { top: 4rem; font-size: 1.2rem; height: 2.64rem; line-height: 2.64rem; } .flip-clock.flip-clock--small.flip-clock--xsmall ul.flip:after { font-size: 1rem; height: 2.2rem; line-height: 2.2rem; } .flip-clock.flip-clock--small.flip-clock--small ul.flip:after { font-size: 1.1rem; height: 2.42rem; line-height: 2.42rem; } .flip-clock.flip-clock--small.flip-clock--xlarge ul.flip:after { font-size: 1.3rem; height: 2.86rem; line-height: 2.86rem; } .flip-clock.flip-clock--small ul.flip li .flipper div.up:after { top: calc(( 4rem / 2) - 1px); } .flip-clock.flip-clock--small ul.flip li .flipper div div.inn { border-radius: 0.26666667rem; } .flip-clock.flip-clock--small ul.flip:nth-child(1):after { content: "Dage"; } .flip-clock.flip-clock--small ul.flip:nth-child(2):after { content: "Timer"; } .flip-clock.flip-clock--small ul.flip:nth-child(3):after { content: "Minutter"; } .flip-clock.flip-clock--small ul.flip:nth-child(4):after { content: "Sekunder"; } .flip-clock.flip-clock--small.flip-clock--xsmall ul.flip:nth-child(3):after, .flip-clock.flip-clock--small.flip-clock--small ul.flip:nth-child(3):after { content: "Min."; } .flip-clock.flip-clock--small.flip-clock--xsmall ul.flip:nth-child(4):after, .flip-clock.flip-clock--small.flip-clock--small ul.flip:nth-child(4):after { content: "Sek."; } .flip-clock.flip-clock--large ul.flip { border-radius: 0.4rem; width: 7.8rem; height: 6rem; font-size: 4.2rem; line-height: 6rem; box-shadow: 0 0.13333333rem 0.2rem rgba(0, 0, 0, 0.7); } .flip-clock.flip-clock--large ul.flip:after { top: 6rem; font-size: 1.2rem; height: 2.64rem; line-height: 2.64rem; } .flip-clock.flip-clock--large.flip-clock--xsmall ul.flip:after { font-size: 1rem; height: 2.2rem; line-height: 2.2rem; } .flip-clock.flip-clock--large.flip-clock--small ul.flip:after { font-size: 1.1rem; height: 2.42rem; line-height: 2.42rem; } .flip-clock.flip-clock--large.flip-clock--xlarge ul.flip:after { font-size: 1.3rem; height: 2.86rem; line-height: 2.86rem; } .flip-clock.flip-clock--large ul.flip li .flipper div.up:after { top: calc(( 6rem / 2) - 1px); } .flip-clock.flip-clock--large ul.flip li .flipper div div.inn { border-radius: 0.4rem; } .flip-clock.flip-clock--large ul.flip:nth-child(1):after { content: "Dage"; } .flip-clock.flip-clock--large ul.flip:nth-child(2):after { content: "Timer"; } .flip-clock.flip-clock--large ul.flip:nth-child(3):after { content: "Minutter"; } .flip-clock.flip-clock--large ul.flip:nth-child(4):after { content: "Sekunder"; } .flip-clock.flip-clock--large.flip-clock--xsmall ul.flip:nth-child(3):after, .flip-clock.flip-clock--large.flip-clock--small ul.flip:nth-child(3):after { content: "Min."; } .flip-clock.flip-clock--large.flip-clock--xsmall ul.flip:nth-child(4):after, .flip-clock.flip-clock--large.flip-clock--small ul.flip:nth-child(4):after { content: "Sek."; } .flip-clock.flip-clock--xlarge ul.flip { border-radius: 0.46666667rem; width: 9.1rem; height: 7rem; font-size: 4.9rem; line-height: 7rem; box-shadow: 0 0.15555556rem 0.23333333rem rgba(0, 0, 0, 0.7); } .flip-clock.flip-clock--xlarge ul.flip:after { top: 7rem; font-size: 1.2rem; height: 2.64rem; line-height: 2.64rem; } .flip-clock.flip-clock--xlarge.flip-clock--xsmall ul.flip:after { font-size: 1rem; height: 2.2rem; line-height: 2.2rem; } .flip-clock.flip-clock--xlarge.flip-clock--small ul.flip:after { font-size: 1.1rem; height: 2.42rem; line-height: 2.42rem; } .flip-clock.flip-clock--xlarge.flip-clock--xlarge ul.flip:after { font-size: 1.3rem; height: 2.86rem; line-height: 2.86rem; } .flip-clock.flip-clock--xlarge ul.flip li .flipper div.up:after { top: calc(( 7rem / 2) - 1px); } .flip-clock.flip-clock--xlarge ul.flip li .flipper div div.inn { border-radius: 0.46666667rem; } .flip-clock.flip-clock--xlarge ul.flip:nth-child(1):after { content: "Dage"; } .flip-clock.flip-clock--xlarge ul.flip:nth-child(2):after { content: "Timer"; } .flip-clock.flip-clock--xlarge ul.flip:nth-child(3):after { content: "Minutter"; } .flip-clock.flip-clock--xlarge ul.flip:nth-child(4):after { content: "Sekunder"; } .flip-clock.flip-clock--xlarge.flip-clock--xsmall ul.flip:nth-child(3):after, .flip-clock.flip-clock--xlarge.flip-clock--small ul.flip:nth-child(3):after { content: "Min."; } .flip-clock.flip-clock--xlarge.flip-clock--xsmall ul.flip:nth-child(4):after, .flip-clock.flip-clock--xlarge.flip-clock--small ul.flip:nth-child(4):after { content: "Sek."; } .flip-clock.flip-clock--invert ul.flip li .flipper div div.inn { background-color: #ddd; color: #333; } .flip-clock.flip-clock--hidden { opacity: 0; } .flip-clock ul.flip { transition: all 200ms ease-out; user-select: none; position: relative; list-style-type: none; padding: 0; float: left; margin: 0 0.08em; font-weight: 600; } .flip-clock ul.flip:after { content: ""; position: absolute; right: 0; left: 0; font-weight: 600; text-align: center; color: #222; } .flip-clock.flip-clock--label-light ul.flip:after { color: #eee; } .flip-clock ul.flip li { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .flip-clock ul.flip li:first-child { z-index: 2; } .flip-clock ul.flip li .flipper { display: block; height: 100%; } .flip-clock ul.flip li .flipper div { z-index: 1; position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; } .flip-clock ul.flip li .flipper div .shadow { position: absolute; width: 100%; height: 100%; z-index: 2; } .flip-clock ul.flip li .flipper div.up { transform-origin: 50% 100%; top: 0; } .flip-clock ul.flip li .flipper div.up:after { content: ""; position: absolute; left: 0; z-index: 5; width: 100%; height: 0.3rem; background-color: rgba(0, 0, 0, 0.4); } .flip-clock ul.flip li .flipper div.down { transform-origin: 50% 0; bottom: 0; } .flip-clock ul.flip li .flipper div div.inn { position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; color: #ddd; text-align: center; background-color: #333; } .flip-clock ul.flip li .flipper div div.invert { background-color: #ddd; color: #333; } .flip-clock.flip-clock--light ul.flip li .flipper div div.inn { color: #444; background-color: #eee; } .flip-clock ul.flip li .flipper div.up div.inn { top: 0; } .flip-clock ul.flip li .flipper div.down div.inn { bottom: 0; } .flip-clock.play ul li.before { z-index: 3; } .flip-clock.play ul li.active { animation: flipclock-change-overlay 200ms 200ms linear both; z-index: 2; } @keyframes flipclock-change-overlay { 0% { z-index: 2; } 5% { z-index: 4; } 100% { z-index: 4; } } .flip-clock.play ul li.active .down { z-index: 2; animation: flipclock-turn 200ms 200ms linear both; } @keyframes flipclock-turn { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } } .flip-clock.play ul li.before .up { z-index: 2; animation: flipclock-turn2 200ms linear both; } @keyframes flipclock-turn2 { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-90deg); } } .flip-clock.play ul li.before .up .shadow { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, #000000 100%); animation: flipclock-show 200ms linear both; } .flip-clock.play ul li.active .up .shadow { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, #000000 100%); animation: flipclock-hide 200ms 200ms linear both; } .flip-clock.flip-clock--label-light.play ul li.active .up .shadow, .flip-clock.flip-clock--label-light.play ul li.active .up .shadow { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%); } .flip-clock.play ul li.before .down .shadow { background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.1) 100%); animation: flipclock-show 200ms linear both; } .flip-clock.play ul li.active .down .shadow { background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.1) 100%); animation: flipclock-hide 200ms 200ms linear both; } .flip-clock.flip-clock--label-light.play ul li.before .down .shadow, .flip-clock.flip-clock--label-light.play ul li.active .down .shadow { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 100%); } @keyframes flipclock-show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes flipclock-hide { 0% { opacity: 1; } 100% { opacity: 0; } } .flip-clock.flip-clock--static.play ul li.active .up, .flip-clock.flip-clock--static.play ul li.before .up, .flip-clock.flip-clock--static.play ul li.active .up .shadow, .flip-clock.flip-clock--static.play ul li.before .up .shadow, .flip-clock.flip-clock--static.play ul li.active .down, .flip-clock.flip-clock--static.play ul li.before .down, .flip-clock.flip-clock--static.play ul li.active .down .shadow, .flip-clock.flip-clock--static.play ul li.before .down .shadow { z-index: 1; animation: none; } .avalon-area .u-grid.avalon-accordion { padding: 2rem; } .avalon-accordion__inner { border-radius: 0.5rem; background: #e8e8e8; padding: 0 1.5rem; color: #000000; } .region-casino .avalon-accordion__inner, .region-avalon-casino .avalon-accordion__inner { color: #282828; } .region-avalon-bingo .avalon-accordion__inner { background: #f7f6f0; } .avalon-accordion--transparent .avalon-accordion__inner { background: none; } .avalon-accordion--light .avalon-accordion__inner { color: white; } .avalon-accordion__header { font-size: 2.2rem; font-weight: 800; line-height: 1.1; min-height: 5.6rem; display: flex; align-items: center; border-bottom: 0.1rem solid #c8c8c8; padding: 1rem 0; } .region-casino .avalon-accordion__header { font-family: Raleway, "Open Sans", Helvetica, Arial, sans-serif; font-weight: 900; font-style: italic; } .avalon-accordion--light .avalon-accordion__header { border-color: white; } .avalon-accordion__item { position: relative; z-index: 1; padding-top: 0.4rem; border-bottom: 0.1rem solid #c8c8c8; } .avalon-accordion--light .avalon-accordion__item { border-color: white; } .avalon-accordion__item:last-child { border-color: transparent; padding-bottom: 0.2rem; } .avalon-accordion__item:hover::after { content: ""; position: absolute; z-index: -1; top: -0.1rem; bottom: -0.1rem; left: -1.5rem; right: -1.5rem; background: rgba(0, 0, 0, 0.05); border-radius: 0.5rem; } .avalon-accordion__inner .avalon-accordion__header + .avalon-accordion__item { padding-top: 0; } .avalon-accordion__item label { position: relative; cursor: pointer; user-select: none; font-family: "Open Sans", sans-serif; font-weight: 700; color: #1c1c1c; font-size: 1.6rem; line-height: 1.25; min-height: 5rem; display: flex; align-items: center; padding: 1rem 3.5rem 1rem 0; } .avalon-accordion--light .avalon-accordion__item label { color: white; } .region-avalon-bingo .avalon-accordion__item label { font-weight: 600; } .avalon-accordion__item label::after { content: ""; position: absolute; z-index: 1; transition: all 250ms ease-out; border: 0.2rem solid #000000; border-top: none; border-left: none; transform: rotate(45deg); height: 1.1rem; width: 1.1rem; right: 0.5rem; top: 1.5rem; transform-origin: center; } .region-casino .avalon-accordion__item label::after, .region-avalon-casino .avalon-accordion__item label::after { border-color: #581231; } .avalon-accordion--light .avalon-accordion__item label::after { border-color: white; } .avalon-accordion__item input { display: none; } .avalon-accordion__item input:checked + label { border-color: transparent; } .avalon-accordion__item input:checked + label:after { transform: rotate(225deg); top: 2.3rem; } .avalon-accordion__item article { font-weight: 400; font-size: 1.6rem; line-height: 1.6; overflow: hidden; height: 0; transform-origin: 50% 0; transform: rotateX(-60deg) translate3d(0, 0, 0); opacity: 0; transition: all 300ms ease-out; } html.mode-edit .avalon-accordion__item input ~ article, .avalon-accordion__item input:checked ~ article { height: auto; padding-bottom: 2rem; opacity: 1; transform: rotateX(0) translate3d(0, 0, 0); } .avatar-sidebar { position: fixed; top: 20vh; right: -40rem; width: 29rem; height: auto; user-select: none; display: none; opacity: 0; z-index: 20; font-weight: 700; } @media screen and (min-width: 1024px) { .avatar-sidebar { width: 34rem; } } @media screen and (min-width: 1440px) { .avatar-sidebar { width: 40rem; } } .avatar-sidebar.avatar-sidebar--show { display: block; animation-name: avatar-animation-show; animation-duration: 300ms; animation-fill-mode: forwards; animation-timing-function: ease-out; } .avatar-sidebar.avatar-sidebar--close { animation-name: avatar-animation-close; animation-duration: 500ms; animation-fill-mode: forwards; animation-timing-function: ease-out; } .avatar-sidebar .avatar-sidebar__close { position: absolute; right: 1rem; top: 1rem; cursor: pointer; z-index: 25; } .avatar-sidebar .avatar-sidebar__close svg { width: 1.8rem; height: 1.8rem; } .avatar-sidebar .avatar-sidebar__image img { vertical-align: bottom; width: 23rem; height: auto; margin-left: 6rem; } @media screen and (min-width: 1024px) { .avatar-sidebar .avatar-sidebar__image img { width: 26rem; margin-left: 8rem; } } @media screen and (min-width: 1440px) { .avatar-sidebar .avatar-sidebar__image img { width: 33rem; margin-left: 7rem; } } .avatar-sidebar .avatar-sidebar__titlebar { color: white; text-align: center; margin-left: 3rem; height: 4.3rem; font-size: 2rem; line-height: 3.5rem; } .avatar-sidebar .avatar-sidebar__title { position: relative; margin-top: -3.6rem; transform: skew(-12deg); margin-left: 6rem; } .avatar-sidebar .avatar-sidebar__titlebackground { background-color: #166F93; height: 3.6rem; transform: skew(-12deg); margin-left: 3rem; box-shadow: 1rem 0.4rem 0 0.3rem white; width: 45rem; } .avatar-sidebar .avatar-sidebar__titleshadow { box-shadow: 3rem 0.6rem 1rem 0.3rem rgba(0, 0, 0, 0.25); } .avatar-sidebar .avatar-sidebar__content { margin-top: -0.7rem; padding-left: 5.5rem; line-height: 1.2; } .avatar-sidebar .avatar-sidebar__text { text-align: right; padding-top: 1rem; width: 20rem; margin-left: 1rem; } @media screen and (min-width: 1024px) { .avatar-sidebar .avatar-sidebar__text { width: 25rem; margin-left: 1rem; } } @media screen and (min-width: 1440px) { .avatar-sidebar .avatar-sidebar__text { width: 30rem; } } .avatar-sidebar .avatar-sidebar__cta { text-align: center; transform: skewX(12deg); width: 21rem; padding: 2rem 0 2rem 6rem; } @media screen and (min-width: 1024px) { .avatar-sidebar .avatar-sidebar__cta { width: 27rem; } } @media screen and (min-width: 1440px) { .avatar-sidebar .avatar-sidebar__cta { width: 30rem; } } .avatar-sidebar .avatar-sidebar__cta .avalon-button--virtuel { background-color: #FEB700; text-transform: none; } .avatar-sidebar .avatar-sidebar__textbackground { background-color: #14e37c; transform: skew(-12deg); width: 45rem; box-shadow: 1.8rem 0.9rem 0 0.3rem white; } .avatar-sidebar .avatar-sidebar__textshadow { box-shadow: -0.7rem 1.3rem 1rem 0.3rem rgba(0, 0, 0, 0.25); } @keyframes avatar-animation-show { 0% { right: -40rem; opacity: 0; } 60% { transform: scale(1.05); } 100% { right: 0rem; transform: scale(1); opacity: 1; } } @keyframes avatar-animation-close { 0% { right: 0rem; opacity: 1; transform: scale(1); } 40% { transform: scale(0.95); opacity: 0.9; } 100% { right: -40rem; opacity: 0; display: none; } } .brand-and-byline-tag { position: absolute; z-index: 10; top: 0; right: 0; flex-direction: column; align-items: flex-end; pointer-events: none; display: none; } @media screen and (min-width: 1024px) { .brand-and-byline-tag { display: flex; } } .brand-and-byline-tag .brand-and-byline-tag__brand { width: 7rem; height: 3rem; border-radius: 0 0 0 0.6rem; display: flex; justify-content: center; align-items: center; } @media (min-width: 1425px) { .brand-and-byline-tag .brand-and-byline-tag__brand { width: 10rem; height: 4rem; } } .brand-and-byline-tag .brand-and-byline-tag__brand img { width: 80%; height: 80%; max-width: 80%; max-height: 70%; } .brand-and-byline-tag .brand-and-byline-tag__byline { color: white; font-size: 0.9rem; font-weight: 700; text-align: right; padding: 0 1rem; width: 100%; font-style: italic; margin-top: 0.5rem; } .brand-and-byline-tag .brand-and-byline-tag__byline.brand-and-byline-tag__byline--dark { color: black; } .region-avalon-frontpage header nav .sub-navigation { display: none; } .brandmenu { padding: 0.5rem 15px 1rem; background: white; } .brandmenu .brandmenu__content { max-width: 126rem; margin: 0 auto; display: flex; flex-direction: column; } @media (min-width: 1310px) { .brandmenu .brandmenu__content { flex-direction: row; } } .brandmenu .brandmenu__header { font-size: 1.3rem; font-weight: 600; padding: 0 0.5rem 0.3rem; width: 100%; } .brandmenu .dli .brandmenu__header { color: #0f4096; } .brandmenu .dlo .brandmenu__header { color: #E11E00; } .brandmenu .brandmenu__brands { display: flex; flex-wrap: wrap; align-items: stretch; align-content: stretch; overflow: hidden; } .brandmenu .brandmenu__brand { height: 6rem; position: relative; width: 100%; } @media (min-width: 260px) { .brandmenu .brandmenu__brand { width: calc(100% / 2); } } @media (min-width: 375px) { .brandmenu .brandmenu__brand { width: calc(100% / 3); } } @media (min-width: 490px) { .brandmenu .brandmenu__brand { width: calc(100% / 4); } } @media (min-width: 605px) { .brandmenu .brandmenu__brand { width: calc(100% / 5); } } @media (min-width: 720px) { .brandmenu .brandmenu__brand { width: calc(100% / 6); } } @media (min-width: 835px) { .brandmenu .brandmenu__brand { width: calc(100% / 7); } } @media (min-width: 1310px) { .brandmenu .brandmenu__brand { width: 124px; } } .brandmenu .brandmenu__link { border-radius: 0.6rem; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; display: flex; justify-content: center; align-items: center; transition: transform 100ms ease-in; } .brandmenu .brandmenu__link:hover { transform: scale(1.1); } .brandmenu .brandmenu__link img { width: 9rem; height: 3rem; max-width: 80%; max-height: 55%; } .brandmenu .brandmenu__subsidiary { margin-top: 0.5rem; } @media (min-width: 1310px) { .brandmenu .brandmenu__subsidiary.dli { flex: 1; } } @media (min-width: 1310px) { .brandmenu .brandmenu__subsidiary.dlo { flex-shrink: 0; width: 620px; } } .brandmenu .alt-eller-intet-white { background-color: #191339; } .brandmenu .bingo-white { background-color: #a1d138; } .brandmenu .casino-white, .brandmenu .live-casino-white { background-color: #a68956; } .brandmenu .dantoto-white { background-color: #d96224; } .brandmenu .eurojackpot-white { background-color: #e5a340; } .brandmenu .keno-white { background-color: #25a5e8; } .brandmenu .lotto-white { background-color: #E11E00; } .brandmenu .oddset-white, .brandmenu .eoddset-white { background-color: #0f4096; } .brandmenu .plus-white, .brandmenu .spilsammen-white { background-color: #074a32; } .brandmenu .poker-white { background-color: black; } .brandmenu .quick-white { background-color: #7e4787; } .brandmenu .spillehjoernet-white { background-color: #7f96b3; } .brandmenu .tips-white { background-color: #189862; } .brandmenu .vikinglotto-white, .brandmenu .onsdagslotto-white { background-color: #1a23fa; } .avalon-button { display: inline-block; padding: 1.3rem 1.8rem; color: #000000; background-color: #feb700; border-radius: 0.3rem; font-size: 1.6rem; line-height: 1; font-weight: 700; text-align: center; text-transform: uppercase; text-decoration: none; outline: none; box-shadow: none; transition: 200ms ease; } @media screen and (min-width: 768px) { .avalon-button { font-size: 1.4rem; } } .avalon-button:hover { color: black; background-color: #feb700; box-shadow: none; } .avalon-button:active { color: #323232; background-color: white; } .avalon-button--inactive, .avalon-button--inactive:hover, .avalon-button--inactive:active { color: #a0a0a0; background-color: #dcdcdc; text-decoration: none; user-select: none; } .avalon-button--yellow, .avalon-button--corporate { color: #000000; background-color: #feb700; } .avalon-button--yellow:hover, .avalon-button--corporate:hover { background-color: #eaa900; } .avalon-button--gray, .avalon-button--grey { color: white; background-color: #a0a0a0; } .avalon-button--gray:hover, .avalon-button--grey:hover { background-color: #6e6e64; } .avalon-button--light-gray, .avalon-button--light-grey { color: black; background-color: #e6e6e6; } .avalon-button--light-gray:hover, .avalon-button--light-grey:hover { background-color: #dcdcdc; } /* =========================================== component.campaign-module ========================================= */ .avalon-campaign-module { position: relative; } .avalon-campaign-module__link-area { display: block; } .avalon-campaign-module__image { display: block; width: 100%; height: auto; } .avalon-campaign-module__cta { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); } /* =========================================== component.campaign-list ========================================= */ .avalon-campaign-list { background-color: #e6e6e6; } .avalon-campaign-list__link-area { color: black; text-decoration: none; } .avalon-campaign-list__intro { margin-bottom: 2rem; } .avalon-campaign-list__header { color: #000000; text-align: center; } @media screen and (max-width: 767px) { .avalon-campaign-list__abstract { width: 100%; font-size: 1.4rem; } } .avalon-campaign-list__items { counter-reset: section; } .avalon-campaign-list__item { color: #ffffff; padding: 3rem; background-color: #000000; } .avalon-campaign-list__item:not(:first-child) { margin-top: 2rem; } @media screen and (max-width: 767px) { .avalon-campaign-list__item { width: 100%; padding: 2rem; position: relative; } } .avalon-campaign-list__item:after { content: ""; display: table; clear: both; } .avalon-campaign-list__item-date { font-weight: normal; display: block; margin-bottom: 0rem; } @media screen and (max-width: 767px) { .avalon-campaign-list__item-date { display: none; } } .avalon-campaign-list__item-date--mobile { display: none; } @media screen and (max-width: 767px) { .avalon-campaign-list__item-date--mobile { font-size: 1.4rem; text-align: left; display: inline-block; } } .avalon-campaign-list__item-subheading { color: #ffffff; text-align: left; font-weight: normal; } @media screen and (max-width: 767px) { .avalon-campaign-list__item-subheading { width: 100%; font-size: 1.4rem; margin-bottom: 2rem; } } .avalon-campaign-list__item-prize { font-size: 2rem; color: #feb700; font-weight: 900; text-transform: uppercase; } @media screen and (max-width: 767px) { .avalon-campaign-list__item-prize { font-size: 1.4rem; } } .avalon-campaign-list .avalon-campaign-list__column { float: left; width: 33.33%; padding: 0 2rem; } @media screen and (max-width: 767px) { .avalon-campaign-list .avalon-campaign-list__column { padding: 0; width: 100%; } } .avalon-campaign-list .avalon-campaign-list__column:first-child { width: 40%; text-align: left; padding: 0; } @media screen and (max-width: 767px) { .avalon-campaign-list .avalon-campaign-list__column:first-child { width: 100%; } } .avalon-campaign-list .avalon-campaign-list__column:last-child { width: 25%; text-align: right; padding: 0; } @media screen and (max-width: 767px) { .avalon-campaign-list .avalon-campaign-list__column:last-child { width: 100%; display: flex; justify-content: space-between; } } /* =========================================== component.campaign ========================================= */ .avalon-campaign { background-color: #2a2831; } .u-background--white .avalon-campaign { background-color: white; } .avalon-campaign__list { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: -2rem; } .avalon-campaign__item { overflow: hidden; background-color: #1d1c21; color: rgba(255, 255, 255, 0.8); margin-top: 2rem; } @media screen and (min-width: 768px) { .avalon-campaign__item--size-50 { width: calc(100%/2 - 2rem / 2); } } @media screen and (min-width: 768px) { .avalon-campaign__item--size-100 { width: 100%; display: block; } } .avalon-campaign__header { position: relative; display: block; } .avalon-campaign__header[href] .avalon-campaign__title, .avalon-campaign__header[href] .avalon-campaign__subtitle { transition: color ease 0.25s; } .avalon-campaign__header[href]:hover .avalon-campaign__title, .avalon-campaign__header[href]:hover .avalon-campaign__subtitle { color: #feb700; } .avalon-campaign__image { display: block; width: 100%; height: 75vw; object-fit: cover; } @media screen and (min-width: 768px) { .avalon-campaign__image { height: auto; } } .avalon-campaign__imagetext { padding: 2rem; position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); color: white; } @media screen and (min-width: 768px) { .avalon-campaign__imagetext { padding: 2.5rem; } } .avalon-campaign__subtitle { font-weight: 100; } .avalon-campaign__content { font-size: 1.1rem; padding: 2rem; } @media screen and (min-width: 768px) { .avalon-campaign__content { padding: 2.5rem; } } .avalon-campaign__content a { color: #feb700; } .avalon-area .avalon-campaign ol:not([class]), .avalon-area .avalon-campaign ul:not([class]) { padding-left: 2rem; } .avalon-area .avalon-campaign ol:not([class]) li:before, .avalon-area .avalon-campaign ul:not([class]) li:before { left: -3rem; font-size: 1.4rem; line-height: 1.4; color: #a0a0a0; } .avalon-area .avalon-campaign ol:not([class]) li:before { top: -0.1rem; } .mode-edit .avalon-campaign__item { height: auto !important; } .avalon-cards .card.card-campaign { overflow-y: visible; } .avalon-cards .card-campaign { position: relative; display: flex; flex-direction: column; background-size: cover; background-position: center; color: white; } .avalon-cards .card-campaign:hover { text-decoration: none; } .avalon-cards .card-campaign:hover .card-campaign__cta { background: #eaa800; } .avalon-cards .card-campaign__curve { overflow: hidden; position: absolute; z-index: 2; top: 0; height: 28rem; left: 0; right: 0; } .avalon-cards .card-campaign__curve .card-campaign__curve-inner { position: absolute; z-index: 3; bottom: -37rem; left: -30rem; right: -30rem; height: 40rem; border-top-left-radius: 250rem 100rem; border-top-right-radius: 250rem 100rem; } .avalon-cards .card-campaign__behind { position: absolute; z-index: -1; top: 0; background-color: #099154; background-size: cover; background-position: center; left: 0; width: 100%; height: 28rem; border-radius: 0.6rem 0.6rem 0 0; display: flex; justify-content: center; align-items: center; padding-bottom: 2rem; } .avalon-cards .card-campaign__image { max-width: calc(100% - 4rem); max-height: calc(100% - 4rem); height: auto; } .avalon-cards .card-campaign__front { background-color: #099154; height: 100%; margin: 28rem 0 2.5rem; border-radius: 0 0 0.6rem 0.6rem; padding: 0 2.5rem 4.5rem; } .avalon-cards .card-campaign__title { font-size: 1.8rem; font-weight: bold; line-height: 1.3; margin-bottom: 1rem; } .avalon-cards .card-campaign__text { font-size: 1.2rem; line-height: 1.3; } .avalon-cards .card-campaign__cta { position: absolute; z-index: 10; bottom: 0.3rem; left: 50%; transform: translateX(-50%); background: #FEB700; height: 5rem; min-width: 16.5rem; border-radius: 4.5rem; display: flex; justify-content: center; align-items: center; color: #222222; font-size: 1.6rem; font-weight: 800; white-space: nowrap; box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.25); text-transform: uppercase; padding: 0 2.5rem; } .avalon-cards .card-one { position: relative; display: flex; flex-direction: column; background-color: white; background-size: cover; background-position: center; color: #000000; } .avalon-cards .card-one:hover { text-decoration: none; } .avalon-cards .card-one .card__label { position: absolute; top: 1rem; left: 0; right: 0; text-align: center; font-size: 1.2rem; font-weight: 600; color: white; z-index: 1; } .avalon-cards .card-one .card__image { width: 100%; background-repeat: no-repeat; background-size: auto 100%; background-position: center; } .avalon-cards .card-one .card__image--small { height: 11rem; } @media screen and (min-width: 1216px) { .avalon-cards .card-one .card__image--small { display: none; } } .avalon-cards .card-one .card__image--large { height: 15rem; display: none; } @media screen and (min-width: 1216px) { .avalon-cards .card-one .card__image--large { display: block; } } .avalon-cards .card-one .card__content { padding: 2rem; flex: 1 1 auto; } .avalon-cards .card-one .card__content--remove-side-padding { padding: 2rem 0; } @media screen and (min-width: 768px) { .avalon-cards .card-one .card__content--remove-side-padding { padding: 2rem; } } .avalon-cards .card-one .card__cta-wrapper { padding: 0 0 2rem; text-align: center; } .avalon-cards .card-type1 { height: 23rem; display: flex; flex-direction: column; background-color: rgba(0, 0, 0, 0.5); } @media screen and (min-width: 1216px) { .avalon-cards .card-type1 { height: 37rem; } } .avalon-cards .card-type1 .card__image-wrapper { position: relative; height: 10rem; background: rgba(0, 0, 0, 0.2); } @media screen and (min-width: 1216px) { .avalon-cards .card-type1 .card__image-wrapper { height: 15rem; } } .avalon-cards .card-type1 .card__image-wrapper .card__image-title { position: absolute; top: 1rem; left: 0; right: 0; text-align: center; font-size: 1.2rem; font-weight: 600; color: white; z-index: 1; } .avalon-cards .card-type1 .card__image-wrapper .card__image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; object-fit: cover; height: 100%; width: 100%; } .avalon-cards .card-type1 .card__content { padding: 1rem 1rem 0; flex: 1; } @media screen and (min-width: 1216px) { .avalon-cards .card-type1 .card__content { padding: 3.5rem 3.5rem 0; } } .avalon-cards .card-type1 .card__content .card__title { font-size: 1.6rem; font-weight: 600; color: white; line-height: 1.2; margin-bottom: 0.5rem; } @media screen and (min-width: 1216px) { .avalon-cards .card-type1 .card__content .card__title { font-size: 2.1rem; } } .avalon-cards .card-type1 .card__content .card__subtitle { font-size: 1.3rem; font-weight: 600; color: white; line-height: 1.3; } @media screen and (min-width: 1216px) { .avalon-cards .card-type1 .card__content .card__subtitle { font-size: 1.8rem; } } .avalon-cards .card-type1 .card__cta-wrapper { padding: 1rem 1rem 2rem; text-align: center; } @media screen and (min-width: 1216px) { .avalon-cards .card-type1 .card__cta-wrapper { padding: 1rem 3.5rem 3.5rem; } } .avalon-cards .card.card-picture { border-radius: 0; padding: 1rem; margin: 0; position: relative; font-size: 2rem; font-weight: bold; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #000000; background-size: cover; background-repeat: no-repeat; background-position: center; color: white; text-align: center; text-decoration: none; min-height: 25rem; } .avalon-cards .card-picture__icon { fill: white; position: absolute; bottom: 2rem; right: 2rem; } .avalon-cards.card-layout-1 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-1.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-1.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-1 .cards { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -2rem; margin-right: -2rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-1 .cards { margin-left: -1rem; margin-right: -1rem; } } .avalon-cards.card-layout-1 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: calc(50% - 2rem); margin: 1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-1 .card { flex-basis: calc(25% - 2rem); } } .avalon-cards.card-layout-2 { padding: 0; } .avalon-cards.card-layout-2.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-2.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-2 .card:not(:first-child) { margin-top: 2rem; } .avalon-cards.card-layout-3 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-3.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-3.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-3 .cards { display: flex; flex-direction: column; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-3 .cards { flex-direction: row; } } .avalon-cards.card-layout-3 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: 100%; margin: 1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-3 .card { flex-basis: calc(50% - 2rem); } } .avalon-cards.card-layout-4 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-4.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-4.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-4 .cards { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } .avalon-cards.card-layout-4 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: calc(50% - 2rem); margin: 1rem; } @media screen and (min-width: 480px) { .avalon-cards.card-layout-4 .card { flex-basis: calc(25% - 2rem); } } .avalon-cards.card-layout-5 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-5.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-5.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-5 .cards { display: flex; flex-direction: column; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-5 .cards { flex-direction: row; } } .avalon-cards.card-layout-5 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: 100%; margin: 1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-5 .card { flex-basis: calc(33.3333% - 2rem); } } .avalon-cards.card-layout-6 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-6.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-6.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-6 .cards { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } .avalon-cards.card-layout-6 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: 100%; margin: 1rem; } @media screen and (min-width: 480px) { .avalon-cards.card-layout-6 .card { flex-basis: calc(50% - 2rem); } } @media screen and (min-width: 1024px) { .avalon-cards.card-layout-6 .card { flex-basis: calc(25% - 2rem); } } .avalon-cards.card-layout-7 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-7.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-7.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-7 .cards { display: flex; flex-direction: column; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-7 .cards { flex-direction: row; } } .avalon-cards.card-layout-7 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: 100%; margin: 1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-7 .card { flex-basis: calc(50% - 2rem); } } @media screen and (min-width: 1024px) { .avalon-cards.card-layout-7 .card { flex-basis: calc(33.3333% - 2rem); } .avalon-cards.card-layout-7 .card:nth-child(even) { flex-basis: calc(66.6666% - 2rem); } } .avalon-cards.card-layout-8 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-8.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-8.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-8 .cards { display: flex; flex-direction: column; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-8 .cards { flex-direction: row; } } .avalon-cards.card-layout-8 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: 100%; margin: 1rem; } @media screen and (min-width: 768px) { .avalon-cards.card-layout-8 .card { flex-basis: calc(50% - 2rem); } } @media screen and (min-width: 1024px) { .avalon-cards.card-layout-8 .card { flex-basis: calc(66.6666% - 2rem); } .avalon-cards.card-layout-8 .card:nth-child(even) { flex-basis: calc(33.3333% - 2rem); } } .avalon-cards.card-layout-9 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-9.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-9.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-9 .cards { display: flex; flex-direction: column; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } @media screen and (min-width: 480px) { .avalon-cards.card-layout-9 .cards { flex-direction: row; } } .avalon-cards.card-layout-9 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: 100%; margin: 1rem; } @media screen and (min-width: 480px) { .avalon-cards.card-layout-9 .card { flex-basis: calc(50% - 2rem); } .avalon-cards.card-layout-9 .card:nth-child(3n+1) { flex-basis: 100%; } } @media screen and (min-width: 1024px) { .avalon-cards.card-layout-9 .card { flex-basis: calc(25% - 2rem); } .avalon-cards.card-layout-9 .card:nth-child(3n+1) { flex-basis: calc(50% - 2rem); } } .avalon-cards.card-layout-10 { display: flex; flex-direction: column; padding: 0; } .avalon-cards.card-layout-10.cards__padding-top { padding-top: 2rem; } .avalon-cards.card-layout-10.cards__padding-bottom { padding-bottom: 2rem; } .avalon-cards.card-layout-10 .cards { display: flex; flex-direction: column; flex-wrap: wrap; } @media (min-width: 480px) { .avalon-cards.card-layout-10 .cards { flex-direction: row; } } .avalon-cards.card-layout-10 .card { display: flex; flex-shrink: 1; flex-grow: 0; flex-basis: 100%; } @media (min-width: 480px) { .avalon-cards.card-layout-10 .card { flex-basis: 50%; } .avalon-cards.card-layout-10 .card:nth-child(3n+1) { flex-basis: 100%; } } @media (min-width: 1024px) { .avalon-cards.card-layout-10 .card { flex-basis: 25%; } .avalon-cards.card-layout-10 .card:nth-child(3n+1) { flex-basis: 50%; } } .avalon-cards .avalon-cards__title { color: white; text-align: center; } .avalon-cards .avalon-cards__container { padding: 0 3rem; max-width: 128rem; } @media screen and (min-width: 768px) { .avalon-cards .avalon-cards__container { padding: 0 2rem; } } @media (min-width: 1320px) { .avalon-cards .avalon-cards__container { padding: 0; width: 100%; margin: 0 auto; } } .avalon-cards .cards { height: 100%; } .avalon-cards .card { overflow: hidden; border-radius: 0.6rem; } .avalon-cards.cards__remove-rounded-corners .card { border-radius: 0; } .avalon-cards.cards__padding-top { padding-top: 3rem; } .avalon-cards.cards__padding-bottom { padding-bottom: 3rem; } /* =========================================== component.hero ========================================= */ .avalon-clock { display: flex; flex-direction: column; background-position: top center; background-size: auto 100%; background-repeat: no-repeat; position: relative; } .avalon-clock--link { cursor: pointer; } .avalon-clock__background-link { text-decoration: none; } .avalon-clock__background img { max-width: 200rem; width: 100%; height: 45rem; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .avalon-clock__background img { width: auto; } } .avalon-clock__content { display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: center; height: 45rem; min-height: 45rem; width: 100%; position: relative; } .avalon-clock__content .flip-clock { display: flex; padding: 1rem 0 2rem; justify-content: center; } @media screen and (min-width: 768px) { .avalon-clock__content .flip-clock { justify-content: flex-start; } } .avalon-clock__content .avalon-clock__content-left, .avalon-clock__content .avalon-clock__content-right { flex: 1; } .avalon-clock__content .avalon-clock__content-right { display: none; } @media screen and (min-width: 768px) { .avalon-clock__content .avalon-clock__content-right { display: flex; justify-content: center; padding-left: 2rem; } } .mode-edit .avalon-clock__content { height: auto; } .avalon-clock__content .avalon-clock__primary-image { display: flex; } @media screen and (min-width: 768px) { .avalon-clock__content .avalon-clock__primary-image { height: 30rem; } } .avalon-clock__content .avalon-clock__heading { margin: 1rem 0; width: 100%; max-width: 767px; overflow-wrap: break-word; hyphens: auto; color: #ffffff; } .avalon-clock__content .avalon-clock__heading.black { color: black; } .avalon-clock__content .avalon-clock__heading.is-impact { font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; } .avalon-clock__content .avalon-clock__text { color: white; text-align: center; width: 100%; } .avalon-clock__content .avalon-clock__text.black { color: black; } @media screen and (min-width: 768px) { .avalon-clock__content .avalon-clock__text { text-align: left; } } .avalon-clock__cta-wrapper { display: flex; justify-content: left; flex-direction: column; margin-top: 3rem; } @media screen and (min-width: 768px) { .avalon-clock__cta-wrapper { flex-direction: row; } } .avalon-clock__cta { margin-left: 1.5rem; } .avalon-clock__cta:first-child { margin-left: 0; } @media (max-width: 767px) { .avalon-clock__cta:first-child { margin-top: 0; } } .avalon-clock__duty-text { margin-top: 1rem; font-size: 1.2rem; font-style: italic; text-align: center; } @media screen and (min-width: 768px) { .avalon-clock__duty-text { text-align: left; } } /* =========================================== component.content-text ========================================= */ .avalon-content-text img { max-width: 100%; height: auto; } @media screen and (min-width: 768px) { .three-col__col--right .avalon-content-text { margin-top: -3rem; } } /* =========================================== component.full-width-cta ========================================= */ .avalon-full-width-cta { width: 100%; margin: 0 auto; background: #f5f5f5; padding: 0; } @media screen and (min-width: 768px) { .avalon-full-width-cta { padding: 0 3rem; } } @media screen and (min-width: 768px) { .avalon-full-width-cta__buttons { padding: 0 3rem; } } @media screen and (min-width: 768px) { .avalon-full-width-cta__count--1 .avalon-full-width-cta__text { justify-content: center; text-align: center; } } .avalon-full-width-cta__count--2 .avalon-full-width-cta__buttons { display: flex; } @media screen and (max-width: 767px) { .avalon-full-width-cta__count--2 .avalon-full-width-cta__buttons { flex-direction: column; } } .avalon-full-width-cta__btn { display: flex; width: 100%; min-height: 10rem; margin: 0; padding: 0; position: relative; border-radius: 0; } @media screen and (max-width: 767px) { .avalon-full-width-cta__btn { min-height: 7.5rem; } } .avalon-full-width-cta__count--1 .avalon-full-width-cta__btn { height: 100%; } @media screen and (max-width: 767px) { .avalon-full-width-cta__count--2 .avalon-full-width-cta__btn:first-child { border-bottom: 1px solid #ffffff; } } .avalon-full-width-cta__count--2 .avalon-full-width-cta__btn:last-child { border-left: 1px solid #ffffff; } @media screen and (max-width: 767px) { .avalon-full-width-cta__count--2 .avalon-full-width-cta__btn:last-child { border-left: none; } } .avalon-full-width-cta__text { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; width: 100%; padding: 2.5rem 4.5rem 2.5rem 3rem; font-size: 1.6rem; text-align: left; } @media screen and (min-width: 768px) { .avalon-full-width-cta__text { flex-direction: row; align-items: center; } } .avalon-full-width-cta__header { font-weight: 900; margin-right: 1rem; } .avalon-full-width-cta__text-body { font-weight: 400; margin-top: 0.5rem; } @media screen and (min-width: 768px) { .avalon-full-width-cta__text-body { margin-top: 0; } } .avalon-full-width-cta__icon { fill: black; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } .glossary { position: relative; color: white; margin: 0 auto; padding: 2.5rem 1.5rem; max-width: 147rem; } .glossary__header { margin-bottom: 2.5rem; } @media screen and (min-width: 768px) { .glossary__header { display: grid; grid-template-areas: "title search" "text seacrh"; grid-auto-columns: 1fr 30rem; grid-column-gap: 2rem; } } @media screen and (min-width: 1216px) { .glossary__header { margin-bottom: 4rem; grid-auto-columns: 1fr 34rem; } } .glossary__title { grid-area: title; font-weight: 800; font-size: 2.8rem; line-height: 3.2rem; padding: 0 0 1.6rem; } .glossary__text { grid-area: text; color: #e8e8e8; font-weight: 400; font-size: 1.6rem; line-height: 2.4rem; padding: 0 0 2.5rem; } .glossary__search { position: relative; width: 100%; max-width: 34rem; } .glossary__search-icon { width: 5.4rem; position: absolute; right: 0.2rem; top: 0.2rem; height: 4.4rem; border-radius: 2.4rem; pointer-events: none; background-image: url(/Components/DanskeSpil/Domain/AvalonComponents/Assets/Graphics/magnifying-glass.svg); background-repeat: no-repeat; background-position: center; background-color: rgba(255, 255, 255, 0.8); } .glossary--searching .glossary__search-icon { pointer-events: initial; cursor: pointer; background-image: url(/Components/DanskeSpil/Domain/AvalonComponents/Assets/Graphics/close.svg); } .glossary__input { grid-area: search; width: 100%; border: none; height: 4.8rem; border-radius: 2.4rem; padding: 0 2rem; outline: 0.2rem solid transparent; } .glossary__input:focus-visible { outline: 0.2rem solid #9b9b9b; } .glossary__content { display: flex; margin: 0 -1.5rem 0 0; } @media screen and (min-width: 1216px) { .glossary__content { flex-direction: column-reverse; margin: 0; } } .glossary__entries { flex: 1; padding: 0 1.5rem 0 0; margin-top: -2rem; } .glossary--searching .glossary__entries { margin-top: 0; } .glossary__entry-letter { pointer-events: none; font-weight: 400; font-size: 2rem; line-height: 2.4rem; margin-bottom: 1.6rem; padding-top: 9rem; margin-top: -7rem; } @media screen and (min-width: 1216px) { .glossary__entry-letter { padding-top: 12rem; margin-top: -12rem; } } .glossary--searching .glossary__entry-letter { display: none; } a.glossary__entry-to-top { display: none; color: white; text-decoration: underline; margin-bottom: 4rem; } @media screen and (min-width: 1216px) { a.glossary__entry-to-top { display: inline-block; } .glossary--searching a.glossary__entry-to-top { display: none; } } .glossary__no-entries { display: none; } .glossary--no-entries .glossary__no-entries { display: block; } .glossary__entry { margin-bottom: 1.6rem; } .glossary__entry--hide { display: none; } .glossary__entry-word { font-weight: 800; font-size: 2rem; line-height: 2.4rem; margin-bottom: 0.4rem; } .glossary__entry-definition { font-weight: 400; font-size: 1.6rem; line-height: 2.4rem; } .glossary__index { position: sticky; z-index: 1; top: 7rem; padding: 0.5rem 0; flex: 0 0 4rem; height: 100vh; overflow-x: hidden; } .glossary--searching .glossary__index { visibility: hidden; } @media screen and (min-width: 1216px) { .glossary--searching .glossary__index { visibility: initial; } } .glossary__index::after { content: ""; position: absolute; z-index: -1; top: 0; height: 100vh; left: 0; right: 0; border-radius: 2rem; background: #1c1a21; } @media screen and (min-width: 1216px) { .glossary__index::after { content: none; } } @media screen and (min-width: 1216px) { .glossary__index { position: relative; top: initial; flex: 1; overflow-x: initial; padding: 0; margin-bottom: 6rem; background: none; max-width: 121.6rem; } } .glossary__index-inner { width: 100px; height: 100%; max-height: 100vh; overflow-y: scroll; margin-bottom: 15rem; } @media screen and (min-width: 1216px) { .glossary__index-inner { margin-bottom: 0; width: 100%; height: 4rem; display: flex; flex-direction: row; justify-content: space-between; overflow-y: initial; } } .glossary__index-letter { font-weight: 600; font-size: 1.4rem; text-decoration: none; display: flex; justify-content: center; align-items: center; width: 2.6rem; height: 2.6rem; color: rgba(255, 255, 255, 0.5); margin: 0.3rem auto 1rem 0.6rem; } .glossary__index-letter:hover { color: rgba(255, 255, 255, 0.25); } .glossary__index-letter--selected { color: #000000; background: #FEB700; border-radius: 100%; font-weight: 700; } .glossary__index-letter--selected:hover { color: #000000; background: #eaa800; } @media screen and (min-width: 1216px) { .glossary__index-letter { font-size: 1.6rem; margin: 0; width: 4rem; height: 4rem; } } :root { --dropdown__color: white; --dropdown__content__backgroundColor: #6b88aa; --dropdown__content--open__borderColor: white; --dropdown__content--hover__backgroundColor: #5b799e; --dropdown__menu-item__borderColor: #748faf; --dropdown__menu-item--selected__backgroundColor: #748faf; --dropdown__menu-item--hover__backgroundColor: #6b88aa; --dropdown__arrow__svg__stroke: white; } :root .region-casino { --dropdown__content__backgroundColor: #957a49; --dropdown__content--open__borderColor: white; --dropdown__content--hover__backgroundColor: #826b40; --dropdown__menu-item__borderColor: #9e814d; --dropdown__menu-item--selected__backgroundColor: #9e814d; --dropdown__menu-item--hover__backgroundColor: #957a49; } :root .region-avalon-bingo, :root .region-avalon-bingo-gvc, :root .region-avalon-bingo-slingo { --dropdown__content__backgroundColor: #80a91c; --dropdown__content--open__borderColor: white; --dropdown__content--hover__backgroundColor: #607f15; --dropdown__menu-item__borderColor: #90be20; --dropdown__menu-item--selected__backgroundColor: #90be20; --dropdown__menu-item--hover__backgroundColor: #80a91c; } .avalon-dropdown { user-select: none; position: relative; z-index: 15; display: flex; justify-content: flex-start; flex-direction: column; align-items: center; font-size: 1.4rem; text-transform: uppercase; font-weight: 600; color: white; color: var(--dropdown__color); height: 4rem; flex: 1; } @media screen and (min-width: 768px) { .avalon-dropdown { height: 4.8rem; flex: 0 0 20rem; } } .avalon-dropdown .dropdown__content { position: absolute; left: 0; border-radius: 0.3rem; width: 100%; height: 100%; border: 0.1rem solid transparent; overflow: hidden; background-color: #6b88aa; background-color: var(--dropdown__content__backgroundColor); } .avalon-dropdown:hover .dropdown__content { background-color: #5b799e; background-color: var(--dropdown__content--hover__backgroundColor); } .avalon-dropdown.open .dropdown__content { height: auto; border: 0.1rem solid; border-color: white; border-color: var(--dropdown__content--open__borderColor); } .avalon-dropdown .dropdown__arrow { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; padding-right: 2rem; } .avalon-dropdown .dropdown__arrow svg { width: 1.3rem; height: 1.3rem; stroke: white; stroke: var(--dropdown__arrow__svg__stroke); transition: transform 150ms ease-out; } @media screen and (min-width: 768px) { .avalon-dropdown .dropdown__arrow svg { width: 1.5rem; height: 1.5rem; } } .avalon-dropdown.open .dropdown__arrow svg { transform: rotate(180deg); } .avalon-dropdown .dropdown__label { position: relative; padding: 0 4rem 0 1.5rem; height: 4rem; display: flex; align-items: center; cursor: pointer; } @media screen and (min-width: 768px) { .avalon-dropdown .dropdown__label { height: 4.8rem; } } .avalon-dropdown .dropdown__menu { margin-top: 0.8rem; transform: translateY(0.2rem); transition: transform 200ms cubic-bezier(0, 1.7, 0.3, 1); } .avalon-dropdown.open .dropdown__menu { display: block; transform: none; } .avalon-dropdown .dropdown__menu-item { height: 5.2rem; padding: 0 1rem 0 1.6rem; font-weight: normal; display: flex; align-items: center; border-bottom: 0.1rem solid; border-color: #748faf; border-color: var(--dropdown__menu-item__borderColor); } .avalon-dropdown .dropdown__menu-item.selected { font-weight: bold; background-color: #748faf; background-color: var(--dropdown__menu-item--selected__backgroundColor); } .avalon-dropdown .dropdown__menu-item:last-child { border-bottom: none; } .avalon-dropdown .dropdown__menu-item:hover { cursor: pointer; background-color: #6b88aa; background-color: var(--dropdown__menu-item--hover__backgroundColor); } .avalon-dropdown .dropdown__menu-item-container { display: flex; align-items: center; height: 4rem; position: relative; cursor: pointer; width: 100%; padding: 0 0 0 2.5rem; font-size: 1.5rem; line-height: 1.3; } /* =========================================== component.facts ========================================= */ .avalon-facts { background: #111111; color: white; font-size: 1.4rem; } .avalon-facts:nth-child(1n + 2) { margin-top: 1rem; } .avalon-facts__title { color: white; text-align: center; } .avalon-facts__title--white { color: #ffffff !important; } .avalon-facts__title--black { color: #000000 !important; } .avalon-facts__title--yellow { color: #feb700 !important; } .avalon-facts__cta { text-align: center; margin-top: 3rem; } .avalon-facts__cta-link { min-width: 100px; } .avalon-facts .facts--link { display: block; padding-left: 0; } .avalon-facts .facts--link:last-child li:last-child { border-bottom: 0; padding-bottom: 1rem; } .avalon-facts .facts--link:last-child li:last-child a::after { margin-top: 1rem; } .avalon-facts .facts--link li { list-style-type: none; padding: 3rem 4.5rem 3rem 3rem; margin: 0; position: relative; border-bottom: 1px solid #4f4e56; } .avalon-facts .facts--link li:first-child { border-top: 1px solid #4f4e56; } .avalon-facts .facts--link li a { color: white; display: block; } .avalon-facts .facts--link li a:hover { color: white; text-decoration: none; } .avalon-facts .facts--link li a:after { content: ''; width: 4rem; height: 4rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-color: #feb700; background-image: url('/Components/DanskeSpil/Domain/Poker/Graphics/SpriteSheets/Icons/arrow.1.svg'); background-repeat: no-repeat; background-position: center center; background-size: 25%; color: #000000; text-align: center; border-radius: 50%; font-size: 2.4rem; } .avalon-facts .facts--link li a:active:after, .avalon-facts .facts--link li a:hover:after { background-color: #feb700; } .three-col__col--center .avalon-facts { background: transparent; color: #000000; } .three-col__col--center .avalon-facts__title { display: none; } .three-col__col--center .avalon-facts--link li a { color: #000000; } .three-col__col--center .avalon-facts ol li::before { top: -0.35em; } .three-col__col--center .avalon-facts ul li::before { top: -0.25em; } /* =========================================== component.game-item-module ========================================= */ .avalon-game-item-module { position: relative; width: 100%; } .avalon-game-item-module__link-area { display: block; } .avalon-game-item-module__cta { position: absolute; bottom: 10%; text-align: center; width: 100%; padding: 0 3rem; } .avalon-game-item-module__button { text-align: center; min-width: 15rem; font-weight: 900; cursor: pointer; } /* =========================================== component.heading ========================================= */ .avalon-heading *.text-right-aligned { text-align: right; } .avalon-heading *.text-left-aligned { text-align: left; } .avalon-heading *.text-centered { text-align: center; } .avalon-heading *.u-theme-font { font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; } .avalon-heading__sub-title { font-size: 2rem; line-height: 1.3; font-weight: 600; } .region-avalon-bingo .avalon-heading__sub-title { font-size: 1.6rem; line-height: 1.5; font-weight: normal; } @media screen and (min-width: 768px) { .avalon-heading__sub-title { font-size: 2.4rem; } } /* =========================================== component.hero ========================================= */ .avalon-hero { overflow: hidden; display: flex; flex-direction: column; background-position: top center; background-size: auto 100%; background-repeat: no-repeat; position: relative; min-height: 35rem; } .avalon-hero--link { cursor: pointer; } .avalon-hero__background-link { text-decoration: none; } .avalon-hero__background img { height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .avalon-hero__content { position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; height: calc(100% - 3rem); text-align: center; } @media screen and (min-width: 1440px) { .avalon-hero__content { height: calc(100% - 2rem); } } .mode-edit .avalon-hero__content { height: auto; } .avalon-hero__content .avalon-hero__primary-image { max-height: 100%; } @media (max-width: 767px) { .avalon-hero__content .avalon-hero__primary-image { height: auto; max-width: 100%; } } .avalon-hero__content .avalon-hero__heading { margin: 1rem 0; width: 100%; max-width: 767px; overflow-wrap: break-word; hyphens: auto; color: #ffffff; } .avalon-hero__content .avalon-hero__heading.black { color: black; } .avalon-hero__content .avalon-hero__heading.is-impact { font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; } .avalon-hero__content .avalon-hero__text { max-width: 767px; margin: 1rem 0; width: 100%; color: #ffffff; } .avalon-hero__content .avalon-hero__text.black { color: black; } @media (max-width: 767px) { .avalon-hero__content .avalon-hero__text { display: none; } } .avalon-hero__content-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; flex-direction: column; min-height: 7rem; padding: 0.5rem 0.5rem 1rem; } @media screen and (min-width: 768px) { .avalon-hero__content-bottom { padding-bottom: 0; } } .avalon-hero__content-bottom .rules-and-conditions { margin-bottom: -0.5rem; } @media screen and (min-width: 768px) { .avalon-hero__content-bottom .rules-and-conditions { margin-bottom: 0.5rem; } } .avalon-hero__cta-wrapper { display: flex; justify-content: center; flex-direction: column; } @media screen and (min-width: 768px) { .avalon-hero__cta-wrapper { flex-direction: row; } } .avalon-hero__cta { margin-left: 1.5rem; } .avalon-hero__cta:first-child { margin-left: 0; } @media (max-width: 767px) { .avalon-hero__cta { width: 100%; margin: 1rem 0 0; } .avalon-hero__cta:first-child { margin-top: 0; } } .avalon-hero__dynamic-content { display: flex; flex-direction: column; } @media screen and (min-width: 768px) { .avalon-hero__dynamic-content { flex-direction: row; } } /* =========================================== component.HeroJoker ========================================= */ .avalon-joker { margin: 2rem; } @media screen and (min-width: 768px) { .avalon-joker { margin: 2rem 5rem; } } .avalon-joker__image { height: 4rem; } @media screen and (min-width: 1024px) { .avalon-joker__image { height: 8rem; } } .avalon-joker__logo { display: flex; flex-direction: row; align-items: center; justify-content: center; } .avalon-joker__logo-image { width: 13rem; height: 5.5rem; margin-right: 1rem; } @media screen and (min-width: 1024px) { .avalon-joker__logo-image { width: 20rem; } } .avalon-joker__logo-text { font-size: 3rem; font-style: italic; margin: 0; } @media screen and (min-width: 1024px) { .avalon-joker__logo-text { font-size: 5rem; } } .avalon-joker__prize { font-size: 3rem; font-style: italic; font-weight: 600; margin: 0; line-height: 1; } @media screen and (min-width: 1024px) { .avalon-joker__prize { font-size: 6rem; } } .avalon-joker__prize::first-letter { text-transform: capitalize; } .avalon-joker__prize span { font-size: 2.5rem; } .hero-livecasino-games { position: relative; margin: 3rem 0; width: 100%; min-height: 34rem; } .hero-livecasino-games__bg { display: none; position: absolute; z-index: -1; top: 0; left: 0; height: 100%; width: 50%; background-position: center; background-repeat: repeat; clip-path: inset(0 0% 0% -1rem round 0.7rem); transform: skewX(-15deg) translateX(-5rem); } @media screen and (min-width: 768px) { .hero-livecasino-games__bg { display: block; } } @media screen and (min-width: 1440px) { .hero-livecasino-games__bg { left: -9rem; } } @media screen and (min-width: 768px) { .hero-livecasino-games--flipped .hero-livecasino-games__bg { left: auto; right: 0; clip-path: inset(0 0 0 1rem round 0.7rem); transform: skewX(15deg) translateX(5rem); } } @media screen and (min-width: 1440px) { .hero-livecasino-games--flipped .hero-livecasino-games__bg { right: -9rem; } } .hero-livecasino-games__bg-inner { height: 100%; width: 100%; transform: skewX(15deg) translateX(5rem); } @media screen and (min-width: 768px) { .hero-livecasino-games--flipped .hero-livecasino-games__bg-inner { transform: skewX(-15deg) translateX(-5rem); } } .hero-livecasino-games__inner { display: flex; flex-direction: column-reverse; max-width: 128rem; margin: 0 auto; } @media screen and (min-width: 768px) { .hero-livecasino-games__inner { flex-direction: row; } } @media screen and (min-width: 768px) { .hero-livecasino-games--flipped .hero-livecasino-games__inner { flex-direction: row-reverse; } } .hero-livecasino-games__cards { padding-bottom: 1rem; background-position: center; background-repeat: repeat; flex: 1 1 50%; } @media screen and (min-width: 768px) { .hero-livecasino-games__cards { padding: 2rem 0 0 2rem; background-size: 0; margin-right: 1rem; } .hero-livecasino-games--flipped .hero-livecasino-games__cards { padding: 2rem 2rem 0 0; margin-right: auto; margin-left: 1rem; } } .hero-livecasino-games__right { padding: 2rem; flex: 1 1 50%; } @media screen and (min-width: 768px) { .hero-livecasino-games__right { display: flex; flex-direction: column; justify-content: center; padding: 0 2rem 0 0; margin-left: 1rem; } .hero-livecasino-games--flipped .hero-livecasino-games__right { padding: 0 0 0 2rem; margin-left: auto; margin-right: 1rem; } } @media screen and (min-width: 1024px) { .hero-livecasino-games__right { padding: 0; } .hero-livecasino-games--flipped .hero-livecasino-games__right { padding: 0; } } .hero-livecasino-games__right a:not(.livecasino-button) { color: #a78952; text-decoration: none; font-weight: bold; } .hero-livecasino-games__right a:not(.livecasino-button):hover { text-decoration: underline; } .hero-livecasino-games__cards-header { position: relative; font-size: 1.8rem; font-weight: bold; color: white; padding: 2rem; } @media screen and (min-width: 768px) { .hero-livecasino-games__cards-header { display: none; } } .hero-livecasino-games__gamecard-content { margin: auto; display: block; } .is-mobile-detected .hero-livecasino-games__gamecard-content { width: 100%; max-width: unset; position: relative; overflow-x: auto; display: flex; flex-direction: column; margin-bottom: 1rem; } .is-mobile-detected .hero-livecasino-games__gamecard-content::-webkit-scrollbar { height: 1.6rem; } .is-mobile-detected .hero-livecasino-games__gamecard-content::-webkit-scrollbar-button { width: 1rem; background-color: transparent; } .is-mobile-detected .hero-livecasino-games__gamecard-content::-webkit-scrollbar-thumb { border-radius: 1rem; background-color: #a78952; border: 0.3rem solid #152626; } .is-mobile-detected .hero-livecasino-games__gamecard-content::-webkit-scrollbar-track { box-shadow: inset 0 0 0.6rem rgba(0, 0, 0, 0.9); border-radius: 1rem; background-color: rgba(0, 0, 0, 0.3); } .is-mobile-detected .hero-livecasino-games__gamecard-content::after { content: ''; padding: 1rem; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active { position: relative; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active .livecasino-grid__element { position: absolute; z-index: 0; filter: brightness(0.4) blur(0.05rem); pointer-events: none; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active .livecasino-grid__element .campaign-banner { visibility: hidden; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active:not([data-active-slide]) .livecasino-grid__element:nth-child(4), .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="1"] .livecasino-grid__element:nth-child(4) { transform: translate(-12rem) scale(0.8); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active:not([data-active-slide]) .livecasino-grid__element:nth-child(1), .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="1"] .livecasino-grid__element:nth-child(1) { position: relative; z-index: 1; filter: none; pointer-events: all; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active:not([data-active-slide]) .livecasino-grid__element:nth-child(1) .campaign-banner, .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="1"] .livecasino-grid__element:nth-child(1) .campaign-banner { visibility: visible; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active:not([data-active-slide]) .livecasino-grid__element:nth-child(2), .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="1"] .livecasino-grid__element:nth-child(2) { transform: translate(9rem) scale(0.8); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active:not([data-active-slide]) .livecasino-grid__element:nth-child(3), .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="1"] .livecasino-grid__element:nth-child(3) { transform: translate(0) scale(0); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="2"] .livecasino-grid__element:nth-child(1) { transform: translate(-12rem) scale(0.8); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="2"] .livecasino-grid__element:nth-child(2) { position: relative; z-index: 1; filter: none; pointer-events: all; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="2"] .livecasino-grid__element:nth-child(2) .campaign-banner { visibility: visible; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="2"] .livecasino-grid__element:nth-child(3) { transform: translate(9rem) scale(0.8); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="2"] .livecasino-grid__element:nth-child(4) { transform: translate(0) scale(0); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="3"] .livecasino-grid__element:nth-child(2) { transform: translate(-12rem) scale(0.8); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="3"] .livecasino-grid__element:nth-child(3) { position: relative; z-index: 1; filter: none; pointer-events: all; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="3"] .livecasino-grid__element:nth-child(3) .campaign-banner { visibility: visible; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="3"] .livecasino-grid__element:nth-child(4) { transform: translate(9rem) scale(0.8); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="3"] .livecasino-grid__element:nth-child(1) { transform: translate(0) scale(0); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="4"] .livecasino-grid__element:nth-child(3) { transform: translate(-12rem) scale(0.8); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="4"] .livecasino-grid__element:nth-child(4) { position: relative; z-index: 1; filter: none; pointer-events: all; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="4"] .livecasino-grid__element:nth-child(4) .campaign-banner { visibility: visible; } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="4"] .livecasino-grid__element:nth-child(1) { transform: translate(9rem) scale(0.8); } .hero-livecasino-games__gamecard-content .hero-livecasino-games__inner-wrapper.hero-livecasino-games__inner-wrapper--active[data-active-slide="4"] .livecasino-grid__element:nth-child(2) { transform: translate(0) scale(0); } .hero-livecasino-games__gamecard-content .livecasino-grid__element { text-align: left; width: 21rem; position: relative; transition: inherit; } .is-mobile-detected .hero-livecasino-games__gamecard-content .livecasino-grid__element { width: 21rem; margin-left: 2rem; margin-right: 0; } @media screen and (min-width: 768px) { .is-mobile-detected .hero-livecasino-games__gamecard-content .livecasino-grid__element { margin-left: 5rem; } } .is-mobile-detected .hero-livecasino-games__gamecard-content .livecasino-grid__element:last-child { margin-right: 2rem; } .hero-livecasino-games__gamecard-content .livecasino-grid__element .info-text { white-space: pre-wrap; } .hero-livecasino-games__gamecard-content .livecasino-grid__element .campaign-banner { position: absolute; z-index: -1; left: -3rem; width: 3rem; background: #223D3D; top: 3.5rem; bottom: 3.5rem; display: flex; justify-content: center; align-items: center; } .hero-livecasino-games__gamecard-content .livecasino-grid__element .campaign-banner p { transform: rotate(-90deg); color: #a78952; font-size: 1.5rem; text-shadow: 0.1rem 0.1rem 0.4rem rgba(0, 0, 0, 0.7); letter-spacing: 0.1rem; font-weight: bold; text-transform: uppercase; } .hero-livecasino-games__gamecard-content .livecasino-grid__element .campaign-banner::before, .hero-livecasino-games__gamecard-content .livecasino-grid__element .campaign-banner::after { height: 3.5rem; content: ''; background: url('/Components/DanskeSpil/Domain/AvalonLiveCasino/Graphics/livecasino-corner.svg') no-repeat center center; background-size: 100%; position: absolute; top: -3rem; right: -0.1rem; left: 0; } .hero-livecasino-games__gamecard-content .livecasino-grid__element .campaign-banner::after { top: auto; bottom: -3rem; transform: scaleY(-1); } .hero-livecasino-games__content--smooth { transition: 0.3s; } .hero-livecasino-games__content { display: inherit; width: 21rem; position: relative; float: right; } :not(.is-mobile-detected) .hero-livecasino-games__content { margin: auto; float: none; } @media screen and (min-width: 1440px) { :not(.is-mobile-detected) .hero-livecasino-games__content { margin: auto 12rem auto auto; } .hero-livecasino-games--flipped :not(.is-mobile-detected) .hero-livecasino-games__content { margin: auto auto auto 15rem; } } .is-mobile-detected .hero-livecasino-games__content { margin: 0; } .hero-livecasino-games__content .carousel-arrow { fill: white; transform: scale(2); z-index: 4; stroke: white; stroke-width: 0.2rem; top: 12rem; } .hero-livecasino-games__content .carousel-arrow.left { left: -6.2rem; } .hero-livecasino-games__content .carousel-arrow.right { right: -4.2rem; } .hero-livecasino-games__content .hero-livecasino-games__outer-wrapper { overflow: visible; transition: inherit; } .hero-livecasino-games__content .hero-livecasino-games__outer-wrapper .hero-livecasino-games__inner-wrapper { display: inline-flex; white-space: nowrap; transition: inherit; } .hero-livecasino-games__content .dots-wrapper { background: transparent; } .hero-livecasino-games__content .dots-wrapper .dot { border: 0.2rem solid #152626; width: 1rem; height: 1rem; margin: 0.3rem; cursor: pointer; } .hero-livecasino-games__content .dots-wrapper .dot.active { background: #e9be6f; } /* =========================================== object.icon ========================================= */ .avalon-icon { display: inline-block; vertical-align: middle; width: 3rem; height: 3rem; } .avalon-icon--lg { width: 4rem; height: 4rem; } .avalon-icon--sm { width: 1.5rem; height: 1.5rem; } .avalon-icon--xs { width: 1rem; height: 1rem; } /* =========================================== component.image ========================================= */ .avalon-image { position: relative; } .avalon-image.avalon-image--count-1 { height: 100%; } .avalon-image.avalon-image--count-1 .avalon-image-wrapper__caption { right: 0; bottom: 0; width: 50rem; padding: 3rem; position: absolute; background: rgba(0, 0, 0, 0.7); color: #ffffff; } @media screen and (max-width: 767px) { .avalon-image.avalon-image--count-1 .avalon-image-wrapper__caption { padding: 3rem; width: 100%; } } .avalon-image.avalon-image--count-2 { background: #111111; } .avalon-image.avalon-image--count-2 .avalon-image-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; } .avalon-image.avalon-image--count-2 .avalon-image-wrapper__single, .avalon-image.avalon-image--count-2 .avalon-image-wrapper__double { flex-basis: calc(50% - 2rem / 2); position: relative; } @media screen and (max-width: 767px) { .avalon-image.avalon-image--count-2 .avalon-image-wrapper__single, .avalon-image.avalon-image--count-2 .avalon-image-wrapper__double { flex-basis: 100%; } .avalon-image.avalon-image--count-2 .avalon-image-wrapper__single:not(:first-child), .avalon-image.avalon-image--count-2 .avalon-image-wrapper__double:not(:first-child) { margin-top: 2rem; } } .avalon-image.avalon-image--count-2 .avalon-image-wrapper__single img, .avalon-image.avalon-image--count-2 .avalon-image-wrapper__double img { display: block; width: 100%; height: auto; } .avalon-image.avalon-image--count-2 .avalon-image-wrapper__caption { width: 100%; padding: 3rem; background: rgba(0, 0, 0, 0.7); position: absolute; bottom: 0; right: 0; color: #ffffff; } @media screen and (max-width: 767px) { .avalon-image.avalon-image--count-2 .avalon-image-wrapper__caption { font-size: 1.6rem; } } /* =========================================== component.nav-spot ========================================= */ .avalon-nav-spot { padding: 3rem 0; /* ******** Modifying factors ******** */ /* ************ Elements ************* */ } .avalon-nav-spot + .avalon-nav-spot { margin-top: -1rem; padding: 0 0 3rem; } .avalon-nav-spot__wrapper { position: relative; } .avalon-nav-spot__caption { max-width: 50%; max-height: 100%; padding: 2rem; position: absolute; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); color: #ffffff; text-align: left; } @media screen and (max-width: 767px) { .avalon-nav-spot__caption { max-width: 80%; font-size: 1.4rem; } } .avalon-nav-spot__caption-body { margin: 0; } .avalon-nav-spot__caption-body:not(:empty) { margin-top: 1rem; } :root { --jackpot-winners__backgroundColor: #748FAF; --jackpot-winners__sort__backgroundColor: #5B799E; --jackpot-winners__sort-label__color: white; --jackpot-winners__winner__color: white; --jackpot-winners__winner__borderColor: #5B799E; --jackpot-winners__winner--even__backgroundColor: #6B88AA; --jackpot-winners__winner-img__backgroundColor: #5B799E; --jackpot-winners__winner-prize__color: #FEB700; --jackpot-winners__winner-cta__color: #000000; --jackpot-winners__winner-cta__backgroundColor: white; --jackpot-winners__winner-cta--hover__backgroundColor: #D9569E; --jackpot-winners__winner-cta--hover__color: white; --jackpot-winners__winner-cta__borderRadius: 2rem; --jackpot-winners__show-more__color: white; } :root .region-casino { --jackpot-winners__backgroundColor: #e9d9a6; --jackpot-winners__sort__backgroundColor: #d5bf85; --jackpot-winners__sort-label__color: #581231; --jackpot-winners__winner__color: #1a1a1a; --jackpot-winners__winner__borderColor: #c4a76d; --jackpot-winners__winner--even__backgroundColor: #E1D09A; --jackpot-winners__winner-img__backgroundColor: #d5bf85; --jackpot-winners__winner-prize__color: #581231; --jackpot-winners__winner-cta__color: white; --jackpot-winners__winner-cta__backgroundColor: #581231; --jackpot-winners__winner-cta--hover__backgroundColor: #824D65; --jackpot-winners__winner-cta__borderRadius: 0.2rem; --dropdown__color: #581231; --dropdown__content__backgroundColor: #E9D9A6; --dropdown__content--hover__backgroundColor: #E9D9A6; --dropdown__menu-item--hover__backgroundColor: #d5bf85; --dropdown__menu-item__borderColor: #D5BF85; --dropdown__arrow__svg__stroke: #581231; --jackpot-winners__show-more__color: #581231; } :root .region-avalon-bingo, :root .region-avalon-bingo-gvc, :root .region-avalon-bingo-slingo { --jackpot-winners__backgroundColor: #F7F6F0; --jackpot-winners__sort__backgroundColor: #2E933B; --jackpot-winners__sort-label__color: white; --jackpot-winners__winner__color: #333; --jackpot-winners__winner__borderColor: #D9D4BE; --jackpot-winners__winner--even__backgroundColor: #F3F0E1; --jackpot-winners__winner-img__backgroundColor: #61635D; --jackpot-winners__winner-prize__color: #333; --jackpot-winners__winner-cta__color: #000000; --jackpot-winners__winner-cta__backgroundColor: #FEB700; --jackpot-winners__winner-cta--hover__backgroundColor: #EBA800; --jackpot-winners__winner-cta__borderRadius: 2rem; --dropdown__color: #333; --dropdown__content__backgroundColor: #F7F6F0; --dropdown__content--hover__backgroundColor: #F7F6F0; --dropdown__menu-item--hover__backgroundColor: #efeee6; --dropdown__menu-item__borderColor: #D9D4BE; --dropdown__arrow__svg__stroke: #333; --jackpot-winners__show-more__color: #333; } .jackpot-winners__loading { display: flex; justify-content: center; align-items: center; min-height: 40rem; } .jackpot-winners__loading .loading-spinner--dark { display: none; } .region-casino .jackpot-winners__loading .loading-spinner, .region-avalon-bingo .jackpot-winners__loading .loading-spinner { display: none; } .region-casino .jackpot-winners__loading .loading-spinner--dark, .region-avalon-bingo .jackpot-winners__loading .loading-spinner--dark { display: block; } .jackpot-winners { width: calc(100% - 4rem); max-width: 104rem; margin: 2rem auto; background-color: var(--jackpot-winners__backgroundColor, #748FAF); border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.25); } .jackpot-winners__sort { background-color: var(--jackpot-winners__sort__backgroundColor, #5B799E); display: flex; width: 100%; flex-direction: row; justify-content: flex-end; align-items: center; padding: 1rem 2rem; } @media screen and (min-width: 1024px) { .jackpot-winners__sort { padding: 1rem 3rem; } } .jackpot-winners__sort-label { margin-right: 1rem; font-size: 1.6rem; line-height: 1; font-weight: 800; color: var(--jackpot-winners__sort-label__color, white); } .jackpot-winners__sort-dropdown .avalon-dropdown { text-transform: none; width: 130px; height: 3.2rem; } .jackpot-winners__sort-dropdown .avalon-dropdown .dropdown__label { height: 3.2rem; } .jackpot-winners__sort-dropdown .avalon-dropdown .dropdown__arrow { padding-right: 1rem; } .jackpot-winners__sort-dropdown .avalon-dropdown .dropdown__content, .jackpot-winners__sort-dropdown .avalon-dropdown.open .dropdown__content { box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.25); border: none; } .jackpot-winners__sort-dropdown .dropdown__menu .dropdown__menu-item { height: 3.5rem; } .jackpot-winners__sort-dropdown .dropdown__menu .dropdown__menu-item.selected { background-color: transparent; } .jackpot-winners__winners { padding: 0 2rem; } @media screen and (min-width: 1024px) { .jackpot-winners__winners { padding: 0; margin-bottom: 2rem; } } .jackpot-winners__winner { position: relative; color: var(--jackpot-winners__winner__color, white); border-bottom: 0.1rem solid; border-color: var(--jackpot-winners__winner__borderColor, #5B799E); padding-bottom: 2rem; margin: 2rem 0; display: grid; grid-template-columns: 12.5rem auto; grid-template-rows: auto auto 1fr 0 auto; column-gap: 1rem; grid-template-areas: "img player" "img date" "img prize" ". ." "game cta"; } @media screen and (min-width: 768px) { .jackpot-winners__winner { grid-template-columns: 10rem 1fr 1fr 14rem; grid-template-rows: auto auto 1fr; column-gap: 3rem; grid-template-areas: "img game prize cta" "img player prize cta" "img date prize cta"; } .jackpot-winners--bingo-manual .jackpot-winners__winner { grid-template-columns: auto 10rem 1fr 1fr 14rem; grid-template-areas: "date img game prize cta" "date img player prize cta"; } } @media screen and (min-width: 1024px) { .jackpot-winners__winner { grid-template-columns: 10rem 1fr 1fr 1fr 14rem; grid-template-rows: auto auto; grid-template-areas: "img game player prize cta" "img game date prize cta"; border-bottom: none; margin: 0; padding: 2rem 3rem; } .jackpot-winners--bingo-manual .jackpot-winners__winner { grid-template-columns: 10rem 1fr 1fr 1fr 1fr 14rem; grid-template-areas: "date img game player prize cta"; } .jackpot-winners__winner:nth-child(even) { background-color: var(--jackpot-winners__winner--even__backgroundColor, #6B88AA); } .jackpot-winners__winner:nth-child(7)::after { content: ""; position: absolute; left: 3rem; right: 3rem; bottom: 0; border-bottom: 0.1rem solid; border-color: var(--jackpot-winners__winner__borderColor, #5B799E); } } .jackpot-winners__winner-img { grid-area: img; background-color: var(--jackpot-winners__winner-img__backgroundColor, #5B799E); border-radius: 0.5rem; width: 10rem; height: 9rem; background-size: cover; background-position: top center; background-repeat: no-repeat; } .jackpot-winners__winner-game { grid-area: game; font-size: 1.5rem; font-weight: 800; line-height: 1.1; word-break: break-word; align-self: center; } @media screen and (min-width: 768px) { .jackpot-winners__winner-game { font-size: 1.8rem; margin-bottom: 1rem; } .jackpot-winners--bingo-manual .jackpot-winners__winner-game { align-self: flex-end; } } @media screen and (min-width: 1024px) { .jackpot-winners__winner-game { align-self: center; margin-bottom: 0; } .jackpot-winners--bingo-manual .jackpot-winners__winner-game { align-self: center; margin-bottom: 0; } } .jackpot-winners__winner-player { overflow: hidden; text-overflow: ellipsis; grid-area: player; font-size: 1.4rem; font-weight: 800; line-height: 1.3; } @media screen and (min-width: 768px) { .jackpot-winners__winner-player { font-size: 1.6rem; margin-bottom: 0.5rem; } } @media screen and (min-width: 1024px) { .jackpot-winners__winner-player { align-self: end; } .jackpot-winners--bingo-manual .jackpot-winners__winner-player { align-self: center; margin-bottom: 0; } } .jackpot-winners__winner-date { grid-area: date; font-size: 1.3rem; font-weight: normal; line-height: 1.3; margin-bottom: 1rem; white-space: nowrap; } @media screen and (min-width: 768px) { .jackpot-winners__winner-date { font-size: 1.6rem; margin: 0; align-self: center; } .jackpot-winners--bingo-manual .jackpot-winners__winner-date { font-size: 1.4rem; } } .jackpot-winners__winner-prize { grid-area: prize; font-size: 1.8rem; font-weight: 800; line-height: 1.3; color: var(--jackpot-winners__winner-prize__color, #FEB700); } @media screen and (min-width: 768px) { .jackpot-winners__winner-prize { font-size: 2rem; align-self: center; text-align: right; } } .jackpot-winners__winner-prize-type { font-size: 1.3rem; font-weight: normal; line-height: 1.3; } @media screen and (min-width: 768px) { .jackpot-winners__winner-prize-type { font-size: 1.4rem; } } .jackpot-winners__winner-cta { grid-area: cta; max-width: 14rem; height: 3.2rem; color: var(--jackpot-winners__winner-cta__color, #000000); background-color: var(--jackpot-winners__winner-cta__backgroundColor, white); display: flex; justify-content: center; align-items: center; font-size: 1.6rem; font-weight: bold; line-height: 1.3; border-radius: var(--jackpot-winners__winner-cta__borderRadius, 2rem); } .jackpot-winners__winner-cta:hover { color: var(--jackpot-winners__winner-cta--hover__color, white); background-color: var(--jackpot-winners__winner-cta--hover__backgroundColor, #D9569E); } @media screen and (min-width: 768px) { .jackpot-winners__winner-cta { align-self: center; } } .jackpot-winners__nav { display: flex; justify-content: center; padding: 0 2rem 2rem; } .jackpot-winners__nav .pagination .pagination__number:not(.active):hover { text-decoration: underline; } .jackpot-winners__show-more { cursor: pointer; position: relative; margin-bottom: 0.5rem; font-size: 1.6rem; font-weight: bold; color: var(--jackpot-winners__show-more__color, white); } .jackpot-winners__show-more::after { content: ''; position: absolute; bottom: -0.5rem; right: 50%; transform: translateX(50%) rotate(45deg); height: 0.9rem; width: 0.9rem; border-right: 0.2rem solid; border-bottom: 0.2rem solid; border-color: var(--jackpot-winners__show-more__color, white); transition-duration: 200ms; } /* =========================================== component.link-list ========================================= */ .avalon-link-list { background: #111111; color: white; } .avalon-link-list__title { color: #feb700; text-align: center; } .avalon-link-list__list { display: flex; flex-flow: row wrap; justify-content: space-between; list-style-type: none; padding: 0; } .avalon-link-list__item { flex: 0 0 50%; flex-basis: calc(100%/2 - 2rem / 2); border-top: 1px solid #6e6e64; } .avalon-link-list__item:nth-last-child(-n+2) { border-bottom: 1px solid #6e6e64; } @media screen and (max-width: 767px) { .avalon-link-list__item { flex-basis: 100%; } .avalon-link-list__item:not(:nth-last-child(1)) { border-bottom: 0; } } .avalon-link-list__link { display: flex; justify-content: space-between; align-items: center; padding: 2rem 1rem 2rem 2rem; text-transform: uppercase; } @media screen and (max-width: 767px) { .avalon-link-list__link { padding: 2rem 1rem 2rem 2rem; } } .avalon-link-list__link::after { flex: 0 0 4.5rem; height: 4.5rem; content: ''; border-radius: 50%; background: #feb700 url('/Components/DanskeSpil/Domain/Poker/Graphics/SpriteSheets/Icons/arrow.1.svg') no-repeat center center / 25%; } @media screen and (max-width: 767px) { .avalon-link-list__link::after { flex-basis: 3.5rem; height: 3.5rem; } } .avalon-link-list__link:hover { text-decoration: none; } .avalon-link-list__link:hover::after { background-color: #feb700; } .avalon-link-list__text { flex: 0 0 85%; flex-basis: calc(100% - 6rem); } /* =========================================== component.news ========================================= */ .news { text-align: center; } .news .news__section { position: relative; font-family: "Open Sans", Helvetica, Arial, sans-serif; background-color: white; border-color: #d59a00; background-repeat: no-repeat; background-size: cover; background-position: center center; } @media screen and (min-width: 1024px) { .news .news__section { padding-top: 0rem; } } .news .news__section .news-heading { color: #d59a00; position: relative; z-index: 2; } @media screen and (min-width: 1024px) { .news .news__section .news-heading { box-sizing: border-box; } } .news .news__section .news__content-wrapper { text-align: center; z-index: 4; padding: 0; margin: 0 auto; } .news .news__section .news__content-wrapper a.heading-link .news__headline { color: #d59a00; text-transform: uppercase; } .news .news__section .news__content-wrapper .news__block.single { padding: 15vw 0 6vw; } @media screen and (min-width: 1024px) { .news .news__section .news__content-wrapper .news__block.single { padding: 4rem 0; max-width: 58rem; } } .news .news__section .news__content-wrapper .news__block.single .news__headline { max-width: 85vw; font-size: 2rem; font-weight: 900; line-height: 5.6vw; margin: 1.5rem auto 2rem; color: #d59a00; } @media screen and (min-width: 1024px) { .news .news__section .news__content-wrapper .news__block.single .news__headline { font-size: 3.5rem; line-height: 3.5rem; } } .news .news__section .news__content-wrapper .news__block { width: 100%; max-width: 85vw; border-bottom: 0.1rem solid #d59a00; padding: 8vw 0; margin: auto; } @media screen and (min-width: 1024px) { .news .news__section .news__content-wrapper .news__block { max-width: 58rem; padding: 4rem 0; } } .news .news__section .news__content-wrapper .news__block:last-child { border-bottom: none; } .news .news__section .news__content-wrapper .news__block .news__date { font-size: 1.6rem; line-height: normal; } @media screen and (min-width: 768px) { .news .news__section .news__content-wrapper .news__block .news__date { font-size: 2rem; line-height: 2rem; } } .news .news__section .news__content-wrapper .news__block .news__headline { max-width: 86.5vw; font-size: 2.4rem; font-weight: 900; line-height: 5.6vw; margin: 1.5rem auto 2rem; text-transform: uppercase; } @media screen and (min-width: 768px) { .news .news__section .news__content-wrapper .news__block .news__headline { font-size: 3.3rem; line-height: 4rem; } } @media screen and (min-width: 1024px) { .news .news__section .news__content-wrapper .news__block .news__headline { font-size: 3.6rem; } } .news .news__section .news__content-wrapper .news__block .news__headline a.heading-link { text-decoration: none; color: #d59a00; } .news .news__section .news__content-wrapper .news__block .news__teaser-details { font-size: 1.6rem; display: block; margin-bottom: 5vw; } @media screen and (min-width: 768px) { .news .news__section .news__content-wrapper .news__block .news__teaser-details { font-size: 1.8rem; margin-bottom: 2rem; } } @media screen and (min-width: 1024px) { .news .news__section .news__content-wrapper .news__block .news__teaser-details { font-size: 1.6rem; } } .news .news__section .news__content-wrapper .news__block .svg-icon-arrow-right { position: absolute; top: -0.3vw; right: 3vw; } @media screen and (min-width: 1024px) { .news .news__section .news__content-wrapper .news__block .svg-icon-arrow-right { position: absolute; top: 1.2rem; right: 0.6rem; } } .news .news__section .news__content-wrapper .news__block .svg-icon-arrow-right svg { fill: black; width: 0; height: 0; } @media screen and (min-width: 1024px) { .news .news__section .news__content-wrapper .news__block .svg-icon-arrow-right svg { width: 1.3rem; height: 0.8rem; } } .news .news__section .news__content-wrapper .news__block .btn { color: #000000; position: relative; background-color: #FEB700; text-decoration: none; box-sizing: border-box; display: inline-block; padding: 1.3rem; margin: 2rem auto 0; } @media screen and (min-width: 1024px) { .news .news__section .news__content-wrapper .news__block .btn { padding: 1.3rem 2.5rem 1.3rem 1.3rem; } } .news .news__section .top-spot-filling { min-height: 35rem; } .onboarding-spot { position: relative; } @media (min-width: 1000px) { .onboarding-spot { background-image: radial-gradient(circle at top, #00704B -33%, #003F2A 103%, #003825 10%); margin-bottom: 4rem; } } .onboarding-spot .onboarding-spot__container { max-width: 1840px; margin: 0 auto; padding: 0; } @media (min-width: 1000px) { .onboarding-spot .onboarding-spot__container { padding: 0 2rem; display: flex; } } .onboarding-spot .onboarding-spot__graphic { background-size: cover; background-position: center; } @media (min-width: 1000px) { .onboarding-spot .onboarding-spot__graphic { flex: 1; margin-right: 2rem; position: relative; transform: translateY(-2rem); margin-bottom: -4rem; border-radius: 0.6rem; } } .onboarding-spot .onboarding-spot__graphic:after { content: ""; padding-bottom: 80%; display: block; } @media (min-width: 1000px) { .onboarding-spot .onboarding-spot__graphic:after { padding-bottom: 0; } } .onboarding-spot .onboarding-spot__background-bottom { position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: 100%; } @media (min-width: 1000px) { .onboarding-spot .onboarding-spot__background-bottom { height: auto; top: 50%; bottom: -4rem; } } .onboarding-spot .onboarding-spot__content { position: relative; width: 85%; margin: 0 auto -20vw; transform: translateY(-20vw); background-image: radial-gradient(circle at top, #00704B -33%, #003F2A 103%, #003825 10%); color: white; border-radius: 0.6rem; } @media (min-width: 1000px) { .onboarding-spot .onboarding-spot__content { flex: 1; width: auto; margin: 0; transform: none; background-image: none; border-radius: 0; } } .onboarding-spot .onboarding-spot__text { padding: 4rem; } @media (min-width: 1000px) { .onboarding-spot .onboarding-spot__text { padding: 4rem 2rem; } } .onboarding-spot .onboarding-spot__text .onboarding-spot__headline { text-transform: none; font-size: 4rem; line-height: 1.25; font-weight: 900; } .onboarding-spot .onboarding-spot__text .onboarding-spot__lead { font-size: 1.6rem; line-height: 1.35; } .onboarding-spot .onboarding-spot__content-cta { color: black; outline: none; border: none; cursor: pointer; font-size: 1.4rem; text-decoration: none; text-align: center; line-height: 3.5rem; transition: all 200ms; border-radius: 0.6rem; font-weight: 900; background-color: #FEB700; display: inline-block; padding: 0 3rem; white-space: nowrap; } .onboarding-spot .onboarding-spot__content-cta:hover { background-color: #cb9200; } .page-nav-header { background-color: #d59a00; width: 100%; height: 5rem; box-shadow: 0 0.4rem 0.2rem -0.2rem rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; border-top: 1px solid #d59a00; display: none; } .page-nav-header.is-ready { display: block; } .page-nav-header::before, .page-nav-header::after { pointer-events: none; content: ''; width: 2rem; height: 100%; background: #d59a00; background: linear-gradient(270deg, transparent 0%, #d59a00 100%); position: absolute; left: 0; top: 0; } .page-nav-header::after { left: auto; right: 0; transform: scaleX(-1); } .page-nav-header__content { max-width: 1280px; margin: 0 auto; display: flex; flex-flow: row nowrap; min-height: 5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .page-nav-header__content::-webkit-scrollbar { display: none; } .page-nav-header__item { user-select: none; margin-left: 1rem; margin-right: 1rem; display: flex; align-items: center; padding-left: 1rem; padding-right: 1rem; color: white; flex: 0 0 auto; } .page-nav-header__item:hover { color: #000000; opacity: 0.5; } .page-nav-header__item:first-child { padding-left: 1.5rem; } .page-nav-header__item:last-child { padding-right: 2rem; } .page-nav-header-static-fix { height: 5rem; } .mode-edit .page-nav-header-target { display: flex; background-color: orange; border: 1px dotted black; min-height: 10px; padding: 1rem; justify-content: center; align-items: center; flex-flow: column nowrap; } .mode-edit .page-nav-header-target__text { font-size: 1.4rem; font-weight: 600; } :root { --pagination__number__color: white; --pagination__number--active__backgroundColor: #D9569E; --pagination__number--active__color: white; } :root .region-casino { --pagination__number__color: #1c1c1c; --pagination__number--active__backgroundColor: #581231; --pagination__number--active__color: white; } :root .region-avalon-bingo, :root .region-avalon-bingo-gvc, :root .region-avalon-bingo-slingo { --pagination__number__color: #353535; --pagination__number--active__backgroundColor: #FEB700; --pagination__number--active__color: #e8e8e8; } .avalon-area .pagination { margin: 0 auto; display: flex; justify-content: center; user-select: none; } .avalon-area .pagination__number { color: var(--pagination__number__color, white); font-weight: bold; font-size: 1.5rem; padding: 0 1.1rem; cursor: pointer; height: 3rem; width: 3rem; display: flex; justify-content: center; align-items: center; margin-right: 0.1rem; } @media screen and (min-width: 768px) { .avalon-area .pagination__number { font-size: 1.9rem; } } .avalon-area .pagination__number:active, .avalon-area .pagination__number.active { background-color: var(--pagination__number--active__backgroundColor, #D9569E); color: var(--pagination__number--active__color, white); border-radius: 0.5rem; } .avalon-area .pagination__arrow { cursor: pointer; transform: rotate(90deg); display: flex; justify-content: center; align-items: center; height: 3rem; width: 3rem; margin-right: 0.1rem; } .avalon-area .pagination__arrow:last-child { margin-right: 0; transform: rotate(-90deg); } .avalon-area .pagination__arrow:active { background-color: var(--pagination__number--active__backgroundColor, #D9569E); border-radius: 0.5rem; } .avalon-area .pagination__arrow:active svg { stroke: var(--pagination__number--active__color, white); } .avalon-area .pagination__arrow svg { width: 1.3rem; height: 1.3rem; stroke: var(--pagination__number__color, white); transition: transform 150ms ease-out; } @media screen and (min-width: 768px) { .avalon-area .pagination__arrow svg { width: 1.5rem; height: 1.5rem; } } .podcast-overview { margin: 0 auto; width: 90%; } @media screen and (min-width: 950px) { .podcast-overview { max-width: 100rem; } } .podcast-overview__header { width: 100%; margin: 5rem 0; display: flex; justify-content: center; } .podcast-overview__episodes-wrapper { width: 100%; position: relative; } .podcast-overview__tags-and-search { font-size: 1.2rem; line-height: 1.6; display: flex; margin-bottom: 3rem; justify-content: space-between; } @media screen and (min-width: 1024px) { .podcast-overview__tags-and-search { justify-content: flex-end; } } .podcast-overview__tags { position: relative; display: flex; flex-direction: row; width: calc(100% - 5.2rem); transition-duration: 200ms; } @media screen and (min-width: 768px) { .podcast-overview__tags { width: calc(50% - 2rem); } } @media screen and (min-width: 1024px) { .podcast-overview__tags { width: auto; flex: 1; position: absolute; left: 0; z-index: 10; } } .podcast-overview__tags-and-search--toggle .podcast-overview__tags { width: 8rem; } @media screen and (min-width: 768px) { .podcast-overview__tags-and-search--toggle .podcast-overview__tags { width: calc(50% - 2rem); } } .podcast-overview__dropdown { position: absolute; z-index: 10; border-radius: 1rem; border: inherit solid 0.2rem; width: 100%; background-color: white; overflow: hidden; cursor: pointer; height: 3.2rem; } .podcast-overview__dropdown::after { content: ''; position: absolute; top: 0.1rem; right: 1.2rem; transform: translateY(0.9rem) rotate(45deg); height: 0.7rem; width: 0.7rem; border-bottom: inherit solid 0.2rem; border-right: inherit solid 0.2rem; transition-duration: 200ms; } @media screen and (min-width: 1024px) { .podcast-overview__dropdown { width: 25rem; position: relative; } } .podcast-overview__dropdown--open { height: auto; } .podcast-overview__dropdown--open::after { transform: translateY(1.2rem) rotate(225deg); } .podcast-overview__dropdown-selected-item { height: 2.8rem; line-height: 2.8rem; padding: 0 2rem 0 1.5rem; transition-duration: 200ms; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; z-index: 10; } .podcast-overview__dropdown-items { position: relative; transform: translateY(-0.7rem); transition: transform 200ms cubic-bezier(0, 1.7, 0.3, 1); overflow: hidden; background-color: white; margin: 0 1rem 0.5rem; padding-top: 0.5rem; } .podcast-overview__dropdown--open .podcast-overview__dropdown-items { border-top: 0.1rem solid inherit; transform: none; } .podcast-overview__dropdown-item { height: 3rem; line-height: 3rem; padding: 0 0.5rem; cursor: pointer; } .podcast-overview__dropdown-item:hover { font-weight: bold; } .podcast-overview__dropdown-item--selected { font-weight: 700; } .podcast-overview__sort-after { display: none; white-space: nowrap; margin-right: 1rem; line-height: 3rem; } @media screen and (min-width: 1024px) { .podcast-overview__sort-after { display: block; } } .podcast-overview__tag { display: none; padding: 1rem 1.5rem; user-select: none; position: relative; z-index: 1; margin-bottom: 1rem; } .podcast-overview__tag::after { border-radius: 0.6rem; content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: scaleX(0); opacity: 0; background-color: black; z-index: -1; } .podcast-overview__tag:hover { cursor: pointer; } .podcast-overview__tag:not(:last-child) { margin-right: 1rem; } .podcast-overview__tag--selected { animation: podcast-tag-bump 200ms; color: white; text-shadow: 0.1rem 0 0 white; } .podcast-overview__tag--selected::after { animation: podcast-tag-curtain 0.5s forwards; } @media screen and (min-width: 950px) { .podcast-overview__tag { display: block; } } .podcast-overview__search { overflow: hidden; position: relative; border-radius: 1rem; height: 3.2rem; width: 3.2rem; border: inherit solid 0.2rem; line-height: 3.2rem; transition-duration: 200ms; } @media screen and (min-width: 768px) { .podcast-overview__search { width: calc(50% - 2rem); } } @media screen and (min-width: 1024px) { .podcast-overview__search { width: 25rem; } } .podcast-overview__tags-and-search--toggle .podcast-overview__search { width: calc(100% - 10rem); } @media screen and (min-width: 768px) { .podcast-overview__tags-and-search--toggle .podcast-overview__search { width: calc(50% - 2rem); } } @media screen and (min-width: 1024px) { .podcast-overview__tags-and-search--toggle .podcast-overview__search { width: 25rem; } } .podcast-overview__search input { background: transparent; border: none; padding: 0 1rem 0 3.5rem; width: 100%; transition-duration: 200ms; height: 3rem; line-height: 3rem; position: relative; top: -0.2rem; } .podcast-overview__search input:focus { outline: none; } .podcast-overview__search-loop { position: absolute; top: 50%; left: 0.4rem; transform: translateY(-50%); width: 2rem; } @media screen and (min-width: 768px) { .podcast-overview__search-loop { left: 0.8rem; } } .podcast-overview__episodes { display: flex; flex-wrap: wrap; width: 100%; flex-direction: column; justify-content: space-between; } @media screen and (min-width: 768px) { .podcast-overview__episodes { flex-direction: row; } } .podcast-overview__episode { cursor: pointer; width: 100%; transition: transform 0.1s; transform: scale(1); display: flex; justify-content: space-between; height: 8.8rem; margin-bottom: 1.5rem; color: black; } .podcast-overview__episode:focus { outline: none; } .podcast-overview__episode:hover { animation: podcast-episode-bump 0.2s; transform: scale(1.03); } @media screen and (min-width: 768px) { .podcast-overview__episode { margin-bottom: 2rem; width: calc(50% - 2rem); } } @media screen and (min-width: 1024px) { .podcast-overview__episode { margin-bottom: 4rem; width: calc(33.3333% - 3rem); height: auto; flex-direction: column; } } .podcast-overview__episode-image-wrapper { position: relative; width: 9rem; height: 9rem; margin-right: 1rem; line-height: 0; } @media screen and (min-width: 1024px) { .podcast-overview__episode-image-wrapper { margin-right: 0; width: 100%; height: auto; } } .podcast-overview__episode-image { object-fit: cover; width: 9rem; height: 9rem; } @media screen and (min-width: 1024px) { .podcast-overview__episode-image { width: 100%; height: 100%; } } .podcast-overview__episode-duration { position: absolute; bottom: 0; right: 0; color: white; font-size: 1.3rem; line-height: 3rem; padding: 0 1.5rem; text-align: center; background: rgba(0, 0, 0, 0.75); font-weight: 300; } .podcast-overview__episode-content-wrapper { overflow: hidden; flex-basis: calc(100% - 11rem); } .podcast-overview__episode-title { text-transform: uppercase; font-weight: 700; line-height: 1.1; font-size: 1.4rem; margin-bottom: 0.5rem; font-style: italic; font-family: Oddset, Impact, 'Anton Regular', Helvetica, Arial, sans-serif; } @media screen and (min-width: 1024px) { .podcast-overview__episode-title { font-weight: 700; font-size: 2rem; margin: 1rem 0; } } .podcast-overview__episode-description { position: relative; font-size: 1.4rem; line-height: 1.4rem; padding-bottom: 0.1rem; color: inherit; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } .podcast-overview__episode-description--3-lines { -webkit-line-clamp: 3; } @media screen and (min-width: 1024px) { .podcast-overview__episode-description { height: 8rem; font-size: 1.4rem; line-height: 2rem; -webkit-line-clamp: 4; } .podcast-overview__episode-description--3-lines { -webkit-line-clamp: 5; height: unset; } } .podcast-overview__episode-separator { display: none; background: inherit; width: 100%; height: 0.1rem; margin: 1rem 0 0.5rem; } @media screen and (min-width: 1024px) { .podcast-overview__episode-separator { display: block; } } .podcast-overview__episode-release-date { margin: 0; font-size: 1rem; color: inherit; } @media screen and (min-width: 1024px) { .podcast-overview__episode-release-date--mobile { display: none; } } .podcast-overview__episode-release-date--desktop { display: none; font-size: 1.2rem; } @media screen and (min-width: 1024px) { .podcast-overview__episode-release-date--desktop { display: block; } } .podcast-overview__show-more-wrapper { display: flex; justify-content: center; width: 100%; } .podcast-overview__show-more { margin-bottom: 2rem; color: white; padding: 1rem 2rem; border-radius: 0.5rem; background-color: #000000; cursor: pointer; user-select: none; text-align: center; font-size: 1.3rem; } .episode-overview__podcast-description { max-width: 145rem; display: flex; flex-direction: column; align-items: center; margin: 0 auto 5rem; } .episode-overview__podcast-description-inner-wrapper { width: 100%; text-align: center; margin-top: 1rem; } @media screen and (min-width: 950px) { .episode-overview__podcast-description-inner-wrapper { text-align: left; display: flex; align-items: center; flex-direction: row-reverse; margin-top: 5rem; } } @media screen and (min-width: 950px) { .episode-overview__podcast-description-text-wrapper { flex-basis: 50%; } } .episode-overview__podcast-description-header { font-style: italic; font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; font-size: 2.5rem; font-weight: 600; } .episode-overview__podcast-description-image-wrapper { margin: 2rem auto; width: 65%; } @media screen and (min-width: 950px) { .episode-overview__podcast-description-image-wrapper { margin-right: 2rem; flex-basis: 50%; align-items: center; } } .episode-overview__podcast-description-image { width: 100%; } @keyframes podcast-episode-bump { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1.03); } } @keyframes podcast-tag-curtain { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; transform: scaleX(1.02); } 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 1; transform: scaleX(1); } } @keyframes podcast-tag-bump { 0% { transform: scale(1); } 20% { transform: scale(1.06); } 60% { transform: scale(1, 1.04); } 100% { transform: scale(1); } } .episode-overview .episode-overview__back-link-wrapper { width: 90%; max-width: 145rem; margin: auto; padding: 2rem 0; display: flex; justify-content: flex-start; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__back-link-wrapper { position: absolute; top: 0; left: 0; width: auto; } } .episode-overview .episode-overview__back-link-wrapper .episode-overview__back-link { text-decoration: none; display: flex; color: white; align-items: center; } .episode-overview .episode-overview__back-link-wrapper .episode-overview__back-link::before { content: ''; margin-right: 1rem; display: block; width: 1.5rem; height: 1.5rem; border-bottom: 0.3rem solid white; border-left: 0.3rem solid white; transform: rotate(45deg); } .episode-overview .episode-overview__back-link-wrapper .episode-overview__back-link:hover::before { animation: back-arrow-hover-animation 0.3s alternate infinite linear; } @keyframes back-arrow-hover-animation { from { transform: rotate(45deg) translate(0); } to { transform: rotate(45deg) translate(-0.3rem, 0.3rem); } } .episode-overview .episode-overview__episode-content { background-color: inherit; width: 100%; position: relative; margin-bottom: calc(0.2 * 100vw); } .episode-overview .episode-overview__episode-content::after { bottom: 0; left: 50%; content: ''; width: 120%; height: calc(0.2 * 100vw); background: inherit; z-index: -1; position: absolute; transform: rotate(-10deg) translateX(-50%); } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper { max-width: 145rem; align-items: center; display: flex; flex-direction: column; position: relative; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper { padding-top: 2.5rem; width: 90%; margin: 0 auto; flex-direction: row-reverse; justify-content: space-between; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__imagewrap { display: flex; flex: 1; flex-direction: column; width: 60%; position: relative; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__imagewrap { flex-direction: initial; width: 50%; justify-content: flex-end; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__imagewrap .episode-overview__image { width: 100%; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__imagewrap .episode-overview__image { width: 80%; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__imagewrap .episode-overview__episode-duration { position: absolute; bottom: 0; font-size: 1.2rem; right: 0; background: rgba(0, 0, 0, 0.5); color: white; padding: 0.2rem 1rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__imagewrap .episode-overview__episode-duration { display: none; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper { display: flex; flex: 1; flex-direction: column; align-items: center; text-align: center; margin-top: 2rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper { margin-top: 0; width: 50%; text-align: left; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__content-icons { margin-top: 1rem; display: none; color: white; width: 100%; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__content-icons { display: flex; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__content-icons .episode-overview__button-text { width: 100%; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__content-icons .episode-overview__episode-content-icon { height: 4rem; align-items: center; display: none; margin-right: 2rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__content-icons .episode-overview__episode-content-icon { display: flex; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__content-icons .episode-overview__episode-content-icon svg { width: 1.5rem; height: 1.5rem; fill: white; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__content-icons .episode-overview__episode-content-icon .episode-overview__episode-content-text { margin: 0 0.5rem; color: white; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__title { display: block; color: white; width: 100%; margin: auto; font-style: italic; font-family: Oddset, Impact, 'Anton Regular', Helvetica, Arial, sans-serif; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper { display: flex; align-items: center; margin: 2rem 0 2rem; flex-direction: column; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper { flex-direction: row; width: 100%; order: 1; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__button { color: white; padding: 1rem 2rem; border-radius: 0.5rem; background: #1c1c1c; cursor: pointer; font-size: 1.3rem; width: 13rem; font-weight: bold; display: flex; align-items: center; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__button svg { height: 2rem; width: 25%; margin-right: 1rem; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__button .episode-overview__button-text { width: 100%; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__button { margin-bottom: 0; width: 15rem; font-size: 1.6rem; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__episode-content-icon { height: 4rem; align-items: center; display: flex; order: -1; margin-bottom: 1rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__episode-content-icon { display: none; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__episode-content-icon > svg { width: 2.5rem; height: 2.5rem; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__episode-content-icon .episode-overview__episode-content-text { margin: 0 1rem; color: white; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__open-in-other-player { display: none; font-size: 1.5rem; margin-left: 2rem; cursor: pointer; text-decoration: underline; color: white; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__open-in-other-player:focus { outline: none; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__button-wrapper .episode-overview__open-in-other-player { display: block; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__description { color: white; width: 90%; margin: auto; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__description { width: 100%; } } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__link-wrapper { margin-top: 2rem; color: white; } .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__link-wrapper .episode-overview__link-wrapper-link { text-decoration: underline; font-weight: 600; color: white; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-content .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description-wrapper .episode-overview__link-wrapper { order: 1; align-self: flex-start; margin-top: 0; } } .episode-overview .episode-overview__episode-list { display: flex; flex-direction: column; padding: 0 4rem; max-width: 145rem; margin: 0 auto; } @media screen and (min-width: 480px) { .episode-overview .episode-overview__episode-list { flex-direction: row; flex-wrap: wrap; justify-content: space-between; } } @media screen and (min-width: 768px) { .episode-overview .episode-overview__episode-list { padding-bottom: 4rem; } } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list { flex-direction: column; } } .episode-overview .episode-overview__episode-list .episode-overview__episode { width: 100%; margin: 0.3rem 0; display: flex; align-items: flex-start; transition: transform 0.1s; transform: scale(1); color: black; } .episode-overview .episode-overview__episode-list .episode-overview__episode:focus { outline: none; } .episode-overview .episode-overview__episode-list .episode-overview__episode:hover { cursor: pointer; transform: scale(1.03); animation: podcast-episode-bump 0.2s; } @media screen and (min-width: 480px) { .episode-overview .episode-overview__episode-list .episode-overview__episode { width: 47.5%; } } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode { width: 100%; margin-right: 0; align-items: flex-start; justify-content: center; } .episode-overview .episode-overview__episode-list .episode-overview__episode:not(:last-child) { margin-bottom: 2rem; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-calendar { display: none; background-color: inherit; margin-right: 2rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-calendar { display: block; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-calendar > div { display: flex; justify-content: center; padding: 0.1rem 1rem; color: white; } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-calendar .episode-overview__episode-calendar-day { position: relative; font-weight: 700; font-size: 2.1rem; } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-calendar .episode-overview__episode-calendar-day::after { content: ''; display: block; position: absolute; bottom: 0; height: 0.1rem; width: 100%; background-color: inherit; } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-image-wrapper { flex-basis: 35%; position: relative; margin-right: 1rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-image-wrapper { flex-basis: unset; height: 20rem; width: 35rem; overflow: hidden; display: flex; align-items: center; margin-right: 3rem; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-image-wrapper .episode-overview__episode-image { max-width: 100%; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-image-wrapper .episode-overview__episode-image { min-height: 100%; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-image-wrapper .episode-overview__episode-duration { position: absolute; bottom: 0.7rem; font-size: 1.2rem; right: 0; background: rgba(0, 0, 0, 0.5); color: white; padding: 0.2rem 1rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-image-wrapper .episode-overview__episode-duration { display: none; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper { flex-basis: 65%; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper { flex-basis: 50%; display: flex; flex-direction: column; justify-content: space-between; height: 20rem; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-content-inner-wrapper .episode-overview__episode-title { font-style: italic; font-family: Oddset, Impact, 'Anton Regular', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.4rem; margin-bottom: 0.5rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-content-inner-wrapper .episode-overview__episode-title { font-size: 2rem; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description { position: relative; font-size: 1.4rem; line-height: 1; padding-bottom: 0.1rem; color: inherit; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description--3-lines { -webkit-line-clamp: 3; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-content-inner-wrapper .episode-overview__episode-description { font-size: 1.6rem; line-height: 1.1; -webkit-line-clamp: 7; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-content-inner-wrapper .episode-overview__episode-release-date { margin: 0; font-size: 1rem; color: inherit; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-content-inner-wrapper .episode-overview__episode-release-date { display: none; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-icons { display: none; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-icons { display: flex; height: 4rem; } } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-icons .episode-overview__episode-play-icon { display: flex; justify-content: center; align-items: center; width: 4rem; border-radius: 50%; background-color: inherit; } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-icons .episode-overview__episode-play-icon svg { width: 50%; margin-left: 0.2rem; } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-icons .episode-overview__episode-duration-icon { height: 4rem; display: flex; align-items: center; margin-left: 2rem; } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-icons .episode-overview__episode-duration-icon > svg { width: 2.5rem; height: 2.5rem; fill: #323232; } .episode-overview .episode-overview__episode-list .episode-overview__episode .episode-overview__episode-content-wrapper .episode-overview__episode-icons .episode-overview__episode-duration-icon .episode-overview__episode-duration-text { margin: 0 0.5rem; } @keyframes podcast-episode-bump { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1.03); } } .episode-overview .episode-overview__episode-list .episode-overview__show-more { margin: 2rem auto; color: white; padding: 1rem 2rem; border-radius: 0.5rem; background: #000000; cursor: pointer; user-select: none; text-align: center; font-size: 1.3rem; width: 11rem; } .episode-overview .episode-overview__episode-list .episode-overview__show-more--disabled { display: none; } .episode-overview .episode-overview__series-description-wrapper { position: relative; margin-top: calc(0.15 * 100vw); background-color: inherit; display: flex; justify-content: center; padding-bottom: 5rem; } .episode-overview .episode-overview__series-description-wrapper::before { top: calc(-0.2 * 100vw); left: 50%; content: ''; width: 120%; height: calc(0.2 * 100vw); background: inherit; z-index: -1; position: absolute; transform: rotate(-10deg) translateX(-50%); } .episode-overview .episode-overview__series-description-wrapper .episode-overview__series-description { max-width: 145rem; display: flex; flex-direction: column; align-items: center; color: white; } .episode-overview .episode-overview__series-description-wrapper .episode-overview__series-description .episode-overview__series-description-inner-wrapper { width: 85%; text-align: center; margin-top: 1rem; } @media screen and (min-width: 950px) { .episode-overview .episode-overview__series-description-wrapper .episode-overview__series-description .episode-overview__series-description-inner-wrapper { display: flex; align-items: center; text-align: left; } } @media screen and (min-width: 950px) { .episode-overview .episode-overview__series-description-wrapper .episode-overview__series-description .episode-overview__series-description-inner-wrapper .episode-overview__series-description-text-wrapper { flex-basis: 50%; } } .episode-overview .episode-overview__series-description-wrapper .episode-overview__series-description .episode-overview__series-description-inner-wrapper .episode-overview__series-description-text-wrapper .episode-overview__series-description-header { font-style: italic; font-family: Oddset, Impact, 'Anton Regular', Helvetica, Arial, sans-serif; font-size: 2.5rem; font-weight: 600; } .episode-overview .episode-overview__series-description-wrapper .episode-overview__series-description .episode-overview__series-description-inner-wrapper .episode-overview__series-description-image-wrapper { margin: 2rem auto; width: 65%; box-shadow: 0 0 0.9rem 0 rgba(130, 130, 130, 0.4); } @media screen and (min-width: 950px) { .episode-overview .episode-overview__series-description-wrapper .episode-overview__series-description .episode-overview__series-description-inner-wrapper .episode-overview__series-description-image-wrapper { width: 21%; } } .episode-overview .episode-overview__series-description-wrapper .episode-overview__series-description .episode-overview__series-description-inner-wrapper .episode-overview__series-description-image-wrapper .episode-overview__series-description-image { width: 100%; display: block; } .promo-video-spot { position: relative; padding: 3rem 2rem; display: grid; gap: 0.1rem; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "video" "pretitle" "title" "details" "cta" "text" "screenshots"; } @media screen and (min-width: 768px) { .promo-video-spot { padding: 4rem; display: grid; grid-template-columns: 1fr 23%; grid-template-rows: auto; grid-template-areas: "video screenshots" "pretitle pretitle" "title title" "details details" "cta cta" "text text"; } } @media screen and (min-width: 768px) and (max-width: 1215px) { .promo-video-spot.promo-video-spot--no-screenshots { grid-template-columns: 1fr; grid-template-areas: "video" "pretitle" "title" "details" "cta" "text"; } } @media screen and (min-width: 1216px) { .promo-video-spot { padding-top: 5rem; grid-template-columns: 1fr minmax(auto, 76rem) minmax(auto, 77rem) 1fr; grid-template-rows: repeat(4, auto) 1fr auto; grid-template-areas: ". pretitle video ." ". title video ." ". text video ." ". details video ." ". cta video ." ". screenshots screenshots ."; } } .promo-video-spot__pretitle { font-family: var(--font-family-raleway); font-weight: 900; font-style: italic; grid-area: pretitle; font-size: 2rem; line-height: 1.35; max-width: 62rem; margin-bottom: 0.5rem; } .promo-video-spot__title { position: relative; font-family: var(--font-family-raleway); font-weight: 900; font-style: italic; text-transform: uppercase; grid-area: title; font-size: 3rem; line-height: 1.35; max-width: 62rem; margin-bottom: 3.5rem; } .promo-video-spot__title::after { content: ""; position: absolute; bottom: -0.6rem; left: 0; height: 0.5rem; width: 10rem; background-color: #a78952; border-radius: 0.5rem; } .promo-video-spot__text { grid-area: text; max-width: 62rem; font-size: 1.6rem; line-height: 1.5625; margin-bottom: 3rem; } @media screen and (min-width: 768px) { .promo-video-spot__text { margin-bottom: 0; } } @media screen and (min-width: 1216px) { .promo-video-spot__text { margin-bottom: 2.5rem; } } .promo-video-spot__details { font-family: var(--font-family-raleway); grid-area: details; display: flex; flex-direction: row; margin-bottom: 3rem; justify-content: space-around; } @media screen and (min-width: 768px) { .promo-video-spot__details { margin-bottom: 2rem; max-width: 50rem; } } .promo-video-spot__detail { flex: 0 1 calc(33.3333% - 1rem); } .promo-video-spot__detail-key { font-size: 1.2rem; line-height: 1.25; font-weight: 500; margin-bottom: 0.5rem; } .promo-video-spot__detail-value { font-size: 1.6rem; line-height: 1.25; font-weight: 700; } .promo-video-spot__cta { grid-area: cta; height: 4.7rem; min-width: 20rem; max-width: 30rem; margin: 0 auto 5rem; border-radius: 0.4rem; background-color: #581231; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; padding: 0 2rem 0.1rem; } .promo-video-spot__cta:hover { background-color: #824D65; } .promo-video-spot__cta svg { width: 1.4rem; height: 1.7rem; } .promo-video-spot__cta--desktop { display: none; } @media screen and (min-width: 768px) { .promo-video-spot__cta { margin: 0 auto 3rem 0; min-width: 24rem; } } @media screen and (min-width: 1216px) { .promo-video-spot__cta { margin: 0 auto 0 0; } .promo-video-spot__cta--mobile { display: none; } .promo-video-spot__cta--desktop { display: inline-flex; } } .promo-video-spot__cta-text { margin: 1rem; font-size: 1.4rem; line-height: 1.2; font-weight: 700; color: white; } .promo-video-spot__video { grid-area: video; margin-bottom: 3rem; overflow: hidden; padding: var(--promo-video-spot__aspect-ratio, 56.25%) 0 0 0; line-height: 0; position: relative; } .promo-video-spot__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 1rem; overflow: hidden; } .promo-video-spot__video img { display: none; } .promo-video-spot--no-video .promo-video-spot__video { padding: 0; } .promo-video-spot--no-video .promo-video-spot__video iframe { display: none; } .promo-video-spot--no-video .promo-video-spot__video img { border-radius: 1rem; display: block; max-width: 100%; line-height: 0; } @media screen and (min-width: 768px) { .promo-video-spot--no-video .promo-video-spot__video { padding-right: 2rem; } } @media screen and (min-width: 1216px) { .promo-video-spot--no-video .promo-video-spot__video { padding-right: 0; } } @media screen and (min-width: 768px) { .promo-video-spot__video { margin: 0 2rem 4rem 0; } .promo-video-spot--no-video .promo-video-spot__video { margin-right: 0; } } @media screen and (min-width: 1216px) { .promo-video-spot__video { margin: 0 0 auto; } } .promo-video-spot__screenshots { overflow: hidden; grid-area: screenshots; margin: 0 -2rem; } .promo-video-spot__screenshots img { height: auto; border-radius: 1rem; } .promo-video-spot--no-screenshots .promo-video-spot__screenshots { display: none; } .promo-video-spot__screenshots .tns-nav { display: flex; justify-content: center; padding: 1.5rem; } .promo-video-spot__screenshots .tns-nav button { margin: 0 0.7rem; background: white; width: 0.9rem; height: 0.9rem; border-radius: 1rem; padding: 0; border: 0.1rem solid white; } .promo-video-spot__screenshots .tns-nav button.tns-nav-active { width: 1rem; height: 1rem; background: #581231; } @media screen and (min-width: 768px) { .promo-video-spot__screenshots { margin: 0; height: auto; } } @media screen and (min-width: 1216px) { .promo-video-spot__screenshots { margin-top: 7rem; } } .promo-video-spot__screenshots-slider img { max-width: 100%; } @media screen and (min-width: 1216px) { .promo-video-spot__screenshots-slider { display: flex; justify-content: space-between; } .promo-video-spot__screenshots-slider img { width: 0; flex: 0 0 calc(33.3333% - 1rem); } .promo-video-spot__screenshots-slider img:last-child { margin-right: 0; } } .promo-video-spot__screenshots-slider--init { display: flex; overflow-x: scroll; padding: 0 2rem 2rem 1rem; } .promo-video-spot__screenshots-slider--init img { width: calc(100vw - 4rem); max-width: 36rem; margin-left: 1rem; } @media screen and (min-width: 768px) { .promo-video-spot__screenshots-slider--init { display: block; overflow: hidden; padding: 0; } .promo-video-spot__screenshots-slider--init img { width: 100%; max-width: none; margin: 0; } } @media screen and (min-width: 1216px) { .promo-video-spot__screenshots-slider--init { display: flex; justify-content: space-between; } .promo-video-spot__screenshots-slider--init img { width: 0; flex: 0 0 calc(33.3333% - 1rem); } .promo-video-spot__screenshots-slider--init img:last-child { margin-right: 0; } } .promo-video-spot__background { position: absolute; z-index: -1; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--promo-video-spot__bg-color, transparent); background-image: var(--promo-video-spot__bg-img-mobile, none); background-position: 50% 0; background-repeat: repeat-y; background-size: 100% auto; } @media screen and (min-width: 768px) { .promo-video-spot__background { background-image: var(--promo-video-spot__bg-img-tablet, none); } } @media screen and (min-width: 1216px) { .promo-video-spot__background { background-image: var(--promo-video-spot__bg-img-desktop, none); } } /* =========================================== component.quote ========================================= */ .avalon-quote { text-align: left; } .avalon-quote__icon-wrapper { display: flex; justify-content: center; align-items: center; width: 7rem; height: 7rem; margin: 0 auto; position: relative; background-color: #feb700; border-radius: 100px; } .avalon-quote__icon { fill: white; } .avalon-quote__text { text-align: center; font-size: 2.4rem; font-style: italic; width: 100%; margin: 0 auto; font-weight: 900; } .avalon-quote__text:not(:first-child) { margin-top: 2rem; } @media screen and (min-width: 768px) { .avalon-quote__text { width: 100%; font-size: 3.2rem; } } .mode-edit .avalon-quote { position: static; } .mode-edit .avalon-quote__content { margin-right: 0; } /* =========================================== component.read-more-spot ========================================= */ .avalon-area .avalon-read-more-spot .u-grid--medium { max-width: 128rem; } .avalon-read-more-spot { background: transparent; } .avalon-read-more-spot__title { text-align: center; } .avalon-read-more-spot__body { font-size: 1.4rem; } .avalon-read-more-spot__body img { max-width: 100%; height: auto; } .avalon-read-more-spot__body ul:not([class]), .avalon-read-more-spot__body ol:not([class]) { padding-left: 2.5rem; list-style-type: none; } .avalon-read-more-spot__body ul:not([class]) li:before, .avalon-read-more-spot__body ol:not([class]) li:before { left: -3rem; color: var(--color-primary--dark, #feb700); } @media screen and (min-width: 768px) { .avalon-read-more-spot__body ul:not([class]) { columns: 2; gap: 6rem; } } .avalon-read-more-spot__body ul:not([class]) li:before { left: -2.5rem; text-align: left; line-height: 0.8; } .avalon-read-more-spot__content--initial { margin-top: 2rem; } .avalon-read-more-spot__content--more { display: grid; grid-template-rows: 0fr; overflow: hidden; padding-top: 2rem; transition: grid-template-rows 0.4s ease-out; } .avalon-read-more-spot__content--more .avalon-read-more-spot__content--more-wrap { overflow: hidden; } .is-open .avalon-read-more-spot__content--more { grid-template-rows: 1fr; } .avalon-read-more-spot__cta { display: block; max-width: 150px; margin: 2rem auto 0; font-size: 1.4rem; font-weight: 900; color: #feb700; text-align: center; text-transform: uppercase; cursor: pointer; } .avalon-read-more-spot__cta:hover { color: #ffc328; } .avalon-read-more-spot__cta:hover .avalon-read-more-spot__cta-icon { fill: #ffc328; } .avalon-read-more-spot__cta-text { display: inline-block; vertical-align: middle; } .avalon-read-more-spot__cta-icon { margin-left: 1rem; fill: #feb700; vertical-align: middle; transition: 0.25s ease; } .is-open .avalon-read-more-spot__cta-icon { transform: rotate(-180deg); } .three-col .three-col__col--center .avalon-read-more-spot__content ul li { flex-basis: 100%; } .mode-edit .avalon-read-more-spot__content--more { display: block; } .mode-edit .avalon-read-more-spot__content--more::before { margin-top: 2rem; content: 'Below is the initially hidden content. This text will not be seen when published!'; color: #a0a0a0; font-style: italic; text-align: center; text-decoration: underline; display: block; } .region-spot { max-width: 184rem; margin: 0 auto 2rem; overflow: hidden; } @media (min-width: 1000px) { .region-spot { margin-bottom: 6rem; } } .region-spot:after { content: ""; display: table; clear: both; } .region-spot .region-mode { width: 100%; white-space: nowrap; } .region-spot .region-spot__content-wrapper { display: flex; justify-content: center; align-items: center; flex-direction: column; color: white; position: absolute; top: 2rem; right: 0; bottom: 0; left: 2rem; overflow: hidden; border-radius: 0.6rem; text-align: center; cursor: pointer; } @media (min-width: 1000px) { .region-spot .region-spot__content-wrapper:hover .region-spot__bg { transform: scale(1.1) rotate(0.1deg); } } .region-spot .region-spot__item { display: inline-block; white-space: normal; position: relative; width: 30rem; height: 30rem; outline: none; } .region-spot .region-spot__item:last-child { margin-right: 2rem; } @media (min-width: 1000px) { .region-spot .region-spot__item { float: left; height: auto; margin: 0; max-width: none; width: 50%; } .region-spot .region-spot__item:last-child { margin-right: 0; } .region-spot .region-spot__item:after { content: ""; display: block; padding-bottom: 100%; } } @media (min-width: 1000px) { .region-spot .region-spot__item--1 .region-spot__content-wrapper { right: 1rem; } .region-spot .region-spot__item--2:after { padding-bottom: 50%; } .region-spot .region-spot__item--2 .region-spot__content-wrapper { left: 1rem; right: 2rem; } .region-spot .region-spot__item--3 { width: 25%; } .region-spot .region-spot__item--3 .region-spot__content-wrapper { left: 1rem; right: 1.5rem; } .region-spot .region-spot__item--4 { width: 25%; } .region-spot .region-spot__item--4 .region-spot__content-wrapper { left: 0.5rem; right: 2rem; } } .region-spot .region-spot__bg { position: absolute; z-index: 1; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; overflow: hidden; transition: transform 300ms ease-in-out; display: flex; justify-content: center; align-items: center; } .region-spot .region-spot__bg.oddset-blue-gradient { background-image: radial-gradient(ellipse at center, #003582 0%, #003582 33%, #000000 99%); } .region-spot .region-spot__bg img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .region-spot .region-spot__brand { position: absolute; z-index: 10; top: 0; right: 0; width: 7rem; height: 3rem; border-radius: 0 0 0 0.6rem; display: flex; justify-content: center; align-items: center; } @media (min-width: 1425px) { .region-spot .region-spot__brand { width: 10rem; height: 4rem; } } .region-spot .region-spot__brand img { width: 80%; height: 80%; max-width: 80%; max-height: 70%; } .region-spot .region-spot__content { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 3rem); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; } @media (min-width: 1425px) { .region-spot .region-spot__content { height: calc(100% - 2rem); } } .region-spot .region-spot__content .flip-clock { margin-top: 1rem; } .region-spot .region-spot__content-text { font-size: 2.5rem; font-weight: 900; line-height: 1.25; color: white; padding: 0 1rem; z-index: 0; } @media (min-width: 1000px) { .region-spot .region-spot__content-text { font-size: 3.5rem; } } @media (min-width: 1425px) { .region-spot .region-spot__content-text { font-size: 2.5vw; } } .region-spot .region-spot__oddset-teams { line-height: 1.2rem; margin-top: 1rem; width: 100%; } .region-spot .region-spot__oddset-teams-name { line-height: 1.3; white-space: nowrap; overflow: hidden; max-width: calc(100% - 2rem); text-overflow: ellipsis; display: inline-block; } .region-spot .region-spot__content-1x2 { display: flex; justify-content: center; font-size: 1.4rem; margin: 1rem 0 0; color: #003685; font-weight: 800; text-align: center; } @media (min-width: 1425px) { .region-spot .region-spot__content-1x2 { margin: 3rem 0; font-size: 1.6rem; } } .region-spot .region-spot__content-1x2--1, .region-spot .region-spot__content-1x2--x, .region-spot .region-spot__content-1x2--2 { margin: 0 0.2rem; padding: 0.5rem 0.75rem; background-color: white; border-radius: 0.6rem; } .region-spot .region-spot__content-1x2--1:before, .region-spot .region-spot__content-1x2--x:before, .region-spot .region-spot__content-1x2--2:before { color: #dc5f11; margin-right: 0.3rem; } @media (min-width: 1425px) { .region-spot .region-spot__content-1x2--1, .region-spot .region-spot__content-1x2--x, .region-spot .region-spot__content-1x2--2 { margin: 0 0.4rem; padding: 0.6rem 1rem; } } .region-spot .region-spot__content-1x2--1:before { content: "1"; } .region-spot .region-spot__content-1x2--x:before { content: "X"; } .region-spot .region-spot__content-1x2--2:before { content: "2"; } .region-spot .region-spot__content-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; flex-direction: column; min-height: 7rem; padding: 0.5rem 0.5rem 0; } .region-spot .region-spot__content-cta { outline: none; border: none; cursor: pointer; font-size: 1.4rem; text-decoration: none; text-align: center; line-height: 3.5rem; transition: all 200ms; border-radius: 0.6rem; font-weight: 900; background-color: #FEB700; display: inline-block; padding: 0 3rem; white-space: nowrap; margin: 0 auto; } .region-spot .region-spot__content-cta:hover { background-color: #cb9200; } @media (min-width: 1000px) { .region-spot .region-spot__item--2 .region-spot__content-text, .region-spot .region-spot__item--3 .region-spot__content-text, .region-spot .region-spot__item--4 .region-spot__content-text { font-size: 2rem; } } @media (min-width: 1425px) { .region-spot .region-spot__item--2 .region-spot__content-text, .region-spot .region-spot__item--3 .region-spot__content-text, .region-spot .region-spot__item--4 .region-spot__content-text { font-size: 2vw; } } .region-spot__item .background-frame__eurojackpot01, .region-spot__item .background-frame__eurojackpot02, .region-spot__item .background-frame__eurojackpot03, .region-spot__item .background-frame__eurojackpot04, .region-spot__item .background-frame__eurojackpot05, .region-spot__item .background-frame__eurojackpot06 { background-color: #bb7f36; } .region-spot__item .background-frame__eurojackpot01 .region-spot__bg, .region-spot__item .background-frame__eurojackpot02 .region-spot__bg, .region-spot__item .background-frame__eurojackpot03 .region-spot__bg, .region-spot__item .background-frame__eurojackpot04 .region-spot__bg, .region-spot__item .background-frame__eurojackpot05 .region-spot__bg, .region-spot__item .background-frame__eurojackpot06 .region-spot__bg { margin: 0.2rem; } @media (min-width: 1000px) { .region-spot__item .background-frame__eurojackpot01 .region-spot__bg, .region-spot__item .background-frame__eurojackpot02 .region-spot__bg, .region-spot__item .background-frame__eurojackpot03 .region-spot__bg, .region-spot__item .background-frame__eurojackpot04 .region-spot__bg, .region-spot__item .background-frame__eurojackpot05 .region-spot__bg, .region-spot__item .background-frame__eurojackpot06 .region-spot__bg { margin: 0.5rem; } } .region-spot__item .background-frame__eurojackpot01 .region-spot__content-text, .region-spot__item .background-frame__eurojackpot02 .region-spot__content-text, .region-spot__item .background-frame__eurojackpot03 .region-spot__content-text, .region-spot__item .background-frame__eurojackpot04 .region-spot__content-text, .region-spot__item .background-frame__eurojackpot05 .region-spot__content-text, .region-spot__item .background-frame__eurojackpot06 .region-spot__content-text { color: black; } .region-spot__item .background-frame__eurojackpot01 { background-size: cover; background-position: center; background-color: #dba238; background-image: url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/EurojackpotFrame01/bg-small.jpg'); } .region-spot__item .background-frame__eurojackpot01 .region-spot__bg { background-repeat: no-repeat; background-image: url(), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#center-right_use'), url(), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#center-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#top-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#top-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#bottom-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#bottom-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#top_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#bottom_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame01.svg#left_use'), url(); background-size: 0 0, 30px 20px, 0 0, 30px 20px, 52px 56px, 52px 56px, 52px 56px, 52px 56px, calc(100% - 52px * 2 + 1px) 20px, 20px calc(100% - 56px * 2 + 1px), calc(100% - 52px * 2 + 1px) 20px, 20px calc(100% - 56px * 2 + 1px), cover; background-position: top center, right center, bottom center, left center, top left, top right, bottom left, bottom right, top center, right center, bottom center, left center, center; } .region-spot__item .background-frame__eurojackpot02 { background: black; } .region-spot__item .background-frame__eurojackpot02 .region-spot__bg { background-repeat: no-repeat; background-image: url(), url(), url(), url(), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame02.svg#top-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame02.svg#top-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame02.svg#bottom-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame02.svg#bottom-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame02.svg#top_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame02.svg#right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame02.svg#bottom_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame02.svg#left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/EurojackpotFrame01/bg-small.jpg'); background-size: 0 0, 0 0, 0 0, 0 0, 89px 88px, 89px 88px, 89px 88px, 89px 88px, calc(100% - 89px * 2 + 1px) 20px, 20px calc(100% - 88px * 2 + 1px), calc(100% - 89px * 2 + 1px) 20px, 20px calc(100% - 88px * 2 + 1px), cover; background-position: top center, right center, bottom center, left center, top left, top right, bottom left, bottom right, top center, right center, bottom center, left center, center; box-shadow: inset 0 0 0 0.1rem black; } .region-spot__item .background-frame__eurojackpot03 { background: black; } .region-spot__item .background-frame__eurojackpot03 .region-spot__bg { background-repeat: no-repeat; background-image: url(), url(), url(), url(), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame03.svg#top-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame03.svg#top-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame03.svg#bottom-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame03.svg#bottom-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame03.svg#top_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame03.svg#right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame03.svg#bottom_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame03.svg#left_use'), url(); background-size: 0 0, 0 0, 0 0, 0 0, 52px 77px, 52px 77px, 52px 77px, 52px 77px, calc(100% - 52px * 2 + 1px) 20px, 20px calc(100% - 77px * 2 + 1px), calc(100% - 52px * 2 + 1px) 20px, 20px calc(100% - 77px * 2 + 1px), cover; background-position: top center, right center, bottom center, left center, top left, top right, bottom left, bottom right, top center, right center, bottom center, left center, center; } .region-spot__item .background-frame__eurojackpot03 .region-spot__content-text { color: #ecbb47; } .region-spot__item .background-frame__eurojackpot04 { background-size: cover; background-position: center; background-color: black; background-image: url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/EurojackpotFrame04/bg-small.jpg'); } .region-spot__item .background-frame__eurojackpot04 .region-spot__bg { background-repeat: no-repeat; background-image: url(), url(), url(), url(), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame04.svg#top-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame04.svg#top-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame04.svg#bottom-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame04.svg#bottom-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame04.svg#top_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame04.svg#right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame04.svg#bottom_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame04.svg#left_use'), url(); background-size: 0 0, 0 0, 0 0, 0 0, 46px 43px, 46px 43px, 46px 43px, 46px 43px, calc(100% - 46px * 2 + 1px) 20px, 25px calc(100% - 43px * 2 + 1px), calc(100% - 46px * 2 + 1px) 20px, 25px calc(100% - 43px * 2 + 1px), cover; background-position: top center, right center, bottom center, left center, top left, top right, bottom left, bottom right, top center, right center, bottom center, left center, center; } .region-spot__item .background-frame__eurojackpot04 .region-spot__content-text { color: #ecbb47; } .region-spot__item .background-frame__eurojackpot05 { background-size: cover; background-position: center; background-color: #dba238; background-image: url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/EurojackpotFrame01/bg-small.jpg'); } .region-spot__item .background-frame__eurojackpot05 .region-spot__bg { background-repeat: no-repeat; background-image: url(), url(), url(), url(), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame05.svg#top-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame05.svg#top-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame05.svg#bottom-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame05.svg#bottom-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame05.svg#top_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame05.svg#right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame05.svg#bottom_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame05.svg#left_use'), url(); background-size: 0 0, 0 0, 0 0, 0 0, 69px 68px, 69px 68px, 69px 68px, 69px 68px, calc(100% - 69px * 2 + 1px) 20px, 20px calc(100% - 68px * 2 + 1px), calc(100% - 69px * 2 + 1px) 20px, 20px calc(100% - 68px * 2 + 1px), cover; background-position: top center, right center, bottom center, left center, top left, top right, bottom left, bottom right, top center, right center, bottom center, left center, center; } .region-spot__item .background-frame__eurojackpot06 { background-size: cover; background-position: center; background-color: black; background-image: url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/EurojackpotFrame04/bg-small.jpg'); } .region-spot__item .background-frame__eurojackpot06 .region-spot__bg { background-repeat: no-repeat; background-image: url(), url(), url(), url(), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame06.svg#top-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame06.svg#top-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame06.svg#bottom-left_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame06.svg#bottom-right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame06.svg#top_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame06.svg#right_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame06.svg#bottom_use'), url('/Components/DanskeSpil/Domain/Eurojackpot/Graphics/SpriteSheets/EurojackpotFrame06.svg#left_use'), url(); background-size: 0 0, 0 0, 0 0, 0 0, 69px 69px, 69px 69px, 69px 69px, 69px 69px, calc(100% - 69px * 2 + 1px) 20px, 20px calc(100% - 69px * 2 + 1px), calc(100% - 69px * 2 + 1px) 20px, 20px calc(100% - 69px * 2 + 1px), cover; background-position: top center, right center, bottom center, left center, top left, top right, bottom left, bottom right, top center, right center, bottom center, left center, center; } .region-spot__item .background-frame__eurojackpot06 .region-spot__content-text { color: #ecbb47; } /* =========================================== component.related-content ========================================= */ .avalon-related-content { background-color: #feb700; color: #ffffff; } .avalon-related-content__title { text-align: center; } .avalon-related-content__item { list-style-type: none; } .avalon-related-content__item:not(:first-child) { margin-top: 2rem; } .avalon-related-content__link-area { display: flex; flex-flow: row wrap; justify-content: space-between; color: white; text-decoration: none; } .avalon-related-content__image-wrapper { flex: 0 0 auto; flex-basis: calc(40%); } @media screen and (max-width: 480px) { .avalon-related-content__image-wrapper { flex: initial; width: 100%; margin-bottom: 0.5rem; } } .avalon-related-content__image { width: 100%; display: block; height: auto; } .avalon-related-content__text { flex: 0 0 auto; flex-basis: calc(60% - 2rem); } @media screen and (min-width: 768px) { .avalon-related-content__text { font-size: 1.4rem; } } @media screen and (max-width: 480px) { .avalon-related-content__text { flex: initial; width: 100%; } } /* =========================================== component.related-games ========================================= */ .avalon-related-games { background-color: #efac00; color: white; } .avalon-related-games__title { text-align: center; } .avalon-related-games__items { display: flex; flex-flow: row wrap; justify-content: space-between; } .avalon-related-games__item { display: flex; flex-basis: calc(50% - 2rem / 2); flex-direction: column; background-color: #ffffff; color: black; } @media screen and (max-width: 767px) { .avalon-related-games__item { flex-basis: 100%; } .avalon-related-games__item:not(:first-child) { margin-top: 2rem; } } .avalon-related-games__item:only-of-type { flex-basis: 100%; } .avalon-related-games__item:only-of-type .related-games__item__image--overlay { font-size: 2.4rem; } .avalon-related-games__item-header { flex: 0 0 auto; position: relative; } .avalon-related-games__item-image { width: 100%; height: auto; display: block; flex: none; } .avalon-related-games__item-overlay { position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.5); font-size: 2rem; font-weight: 600; padding: 1rem; color: white; width: 100%; text-align: center; word-wrap: break-word; } @media screen and (max-width: 767px) { .avalon-related-games__item-overlay { font-size: 1.6rem; word-break: break-all; } } .avalon-related-games__item-content { display: flex; flex-direction: column; flex: 1 0 auto; padding: 3rem; } @media screen and (max-width: 767px) { .avalon-related-games__item-content { padding: 1.5rem; } } .avalon-related-games__item-paragraph { font-size: 1.4rem; } .avalon-related-games__item-cta { margin: auto auto 0 auto; padding-top: 2rem; align-self: center; } @media screen and (max-width: 767px) { .avalon-related-games__item-cta { padding: 1rem 0 0 0; } } .avalon-related-games__item-button { margin: 0; text-align: center; } @media screen and (min-width: 768px) { .avalon-related-games__item-button { min-width: 12.5rem; } } /* =========================================== component.rich-text-content ========================================= */ .avalon-rich-text-content a { color: #feb700; color: var(--color-primary); } .avalon-rich-text-content p { margin: 6px 0; } .avalon-rich-text-content p:first-child { margin-top: 0; } .avalon-rich-text-content p:last-child { margin-bottom: 0; } .avalon-rich-text-content ul { margin-bottom: 12px; margin-left: 1.2em; } .avalon-rich-text-content ul:last-child { margin-bottom: 0; } .avalon-rich-text-content li { margin-bottom: 10px; } .avalon-rich-text-content li:last-child { margin-bottom: 0; } .rules-and-conditions { text-align: center; font-style: italic; padding: 0.5rem 0.7rem; line-height: 1.4; color: white; font-size: 0.9rem; background: rgba(0, 0, 0, 0.2); margin: 0.5rem auto; } .seo-text-spot { padding: 3rem 0; background: #d59a00; color: white; } .seo-text-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 130rem; margin: 0 auto; padding: 3rem; } @media screen and (min-width: 950px) { .seo-text-spot__text { columns: 2; column-gap: 5rem; } } .shop { background-color: #E2E2E2; } .shop .book-details__back-button-wrapper { position: absolute; width: 85%; display: flex; margin: 0 auto; justify-content: flex-end; top: 5rem; left: 50%; transform: translateX(-50%); max-width: 134rem; } .shop .book-details__back-button-wrapper .book-details__back-button { display: block; width: 2rem; height: 2rem; position: relative; } .shop .book-details__back-button-wrapper .book-details__back-button svg { max-width: 100%; max-height: 100%; fill: #000000; } @media screen and (min-width: 768px) { .shop .shop-overview { display: flex; align-items: center; flex-direction: column; width: 100%; margin: 0 auto; } } .shop .shop-overview .shop-overview__hero { background: url("/Components/DanskeSpil/Domain/AvalonComponents/Assets/Graphics/Statisk_kalejdoskop_baggrund_WHITE-ON-GREY_4.svg") top center; background-size: cover; padding-top: 5rem; display: flex; flex-direction: column; align-items: center; color: #000000; overflow: hidden; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__hero { flex-direction: row; justify-content: center; width: 100%; } } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper { display: flex; flex-direction: column; max-width: 94rem; } @media screen and (min-width: 950px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper { flex-direction: row; justify-content: space-between; max-width: 85rem; padding: 0 2.5rem; } } @media screen and (min-width: 1024px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper { max-width: 102.4rem; } } @media screen and (min-width: 1216px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper { max-width: 121.6rem; } } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts { margin: 0 2rem; text-align: center; } @media screen and (min-width: 480px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts { text-align: left; margin: 3rem 5rem; } } @media screen and (min-width: 950px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts { margin: 3rem 0 5rem 0; } } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-pre-header { font-weight: 600; letter-spacing: 0.2rem; margin-bottom: 1rem; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-pre-header { margin-bottom: 0; } } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-header { text-transform: uppercase; font-weight: 800; font-size: 3rem; color: #000000; position: relative; display: inline-block; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-header { text-transform: uppercase; font-weight: 800; font-size: 6rem; color: #000000; position: relative; display: inline-block; } } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-text--desktop { display: none; } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-text p span { background: linear-gradient(90deg, #e99b23 0%, #feebac 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-text { width: 75%; } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-text--desktop { display: initial; } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-text--desktop p { margin-bottom: 0; } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-text--mobile { display: none; } } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-mandatory-text { font-size: 1.2rem; } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-cta { cursor: pointer; margin-top: 2rem; display: inline-block; color: #000000; font-weight: 600; padding: 1rem 3rem; border-radius: 3.5rem; position: relative; z-index: 1; background: #FEB700; } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-cta:hover { cursor: pointer; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-texts .shop-overview__hero-cta { margin-top: 4rem; } } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-image-wrapper { margin-top: 3rem; margin-bottom: 3rem; display: flex; justify-content: center; width: 100%; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-image-wrapper { width: 100%; margin: 5rem 0; align-self: flex-start; } } @media screen and (min-width: 950px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-image-wrapper { width: 100%; margin: 8rem 0; align-self: flex-start; } } .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-image-wrapper .shop-overview__hero-image { width: 80%; position: relative; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-image-wrapper .shop-overview__hero-image { width: 90%; } } @media screen and (min-width: 950px) { .shop .shop-overview .shop-overview__hero .shop-overview__hero-content-wrapper .shop-overview__hero-image-wrapper .shop-overview__hero-image { margin-top: 1rem; width: 100%; } } .shop .shop-overview .shop-overview__items { display: flex; flex-direction: column; align-items: center; text-align: center; color: #000000; padding: 7rem 2rem 0 2rem; max-width: 102.4rem; } .shop .shop-overview .shop-overview__items .shop-overview__items-header { text-transform: uppercase; font-weight: 800; font-size: 4rem; color: #000000; position: relative; display: inline-block; line-height: 5rem; margin-bottom: 4rem; } .shop .shop-overview .shop-overview__items .shop-overview__items-text { margin-bottom: 3rem; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__items .shop-overview__items-text { width: 45rem; } } .shop .shop-overview .shop-overview__items .shop-overview__items-list { margin-top: 3rem; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__items .shop-overview__items-list { display: inline-block; justify-content: center; width: 100%; } } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item { margin-bottom: 10rem; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item { height: 45rem; width: 50%; margin: 0 auto 10rem; display: inline-block; } } @media screen and (min-width: 950px) { .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item { width: 33%; } } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item .shop-overview__list-item-image-wrapper { position: relative; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item .shop-overview__list-item-image-wrapper { width: 27rem; margin: 0 auto; } } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item .shop-overview__list-item-image-wrapper .shop-overview__list-item-image { max-width: 100%; } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item .shop-overview__list-item-image-wrapper .shop-overview__list-item-image--back { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none; } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item:hover .shop-overview__list-item-image--front { opacity: 0; } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item:hover .shop-overview__list-item-image--back { display: initial; } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item .shop-overview__list-item-cta-wrapper { margin: 2rem 0; display: flex; justify-content: center; } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item .shop-overview__list-item-cta-wrapper .shop-overview__list-item-cta { display: block; color: #000000; font-weight: 600; padding: 1rem 3rem; border-radius: 3.5rem; position: relative; z-index: 1; background: #FEB700; } .shop .shop-overview .shop-overview__items .shop-overview__items-list .shop-overview__list-item .shop-overview__list-item-cta-wrapper .shop-overview__list-item-cta:hover { cursor: pointer; } .shop .shop-overview .shop-overview__video { display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 950px) { .shop .shop-overview .shop-overview__video { width: 90%; } } @media screen and (min-width: 1024px) { .shop .shop-overview .shop-overview__video { width: 102.4rem; } } .shop .shop-overview .shop-overview__video .shop-overvire__video-header { text-transform: uppercase; font-weight: 800; font-size: 3rem; color: #000000; position: relative; display: inline-block; text-align: center; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__video .shop-overvire__video-header { text-transform: uppercase; font-weight: 800; font-size: 4rem; color: #000000; position: relative; display: inline-block; } } .shop .shop-overview .shop-overview__video .shop-overview__video-wrapper { width: 100%; height: 0; padding-top: calc(9/16 * 100%); position: relative; margin: 3rem 0 10rem 0; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__video .shop-overview__video-wrapper { padding-top: calc(9/16 * 100%); } } .shop .shop-overview .shop-overview__video .shop-overview__video-wrapper .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .shop .shop-overview .shop-overview__video .shop-overview__video-wrapper .video--desktop { display: none; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__video .shop-overview__video-wrapper .video--desktop { display: initial; } .shop .shop-overview .shop-overview__video .shop-overview__video-wrapper .video--mobile { display: none; } } .shop .shop-overview .shop-overview__steps { display: flex; flex-direction: column; align-items: center; color: #000000; padding-bottom: 5rem; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__steps { padding-bottom: 5rem; } } .shop .shop-overview .shop-overview__steps .shop-overview__steps-header { text-transform: uppercase; font-weight: 800; font-size: 3rem; color: #000000; position: relative; display: inline-block; text-align: center; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__steps .shop-overview__steps-header { text-transform: uppercase; font-weight: 800; font-size: 4rem; color: #000000; position: relative; display: inline-block; } } .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper { display: table; width: 100%; margin-top: 2.5rem; } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper { flex-direction: row; } } .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper .shop-overview__step { text-align: center; } @media screen and (min-width: 480px) { .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper .shop-overview__step { display: table-row; width: 100%; } } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper .shop-overview__step { display: table-cell; width: 33%; } .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper .shop-overview__step:not(:last-child) { margin-right: 3rem; } } .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper .shop-overview__step .shop-overview__step-icon { width: 6rem; height: 6rem; margin-top: 1rem; } @media screen and (min-width: 375px) { .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper .shop-overview__step .shop-overview__step-icon { margin-top: 2.5rem; width: 12rem; height: 12rem; } } @media screen and (min-width: 768px) { .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper .shop-overview__step .shop-overview__step-icon { width: 10rem; height: 10rem; } } .shop .shop-overview .shop-overview__steps .shop-overview__steps-wrapper .shop-overview__step .shop-overview__step-text { font-weight: 600; } .shop .book-details { position: relative; padding-bottom: 10rem; } @media screen and (min-width: 768px) { .shop .book-details { padding-top: 10rem; } } .shop .book-details #href-link { position: absolute; left: -1000rem; } .shop .book-details .book-details__navigation { display: flex; justify-content: space-between; margin: 0 auto; padding: 2rem 0; width: 55%; font-size: 1.4rem; position: absolute; transform: translateX(-50%); left: 50%; top: 2.75rem; } @media screen and (min-width: 1216px) { .shop .book-details .book-details__navigation { width: 85%; max-width: 134rem; top: 50%; transform: translateX(-50%) translateY(-50%); } } .shop .book-details .book-details__navigation .book-details__navigation-button { color: #000000; position: relative; display: flex; align-items: center; user-select: none; } .shop .book-details .book-details__navigation .book-details__navigation-button:hover { cursor: pointer; } .shop .book-details .book-details__navigation .book-details__navigation-button::after { content: ''; display: block; width: 1.5rem; height: 1.5rem; border-top: #000000 solid 0.2rem; border-left: #000000 solid 0.2rem; } .shop .book-details .book-details__navigation .book-details__navigation-button--prev { flex-direction: row-reverse; } .shop .book-details .book-details__navigation .book-details__navigation-button--prev::after { transform: rotate(-45deg); margin-right: 0.5rem; } @media screen and (min-width: 768px) { .shop .book-details .book-details__navigation .book-details__navigation-button--prev::after { transform: rotate(-45deg); margin-bottom: 1.5rem; } } .shop .book-details .book-details__navigation .book-details__navigation-button--next::after { transform: rotate(135deg); margin-left: 0.5rem; } @media screen and (min-width: 768px) { .shop .book-details .book-details__navigation .book-details__navigation-button--next::after { transform: rotate(135deg); margin-bottom: 1.5rem; } } @media screen and (min-width: 768px) { .shop .book-details .book-details__navigation .book-details__navigation-button { flex-direction: column-reverse; justify-content: center; } } .shop .book-details .book-details__details { display: flex; flex-direction: column; color: #000000; padding-top: 7rem; } @media screen and (min-width: 768px) { .shop .book-details .book-details__details { flex-direction: row; max-width: 95rem; margin: 0 auto; padding-top: 0; } } .shop .book-details .book-details__details .book-details__image-wrapper { margin: 3rem 4rem; } @media screen and (min-width: 768px) { .shop .book-details .book-details__details .book-details__image-wrapper { margin: 0 4rem; width: 45%; } } .shop .book-details .book-details__details .book-details__image-wrapper .book-details__image { max-width: 100%; } .shop .book-details .book-details__details .book-details__image-wrapper .book-details__image-radios { display: flex; justify-content: space-between; width: 15rem; margin: 2rem auto 0; } @media screen and (min-width: 768px) { .shop .book-details .book-details__details .book-details__image-wrapper .book-details__image-radios { margin-top: 3rem; width: 10rem; } } .shop .book-details .book-details__details .book-details__image-wrapper .book-details__image-radios .book-details__image-radio { width: 1rem; height: 1rem; border-radius: 50%; background-color: #FEB700; opacity: 0.3; cursor: pointer; } @media screen and (min-width: 768px) { .shop .book-details .book-details__details .book-details__image-wrapper .book-details__image-radios .book-details__image-radio { width: 1.5rem; height: 1.5rem; } } .shop .book-details .book-details__details .book-details__image-wrapper .book-details__image-radios .book-details__image-radio--selected { opacity: 1; } .shop .book-details .book-details__details .book-details__texts { display: flex; flex-direction: column; align-items: center; margin: 0 2rem; } @media screen and (min-width: 768px) { .shop .book-details .book-details__details .book-details__texts { align-items: flex-start; width: 55%; } } .shop .book-details .book-details__details .book-details__texts .book-details__title { margin-bottom: 4rem; text-align: center; line-height: 5rem; text-transform: uppercase; font-weight: 800; font-size: 4rem; color: #000000; position: relative; display: inline-block; } .shop .book-details .book-details__details .book-details__texts .book-details__description { width: 100%; margin-bottom: 5rem; } .shop .book-details .book-details__details .book-details__texts .book-details__price { margin: 1rem 0; font-size: 5rem; font-weight: 700; } .shop .book-details .book-details__details .book-details__texts .book-details__cta { color: #000000; font-weight: 600; padding: 1rem 3rem; border-radius: 3.5rem; position: relative; z-index: 1; background: #FEB700; } .shop .book-details .book-details__details .book-details__texts .book-details__cta:hover { cursor: pointer; } .shop .book-details .book-details__details .book-details__texts .book-details__cta:hover { cursor: pointer; } .shop .book-details .book-details__details .book-details__texts .book-details__copy-wrapper { margin-top: 2rem; display: flex; } @media screen and (min-width: 768px) { .shop .book-details .book-details__details .book-details__texts .book-details__copy-wrapper { display: none; } } .shop .book-details .book-details__details .book-details__texts .book-details__copy-wrapper:hover { cursor: pointer; } .shop .book-details .book-details__details .book-details__texts .book-details__copy-wrapper .book-details__copy-icon { margin-right: 1rem; width: 2.5rem; height: 2.5rem; } .shop .book-details .book-details__details .book-details__texts .book-details__copy-wrapper .book-details__copy-text { font-weight: 600; } .shop .shop-form { display: flex; flex-direction: column; align-items: center; color: #000000; padding: 7rem 0; } @media screen and (min-width: 768px) { .shop .shop-form { padding: 10rem 0; flex-direction: row-reverse; justify-content: center; align-items: flex-start; } } .shop .shop-form .shop-form__header { text-transform: uppercase; font-weight: 800; font-size: 2.8rem; color: #000000; position: relative; display: inline-block; text-align: center; } .shop .shop-form .shop-form__header--desktop { text-transform: uppercase; font-weight: 800; font-size: 3.5rem; color: #000000; position: relative; display: inline-block; display: none; } @media screen and (min-width: 768px) { .shop .shop-form .shop-form__header--mobile { display: none; } .shop .shop-form .shop-form__header--desktop { display: block; } } .shop .shop-form .shop-form__image-wrapper { display: flex; align-items: center; flex-direction: column; } @media screen and (min-width: 768px) { .shop .shop-form .shop-form__image-wrapper { width: 25rem; margin-top: 8rem; } } .shop .shop-form .shop-form__image-wrapper .shop-form__item-title { font-weight: 700; margin: 2rem 0; } @media screen and (min-width: 768px) { .shop .shop-form .shop-form__image-wrapper .shop-form__item-title { margin: 0 0 2rem 0; } } .shop .shop-form .shop-form__image-wrapper .shop-form__item-image { max-width: 35%; } @media screen and (min-width: 768px) { .shop .shop-form .shop-form__image-wrapper .shop-form__item-image { max-width: 100%; } } .shop .shop-form .shop-form__form { margin: 0 2rem; } @media screen and (min-width: 768px) { .shop .shop-form .shop-form__form { margin: 0 15rem 4rem 0; width: 45rem; } } .shop .shop-form .shop-form__form .shop-form__address-line-2 { display: flex; width: 100%; } .shop .shop-form .shop-form__form .shop-form__address-line-2 > div { margin: 0; } .shop .shop-form .shop-form__form .shop-form__address-line-2 .shop-form__input-group--postal { width: 9rem; margin-right: 2rem; } .shop .shop-form .shop-form__input-group { margin: 2rem 0; width: 100%; } .shop .shop-form .shop-form__input-group .shop-form__form-label { display: block; font-size: 1.4rem; font-weight: 600; } .shop .shop-form .shop-form__input-group .shop-form__form-input { display: block; width: 100%; background-color: white; border-radius: 0.5rem; border: solid #a0a0a0 0.1rem; color: #000000; padding: 1rem; } .shop .shop-form .shop-form__input-group .shop-form__form-input-error { color: #c21617; font-style: italic; font-size: 1.2rem; margin-top: 0.5rem; display: none; } .shop .shop-form .shop-form__input-group .shop-form__newsletter, .shop .shop-form .shop-form__input-group .shop-form__competition { font-size: 1.4rem; } .shop .shop-form .shop-form__input-group .shop-form__newsletter .shop-form__optin-wrapper, .shop .shop-form .shop-form__input-group .shop-form__competition .shop-form__optin-wrapper { display: flex; align-items: center; margin: 2rem 0; } .shop .shop-form .shop-form__input-group .shop-form__newsletter .shop-form__optin-wrapper:hover, .shop .shop-form .shop-form__input-group .shop-form__competition .shop-form__optin-wrapper:hover { cursor: pointer; } .shop .shop-form .shop-form__input-group .shop-form__newsletter .shop-form__optin-wrapper .shop-form__checkbox-wrapper, .shop .shop-form .shop-form__input-group .shop-form__competition .shop-form__optin-wrapper .shop-form__checkbox-wrapper { position: relative; display: flex; align-items: center; } .shop .shop-form .shop-form__input-group .shop-form__newsletter .shop-form__optin-wrapper .shop-form__checkbox-wrapper .shop-form__checkbox, .shop .shop-form .shop-form__input-group .shop-form__competition .shop-form__optin-wrapper .shop-form__checkbox-wrapper .shop-form__checkbox { appearance: none; width: 2rem; height: 2rem; background-color: white; border-radius: 0.5rem; border: solid #a0a0a0 0.1rem; margin-right: 2rem; } .shop .shop-form .shop-form__input-group .shop-form__newsletter .shop-form__optin-wrapper .shop-form__checkbox-wrapper .shop-form__checkmark, .shop .shop-form .shop-form__input-group .shop-form__competition .shop-form__optin-wrapper .shop-form__checkbox-wrapper .shop-form__checkmark { position: absolute; display: none; top: 0.4rem; left: 0.8rem; height: 1rem; width: 0.5rem; transform: rotate(45deg); border-bottom: 0.2rem solid #000000; border-right: 0.2rem solid #000000; pointer-events: none; } .shop .shop-form .shop-form__input-group .shop-form__newsletter .shop-form__optin-wrapper .shop-form__checkbox-wrapper .shop-form__checkmark--show, .shop .shop-form .shop-form__input-group .shop-form__competition .shop-form__optin-wrapper .shop-form__checkbox-wrapper .shop-form__checkmark--show { display: block; } .shop .shop-form .shop-form__input-group .shop-form__competition .shop-form__optin-wrapper { margin-bottom: 0; } .shop .shop-form .shop-form__input-group--invalid .shop-form__form-input-error { display: block; } .shop .shop-form__age-confirmation { margin: 3rem 0; } .shop .shop-form__age-confirmation .shop-form__input-group { max-width: 70%; } .shop .shop-form__age-confirmation .shop-form__input-group .shop-form__form-input::placeholder { font-style: italic; } .shop .shop-form__age-confirmation .shop-form__age-text { font-size: 1.5rem; font-weight: 600; } .shop .shop-form__submit { color: #000000; font-weight: 600; padding: 1rem 3rem; border-radius: 3.5rem; position: relative; z-index: 1; background: #FEB700; text-align: center; width: 100%; } .shop .shop-form__submit:hover { cursor: pointer; } .shop-confirmation { color: #000000; } .shop-confirmation .shop-confirmation__content { padding: 5rem 2rem; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 768px) { .shop-confirmation .shop-confirmation__content { max-width: 50rem; padding: 10rem 0; margin: 0 auto; } } .shop-confirmation .shop-confirmation__content .shop-confirmation__heading { text-transform: uppercase; font-weight: 800; font-size: 4rem; color: #000000; position: relative; display: inline-block; } @media screen and (min-width: 768px) { .shop-confirmation .shop-confirmation__content .shop-confirmation__heading { text-transform: uppercase; font-weight: 800; font-size: 6rem; color: #000000; position: relative; display: inline-block; } } .shop-confirmation .shop-confirmation__content .shop-confirmation__text { text-align: center; margin-bottom: 5rem; margin-top: 5rem; } .shop-confirmation .shop-confirmation__content .shop-confirmation__cta { color: #000000; font-weight: 600; padding: 1rem 3rem; border-radius: 3.5rem; position: relative; z-index: 1; background: #FEB700; } .shop-confirmation .shop-confirmation__content .shop-confirmation__cta:hover { cursor: pointer; } .shop-confirmation .shop-confirmation__content .shop-confirmation__footer { margin-top: 7rem; display: flex; flex-direction: column; align-items: center; } .shop-confirmation .shop-confirmation__content .shop-confirmation__footer .shop-confirmation__footer-text { margin-bottom: 1rem; } .shop-confirmation .shop-confirmation__content .shop-confirmation__footer .shop-confirmation__footer-logo { height: 2.5rem; } .shop-overview__youtube-video { display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 950px) { .shop-overview__youtube-video { width: 90%; } } @media screen and (min-width: 1024px) { .shop-overview__youtube-video { width: 102.4rem; } } .shop-overview__youtube-video .shop-overview__youtube-video-header { text-transform: uppercase; font-weight: 800; font-size: 3rem; color: #000000; position: relative; display: inline-block; text-align: center; } @media screen and (min-width: 768px) { .shop-overview__youtube-video .shop-overview__youtube-video-header { text-transform: uppercase; font-weight: 800; font-size: 4rem; color: #000000; position: relative; display: inline-block; } } .shop-overview__youtube-video .shop-overview__youtube-video-wrapper { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ margin: 3rem 0 10rem 0; } .shop-overview__youtube-video .shop-overview__youtube-video-wrapper .shop-overview__youtube-video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .subscription-responses { font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 1.3rem; line-height: 1.3; padding: 1rem; min-height: 50rem; } .subscription-responses .subscription-responses__block-wrapper { width: 100%; display: flex; flex-direction: row; } .subscription-responses .subscription-responses__block { flex: 1; } .subscription-responses .subscription-responses__title { font-size: 1.6rem; line-height: 1.2; font-weight: bold; margin: 1rem 0; } .subscription-responses .subscription-responses__subtitle { font-size: 1.4rem; font-weight: bold; margin-bottom: 0.5rem; } .subscription-responses pre { font-family: 'Courier New', Courier, monospace; font-size: 1.1rem; line-height: 1.2; } .subscription-responses .subscription-responses__states { margin-bottom: 1rem; display: flex; flex-wrap: wrap; flex-direction: row; } .subscription-responses .subscription-responses__states-button { padding: 0.7rem; background: #ecf0f1; border: 0.1rem solid #bdc3c7; margin: 0 0.3rem 0.3rem 0; display: flex; justify-content: center; align-items: center; height: 2rem; cursor: pointer; } .subscription-responses .subscription-responses__states-button--selected { background: #000000; color: white; font-weight: bold; } .subscription-responses .subscription-responses__states-list { flex: 0 0 100%; } .subscription-responses .subscription-responses__table-wrapper { width: 100%; overflow: auto; margin-bottom: 2rem; font-size: 1.2rem; line-height: 1.2; } .subscription-responses .subscription-responses__table-wrapper table, .subscription-responses .subscription-responses__table-wrapper th, .subscription-responses .subscription-responses__table-wrapper td { vertical-align: top; border: 0.1rem solid #000000; border-collapse: collapse; text-align: left; } .subscription-responses .subscription-responses__table-wrapper th, .subscription-responses .subscription-responses__table-wrapper td { padding: 0.3rem 0.4rem; } .subscription-responses .subscription-responses__toggled-rows { margin-bottom: 2rem; } .subscription-responses .subscription-responses__toggled-rows-inner { display: flex; align-items: center; } .subscription-responses .subscription-responses__toggled-rows-inner input { margin-right: 0.5rem; } .subscription-responses .subscription-responses__toggled-rows-inner label { line-height: 2rem; } /* =========================================== component.table-component ========================================= */ .avalon-table-component__content { padding: 3rem 0; } @media screen and (min-width: 768px) { .avalon-table-component__content { padding: 3rem; } } .avalon-table-component__header { display: flex; } .avalon-table-component__headline { padding: 3rem; background: #000; color: white; text-align: center; flex: 1; } .avalon-table-component__headline--left { text-align: left; } .avalon-table-component__campaign { flex: 0 30%; } .avalon-table-component__table { width: 100%; } .avalon-table-component__cell { padding: 3rem; font-size: 1.4rem; line-height: 1.2; text-align: left; letter-spacing: -0.5px; } @media screen and (max-width: 767px) { .avalon-table-component__cell { width: 50%; padding: 2rem 3rem; } } @media screen and (min-width: 768px) { .avalon-table-component__cell.text-left-aligned { text-align: left; } } @media screen and (min-width: 768px) { .avalon-table-component__cell.text-right-aligned { text-align: right; } } @media screen and (min-width: 768px) { .avalon-table-component__cell.text-center-aligned { text-align: center; } } .avalon-table-component__cell p { margin: 0; } .avalon-table-component__cell.text-style-bold { font-weight: 600; } .avalon-table-component__cell--header { padding-top: 2rem; padding-bottom: 2rem; background: #a0a0a0; border-right: 1px solid currentcolor; font-size: 1.4rem; color: white; text-transform: uppercase; font-weight: 900; } .avalon-table-component__cell--header:last-of-type { border-right: none; } @media screen and (max-width: 767px) { .avalon-table-component__row:after { content: ""; display: table; clear: both; } } .avalon-table-component__row:nth-child(odd) { background: #f5f5f5; } @media screen and (max-width: 767px) { .avalon-table-component__row--cells-3, .avalon-table-component__row--cells-4 { display: flex; flex-wrap: wrap; flex-direction: row; padding: 2rem 3rem; } } @media screen and (max-width: 767px) { .avalon-table-component__row--cells-3 .avalon-table-component__cell, .avalon-table-component__row--cells-4 .avalon-table-component__cell { width: calc(50% - 0.1rem); padding: 0.3rem 0; } } @media screen and (max-width: 767px) { .avalon-table-component__row--cells-4 .cell-item--2 { order: 3; } } @media screen and (max-width: 767px) { .avalon-table-component__row--cells-4 .cell-item--3 { order: 4; text-align: right; } } @media screen and (max-width: 767px) { .avalon-table-component__row--cells-4 .cell-item--4 { order: 2; text-align: right; } } @media screen and (max-width: 767px) { .avalon-table-component__row--cells-3 .cell-item--2 { order: 99; } } @media screen and (max-width: 767px) { .avalon-table-component__row--cells-3 .cell-item--3 { text-align: right; } } @media screen and (max-width: 767px) { .avalon-table-component__row--header.avalon-table-component__row--cells-3, .avalon-table-component__row--header.avalon-table-component__row--cells-4 { display: none !important; } } .mode-edit .avalon-table-component .avalon-table-component__edit-cell { display: block; width: 10rem; margin-left: -10rem; margin-top: 2.5rem; padding: 0.5rem; background: transparent !important; font-size: 1.4rem; line-height: 1.3; } /* =========================================== component.tabs-component ========================================= */ .avalon-tabs-component__nav { background: #1d1c21; position: relative; z-index: 1; display: flex; } @media screen and (min-width: 768px) { .avalon-tabs-component__nav { padding-left: 3rem; padding-right: 3rem; } } .tabs-component--tabs-disabled .avalon-tabs-component__nav { display: none; } .avalon-tabs-component__nav .tabs-component__link { color: inherit; background: rgba(0, 0, 0, 0.3); } .avalon-tabs-component__nav .tabs-component__link:hover { text-decoration: none; } .avalon-tabs-component__nav-list { list-style-type: none; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; } @media screen and (max-width: 767px) { .avalon-tabs-component__nav-list { padding: 0; } } .avalon-tabs-component__nav-item { display: flex; flex: 1 1 50%; justify-content: center; align-items: center; position: relative; text-align: center; text-transform: uppercase; font-weight: 900; transition: all ease 0.4s; } .avalon-tabs-component__nav-item:first-child { border-left: 1px solid rgba(255, 255, 255, 0.2); } .avalon-tabs-component__nav-item:nth-last-child(1) { border-right: 1px solid rgba(255, 255, 255, 0.2); } .avalon-tabs-component__nav-item:empty { display: none; } .avalon-tabs-component__nav-item::after { content: ''; display: block; position: absolute; width: 0; height: 0; border-left: 12.5px solid transparent; border-right: 12.5px solid transparent; border-top: 12.5px solid transparent; left: 50%; transform: translateX(-50%); bottom: -1.2rem; transition: all ease 0.4s; } @media screen and (min-width: 768px) { .avalon-tabs-component__nav-item::after { border-right-width: 15px; border-left-width: 15px; border-top-width: 15px; bottom: -1.4rem; } } .avalon-tabs-component__nav-item.is-selected { border-color: transparent; background: #feb700; } .avalon-tabs-component__nav-item.is-selected::after { border-top-color: #feb700; } .avalon-tabs-component__nav-link { display: block; width: 100%; padding: 2rem; color: white; } @media screen and (max-width: 767px) { .avalon-tabs-component__nav-link { padding: 2rem 1rem; } } .avalon-tabs-component__nav-item.is-selected .avalon-tabs-component__nav-link { color: black; cursor: default; } .avalon-tabs-component__nav-title { font-weight: 900; } .avalon-tabs-component__frames { background-color: #2a2831; color: white; position: relative; z-index: 0; } .avalon-tabs-component__frame { height: 0; overflow: hidden; position: relative; opacity: 0; transition: opacity 0.4s ease-in-out; } .avalon-tabs-component__frame.is-active { height: auto; top: 0; opacity: 1; } .mode-edit .avalon-tabs-component nav, .mode-edit .avalon-tabs-component .is-single-tab-title { display: none !important; } .mode-edit .avalon-tabs-component__frame { height: auto !important; top: 0 !important; opacity: 1; } .tabs-component--tabs-disabled .avalon-tabs-component__frame-title { text-align: center; } /* =========================================== component.dark-teaser-list ========================================= */ .avalon-teaser-list { background: #111111; color: #ffffff; } .avalon-teaser-list__header { text-align: center; } .avalon-teaser-list__link-area { display: block; } .avalon-teaser-list__items { display: flex; flex-flow: row wrap; justify-content: flex-start; margin: 0 -0.5rem; } .avalon-teaser-list__item { flex-basis: 25%; position: relative; } @media screen and (max-width: 767px) { .avalon-teaser-list__item { flex-basis: 33.3333%; } } @media screen and (max-width: 480px) { .avalon-teaser-list__item { flex-basis: 50%; } } .avalon-teaser-list__image-wrapper { position: relative; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); height: 0; margin: 0 0.5rem; padding-top: calc(166/234 * 100%); } .avalon-teaser-list__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; object-fit: cover; object-position: 50% 50%; } .avalon-teaser-list .avalon-teaser-list__image-spinner { position: absolute; z-index: 0; top: calc(50% - 2rem); left: calc(50% - 2rem); animation: rotation 750ms infinite linear; width: 4rem; height: 4rem; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .avalon-teaser-list__title-overlay { width: 100%; min-height: 5vw; padding: 0.4rem 2rem; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); color: white; text-align: center; } @media screen and (min-width: 1024px) { .avalon-teaser-list__title-overlay { min-height: 5rem; } } .avalon-teaser-list__body-text { position: relative; z-index: 10; font-size: 1.6rem; line-height: 1.3; padding: 0.5rem; margin: 0; } /* =========================================== component.text-continues-indicator ========================================= */ .avalon-text-continues-indicator { font-size: 1.4rem; color: #a0a0a0; text-align: center; font-style: italic; } /* =========================================== component.text-with-cta ========================================= */ .avalon-text-with-cta__content { margin-bottom: 2rem; } .avalon-text-with-cta__cta { text-align: center; } /* =========================================== component.twitter-typeahead ========================================= */ .twitter-typeahead { width: 100%; } .tt-menu { width: 100%; max-height: 30rem; margin-top: -0.1rem; border: 1px solid #f5f5f5; background-color: #feb700; overflow-y: auto; } .tt-cursor { background: #feb700; color: black; } .tt-suggestion { padding: 1rem 2rem; font-size: 1.6rem; line-height: 2.4rem; text-align: left; text-transform: capitalize; cursor: pointer; } @media screen and (max-width: 767px) { .tt-suggestion { font-size: 1.4rem; } } .tt-suggestion:hover { background-color: #feb700; color: black; } .tt-suggestion:nth-child(odd) { border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; } /* =========================================== component.video ========================================= */ .avalon-video { background-color: #ffffff; } @media screen and (max-width: 767px) { .avalon-video__text { font-size: 1.4rem; } } .avalon-video__video-inner { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 2.5rem; height: 0; } @media screen and (min-width: 768px) { .avalon-video__video-inner { padding-bottom: 54.7%; } } .avalon-video .mejs-container { width: 100% !important; height: 100% !important; position: absolute; background: transparent; top: 0; left: 0; } .avalon-video .mejs-overlay { position: static; } .avalon-video .mejs-poster { background-size: cover; } .avalon-video iframe { width: 100% !important; height: 100% !important; position: absolute; background: transparent; top: 0; left: 0; } /* =========================================== component.vip-member-campaign ========================================= */ .avalon-vip-member-campaign { background-color: #000000; color: #ffffff; width: 100%; } .avalon-vip-member-campaign__main-header { text-align: center; } @media screen and (max-width: 767px) { .avalon-vip-member-campaign__main-header p { margin: 0; } } .avalon-vip-member-campaign__items { counter-reset: section; margin-top: 3rem; margin-bottom: 0; list-style-type: none; padding: 0; } .avalon-vip-member-campaign__divider { background: #feb700; height: 0.1rem; width: 100%; margin: 0 auto; position: relative; } .avalon-vip-member-campaign__item { width: 100%; padding: 3rem; border-top: 1px solid #323232; } @media screen and (max-width: 767px) { .avalon-vip-member-campaign__item { padding-left: 0; padding-right: 0; } } .avalon-vip-member-campaign__item-icon { background: #feb700; color: #000000; width: 5.5rem; height: 5.5rem; border-radius: 50%; float: left; margin-right: 2rem; text-align: center; display: table; font-size: 3rem; } @media screen and (max-width: 767px) { .avalon-vip-member-campaign__item-icon { height: 4rem; width: 4rem; font-size: 2.1rem; } } .avalon-vip-member-campaign__item-icon::before { display: table-cell; vertical-align: middle; counter-increment: section; content: counters(section, ".") " "; font-weight: 900; } .avalon-vip-member-campaign__item-wrapper:after { content: ""; display: table; clear: both; } .avalon-vip-member-campaign__item-title { text-transform: uppercase; font-weight: bold; padding-top: 1.5rem; padding-left: 7.5rem; } @media screen and (max-width: 767px) { .avalon-vip-member-campaign__item-title { padding-top: 1rem; padding-left: 6rem; } } .avalon-vip-member-campaign__item-subheading { padding-top: 1.5rem; padding-left: 7.5rem; } @media screen and (max-width: 767px) { .avalon-vip-member-campaign__item-subheading { padding-left: 6rem; width: 100%; font-size: 1.4rem; } } .winner-table-with-header { padding: 0 3rem; color: white; } .winner-table-with-header__inner { margin: 2rem auto 4rem; max-width: 96rem; border-radius: 0.6rem; overflow: hidden; box-shadow: inherit; } .winner-table-with-header__header { background: inherit; display: flex; justify-content: center; align-items: center; flex-direction: column; } @media screen and (min-width: 1024px) { .winner-table-with-header__header { flex-direction: row; } } .winner-table-with-header__header-image { overflow: hidden; width: 100%; line-height: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .winner-table-with-header__header-image img { max-width: 100%; height: inherit; } @media screen and (min-width: 1024px) { .winner-table-with-header__header-image { order: 1; flex: 1; margin: 2rem 2rem 2rem 0; border-radius: 0.6rem; } } .winner-table-with-header__header-text { width: 100%; padding: 1rem 0 1.5rem; margin: 0; flex: 1; } @media screen and (min-width: 1024px) { .winner-table-with-header__header-text { padding: 2rem 0 2.5rem; } } .winner-table-with-header__header-text .winner-table-with-header__title { font-size: 1.9rem; line-height: 1.2; font-weight: 800; text-transform: uppercase; padding: 0 2rem; } @media screen and (min-width: 950px) { .winner-table-with-header__header-text .winner-table-with-header__title { font-size: 2.4rem; } } .winner-table-with-header__header-text .winner-table-with-header__text { margin-top: 0.5rem; font-size: 1.6rem; line-height: 1.3; padding: 0 2rem; } .winner-table-with-header table { color: white; border-spacing: 0.1rem; border-collapse: separate; background-color: inherit; width: 100%; font-size: 1.5rem; line-height: 1.3; } .winner-table-with-header th { background: inherit; font-weight: bold; } .winner-table-with-header td, .winner-table-with-header th { padding: 1rem 1.5rem; text-align: left; vertical-align: top; } @media screen and (min-width: 1024px) { .winner-table-with-header td, .winner-table-with-header th { padding: 1.4rem 2rem; } } .winner-table-with-header th { padding: 0.7rem 2rem; } .winner-table-with-header td { background-color: inherit; } .winner-table-with-header td:nth-of-type(2) { white-space: nowrap; } @media only screen and (max-width: 767px) { .winner-table-with-header table, .winner-table-with-header thead, .winner-table-with-header tbody, .winner-table-with-header th, .winner-table-with-header td, .winner-table-with-header tr { display: block; } .winner-table-with-header thead tr { position: absolute; top: -9999px; left: -9999px; } .winner-table-with-header tr { border-top: 0.1rem solid transparent; } .winner-table-with-header tr:nth-child(odd) { background: inherit; } .winner-table-with-header tr:nth-child(odd) td { background: none; } .winner-table-with-header td { position: relative; padding-top: 1.5em; padding-bottom: 0; } .winner-table-with-header td:last-child { padding-bottom: 1rem; } .winner-table-with-header td:before { position: absolute; top: 0; left: 0.6rem; width: 45%; padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.5); font-size: 1.3rem; } .winner-table-with-header td:nth-of-type(1):before { content: "Vinder"; } .winner-table-with-header td:nth-of-type(2):before { content: "Dato"; } .winner-table-with-header td:nth-of-type(3):before { content: "Præmie"; } } /* =========================================== utility.grid ========================================= */ .avalon-area .u-grid, .avalon-image.avalon-image--count-2 .avalon-image-wrapper, .tabs-component--tabs-disabled .avalon-tabs-component__frame-title { width: 100%; margin-left: auto; margin-right: auto; padding: 3rem; } .avalon-area .u-grid--large { max-width: calc(1280px + ( 3rem * 2)); } .avalon-area .u-grid--medium, .avalon-image.avalon-image--count-2 .avalon-image-wrapper, .tabs-component--tabs-disabled .avalon-tabs-component__frame-title { max-width: calc(960px + ( 3rem * 2)); } .avalon-area .u-grid--small { max-width: calc(560px + ( 3rem * 2)); } .u-css-grid { display: flex; align-items: top; justify-content: space-between; } @supports (display: grid) { .u-css-grid { display: grid; grid-column-gap: 3rem; grid-row-gap: 3rem; } } @media screen and (min-width: 768px) { .u-css-grid--two-columns { grid-template-columns: calc(35% - (3rem / 2)) calc(65% - (3rem / 2)); grid-row-gap: 0; } .u-css-grid--two-columns > .column { width: calc(50% - (3rem / 2)); } @supports (display: grid) { .u-css-grid--two-columns > .column { width: auto; } } } /* =========================================== utility.group ========================================= */ .avalon-area .group:after { content: ""; display: table; clear: both; } /* =========================================== utility.group ========================================= */ .avalon-area .u-fullsize-image { width: 100%; height: 100%; max-height: 50vh; min-height: 400px; display: block; object-fit: cover; } @media screen and (min-width: 768px) { .avalon-area .u-fullsize-image { max-height: 100%; min-height: 0; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .avalon-area .u-fullsize-image { max-height: 100%; min-height: 0; } } @supports (-ms-ime-align:auto) { .avalon-area .u-fullsize-image { max-height: 100%; min-height: 0; } } @media screen and (min-width: 768px) { .avalon-area .u-fullsize-image--restricted { max-height: 60vh; min-height: 400px; } } /* =========================================== utility.layout ========================================= */ .avalon-area .three-col { display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; max-width: 1280px; margin: 0 auto; position: relative; background: white; } @media screen and (max-width: 767px) { .avalon-area .three-col { flex-wrap: wrap; } } .avalon-area .three-col:after { content: ''; display: block; clear: both; } .avalon-area .three-col__col { flex: 1 0 100%; } @media screen and (min-width: 768px) { .avalon-area .three-col__col { flex: 0 0 25%; float: left; width: 25%; } } .avalon-area .three-col__col--left:not(:empty), .avalon-area .three-col__col--right:not(:empty) { padding: 3rem 0; } @media screen and (max-width: 767px) { .avalon-area .three-col__col--left:not(:empty), .avalon-area .three-col__col--right:not(:empty) { padding: 0.5rem 0; } } @media screen and (max-width: 767px) { .avalon-area .three-col__col--right:not(:empty) { padding-bottom: 1rem; } } @media screen and (max-width: 767px) { .avalon-area .three-col__col--center { order: -1; } } @media screen and (min-width: 768px) { .avalon-area .three-col__col--center { flex: 0 1 50%; float: left; width: 50%; padding: 3rem 5rem; } } .avalon-area .three-col__col--center:not(:empty) { padding: 3rem; } .region-poker.mode-edit .one-col, .region-casino.mode-edit .one-col { background: #e4e4e4; width: 100%; border: 1px solid gray; min-height: 80px; } .region-poker.mode-edit .three-col, .region-casino.mode-edit .three-col { display: table; width: 100%; max-width: 1024px; min-height: 80px; margin: 0 auto; background: #e4e4e4; border: 1px solid gray; } .region-poker.mode-edit .three-col__col, .region-casino.mode-edit .three-col__col { float: left; width: 25%; border: 1px solid gray; } .region-poker.mode-edit .three-col__col:before, .region-casino.mode-edit .three-col__col:before, .region-poker.mode-edit .three-col__col:after, .region-casino.mode-edit .three-col__col:after { content: ''; display: block; border-top: 1px solid rgba(0, 0, 0, 0.25); margin: 1rem 0; } .region-poker.mode-edit .three-col__col--center, .region-casino.mode-edit .three-col__col--center { width: 47%; padding: 0 20px; } /* =========================================== utility.loading-spinner ========================================= */ .loading-spinner { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48L3N2Zz4=); } @keyframes loading-spinner-animation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /* =========================================== utility.show-hide ========================================= */ .avalon-area { /** * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ /** * Hide visually and from screen readers. */ } .avalon-area .u-hidden-visually { border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } .avalon-area .u-hidden { display: none !important; } /* =========================================== utility.spacing ========================================= */ .avalon-area .u-margin--none { margin: 0 !important; } .avalon-area .u-margin-bottom--none { margin-bottom: 0 !important; } .avalon-area .u-margin-bottom--xs { margin-bottom: 0.5rem !important; } .avalon-area .u-margin-bottom--sm { margin-bottom: 1rem !important; } .avalon-area .u-margin-bottom { margin-bottom: 2rem !important; } .avalon-area .u-margin-bottom--lg { margin-bottom: 3rem !important; } .avalon-area .u-margin-bottom--xl { margin-bottom: 5rem !important; } .avalon-area .u-margin-top--xs { margin-top: 0.5rem !important; } .avalon-area .u-margin-top--sm { margin-top: 1rem !important; } .avalon-area .u-margin-top { margin-top: 2rem !important; } .avalon-area .u-margin-top--lg { margin-top: 3rem !important; } .avalon-area .u-margin-top--xl { margin-top: 5rem !important; } .avalon-area .u-padding--none { padding: 0 !important; } .avalon-area .u-padding-bottom--none, .tabs-component--tabs-disabled .avalon-tabs-component__frame-title, .avalon-area .three-col__col--center section:last-of-type { padding-bottom: 0 !important; } .avalon-area .u-padding-bottom--xs { padding-bottom: 0.5rem !important; } .avalon-area .u-padding-bottom--sm { padding-bottom: 1rem !important; } .avalon-area .u-padding-bottom { padding-bottom: 2rem !important; } .avalon-area .u-padding-bottom--lg { padding-bottom: 3rem !important; } .avalon-area .u-padding-bottom--xl { padding-bottom: 5rem !important; } .avalon-area .u-padding-top--none, .avalon-heading + .avalon-content-text, .avalon-area .three-col__col--center section:first-child { padding-top: 0 !important; } .avalon-area .u-padding-top--xs { padding-top: 0.5rem !important; } .avalon-area .u-padding-top--sm { padding-top: 1rem !important; } .avalon-area .u-padding-top { padding-top: 2rem !important; } .avalon-area .u-padding-top--lg { padding-top: 3rem !important; } .avalon-area .u-padding-top--xl, .tabs-component--tabs-disabled .avalon-tabs-component__frame-title { padding-top: 5rem !important; } .avalon-area .u-padding-ver--none { padding-top: 0 !important; padding-bottom: 0 !important; } .avalon-area .u-padding-ver--xs { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .avalon-area .u-padding-ver--sm { padding-top: 1rem !important; padding-bottom: 1rem !important; } .avalon-area .u-padding-ver { padding-top: 2rem !important; padding-bottom: 2rem !important; } .avalon-area .u-padding-ver--lg { padding-top: 3rem !important; padding-bottom: 3rem !important; } .avalon-area .u-padding-ver--xl { padding-top: 5rem !important; padding-bottom: 5rem !important; } .avalon-area .u-padding-hor--none, .avalon-area .three-col__col--center section { padding-left: 0 !important; padding-right: 0 !important; } /* =========================================== utility.color-helpers ========================================= */ .avalon-area .u-text--white { color: white; } .avalon-area .u-text--black { color: black; } .avalon-area .u-text--yellow { color: yellow; } .avalon-area .u-text--primary { color: #feb700; color: var(--color-primary); } .avalon-area .u-text--secondary { color: #bb7f36; color: var(--color-secondary); } .avalon-area .u-background--white { background-color: white; } .avalon-area .u-background--black { background-color: black; } .avalon-area .u-background--primary { background-color: #feb700; background-color: var(--color-primary); } .avalon-area .u-background--secondary { background-color: #bb7f36; background-color: var(--color-secondary); } .avalon-area .u-background--secondary-dark { background-color: #74653c; background-color: var(--color-secondary--dark); } /* =========================================== utility.sitecore-edit ========================================= */ .avalon-sitecoreedit { font-size: 11px; font-weight: normal; font-family: "Open Sans", Helvetica, Arial, sans-serif; color: #111; background: #eee; padding: 10px; text-align: left; } .avalon-sitecoreedit span[scfieldtype="single-line text"], .avalon-sitecoreedit span[scfieldtype="droplink"] { display: block; border: 1px solid #333; margin: 2px 0 5px; padding: 1px 4px; background: white; } .avalon-sitecoreedit img, img.avalon-sitecoreedit { width: auto; height: auto; max-width: 100%; min-width: 40px; } .component-backgroundcolor--white { background-color: white; } .component-backgroundcolor--black { background-color: black; } .component-backgroundcolor--current-brand { background-color: #d59a00; } .component-backgroundcolor--dli { background-color: #0f4096; } .component-backgroundcolor--poker { background-color: black; } .component-backgroundcolor--spillehjoernet { background-color: #7f96b3; } .component-backgroundcolor--casino { background-color: #a68956; } .component-backgroundcolor--dantoto { background-color: #d96224; } .component-backgroundcolor--oddset { background-color: #0f4096; } .component-backgroundcolor--tips { background-color: #189862; } .component-backgroundcolor--bingo { background-color: #a1d138; } .component-backgroundcolor--dlo { background-color: #c21617; } .component-backgroundcolor--lotto { background-color: #E11E00; } .component-backgroundcolor--eurojackpot { background-color: #e5a340; } .component-backgroundcolor--vikinglotto { background-color: #1a23fa; } .component-backgroundcolor--keno { background-color: #25a5e8; } .component-backgroundcolor--all-or-nothing { background-color: #191339; } .component-backgroundcolor--quick { background-color: #7e4787; } .component-backgroundcolor--quick-with-border-radius { background-color: #7e4787; border-radius: 4rem; position: relative; margin-top: -6rem; } .component-backgroundcolor--plus { background-color: #074a32; } .component-font--Oddset { font-family: Oddset, Impact, 'Anton Regular', Helvetica, Arial, sans-serif; } /* =========================================== imports ========================================= */ /* =========================================== imports ========================================= */ /* ********* Variables ********* */ /* =========================================== settings.global ========================================= */ /** * High-level settings and variables, * that are accessible in whole Avalon project */ /* =========================================== settings.breakpoints ========================================= */ /* =========================================== settings.colors ========================================= */ /* New theming colors (use these in future, convert old colors along the way) ========================================================================== */ /* Color variables used in AvalonComponents, Poker and Casino projects /* (Old theming colors, should be slowly removed) ========================================================================== */ /* Corporate colors ========================================================================== */ /* Poker colors ========================================================================== */ /* Casino colors ========================================================================== */ /* Bingo colors ========================================================================== */ /* Casino colors ========================================================================== */ /* Oddset colors ========================================================================== */ /* Virtuel colors ========================================================================== */ /* EuroJackpot colors ========================================================================== */ /* Set Color Variables ========================================================================== */ /* Components ========================================================================== */ /* *********** MIXINS ********** */ /* =========================================== tools.mixins ========================================= */ /* =========================================== utility.loading-spinner ========================================= */ .loading-spinner { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48L3N2Zz4=); } @keyframes loading-spinner-animation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /** * Colors for Subscription */ /** * Primary */ /** * Text * Mobile font sizes have been halved */ /** * Buttons * Mobile font sizes have been halved */ .content-size-xs, .content-size-sm, .content-size-md, .content-size-lg, .content-size-full { width: 100%; margin: 0 auto 2rem; } .content-size-xs { max-width: 42rem; } .content-size-sm { max-width: 48rem; } .content-size-md { max-width: 52rem; } .content-size-lg { max-width: 60rem; } .content-size-full { max-width: none; } .content-size-extra-top { margin-top: 1rem !important; } .content-size-less-top { margin-top: -1rem !important; } .content-size-extra-bottom { margin-bottom: 3rem !important; } .content-size-less-bottom { margin-bottom: 1rem !important; } .header-subtitle { background: #FFFFFF; width: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center; padding: 0; text-align: center; padding-top: 4rem; position: relative; } .header-subtitle__header { font-size: 2.8rem; line-height: 3.4rem; margin-bottom: 0; padding: 0 1rem; color: #000000; font-weight: 900; margin-top: 0; overflow-wrap: break-word; } @media screen and (min-width: 768px) { .header-subtitle__header { font-size: 4rem; line-height: 4.6rem; margin-bottom: 1.6rem; } } .header-subtitle__sub-header { font-size: 1.4rem; line-height: 2.2rem; padding: 0 3rem; color: #a3a6ab; font-weight: 600; overflow-wrap: break-word; margin: 0; } @media screen and (min-width: 768px) { .header-subtitle__sub-header { padding: 0 19rem; font-size: 1.6rem; line-height: 2.4rem; } } @media screen and (min-width: 950px) { .header-subtitle__sub-header { padding: 0 34%; } } /* =========================================== imports ========================================= */ /* =========================================== imports ========================================= */ /* ********* Variables ********* */ /* =========================================== settings.global ========================================= */ /** * High-level settings and variables, * that are accessible in whole Avalon project */ /* =========================================== settings.breakpoints ========================================= */ /* =========================================== settings.colors ========================================= */ /* New theming colors (use these in future, convert old colors along the way) ========================================================================== */ /* Color variables used in AvalonComponents, Poker and Casino projects /* (Old theming colors, should be slowly removed) ========================================================================== */ /* Corporate colors ========================================================================== */ /* Poker colors ========================================================================== */ /* Casino colors ========================================================================== */ /* Bingo colors ========================================================================== */ /* Casino colors ========================================================================== */ /* Oddset colors ========================================================================== */ /* Virtuel colors ========================================================================== */ /* EuroJackpot colors ========================================================================== */ /* Set Color Variables ========================================================================== */ /* Components ========================================================================== */ /* *********** MIXINS ********** */ /* =========================================== tools.mixins ========================================= */ /* =========================================== utility.loading-spinner ========================================= */ .loading-spinner { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48L3N2Zz4=); } @keyframes loading-spinner-animation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /** * Colors for Subscription */ /** * Primary */ /** * Text * Mobile font sizes have been halved */ /** * Buttons * Mobile font sizes have been halved */ .content-size-xs, .content-size-sm, .content-size-md, .content-size-lg, .content-size-full { width: 100%; margin: 0 auto 2rem; } .content-size-xs { max-width: 42rem; } .content-size-sm { max-width: 48rem; } .content-size-md { max-width: 52rem; } .content-size-lg { max-width: 60rem; } .content-size-full { max-width: none; } .content-size-extra-top { margin-top: 1rem !important; } .content-size-less-top { margin-top: -1rem !important; } .content-size-extra-bottom { margin-bottom: 3rem !important; } .content-size-less-bottom { margin-bottom: 1rem !important; } :root { --multiStepsBannerBackgroundColor: #1c1c1c; } :root .region-vikinglotto, :root .region-avalon-vikinglotto { --multiStepsBannerBackgroundColor: #0000ff; } :root .region-allornothing, :root .region-avalon-allornothing { --multiStepsBannerBackgroundColor: #191339; } :root .region-eurojackpot, :root .region-avalon-eurojackpot { --multiStepsBannerBackgroundColor: #151515; } :root .region-keno, :root .region-avalon-keno { --multiStepsBannerBackgroundColor: #00a5eb; } :root .region-lotto, :root .region-avalon-lotto { --multiStepsBannerBackgroundColor: #E11E00; } :root .region-playtogether, :root .region-avalon-playtogether { --multiStepsBannerBackgroundColor: #094366; } :root .region-quick, :root .region-avalon-quick { --multiStepsBannerBackgroundColor: #7f4488; } :root .region-subscription, :root .region-avalon-subscription { --multiStepsBannerBackgroundColor: #2e3535; } .multi-steps-banner { width: 100%; padding: 2rem 0; position: relative; height: auto; justify-content: center; align-content: center; display: flex; max-width: 1440px; margin-left: auto; margin-right: auto; } .multi-steps-banner__wrapper { background-color: var(--multiStepsBannerBackgroundColor, #1c1c1c); border-radius: 3rem; padding: 3rem 2rem; display: inline-block; width: 100%; margin: 0 2rem; text-align: center; } @media screen and (min-width: 768px) { .multi-steps-banner__wrapper { padding: 3rem; margin: 0 5rem; width: 100%; } } @media screen and (min-width: 1216px) { .multi-steps-banner__wrapper { display: flex; padding: 0; width: 100%; text-align: center; max-width: 1440px; margin: 0 5rem; } } .multi-steps-banner__step { width: 100%; margin-top: 1.5rem; margin-bottom: 1.5rem; text-align: center; display: inline-block; vertical-align: top; padding-bottom: 1.5rem; padding-top: 1.5rem; } @media screen and (min-width: 768px) { .multi-steps-banner__step { width: 33.3%; margin-bottom: 0; } } @media screen and (min-width: 1216px) { .multi-steps-banner__step { width: 0; flex: 1 1 0; padding: 5rem 0; margin-top: 0; } } .multi-steps-banner__img { width: 10rem; height: 10rem; margin-bottom: 1.2rem; } .multi-steps-banner__text { font-size: 1.6rem; line-height: 2.8rem; padding: 0 1rem; color: #FFFFFF; font-weight: 700; overflow-wrap: break-word; margin-bottom: 0; } @media screen and (min-width: 768px) { .multi-steps-banner__text { padding: 0 4rem; } } .multi-steps-banner__text a { color: #FFFFFF; text-decoration: underline; } /* =========================================== imports ========================================= */ /* =========================================== imports ========================================= */ /* ********* Variables ********* */ /* =========================================== settings.global ========================================= */ /** * High-level settings and variables, * that are accessible in whole Avalon project */ /* =========================================== settings.breakpoints ========================================= */ /* =========================================== settings.colors ========================================= */ /* New theming colors (use these in future, convert old colors along the way) ========================================================================== */ /* Color variables used in AvalonComponents, Poker and Casino projects /* (Old theming colors, should be slowly removed) ========================================================================== */ /* Corporate colors ========================================================================== */ /* Poker colors ========================================================================== */ /* Casino colors ========================================================================== */ /* Bingo colors ========================================================================== */ /* Casino colors ========================================================================== */ /* Oddset colors ========================================================================== */ /* Virtuel colors ========================================================================== */ /* EuroJackpot colors ========================================================================== */ /* Set Color Variables ========================================================================== */ /* Components ========================================================================== */ /* *********** MIXINS ********** */ /* =========================================== tools.mixins ========================================= */ /* =========================================== utility.loading-spinner ========================================= */ .loading-spinner { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48L3N2Zz4=); } @keyframes loading-spinner-animation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /** * Colors for Subscription */ /** * Primary */ /** * Text * Mobile font sizes have been halved */ /** * Buttons * Mobile font sizes have been halved */ .content-size-xs, .content-size-sm, .content-size-md, .content-size-lg, .content-size-full { width: 100%; margin: 0 auto 2rem; } .content-size-xs { max-width: 42rem; } .content-size-sm { max-width: 48rem; } .content-size-md { max-width: 52rem; } .content-size-lg { max-width: 60rem; } .content-size-full { max-width: none; } .content-size-extra-top { margin-top: 1rem !important; } .content-size-less-top { margin-top: -1rem !important; } .content-size-extra-bottom { margin-bottom: 3rem !important; } .content-size-less-bottom { margin-bottom: 1rem !important; } :root { --highlightBackground: #eeeeee; } :root .region-vikinglotto, :root .region-avalon-vikinglotto { --highlightBackground: #0000ff; } :root .region-allornothing, :root .region-avalon-allornothing { --highlightBackground: #191339; } :root .region-eurojackpot, :root .region-avalon-eurojackpot { --highlightBackground: #151515; } :root .region-keno, :root .region-avalon-keno { --highlightBackground: #00a5eb; } :root .region-lotto, :root .region-avalon-lotto { --highlightBackground: #E11E00; } :root .region-playtogether, :root .region-avalon-playtogether { --highlightBackground: #094366; } :root .region-quick, :root .region-avalon-quick { --highlightBackground: #7f4488; } :root .region-subscription, :root .region-avalon-subscription { --highlightBackground: #2e3535; } .card-cta { background: #FFFFFF; display: flex; justify-content: center; flex-wrap: wrap; padding-bottom: 4rem; padding-top: 4rem; margin-left: auto; margin-right: auto; max-width: 1440px; } .card-cta__wrapper { display: block; padding: 0 2rem; width: 100%; } @media screen and (min-width: 768px) { .card-cta__wrapper { padding: 0 1.5rem; width: 100%; flex-wrap: wrap; display: flex; justify-content: center; } } @media screen and (min-width: 1216px) { .card-cta__wrapper { padding: 0 5rem; width: 100%; max-width: 1440px; } } .card-cta__highlight { color: #FFFFFF !important; background-color: var(--highlightBackground, #eeeeee) !important; } .card-cta__card { color: #000000; width: 100%; text-align: center; display: flex; align-content: center; flex-direction: column; background-color: #eeeeee; border-radius: 3rem; border-bottom: #dbdbdb 0.4rem solid; border-right: #dbdbdb 0.4rem solid; padding: 2.5rem 0; margin-bottom: 4rem; position: relative; } @media screen and (min-width: 768px) { .card-cta__card { width: 46%; margin: 1rem; } } @media screen and (min-width: 1216px) { .card-cta__card { width: 0; flex: 1 1 0; } } @media screen and (min-width: 1216px) { .card-cta__card:first-child { margin-left: 0; } .card-cta__card:last-child { margin-right: 0; } } .card-cta__img { width: 12rem; height: 12rem; margin-left: auto; margin-right: auto; } .card-cta__small-header { font-weight: 800; font-size: 1.4rem; line-height: 1.6rem; overflow-wrap: break-word; padding: 1rem 1.6rem 0; margin: 0; text-transform: uppercase; } @media screen and (min-width: 768px) { .card-cta__small-header { line-height: 1.6rem; } } @media screen and (min-width: 1216px) { .card-cta__small-header { line-height: 1.6rem; } } .card-cta__text { line-height: 1.6rem; overflow-wrap: break-word; font-size: 1.2rem; padding: 0 1.6rem 2.2rem; margin: 0; font-weight: 600; } @media screen and (min-width: 768px) { .card-cta__text { padding: 0 1.6rem 2.2rem; } } @media screen and (min-width: 950px) { .card-cta__text { margin-bottom: 0; } } .card-cta__large-header { font-size: 2rem; line-height: 2.7rem; margin: 0 0 0.5rem 0 !important; padding: 0 1.6rem; font-weight: 900; text-transform: uppercase; overflow-wrap: break-word; } @media screen and (min-width: 768px) { .card-cta__large-header { padding: 0 1.6rem 0; font-size: 2rem !important; line-height: 2.7rem !important; } } .card-cta__cta { background: #feb700; color: #000000; border-radius: 2.5rem; font-size: 1.2rem; text-align: center; padding: 0; line-height: 4.3rem; padding-top: 0.1rem; font-weight: 800; display: inline-block; position: relative; outline: none; border: none; text-decoration: none; vertical-align: top; overflow: hidden; box-sizing: border-box; width: auto; text-transform: uppercase; backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; transition: 0.2s ease-out; margin: auto 1.6rem 0; } .card-cta__cta:hover { transition: 0.2s ease-in 0.05s; margin: auto 1.2rem 0; cursor: pointer; } .card-cta__cta:active, .card-cta__cta:focus { background: #f5d900; } .card-cta__label { width: 12.8rem; height: 8.7rem; overflow: hidden; position: absolute; top: 0; left: 0; } .card-cta__label-text { font-weight: 800; font-size: 1.2rem; color: #FFFFFF; text-align: center; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); position: relative; padding: 0.6rem 0; left: -5.2rem; top: 1.2rem; width: 17.4rem; background-color: #ff3d1f; } .campaign-page .campaigns-header:before, .campaign-page .campaigns-footer:before, .campaign-page .campaigns-header:after, .campaign-page .campaigns-footer:after { content: ""; display: table; } .campaign-page .campaigns-header:after, .campaign-page .campaigns-footer:after { clear: both; } .campaign-page .campaigns-header .size-full, .campaign-page .campaigns-footer .size-full { padding: 0 12px; } .campaign-page .main-column:before, .campaign-page .main-column:after { content: ""; display: table; } .campaign-page .main-column:after { clear: both; } .campaign-page-container { padding: 20px 12px 10px; } .iframe-page .campaign-page-container { padding: 0; } .campaign-page-container .inner-wrapper { padding: 30px 18px 10px; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -moz-box-shadow: 0 15px 35px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 15px 35px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 15px 35px 2px rgba(0, 0, 0, 0.5); } .color-bingo-lime .campaign-page-container .inner-wrapper { background-color: #a0d323; } .color-blitz-bordeaux .campaign-page-container .inner-wrapper { background-color: #6b0000; } .color-blitz-white .campaign-page-container .inner-wrapper { background-color: #ffffff; } .color-casino-gold .campaign-page-container .inner-wrapper { background-color: #a78952; } .color-ds-green .campaign-page-container .inner-wrapper { background-color: #004b32; } .color-ds-yellow .campaign-page-container .inner-wrapper { background-color: #feb700; } .color-dantoto-orange .campaign-page-container .inner-wrapper { background-color: #dc5f11; } .color-eurojackpot-gold .campaign-page-container .inner-wrapper { background-color: #e8a332; } .color-keno-lightblue .campaign-page-container .inner-wrapper { background-color: #00a5eb; } .color-lotto-red .campaign-page-container .inner-wrapper { background-color: #c50005; } .color-oddset-darkblue .campaign-page-container .inner-wrapper { background-color: #003e99; } .color-oddset-grey .campaign-page-container .inner-wrapper { background-color: #2b2b2b; } .color-oddset-orange .campaign-page-container .inner-wrapper { background-color: #dc5f11; } .color-onsdagslotto-blue .campaign-page-container .inner-wrapper { background-color: #0072ba; } .color-poker-black .campaign-page-container .inner-wrapper { background-color: #000000; } .color-quick-violet .campaign-page-container .inner-wrapper { background-color: #7f4488; } .color-tips-green .campaign-page-container .inner-wrapper { background-color: #009a60; } .color-cego-greyblue .campaign-page-container .inner-wrapper { background-color: #7d96b4; } .color-spillehjoernet-greyblue .campaign-page-container .inner-wrapper { background-color: #7d96b4; } .campaign-page-container .inner-wrapper:before, .campaign-page-container .inner-wrapper:after { content: ""; display: table; } .campaign-page-container .inner-wrapper:after { clear: both; } .campaign-page-container .inner-wrapper.hide-border { padding: 0; } .campaign-page-container .inner-wrapper .size-full { padding: 0 !important; } .iframe-page .campaign-page-container .inner-wrapper { padding: 0; box-shadow: none; } .campaign-page-container .image img { width: 100%; height: auto; border-radius: 3px 3px 0 0; margin-bottom: -3px; } .campaign-page-container .content { background: #fff; padding: 20px 30px; font-size: 1.4rem; } .campaign-page-container .content .teaser { font-size: 1.6rem; line-height: 1.3; font-weight: bold; } .campaign-page-container .content .content-title { font-weight: bold; margin-bottom: 8px; font-size: 1.5rem; margin-top: 30px; font-style: normal; } .campaign-page-container .content .text { padding-left: 17px; } .campaign-page-container .content ul { padding-left: 29px; } .campaign-page-container .content ul li { line-height: 18px; list-style-type: square; } .campaign-page-container .content ol { padding-left: 29px; } .campaign-page-container .content ol li { line-height: 18px; } .campaign-page-container .content img { max-width: 100%; height: auto; } .campaign-page-container .content .heading { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; font-size: 3rem; line-height: 3.5rem; } .campaign-page-container .content p { margin: 0; } .campaign-page-container .content h1, .campaign-page-container .content h2, .campaign-page-container .content h3, .campaign-page-container .content h4 { margin: 0; font-size: 1.5rem; font-weight: normal; } .campaign-page-container .content h1 { line-height: 2; } .campaign-page-container .content h2 { line-height: 1; } .campaign-page-container .content h3 { line-height: 0.8; } .campaign-page-container .content h4 { line-height: 0.6; } .campaign-page-container .content p { margin: 0 0 0.8em; } .campaign-page-container .content h1, .campaign-page-container .content h2, .campaign-page-container .content h3, .campaign-page-container .content h4 { margin: 0; } .campaign-page-container .content h1 { font-size: 2rem; margin-bottom: 1em; } .campaign-page-container .content h2 { font-size: 1.8rem; margin-bottom: 0.5em; } .campaign-page-container .content h3 { font-size: 1.5rem; } .campaign-page-container .content h4 { font-size: 1.5rem; font-style: italic; } .campaign-page-container .content a { color: #333; text-decoration: underline; /* .cm-tips-button() { .cm-brand-buttons-style-three(@topColor: rgba(224,118,51,1), @bottomColor: rgba(188,82,15,1)); box-shadow: 0 1px 2px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(255,255,255,0.20); text-shadow: 0 1px 1px rgba(156,60,0,0.50); } .cm-tips-button-large() { .cm-brand-buttons-style-three(@height: 60px, @minWidth: 220px, @fontSize: 2, @topColor: rgba(224,118,51,1), @bottomColor: rgba(188,82,15,1)); box-shadow: 0 1px 2px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(255,255,255,0.20); text-shadow: 0 1px 1px rgba(156,60,0,0.50); }*/ } .campaign-page-container .content a.bingo-button { display: table-cell; height: 30px; min-width: 100px; padding: 0 25px 5px; background-color: #80a91c; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 1.5rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #607f0b, inset 0 1px 0 0 rgba(160, 211, 35, 0.8); text-shadow: 0 1px 0 #607f15; } .campaign-page-container .content a.bingo-button:hover { background-color: #8fb82b; } .campaign-page-container .content a.bingo-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #80a91c; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #607f0b, inset 0 1px 0 0 rgba(160, 211, 35, 0.8); text-shadow: 0 1px 0 #607f15; } .campaign-page-container .content a.bingo-button-large:hover { background-color: #8fb82b; } .campaign-page-container .content a.casino-button { display: table-cell; height: 30px; min-width: 100px; padding: 0 25px 5px; background-color: #652044; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 1.5rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #430d29, inset 0 1px 0 0 rgba(151, 48, 102, 0.8); text-shadow: 0 1px 0 #7c643b; } .campaign-page-container .content a.casino-button:hover { background-color: #742f53; } .campaign-page-container .content a.casino-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #652044; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #430d29, inset 0 1px 0 0 rgba(151, 48, 102, 0.8); text-shadow: 0 1px 0 #7c643b; } .campaign-page-container .content a.casino-button-large:hover { background-color: #742f53; } .campaign-page-container .content a.dantoto-button { display: table-cell; height: 30px; min-width: 100px; padding: 0 25px 5px; background-color: #47ab66; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 1.5rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #1f7a44, inset 0 1px 0 0 rgba(92, 200, 125, 0.8); text-shadow: 0 1px 0 #1f7a44; } .campaign-page-container .content a.dantoto-button:hover { background-color: #56ba75; } .campaign-page-container .content a.dantoto-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #47ab66; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #1f7a44, inset 0 1px 0 0 rgba(92, 200, 125, 0.8); text-shadow: 0 1px 0 #1f7a44; } .campaign-page-container .content a.dantoto-button-large:hover { background-color: #56ba75; } .campaign-page-container .content a.quick-button { display: table-cell; height: 30px; min-width: 100px; padding: 0 25px 5px; background-color: #7f4488; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 1.5rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #5e2767, inset 0 1px 0 0 rgba(166, 124, 172, 0.8); text-shadow: 0 1px 0 #7f4488; } .campaign-page-container .content a.quick-button:hover { background-color: #8e5397; } .campaign-page-container .content a.quick-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #7f4488; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #5e2767, inset 0 1px 0 0 rgba(166, 124, 172, 0.8); text-shadow: 0 1px 0 #7f4488; } .campaign-page-container .content a.quick-button-large:hover { background-color: #8e5397; } .campaign-page-container .content a.cross-sales-button { display: table-cell; height: 30px; min-width: 100px; padding: 0 25px 5px; background-color: #feb700; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 1.5rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; color: #004b32; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #5e2767, inset 0 1px 0 0 rgba(255, 255, 255, 0.5); text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5); } .campaign-page-container .content a.cross-sales-button:hover { background-color: #ffc60f; } .campaign-page-container .content a.cross-sales-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #feb700; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; color: #004b32; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #5e2767, inset 0 1px 0 0 rgba(255, 255, 255, 0.5); text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5); } .campaign-page-container .content a.cross-sales-button-large:hover { background-color: #ffc60f; } .campaign-page-container .content a.eurojackpot-button { display: table-cell; height: 34px; min-width: 100px; padding: 0 12px 5px; background: #000000; background: #000000 radial-gradient(circle at 28% top, #323232, #000000) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.4rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; padding-bottom: 0px; font-family: 'Anton', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; color: #fec115; } .campaign-page-container .content a.eurojackpot-button:hover { background: #0f0f0f radial-gradient(circle at 28% top, #414141, #0f0f0f) no-repeat; } .campaign-page-container .content a.eurojackpot-button-large { display: table-cell; height: 69px; min-width: 200px; padding: 0 12px 5px; background: #000000; background: #000000 radial-gradient(circle at 28% top, #323232, #000000) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 2rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; padding-bottom: 0px; font-family: 'Anton', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; color: #fec115; } .campaign-page-container .content a.eurojackpot-button-large:hover { background: #0f0f0f radial-gradient(circle at 28% top, #414141, #0f0f0f) no-repeat; } .campaign-page-container .content a.lotto-button { display: table-cell; height: 34px; min-width: 100px; padding: 0 12px 5px; background: #feb700; background: #feb700 radial-gradient(circle at 28% top, #fecd40, #feb700) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.3rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 0 #dfa100; text-shadow: 0 1px 1px rgba(223, 161, 0, 0.8); } .campaign-page-container .content a.lotto-button:hover { background: #ffc60f radial-gradient(circle at 28% top, #ffdc4f, #ffc60f) no-repeat; } .campaign-page-container .content a.lotto-button-large { display: table-cell; height: 69px; min-width: 200px; padding: 0 12px 5px; background: #feb700; background: #feb700 radial-gradient(circle at 28% top, #fecd40, #feb700) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.7rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 0 #dfa100; text-shadow: 0 1px 1px rgba(223, 161, 0, 0.8); } .campaign-page-container .content a.lotto-button-large:hover { background: #ffc60f radial-gradient(circle at 28% top, #ffdc4f, #ffc60f) no-repeat; } .campaign-page-container .content a.danskespil-button { display: table-cell; height: 36px; min-width: 100px; padding: 0 12px 5px; background: #ffc425; background: linear-gradient(to top, #feb700, #ffc425); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 1.4rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .campaign-page-container .content a.danskespil-button:hover { background: linear-gradient(to top, #ffc60f, #ffd334); } .campaign-page-container .content a.danskespil-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #ffc425; background: linear-gradient(to top, #feb700, #ffc425); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .campaign-page-container .content a.danskespil-button-large:hover { background: linear-gradient(to top, #ffc60f, #ffd334); } .campaign-page-container .content a.oddset-button { display: table-cell; height: 36px; min-width: 100px; padding: 0 12px 5px; background: #003e99; background: linear-gradient(to top, #002f71, #003e99); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 1.5rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .campaign-page-container .content a.oddset-button:hover { background: linear-gradient(to top, #0f3e80, #0f4da8); } .campaign-page-container .content a.oddset-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #003e99; background: linear-gradient(to top, #002f71, #003e99); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .campaign-page-container .content a.oddset-button-large:hover { background: linear-gradient(to top, #0f3e80, #0f4da8); } .campaign-page-container .content a.oddset-button-orange { display: table-cell; height: 36px; min-width: 100px; padding: 0 12px 5px; background: #dc5f11; background: linear-gradient(to top, #ae4a0c, #dc5f11); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 1.5rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-shadow: 0 1px 1px rgba(156, 60, 0, 0.5); } .campaign-page-container .content a.oddset-button-orange:hover { background: linear-gradient(to top, #bd591b, #eb6e20); } .campaign-page-container .content a.oddset-button-large-orange { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #dc5f11; background: linear-gradient(to top, #ae4a0c, #dc5f11); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-shadow: 0 1px 1px rgba(156, 60, 0, 0.5); } .campaign-page-container .content a.oddset-button-large-orange:hover { background: linear-gradient(to top, #bd591b, #eb6e20); } .campaign-page-container .content a.poker-button { display: table-cell; height: 36px; min-width: 100px; padding: 0 12px 5px; background: #feb804; background: linear-gradient(to top, #d9a00e, #feb804); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 1.5rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; color: #000000; } .campaign-page-container .content a.poker-button:hover { background: linear-gradient(to top, #e8af1d, #ffc713); } .campaign-page-container .content a.poker-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #feb804; background: linear-gradient(to top, #d9a00e, #feb804); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; color: #000000; } .campaign-page-container .content a.poker-button-large:hover { background: linear-gradient(to top, #e8af1d, #ffc713); } .campaign-page-container .content a.tips-button { display: table-cell; height: 34px; min-width: 100px; padding: 0 12px 5px; background: #00985f; background: #00985f radial-gradient(circle at 28% top, #56ba75, #00985f) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.3rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .campaign-page-container .content a.tips-button:hover { background: #0fa76e radial-gradient(circle at 28% top, #65c984, #0fa76e) no-repeat; } .campaign-page-container .content a.tips-button-large { display: table-cell; height: 69px; min-width: 200px; padding: 0 12px 5px; background: #00985f; background: #00985f radial-gradient(circle at 28% top, #56ba75, #00985f) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.7rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .campaign-page-container .content a.tips-button-large:hover { background: #0fa76e radial-gradient(circle at 28% top, #65c984, #0fa76e) no-repeat; } .campaign-page-container .content a.spillehjoernet-button { display: table-cell; height: 36px; min-width: 100px; padding: 0 12px 5px; background: #d5549d; background: linear-gradient(to top, #702765, #d5549d); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 1.5rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); } .campaign-page-container .content a.spillehjoernet-button:hover { background: linear-gradient(to top, #7f3674, #e463ac); } .campaign-page-container .content a.spillehjoernet-button-large { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #d5549d; background: linear-gradient(to top, #702765, #d5549d); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); } .campaign-page-container .content a.spillehjoernet-button-large:hover { background: linear-gradient(to top, #7f3674, #e463ac); } .campaign-page-container .content .action-section { text-align: center; } .campaign-page-container .content.has-background { color: #fff; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .campaign-page-container .content.has-background a { color: #fff; } .campaign-page-container .link-block > .link-block-button-container { display: inline-block; } .color-bingo-lime .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #80a91c; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #607f0b, inset 0 1px 0 0 rgba(160, 211, 35, 0.8); text-shadow: 0 1px 0 #607f15; } .color-bingo-lime .campaign-page-container .link-block a:hover { background-color: #8fb82b; } .color-blitz-bordeaux .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #ffc425; background: linear-gradient(to top, #feb700, #ffc425); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .color-blitz-bordeaux .campaign-page-container .link-block a:hover { background: linear-gradient(to top, #ffc60f, #ffd334); } .color-blitz-white .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #ffc425; background: linear-gradient(to top, #feb700, #ffc425); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .color-blitz-white .campaign-page-container .link-block a:hover { background: linear-gradient(to top, #ffc60f, #ffd334); } .color-casino-gold .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #652044; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #430d29, inset 0 1px 0 0 rgba(151, 48, 102, 0.8); text-shadow: 0 1px 0 #7c643b; } .color-casino-gold .campaign-page-container .link-block a:hover { background-color: #742f53; } .color-ds-green .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #ffc425; background: linear-gradient(to top, #feb700, #ffc425); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .color-ds-green .campaign-page-container .link-block a:hover { background: linear-gradient(to top, #ffc60f, #ffd334); } .color-ds-yellow .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #ffc425; background: linear-gradient(to top, #feb700, #ffc425); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .color-ds-yellow .campaign-page-container .link-block a:hover { background: linear-gradient(to top, #ffc60f, #ffd334); } .color-dantoto-orange .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #47ab66; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #1f7a44, inset 0 1px 0 0 rgba(92, 200, 125, 0.8); text-shadow: 0 1px 0 #1f7a44; } .color-dantoto-orange .campaign-page-container .link-block a:hover { background-color: #56ba75; } .color-eurojackpot-gold .campaign-page-container .link-block a { display: table-cell; height: 69px; min-width: 200px; padding: 0 12px 5px; background: #000000; background: #000000 radial-gradient(circle at 28% top, #323232, #000000) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 2rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; padding-bottom: 0px; font-family: 'Anton', Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; color: #fec115; } .color-eurojackpot-gold .campaign-page-container .link-block a:hover { background: #0f0f0f radial-gradient(circle at 28% top, #414141, #0f0f0f) no-repeat; } .color-keno-lightblue .campaign-page-container .link-block a { display: table-cell; height: 69px; min-width: 200px; padding: 0 12px 5px; background: #feb700; background: #feb700 radial-gradient(circle at 28% top, #fecd40, #feb700) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.7rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 0 #dfa100; text-shadow: 0 1px 1px rgba(223, 161, 0, 0.8); } .color-keno-lightblue .campaign-page-container .link-block a:hover { background: #ffc60f radial-gradient(circle at 28% top, #ffdc4f, #ffc60f) no-repeat; } .color-live-casino-gold .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #652044; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #430d29, inset 0 1px 0 0 rgba(151, 48, 102, 0.8); text-shadow: 0 1px 0 #7c643b; } .color-live-casino-gold .campaign-page-container .link-block a:hover { background-color: #742f53; } .color-lotto-red .campaign-page-container .link-block a { display: table-cell; height: 69px; min-width: 200px; padding: 0 12px 5px; background: #feb700; background: #feb700 radial-gradient(circle at 28% top, #fecd40, #feb700) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.7rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 0 #dfa100; text-shadow: 0 1px 1px rgba(223, 161, 0, 0.8); } .color-lotto-red .campaign-page-container .link-block a:hover { background: #ffc60f radial-gradient(circle at 28% top, #ffdc4f, #ffc60f) no-repeat; } .color-oddset-darkblue .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #dc5f11; background: linear-gradient(to top, #ae4a0c, #dc5f11); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; text-shadow: 0 1px 1px rgba(156, 60, 0, 0.5); } .color-oddset-darkblue .campaign-page-container .link-block a:hover { background: linear-gradient(to top, #bd591b, #eb6e20); } .color-oddset-grey .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #003e99; background: linear-gradient(to top, #002f71, #003e99); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .color-oddset-grey .campaign-page-container .link-block a:hover { background: linear-gradient(to top, #0f3e80, #0f4da8); } .color-oddset-orange .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #003e99; background: linear-gradient(to top, #002f71, #003e99); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; } .color-oddset-orange .campaign-page-container .link-block a:hover { background: linear-gradient(to top, #0f3e80, #0f4da8); } .color-onsdagslotto-blue .campaign-page-container .link-block a { display: table-cell; height: 69px; min-width: 200px; padding: 0 12px 5px; background: #feb700; background: #feb700 radial-gradient(circle at 28% top, #fecd40, #feb700) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.7rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 0 #dfa100; text-shadow: 0 1px 1px rgba(223, 161, 0, 0.8); } .color-onsdagslotto-blue .campaign-page-container .link-block a:hover { background: #ffc60f radial-gradient(circle at 28% top, #ffdc4f, #ffc60f) no-repeat; } .color-poker-black .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 12px 5px; background: #feb804; background: linear-gradient(to top, #d9a00e, #feb804); border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-weight: normal; font-size: 2rem; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: normal; color: #000000; } .color-poker-black .campaign-page-container .link-block a:hover { background: linear-gradient(to top, #e8af1d, #ffc713); } .color-quick-violet .campaign-page-container .link-block a { display: table-cell; height: 60px; min-width: 220px; padding: 0 25px 5px; background-color: #7f4488; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-size: 2rem; color: #ffffff; line-height: 1.1; text-align: center; text-decoration: none; vertical-align: middle; box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #5e2767, inset 0 1px 0 0 rgba(166, 124, 172, 0.8); text-shadow: 0 1px 0 #7f4488; } .color-quick-violet .campaign-page-container .link-block a:hover { background-color: #8e5397; } .color-tips-green .campaign-page-container .link-block a { display: table-cell; height: 69px; min-width: 200px; padding: 0 12px 5px; background: #00985f; background: #00985f radial-gradient(circle at 28% top, #56ba75, #00985f) no-repeat; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: 1.7rem; color: #ffffff; text-align: center; text-transform: uppercase; text-decoration: none; vertical-align: middle; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .color-tips-green .campaign-page-container .link-block a:hover { background: #0fa76e radial-gradient(circle at 28% top, #65c984, #0fa76e) no-repeat; } .is-mobile-detected .top-navigation-theme-eurojackpot .menu-toggle-right { background-color: #bd903d; } .top-navigation-theme-eurojackpot .brand-nav { background: #bb7f36; background: -moz-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: -webkit-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: linear-gradient(to right, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb7f36', endColorstr='#bb7f36', GradientType=1); } .top-navigation-theme-eurojackpot .corporate-nav { background: #bb7f36; background: -moz-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: -webkit-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: linear-gradient(to right, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb7f36', endColorstr='#bb7f36', GradientType=1); border-bottom: 1px solid white; } .top-navigation-theme-eurojackpot .mobile-navigation-header { background: #bb7f36; background: -moz-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: -webkit-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: linear-gradient(to right, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb7f36', endColorstr='#bb7f36', GradientType=1); } .top-navigation-theme-eurojackpot .mobile-navigation-footer-icon { background: #bb7f36; background: -moz-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: -webkit-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: linear-gradient(to right, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb7f36', endColorstr='#bb7f36', GradientType=1); } .top-navigation-theme-eurojackpot .mobile-navigation-item-link:before { background: #bb7f36; background: -moz-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: -webkit-linear-gradient(left, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); background: linear-gradient(to right, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb7f36', endColorstr='#bb7f36', GradientType=1); } .top-navigation-theme-eurojackpot .mega-menu__campaign__cta-button { background-color: #bd903d; color: white; } .top-navigation-theme-eurojackpot .mega-menu__campaign__cta-button:hover { background-color: #74653c; } body.region-eurojackpot .seo-text-container, body.region-avalon-eurojackpot .seo-text-container, body.color-eurojackpot-gold .seo-text-container { background-color: #74653c; } body.region-eurojackpot footer .info-bar, body.region-avalon-eurojackpot footer .info-bar, body.color-eurojackpot-gold footer .info-bar { background: linear-gradient(to right, #bb7f36 0%, #efb03c 25%, #bb7f36 50%, #efb03c 75%, #bb7f36 100%); } /* =========================================== settings.breakpoints ========================================= */ .app-universe .container { margin-left: 2.5rem; margin-right: 2.5rem; } @media (min-width: 767px) { .app-universe .container { margin-left: 5rem; margin-right: 5rem; } } @media (min-width: 1024px) { .app-universe .container { margin-left: auto; margin-right: auto; width: 95.8rem; } } .app-universe .app-changelog { margin-top: 4rem; margin-bottom: 4rem; color: white; } .app-universe .app-changelog .app-changelog-section { border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding: 2rem 0; } .app-universe .app-changelog .app-changelog-header { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 1rem; } .app-universe .app-changelog .app-changelog-header__version { font-size: 1.3rem; font-weight: 600; line-height: 2rem; } @media (min-width: 1024px) { .app-universe .app-changelog .app-changelog-header__version { font-size: 1.5rem; } } .app-universe .app-changelog .app-changelog-header__date { font-size: 1rem; line-height: 2rem; color: rgba(255, 255, 255, 0.5); } @media (min-width: 480px) { .app-universe .app-changelog .app-changelog-header__date { font-size: 1.1rem; } } @media (min-width: 1024px) { .app-universe .app-changelog .app-changelog-header__date { font-size: 1.2rem; } } .app-universe .app-changelog .app-changelog-content { color: rgba(255, 255, 255, 0.75); font-size: 1.2rem; line-height: 1.5; } @media (min-width: 480px) { .app-universe .app-changelog .app-changelog-content { font-size: 1.4rem; } } .app-universe .app-changelog .app-changelog-content ul { list-style-position: inside; } .app-universe .app-list { margin-bottom: 4rem; } .app-universe .app-list .app-list__hero { position: relative; height: 25rem; overflow: hidden; z-index: -1; padding-bottom: 5rem; margin-bottom: -5rem; top: 0; width: calc(100% + 30rem); left: -15rem; border-bottom-left-radius: 50% 25%; border-bottom-right-radius: 50% 25%; } .app-universe .app-list .app-list__hero > .app-list__hero-content { position: relative; margin: 0 15rem; height: inherit; } .app-universe .app-list .app-list__hero-image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; } .app-universe .app-list .app-list__hero-image img { height: 100%; width: 100%; object-fit: cover; } .app-universe .app-list .app-list__title { display: flex; justify-content: center; align-items: center; text-align: center; padding: 3.5rem 0 0; text-transform: uppercase; color: white; font-size: 2.1rem; line-height: 1.1; font-weight: 900; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); } @media (min-width: 767px) { .app-universe .app-list .app-list__title { font-size: 2.8rem; } } @media (min-width: 1024px) { .app-universe .app-list .app-list__title { font-size: 3.6rem; } } .app-universe .app-list .app-list__items-wrapper-title { margin-top: 2rem; font-size: 1.5rem; line-height: 1.4; font-weight: bold; color: white; } .app-universe .app-list .app-list__items { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; margin: 0 -0.5rem; } @media (min-width: 767px) { .app-universe .app-list .app-list__items { margin: 0 -1rem; } } .app-universe .app-list .app-list__item-wrapper { flex: 0 0 100%; overflow: hidden; padding: 0.5rem; } @media (min-width: 767px) { .app-universe .app-list .app-list__item-wrapper { padding: 1rem; flex: 0 0 50%; } } .app-universe .app-list .app-list__item { position: relative; min-height: 10.5rem; border-radius: 0.7rem; background: white; padding: 1.2rem 2rem 1.2rem 1.2rem; display: flex; flex-direction: row; height: 100%; } .app-universe .app-list .app-list__item:hover .app-list__item-icon { transform: scale(1.05) rotate(-0.01turn); margin-top: -0.1rem; } .app-universe .app-list .app-list__item-icon { box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5); width: 8rem; height: 8rem; border-radius: 22.5%; background-size: cover; transition: 100ms transform ease-out; margin-top: 0.5rem; } @media (min-width: 1024px) { .app-universe .app-list .app-list__item-icon { width: 10rem; height: 10rem; } } .app-universe .app-list .app-list__item-content { display: flex; flex-direction: column; flex: 1; margin-left: 2rem; } .app-universe .app-list .app-list__item-title { margin-top: 0.5rem; font-size: 1.6rem; line-height: 1.4; font-weight: bold; color: #014b32; } @media (min-width: 1024px) { .app-universe .app-list .app-list__item-title { font-size: 1.7rem; } } .app-universe .app-list .app-list__item-description { font-size: 1.2rem; line-height: 1.4; color: #a1a1B9; } @media (min-width: 1024px) { .app-universe .app-list .app-list__item-description { font-size: 1.3rem; } } .app-universe .app-list .app-list__item-link { text-transform: uppercase; color: #000000; font-size: 1.3rem; font-weight: bold; margin: auto 0 1rem 0; padding-top: 1rem; } @media (min-width: 1024px) { .app-universe .app-list .app-list__item-link { font-size: 1.5rem; } } .app-universe .app-list .app-list__item-platforms { position: absolute; color: #505050; font-style: italic; font-size: 1rem; right: 1.2rem; bottom: 0.2rem; } .app-universe__arrow { cursor: pointer; width: 1rem; height: 100%; color: white; padding: 0 1.2rem; margin: 0 1rem 0 0; outline: none; opacity: 1; transition: 150ms opacity ease-out; position: relative; display: flex; } .app-universe__arrow:before, .app-universe__arrow:after { content: ''; position: absolute; border-color: currentColor; border-style: solid; box-sizing: border-box; } .app-universe__arrow:before { width: 100%; border-width: 0.3rem 0 0 0; top: 50%; left: 0; transform: translateY(-50%); } .app-universe__arrow:after { width: 1.7rem; height: 1.7rem; border-width: 0 0 0.3rem 0.3rem; transform: translateY(-50%) rotate(45deg); left: 0; top: 50%; } .app-universe .app-universe__button { border-radius: 0.4rem; padding: 0 1.5rem; height: 3.3rem; line-height: 3.3rem; font-size: 1.3rem; text-transform: uppercase; display: inline-block; text-align: center; white-space: nowrap; cursor: pointer; user-select: none; transition: color 0.15s linear, background-color 0.15s linear; box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5); background-color: white; color: black; font-weight: 600; } .app-universe .app-universe__button-container { display: flex; flex-flow: row nowrap; position: relative; height: 100%; } .app-universe .app-universe__button--cta { position: relative; border-radius: 0.4rem; background-color: #FEB700; padding: 0 2rem; height: 4rem; line-height: 4rem; font-size: 1.3rem; font-weight: bold; text-transform: uppercase; min-width: 12.5rem; display: inline-block; text-align: center; color: black; white-space: nowrap; cursor: pointer; user-select: none; } .app-universe .app-universe__button--installation-guide { position: relative; color: white; height: 4rem; line-height: 4rem; font-size: 1.3rem; font-weight: bold; text-transform: uppercase; display: inline-block; padding: 0 0 0 3rem; cursor: pointer; user-select: none; } .app-universe .app-universe__button--installation-guide--your-luck { text-shadow: rgba(0, 0, 0, 0.4) 0.1rem 0 1rem; } .app-universe .app-universe__button--installation-guide:after { content: "?"; position: absolute; color: #e60000; background: white; width: 2rem; height: 2rem; top: 1rem; left: 0; line-height: 2rem; text-align: center; border-radius: 50%; } .ios-device .app-universe .app-universe__button--installation-guide { display: none; } .app-universe .app-universe__button--toggle { border-radius: 0.4rem; padding: 0 1.5rem; height: 3.3rem; line-height: 3.3rem; font-size: 1.3rem; font-weight: 600; text-transform: uppercase; display: inline-block; text-align: center; white-space: nowrap; cursor: pointer; user-select: none; transition: color 0.15s linear, background-color 0.15s linear; color: white; } .app-universe .app-universe__button--toggle.active { box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5); background-color: white; color: black; font-weight: 600; } .app-universe .app-universe__button-flash { position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .app-universe .app-universe__button-flash:before { position: absolute; content: ""; top: -50%; bottom: -50%; left: -200%; width: 3rem; background-color: rgba(255, 255, 255, 0.3); animation: appUniverseButtonFlash 1000ms linear infinite; transform: rotate(20deg); } .app-universe .app-universe__button-flash:after { position: absolute; content: ""; top: -50%; bottom: -50%; left: -200%; width: 1.5rem; background-color: rgba(255, 255, 255, 0.3); animation: appUniverseButtonFlash 1000ms linear infinite; animation-delay: 500ms; transform: rotate(20deg) translateX(-2rem); } @keyframes appUniverseButtonFlash { 100% { left: 300%; } } .app-universe .app-description { color: white; } .app-universe .app-description p { font-size: 1.3rem; margin: 0 0 0.5em; line-height: 1.4; font-weight: 400; text-transform: none; } .app-universe .app-description p:not([class]):last-child { margin: 0 0 1em; } @media (min-width: 767px) { .app-universe .app-description p { font-size: 1.5rem; } } .app-universe .app-description h1 { font-size: 2rem; line-height: 1.3; font-weight: 600; text-transform: none; margin: 0 0 0.2em; } @media (min-width: 767px) { .app-universe .app-description h1 { font-size: 2.8rem; } } .app-universe .app-description h1 ~ p { font-size: 1.4rem; } @media (min-width: 767px) { .app-universe .app-description h1 ~ p { font-size: 1.6rem; } } .app-universe .app-description h2 { font-size: 1.6rem; line-height: 1.4; font-weight: 600; text-transform: none; margin: 0 0 0.2em; } @media (min-width: 767px) { .app-universe .app-description h2 { font-size: 1.8rem; } } .app-universe .app-history { margin: 0 0 3rem; background: #eff2f8; border-radius: 1rem; padding: 2rem 2rem 2.5rem; } @media (min-width: 102.5rem) { .app-universe .app-history { padding: 2rem 2rem 3rem 2.5rem; } } .app-universe .app-history-header { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 1rem; } .app-universe .app-history-header .app-history-header__title { padding: 0.4rem 1rem 0 0; color: #222; font-size: 1.4rem; font-weight: 600; line-height: 1.3; } @media (min-width: 102.5rem) { .app-universe .app-history-header .app-history-header__title { font-size: 1.7rem; } } .app-universe .app-history-header__link { font-size: 1.1rem; line-height: 2.6rem; height: 2.6rem; padding: 0 2.2rem 0 1rem; background: red; color: white; border-radius: 1.3rem; text-decoration: none; position: relative; } @media (min-width: 102.5rem) { .app-universe .app-history-header__link { font-size: 1.3rem; line-height: 3rem; height: 3rem; border-radius: 1.5rem; padding: 0 2.7rem 0 1.7rem; } } .app-universe .app-history-header__link:after { content: ""; position: absolute; right: 1rem; top: 1.1rem; border: solid white; border-width: 0 0.1rem 0.1rem 0; display: inline-block; padding: 0.2rem; transform: rotate(-45deg); } @media (min-width: 102.5rem) { .app-universe .app-history-header__link:after { border-width: 0 0.1rem 0.1rem 0; padding: 0.3rem; top: 1.2rem; right: 1.2rem; } } .app-universe .app-history-header__version { font-size: 1.3rem; font-weight: 600; line-height: 2rem; color: #777; } @media (min-width: 102.5rem) { .app-universe .app-history-header__version { font-size: 1.5rem; } } .app-universe .app-history-header__date { color: #777; font-size: 1rem; line-height: 2rem; } @media (min-width: 50rem) { .app-universe .app-history-header__date { font-size: 1.1rem; } } @media (min-width: 102.5rem) { .app-universe .app-history-header__date { font-size: 1.2rem; } } .app-universe .app-history-content { color: #222; font-size: 1.2rem; line-height: 1.5; } @media (min-width: 50rem) { .app-universe .app-history-content { font-size: 1.4rem; } } .app-universe .app-history-content ul { list-style-position: inside; } .app-universe .phone-tablet-steps { width: 100%; margin-top: 0.5rem; margin-bottom: 3rem; } .app-universe .phone-tablet-steps .phone-tablet-steps__container { display: flex; flex-wrap: nowrap; position: relative; width: 100%; } .app-universe .phone-tablet-steps .phone-tablet-steps__wrapper { width: 100%; display: flex; } .app-universe .phone-tablet-steps .phone-tablet-steps__step { pointer-events: none; flex: 0 0 20rem; width: 20rem; margin: 0 1rem; border-radius: 1rem; box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5); background-repeat: no-repeat; background-color: white; background-position: center; background-size: cover; outline: none; } .app-universe .phone-tablet-steps .phone-tablet-steps__step.tablet { flex: 0 0 37rem; width: 37rem; height: 29rem; } .app-universe .phone-tablet-steps__container .slick-list { padding: 2rem 0; } .app-universe .phone-tablet-steps__container .slick-track { left: 2.5rem; } @media (min-width: 767px) { .app-universe .phone-tablet-steps__container .slick-track { left: 5rem; } } @media (min-width: 1024px) { .app-universe .phone-tablet-steps__container .slick-track { left: calc((100% - 95.8rem)/2); } } .app-installation-guide__version-selector { position: relative; z-index: 15; padding: 0 2.5rem; display: flex; flex-direction: column; align-items: center; } @media (min-width: 767px) { .app-installation-guide__version-selector { padding: 0 5rem; } } @media only screen and (min-width: 1024px) { .app-installation-guide__version-selector { flex-direction: row; justify-content: center; } } .app-installation-guide__version-selector .selector-wrapper { display: flex; flex-direction: column; user-select: none; width: 100%; margin-bottom: 1.5rem; } @media only screen and (min-width: 1024px) { .app-installation-guide__version-selector .selector-wrapper { flex-direction: row; width: auto; margin-left: 2rem; } .app-installation-guide__version-selector .selector-wrapper:first-child { margin-left: 0; } } .app-installation-guide__version-selector .selector-wrapper .selector-label { color: rgba(255, 255, 255, 0.8); font-weight: 600; line-height: 1.3; font-size: 1.3rem; margin: 0 0 0.5rem; } @media only screen and (min-width: 1024px) { .app-installation-guide__version-selector .selector-wrapper .selector-label { margin: 1rem 1rem 1rem 0; } } .app-installation-guide__version-selector .selector-wrapper .options-wrapper { display: inline-block; position: relative; box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5); } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-placeholder-wrapper { background-color: white; border-radius: 0.4rem; position: relative; overflow: hidden; padding: 0 3rem 0 1.5rem; cursor: pointer; height: 3.5rem; line-height: 3.5rem; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-placeholder-wrapper:hover { background-color: #eee; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-placeholder-wrapper .placeholder-text { color: black; font-weight: 600; line-height: 1; font-size: 1.4rem; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-placeholder-wrapper .placeholder-text:after { content: ""; border-width: 0.2rem 0.2rem 0 0; border-style: solid; border-color: black; display: inline-block; box-sizing: border-box; transform: translateY(-50%) rotate(135deg); transition: transform 150ms ease-out; position: absolute; width: 0.7rem; height: 0.7rem; right: 1.5rem; top: 1.6rem; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper { position: absolute; z-index: 10; background-color: white; border-radius: 0.4rem; left: 0; box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.5); width: 22.5rem; margin-top: 1rem; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper:before { content: ''; border-radius: 0.2rem; background-color: white; opacity: 0; position: absolute; top: 0; transform: translateY(30%) rotate(45deg); width: 1.2rem; height: 1.2rem; left: 1.3rem; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper { max-height: 0; opacity: 0; overflow: hidden; position: relative; cursor: pointer; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper .option-item-text { color: black; font-weight: 600; line-height: 1; display: block; border-top: 1px solid #ddd; font-size: 1.4rem; padding: 1.4rem 3.5rem 1.4rem 1.4rem; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper .option-item-icon { background-color: rgba(0, 0, 0, 0.05); border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); box-sizing: border-box; position: absolute; width: 1.8rem; height: 1.8rem; top: 1.3rem; right: 1.4rem; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper .option-item-icon:before { content: ''; background-color: red; opacity: 0; border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(0); } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper .option-item-icon:after { content: ''; width: 35%; padding-top: 20%; opacity: 0; border-width: 0 0 0.2rem 0.2rem; border-style: solid; border-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -65%) rotate(-45deg); } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper:first-child .option-item-text { border-top: none; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper.selected .option-item-icon { border: 1px solid red; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper.selected .option-item-icon:before { opacity: 1; transform: scale(1); } .app-installation-guide__version-selector .selector-wrapper .options-wrapper .options-list-wrapper .option-item-wrapper.selected .option-item-icon:after { opacity: 1; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper.active .options-placeholder-wrapper .placeholder-text:after { transform: translateY(0) rotate(-45deg); } .app-installation-guide__version-selector .selector-wrapper .options-wrapper.active .options-list-wrapper:before { transform: translateY(-30%) rotate(45deg); opacity: 1; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper.active .options-list-wrapper .option-item-wrapper { max-height: 4.2rem; opacity: 1; } .app-installation-guide__version-selector .selector-wrapper .options-wrapper.active .options-list-wrapper .option-item-wrapper:hover { background-color: #eee; } .avalon-area .one-col { overflow: inherit; } .avalon-area .one-col .avalon-winning-numbers { text-align: center; } body.mode-edit .avalon-winning-numbers { min-height: 5rem; } .eurojackpot-winning-numbers-spot .eurojackpot-section { position: relative; background-color: #0a0a0a; border-color: #0a0a0a; } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper { max-width: 75%; margin: 0 auto; } } .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section { background-color: #171717; } .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo { padding-bottom: 5vw; fill: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo { padding-bottom: 2.5rem; } } .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo svg { width: 30vw; height: 9vw; display: block; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo svg { width: 11rem; height: 3.5rem; } } .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo svg.joker-hat { width: 17.2vw; height: 8.67vw; padding: 0 0 2.67vw; flex: 100%; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo svg.joker-hat { width: 6.5rem; height: 3.2rem; padding: 0 0 1rem; } } .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo svg.joker-logo { width: 29.6vw; height: 6.8vw; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo svg.joker-logo { width: 11.2rem; height: 2.6rem; } } .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo .joker-text { font-size: 8vw; font-style: italic; color: #fff; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .eurojackpot-section .eurojackpot-content-wrapper.joker-section .logo .joker-text { font-size: 2.9rem; margin-top: -0.2rem; } } .eurojackpot-winning-numbers-spot .select-date-section { padding: 0 7vw; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .select-date-section { padding: 0; } } .eurojackpot-winning-numbers-spot .select-date-section .cs-placeholder { color: #0a0a0a; background-color: #f2f2f2; text-transform: initial; transition: background-color 0.15s; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot { margin: 0 auto; font-size: 4rem; } } .eurojackpot-winning-numbers-spot .bottom-gradient { width: 100%; height: 30vw; position: absolute; bottom: 0; display: block; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 50%, #000000 60%, #000 100%); transition: opacity 0.5s; text-align: center; z-index: 1; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .bottom-gradient { display: none; } } .eurojackpot-winning-numbers-spot .bottom-gradient .see-winning-number-btn { top: 5vw; padding-right: 10vw; z-index: 10; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .bottom-gradient .see-winning-number-btn { padding-right: 4vw; } } .eurojackpot-winning-numbers-spot .select-dropdown span { font-size: 3.4vw; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .select-dropdown span { font-size: 1.8rem; } } .eurojackpot-winning-numbers-spot .headline { margin: 0 auto; max-width: 78vw; font-size: 10.7vw; font-weight: bold; text-transform: initial; color: #fff; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .headline { font-size: 5rem; line-height: 4rem; margin: 0 auto 2rem; } } .eurojackpot-winning-numbers-spot .subheadline { max-width: 86.5vw; font-size: 3.7vw; color: #ffffff; box-sizing: border-box; padding: 0 5rem; margin: 0 auto 4.7vw; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .subheadline { font-size: 2rem; line-height: 4.2rem; padding: 0; margin: 0 auto 2rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-list { max-width: 86.7vw; margin: auto; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-list { max-width: 96rem; } .eurojackpot-winning-numbers-spot .winning-numbers-list:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } } .eurojackpot-winning-numbers-spot .disclaimer-info-text { max-width: 86.7vw; font-size: 4.3vw; font-weight: 900; color: #8e8e8e; padding-top: 6vw; margin: 0 auto; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .disclaimer-info-text { max-width: 96rem; font-size: 2rem; padding: 2rem 0 0 0; margin: 0 auto; } } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element { box-sizing: border-box; } } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers { margin-bottom: 4rem; border-bottom: 0.1rem solid #616161; } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container { width: 100%; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container { max-width: 44.5rem; display: inline-block; margin-right: 3rem; vertical-align: top; } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container:nth-child(2) { margin-right: 0; margin-left: 3rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container .numbers-headline { max-width: 86.7vw; color: #fff; margin: 5.5vw auto 0; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container .numbers-headline { font-size: 3rem; line-height: 3.6rem; text-transform: none; margin: 3rem auto 1.5rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container ul, .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li { margin: 0; padding: 0; } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container ul { border-top: 0.1rem solid #616161; list-style-type: none; padding: 2.5rem 0 1.7rem; } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li { display: inline-block; margin: 0 2.7vw; width: 10.5vw; height: 10.5vw; border-radius: 100%; font-size: 3.5vw; color: #fff; line-height: 3.2; text-align: center; position: relative; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li { width: 5.5rem; height: 5.5rem; font-size: 1.8rem; margin: 0 1.2rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li .number-icon { fill: #fff; position: absolute; width: 11.2vw; height: 11.2vw; transform: translate(-50%, -50%); top: 50%; left: 50%; } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li .number-icon.star { width: 12.4vw; height: 12.4vw; } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li .number-icon.joker { width: 60%; height: 60%; transform: translate(-50%, -50%); top: 50%; left: 50%; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li .number-icon { width: 5.4rem; height: 5.4rem; } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li .number-icon.star { width: 6rem; height: 6rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-element .numbers .number-container li span { position: absolute; z-index: 1; display: block; width: inherit; height: inherit; } .eurojackpot-winning-numbers-spot .winning-numbers-element .results table, .eurojackpot-winning-numbers-spot .winning-numbers-element .results th, .eurojackpot-winning-numbers-spot .winning-numbers-element .results td { border: 0.1rem solid #fff; } .eurojackpot-winning-numbers-spot .winning-numbers-element .results table { table-layout: fixed; border-bottom: 0; border-left: 0; border-collapse: inherit; border-radius: 3px; width: 100%; overflow: hidden; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .results table { width: 45rem; margin: auto; padding-bottom: 0; } } .eurojackpot-winning-numbers-spot .winning-numbers-element .results table td, .eurojackpot-winning-numbers-spot .winning-numbers-element .results table th { border-top: 0; border-right: 0; padding: 3.5vw; font-size: 3.2vw; color: #000; } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .results table td, .eurojackpot-winning-numbers-spot .winning-numbers-element .results table th { font-size: 1.8rem; } } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .results table td, .eurojackpot-winning-numbers-spot .winning-numbers-element .results table th { padding: 1.4rem; font-size: 1.5rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-element .results table th { font-weight: 400; } .eurojackpot-winning-numbers-spot .winning-numbers-element .results table tr td { border-left: 1px solid #000; } .eurojackpot-winning-numbers-spot .winning-numbers-element .results table tr:nth-child(odd) { background-color: #fff; } .eurojackpot-winning-numbers-spot .winning-numbers-element .results table tr:nth-child(even) { background-color: #f2f2f2; } .eurojackpot-winning-numbers-spot .winning-numbers-element .results table thead th { font-weight: bold; font-size: 3.7vw; color: #fff; background-color: #1f1f1f; padding: 4vw; } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .results table thead th { padding: 3rem 2rem; font-size: 2rem; } } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element .results table thead th { padding: 1.9rem; font-size: 1.6rem; } } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element.eurojackpot-winning-numbers .logo { margin-top: 6rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-element.joker-winning-numbers .numbers .number-container { margin-right: 0; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element.joker-winning-numbers .numbers .number-container { max-width: 55.3rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-element.joker-winning-numbers .numbers .number-container ul { border-top: none; } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .winning-numbers-element.joker-winning-numbers .numbers .number-container ul { padding-top: 1rem; } } .eurojackpot-winning-numbers-spot .winning-numbers-element.joker-winning-numbers .numbers .number-container ul li { background-color: #c50005; background-image: linear-gradient(45deg, #009a60 25%, transparent 25%, transparent 75%, #009a60 75%, #009a60), linear-gradient(45deg, #009a60 25%, transparent 25%, transparent 75%, #009a60 75%, #009a60); background-size: 30% 30%; background-position: 0 20%, 20% 0; } .eurojackpot-winning-numbers-spot .winning-numbers-element.joker-winning-numbers .numbers .number-container ul li span { color: #0a0a0a; } .eurojackpot-winning-numbers-spot .eurojackpot-content-wrapper { padding: 5vh 0; box-sizing: border-box; min-height: 50vh; } .eurojackpot-winning-numbers-spot .eurojackpot-content-wrapper .hidden { display: none !important; } .eurojackpot-winning-numbers-spot .select-date-section { margin: 2rem auto 1rem; } .eurojackpot-winning-numbers-spot .featured-winners { font-size: 3.2vw; border: 0.1rem solid #fff; border-radius: 3px; color: #fff; margin: 1rem auto; } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-winning-numbers-spot .featured-winners { font-size: 1.8rem; } } @media (min-width: 950px) { .eurojackpot-winning-numbers-spot .featured-winners { width: 45rem; font-size: 1.5rem; } } .eurojackpot-winning-numbers-spot .featured-winners .header { text-align: left; font-weight: 600; padding: 2vw 2rem; color: #fff; border-bottom: 1px solid #8e8e8e; position: relative; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .featured-winners .header { padding: 1.9rem; } } .eurojackpot-winning-numbers-spot .featured-winners .header .icon-arrow { position: absolute; width: 3.2vw; height: 3.2vw; right: 2rem; top: 2.5vw; fill: #fff; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .featured-winners .header .icon-arrow { top: 2.2rem; width: 2rem; height: 2rem; } } .eurojackpot-winning-numbers-spot .featured-winners .text { text-align: left; padding: 2vw 2rem; line-height: 5vw; font-style: italic; } @media (min-width: 768px) { .eurojackpot-winning-numbers-spot .featured-winners .text { line-height: 3rem; padding: 1rem 2rem; } } .eurojackpot-winning-numbers-spot .featured-winners .text p { margin: 0; } .eurojackpot-winning-numbers-spot .featured-winners.hide .header { border-bottom: none; } .eurojackpot-winning-numbers-spot .featured-winners.hide .header .icon-arrow { transform: rotate(180deg); } .eurojackpot-winning-numbers-spot .featured-winners.hide .header:after { display: none; } .eurojackpot-winning-numbers-spot .featured-winners.hide .text { display: none; } .select-dropdown { display: inline-block; vertical-align: middle; position: relative; text-align: left; z-index: 10; width: 100%; -webkit-touch-callout: none; user-select: none; font-size: 1.5em; font-weight: 400; color: #fff; } @media (min-width: 950px) { .select-dropdown { max-width: 50rem; } } .select-dropdown:after { content: ''; height: 1rem; position: absolute; left: 0; right: 0; bottom: 50%; z-index: -1; transition: bottom 0.05s 0.2s, background-color 0.05s; } .select-dropdown select { display: none; } .select-dropdown .cs-placeholder { background-color: #fff; border-radius: 6px; transition: background-color 0.15s; border: 1px solid #616161; } .select-dropdown .cs-placeholder .select-dropdown-arrow { width: 4vw; height: 2.5vw; fill: #0a0a0a; position: absolute; top: 6.8vw; right: 4vw; transition: transform 0.15s linear; } @media (min-width: 950px) { .select-dropdown .cs-placeholder .select-dropdown-arrow { width: 1.3rem; height: 0.8rem; top: 2.5rem; right: 2.4rem; } } .select-dropdown span { display: block; position: relative; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 5.4vw 0; font-size: 1.8rem; font-weight: 400; line-height: 16vw; background-color: #1f1f1f; } .select-dropdown span:hover { background-color: #4f5254; } @media (min-width: 768px) and (max-width: 950px) { .select-dropdown span { padding: 1.5rem 2.5rem; line-height: 5rem; } } @media (min-width: 950px) { .select-dropdown span { padding: 0.6rem 2.5rem 0.2rem; line-height: 5rem; } } .select-dropdown .select-options { max-height: 0; background-color: #fff; pointer-events: none; position: absolute; overflow: hidden; width: 100%; border-radius: 0 0 6px 6px; transition: max-height 0.25s; box-sizing: border-box; } .select-dropdown .select-options ul { list-style: none; margin: 0; padding: 0; width: 100%; } .select-dropdown .select-options ul li { border-bottom: 0.1rem solid #616161; } .select-dropdown .select-options ul li:hover { background-color: #f2f2f2; } .select-dropdown.reversed:after { top: 50%; transition: top 0.05s 0.2s; } .select-dropdown.reversed .select-options { top: auto; bottom: 14.5vw; border-radius: 6px 6px 0 0; } @media (min-width: 950px) { .select-dropdown.reversed .select-options { bottom: 6rem; } } .select-dropdown.reversed .select-options ul { transform: rotateX(-180deg); will-change: transform; } .select-dropdown.reversed .select-options ul li { transform: scaleY(-1); will-change: transform; } .select-dropdown.is-active:after { bottom: -0.4rem; transition: bottom 0s 0s, background-color 0s 0s; } .select-dropdown.is-active .cs-placeholder { background-color: #f2f2f2; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select-dropdown.is-active .select-options { top: 16vw; pointer-events: auto; border: 0.1rem solid #616161; } @media (min-width: 768px) and (max-width: 950px) { .select-dropdown.is-active .select-options { top: 8rem; } } @media (min-width: 950px) { .select-dropdown.is-active .select-options { top: 5.9rem; } } .select-dropdown.is-active .select-options.overflowed { overflow-y: auto; } .select-dropdown.is-active.reversed:after { bottom: inherit; top: -0.4rem; transition: top 0s 0s; } .select-dropdown.is-active.reversed .cs-placeholder { border-radius: 0 0 6px 6px; border-top: 0; } .select-dropdown.is-active.reversed .cs-placeholder .select-dropdown-arrow { transform: rotate(180deg); } .select-dropdown.is-active.reversed .select-options { top: auto; } .eurojackpot-classic-game-overlay, .eurojackpot-lightning-game-overlay, .eurojackpot-system-game-overlay, .eurojackpot-lucky-game-overlay, .eurojackpot-coupon-overlay { width: 100vw; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100; -webkit-animation: eurojackpot-overlay-background-animation 0.3s forwards linear; -moz-animation: eurojackpot-overlay-background-animation 0.3s forwards linear; -ms-animation: eurojackpot-overlay-background-animation 0.3s forwards linear; animation: eurojackpot-overlay-background-animation 0.3s forwards linear; } @-webkit-keyframes eurojackpot-overlay-background-animation { 0% { background-color: rgba(0, 0, 0, 0); } 100% { background-color: rgba(0, 0, 0, 0.3); } } @-moz-keyframes eurojackpot-overlay-background-animation { 0% { background-color: rgba(0, 0, 0, 0); } 100% { background-color: rgba(0, 0, 0, 0.3); } } @-ms-keyframes eurojackpot-overlay-background-animation { 0% { background-color: rgba(0, 0, 0, 0); } 100% { background-color: rgba(0, 0, 0, 0.3); } } @keyframes eurojackpot-overlay-background-animation { 0% { background-color: rgba(0, 0, 0, 0); } 100% { background-color: rgba(0, 0, 0, 0.3); } } @-webkit-keyframes eurojackpot-overlay-panel-animation { 0% { -webkit-transform: translateY(-50%) scale(0.85); -moz-transform: translateY(-50%) scale(0.85); -ms-transform: translateY(-50%) scale(0.85); -o-transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85); -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } 100% { -webkit-transform: translateY(-52%) scale(1); -moz-transform: translateY(-52%) scale(1); -ms-transform: translateY(-52%) scale(1); -o-transform: translateY(-52%) scale(1); transform: translateY(-52%) scale(1); -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } } @-moz-keyframes eurojackpot-overlay-panel-animation { 0% { -webkit-transform: translateY(-50%) scale(0.85); -moz-transform: translateY(-50%) scale(0.85); -ms-transform: translateY(-50%) scale(0.85); -o-transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85); -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } 100% { -webkit-transform: translateY(-52%) scale(1); -moz-transform: translateY(-52%) scale(1); -ms-transform: translateY(-52%) scale(1); -o-transform: translateY(-52%) scale(1); transform: translateY(-52%) scale(1); -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } } @-ms-keyframes eurojackpot-overlay-panel-animation { 0% { -webkit-transform: translateY(-50%) scale(0.85); -moz-transform: translateY(-50%) scale(0.85); -ms-transform: translateY(-50%) scale(0.85); -o-transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85); -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } 100% { -webkit-transform: translateY(-52%) scale(1); -moz-transform: translateY(-52%) scale(1); -ms-transform: translateY(-52%) scale(1); -o-transform: translateY(-52%) scale(1); transform: translateY(-52%) scale(1); -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } } @keyframes eurojackpot-overlay-panel-animation { 0% { -webkit-transform: translateY(-50%) scale(0.85); -moz-transform: translateY(-50%) scale(0.85); -ms-transform: translateY(-50%) scale(0.85); -o-transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85); -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } 100% { -webkit-transform: translateY(-52%) scale(1); -moz-transform: translateY(-52%) scale(1); -ms-transform: translateY(-52%) scale(1); -o-transform: translateY(-52%) scale(1); transform: translateY(-52%) scale(1); -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } } @-webkit-keyframes eurojackpot-overlay-panel-remove-animation { 0% { -webkit-transform: translateY(-52%) scale(1); -moz-transform: translateY(-52%) scale(1); -ms-transform: translateY(-52%) scale(1); -o-transform: translateY(-52%) scale(1); transform: translateY(-52%) scale(1); -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } 100% { -webkit-transform: translateY(-50%) scale(0.85); -moz-transform: translateY(-50%) scale(0.85); -ms-transform: translateY(-50%) scale(0.85); -o-transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85); -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } } @-moz-keyframes eurojackpot-overlay-panel-remove-animation { 0% { -webkit-transform: translateY(-52%) scale(1); -moz-transform: translateY(-52%) scale(1); -ms-transform: translateY(-52%) scale(1); -o-transform: translateY(-52%) scale(1); transform: translateY(-52%) scale(1); -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } 100% { -webkit-transform: translateY(-50%) scale(0.85); -moz-transform: translateY(-50%) scale(0.85); -ms-transform: translateY(-50%) scale(0.85); -o-transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85); -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } } @-ms-keyframes eurojackpot-overlay-panel-remove-animation { 0% { -webkit-transform: translateY(-52%) scale(1); -moz-transform: translateY(-52%) scale(1); -ms-transform: translateY(-52%) scale(1); -o-transform: translateY(-52%) scale(1); transform: translateY(-52%) scale(1); -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } 100% { -webkit-transform: translateY(-50%) scale(0.85); -moz-transform: translateY(-50%) scale(0.85); -ms-transform: translateY(-50%) scale(0.85); -o-transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85); -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } } @keyframes eurojackpot-overlay-panel-remove-animation { 0% { -webkit-transform: translateY(-52%) scale(1); -moz-transform: translateY(-52%) scale(1); -ms-transform: translateY(-52%) scale(1); -o-transform: translateY(-52%) scale(1); transform: translateY(-52%) scale(1); -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } 100% { -webkit-transform: translateY(-50%) scale(0.85); -moz-transform: translateY(-50%) scale(0.85); -ms-transform: translateY(-50%) scale(0.85); -o-transform: translateY(-50%) scale(0.85); transform: translateY(-50%) scale(0.85); -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } } .eurojackpot-classic-game-overlay .pannel, .eurojackpot-lightning-game-overlay .pannel, .eurojackpot-system-game-overlay .pannel, .eurojackpot-lucky-game-overlay .pannel, .eurojackpot-coupon-overlay .pannel { width: 80%; background-color: #fff; margin: auto; text-align: center; position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-52%); -moz-transform: translateY(-52%); -ms-transform: translateY(-52%); -o-transform: translateY(-52%); transform: translateY(-52%); padding: 5.3333vw; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-animation: eurojackpot-overlay-panel-animation 0.3s forwards linear; -moz-animation: eurojackpot-overlay-panel-animation 0.3s forwards linear; -ms-animation: eurojackpot-overlay-panel-animation 0.3s forwards linear; animation: eurojackpot-overlay-panel-animation 0.3s forwards linear; } @media (min-width: 950px) { .eurojackpot-classic-game-overlay .pannel, .eurojackpot-lightning-game-overlay .pannel, .eurojackpot-system-game-overlay .pannel, .eurojackpot-lucky-game-overlay .pannel, .eurojackpot-coupon-overlay .pannel { width: 30rem; padding: 2rem; } } .eurojackpot-classic-game-overlay .icon-wrapper, .eurojackpot-lightning-game-overlay .icon-wrapper, .eurojackpot-system-game-overlay .icon-wrapper, .eurojackpot-lucky-game-overlay .icon-wrapper, .eurojackpot-coupon-overlay .icon-wrapper { width: 17.334vw; height: 17.334vw; background-color: #E8A332; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .eurojackpot-classic-game-overlay .icon-wrapper > .icon, .eurojackpot-lightning-game-overlay .icon-wrapper > .icon, .eurojackpot-system-game-overlay .icon-wrapper > .icon, .eurojackpot-lucky-game-overlay .icon-wrapper > .icon, .eurojackpot-coupon-overlay .icon-wrapper > .icon { width: 9.4vw; height: 9.4vw; fill: #fff; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media (min-width: 950px) { .eurojackpot-classic-game-overlay .icon-wrapper > .icon, .eurojackpot-lightning-game-overlay .icon-wrapper > .icon, .eurojackpot-system-game-overlay .icon-wrapper > .icon, .eurojackpot-lucky-game-overlay .icon-wrapper > .icon, .eurojackpot-coupon-overlay .icon-wrapper > .icon { width: 3.4rem; height: 3.4rem; } } @media (min-width: 950px) { .eurojackpot-classic-game-overlay .icon-wrapper, .eurojackpot-lightning-game-overlay .icon-wrapper, .eurojackpot-system-game-overlay .icon-wrapper, .eurojackpot-lucky-game-overlay .icon-wrapper, .eurojackpot-coupon-overlay .icon-wrapper { width: 6.5rem; height: 6.5rem; } } .eurojackpot-classic-game-overlay .headline, .eurojackpot-lightning-game-overlay .headline, .eurojackpot-system-game-overlay .headline, .eurojackpot-lucky-game-overlay .headline, .eurojackpot-coupon-overlay .headline { font-size: 6.666vw; font-weight: normal; margin: 3.5vw 0 0; } @media (min-width: 950px) { .eurojackpot-classic-game-overlay .headline, .eurojackpot-lightning-game-overlay .headline, .eurojackpot-system-game-overlay .headline, .eurojackpot-lucky-game-overlay .headline, .eurojackpot-coupon-overlay .headline { font-size: 2.5rem; margin: 1rem 1.5rem 0.3rem; } } .eurojackpot-classic-game-overlay .text, .eurojackpot-lightning-game-overlay .text, .eurojackpot-system-game-overlay .text, .eurojackpot-lucky-game-overlay .text, .eurojackpot-coupon-overlay .text { font-size: 3vw; margin: 3vw 0 0; } @media (min-width: 950px) { .eurojackpot-classic-game-overlay .text, .eurojackpot-lightning-game-overlay .text, .eurojackpot-system-game-overlay .text, .eurojackpot-lucky-game-overlay .text, .eurojackpot-coupon-overlay .text { font-size: 1.5rem; margin: 0.3rem 1.5rem 1.5rem; } } .eurojackpot-classic-game-overlay .buttons, .eurojackpot-lightning-game-overlay .buttons, .eurojackpot-system-game-overlay .buttons, .eurojackpot-lucky-game-overlay .buttons, .eurojackpot-coupon-overlay .buttons { margin: 4.5vw 0 0; } .eurojackpot-classic-game-overlay .buttons:after, .eurojackpot-lightning-game-overlay .buttons:after, .eurojackpot-system-game-overlay .buttons:after, .eurojackpot-lucky-game-overlay .buttons:after, .eurojackpot-coupon-overlay .buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .eurojackpot-classic-game-overlay .buttons > .btn:first-child, .eurojackpot-lightning-game-overlay .buttons > .btn:first-child, .eurojackpot-system-game-overlay .buttons > .btn:first-child, .eurojackpot-lucky-game-overlay .buttons > .btn:first-child, .eurojackpot-coupon-overlay .buttons > .btn:first-child { float: left; } .eurojackpot-classic-game-overlay .buttons .btn, .eurojackpot-lightning-game-overlay .buttons .btn, .eurojackpot-system-game-overlay .buttons .btn, .eurojackpot-lucky-game-overlay .buttons .btn, .eurojackpot-coupon-overlay .buttons .btn { font-weight: normal; color: #000; } .eurojackpot-classic-game-overlay .buttons > .btn:last-child, .eurojackpot-lightning-game-overlay .buttons > .btn:last-child, .eurojackpot-system-game-overlay .buttons > .btn:last-child, .eurojackpot-lucky-game-overlay .buttons > .btn:last-child, .eurojackpot-coupon-overlay .buttons > .btn:last-child { float: right; } @media (min-width: 950px) { .eurojackpot-classic-game-overlay .buttons, .eurojackpot-lightning-game-overlay .buttons, .eurojackpot-system-game-overlay .buttons, .eurojackpot-lucky-game-overlay .buttons, .eurojackpot-coupon-overlay .buttons { margin: 1.5rem 0 0; } .eurojackpot-classic-game-overlay .buttons .btn, .eurojackpot-lightning-game-overlay .buttons .btn, .eurojackpot-system-game-overlay .buttons .btn, .eurojackpot-lucky-game-overlay .buttons .btn, .eurojackpot-coupon-overlay .buttons .btn { width: 12.4rem; } .eurojackpot-classic-game-overlay .buttons > .btn:first-child, .eurojackpot-lightning-game-overlay .buttons > .btn:first-child, .eurojackpot-system-game-overlay .buttons > .btn:first-child, .eurojackpot-lucky-game-overlay .buttons > .btn:first-child, .eurojackpot-coupon-overlay .buttons > .btn:first-child { float: none; margin-right: 0.5rem; } .eurojackpot-classic-game-overlay .buttons > .btn:last-child, .eurojackpot-lightning-game-overlay .buttons > .btn:last-child, .eurojackpot-system-game-overlay .buttons > .btn:last-child, .eurojackpot-lucky-game-overlay .buttons > .btn:last-child, .eurojackpot-coupon-overlay .buttons > .btn:last-child { float: none; margin-left: 0.5rem; } } .eurojackpot-classic-game-overlay.remove-overlay, .eurojackpot-lightning-game-overlay.remove-overlay, .eurojackpot-system-game-overlay.remove-overlay, .eurojackpot-lucky-game-overlay.remove-overlay, .eurojackpot-coupon-overlay.remove-overlay { -webkit-animation: eurojackpot-overlay-background-animation 0.15s reverse linear; -moz-animation: eurojackpot-overlay-background-animation 0.15s reverse linear; -ms-animation: eurojackpot-overlay-background-animation 0.15s reverse linear; animation: eurojackpot-overlay-background-animation 0.15s reverse linear; } .eurojackpot-classic-game-overlay.remove-overlay .pannel, .eurojackpot-lightning-game-overlay.remove-overlay .pannel, .eurojackpot-system-game-overlay.remove-overlay .pannel, .eurojackpot-lucky-game-overlay.remove-overlay .pannel, .eurojackpot-coupon-overlay.remove-overlay .pannel { -webkit-animation: eurojackpot-overlay-panel-remove-animation 0.15s forwards linear; -moz-animation: eurojackpot-overlay-panel-remove-animation 0.15s forwards linear; -ms-animation: eurojackpot-overlay-panel-remove-animation 0.15s forwards linear; animation: eurojackpot-overlay-panel-remove-animation 0.15s forwards linear; } .eurojackpot-coupon-overlay .pannel { padding: 0; overflow: hidden; } @media (min-width: 950px) { .eurojackpot-coupon-overlay .pannel { width: 35rem; } } @keyframes lotto-coupon-iframe-wrapper-height-animation-desktop { 100% { height: 40rem; opacity: 1; } } @keyframes lotto-coupon-iframe-wrapper-height-animation-mobile { 100% { height: 60vh; opacity: 1; } } .ios-device .eurojackpot-coupon-overlay .pannel .coupon-iframe-wrapper { height: 0; opacity: 0; -webkit-overflow-scrolling: touch; overflow-y: scroll; animation: lotto-coupon-iframe-wrapper-height-animation-mobile 0.3s 0.3s linear forwards; } @media (min-width: 950px) { .ios-device .eurojackpot-coupon-overlay .pannel .coupon-iframe-wrapper { animation: lotto-coupon-iframe-wrapper-height-animation-desktop 0.3s 0.3s linear forwards; } } .eurojackpot-coupon-overlay .pannel .coupon-iframe-wrapper .coupon-iframe { background-color: #000; width: 100%; height: 0; opacity: 0; -webkit-overflow-scrolling: touch; overflow-y: scroll; animation: lotto-coupon-iframe-wrapper-height-animation-mobile 0.3s 0.3s linear forwards; } @media (min-width: 950px) { .eurojackpot-coupon-overlay .pannel .coupon-iframe-wrapper .coupon-iframe { animation: lotto-coupon-iframe-wrapper-height-animation-desktop 0.3s 0.3s linear forwards; } } .ios-device .eurojackpot-coupon-overlay .pannel .coupon-iframe-wrapper .coupon-iframe { height: 100%; opacity: 1; overflow: visible; animation: none; } @media (min-width: 950px) { .ios-device .eurojackpot-coupon-overlay .pannel .coupon-iframe-wrapper .coupon-iframe { animation: none; } } .eurojackpot-coupon-overlay .pannel .buttons { margin: 3vw 4vw 4vw; } @media (min-width: 950px) { .eurojackpot-coupon-overlay .pannel .buttons { margin: 1.5rem 2rem 2rem; } } .eurojackpot-coupon-overlay .pannel .buttons .btn { width: 34vw; transition: background-color 0.15s linear; } @media (min-width: 950px) { .eurojackpot-coupon-overlay .pannel .buttons .btn:hover { background-color: #f5d900; } } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-coupon-overlay .pannel .buttons .btn { width: 34vw; } } @media (min-width: 950px) { .eurojackpot-coupon-overlay .pannel .buttons .btn { width: 15rem; } } @-webkit-keyframes eurojackpot-overlay-active-animation { 0% { -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); } 100% { -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); } } @-moz-keyframes eurojackpot-overlay-active-animation { 0% { -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); } 100% { -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); } } @-ms-keyframes eurojackpot-overlay-active-animation { 0% { -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); } 100% { -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); } } @keyframes eurojackpot-overlay-active-animation { 0% { -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: blur(0); } 100% { -webkit-filter: blur(0.3rem); -moz-filter: blur(0.3rem); -ms-filter: blur(0.3rem); filter: blur(0.3rem); } } .overlay-active { -webkit-animation: eurojackpot-overlay-active-animation 0.3s forwards linear; -moz-animation: eurojackpot-overlay-active-animation 0.3s forwards linear; -ms-animation: eurojackpot-overlay-active-animation 0.3s forwards linear; animation: eurojackpot-overlay-active-animation 0.3s forwards linear; } .remove-overlay { pointer-events: none; -webkit-animation: eurojackpot-overlay-active-animation 0.15s reverse linear; -moz-animation: eurojackpot-overlay-active-animation 0.15s reverse linear; -ms-animation: eurojackpot-overlay-active-animation 0.15s reverse linear; animation: eurojackpot-overlay-active-animation 0.15s reverse linear; } /* =========================================== utility.loading-spinner ========================================= */ .loading-spinner { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48L3N2Zz4=); } @keyframes loading-spinner-animation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .numbers-rotary-selector { font-size: 1vw; margin: auto; overflow: hidden; user-select: none; } .region-avalon-lotto .numbers-rotary-selector, .region-lotto .numbers-rotary-selector, .lotto .numbers-rotary-selector { font-size: 0.9vw; } @media screen and (min-width: 768px) { .region-avalon-lotto .numbers-rotary-selector, .region-lotto .numbers-rotary-selector, .lotto .numbers-rotary-selector { font-size: 5.5px; } } @media screen and (min-width: 768px) { .numbers-rotary-selector { font-size: 5.5px; } } .numbers-rotary-selector .selector-container { height: 41em; max-width: 140em; position: relative; padding: 6em 0; perspective: 150em; margin: auto; box-sizing: content-box; } .region-avalon-lotto .numbers-rotary-selector .selector-container, .region-lotto .numbers-rotary-selector .selector-container, .lotto .numbers-rotary-selector .selector-container { height: 32em; padding: 5.4em 0; font-family: "Lotto", "Open Sans", Helvetica, Arial, sans-serif; } @media screen and (min-width: 768px) { .region-avalon-lotto .numbers-rotary-selector .selector-container, .region-lotto .numbers-rotary-selector .selector-container, .lotto .numbers-rotary-selector .selector-container { padding: 6em 0; height: 48em; } } .numbers-rotary-selector .selector-numbers { width: 100vw; height: 0; padding-bottom: 150vw; position: absolute; transform-origin: center center; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.34, 1.61, 0.7, 1); transform: rotateX(-25deg) rotateZ(0deg) translateZ(-45em); top: 83vw; } .region-avalon-lotto .numbers-rotary-selector .selector-numbers, .region-lotto .numbers-rotary-selector .selector-numbers, .lotto .numbers-rotary-selector .selector-numbers { left: -1.4vw; } @media screen and (min-width: 768px) { .region-avalon-lotto .numbers-rotary-selector .selector-numbers, .region-lotto .numbers-rotary-selector .selector-numbers, .lotto .numbers-rotary-selector .selector-numbers { left: auto; } } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers { width: 140em; padding-bottom: 140em; top: 75em; } } .numbers-rotary-selector .selector-numbers .number-wrapper { width: 36.366em; height: 100%; position: absolute; left: 50%; top: -50%; margin-left: -18.183em; text-align: center; transform-origin: center bottom; transform-style: preserve-3d; pointer-events: none; /* Define two variables as the loop limits */ /* Create a Parametric mixin and add a guard operation */ /* the mixin is called, css outputted and iterations called */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ /* As the mixin is called CSS is outputted */ /* Interation call and operation */ } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(0n + 0) { transform: rotate(-8deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(1n + 0) { transform: rotate(0deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(2n + 0) { transform: rotate(8deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(3n + 0) { transform: rotate(16deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(4n + 0) { transform: rotate(24deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(5n + 0) { transform: rotate(32deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(6n + 0) { transform: rotate(40deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(7n + 0) { transform: rotate(48deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(8n + 0) { transform: rotate(56deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(9n + 0) { transform: rotate(64deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(10n + 0) { transform: rotate(72deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(11n + 0) { transform: rotate(80deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(12n + 0) { transform: rotate(88deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(13n + 0) { transform: rotate(96deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(14n + 0) { transform: rotate(104deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(15n + 0) { transform: rotate(112deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(16n + 0) { transform: rotate(120deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(17n + 0) { transform: rotate(128deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(18n + 0) { transform: rotate(136deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(19n + 0) { transform: rotate(144deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper:nth-child(20n + 0) { transform: rotate(152deg) translateZ(0); } .numbers-rotary-selector .selector-numbers .number-wrapper .number { font-size: 22em; font-weight: 800; position: relative; top: 0em; transform: scale(0.6) translateZ(0) rotateX(0deg) translateY(0em); opacity: 0; transition: transform 0.3s, opacity 0.25s; line-height: 1.4; /* Fix for Signa font */ pointer-events: none; } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view .number { cursor: pointer; transform: scale(0.7) translateY(0em) translateZ(0) rotateX(0deg); opacity: 0.85; z-index: 1; pointer-events: auto; } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus1'] .number { transform: scale(0.6) translateY(-10%) translateX(45%) rotate(-3deg); opacity: 0.5; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus1'] .number { transform: scale(0.7) translateY(5%) translateX(75%) rotate(-4deg); } } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus1'] .number:hover { transform: scale(0.75) translateY(5%) translateX(70%) rotate(-4deg); } } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus1'] .number { transform: scale(0.7) translateY(-10%) translateX(-45%) rotate(3deg); opacity: 0.5; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus1'] .number { transform: scale(0.7) translateY(5%) translateX(-75%) rotate(4deg); } } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus1'] .number:hover { transform: scale(0.75) translateY(5%) translateX(-70%) rotate(4deg); } } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus2'] .number { transform: scale(0.45) translateY(-30%) translateX(60%) rotate(-4deg); opacity: 0.3; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus2'] .number { transform: scale(0.55) translateY(-20%) translateX(120%) rotate(-8deg); } } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus2'] .number:hover { transform: scale(0.6) translateY(-20%) translateX(110%) rotate(-8deg); } } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus2'] .number { transform: scale(0.45) translateY(-30%) translateX(-60%) rotate(4deg); opacity: 0.3; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus2'] .number { transform: scale(0.55) translateY(-20%) translateX(-120%) rotate(8deg); } } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus2'] .number:hover { transform: scale(0.6) translateY(-20%) translateX(-110%) rotate(8deg); } } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus3'] .number { transform: scale(0.45) translateY(-65%) translateX(150%) rotate(-10deg); opacity: 0.1; } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus3'] .number:hover { transform: scale(0.5) translateY(-60%) translateX(135%) rotate(-10deg); } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus3'] .number { transform: scale(0.45) translateY(-65%) translateX(-150%) rotate(10deg); opacity: 0.1; } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus3'] .number:hover { transform: scale(0.5) translateY(-60%) translateX(-135%) rotate(10deg); } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus4'] .number { transform: scale(0.35) translateY(-135%) translateX(160%) rotate(-12deg); opacity: 0.05; } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='plus4'] .number:hover { transform: scale(0.4) translateY(-130%) translateX(145%) rotate(-12deg); } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus4'] .number { transform: scale(0.35) translateY(-135%) translateX(-160%) rotate(12deg); opacity: 0.05; } .numbers-rotary-selector .selector-numbers .number-wrapper.in-view[data-id='minus4'] .number:hover { transform: scale(0.4) translateY(-130%) translateX(-145%) rotate(12deg); } .numbers-rotary-selector .selector-numbers .number-wrapper.in-focus .number { transform: scale(0.75); opacity: 0.95; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-numbers .number-wrapper.in-focus .number { transform: scale(0.9); } } .numbers-rotary-selector .selector-foreground, .numbers-rotary-selector .selector-background { width: 36.366em; height: 36.366em; position: absolute; left: 0; right: 0; margin: auto; border-radius: 7.4em; } .region-avalon-lotto .numbers-rotary-selector .selector-foreground, .region-avalon-lotto .numbers-rotary-selector .selector-background, .region-lotto .numbers-rotary-selector .selector-foreground, .region-lotto .numbers-rotary-selector .selector-background, .lotto .numbers-rotary-selector .selector-foreground, .lotto .numbers-rotary-selector .selector-background { border-radius: 50%; } .numbers-rotary-selector .selector-foreground .navigation-button { width: 3em; height: 6em; position: absolute; top: 50%; transform: translateY(-50%); cursor: default; transition: transform 0.15s linear, opacity 0.1s linear; opacity: 0; display: none; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selector-foreground .navigation-button { display: block; } } .numbers-rotary-selector .selector-foreground .navigation-button .icon { width: 100%; height: 100%; } .numbers-rotary-selector .selector-foreground .navigation-button.active { opacity: 1; cursor: pointer; } .numbers-rotary-selector .selector-foreground .navigation-button.next { right: -6.5em; } .numbers-rotary-selector .selector-foreground .navigation-button.next:hover { transform: translateY(-50%) translateX(20%); } .numbers-rotary-selector .selector-foreground .navigation-button.previous { left: -6.5em; } .numbers-rotary-selector .selector-foreground .navigation-button.previous:hover { transform: translateY(-50%) translateX(-20%); } .numbers-rotary-selector .selector-foreground .label { font-size: 3.6em; font-weight: 800; color: white; text-align: center; margin: auto; position: absolute; top: 7.8em; left: 0; right: 0; } .region-avalon-lotto .numbers-rotary-selector .selector-foreground .label, .region-lotto .numbers-rotary-selector .selector-foreground .label, .lotto .numbers-rotary-selector .selector-foreground .label { font-size: 2.8em; line-height: 4.25em; font-weight: 400; top: 7.8em; } @media screen and (min-width: 768px) { .region-avalon-lotto .numbers-rotary-selector .selector-foreground .label, .region-lotto .numbers-rotary-selector .selector-foreground .label, .lotto .numbers-rotary-selector .selector-foreground .label { font-size: 3em; top: 7.6em; } } .numbers-rotary-selector .selector-foreground .multi-client__client-game-description { font-size: inherit; position: absolute; left: -50vw; right: -50vw; bottom: 0; padding-top: 1.8em; line-height: 1.2; gap: 1em; margin: auto; transform: translateY(100%); } .numbers-rotary-selector .selector-foreground .multi-client__client-game-description .client-game-description__inner { font-size: 1.1em; } .numbers-rotary-selector .selector-background { background-color: #000000; } .numbers-rotary-selector .selected-number-wrapper { width: 36.366em; height: 36.366em; position: absolute; left: 0; right: 0; margin: auto; pointer-events: none; overflow: hidden; } .numbers-rotary-selector .selected-number-wrapper .selector-numbers { left: -34.3vw; top: 75vw; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selected-number-wrapper .selector-numbers { left: -52em; top: 69em; } } .region-avalon-lotto .numbers-rotary-selector .selected-number-wrapper .selector-numbers, .region-lotto .numbers-rotary-selector .selected-number-wrapper .selector-numbers, .lotto .numbers-rotary-selector .selected-number-wrapper .selector-numbers { left: -33.75vw; top: 75vw; border-radius: 50%; } @media screen and (min-width: 768px) { .region-avalon-lotto .numbers-rotary-selector .selected-number-wrapper .selector-numbers, .region-lotto .numbers-rotary-selector .selected-number-wrapper .selector-numbers, .lotto .numbers-rotary-selector .selected-number-wrapper .selector-numbers { left: -52em; top: 70em; } } .numbers-rotary-selector .selected-number-wrapper .number-wrapper .number { color: white; } .numbers-rotary-selector .selected-number-wrapper .number-wrapper.in-view[data-id='plus1'] .number { transform: scale(0.9) translateY(-2%) translateX(43%) rotate(-4deg); opacity: 0.9; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selected-number-wrapper .number-wrapper.in-view[data-id='plus1'] .number { transform: scale(1) translateY(3%) translateX(60%) rotate(-4deg); } } .numbers-rotary-selector .selected-number-wrapper .number-wrapper.in-view[data-id='minus1'] .number { transform: scale(0.9) translateY(-2%) translateX(-43%) rotate(4deg); opacity: 0.9; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selected-number-wrapper .number-wrapper.in-view[data-id='minus1'] .number { transform: scale(1) translateY(3%) translateX(-60%) rotate(4deg); } } .numbers-rotary-selector .selected-number-wrapper .number-wrapper.in-focus .number { transform: scale(0.85); opacity: 1; } @media screen and (min-width: 768px) { .numbers-rotary-selector .selected-number-wrapper .number-wrapper.in-focus .number { transform: scale(1); } } .numbers-rotary-selector.eurojackpot .selector-numbers .number { color: #E8A332; } .numbers-rotary-selector.eurojackpot .selector-foreground { box-shadow: inset 0px 0px 5em rgba(232, 163, 50, 0.9); } .numbers-rotary-selector.eurojackpot .selector-foreground .navigation-button .icon { color: #E8A332; } .numbers-rotary-selector.eurojackpot .selector-foreground .multi-client__client-game-description { right: 0; left: 0; bottom: 0; position: absolute; transform: translateY(100%); margin-bottom: 0; padding-top: 1rem; } .numbers-rotary-selector.eurojackpot .selector-foreground .multi-client__client-game-description .client-game-description__question-button { width: 4rem; height: 4rem; } .numbers-rotary-selector.eurojackpot .selector-background { background-color: #E8A332; } .numbers-rotary-selector.eurojackpot .selected-number-wrapper .number { color: white; } .numbers-rotary-selector.vikinglotto .selector-numbers .number { color: #0000ff; } .numbers-rotary-selector.vikinglotto .selector-foreground { box-shadow: inset 0px 0px 5em rgba(0, 0, 255, 0.9); } .numbers-rotary-selector.vikinglotto .selector-foreground .navigation-button .icon { color: #0000ff; } .numbers-rotary-selector.vikinglotto .selector-background { background-color: #0000ff; } .numbers-rotary-selector.vikinglotto .selected-number-wrapper .number { color: white; } .numbers-rotary-selector.lotto .selector-numbers .number { color: #E11E00; } .numbers-rotary-selector.lotto .selector-foreground { box-shadow: inset 0px 0px 5em rgba(225, 30, 0, 0.9); } .numbers-rotary-selector.lotto .selector-foreground .navigation-button .icon { color: #E11E00; } .numbers-rotary-selector.lotto .selector-background { background-color: #E11E00; } .numbers-rotary-selector.lotto .selected-number-wrapper .number { color: white; } .numbers-rotary-selector.allornothing .selector-numbers .number { color: #191339; } .numbers-rotary-selector.allornothing .selector-foreground { box-shadow: inset 0px 0px 5em rgba(25, 19, 57, 0.9); } .numbers-rotary-selector.allornothing .selector-foreground .navigation-button .icon { color: #191339; } .numbers-rotary-selector.allornothing .selector-background { background-color: #191339; } .numbers-rotary-selector.allornothing .selected-number-wrapper .number { color: white; } .numbers-rotary-selector.keno .selector-numbers .number { color: #00a5eb; } .numbers-rotary-selector.keno .selector-foreground { box-shadow: inset 0px 0px 5em rgba(0, 165, 235, 0.9); } .numbers-rotary-selector.keno .selector-foreground .navigation-button .icon { color: #00a5eb; } .numbers-rotary-selector.keno .selector-background { background-color: #00a5eb; } .numbers-rotary-selector.keno .selected-number-wrapper .number { color: white; } .multi-client-wrapper__campaign-Sommerlotto .numbers-rotary-selector .selector-numbers .number { color: #191339; } .multi-client-wrapper__campaign-Sommerlotto .numbers-rotary-selector .selector-foreground { box-shadow: inset 0px 0px 5em rgba(25, 19, 57, 0.9); } .multi-client-wrapper__campaign-Sommerlotto .numbers-rotary-selector .selector-foreground .navigation-button .icon { color: #191339; } .multi-client-wrapper__campaign-Sommerlotto .numbers-rotary-selector .selector-background { background-color: #191339; } .multi-client-wrapper__campaign-Sommerlotto .numbers-rotary-selector .selected-number-wrapper .number { color: white; } .numbers-rotary-selector.keno .selector-numbers .number { color: #00a5eb; } .numbers-rotary-selector.keno .selector-foreground { box-shadow: inset 0px 0px 5em rgba(0, 165, 235, 0.9); } .numbers-rotary-selector.keno .selector-foreground .navigation-button .icon { color: #00a5eb; } .numbers-rotary-selector.keno .selector-background { background-color: #00a5eb; } .numbers-rotary-selector.keno .selected-number-wrapper .number { color: white; } .eurojackpot-section .purchase-bar-wrapper { width: 100%; height: 16.3vw; position: relative; z-index: 11; will-change: scroll-position, transform; transform: translate3d(0, 0, 0); } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper { height: 7rem; } } @media screen and (max-width: 768px) and (orientation: landscape) { .eurojackpot-section .purchase-bar-wrapper { width: 100% !important; transition: width 0.1s; } } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-section .purchase-bar-wrapper { height: 9vw; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar { width: 100%; height: 16.5vw; position: relative; font-size: 3.2vw; font-weight: bold; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar { font-size: 1.4rem; height: 7rem; } } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar { height: 9vw; font-size: 2.6vw; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar:before, .eurojackpot-section .purchase-bar-wrapper .purchase-bar:after { content: ""; width: calc((100% - 96rem) / 2); position: absolute; top: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.95); } .eurojackpot-section .purchase-bar-wrapper .purchase-bar:before { left: 0; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar:after { right: 0; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content { position: relative; text-align: left; background-color: inherit; width: 100%; max-width: 96rem; height: inherit; margin: auto; display: table; table-layout: fixed; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content { height: 100%; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content a { line-height: inherit; display: block; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper { position: relative; padding: 0 5vw; line-height: 16.3vw; -webkit-transition: background-color 300ms linear; -moz-transition: background-color 300ms linear; -ms-transition: background-color 300ms linear; -o-transition: background-color 300ms linear; transition: background-color 300ms linear; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper { padding: 0 3rem; line-height: 7rem; } } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper { height: 9vw; line-height: 9vw; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper:hover { background-color: #ffffff; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper .arrow-up-icon { width: 3.467vw; height: 2.135vw; position: absolute; right: 5vw; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper .arrow-up-icon.hide { opacity: 0; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper .arrow-up-icon svg { width: 3.467vw; height: 2.135vw; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper .arrow-up-icon { width: 1.2rem; height: 0.7rem; top: 0; right: 2rem; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper .arrow-up-icon svg { width: 1.2rem; height: 0.7rem; } } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content .dropdown-wrapper { line-height: 7rem; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div { width: 50%; height: inherit; display: table-cell; cursor: pointer; vertical-align: middle; position: relative; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.95); -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div { width: auto; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.number-of-draws { border-left: 0.1rem solid #cdd3d7; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div span { display: none; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div span { display: inline; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .select-stake, .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .select-draws { position: absolute; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-back { text-align: center; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta { width: 50%; text-align: center; border-left: none; background-color: #feb700; -webkit-transition: background-color 300ms linear; -moz-transition: background-color 300ms linear; -ms-transition: background-color 300ms linear; -o-transition: background-color 300ms linear; transition: background-color 300ms linear; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta { width: auto; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta .purchase { text-decoration: none; color: #000; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta:hover { background-color: #f5d900; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta .total-price { transition: transform 0.25s, opacity 0.25s; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta.is-inactive { cursor: default; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta.is-inactive:hover { background-color: #feb700; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta.is-inactive .total-price { -webkit-opacity: 0.3; -moz-opacity: 0.3; opacity: 0.3; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta .purchase .purchase-button-loader-box { width: 100%; position: absolute; transform: translateY(-200%) scale(0.8); opacity: 0; transition: transform 0.25s, opacity 0.15s; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta .purchase .purchase-button-loader-box .loader-text { display: inline-block; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta .purchase .purchase-button-loader-box .loader-animation-box { margin-left: 0.5rem; display: inline-block; } @keyframes eurojackpot-loader-dot-animation { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-100%); } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta .purchase .purchase-button-loader-box .loader-animation-box .loader-dot { width: 1.2vw; height: 1.2vw; margin-left: 0.3rem; border-radius: 50%; background-color: #000; display: inline-block; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta .purchase .purchase-button-loader-box .loader-animation-box .loader-dot { width: 0.8rem; height: 0.8rem; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta.processing .purchase .purchase-button-loader-box { transform: translateY(0) scale(1); opacity: 1; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta.processing .purchase .purchase-button-loader-box .loader-animation-box .loader-dot:nth-child(1n) { animation: eurojackpot-loader-dot-animation 0.5s ease-in-out -0.66s infinite; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta.processing .purchase .purchase-button-loader-box .loader-animation-box .loader-dot:nth-child(2n) { animation: eurojackpot-loader-dot-animation 0.5s ease-in-out -0.33s infinite; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta.processing .purchase .purchase-button-loader-box .loader-animation-box .loader-dot:nth-child(3n) { animation: eurojackpot-loader-dot-animation 0.5s ease-in-out -1s infinite; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.purchase-bar-cta.processing .purchase .total-price { transform: translateY(100%) scale(0.8); opacity: 0.6; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div.auto { width: auto; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper { width: 100%; position: absolute; bottom: 16.3vw; left: 0; max-height: 0; transition: max-height 0.3s cubic-bezier(0.34, 1.61, 0.7, 1); overflow-y: auto; overflow-x: hidden; box-shadow: 0 -0.5rem 1rem 0 rgba(0, 0, 0, 0.1); border-radius: 0.5rem 0.5rem 0 0; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper { bottom: 7rem; } } @media (min-width: 768px) and (max-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper { bottom: 9vw; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown { margin: 0; padding: 0; list-style-type: none; width: 100%; background-color: rgba(255, 255, 255, 0.95); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; overflow: hidden; position: relative; } @media (min-width: 950px) { } @media (min-width: 950px) { } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li { line-height: 4.1vw; padding: 4vw 5vw; border-bottom: 0.1rem solid #cdd3d7; -webkit-transition: background-color 300ms linear; -moz-transition: background-color 300ms linear; -ms-transition: background-color 300ms linear; -o-transition: background-color 300ms linear; transition: background-color 300ms linear; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li { line-height: normal; padding: 2.5rem 3rem; } } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li:hover { background-color: #ffffff; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li.not-clickable { color: #E11E00; cursor: default; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li.not-clickable:hover { background-color: transparent; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li.is-inactive { color: grey; cursor: default; text-decoration: line-through; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li.is-inactive:hover { background-color: transparent; } .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li span { display: none; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper .purchase-bar .purchase-bar-content > div .dropdown-list-wrapper ul.dropdown > li span { display: inline; } } .eurojackpot-section .purchase-bar-wrapper.fixed .purchase-bar { position: fixed; bottom: 0; } @media (min-width: 950px) { .eurojackpot-section .purchase-bar-wrapper.fixed { bottom: 3rem; } } .eurojackpot-lightning { position: relative; text-align: center; } .eurojackpot-lightning .eurojackpot-section { background-color: #1f1f1f; padding-top: 3vw; } .eurojackpot-lightning .eurojackpot-section .eurojackpot-content-wrapper .game-not-available-wrapper { padding: 14vw 0; } @media (min-width: 950px) { .eurojackpot-lightning .eurojackpot-section .eurojackpot-content-wrapper .game-not-available-wrapper { padding: 0 0 5rem; } } .eurojackpot-lightning .eurojackpot-section .eurojackpot-content-wrapper .game-not-available-wrapper img { width: 17.33vw; height: 17.33vw; margin-bottom: 2vw; margin-top: -8vw; } @media (min-width: 950px) { .eurojackpot-lightning .eurojackpot-section .eurojackpot-content-wrapper .game-not-available-wrapper img { width: 6.4rem; height: 6.4rem; margin-bottom: 1rem; margin-top: 0; } } .eurojackpot-lightning .headline { font-size: 10.666vw; font-weight: bold; color: #fff; margin: 0; } @media (min-width: 768px) { .eurojackpot-lightning .headline { font-size: 4rem; } } .eurojackpot-lightning .subheadline { font-size: 3.733vw; color: #fff; padding-top: 1vw; margin: 0; } @media (min-width: 768px) { .eurojackpot-lightning .subheadline { font-size: 2rem; } } .eurojackpot-lightning .subheadline.not-available { padding-bottom: 9vw; } @media (min-width: 950px) { .eurojackpot-lightning .subheadline.not-available { padding-bottom: 5rem; } } .eurojackpot-lightning .tagline { font-size: 3.733vw; color: #fff; padding-top: 3vw; margin: 0; font-weight: normal; margin-bottom: 9vw; } @media (min-width: 950px) { .eurojackpot-lightning .tagline { font-size: 2rem; } } .eurojackpot-lightning .eurojackpot-slider-selector { width: 100%; text-align: center; margin: 6.5vw auto 4vw; position: relative; } @media (min-width: 950px) { .eurojackpot-lightning .eurojackpot-slider-selector { width: 58rem; margin: 5rem auto 5rem; } } .eurojackpot-lightning .eurojackpot-slider-selector .number { text-transform: uppercase; } /* =========================================== utility.loading-spinner ========================================= */ .loading-spinner { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark { position: relative; width: 4rem; height: 4rem; background: transparent; } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { animation: loading-spinner-animation 750ms infinite linear; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9IndoaXRlIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0id2hpdGUiLz48L3N2Zz4=); } .loading-spinner--dark:after { content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjQuMzc1IiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSIyNy44MTQ5IiBjeT0iNi40ODM4OSIgcj0iMy4xMjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMzMuNTI4NiIgY3k9IjEyLjIxODIiIHI9IjMuMTI1IiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjM1LjYyNSIgY3k9IjIwIiByPSIzLjEyNSIgZmlsbD0iYmxhY2siLz48L3N2Zz4=); } @keyframes loading-spinner-animation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .joker-overlay { padding: 1rem 1.5rem; overflow: auto; box-sizing: border-box; } @media screen and (min-width: 768px) { .joker-overlay { display: flex; align-items: center; justify-content: center; } } @keyframes joker-overlay-fade-out { from { opacity: 1; } to { opacity: 0; } } .joker-overlay.remove-overlay { animation: joker-overlay-fade-out 150ms linear; } .joker-overlay.remove-overlay .joker-overlay__content { animation: joker-overlay-fade-out 150ms linear; } .joker-overlay--small { display: block; } @media screen and (min-width: 768px) { .joker-overlay--small { display: none; } } .joker-overlay--medium { display: none; flex: 1; flex-direction: row; align-items: center; } @media screen and (min-width: 768px) { .joker-overlay--medium { display: flex; } } .joker-overlay__content { border: 0.1rem solid #FEB700; box-sizing: border-box; max-width: 40rem; background: #000000; border-radius: 1rem; font-size: 1.4rem; text-align: center; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); padding: 1.5rem 2rem 0; width: 100%; display: flex; flex-direction: column; margin: 2rem auto auto; } @media screen and (min-width: 768px) { .joker-overlay__content { max-width: 70rem; margin: auto; padding: 3rem 5rem 0; } } .lotto-classic-game-overlay .joker-overlay__content, .lotto-lightning-game-overlay .joker-overlay__content, .lotto-system-game-overlay .joker-overlay__content, .lotto-lucky-game-overlay .joker-overlay__content { background: #E11E00; } .vikinglotto-classic-game-overlay .joker-overlay__content, .vikinglotto-lightning-game-overlay .joker-overlay__content, .vikinglotto-system-game-overlay .joker-overlay__content, .vikinglotto-lucky-game-overlay .joker-overlay__content { background: #0000ff; } .joker-overlay__title { order: 1; color: white; font-size: 2.6rem; line-height: 1.25; font-weight: 700; padding: 0 2rem; margin-bottom: 1.5rem; } @media screen and (min-width: 768px) { .joker-overlay__title { font-size: 3.6rem; margin-bottom: 2.5rem; } } .joker-overlay__title span { color: #FEB700; } .joker-overlay__box { order: 3; user-select: none; display: flex; flex-direction: column; border-radius: 0.8rem; background: white; padding: 1rem 2rem; margin-bottom: 1rem; border: 0.4rem solid transparent; color: #000000; } @media screen and (min-width: 768px) { .joker-overlay__box { justify-content: space-between; flex-direction: row; margin-bottom: 2rem; } } .joker-overlay__box.active { border-color: #FEB700; background: #fff8e4; } .joker-overlay__box--first { order: 2; } .joker-overlay__logo { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 1rem; } .joker-overlay__header-logo { margin-bottom: 2.6rem; } .joker-overlay__header-logo .joker-overlay__logo-hat { height: 5rem; margin-right: 0; } .joker-overlay--medium .joker-overlay__logo { margin-bottom: 0.2rem; } .joker-overlay__logo-hat { height: 2.5rem; margin-right: 1rem; } .joker-overlay--medium .joker-overlay__logo-hat { height: 3.2rem; } .joker-overlay__logo-prefix { font-size: 2.2rem; line-height: 1.2; font-weight: 800; padding-right: 1rem; } @media screen and (min-width: 768px) { .joker-overlay__logo-prefix { font-size: 3.2rem; } } .joker-overlay__double .joker-overlay__logo { margin-bottom: -0.2rem; } .joker-overlay__logo-with-prefix .joker-overlay__pool-label { text-align: left; } .joker-overlay__logo-text { height: 2.2rem; } .lotto-classic-game-overlay .joker-overlay__logo-text, .lotto-lightning-game-overlay .joker-overlay__logo-text, .lotto-system-game-overlay .joker-overlay__logo-text, .lotto-lucky-game-overlay .joker-overlay__logo-text { filter: invert(10%) sepia(85%) saturate(4939%) hue-rotate(351deg) brightness(101%) contrast(116%); } .vikinglotto-classic-game-overlay .joker-overlay__logo-text, .vikinglotto-lightning-game-overlay .joker-overlay__logo-text, .vikinglotto-system-game-overlay .joker-overlay__logo-text, .vikinglotto-lucky-game-overlay .joker-overlay__logo-text { filter: invert(9%) sepia(80%) saturate(7106%) hue-rotate(246deg) brightness(100%) contrast(147%); } .joker-overlay--medium .joker-overlay__logo-text { height: 3rem; } .joker-overlay__logo-text { height: 2rem; margin-bottom: -0.2rem; } .joker-overlay__draw-pool { display: flex; flex-direction: row; justify-content: space-evenly; margin-bottom: 1.5rem; } .joker-overlay__draw { font-size: 1.2rem; line-height: 1.3; display: flex; flex-direction: column; justify-content: space-between; } .joker-overlay--medium .joker-overlay__draw { flex-direction: row; justify-content: flex-start; font-size: 1.6rem; } .joker-overlay__draw-value { font-size: 1.4rem; font-weight: bold; } .joker-overlay--medium .joker-overlay__draw-value { font-size: 1.6rem; padding-left: 0.5ch; } .joker-overlay__pool { font-size: 1.2rem; line-height: 1.3; display: flex; flex: 1; flex-direction: column; justify-content: space-between; } .joker-overlay--medium .joker-overlay__pool { font-size: 1.6rem; flex: 1; } .joker-overlay__pool-value { font-size: 2.2rem; line-height: 1.2; font-weight: 800; margin-bottom: -0.2rem; } .joker-overlay--medium .joker-overlay__pool-value { font-size: 3.4rem; margin-bottom: 0; line-height: 1; } .joker-overlay__box-cta { user-select: none; cursor: pointer; box-sizing: border-box; background: #FEB700; text-decoration: none; display: flex; justify-content: center; align-items: center; min-height: 4rem; border-radius: 0.8rem; color: #000000; font-size: 1.6rem; padding: 0 1rem; font-weight: 700; text-transform: uppercase; border: 0.2rem solid transparent; } @media screen and (min-width: 768px) { .joker-overlay__box-cta { min-width: 16.5rem; min-height: 6rem; } } .joker-overlay__box-cta.active { background: white; border-color: #FEB700; } .joker-overlay__box-cta.unavailable { opacity: 0.5; cursor: not-allowed; } .joker-overlay__cta { order: 4; user-select: none; cursor: pointer; margin: 0.8rem 0; background: white; text-decoration: none; display: flex; justify-content: center; align-items: center; min-height: 5rem; border-radius: 0.8rem; color: #000000; font-size: 1.6rem; padding: 0 2rem; font-weight: 700; text-transform: uppercase; } @media screen and (min-width: 768px) { .joker-overlay__cta { min-height: 6rem; width: 34rem; margin: 2rem auto; } } .joker-overlay__cta.active { background: #FEB700; } .joker-overlay__read-more { order: 5; padding-bottom: 2rem; } .joker-overlay__read-more.active .joker-overlay__read-more-cta::after { transform: rotate(225deg); top: 1.6rem; } .joker-overlay__read-more.active .joker-overlay__read-more-text { transform: translateY(0); height: auto; } .joker-overlay__read-more-cta { user-select: none; color: white; font-size: 1.6rem; position: relative; display: inline-block; cursor: pointer; padding: 1rem 3.5rem 1rem 1rem; margin: 0 auto 0.5rem; } .joker-overlay__read-more-cta::after { content: ""; position: absolute; z-index: 1; transition: transform 100ms ease-out; border: 0.3rem solid white; border-top: none; border-left: none; transform: rotate(45deg); height: 0.9rem; width: 0.9rem; right: 1rem; top: 1rem; } .joker-overlay__read-more-text { height: 0; color: white; font-size: 1.6rem; line-height: 1.3; overflow: hidden; transform: translateY(-1rem); transition: transform 200ms cubic-bezier(0, 1.7, 0.3, 1); } .joker-overlay__read-more-text p { color: white; font-size: 1.6rem; line-height: 1.3; margin: 0 0 0.7rem; } .tutorial-container { --tutorial-primary: var(--primaryColor, #1750DC); --tutorial-secondary: var(--secondaryColor, #063D9B); --tutorial-cta: var(--ctaColor, #FEAF00); --tutorial-light-grey: #eceded; --tutorial-grey: #A0A0A0; --tutorial-tips-table-odd: var(--tipsTableEvenColor, #357856); --tutorial-tips-table-even: var(--tipsTableOddColor, #439665); } .tns-outer { padding: 0 !important; } .tns-outer [hidden] { display: none !important; } .tns-outer [aria-controls], .tns-outer [data-action] { cursor: pointer; } .tns-slider { transition: all 0s; } .tns-slider > .tns-item { box-sizing: border-box; } .tns-horizontal.tns-subpixel { white-space: nowrap; } .tns-horizontal.tns-subpixel > .tns-item { display: inline-block; vertical-align: top; white-space: normal; } .tns-horizontal.tns-no-subpixel:after { content: ''; display: table; clear: both; } .tns-horizontal.tns-no-subpixel > .tns-item { float: left; } .tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item { margin-right: -100%; } .tns-no-calc { position: relative; left: 0; } .tns-gallery { position: relative; left: 0; min-height: 1px; } .tns-gallery > .tns-item { position: absolute; left: -100%; transition: transform 0s, opacity 0s; } .tns-gallery > .tns-slide-active { position: relative; left: auto !important; } .tns-gallery > .tns-moving { transition: all 0.25s; } .tns-autowidth { display: inline-block; } .tns-lazy-img { transition: opacity 0.6s; opacity: 0.6; } .tns-lazy-img.tns-complete { opacity: 1; } .tns-ah { transition: height 0s; } .tns-ovh { overflow: hidden; } .tns-visually-hidden { position: absolute; left: -10000em; } .tns-transparent { opacity: 0; visibility: hidden; } .tns-fadeIn { opacity: 1; filter: alpha(opacity=100); z-index: 0; } .tns-normal, .tns-fadeOut { opacity: 0; filter: alpha(opacity=0); z-index: -1; } .tns-vpfix { white-space: nowrap; } .tns-vpfix > div, .tns-vpfix > li { display: inline-block; } .tns-t-subp2 { margin: 0 auto; width: 310px; position: relative; height: 10px; overflow: hidden; } .tns-t-ct { width: calc(100% * 70 / 3); position: absolute; right: 0; } .tns-t-ct:after { content: ''; display: table; clear: both; } .tns-t-ct > div { width: calc(100% / 70); height: 10px; float: left; } .slidepage, .tutorial__simple { background-color: var(--tutorial-primary); } .slidepage__content { overflow: hidden; } .slidepage__content--mobile .tns-ovh { overflow: visible !important; } .slidepage__content--desktop { display: none; } @media screen and (min-width: 950px) { .slidepage__content--mobile { display: none; } .slidepage__content--desktop { display: block; padding-top: 5rem; } } .slidepage__content .slidepage__slider { display: flex; flex-direction: column; } @media screen and (min-width: 950px) { .slidepage__content .slidepage__slider { flex-direction: row; position: relative; } .slidepage__content .slidepage__slider::before { content: ''; display: block; position: absolute; background: white; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; opacity: 0; transition-duration: 0.2s; } .slidepage__content .slidepage__slider--loading::before { opacity: 1; } } .slidepage__content .slidepage__slider .slidepage__steps { transition-duration: 0.3s; transform: translateX(3rem); display: flex; position: relative; } @media screen and (min-width: 480px) { .slidepage__content .slidepage__slider .slidepage__steps { margin-left: auto; margin-right: auto; } } @media screen and (min-width: 950px) { .slidepage__content .slidepage__slider .slidepage__steps { width: initial; transform: none; display: flex !important; justify-content: center; } } .slidepage__content .slidepage__slider .slidepage__steps--fade { opacity: 0.5; transform: scale(0.8); } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step { display: inline-block; background: white; box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.25); height: 37.2rem; transition-duration: 0.4s; margin: 4.5rem 0 2rem; transform-origin: 0 center; } @media screen and (min-width: 950px) { .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step { flex: 0 0 26.4rem; width: 21.9rem; height: 34.8rem; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step:first-child { margin-left: 2rem; } } @media screen and (min-width: 1216px) { .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step { height: 48rem; flex: 0 0 30rem; } } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step--selected { transform: rotate(0) !important; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description { margin-right: 2rem; transform-origin: right bottom; transition-delay: 0.15s; transform: rotate(-5deg); border-radius: 2rem; width: 30rem; } @media screen and (min-width: 950px) { .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description { height: 38.2rem; width: 26.4rem; transform: none; z-index: 1; position: relative; left: 1rem; } } @media screen and (min-width: 1024px) { .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description { width: 29rem; height: 47.6rem; margin-right: 0; left: 0; } } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-text-wrapper { width: 65%; margin: 2rem auto 0 auto; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-text-wrapper .slidepage__step-header { margin-top: 4rem; margin-bottom: 2rem; color: var(--tutorial-primary); font-size: 2rem; font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; text-align: center; line-height: 2rem; font-weight: 800; font-style: italic; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-text-wrapper .slidepage__step-text { font-size: 1.2rem; line-height: 2.2rem; } @media screen and (min-width: 950px) { .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-text-wrapper .slidepage__step-text { font-size: 1.4rem; } } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-help-wrapper { position: absolute; width: 75%; top: 85%; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-help-wrapper .slidepage__step-help-circle { border-radius: 50%; width: 1.5rem; height: 1.5rem; background-color: var(--tutorial-primary); display: flex; align-items: center; justify-content: center; position: absolute; right: 105%; bottom: 50%; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-help-wrapper .slidepage__step-help-circle::after { content: 'i'; color: white; font-size: 1rem; font-weight: bold; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-help-wrapper .slidepage__step-help-text { font-size: 1.2rem; font-weight: bold; color: var(--tutorial-primary); display: flex; flex-direction: column; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-description .slidepage__step-number { background-color: var(--tutorial-primary); padding: 0.7rem; width: 4rem; height: 4rem; font-weight: 700; font-size: 1.5rem; top: 3.5rem; left: -2rem; color: white; position: absolute; display: grid; justify-items: center; border-radius: 0.8rem; } .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-illustration { overflow: hidden; border-radius: 2rem; transform-origin: left bottom; transform: rotate(5deg); transition-delay: 0.1s; } @media screen and (min-width: 480px) { .slidepage__content .slidepage__slider .slidepage__steps .slidepage__step.slidepage__step-illustration { transform: none; } } @media screen and (min-width: 950px) { .slidepage__content .slidepage__slider .slidepage__steps iframe.slidepage__step.slidepage__step-illustration { transform: none; flex: 0 0 65.5rem; position: relative; left: -3rem; top: -3rem; padding: 0; } } @media screen and (min-width: 1024px) { .slidepage__content .slidepage__slider .slidepage__steps iframe.slidepage__step.slidepage__step-illustration { flex: 0 0 67rem; } } @media screen and (min-width: 1216px) { .slidepage__content .slidepage__slider .slidepage__steps iframe.slidepage__step.slidepage__step-illustration { left: -3.6rem; flex: 0 0 90rem; padding: 0; } } .slidepage__content .slidepage__slider .slidepage__radio-buttons { align-self: center; display: flex; } .slidepage__content .slidepage__slider .slidepage__radio-buttons .slidepage__radio { border-radius: 50%; border: #000000 solid 0.2rem; width: 1rem; height: 1rem; } .slidepage__content .slidepage__slider .slidepage__radio-buttons .slidepage__radio:first-child { margin-right: 1rem; } .slidepage__content .slidepage__slider .slidepage__radio-buttons .slidepage__radio.tns-nav-active { background-color: #000000; } .slidepage__content--desktop .slidepage__controls { display: flex; align-items: center; justify-content: flex-end; width: 100%; max-width: 132rem; margin: auto; position: relative; } @media screen and (min-width: 950px) { .slidepage__content--desktop .slidepage__controls { top: -7rem; right: 6rem; } } @media screen and (min-width: 1024px) { .slidepage__content--desktop .slidepage__controls { top: -4rem; right: 8.5rem; } } @media screen and (min-width: 1440px) { } .slidepage__content--desktop .slidepage__controls:focus { outline: none; } .slidepage__content--desktop .slidepage__controls .slidepage__arrow { width: 6.5rem; height: 4.5rem; background: var(--tutorial-primary); border-radius: 1rem; position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer; transition-duration: 0.2s; } .slidepage__content--desktop .slidepage__controls .slidepage__arrow--hide { opacity: 0; pointer-events: none; } .slidepage__content--desktop .slidepage__controls .slidepage__arrow:focus { outline: none; } .slidepage__content--desktop .slidepage__controls .slidepage__arrow::after { content: ''; position: absolute; width: 1.3rem; height: 1.3rem; border-bottom: white 0.3rem solid; border-left: white 0.3rem solid; } .slidepage__content--desktop .slidepage__controls .slidepage__arrow--next::after { transform: rotate(-135deg); } .slidepage__content--desktop .slidepage__controls .slidepage__arrow--prev { margin-right: 2rem; } .slidepage__content--desktop .slidepage__controls .slidepage__arrow--prev::after { transform: rotate(45deg); } .slidepage__content--desktop .slidepage__controls .slidepage__slide-counter { display: flex; align-items: center; margin-right: 0.8rem; font-weight: 800; font-size: 1.4rem; } .slidepage__content--desktop .slidepage__controls .slidepage__slide-counter .slidepage__current-slide { background: var(--tutorial-primary); color: white; border-radius: 0.8rem; font-size: 1.6rem; } .slidepage__content--desktop .slidepage__controls .slidepage__slide-counter > div { padding: 0.4rem 1.2rem; } .slidepage__content--desktop .slidepage__controls .slidepage__slide-counter > div:first-child { margin-right: 1rem; } .slidepage__content--desktop .slidepage__controls .slidepage__slide-counter .slidepage__separator { padding: 0.4rem 0; } .slidepage__action-button-wrapper { display: flex; align-items: center; justify-content: center; width: 25.5rem; height: 5rem; background-color: var(--tutorial-cta); box-shadow: 0.2rem 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.15); margin: 4rem auto; } @media screen and (min-width: 950px) { .slidepage__action-button-wrapper { margin: 4rem auto; } } .slidepage__action-button-wrapper .slidepage__action-button { font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; font-size: 2rem; color: #000000; } .slidepage__related-help { background-color: var(--tutorial-secondary); max-width: 144rem; margin: auto; padding-bottom: 1rem; } @media screen and (min-width: 950px) { .slidepage__related-help { padding-bottom: 4rem; } } .slidepage__related-help .slidepage__related-help-title { padding-top: 2.9rem; font-weight: 800; font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; font-size: 2.5rem; font-style: italic; text-align: center; line-height: 4rem; color: #ffffff; margin-bottom: 3.5rem; } @media screen and (min-width: 950px) { .slidepage__related-help .slidepage__related-help-title { font-size: 3rem; text-align: left; margin-left: 6rem; } } @media screen and (min-width: 1024px) { .slidepage__related-help .slidepage__related-help-title { margin: 0 auto; padding-top: 4rem; padding-bottom: 2rem; font-size: 3.6rem; width: fit-content; } } .slidepage__related-help .slidepage__related-help-wrapper { position: relative; background-color: var(--tutorial-secondary); } @media screen and (min-width: 1024px) { .slidepage__related-help .slidepage__related-help-wrapper { display: flex; align-items: center; justify-content: center; margin: 0 auto; max-width: 75%; } } .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block { border-radius: 2rem; background-color: white; padding: 1.5rem; margin: 0 2.3rem 1.7rem; display: grid; grid-template-columns: 5.5rem auto 2.5rem; align-items: center; } .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block:not(:last-child) { margin-right: 2rem; } @media screen and (min-width: 1024px) { .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block { margin: 0; width: 31rem; position: relative; } .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block:hover { background-color: var(--tutorial-light-grey); } } .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-image-wrapper { width: 3.5rem; height: 3.5rem; background-color: var(--tutorial-primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; } @media screen and (min-width: 950px) { .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-image-wrapper { width: 5.5rem; height: 5.5rem; } } @media screen and (min-width: 1024px) { .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-image-wrapper { width: 6.5rem; height: 6.5rem; } } .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-image-wrapper .slidepage__related-help-image { width: 45%; height: 45%; } .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-text-wrapper .slidepage__related-help-element-title { color: #000000; font-size: 1.4rem; font-weight: bold; margin-left: 1.9rem; line-height: 1.5rem; } @media screen and (min-width: 950px) { .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-text-wrapper .slidepage__related-help-element-title { font-size: 1.8rem; } } .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-text-wrapper .slidepage__related-help-element-text { color: #000000; font-size: 1.2rem; margin-left: 1.9rem; line-height: 1.5rem; } @media screen and (min-width: 950px) { .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-text-wrapper .slidepage__related-help-element-text { font-size: 1.6rem; } } .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-arrow { content: ""; width: 1.3rem; height: 1.3rem; border-bottom: 0.3rem solid #000000; border-right: 0.3rem solid #000000; transform: rotate(-45deg); position: absolute; right: 5rem; transition-duration: 0.2s; } @media screen and (min-width: 950px) { .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-arrow { width: 1.5rem; height: 1.5rem; right: 6rem; } } @media screen and (min-width: 1024px) { .slidepage__related-help .slidepage__related-help-wrapper .slidepage__related-help-wrapper-block .slidepage__related-help-arrow { position: absolute; right: 2.5rem; } } .tutorial__searchbar { background-color: #ffffff; height: 5rem; position: relative; margin: 4rem 1.5rem 2.7rem 1.5rem; display: flex; align-items: center; padding-left: 1.6rem; border-radius: 2rem; box-shadow: 0.2rem 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.15); } @media screen and (min-width: 768px) { .tutorial__searchbar { margin: 5.2rem auto; width: 55rem; } } @media screen and (min-width: 1024px) { .tutorial__searchbar { margin: 5.8rem auto; width: 63.2rem; } } .tutorial__searchbar .tutorial__searchbar-input { border: none; margin-left: 1.2rem; width: calc(100% - 7rem); } .tutorial__searchbar .tutorial__searchbar-input:focus { outline: none; } .tutorial__searchbar .tutorial__searchbar-input::placeholder { color: var(--tutorial-grey); font-style: italic; font-weight: normal; } @media screen and (min-width: 1024px) { .tutorial__searchbar .tutorial__searchbar-input::placeholder { font-size: 2rem; } } .tutorial__searchbar .tutorial__searchbar-loop { transform: rotate(270deg); height: 2.2rem; width: 2.2rem; stroke: #000000; stroke-width: 0.3rem; fill: none; } .tutorial__searchbar .tutorial__searchbar-clear { position: relative; cursor: pointer; width: 2rem; height: 2rem; } .tutorial__searchbar .tutorial__searchbar-clear::after, .tutorial__searchbar .tutorial__searchbar-clear::before { content: ''; width: 2rem; height: 0.2rem; background-color: #000000; display: block; transform-origin: center; top: 50%; position: absolute; } .tutorial__searchbar .tutorial__searchbar-clear::after { transform: rotate(45deg); } .tutorial__searchbar .tutorial__searchbar-clear::before { transform: rotate(-45deg); } .tutorial-tips { --transition-duration: 0.1s; background-color: var(--tutorial-primary); } .tutorial-tips__content { display: flex; flex-direction: column; align-items: center; } .tutorial-tips__content-inner { margin-top: 4rem; width: 28rem; } .tutorial-tips__header { font-weight: 800; font-style: italic; font-size: 2rem; text-align: center; margin-bottom: 2rem; position: relative; } .tutorial-tips__header .tutorial-tips__popup-trigger { position: absolute; display: flex; justify-content: center; align-items: center; right: 0; top: 0; border-radius: 50%; color: white; background: var(--tutorial-secondary); width: 1.6rem; height: 1.6rem; font-size: 1.2rem; cursor: pointer; } .tutorial-tips__button-wrapper { display: flex; justify-content: center; margin-bottom: 2rem; } .tutorial-tips__button-wrapper .tutorial-tips__button { display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; width: 13.4rem; height: 4.6rem; background: var(--tutorial-light-grey); filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.25)); font-weight: 800; font-style: italic; cursor: pointer; transition-duration: var(--transition-duration); } .tutorial-tips__button-wrapper .tutorial-tips__button--selected { background: var(--tutorial-secondary); color: white; } .tutorial-tips__button-wrapper .tutorial-tips__button:first-child { margin-right: 2rem; } .tutorial-tips__read-more { text-align: center; margin-bottom: 3.5rem; } .tutorial-tips__dropdown { width: 28rem; min-height: 4.5rem; background: var(--tutorial-light-grey); filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.25)); display: flex; justify-content: center; align-items: center; flex-direction: column; font-weight: 800; font-style: italic; cursor: pointer; position: relative; margin-bottom: 3.7rem; border-radius: 0.5rem; transition-duration: var(--transition-duration); } .tutorial-tips__dropdown::after { content: ''; display: block; position: absolute; width: 1.5rem; height: 1.5rem; border-bottom: #000000 solid 0.4rem; border-left: #000000 solid 0.4rem; right: 2rem; top: 1rem; transform: rotate(-45deg); transform-origin: 25% 75%; transition-duration: var(--transition-duration); } .tutorial-tips__dropdown .tutorial-tips__dropdown-content { display: none; width: 100%; background: white; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .tutorial-tips__dropdown--open { background: var(--tutorial-secondary); color: white; } .tutorial-tips__dropdown--open::after { transform: rotate(135deg); border-color: white; } .tutorial-tips__dropdown--open .tutorial-tips__dropdown-content { display: block; } .tutorial-tips__dropdown--selected { background: var(--tutorial-secondary); color: white; } .tutorial-tips__dropdown--selected::after { border-color: white; } .tutorial-tips__label { height: 4.5rem; display: grid; align-content: center; } .tutorial-tips__combination-key { color: #000000; height: 4.5rem; display: grid; align-content: center; text-align: center; border-top: #A8A8A8 solid 0.1rem; } .tutorial-tips__combination-key--selected { background: var(--tutorial-primary); color: white; } .tutorial-tips__table-wrapper { max-width: 100rem; width: 100%; margin: 0 auto; } .tutorial-tips__table-selectors { border-radius: 2rem 2rem 0 0; height: 5.7rem; background: var(--tutorial-primary); display: flex; align-items: center; padding: 0 2rem; justify-content: space-between; color: white; font-weight: 800; font-style: italic; } @media screen and (min-width: 768px) { .tutorial-tips__table-selectors { padding: 0 10rem; } } .tutorial-tips__table-selectors .tutorial-tips__table-selector { cursor: pointer; position: relative; } .tutorial-tips__table-selectors .tutorial-tips__table-selector::after { content: ""; display: none; position: absolute; width: 100%; height: 0.2rem; background: white; bottom: 0.2rem; left: 0; border-radius: 1rem; } .tutorial-tips__table-selectors .tutorial-tips__table-selector--active::after { display: block; } .tutorial-tips__table table { color: white; text-align: center; width: 100%; } .tutorial-tips__table table tr { height: 4rem; } .tutorial-tips__table table tr:nth-child(odd) { background: var(--tutorial-tips-table-odd); } .tutorial-tips__table table tr:nth-child(even) { background: var(--tutorial-tips-table-even); } .tutorial-tips__table--guarantee table tr > th:last-child, .tutorial-tips__table--guarantee table tr > td:last-child { float: right; margin-top: 0.7rem; margin-right: 1rem; } @media screen and (min-width: 768px) { .tutorial-tips__table--guarantee table tr > th:last-child, .tutorial-tips__table--guarantee table tr > td:last-child { margin-right: 9rem; } } .tutorial-tips__table .tutorial-tips__table-title { padding: 2rem 0; font-weight: 800; font-style: italic; } .tutorial-tips__table--description { color: white; background: var(--tutorial-tips-table-odd); padding: 0 5rem 2rem 5rem; } .tutorial-overlay { display: flex; flex-direction: column; align-items: center; } .tutorial-overlay__title { font-size: 3.5rem; margin-bottom: 4rem; font-style: italic; font-weight: 800; text-transform: uppercase; } .tutorial-overlay__text { text-align: center; font-size: 1.4rem; margin-bottom: 4.5rem; } .tutorial-overlay__image { max-width: 30rem; } .tutorial-navbar { width: 100%; height: 4.5rem; overflow: hidden; position: relative; display: flex; flex-direction: row; color: white; margin-bottom: 2rem; } @media screen and (min-width: 768px) { .tutorial-navbar { margin-left: 5.9rem; margin-right: 5.9rem; } } @media screen and (min-width: 1024px) { .tutorial-navbar { display: none; } } .tutorial-navbar .tutorial-navbar-container { overflow-x: auto; overflow-y: hidden; height: 4.5rem; padding-bottom: 12rem; } .tutorial-navbar .tutorial-navbar-label { position: relative; z-index: 2; font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; height: 4.5rem; flex: 0 0 12rem; white-space: nowrap; display: flex; align-items: center; text-transform: uppercase; padding-left: 2rem; font-size: 1.5rem; } .tutorial-navbar .tutorial-navbar-cave { pointer-events: none; position: absolute; z-index: 1; top: -0.5rem; left: -0.5rem; width: 14rem; height: 5.5rem; filter: none; transition: filter 200ms ease-out; } .tutorial-navbar .tutorial-navbar-cave--open { filter: drop-shadow(0.3rem 0.3rem 0.4rem rgba(0, 0, 50, 0.25)); } .tutorial-navbar .tutorial-navbar-cave-inner { width: 14rem; height: 7rem; clip-path: polygon(100% 0%, 96% 30%, 95% 55%, 100% 100%, 0% 100%, 0% 0%, 25% 0%); background: var(--tutorial-primary); } .tutorial-navbar .tutorial-navbar-navs { white-space: nowrap; display: flex; flex-direction: row; padding-right: 5rem; font-size: 1.4rem; } .tutorial-navbar .tutorial-navbar-nav { position: relative; z-index: 0; height: 4.5rem; margin-left: 1rem; user-select: none; padding: 1rem; display: flex; align-items: center; font-size: 1.4rem; color: white; } .tutorial-navbar .tutorial-navbar-nav--hide { display: none; } .tutorial-navbar .tutorial-navbar-nav:last-child { padding-right: 3rem; } .tutorial-navbar .tutorial-navbar-nav::after { position: absolute; content: ""; top: 1.2rem; left: -0.5rem; bottom: 1rem; width: 0.1rem; background: rgba(255, 255, 255, 0.2); } .tutorial-navbar .tutorial-navbar-nav:first-child::after { width: 0; } .tutorial__avalon { background: var(--tutorial-primary); } .tutorial-frontpage { padding-top: 2rem; background-color: var(--tutorial-primary); } .tutorial-frontpage__hero { background-color: var(--tutorial-primary); } .tutorial-frontpage__hero .tutorial-frontpage__hero-title { font-size: 6rem; color: white; margin: 0 auto; padding: 5rem 0 2rem 0; width: 70rem; max-width: 70%; display: flex; justify-content: center; line-height: 0.8; font-family: "Oddset", sans-serif; font-style: italic; font-weight: 800; letter-spacing: -0.01em; transform: rotate(-10deg); text-transform: uppercase; text-shadow: 0.2rem 0.5rem 1.6rem rgba(0, 0, 0, 0.15); padding-bottom: 2rem; } @media screen and (min-width: 768px) { .tutorial-frontpage__hero .tutorial-frontpage__hero-title { font-size: 9rem; max-width: unset; padding-bottom: 8rem; } } @media screen and (min-width: 1024px) { .tutorial-frontpage__hero .tutorial-frontpage__hero-title { padding-top: 3.3rem; } } .tutorial__frontpage-wrapper { position: relative; min-height: 46rem; } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper { padding: 3.5rem 1.5rem; display: flex; max-width: 144rem; margin: 0 auto; transition: 0.3s ease-out; overflow: hidden; left: 0; right: 0; } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper--hide { transform: translateY(50rem); position: absolute; padding: 0; } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories { flex: 1; } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories { flex: 60%; } } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category { display: block; color: black; box-shadow: 0.2rem 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.15); margin-bottom: 1.6rem; position: relative; transition: 0.1s ease-out; overflow: hidden; cursor: pointer; border-radius: 2rem; } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-tutorials { transition-duration: 0.3s; max-height: 0; } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category { margin-left: 5.9rem; margin-right: 5.9rem; margin-bottom: 2.3rem; } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category:hover:not(.tutorial__category--show) { transform: scale(1.015); } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category:hover:not(.tutorial__category--show) .tutorial__category-title { color: var(--tutorial-primary); transition-duration: 0.2s; } } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper { width: 100%; position: relative; padding: 2rem 2.5rem; display: grid; grid-template-columns: auto 3.5rem; } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper:not(.tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper--tutorial)::after { content: ""; position: absolute; height: 0.1rem; width: 95%; background-color: #000000; display: block; opacity: 0.25; bottom: 0; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper:not(.tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper--tutorial)::after { bottom: -0.2rem; } } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-title { text-transform: uppercase; font-size: 2rem; font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; font-weight: 800; } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-title { font-size: 2.3rem; } } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-label { font-style: italic; font-size: 1.4rem; color: rgba(0, 0, 0, 0.7); } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-cross { width: 3.2rem; height: 3.2rem; background-color: var(--tutorial-primary); border-radius: 50%; margin: auto 0 auto auto; transition-duration: 0.3s; display: flex; justify-content: center; align-items: center; box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.25); } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-cross { width: 3.2rem; height: 3.2rem; top: 2.6rem; margin-right: 1.2rem; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-cross { top: 2.5rem; } } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-cross::after, .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-cross::before { content: ''; width: 1.7rem; display: block; height: 0.37rem; border-radius: 0.1rem; background: white; position: absolute; transition: 0.1s ease-out; } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category .tutorial__category-wrapper .tutorial__category-cross::after { transform: rotate(90deg); } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category--show .tutorial__category-tutorials { max-height: 100rem; } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__categories .tutorial__category--show .tutorial__category-wrapper .tutorial__category-cross::after { transform: rotate(0deg); } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited { display: none; } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited { border-radius: 2rem; flex: 40%; max-width: 55rem; height: fit-content; background-color: var(--tutorial-primary); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 4rem 0; margin-right: 5.4rem; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-title { font-size: 3rem; font-weight: 800; text-align: center; padding: 0 2rem; font-style: italic; font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; color: white; margin: auto auto 2rem; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper { position: relative; display: flex; width: 100%; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper .tutorial__most-visited-element-wrapper { border-radius: 2rem; box-shadow: 0.2rem 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.15); margin: 1.1rem 3rem; padding: 1.2rem 2.5rem; position: relative; background-color: white; width: 100%; min-height: 8.5rem; display: grid; grid-template-columns: 5.5rem auto 2.5rem; flex-direction: row; align-items: center; justify-content: flex-start; transition: 0.1s ease-out; } } .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper .tutorial__most-visited-element-wrapper:hover { transform: scale(1.015); } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper .tutorial__most-visited-element-wrapper .tutorial__most-visited-element-image-wrapper { width: 5.5rem; height: 5.5rem; background-color: var(--tutorial-primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper .tutorial__most-visited-element-wrapper .tutorial__most-visited-element-image-wrapper .tutorial__most-visited-element-image { width: 45%; height: 45%; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper .tutorial__most-visited-element-wrapper .tutorial__most-visited-element-text-wrapper { display: flex; flex-direction: column; padding-left: 1.8rem; line-height: 1.7rem; color: #000000; justify-content: center; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper .tutorial__most-visited-element-wrapper .tutorial__most-visited-element-text-wrapper .tutorial__most-visited-element-title { font-size: 2rem; font-weight: bold; margin-bottom: 0.9rem; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper .tutorial__most-visited-element-wrapper .tutorial__most-visited-element-text-wrapper .tutorial__most-visited-element-text { font-size: 1.4rem; font-weight: 400; font-style: italic; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__frontpage-inner-wrapper .tutorial__most-visited .tutorial__most-visited-wrapper .tutorial__most-visited-element-wrapper .tutorial__most-visited-element-arrow { width: 1.5rem; height: 1.5rem; border-bottom: 0.2rem solid #000000; border-right: 0.2rem solid #000000; transform: rotate(-45deg); position: absolute; top: 40%; left: 90%; transition: 0.2s ease-out; } } .tutorial__frontpage-wrapper .tutorial__search-result { transition: 0.3s ease-out; position: absolute; left: 0; right: 0; top: 100rem; background-color: var(--tutorial-primary); opacity: 0; pointer-events: none; min-height: 46rem; } .tutorial__frontpage-wrapper .tutorial__search-result--show { top: 0; opacity: 1; pointer-events: auto; bottom: 0; display: flex; flex-direction: column; position: relative; } .tutorial__frontpage-wrapper .tutorial__search-result--show .tutorial__search-result-wrapper { position: relative; top: 0; right: 0; left: 0; } .tutorial__frontpage-wrapper .tutorial__search-result--show .tutorial__search-result-related-wrapper { position: relative; top: 0; right: 0; left: 0; } .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-wrapper { padding: 0 2rem; flex: 1; } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-wrapper { width: 55rem; margin: 0 auto; padding: 0; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-wrapper { width: 63rem; padding: 0 0 5rem; flex: 1; } } .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-related-wrapper { background-color: white; padding: 3.5rem 1.5rem; min-height: 25rem; max-width: 144rem; width: 100%; margin: 0 auto; } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-related-wrapper { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-related-wrapper .tutorial__search-result-related-inner-wrapper { margin: 0 auto; width: 55rem; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-related-wrapper .tutorial__search-result-related-inner-wrapper { width: 63rem; } } .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-related-wrapper .tutorial__search-result-related-inner-wrapper .tutorial__search-result-related-help-text { font-style: italic; font-size: 1.4rem; padding-bottom: 2.3rem; } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-related-wrapper .tutorial__search-result-related-inner-wrapper .tutorial__search-result-related-help-text { display: flex; align-items: flex-start; font-size: 2rem; width: fit-content; margin: 1.7rem auto 4.3rem; padding-left: 0; padding-bottom: 0; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__search-result .tutorial__search-result-related-wrapper .tutorial__search-result-related-inner-wrapper .tutorial__search-result-related-help-categories { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; width: 63.2rem; padding-left: 0; padding-right: 0; margin: 0 auto; } } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper { transition-duration: 0.5s; position: absolute; left: 0; right: 0; top: 100rem; background-color: var(--tutorial-primary); opacity: 0; pointer-events: none; } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper--show { top: 0; opacity: 1; pointer-events: auto; } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper { color: white; max-width: 62.2rem; margin: 0 auto; padding-left: 2rem; } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper { max-width: 51rem; padding-left: 0; } } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper { max-width: 63.2rem; } } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-title { font-size: 1.2rem; padding-right: 1.5rem; line-height: 1.5rem; } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-title { width: 63.2rem; margin: 0 auto; padding-left: 0; } } @media screen and (min-width: 1216px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-title { font-size: 1.6rem; } } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-search-query { color: white; font-size: 2rem; font-weight: bold; padding: 1.2rem 0 1.8rem; } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-search-query { width: 63.2rem; margin: 0 auto; padding-left: 0; } } @media screen and (min-width: 1216px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-search-query { font-size: 2.5rem; } } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-text { font-size: 1.2rem; padding-bottom: 3.7rem; } @media screen and (min-width: 1024px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-text { width: 63.2rem; margin: 0 auto; padding-left: 0; padding-bottom: 4rem; } } @media screen and (min-width: 1216px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-result-null-text { font-size: 1.6rem; } } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-last-visited-wrapper .tutorial__search-last-visited-title { font-size: 1.5rem; font-weight: 400; margin-bottom: 1.5rem; } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-last-visited-wrapper .tutorial__search-last-visited-title { font-size: 1.8rem; } } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-last-visited-wrapper .tutorial__search-last-visited-element-wrapper { margin-bottom: 1.75rem; display: flex; flex-direction: column; } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-last-visited-wrapper .tutorial__search-last-visited-element-wrapper .tutorial__search-last-visited-element-innerwrapper { display: flex; flex-direction: row; align-items: center; padding-left: 2.4rem; padding-bottom: 1.7rem; } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-last-visited-wrapper .tutorial__search-last-visited-element-wrapper .tutorial__search-last-visited-element-innerwrapper .tutorial__search-last-visited-element-image { width: 1.3rem; height: 1.3rem; margin-right: 1.7rem; } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-last-visited-wrapper .tutorial__search-last-visited-element-wrapper .tutorial__search-last-visited-element-innerwrapper .tutorial__search-last-visited-element-image { width: 1.4rem; height: 1.4rem; } } .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-last-visited-wrapper .tutorial__search-last-visited-element-wrapper .tutorial__search-last-visited-element-innerwrapper .tutorial__search-last-visited-element-title { color: white; font-size: 1.4rem; font-weight: 400; } @media screen and (min-width: 768px) { .tutorial__frontpage-wrapper .tutorial__search-result-null-wrapper .tutorial__search-result-null-inner-wrapper .tutorial__search-last-visited-wrapper .tutorial__search-last-visited-element-wrapper .tutorial__search-last-visited-element-innerwrapper .tutorial__search-last-visited-element-title { font-size: 1.6rem; } } .tutorial__category-tutorials-wrapper { position: relative; display: grid; padding: 2.5rem; grid-template-columns: 5.5rem auto 2.5rem; align-items: center; } .tutorial__category-tutorials-wrapper:not(:last-child)::after { content: ''; position: absolute; background: rgba(0, 0, 0, 0.25); width: 95%; height: 0.1rem; bottom: 0; left: 50%; transform: translateX(-50%); } @media screen and (min-width: 1024px) { .tutorial__category-tutorials-wrapper { width: 100%; padding: 1.4rem 2.5rem; } } .tutorial__category-tutorials-wrapper .tutorial__category-tutorials-image-wrapper { width: 5.5rem; height: 5.5rem; background-color: var(--tutorial-primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0.4rem 2rem rgba(0, 27, 48, 0.2); } @media screen and (min-width: 768px) { .tutorial__category-tutorials-wrapper .tutorial__category-tutorials-image-wrapper { width: 5.5rem; height: 5.5rem; } } .tutorial__category-tutorials-wrapper .tutorial__category-tutorials-image-wrapper .tutorial__category-tutorials-image { width: 45%; height: 45%; } .tutorial__category-tutorials-wrapper .tutorial__category-tutorials-text-wrapper { display: flex; flex-direction: column; padding-left: 1.8rem; color: #000000; justify-content: center; } .tutorial__category-tutorials-wrapper .tutorial__category-tutorials-text-wrapper .tutorial__category-tutorials-title { font-weight: bold; font-size: 2rem; } @media screen and (min-width: 768px) { .tutorial__category-tutorials-wrapper .tutorial__category-tutorials-text-wrapper .tutorial__category-tutorials-title { font-size: 1.8rem; } } .tutorial__category-tutorials-wrapper .tutorial__category-tutorials-text-wrapper .tutorial__category-tutorials-text { font-size: 1.6rem; font-style: italic; } @media screen and (min-width: 768px) { .tutorial__category-tutorials-wrapper .tutorial__category-tutorials-text-wrapper .tutorial__category-tutorials-text { font-size: 1.6rem; } } .tutorial__category-tutorials-wrapper--filtered { margin-bottom: 1.4rem; padding-left: 0; } @media screen and (min-width: 768px) { .tutorial__category-tutorials-wrapper--filtered { display: flex; align-items: center; width: 100%; margin: 0 auto 1.4rem; } } @media screen and (min-width: 1024px) { .tutorial__category-tutorials-wrapper--filtered { display: flex; align-items: center; flex-direction: row; padding-left: 0; width: 63.2rem; margin: 0 auto; } } .tutorial__category-tutorials-wrapper--filtered .tutorial__category-tutorials-image-wrapper { background-color: #ffffff; width: 5.3rem; height: 5.3rem; } @media screen and (min-width: 1024px) { .tutorial__category-tutorials-wrapper--filtered .tutorial__category-tutorials-image-wrapper { margin-left: 0; } } .tutorial__category-tutorials-wrapper--filtered .tutorial__category-tutorials-text-wrapper { color: white; } .tutorial__category-tutorials-wrapper--filtered .tutorial__category-tutorials-text-wrapper .tutorial__category-tutorials-title { font-weight: normal; } .tutorial__category-tutorials-wrapper--filtered .tutorial__category-tutorials-arrow { border-bottom: 0.2rem solid #ffffff; border-right: 0.2rem solid #ffffff; right: 4rem; } @media screen and (min-width: 768px) { .tutorial__category-tutorials-wrapper--filtered .tutorial__category-tutorials-arrow { right: 4rem; } } .tutorial__category-tutorials-arrow { width: 1.5rem; height: 1.5rem; border-bottom: 0.3rem solid #000000; border-right: 0.3rem solid #000000; transform: rotate(-45deg); position: relative; margin: auto 0 auto auto; transition: 0.2s ease-out; } @media screen and (min-width: 768px) { .tutorial__category-tutorials-arrow { width: 1.5rem; height: 1.5rem; right: 2.5rem; } } .tutorial__highlight { background: var(--highlightBackgroundColor, transparent); color: var(--highlightColor, inherit); padding: 0 0.1rem; border-radius: 0.6rem; } .tutorial__hero { background-color: var(--tutorial-primary); position: relative; } .tutorial__hero--disable { display: none; } .tutorial__hero .tutorial__hero-arrow { background-color: white; border-radius: 50%; height: 4.1rem; width: 4.2rem; margin-left: 1.6rem; position: absolute; top: 5rem; box-shadow: 0.2rem 1.5rem 1.5rem 0.2rem rgba(0, 0, 0, 0.15); } @media screen and (min-width: 768px) { .tutorial__hero .tutorial__hero-arrow { margin-left: 6.8rem; } } @media screen and (min-width: 1024px) { .tutorial__hero .tutorial__hero-arrow { top: 3rem; } } .tutorial__hero .tutorial__hero-arrow::after { content: ""; width: 1.75rem; height: 1.75rem; border-bottom: 0.4rem solid #000000; border-right: 0.4rem solid #000000; border-radius: 10%; display: block; transform: rotate(135deg); position: absolute; top: 30%; left: 35%; } .tutorial__hero .tutorial__hero-title { font-size: 6rem; color: white; margin: 0 auto; padding: 5rem 0 2rem 0; width: 70rem; max-width: 70%; display: flex; justify-content: center; line-height: 0.8; font-family: "Oddset", sans-serif; font-style: italic; font-weight: 800; letter-spacing: -0.01em; transform: rotate(-10deg); text-transform: uppercase; text-shadow: 0.2rem 0.5rem 1.6rem rgba(0, 0, 0, 0.15); } @media screen and (min-width: 768px) { .tutorial__hero .tutorial__hero-title { font-size: 9rem; max-width: unset; padding-bottom: 8rem; } } @media screen and (min-width: 1024px) { .tutorial__hero { padding: 2.9rem; } } .tutorial-footer { background-color: var(--tutorial-primary); position: relative; padding: 0 2rem; border-top: solid 0.1rem white; } .tutorial-footer--disable { display: none; } @media screen and (min-width: 1216px) { .tutorial-footer { width: 100%; margin: 0 auto; padding: 0 4rem; } } .tutorial-footer .tutorial-footer-inner { max-width: 144rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin: 0 auto; } @media screen and (min-width: 768px) { .tutorial-footer .tutorial-footer-inner { align-items: flex-start; } } @media screen and (min-width: 1024px) { .tutorial-footer .tutorial-footer-inner { flex-direction: row; } } .tutorial-footer .tutorial-footer-inner .tutorial-footer__text-wrapper { width: 100%; } @media screen and (min-width: 1216px) { .tutorial-footer .tutorial-footer-inner .tutorial-footer__text-wrapper { flex-basis: 50%; } } .tutorial-footer .tutorial-footer-inner .tutorial-footer__text-wrapper .tutorial-footer__title { padding-top: 2.9rem; font-weight: 800; font-family: Oddset, Impact, "Anton Regular", "Open Sans", Helvetica, Arial, sans-serif; font-size: 2.5rem; font-style: italic; line-height: 4rem; color: white; } @media screen and (min-width: 768px) { .tutorial-footer .tutorial-footer-inner .tutorial-footer__text-wrapper .tutorial-footer__title { font-size: 2.3rem; line-height: 6rem; } } .tutorial-footer .tutorial-footer-inner .tutorial-footer__text-wrapper .tutorial-footer__text { font-size: 1.4rem; color: white; padding: 2rem 0; } .tutorial-footer .tutorial-footer-inner .tutorial-footer__text-wrapper .tutorial-footer__text p { margin: 0; } .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement { width: 100%; } @media screen and (min-width: 768px) { .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between; padding-right: 6rem; } } @media screen and (min-width: 1024px) { .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement { justify-content: center; grid-column-gap: 3rem; padding-top: 6.6rem; padding-bottom: 5.7rem; width: auto; } } .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement .tutorial-footer__footerElement-wrapper { display: flex; padding-bottom: 3.3rem; align-items: center; } @media screen and (min-width: 768px) { .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement .tutorial-footer__footerElement-wrapper { flex-basis: 50%; } } .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement .tutorial-footer__footerElement-wrapper .tutorial-footer__footerElement-image-wrapper { width: 5.5rem; height: 5.5rem; background-color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 2rem; box-shadow: 0 0.4rem 2rem rgba(0, 27, 48, 0.2); } @media screen and (min-width: 768px) { .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement .tutorial-footer__footerElement-wrapper .tutorial-footer__footerElement-image-wrapper { margin-right: 3rem; } } .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement .tutorial-footer__footerElement-wrapper .tutorial-footer__footerElement-image-wrapper .tutorial-footer__footerElement-image { width: 50%; height: 50%; } .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement .tutorial-footer__footerElement-wrapper .tutorial-footer__footerElement-text-wrapper .tutorial-footer__footerElement-title { font-weight: bold; font-size: 2rem; color: white; padding-bottom: 0.2rem; } .tutorial-footer .tutorial-footer-inner .tutorial-footer__footerElement .tutorial-footer__footerElement-wrapper .tutorial-footer__footerElement-text-wrapper .tutorial-footer__footerElement-text { font-size: 1.4rem; color: white; font-weight: 400; } .tutorial__content-box { max-width: 144rem; margin: 0 auto 0; background-color: white; border-top-left-radius: 3rem; border-top-right-radius: 3rem; box-shadow: 0.2rem 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.15); } .tutorial__content-box--full-width { max-width: 100%; } .tutorial__content-box--no-radius { border-radius: 0; } /*# sourceMappingURL=region-avalon-eurojackpot.css.map */