/* Style CUBE CSS -------------------------------------------*/ /* Mixins -------------------------------------------*/ /* Media-queries breakpoints */ /* Transition */ /* spinning effect */ /* Typography */ @layer base { /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role=list], ol[role=list] { list-style: none; } /* Set core root defaults */ html:focus-within { scroll-behavior: smooth; } /* Set core body defaults */ body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Settings -------------------------------------------*/ /* CSS custom properties */ :root { /* Typography */ --titlefont: "Poppins", sans-serif; --basefont: "Poppins", sans-serif; /* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,14,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); --step-1: clamp(1.05rem, 0.9261rem + 0.6196vw, 1.4063rem); --step-2: clamp(1.26rem, 1.0868rem + 0.8658vw, 1.7578rem); --step-3: clamp(1.512rem, 1.2736rem + 1.1918vw, 2.1973rem); --step-4: clamp(1.8144rem, 1.4902rem + 1.6212vw, 2.7466rem); --step-5: clamp(2.1773rem, 1.7404rem + 2.1843vw, 3.4332rem); --step-6: clamp(2.6127rem, 2.0288rem + 2.9196vw, 4.2915rem); --step-7: clamp(3.1353rem, 2.3599rem + 3.8768vw, 5.3644rem); --step-8: clamp(3.7623rem, 2.7386rem + 5.1186vw, 6.7055rem); --step-9: clamp(4.5148rem, 3.1697rem + 6.7254vw, 8.3819rem); --font-size-r: 1.25rem; --font-weight-r: 300; --font-weight-m: 500; --font-weight-sbd: 600; --font-weight-bd: 800; --font-weight-bl: 900; --lineheight-r: 1.5; --lineheight-s: 1.35; /* UI colours */ --color-body: #ffffff; --color-primary: hsl(28, 96%, 48%); --color-primary-light: hsl(28, 96%, 85%); --color-secondary: hsl(206, 100%, 35%); --color-secondary-light: hsl(206, 100%, 85%); --color-neutral-black: #131312; --color-neutral-grey: #F3F3F3; --color-white: #fff; --color-background-default: var(--color-neutral-grey); --color-background-alt: var(--color-primary-light); --color-border: var(--color-text-default); --color-border-alt: var(--color-neutral-grey); --color-button: var(--color-primary); --color-button-alt: #463830; --color-button-text: #fff; --color-button-border: var(--color-primary-light); --color-text-default: #463830; --color-text-alt: #ffffff; --color-text-link: var(--color-primary); --color-text-link-hover: hsl(from var(--color-primary) h s calc(l - 8)); --color-dash: var(--color-text-default); --color-list: var(--color-primary); --color-filter: var(--color-text-default); --color-icon-bg: var(--color-text-default); /* Borders */ --border-width-r: 1px; --border-width-m: 3.5px; --border-width-l: 5px; --border-width-xl: 8px; --border-radius-r: 1rem; --border-radius-m: 30px; --border-radius-l: 100%; /* Layout */ --max-width: 1500px; --grid-column-gap: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.31rem); --grid-row-gap: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.31rem); --grid-2: repeat(2, minmax(0, 1fr)); --grid-3: repeat(3, minmax(0, 1fr)); --grid-4: repeat(4, minmax(0, 1fr)); --grid-5: repeat(5, minmax(0, 1fr)); --grid-8: repeat(8, minmax(0, 1fr)); --grid-12: repeat(12, minmax(0, 1fr)); --grid-15: repeat(15, minmax(0, 1fr)); --grid-10: repeat(10, minmax(0, 1fr)); --grid-4-5: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr; --grid-3-4: 3fr 1fr 2fr 2fr 1fr 3fr; /* Spacing */ --space-3xs: clamp(0.25rem, calc(0.23rem + 0.09vw), 0.31rem); --space-2xs: clamp(0.50rem, calc(0.46rem + 0.19vw), 0.63rem); --space-xs: clamp(0.75rem, calc(0.69rem + 0.28vw), 0.94rem); --space-s: clamp(1.00rem, calc(0.92rem + 0.38vw), 1.25rem); --space-m: clamp(1.50rem, calc(1.39rem + 0.57vw), 1.88rem); --space-l: clamp(2.00rem, calc(1.85rem + 0.75vw), 2.50rem); --space-xl: clamp(3.00rem, calc(2.77rem + 1.13vw), 3.75rem); --space-2xl: clamp(4.00rem, calc(3.70rem + 1.51vw), 5.00rem); --space-3xl: clamp(6.00rem, calc(5.55rem + 2.26vw), 7.50rem); /* Sizing */ --svg-width: clamp(1.50rem, calc(1.34rem + 0.80vw), 2.06rem); /* Duration */ --animate-duration: 1s; --animate-duration-fast: .5s; --animate-duration-faster: .25s; --animate-delay: 1s; --animate-function: ease-in; --animate-repeat: 1; /* Scale */ --scale-up: 1.1; --scale-down: .98; /* Filters */ --brightness-up: 1.15; --brightness-down: .85; --saturate-up: 1.25; --saturate-down: .85; } [data-user-color-scheme=south-china] { --titlefont: "fractul-variable", sans-serif; --color-primary: color(display-p3 0.534 0.169 0.137); --color-primary-light: hsl(28, 89%, 93%); --color-text-default: color(display-p3 0.334 0.102 0.141); --color-secondary: color(display-p3 0.334 0.106 0.149); --color-secondary-light: color(display-p3 0.969 0.902 0.894); } [data-user-color-scheme=gess-dubai] { --titlefont: "ruddy", sans-serif; --color-primary: color(display-p3 0.507 0.211 0.522); --color-primary-light: hsl(302, 28%, 93%); --color-text-default: color(display-p3 0.15 0.192 0.381); --color-secondary: color(display-p3 0.507 0.211 0.522); --color-secondary-light: hsl(302, 28%, 93%); } [data-user-color-scheme=network-x] { --titlefont: "Barlow Condensed", sans-serif; --color-primary: #b792fc; --color-primary-light: #f4f4f4; --color-text-default: #2D2D2D; --color-secondary: #b792fc; --color-secondary-light: hsl(302, 28%, 93%); --color-button: var(--color-secondary); --color-button-border: var(--color-secondary); --color-button-text: #fff; --color-dash: var(--color-secondary); --gradient2: linear-gradient(90deg, #b792fc 0%, #00b9f9 100%); } [data-user-color-scheme=classic-dual-color] { --color-primary: #2D2D2D; --color-primary-light: #f4f4f4; --color-text-default: #2D2D2D; --color-secondary: #FFDD00; --color-secondary-light: hsl(302, 28%, 93%); --color-button: var(--color-secondary); --color-button-border: var(--color-secondary); --color-button-text: #2D2D2D; } [data-user-color-scheme=art-miami] { --titlefont: "neue-haas-grotesk-display", sans-serif; --basefont: "Poppins", sans-serif; --color-primary: #00aaef; --color-primary-light: #f4f4f4; --color-text-default: #2D2D2D; --color-secondary: #00aaef; --color-secondary-light: hsl(302, 28%, 93%); --color-button: var(--color-secondary); --color-button-border: var(--color-secondary); --color-button-text: #fff; --color-dash: var(--color-secondary); } [data-user-color-scheme=jewellery] { --titlefont: "swear-display", serif; --basefont: "Poppins", sans-serif; --color-primary: #d8c17b !important; --color-primary-light: #f4f4f4; --color-text-default: rgb(108, 109, 116); --color-secondary: #d8c17b !important; --color-secondary-light: hsl(302, 28%, 93%); --color-button: var(--color-secondary); --color-button-border: var(--color-secondary); --color-button-text: #fff; --color-dash: var(--color-secondary); } [data-user-color-scheme=fashion] { --titlefont: "Inter", sans-serif; --color-primary: #2D2D2D; --color-primary-light: #f4f4f4; --color-text-default: #2D2D2D; --color-secondary: #2D2D2D; --color-secondary-light: hsl(302, 28%, 93%); --color-button: var(--color-secondary); --color-button-border: var(--color-secondary); --color-button-text: #ffffff; --font-weight-sbd: 800; } [data-user-color-scheme=fanexpo] { --titlefont: "Roboto", sans-serif; --basefont: "Roboto", sans-serif; --color-primary: #E9151D; --color-primary-light: hsl(28, 89%, 93%); --color-text-default: #2D2D2D; --color-secondary: #E9151D; --color-secondary-light: hsl(302, 28%, 93%); --color-button: var(--color-secondary); --color-button-text: #ffffff; --font-weight-sbd: 800; --color-button-border: black; } [data-user-color-scheme=india-theme] { --color-primary: hsl(155, 77%, 25%); --color-primary-light: hsl(156, 9%, 89%); --color-text-default: #2A4A3E; --color-secondary: hsl(28, 98%, 46%); --color-secondary-light: hsl(28, 89%, 90%); } [data-user-color-scheme=asia-theme] { /*--color-primary:hsl(351, 92%, 35%); --color-primary-light:hsl(6, 63%, 84%); --color-text-default: #38040D; --color-secondary: hsl(35, 99%, 46%); --color-secondary-light: hsl(35, 100%, 64%);*/ --color-primary: #CD1719; --color-primary-light: hsl(6, 63%, 84%); --color-text-default: #1F1341; --color-secondary: #3D2652; --color-secondary-light: #5c4075; --titlefont: "chakra-petch", sans-serif; --font-weight-bd: 700; } [data-user-color-scheme=americas-theme] { --color-primary: hsl(190, 92%, 35%); --color-primary-light: hsl(198, 39%, 83%); --color-text-default: #14334B; --color-secondary: hsl(1, 78%, 45%); --color-secondary-light: hsl(0, 70%, 89%); } [data-user-color-scheme=fanexpo-dark] { --titlefont: "proxima-nova-extra-condensed", sans-serif; --basefont: "Roboto", sans-serif; --color-body: #212124; --color-text-default: #f7f7f7; --hero-box-bg: #211E1D; --color-background-default: #212121; --color-background-alt: #18181a; --color-neutral-grey: #18181a; --color-primary: #E9151D; --color-primary-light: #212121; --color-secondary: #E9151D; --color-secondary-light: hsl(206, 100%, 85%); --color-secondary-light: hsl(6, 63%, 84%); --color-background-default: var(--color-neutral-grey); --color-background-alt: var(--color-primary-light); --color-border: var(--color-text-default); --color-border-alt: #606060; --color-button: var(--color-primary); --color-button-border: var(--color-secondary-light); --color-text-alt: #f7f7f7; --color-text-link: var(--color-primary); --color-text-link-hover: hsl(from var(--color-primary) h s calc(l - 8)); --color-dash: var(--color-text-default); --color-list: var(--color-primary); --color-filter: #18181a; --color-icon-bg: #3A3B3C; --icon-globe: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMTUuMSw0NzYuM2MtMjUtMjYuNC01NS41LTY3LjYtNzIuOS0xMjQuM0g1My42YzMwLjMsNjMuOCw5MCwxMTEuMSwxNjEuNSwxMjQuM1pNMjE3LjUsNDI5LjhjMTQsMTguNSwyNy45LDMyLjQsMzguNSw0MS42LDEwLjUtOS4zLDI0LjUtMjMuMSwzOC41LTQxLjYsMTUuNC0yMC4zLDMwLjctNDYuMSw0MS43LTc3LjdoLTE2MC4zYzExLDMxLjYsMjYuMyw1Ny40LDQxLjcsNzcuN2gtLjFaTTE2MCwyNTZjMCwyMy4xLDIuNSw0NC41LDYuOCw2NGgxNzguNGM0LjMtMTkuNSw2LjgtNDAuOSw2LjgtNjRzLTIuNS00NC41LTYuOC02NGgtMTc4LjRjLTQuMywxOS41LTYuOCw0MC45LTYuOCw2NGgwWk0xMzQuMSwxOTJINDEuM2MtNiwyMC4zLTkuMyw0MS44LTkuMyw2NHMzLjIsNDMuNyw5LjMsNjRoOTIuOGMtMy45LTE5LjgtNi4xLTQxLjEtNi4xLTY0czIuMi00NC4yLDYuMS02NFpNMTc1LjgsMTYwaDE2MC4zYy0xMS0zMS42LTI2LjMtNTcuNC00MS43LTc3LjctMTQtMTguNS0yNy45LTMyLjQtMzguNS00MS42LTEwLjUsOS4zLTI0LjUsMjMuMS0zOC41LDQxLjYtMTUuNCwyMC4zLTMwLjcsNDYuMS00MS43LDc3LjdoLjFaTTM3Ny45LDE5MmMzLjksMTkuOCw2LjEsNDEuMSw2LjEsNjRzLTIuMiw0NC4yLTYuMSw2NGg5Mi44YzYtMjAuMyw5LjMtNDEuOCw5LjMtNjRzLTMuMi00My43LTkuMy02NGgtOTIuOFpNNDU4LjUsMTYwYy0zMC4zLTYzLjgtOTAtMTExLjEtMTYxLjUtMTI0LjMsMjUsMjYuNCw1NS41LDY3LjYsNzIuOSwxMjQuM2g4OC42Wk0xNDIuMiwxNjBjMTcuNS01Ni42LDQ3LjktOTcuOSw3Mi45LTEyNC4zLTcxLjYsMTMuMi0xMzEuMiw2MC41LTE2MS41LDEyNC4zaDg4LjZaTTI5Ni45LDQ3Ni4zYzcxLjYtMTMuMiwxMzEuMi02MC40LDE2MS41LTEyNC4zaC04OC42Yy0xNy41LDU2LjYtNDcuOSw5Ny45LTcyLjksMTI0LjNaTTI1Niw1MTJDMTE0LjYyLDUxMiwwLDM5Ny4zOCwwLDI1NlMxMTQuNjIsMCwyNTYsMHMyNTYsMTE0LjYyLDI1NiwyNTYtMTE0LjYyLDI1Ni0yNTYsMjU2WiIvPgo8L3N2Zz4=); } [data-theme=bright] { --color-accent: #c4d047; --color-background-default: #2b92cf; --color-background-alt: #3d3c3b; --color-base: #ebe6e0; --color-border: #fff; --color-button: #fff; --color-button-text: #2b92cf; --color-text-default: #fff; --color-text-alt: #f9f8f6; --color-text-link: #c4d047; } :root { --icon-globe: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMjMxZjIwOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMTUuMSw0NzYuM2MtMjUtMjYuNC01NS41LTY3LjYtNzIuOS0xMjQuM0g1My42YzMwLjMsNjMuOCw5MCwxMTEuMSwxNjEuNSwxMjQuM1pNMjE3LjUsNDI5LjhjMTQsMTguNSwyNy45LDMyLjQsMzguNSw0MS42LDEwLjUtOS4zLDI0LjUtMjMuMSwzOC41LTQxLjYsMTUuNC0yMC4zLDMwLjctNDYuMSw0MS43LTc3LjdoLTE2MC4zYzExLDMxLjYsMjYuMyw1Ny40LDQxLjcsNzcuN2gtLjFaTTE2MCwyNTZjMCwyMy4xLDIuNSw0NC41LDYuOCw2NGgxNzguNGM0LjMtMTkuNSw2LjgtNDAuOSw2LjgtNjRzLTIuNS00NC41LTYuOC02NGgtMTc4LjRjLTQuMywxOS41LTYuOCw0MC45LTYuOCw2NGgwWk0xMzQuMSwxOTJINDEuM2MtNiwyMC4zLTkuMyw0MS44LTkuMyw2NHMzLjIsNDMuNyw5LjMsNjRoOTIuOGMtMy45LTE5LjgtNi4xLTQxLjEtNi4xLTY0czIuMi00NC4yLDYuMS02NFpNMTc1LjgsMTYwaDE2MC4zYy0xMS0zMS42LTI2LjMtNTcuNC00MS43LTc3LjctMTQtMTguNS0yNy45LTMyLjQtMzguNS00MS42LTEwLjUsOS4zLTI0LjUsMjMuMS0zOC41LDQxLjYtMTUuNCwyMC4zLTMwLjcsNDYuMS00MS43LDc3LjdoLjFaTTM3Ny45LDE5MmMzLjksMTkuOCw2LjEsNDEuMSw2LjEsNjRzLTIuMiw0NC4yLTYuMSw2NGg5Mi44YzYtMjAuMyw5LjMtNDEuOCw5LjMtNjRzLTMuMi00My43LTkuMy02NGgtOTIuOFpNNDU4LjUsMTYwYy0zMC4zLTYzLjgtOTAtMTExLjEtMTYxLjUtMTI0LjMsMjUsMjYuNCw1NS41LDY3LjYsNzIuOSwxMjQuM2g4OC42Wk0xNDIuMiwxNjBjMTcuNS01Ni42LDQ3LjktOTcuOSw3Mi45LTEyNC4zLTcxLjYsMTMuMi0xMzEuMiw2MC41LTE2MS41LDEyNC4zaDg4LjZaTTI5Ni45LDQ3Ni4zYzcxLjYtMTMuMiwxMzEuMi02MC40LDE2MS41LTEyNC4zaC04OC42Yy0xNy41LDU2LjYtNDcuOSw5Ny45LTcyLjksMTI0LjNaTTI1Niw1MTJDMTE0LjYyLDUxMiwwLDM5Ny4zOCwwLDI1NlMxMTQuNjIsMCwyNTYsMHMyNTYsMTE0LjYyLDI1NiwyNTYtMTE0LjYyLDI1Ni0yNTYsMjU2WiIvPgo8L3N2Zz4=); --icon-link-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzOCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTM2Ljk2MDcgMTYuNDI4NkMzNy43MTk1IDE1LjY2OTggMzcuNzE5NSAxNC40Mzk2IDM2Ljk2MDcgMTMuNjgwN0wyNC41OTUyIDEuMzE1MjdDMjMuODM2NCAwLjU1NjQ2NSAyMi42MDYxIDAuNTU2NDY1IDIxLjg0NzMgMS4zMTUyN0MyMS4wODg1IDIuMDc0MDggMjEuMDg4NSAzLjMwNDM1IDIxLjg0NzMgNC4wNjMxNkwzMi44Mzg4IDE1LjA1NDdMMjEuODQ3MyAyNi4wNDYyQzIxLjA4ODUgMjYuODA1IDIxLjA4ODUgMjguMDM1MyAyMS44NDczIDI4Ljc5NDFDMjIuNjA2MSAyOS41NTI5IDIzLjgzNjQgMjkuNTUyOSAyNC41OTUyIDI4Ljc5NDFMMzYuOTYwNyAxNi40Mjg2Wk0wLjc5Njg3NSAxNi45OTc3SDM1LjU4NjdWMTMuMTExNkgwLjc5Njg3NVYxNi45OTc3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="); --icon-play-video: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA0NSA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzExMDBfMTE2OTkpIj4KPHBhdGggZD0iTTkuMzE3OTIgNS4wMjI2NEM3LjYxOTg3IDMuOTc4NTcgNS40ODU4MiAzLjk0NDE1IDMuNzUzMzUgNC45MTkzOEMyLjAyMDg4IDUuODk0NjEgMC45NDIzODMgNy43MzAzNSAwLjk0MjM4MyA5LjcyNjcxVjUwLjExMjlDMC45NDIzODMgNTIuMTA5MiAyLjAyMDg4IDUzLjk0NSAzLjc1MzM1IDU0LjkyMDJDNS40ODU4MiA1NS44OTU0IDcuNjE5ODcgNTUuODQ5NSA5LjMxNzkyIDU0LjgxNjlMNDIuMzYxMSAzNC42MjM5QzQ0LjAwMTggMzMuNjI1NyA0NSAzMS44NDczIDQ1IDI5LjkxOThDNDUgMjcuOTkyMyA0NC4wMDE4IDI2LjIyNTQgNDIuMzYxMSAyNS4yMTU3TDkuMzE3OTIgNS4wMjI2NFoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTEwMF8xMTY5OSI+CjxyZWN0IHdpZHRoPSI0NC4wNTc2IiBoZWlnaHQ9IjU4Ljc0MzUiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjk0MjM4MyAwLjU0ODgyOCkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"); --icon-car: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iNTkiIHZpZXdCb3g9IjAgMCA2NyA1OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY5MjIgMTEuMzYyOUwxNC4yNzY4IDIxLjEyNUg1Mi43MjMyTDQ5LjMwNzggMTEuMzYyOUM0OC43MTg5IDkuNjg3ODkgNDcuMTM1NSA4LjU2MjUgNDUuMzU1OSA4LjU2MjVIMjEuNjQ0MUMxOS44NjQ1IDguNTYyNSAxOC4yODExIDkuNjg3ODkgMTcuNjkyMiAxMS4zNjI5Wk01LjE4MjAzIDIxLjc1MzFMOS43ODgyOCA4LjYwMTc2QzExLjU1NDkgMy41NjM2NyAxNi4zMDUxIDAuMTg3NSAyMS42NDQxIDAuMTg3NUg0NS4zNTU5QzUwLjY5NDkgMC4xODc1IDU1LjQ0NTEgMy41NjM2NyA1Ny4yMTE3IDguNjAxNzZMNjEuODE4IDIxLjc1MzFDNjQuODUzOSAyMy4wMDk0IDY3IDI2LjAwNjEgNjcgMjkuNVY0OC4zNDM4VjU0LjYyNUM2NyA1Ni45NDEyIDY1LjEyODcgNTguODEyNSA2Mi44MTI1IDU4LjgxMjVINTguNjI1QzU2LjMwODggNTguODEyNSA1NC40Mzc1IDU2Ljk0MTIgNTQuNDM3NSA1NC42MjVWNDguMzQzOEgxMi41NjI1VjU0LjYyNUMxMi41NjI1IDU2Ljk0MTIgMTAuNjkxMiA1OC44MTI1IDguMzc1IDU4LjgxMjVINC4xODc1QzEuODcxMjkgNTguODEyNSAwIDU2Ljk0MTIgMCA1NC42MjVWNDguMzQzOFYyOS41QzAgMjYuMDA2MSAyLjE0NjA5IDIzLjAwOTQgNS4xODIwMyAyMS43NTMxWk0xNi43NSAzMy42ODc1QzE2Ljc1IDMyLjU3NjkgMTYuMzA4OCAzMS41MTE4IDE1LjUyMzUgMzAuNzI2NUMxNC43MzgyIDI5Ljk0MTIgMTMuNjczMSAyOS41IDEyLjU2MjUgMjkuNUMxMS40NTE5IDI5LjUgMTAuMzg2OCAyOS45NDEyIDkuNjAxNDkgMzAuNzI2NUM4LjgxNjE4IDMxLjUxMTggOC4zNzUgMzIuNTc2OSA4LjM3NSAzMy42ODc1QzguMzc1IDM0Ljc5ODEgOC44MTYxOCAzNS44NjMyIDkuNjAxNDkgMzYuNjQ4NUMxMC4zODY4IDM3LjQzMzggMTEuNDUxOSAzNy44NzUgMTIuNTYyNSAzNy44NzVDMTMuNjczMSAzNy44NzUgMTQuNzM4MiAzNy40MzM4IDE1LjUyMzUgMzYuNjQ4NUMxNi4zMDg4IDM1Ljg2MzIgMTYuNzUgMzQuNzk4MSAxNi43NSAzMy42ODc1Wk01NC40Mzc1IDM3Ljg3NUM1NS41NDgxIDM3Ljg3NSA1Ni42MTMyIDM3LjQzMzggNTcuMzk4NSAzNi42NDg1QzU4LjE4MzggMzUuODYzMiA1OC42MjUgMzQuNzk4MSA1OC42MjUgMzMuNjg3NUM1OC42MjUgMzIuNTc2OSA1OC4xODM4IDMxLjUxMTggNTcuMzk4NSAzMC43MjY1QzU2LjYxMzIgMjkuOTQxMiA1NS41NDgxIDI5LjUgNTQuNDM3NSAyOS41QzUzLjMyNjkgMjkuNSA1Mi4yNjE4IDI5Ljk0MTIgNTEuNDc2NSAzMC43MjY1QzUwLjY5MTIgMzEuNTExOCA1MC4yNSAzMi41NzY5IDUwLjI1IDMzLjY4NzVDNTAuMjUgMzQuNzk4MSA1MC42OTEyIDM1Ljg2MzIgNTEuNDc2NSAzNi42NDg1QzUyLjI2MTggMzcuNDMzOCA1My4zMjY5IDM3Ljg3NSA1NC40Mzc1IDM3Ljg3NVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="); --icon-plane: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNjEiIHZpZXdCb3g9IjAgMCA3MCA2MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTU0LjM0MDUgMy4xMzg0M0M1Ny44MjAxIDAuNDUyMTU4IDY2LjE4MDIgLTEuMjMzODcgNjguOTYzNyAyLjM3MTY4QzcxLjgyNjcgNi4wODAyNSA2Ny45OTk3IDEzLjYzODIgNjQuNTIwMSAxNi4zMjQ1TDUyLjY1NjcgMjUuNDgyOUw1Ni40MjA0IDUxLjQ5NzNDNTYuNjM1NyA1Mi45NzUyIDU2LjA0MjQgNTQuNDM2MiA1NC44NzIzIDU1LjMzOTRMNDkuMTU0MyA1OS43NTM3QzQ4LjA3NTggNjAuNTg2MyA0Ni40ODEyIDYwLjE0MDQgNDUuOTY1MSA1OC44NjE4TDM3LjMwMzUgMzcuMzM1NUwyNi44NDQzIDQ1LjQxMDFMMjcuMDI5NyA1NC43MzdDMjcuMDQyNiA1NS4zODQ3IDI2Ljc0NTEgNTYuMDA4OSAyNi4yMzY0IDU2LjQwMTdMMjEuOTYzMSA1OS43MDA2QzIxLjE2OTUgNjAuMzEzMyAyMC4wMzc3IDYwLjE1MTMgMTkuNDI1MyA1OS4zNThDMTkuMzIxOSA1OS4yMjQxIDE5LjIzODkgNTkuMDc0NSAxOS4xNjYgNTguOTE3TDEzLjYxNSA0NS4xMDA4TDEuNjU0IDM2LjIzMjlDMS41MDk5MSAzNi4xMzA0IDEuMzk2MzUgMzYuMDA0NCAxLjI5Mjk3IDM1Ljg3MDRDMC42NzI2NDggMzUuMDY2OSAwLjgyMDU2MiAzMy45MzM0IDEuNjAzOTkgMzMuMzI4Nkw1Ljg3NzI0IDMwLjAyOTZDNi4zODU5NiAyOS42MzY5IDcuMDY1MiAyOS41MDcxIDcuNjg4NTQgMjkuNjgzNUwxNi42NjQ3IDMyLjIyNDFMMjcuMTM0MSAyNC4xNDE3TDguNTAxNyAxMC4zMTI5QzcuMzg1MjggOS40OTc3OSA3LjM1NzUzIDcuODQyMjIgOC40MzYwMSA3LjAwOTYzTDE0LjE1NCAyLjU5NTM0QzE1LjMyNDEgMS42OTIwNiAxNi44OTU2IDEuNDk4MTcgMTguMjYyOSAyLjA3MDMxTDQyLjQ3NzEgMTIuMjk2OUw1NC4zNDA1IDMuMTM4NDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"); --icon-train: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjkiIGhlaWdodD0iNjkiIHZpZXdCb3g9IjAgMCA2OSA2OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTM0LjUgMEMxNS40NDQxIDAgMCAxNS40NDQxIDAgMzQuNVY2MC4zNzVDMCA2NS4xMzIyIDMuODY3NzcgNjkgOC42MjUgNjlIMTQuMjA0M0wyMi44Njk3IDYwLjMzNDZDMTguNTAzMyA1OS45MDMzIDE1LjA5MzggNTYuMjI0MiAxNS4wOTM4IDUxLjc1VjI1Ljg3NUMxNS4wOTM4IDIxLjExNzggMTguOTYxNSAxNy4yNSAyMy43MTg4IDE3LjI1SDQ1LjI4MTJDNTAuMDM4NSAxNy4yNSA1My45MDYyIDIxLjExNzggNTMuOTA2MiAyNS44NzVWNTEuNzVDNTMuOTA2MiA1Ni4yMjQyIDUwLjQ5NjcgNTkuOTAzMyA0Ni4xMzAzIDYwLjMzNDZMNTQuNzk1NyA2OUg2MC4zNzVDNjUuMTMyMiA2OSA2OSA2NS4xMzIyIDY5IDYwLjM3NVYzNC41QzY5IDE1LjQ0NDEgNTMuNTU1OSAwIDM0LjUgMFpNNDguNzA0MyA2OUw0MC4wNzkzIDYwLjM3NUgyOC45MzQyTDIwLjMwOTIgNjlINDguNzA0M1pNMjQuNzk2OSAyNS44NzVDMjMuMDA0NSAyNS44NzUgMjEuNTYyNSAyNy4zMTcgMjEuNTYyNSAyOS4xMDk0VjM5Ljg5MDZDMjEuNTYyNSA0MS42ODMgMjMuMDA0NSA0My4xMjUgMjQuNzk2OSA0My4xMjVINDQuMjAzMUM0NS45OTU1IDQzLjEyNSA0Ny40Mzc1IDQxLjY4MyA0Ny40Mzc1IDM5Ljg5MDZWMjkuMTA5NEM0Ny40Mzc1IDI3LjMxNyA0NS45OTU1IDI1Ljg3NSA0NC4yMDMxIDI1Ljg3NUgyNC43OTY5Wk0zOC44MTI1IDUxLjc1QzM4LjgxMjUgNTAuNjA2MyAzOC4zNTgxIDQ5LjUwOTQgMzcuNTQ5NCA0OC43MDA2QzM2Ljc0MDYgNDcuODkxOSAzNS42NDM3IDQ3LjQzNzUgMzQuNSA0Ny40Mzc1QzMzLjM1NjMgNDcuNDM3NSAzMi4yNTk0IDQ3Ljg5MTkgMzEuNDUwNiA0OC43MDA2QzMwLjY0MTkgNDkuNTA5NCAzMC4xODc1IDUwLjYwNjMgMzAuMTg3NSA1MS43NUMzMC4xODc1IDUyLjg5MzcgMzAuNjQxOSA1My45OTA2IDMxLjQ1MDYgNTQuNzk5NEMzMi4yNTk0IDU1LjYwODEgMzMuMzU2MyA1Ni4wNjI1IDM0LjUgNTYuMDYyNUMzNS42NDM3IDU2LjA2MjUgMzYuNzQwNiA1NS42MDgxIDM3LjU0OTQgNTQuNzk5NEMzOC4zNTgxIDUzLjk5MDYgMzguODEyNSA1Mi44OTM3IDM4LjgxMjUgNTEuNzVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"); --icon-bus: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTkiIGhlaWdodD0iNjgiIHZpZXdCb3g9IjAgMCA1OSA2OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI5LjUgMEM0NS45MzU3IDAgNTkgNC42NzUgNTkgMTAuNjI1VjEyLjc1VjU1LjI1QzU5IDU3LjYwMDggNTcuMTE2NyA1OS41IDU0Ljc4NTcgNTkuNVY2My43NUM1NC43ODU3IDY2LjEwMDggNTIuOTAyNSA2OCA1MC41NzE0IDY4SDQ2LjM1NzFDNDQuMDI2MSA2OCA0Mi4xNDI5IDY2LjEwMDggNDIuMTQyOSA2My43NVY1OS41SDE2Ljg1NzFWNjMuNzVDMTYuODU3MSA2Ni4xMDA4IDE0Ljk3MzkgNjggMTIuNjQyOSA2OEg4LjQyODU3QzYuMDk3NTQgNjggNC4yMTQyOSA2Ni4xMDA4IDQuMjE0MjkgNjMuNzVWNTkuNUMxLjg4MzI2IDU5LjUgMCA1Ny42MDA4IDAgNTUuMjVWMTIuNzVWMTAuNjI1QzAgNC42NzUgMTMuMDY0MyAwIDI5LjUgMFpNOC40Mjg1NyAxN1YzNEM4LjQyODU3IDM2LjM1MDggMTAuMzExOCAzOC4yNSAxMi42NDI5IDM4LjI1SDQ2LjM1NzFDNDguNjg4MiAzOC4yNSA1MC41NzE0IDM2LjM1MDggNTAuNTcxNCAzNFYxN0M1MC41NzE0IDE0LjY0OTIgNDguNjg4MiAxMi43NSA0Ni4zNTcxIDEyLjc1SDEyLjY0MjlDMTAuMzExOCAxMi43NSA4LjQyODU3IDE0LjY0OTIgOC40Mjg1NyAxN1pNMTAuNTM1NyA1My4xMjVDMTEuNjUzNCA1My4xMjUgMTIuNzI1MyA1Mi42NzcyIDEzLjUxNTcgNTEuODgwMkMxNC4zMDYgNTEuMDgzMiAxNC43NSA1MC4wMDIyIDE0Ljc1IDQ4Ljg3NUMxNC43NSA0Ny43NDc4IDE0LjMwNiA0Ni42NjY4IDEzLjUxNTcgNDUuODY5OEMxMi43MjUzIDQ1LjA3MjggMTEuNjUzNCA0NC42MjUgMTAuNTM1NyA0NC42MjVDOS40MTgwMiA0NC42MjUgOC4zNDYxIDQ1LjA3MjggNy41NTU3NiA0NS44Njk4QzYuNzY1NDMgNDYuNjY2OCA2LjMyMTQzIDQ3Ljc0NzggNi4zMjE0MyA0OC44NzVDNi4zMjE0MyA1MC4wMDIyIDYuNzY1NDMgNTEuMDgzMiA3LjU1NTc2IDUxLjg4MDJDOC4zNDYxIDUyLjY3NzIgOS40MTgwMiA1My4xMjUgMTAuNTM1NyA1My4xMjVaTTQ4LjQ2NDMgNTMuMTI1QzQ5LjU4MiA1My4xMjUgNTAuNjUzOSA1Mi42NzcyIDUxLjQ0NDIgNTEuODgwMkM1Mi4yMzQ2IDUxLjA4MzIgNTIuNjc4NiA1MC4wMDIyIDUyLjY3ODYgNDguODc1QzUyLjY3ODYgNDcuNzQ3OCA1Mi4yMzQ2IDQ2LjY2NjggNTEuNDQ0MiA0NS44Njk4QzUwLjY1MzkgNDUuMDcyOCA0OS41ODIgNDQuNjI1IDQ4LjQ2NDMgNDQuNjI1QzQ3LjM0NjYgNDQuNjI1IDQ2LjI3NDcgNDUuMDcyOCA0NS40ODQzIDQ1Ljg2OThDNDQuNjk0IDQ2LjY2NjggNDQuMjUgNDcuNzQ3OCA0NC4yNSA0OC44NzVDNDQuMjUgNTAuMDAyMiA0NC42OTQgNTEuMDgzMiA0NS40ODQzIDUxLjg4MDJDNDYuMjc0NyA1Mi42NzcyIDQ3LjM0NjYgNTMuMTI1IDQ4LjQ2NDMgNTMuMTI1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="); } [data-user-color-scheme=dark-theme] { --color-body: #292624; --color-text-default: #F3F3F3; --color-background-default: #211E1D; --color-background-alt: var(--color-primary-light); --color-neutral-grey: #211E1D; --color-primary: hsl(28, 96%, 48%); --color-primary-light: #211E1D; --color-secondary: hsl(206, 100%, 35%); --color-secondary-light: hsl(206, 100%, 85%); --color-background-default: var(--color-neutral-grey); --color-background-alt: var(--color-primary-light); --color-border: var(--color-text-default); --color-border-alt: #4E3F36; --color-button: var(--color-primary); --color-button-border: var(--color-primary-light); --color-text-alt: #ffffff; --color-text-link: var(--color-primary); --color-text-link-hover: hsl(from var(--color-primary) h s calc(l - 8)); --color-dash: var(--color-text-default); --color-list: var(--color-primary); --color-filter: #3E342E; --color-icon-bg: #3E342E; --icon-globe: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMTUuMSw0NzYuM2MtMjUtMjYuNC01NS41LTY3LjYtNzIuOS0xMjQuM0g1My42YzMwLjMsNjMuOCw5MCwxMTEuMSwxNjEuNSwxMjQuM1pNMjE3LjUsNDI5LjhjMTQsMTguNSwyNy45LDMyLjQsMzguNSw0MS42LDEwLjUtOS4zLDI0LjUtMjMuMSwzOC41LTQxLjYsMTUuNC0yMC4zLDMwLjctNDYuMSw0MS43LTc3LjdoLTE2MC4zYzExLDMxLjYsMjYuMyw1Ny40LDQxLjcsNzcuN2gtLjFaTTE2MCwyNTZjMCwyMy4xLDIuNSw0NC41LDYuOCw2NGgxNzguNGM0LjMtMTkuNSw2LjgtNDAuOSw2LjgtNjRzLTIuNS00NC41LTYuOC02NGgtMTc4LjRjLTQuMywxOS41LTYuOCw0MC45LTYuOCw2NGgwWk0xMzQuMSwxOTJINDEuM2MtNiwyMC4zLTkuMyw0MS44LTkuMyw2NHMzLjIsNDMuNyw5LjMsNjRoOTIuOGMtMy45LTE5LjgtNi4xLTQxLjEtNi4xLTY0czIuMi00NC4yLDYuMS02NFpNMTc1LjgsMTYwaDE2MC4zYy0xMS0zMS42LTI2LjMtNTcuNC00MS43LTc3LjctMTQtMTguNS0yNy45LTMyLjQtMzguNS00MS42LTEwLjUsOS4zLTI0LjUsMjMuMS0zOC41LDQxLjYtMTUuNCwyMC4zLTMwLjcsNDYuMS00MS43LDc3LjdoLjFaTTM3Ny45LDE5MmMzLjksMTkuOCw2LjEsNDEuMSw2LjEsNjRzLTIuMiw0NC4yLTYuMSw2NGg5Mi44YzYtMjAuMyw5LjMtNDEuOCw5LjMtNjRzLTMuMi00My43LTkuMy02NGgtOTIuOFpNNDU4LjUsMTYwYy0zMC4zLTYzLjgtOTAtMTExLjEtMTYxLjUtMTI0LjMsMjUsMjYuNCw1NS41LDY3LjYsNzIuOSwxMjQuM2g4OC42Wk0xNDIuMiwxNjBjMTcuNS01Ni42LDQ3LjktOTcuOSw3Mi45LTEyNC4zLTcxLjYsMTMuMi0xMzEuMiw2MC41LTE2MS41LDEyNC4zaDg4LjZaTTI5Ni45LDQ3Ni4zYzcxLjYtMTMuMiwxMzEuMi02MC40LDE2MS41LTEyNC4zaC04OC42Yy0xNy41LDU2LjYtNDcuOSw5Ny45LTcyLjksMTI0LjNaTTI1Niw1MTJDMTE0LjYyLDUxMiwwLDM5Ny4zOCwwLDI1NlMxMTQuNjIsMCwyNTYsMHMyNTYsMTE0LjYyLDI1NiwyNTYtMTE0LjYyLDI1Ni0yNTYsMjU2WiIvPgo8L3N2Zz4=); } /* DEFAULT: HTML/BODY ---------------------------------------- */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; } body { padding: 0 var(--spacing-m); overflow: hidden; background-color: var(--color-body); color: var(--color-text-default); font-family: var(--basefont); font-feature-settings: liga 1; font-size: var(--step-0); font-weight: var(--font-weight-r); line-height: var(--lineheight-r); -webkit-font-smoothing: auto; } @supports (font-variant-ligatures: common-ligatures) { body { font-feature-settings: normal; font-variant-ligatures: common-ligatures; font-feature-settings: "liga" 1, "tnum" 1; } } ::-moz-selection { background-color: var(--color-base); text-shadow: none; } ::selection { background-color: var(--color-base); text-shadow: none; } ::-webkit-scrollbar { height: 5px; width: 5px; } ::-webkit-scrollbar-thumb { width: 5px; background-color: var(--color-primary); border-radius: 5px; } ::-webkit-scrollbar-track { background-color: var(--color-neutral-grey); border-radius: 0; } /* Selection styles */ ::-moz-selection { background-color: var(--color-primary-light); text-shadow: none; } ::selection { background-color: var(--color-primary-light); text-shadow: none; } /* Images */ img[width], img[height] { max-width: 100%; } img { border-width: 0; content-visibility: auto; vertical-align: middle; height: auto; } /* Iframes */ iframe { width: 100%; } iframe.media-oembed-content { aspect-ratio: 16/9; height: 267px; } .grid.two iframe.media-oembed-content { height: 360px; } /* main */ main { margin-block-end: var(--space-2xl); } /* Links -------------------------------------------*/ a, a:visited { color: var(--color-text-link); text-decoration-color: var(--color-text-link-underline); text-decoration-thickness: var(--text-decoration-thickness); text-underline-offset: 0.2em; text-decoration: underline; transition: all var(--animate-duration-faster) ease; } a:focus { color: var(--color-text-link); outline: var(--color-text-link) dashed 1px; outline-offset: 0.2rem; } a:visited { color: var(--color-text-link); } a:hover { color: var(--color-text-link-hover); filter: saturate(1.25); } a:hover, a:active { outline: 0; } a:link { transition: color var(--animate-duration) ease; } p a { text-decoration: underline; } /* Headings -------------------------------------------*/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: var(--titlefont); line-height: 1.2; hyphens: none; font-weight: var(--font-weight-sbd); font-variation-settings: "wght" var(--font-weight-sbd); text-wrap: balance; } h1, .h1 { font-size: var(--step-7); } h2, .h2 { font-size: var(--step-4); } h3, .h3 { font-size: var(--step-3); } h4, .h4 { font-size: var(--step-2); } h5, .h5 { font-size: var(--step-1); } /*= heading styles */ .section-subtitle { letter-spacing: 1px; font-size: var(--step--2); font-weight: var(--font-weight-m); text-transform: uppercase; margin-block-end: var(--space-xs); } /*= section-title */ .section-title { font-weight: var(--font-weight-sbd); line-height: 1.15; letter-spacing: -1px; margin-block-end: var(--space-l); } @media only screen and (min-width: 768px) { .section-title { margin-block-end: 0; } } /*= section-title sizes*/ .section-title-l { font-size: var(--step-5); margin-block-end: var(--space-xl); } .section-title-xl { font-size: var(--step-6); line-height: 1.1; margin-block-end: var(--space-xl); } /*= section-title--narrow */ .section-title--narrow { max-width: 30ch; hyphens: none; margin-block-end: var(--space-xl); } /*= title flag style */ .heading-flag { inline-size: fit-content; margin-inline: auto; padding-block: 12px 10px; padding-inline: var(--space-xs); background-color: var(--color-icon-bg); border: 0; box-shadow: none; border-radius: 0; font-size: 19px; color: var(--color-white); text-transform: uppercase; font-weight: 500; } .heading-flag--outline { background-color: var(--color-body); color: var(--color-text-default); outline: var(--color-border) var(--border-width-r) solid; text-align: center; } .heading-flag-group:after, .heading-flag-group:before { content: ""; display: block; flex: 1; height: 1px; border-block-end: 2px solid var(--color-border); } .heading-flag-group { display: flex; align-items: center; gap: 40px; } /* Default List Styles ------------------- Applies consistent spacing and resets default list styling for both unordered and ordered lists. */ ul, ol { margin-block: var(--spacing-r); margin-inline: 0; padding-inline-start: 0; } ul li, ol li { line-height: var(--lineheight-s); margin-block-end: var(--space-3xs); } /* List Item Reset --------------- Removes default list markers and sets up a relative positioning context for custom markers. */ ul li, ol li { list-style-type: none; align-items: center; gap: var(--space-s); text-align: left; position: relative; } /* Main Content Overrides ------------------------ Adjusts indentation and spacing for list items within the main content area. */ main ul li { padding-inline-start: var(--space-m); margin-block-end: var(--space-xs); } main ol li { padding-inline-start: var(--space-xl); margin-block-end: var(--space-xs); } /* Ordered List Numbering ------------------------ Resets the counter and styles custom numbered markers for ordered lists. */ ol { counter-reset: num; } ol li { counter-increment: num; } ol li::before { content: counter(num); text-align: center; font-size: var(--step-1); outline: var(--border-width-r) solid; border-radius: 100%; height: 35px; width: 35px; line-height: 1.7; flex-shrink: 0; display: block; left: 0; top: 7px; position: absolute; } /* Unordered List Bullets ------------------------- Styles custom bullet markers for unordered lists. */ ul li:before { content: ""; background: var(--color-list); height: 10px; width: 10px; display: flex; border-radius: var(--border-radius-l); flex-shrink: 0; position: absolute; left: 0; top: 7px; } /* DEFAULT: PARAGRAPHS ---------------------------------------- */ p { line-height: var(--lineheight-r); font-family: var(--basefont); font-size: var(--step-0); orphans: 3; font-weight: var(--font-weight-r); hyphens: none; } .primary-msg p, .primary-msg { line-height: var(--lineheight-s); font-size: var(--step-2); letter-spacing: -0.7px; } .lede p, .lede { font-size: var(--step-1); line-height: var(--lineheight-s); hyphens: none; } .small { font-size: var(--step--1); } /* DEFAULT: PARAGRAPHS ---------------------------------------- */ [data-size=xs] { font-size: var(--step--1); } [data-size=s] { font-size: var(--step-0); } [data-size=r] { font-size: var(--step-1); } [data-size=m] { font-size: var(--step-2); } [data-size=l] { font-size: var(--step-3); } [data-size=xl] { font-size: var(--step-4); } [data-size="2xl"] { font-size: var(--step-5); } [data-size="3xl"] { font-size: var(--step-7); } /*.alt-accent { font-family: var(--font-family-serif); font-style: normal; } .alt-lede { font-style: normal; font-size: var(--font-size-m); } .alt-uppercase { font-size: var(--font-size-s); text-transform: uppercase; }*/ /* Blockquote -------------------------------------------*/ blockquote p { font-size: var(--step-2); } blockquote cite { font-style: normal; } /* system -------------------------------------------*/ .navigation-pages a { text-decoration: none; } .edit-btn a { font-weight: var(--font-weight-r); color: red; margin-bottom: var(--space-xs); display: inline-block; border: 1px solid; padding: 0 9px; font-size: var(--step--1); text-decoration: none; } /* toolbar-menu */ .toolbar-menu .menu-item::before { display: none; } /* ol li::before */ ol.gin-breadcrumb__list li.gin-breadcrumb__item::before { display: none; } /* messages */ div[data-drupal-messages] { margin-block: var(--space-l); } /* logged-in */ /* edit tabs */ #block-default-tabs ul { display: flex; justify-content: center; align-items: center; margin-block: var(--space-l); margin-block-end: var(--space-s); gap: 10px; } #block-default-tabs ul li:before { display: none; } } @layer utilities { /* container -------------------------------------------*/ .container, .taxonomy-page .hero-wrapper, .page-exhibitor-list .hero-wrapper, div[data-drupal-messages], .logged-in main, .region-row { margin-inline: auto; padding-inline: 15px; position: relative; } @media only screen and (min-width: 768px) { .container, .taxonomy-page .hero-wrapper, .page-exhibitor-list .hero-wrapper, div[data-drupal-messages], .logged-in main, .region-row { max-width: var(--max-width); padding-inline: 20px; } } @media only screen and (min-width: 1300px) { .container, .taxonomy-page .hero-wrapper, .page-exhibitor-list .hero-wrapper, div[data-drupal-messages], .logged-in main, .region-row { padding-inline: 20px; } } /* Flow -------------------------------------------*/ .flow > * + * { margin-block-start: var(--space-m); } .flow--section > * + * { margin-block-start: var(--space-xl); } @media only screen and (min-width: 768px) { .flow--section > * + * { margin-block-start: var(--space-3xl); } } /* Grid -------------------------------------------*/ @media only screen and (min-width: 768px) { .grid { display: grid; align-items: start; } } /* modular grid */ @media only screen and (min-width: 768px) { .grid.modular { grid-auto-rows: var(--modular-row-height); } img { object-fit: cover; object-position: center; width: 100%; } } @media only screen and (min-width: 1700px) { .grid.modular { --modular-row-height: 250px; } } /* 2 columns */ .grid.two { grid-template-columns: var(--grid-2); } /* 3 columns */ .grid.three { grid-template-columns: var(--grid-3); } /* 4 columns */ .grid.four { grid-template-columns: var(--grid-4); } /* 5 columns */ .grid.five { grid-template-columns: var(--grid-5); } /* 8 columns */ .grid.eight { grid-template-columns: var(--grid-8); } /* 10 columns */ .grid.ten { grid-template-columns: var(--grid-10); } /* 12 columns */ .grid.twelve { grid-template-columns: var(--grid-12); } /* 15 columns */ .grid.fifteen { grid-template-columns: var(--grid-15); } /* 4 + 5 columns grid */ .grid.grid--4-5 { grid-template-columns: var(--grid-4-5); } /* 3 + 4 columns grid */ .grid.grid--3-4 { grid-template-columns: var(--grid-3-4); } /* Autogrid grid */ .grid.auto-fill { grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); } /* Data containers for grid */ [data-gap=gap-s] { gap: var(--space-s); } [data-gap=gap-m] { gap: var(--space-m); } [data-gap=gap-l] { gap: var(--space-l); } [data-gap=gap-xl] { gap: var(--space-xl); } [data-gap=gap-2xl] { gap: var(--space-2xl); } [data-gap=gap-3xl] { gap: var(--space-3xl); } /* grid flex */ .grid--flex, .sponsors ul, .gallery-section { padding-bottom: var(--space-m); max-width: 100%; block-size: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; display: flex; align-items: stretch; } .grid--flex img, .sponsors ul img, .gallery-section img { object-fit: cover; object-position: center; width: 100%; height: var(--modular-row-height); width: var(--modular-row-height); } @media only screen and (min-width: 768px) { .grid--flex img, .sponsors ul img, .gallery-section img { width: 100%; } } .grid--flex > *, .sponsors ul > *, .gallery-section > * { width: var(--grid--flex-item-size); flex-shrink: 0; } /* Section -------------------------------------------*/ .section { padding-block-start: var(--space-xl); padding-block-end: var(--space-xl); } section.grid.two > div.flow { margin-block-end: var(--space-m); } @media only screen and (min-width: 768px) { section.grid.two > div.flow { margin-block-end: 0; } } section.grid.fifteen:has(.features) > div:first-of-type { grid-column: 1/7; } section.grid.fifteen:has(.features) > div:nth-of-type(2) { grid-column: 7/-1; } /* Dropcap -------------------------------------------*/ .post .flow > p:first-of-type::first-letter, .narrow-content.dropcap > p:first-of-type::first-letter, .dropcap > div:first-of-type p:first-of-type:not(.subscribe-block p):not(.post-category):not(.excerpt):not(.edit-btn):not(.section-subtitle):not(.h3 + p):not(hr + .flow > h2 + p)::first-letter { float: left; font-weight: var(--font-weight-sbd); padding: 0px 20px; font-size: 57px; overflow: hidden; color: var(--color-white); font-style: normal; background: var(--color-icon-bg); height: 40px; width: 40px; display: block; margin-inline-end: 10px; } /* Content list -------------------------------------------*/ .content-list { padding-left: 0; } .content-list li { list-style: none; background: var(--bullet-list-r) no-repeat center left; padding-left: var(--space-l); line-height: 1.6; } /* hr -------------------------------------------*/ [data-function=spacer] { grid-column: 1/-1; margin-block: var(--spacing-l); margin-inline: 0; border-block-start: 0; border: 1px solid red; } /* Scollable-list -------------------------------------------*/ .scrollable-list { display: flex; overflow-x: auto; overflow-y: hidden; } .scrollable-list > * { flex-shrink: 0; margin-bottom: 3rem; width: var(--scrollable-item-width); } .scrollable-list > * + * { margin-inline-start: var(--space-2xl); } @media only screen and (min-width: 600px) { [data-behaviour=scroll-mobile] { max-width: 100%; padding-bottom: var(--spacing-r); block-size: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; display: flex; } } /* List reset -------------------------------------------*/ .l-rs { list-style: none; padding-left: 0; } .l-rs li:before { content: none; } /* Uppercase -------------------------------------------*/ .uppercase { text-transform: uppercase; } /* center -------------------------------------------*/ [data-align=center] { text-align: center; } /* Skip link -------------------------------------------*/ /* Skip link */ .skip-link { position: fixed; top: -30em; } .skip-link:focus { top: 0; } /* Narrow content -------------------------------------------*/ .narrow-content { max-width: 80ch; margin-inline: auto; } .narrow-content + .narrow-content { margin-block-start: var(--space-xl); } /* Visually-hidden -------------------------------------------*/ .visually-hidden { border: 0; clip-path: polygon(0px 0px, 0px 0px, 0px 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); } /* dash element -------------------------------------------*/ .dash::after { content: ""; margin-block-start: var(--space-m); background: var(--color-dash); height: 8px; display: block; width: 90px; } /* two-columns -------------------------------------------*/ @media only screen and (min-width: 768px) { .two-col { column-count: 2; } } /* colors -------------------------------------------*/ /*= text color bg */ .bg-color-text { --color-text-link-hover: var(--color-white); color: var(--color-body); background: var(--color-text-default); fill: var(--color-text-default); } /*= primary color bg */ .bg-color-primary { --color-text: var(--color-white); --color-text-link-hover: var(--color-white); background: var(--color-primary); fill: var(--color-primary); } /*= primary color text */ .text-color-primary { --color-text: var(--color-primary); } /*= primary color bg light */ .bg-color-primary-light { background: var(--color-primary-light); } /*= secondary color bg */ .bg-color-secondary { --color-text: var(--color-white); --color-text-link-hover: var(--color-white); background: var(--color-secondary); } /*= secondary color text */ .text-color-secondary { --color-text: var(--color-secondary); } /*= secondary color bg light */ .bg-color-secondary-light { background: var(--color-secondary-light); fill: var(--color-secondary-light); } /*= neutral grey color bg */ .bg-color-neutral-grey { --color-text: var(--color-neutral-black); --color-text-link-hover: var(--color-neutral-black); background: var(--color-neutral-grey); } /*= neutral grey color text */ .text-color-neutral-grey { --color-text: var(--color-neutral-grey); } /*= neutral black color bg */ .bg-color-neutral-black { --color-text: var(--color-white); --color-text-link-hover: var(--color-white); background: var(--color-neutral-black); } /*= neutral black color text */ .text-color-neutral-black { --color-text: var(--color-neutral-black); } /*= white color text */ .bg-color-white { --color-text: var(--color-text); --color-text-link-hover: var(--color-text); background: var(--color-white); } /*= white color bg */ .text-color-white { --color-text: var(--color-white); } /* spacing -------------------------------------------*/ /* Padding */ .padding-inline-start-3xs { padding-inline-start: var(--space-3xs); } .padding-inline-end-3xs { padding-inline-end: var(--space-3xs); } .padding-block-start-3xs { padding-block-start: var(--space-3xs); } .padding-block-end-3xs { padding-block-end: var(--space-3xs); } .padding-block-3xs { padding-block: var(--space-3xs); } .padding-inline-start-2xs { padding-inline-start: var(--space-2xs); } .padding-inline-end-2xs { padding-inline-end: var(--space-2xs); } .padding-block-start-2xs { padding-block-start: var(--space-2xs); } .padding-block-end-2xs { padding-block-end: var(--space-2xs); } .padding-block-2xs { padding-block: var(--space-2xs); } .padding-inline-start-xs { padding-inline-start: var(--space-xs); } .padding-inline-end-xs { padding-inline-end: var(--space-xs); } .padding-block-start-xs { padding-block-start: var(--space-xs); } .padding-block-end-xs { padding-block-end: var(--space-xs); } .padding-block-xs { padding-block: var(--space-xs); } .padding-inline-start-s { padding-inline-start: var(--space-s); } .padding-inline-end-s { padding-inline-end: var(--space-s); } .padding-block-start-s { padding-block-start: var(--space-s); } .padding-block-end-s { padding-block-end: var(--space-s); } .padding-block-s { padding-block: var(--space-s); } .padding-inline-start-m { padding-inline-start: var(--space-m); } .padding-inline-end-m { padding-inline-end: var(--space-m); } .padding-block-start-m { padding-block-start: var(--space-m); } .padding-block-end-m { padding-block-end: var(--space-m); } .padding-block-m { padding-block: var(--space-m); } .padding-inline-start-l { padding-inline-start: var(--space-l); } .padding-inline-end-l { padding-inline-end: var(--space-l); } .padding-block-start-l { padding-block-start: var(--space-l); } .padding-block-end-l { padding-block-end: var(--space-l); } .padding-block-l { padding-block: var(--space-l); } .padding-inline-start-xl { padding-inline-start: var(--space-xl); } .padding-inline-end-xl { padding-inline-end: var(--space-xl); } .padding-block-start-xl { padding-block-start: var(--space-xl); } .padding-block-end-xl { padding-block-end: var(--space-xl); } .padding-block-xl { padding-block: var(--space-xl); } .padding-inline-start-2xl { padding-inline-start: var(--space-2xl); } .padding-inline-end-2xl { padding-inline-end: var(--space-2xl); } .padding-block-start-2xl { padding-block-start: var(--space-2xl); } .padding-block-end-2xl { padding-block-end: var(--space-2xl); } .padding-block-2xl { padding-block: var(--space-2xl); } .padding-inline-start-3xl { padding-inline-start: var(--space-3xl); } .padding-inline-end-3xl { padding-inline-end: var(--space-3xl); } .padding-block-start-3xl { padding-block-start: var(--space-3xl); } .padding-block-end-3xl { padding-block-end: var(--space-3xl); } .padding-block-3xl { padding-block: var(--space-3xl); } /* Margin */ .margin-inline-start-3xs { margin-inline-start: var(--space-3xs); } .margin-inline-end-3xs { margin-inline-end: var(--space-3xs); } .margin-block-start-3xs { margin-block-start: var(--space-3xs); } .margin-block-end-3xs { margin-block-end: var(--space-3xs); } .margin-block-3xs { margin-block: var(--space-3xs); } .margin-inline-start-2xs { margin-inline-start: var(--space-2xs); } .margin-inline-end-2xs { margin-inline-end: var(--space-2xs); } .margin-block-start-2xs { margin-block-start: var(--space-2xs); } .margin-block-end-2xs { margin-block-end: var(--space-2xs); } .margin-block-2xs { margin-block: var(--space-2xs); } .margin-inline-start-xs { margin-inline-start: var(--space-xs); } .margin-inline-end-xs { margin-inline-end: var(--space-xs); } .margin-block-start-xs { margin-block-start: var(--space-xs); } .margin-block-end-xs { margin-block-end: var(--space-xs); } .margin-block-xs { margin-block: var(--space-xs); } .margin-inline-start-s { margin-inline-start: var(--space-s); } .margin-inline-end-s { margin-inline-end: var(--space-s); } .margin-block-start-s { margin-block-start: var(--space-s); } .margin-block-end-s { margin-block-end: var(--space-s); } .margin-block-s { margin-block: var(--space-s); } .margin-inline-start-m { margin-inline-start: var(--space-m); } .margin-inline-end-m { margin-inline-end: var(--space-m); } .margin-block-start-m { margin-block-start: var(--space-m); } .margin-block-end-m { margin-block-end: var(--space-m); } .margin-block-m { margin-block: var(--space-m); } .margin-inline-start-l { margin-inline-start: var(--space-l); } .margin-inline-end-l { margin-inline-end: var(--space-l); } .margin-block-start-l { margin-block-start: var(--space-l); } .margin-block-end-l { margin-block-end: var(--space-l); } .margin-block-l { margin-block: var(--space-l); } .margin-inline-start-xl { margin-inline-start: var(--space-xl); } .margin-inline-end-xl { margin-inline-end: var(--space-xl); } .margin-block-start-xl { margin-block-start: var(--space-xl); } .margin-block-end-xl { margin-block-end: var(--space-xl); } .margin-block-xl { margin-block: var(--space-xl); } .margin-inline-start-2xl { margin-inline-start: var(--space-2xl); } .margin-inline-end-2xl { margin-inline-end: var(--space-2xl); } .margin-block-start-2xl { margin-block-start: var(--space-2xl); } .margin-block-end-2xl { margin-block-end: var(--space-2xl); } .margin-block-2xl { margin-block: var(--space-2xl); } .margin-inline-start-3xl { margin-inline-start: var(--space-3xl); } .margin-inline-end-3xl { margin-inline-end: var(--space-3xl); } .margin-block-start-3xl { margin-block-start: var(--space-3xl); } .margin-block-end-3xl { margin-block-end: var(--space-3xl); } .margin-block-3xl { margin-block: var(--space-3xl); } /* font-weight -------------------------------------------*/ .font-weight-r { font-weight: var(--font-weight-r); font-variation-settings: "wght" var(--font-weight-r); } .font-weight-m { font-weight: var(--font-weight-m); font-variation-settings: "wght" var(--font-weight-m); } .font-weight-sbd { font-weight: var(--font-weight-sbd); font-variation-settings: "wght" var(--font-weight-sbd); } .font-weight-bd { font-weight: var(--font-weight-bd); font-variation-settings: "wght" var(--font-weight-bd); } /* Radius -------------------------------------------*/ .radius-r { border-radius: var(--border-radius-r); } .radius-l { border-radius: var(--border-radius-l); } .radius-xl { border-radius: var(--border-radius-xl); } /* flex -------------------------------------------*/ .flex { display: flex; gap: var(--space-m); flex-wrap: wrap; } @media only screen and (min-width: 768px) { .flex { flex-direction: row; } } /* object-fit-cover -------------------------------------------*/ .object-fit-cover { object-fit: cover; } /* Full bleed -------------------------------------------*/ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } /* half-section -------------------------------------------*/ .half-section { position: relative; } .half-section > div:first-of-type { grid-column: 1/5; height: 100%; } .half-section > div:nth-of-type(2) { grid-column: 5/-1; } /* aspect-ratio -------------------------------------------*/ .aspect-ratio-16-9 img { aspect-ratio: 16/9; } /* hr -------------------------------------------*/ hr { width: 50%; margin-inline-start: 0; height: var(--border-width-l); background: var(--color-border); border: none; } .separator-special { display: flex; align-items: center; } .grid.two hr, section hr { margin-block-end: var(--space-l); grid-column: 1/-1; width: 50%; } /* navigation-links -------------------------------------------*/ .navigation-links li { border-top: var(--border-width-r) solid var(--color-border); padding-block: var(--space-s); font-size: var(--step--1); } .navigation-links li a { --color-text-link: var(--color-text); text-decoration: none; } /* section-header -------------------------------------------*/ @media only screen and (min-width: 768px) { .section-header { display: grid; grid-template-columns: 200px 1fr; align-items: center; } } @media only screen and (min-width: 768px) { .section-header > * { margin-bottom: 0; } } /* svg graphic -------------------------------------------*/ body.campaign .svg-graphic--top-right svg:not(.block-icon), body.campaign .svg-graphic--top-left svg:not(.block-icon), body.campaign .svg-graphic--bottom-right svg:not(.block-icon), body.campaign .svg-graphic--bottom-left svg:not(.block-icon) { display: none; } .svg-graphic--top-right svg:not(.block-icon) { position: absolute; right: 0; top: 0; } .svg-graphic--top-left svg:not(.block-icon) { position: absolute; left: 0; top: 0; } .svg-graphic--bottom-right svg:not(.block-icon) { position: absolute; right: 0; bottom: 0; } .svg-graphic--bottom-left svg:not(.block-icon) { position: absolute; left: 0; bottom: 0; } .svg-graphic--bottom-left-radius svg:not(.block-icon) { border-bottom-left-radius: var(--border-radius-m); } .svg-graphic--bottom-right-radius svg:not(.block-icon) { border-bottom-right-radius: var(--border-radius-m); } .svg-graphic--top-left-radius svg:not(.block-icon) { border-top-left-radius: var(--border-radius-m); } .svg-graphic--top-right-radius svg:not(.block-icon) { border-top-right-radius: var(--border-radius-m); } } @layer block { /* DEFAULT: HTML/BODY ---------------------------------------- */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; } body { padding: 0 var(--spacing-m); overflow: hidden; background-color: var(--color-body); color: var(--color-text-default); font-family: var(--basefont); font-feature-settings: liga 1; font-size: var(--step-0); font-weight: var(--font-weight-r); line-height: var(--lineheight-r); -webkit-font-smoothing: auto; } @supports (font-variant-ligatures: common-ligatures) { body { font-feature-settings: normal; font-variant-ligatures: common-ligatures; font-feature-settings: "liga" 1, "tnum" 1; } } ::-moz-selection { background-color: var(--color-base); text-shadow: none; } ::selection { background-color: var(--color-base); text-shadow: none; } ::-webkit-scrollbar { height: 5px; width: 5px; } ::-webkit-scrollbar-thumb { width: 5px; background-color: var(--color-primary); border-radius: 5px; } ::-webkit-scrollbar-track { background-color: var(--color-neutral-grey); border-radius: 0; } /* Selection styles */ ::-moz-selection { background-color: var(--color-primary-light); text-shadow: none; } ::selection { background-color: var(--color-primary-light); text-shadow: none; } /* Images */ img[width], img[height] { max-width: 100%; } img { border-width: 0; content-visibility: auto; vertical-align: middle; height: auto; } /* Iframes */ iframe { width: 100%; } iframe.media-oembed-content { aspect-ratio: 16/9; height: 267px; } .grid.two iframe.media-oembed-content { height: 360px; } /* main */ main { margin-block-end: var(--space-2xl); } /* Buttons -------------------------------------------*/ /*= call-to-action regular */ .cta-btn a, .cta-btn a:visited, button[type=submit] { color: var(--color-button-text); background-color: var(--color-button); outline: var(--border-width-l) solid var(--color-button-border); text-transform: uppercase; padding-block: var(--space-xs) var(--space-xs); padding-inline: var(--space-s); border-radius: var(--border-radius-r); text-align: center; display: inline-block; cursor: pointer; line-height: 1.2; text-decoration: none; transition: var(--animate-duration) cubic-bezier(0.19, 1, 0.22, 1); font-weight: var(--font-weight-bd); position: relative; font-size: var(--step-0); border: none; } .cta-btn a:hover, .cta-btn a:focus { scale: var(--scale-up); } .cta-btn a:focus { --color-button-border: var(--color-button); outline-offset: 15px; outline-color: rgba(230, 30, 40, 0); top: 2px; } .cta-btn.cta-btn--full a { display: block; } /*= call-to-action primary */ .cta-btn.primary a { --color-button: var(--color-secondary); --color-button-border: var(--color-secondary-light); } /*= call-to-action outline */ .cta-btn.outline a { --color-button: transparent; --color-button-border: var(--color-primary); --color-button-text: var(--color-primary); --border-width-l: var(--border-width-r); --font-weight-bd: var(--font-weight-m); } /*= call-to-action inline */ .cta-btn-inline::after { content: ""; height: var(--border-width-l); width: 80px; background: var(--color-text-default); display: block; margin-block-start: var(--space-2xs); } .cta-btn-inline a::after { content: ""; background: var(--color-button) var(--icon-link-arrow) no-repeat 9px; width: 40px; height: 40px; display: block; border-radius: var(--border-radius-l); background-size: 22px; flex-shrink: 0; } .cta-btn-inline a { --color-text-link: var(--color-text); display: flex; align-items: center; gap: var(--space-m); font-weight: var(--font-weight-sbd); text-decoration: none; font-size: var(--step-0); transition: all var(--animate-duration-faster) ease; } .cta-btn-inline a:hover { gap: var(--space-l); } /*= call-to-action small */ .cta-btn-small { background: var(--color-button); color: var(--color-button-text); padding: 5px 15px; text-align: center; text-decoration: none; font-weight: var(--font-weight-bd); } /* SVG ON CTA ---------------------------------------- */ .cta-btn :has(.svg-inline--fa) svg { font-size: 1.8rem; } .cta-btn > a:has(.svg-inline--fa) { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); } /* PRINT-BTN ---------------------------------------- */ .print-btn { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; } .print-btn a { --color-text-link: var(--text-color-default); text-decoration: none; font-weight: var(--font-weight-sbd); } /* Page header -------------------------------------------*/ /* HEADER ---------------------------------------- */ .page-header { --color-button: var(--color-secondary); --color-button-border: var(--color-secondary-light); padding-inline: var(--space-s); display: flex; margin-inline: auto; flex-direction: column; row-gap: var(--space-m); align-items: center; transition: all var(--animate-duration-faster) ease; position: relative; } @media screen and (min-width: 1279px) { .page-header { padding-block-start: 0; } } @media only screen and (min-width: 768px) { .page-header { display: grid; } } .page-header .grid.twelve { position: relative; gap: var(--space-m); padding-block-end: var(--space-l); width: 100%; } @media only screen and (min-width: 768px) { .page-header .grid.twelve { padding-block-end: 0; grid-template-rows: 1fr; row-gap: 0; } } @media only screen and (min-width: 1024px) { .page-header .grid.twelve { display: grid; margin-block-end: 0; } } .page-header .logo { grid-column: 1/4; align-self: center; grid-row: 1; margin-block: var(--space-s); } .page-header .logo img { transition: all var(--animate-duration-faster) ease; margin-inline: auto; width: 150px; margin-block-end: var(--space-s); object-fit: contain; } @media only screen and (min-width: 768px) { .page-header .logo img { margin: 0; margin-block-end: 0; } } @media screen and (min-width: 1279px) { .page-header .logo img { width: 180px; grid-column: 1/3; } } .page-header .primary-menu { grid-column: 1/-1; height: 100%; width: 100%; grid-row: 2; } @media screen and (min-width: 1279px) { .page-header .primary-menu { grid-row: 1; grid-column: 4/10; } } .page-header .cta-btn { align-self: center; justify-self: flex-end; grid-column: 10/-1; grid-row: 1; } .page-header .cta-btn a { font-size: var(--step--1); font-size: 15px; } .page-header .header-right-items { grid-row: 1; grid-column: 9/-1; align-self: center; display: flex; gap: var(--space-s); justify-content: center; align-items: center; flex-wrap: wrap; margin-block-start: var(--space-m); position: relative; z-index: 1; } @media only screen and (min-width: 768px) { .page-header .header-right-items { gap: var(--space-s); justify-content: end; flex-wrap: nowrap; margin-block-start: 0; position: absolute; right: 20px; top: 3px; } } @media screen and (min-width: 1279px) { .page-header .header-right-items { padding-block: 0; grid-column: 10/-1; top: 10px; } } .page-header .event-details { grid-column: 4/10; margin-block-end: 0; border: 0; text-align: center; padding: 0; } @media only screen and (min-width: 768px) { .page-header .event-details { text-align: left; } } .page-header .container, .page-header .taxonomy-page .hero-wrapper, .taxonomy-page .page-header .hero-wrapper, .page-header .page-exhibitor-list .hero-wrapper, .page-exhibitor-list .page-header .hero-wrapper, .page-header div[data-drupal-messages], .page-header .logged-in main, .logged-in .page-header main { width: 100%; } .language-switcher-language-url, .contextual-region.language-switcher-language-url { position: absolute !important; right: 20rem; top: 119px; } /* SKINNY HEADER ---------------------------------------- */ @media only screen and (min-width: 768px) { .skinny { position: fixed; top: 0; left: 0; right: 0; background: var(--color-body); z-index: 999; border-block-end: 1px solid var(--color-border); } .skinny .cta-btn a { font-size: var(--step--2); } .skinny .primary-menu > ul > li { padding-block: 30px; } .skinny .primary-menu > ul > li > a, .skinny .primary-menu > ul > li > .tbm-link-container > a { font-size: var(--step--1); } .skinny .logo { margin-block: 0; } .skinny .logo img { width: 160px; margin: 0; margin-block: var(--space-2xs); } } @media only screen and (min-width: 768px) and (min-width: 1279px) { .skinny .logo img { margin-block: 0; } } @media only screen and (min-width: 768px) { .skinny .language-switcher fieldset { padding: var(--space-s) var(--space-s); font-size: var(--step--2); } .skinny .language-switcher .dropbutton-toggle::after { bottom: unset; top: 8px; right: 0px; } .skinny .header-right-items { top: -3px; } } /* footer -------------------------------------------*/ .footer { margin-block-end: var(--space-m); } .footer .copyright { margin-block-start: var(--space-m); text-align: center; border-block-end: var(--border-width-r) solid var(--color-border); border-block-start: var(--border-width-r) solid var(--color-border); padding: var(--space-xs); font-size: var(--step-0); } .footer .copyright p { font-size: var(--step--1); } .footer .copyright img { width: 250px; margin: auto; margin-block: var(--space-s); height: 50px; } /*.footer .copyright a {*/ /* color: var(--color-text-default);*/ /* text-decoration: none;*/ /*}*/ /*.footer .copyright a:hover {*/ /* text-decoration: underline;*/ /* color: var(--color-text-link-hover);*/ /* filter: saturate(1.25);*/ /*}*/ /* Forms -------------------------------------------*/ form { margin: 0 0 var(--space-m) 0; } [type=email], [type=tel], [type=text], textarea { -webkit-appearance: none; appearance: none; display: inline-block; margin: 0 0 var(--space-s); padding: var(--space-xs); width: 100%; border-radius: var(--border-radius-r); box-shadow: none; box-sizing: border-box; font-size: var(--step--1); } textarea { min-height: 12vh; resize: vertical; } /* LABEL ---------------------------------------- */ label { display: inline-block; font-size: var(--step-0); font-weight: var(--font-weight-m); margin-block-end: var(--space-2xs); } /* FORM ITEM ---------------------------------------- */ .form-item select, .form-item [type=email], .form-item [type=tel], .form-item [type=text], .form-item textarea { border-radius: var(--border-radius-r); border: 2px solid var(--color-border-alt); background: var(--color-body); color: var(--color-text-default); font-size: var(--step--1); } .form-item select, .form-item input { height: 45px; } .form-item:has([type=checkbox]) label { margin: 0; font-weight: var(--font-weight-r); } .form-item + .form-item { margin-block-start: var(--space-3xs); } /* SELECT ---------------------------------------- */ select { -webkit-appearance: none; appearance: none; padding-inline: var(--space-xs); } .form-item--category { position: relative; } .form-item--category select { width: 100%; } .form-item--category::after, .dropbutton-toggle::after { content: ""; justify-self: end; width: 0.8em; height: 0.5em; background-color: var(--color-text-link); clip-path: polygon(100% 0%, 0 0%, 50% 100%); position: absolute; bottom: 18px; right: 18px; } /* CHECKBOX ---------------------------------------- */ input[type=checkbox] + label { position: relative; cursor: pointer; padding: 0; } input[type=checkbox] { position: absolute; opacity: 0; } input[type=checkbox] { box-sizing: border-box; } input[type=checkbox] + label:before { content: ""; display: inline-block; vertical-align: text-top; width: 20px; height: 20px; background: var(--color-body); border: 2px solid var(--color-border); float: left; margin-bottom: var(--space-s); margin-right: var(--space-xs); position: relative; top: 5px; } input[type=checkbox]:checked + label:before { background: var(--color-text-default); border: 2px solid var(--color-text-default); } input[type=checkbox]:checked + label:after { content: ""; position: absolute; left: 5px; top: 14px; background: var(--color-white); width: 2px; height: 2px; box-shadow: 2px 0 0 var(--color-body), 4px 0 0 var(--color-body), 4px -2px 0 var(--color-body), 4px -4px 0 var(--color-body), 4px -6px 0 var(--color-body), 4px -8px 0 var(--color-body); transform: rotate(45deg); } .required label:after { content: "*"; color: red; } /* FIELDSET ---------------------------------------- */ fieldset { border: 1px solid; border-radius: var(--border-radius-r); padding: var(--space-s) var(--space-m); } fieldset legend { border: var(--border-width-r) solid; padding-inline: var(--space-s); padding-block: var(--space-3xs); text-transform: uppercase; font-size: var(--step--1); background: var(--color-body); margin-block-end: 0; font-weight: var(--font-weight-m); } /*-------------------------------------------------- Special List Container --------------------------------------------------*/ .special-list { position: relative; border-inline-start-width: var(--border-width-r); border-inline-start-style: solid; border-inline-color: var(--color-border-alt); padding-block-end: var(--space-s); /*-------------------------------------------------- Special List Header --------------------------------------------------*/ /*-------------------------------------------------- List Item Styles --------------------------------------------------*/ } .special-list .special-list-header { position: relative; padding-inline-start: var(--space-s); display: flex; flex-direction: column; gap: 2px; } .special-list .special-list-header h3 { display: flex; align-items: center; gap: 20px; position: relative; inset-inline-start: -28px; line-height: 1.4; } .special-list .special-list-header h3:before { content: ""; width: 15px; height: 15px; background: var(--color-text-default); display: block; border-radius: var(--border-radius-l); position: relative; inset-inline-start: 4px; flex-shrink: 0; } @media only screen and (min-width: 768px) { .special-list .special-list-header h3:before { inset-inline-start: 0px; } } .special-list .special-list-header p { padding-inline-start: 8px; } .special-list li { position: relative; inset-inline-start: 25px; padding-inline-end: var(--space-s); padding-inline-start: 0; } @media only screen and (min-width: 1024px) { .special-list li { padding-inline-end: 0; } } .special-list li:not(:last-child) { margin-block-end: var(--space-2xs); } .special-list li:before { position: absolute; inset-inline-start: -30px; flex-shrink: 0; } /*-------------------------------------------------- Special List Pseudo-element --------------------------------------------------*/ .special-list:before { content: ""; height: 1px; width: 12px; background: var(--color-border-alt); display: block; position: absolute; bottom: 0; left: -6px; } /*-------------------------------------------------- Hero Base Styles & Variables --------------------------------------------------*/ .hero { --hero-wrapper-bg: var(--color-background-default); --hero-wrapper-size: contain; --hero-box-bg: var(--color-white); --hero-title-color: var(--color-text-default); --hero-link-filter: var(--color-filter); --hero-box-cta-color: var(--color-primary); --hero-box-cta-color-text: var(--color-white); --hero-box-cta-1-color: var(--color-text); --hero-box-cta-1-color-text: var(--color-white); --hero-box-cta-2-color: var(--color-white); --hero-box-cta-2-color-text: var(--color-text-default); --color-button: var(--color-text-default); --color-button-border: var(--color-text-default); --border-radius-r: 1rem; --color-dash: var(--color-primary); background: var(--color-neutral-grey) var(--hero-bg) no-repeat right; background-size: var(--hero-wrapper-size); } .hero h1 { color: var(--hero-title-color); line-height: 1; } .hero .dash::after { margin-left: auto; margin-right: auto; } @media only screen and (min-width: 768px) { .hero .dash::after { margin-left: 0; } } .hero .hero-wrapper { background: var(--hero-wrapper-bg); gap: var(--space-m); justify-content: center; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--space-l); padding-inline: var(--space-l); grid-column: 1/-1; } @media only screen and (min-width: 768px) { .hero .hero-wrapper { text-align: left; align-items: flex-start; } } .hero .cta-btn { padding-inline-start: 0; width: 100%; } @media only screen and (min-width: 768px) { .hero .cta-btn { width: initial; } } .hero .cta-btn a { display: block; width: 100%; } @media only screen and (min-width: 768px) { .hero .cta-btn a { display: inline-block; } } .hero svg { display: none; transition: all var(--animate-duration-faster) ease; } @media only screen and (min-width: 1024px) { .hero svg { display: block; } } /*-------------------------------------------------- Dark Theme Adjustments for Hero --------------------------------------------------*/ [data-user-color-scheme=dark-theme] .hero { --hero-box-bg: var(--color-background-default); } /*-------------------------------------------------- HERO BOX - Center Variant --------------------------------------------------*/ .hero-box.hero-box--center { position: relative; display: flex; flex-direction: column; align-items: center; border-radius: var(--border-radius-m); padding: var(--space-xl); } .hero-box.hero-box--center .primary-msg { max-width: 50ch; margin-inline: auto; } .hero-box.hero-box--center ul { display: flex; gap: var(--space-s); bottom: -30px; flex-wrap: wrap; justify-content: center; } @media only screen and (min-width: 768px) { .hero-box.hero-box--center ul { position: absolute; bottom: -30px; flex-wrap: nowrap; } } .hero-box.hero-box--center svg { width: 100px; } @media only screen and (min-width: 768px) { .hero-box.hero-box--center svg { width: unset; } } .hero-box.hero-box--center ul li { padding-inline-start: 0; } @media only screen and (min-width: 768px) { .hero-box.hero-box--center:has(ul) .primary-msg { margin-block-end: var(--space-l); } } /*-------------------------------------------------- General HERO BOX Styles --------------------------------------------------*/ .hero-box { background: var(--color-background-default); padding: var(--space-l); border-radius: var(--border-radius-m); position: relative; } @media only screen and (min-width: 768px) { .hero-box { grid-template-columns: 1fr 2fr; } } .hero-box h1 { font-size: var(--step-5); margin-block-start: 0; } /*-------------------------------------------------- HERO-1 Specific Styles --------------------------------------------------*/ #hero-1 { --hero-title-color: var(--color-primary); background: var(--hero-wrapper-bg); } @media only screen and (min-width: 768px) { #hero-1 .hero-wrapper { grid-column: 1/8; grid-row: 1; padding: var(--space-l); } } #hero-1 svg { grid-row: 1; grid-column: 9/-1; } #hero-1 .cls-4 { fill: var(--color-primary); } #hero-1 .cls-7 { fill: var(--text-color); } #hero-1 .cls-3 { fill: var(--color-background-alt); } [data-user-color-scheme=dark-theme] #hero-1 .hero-wrapper { --color-button: var(--color-button-alt); --color-button-border: var(--color-button-alt); } /*-------------------------------------------------- Graphics Positioning --------------------------------------------------*/ @media only screen and (min-width: 768px) { .hero--box .svg-graphic--top-right svg:not(.block-icon) { right: -30px; } } /*-------------------------------------------------- HERO-2 Specific Styles --------------------------------------------------*/ #hero-2 { --hero-bg: url("../img/hero/hero-2-bg.png"); --hero-wrapper-bg: hsl(0deg 0% 100% / 90%); --hero-wrapper-size: cover; --hero-title-color: var(--color-primary); } @media only screen and (min-width: 1300px) { #hero-2 .hero-wrapper { grid-column: 2/7; } } [data-user-color-scheme=dark-theme] #hero-2 .hero-wrapper { --color-button: var(--color-button-alt); --color-button-border: var(--color-button-alt); } [data-user-color-scheme=dark-theme] #hero-2 .hero-wrapper .primary-msg { color: var(--color-button-alt); } /*-------------------------------------------------- HERO-3 Specific Styles --------------------------------------------------*/ #hero-3 { --hero-title-color: var(--color-primary); } #hero-3 .hero-wrapper { grid-row: 1/3; height: 100%; align-items: center; row-gap: var(--space-l); } @media only screen and (min-width: 1024px) { #hero-3 .hero-wrapper { grid-column: 2/4; } } #hero-3 img:nth-of-type(4) { grid-column: 4; } #hero-3 .flow { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } #hero-3 .dash::after { margin-left: auto; margin-right: auto; } #hero-3 img { display: none; height: 100%; } @media only screen and (min-width: 1024px) { #hero-3 img { display: block; } } [data-user-color-scheme=dark-theme] #hero-3 .hero-wrapper { --color-button: var(--color-button-alt); --color-button-border: var(--color-button-alt); } /*-------------------------------------------------- HERO BOX - Global Adjustments & Links --------------------------------------------------*/ .hero--box { max-width: var(--hero-box-size); margin-left: auto; margin-right: auto; } .hero--box h1 { font-size: var(--step-5); margin-block-start: 0; z-index: 1; position: relative; } @media only screen and (min-width: 1300px) { .hero--box h1 { font-size: var(--step-6); } } .hero--box .hero-inner { display: flex; flex-direction: column; border-top-left-radius: var(--border-radius-m); border-bottom-left-radius: var(--border-radius-m); outline: 1px solid var(--color-border); background: var(--hero-box-bg); gap: 0; } @media only screen and (min-width: 768px) { .hero--box .hero-inner { display: grid; gap: var(--space-m); } } .hero--box .hero-inner > div:first-child { padding: var(--space-l); grid-column: 1/9; position: relative; } .hero--box .dash::after { margin-left: 0; } .hero--box .hero-link { position: relative; height: 100%; } .hero--box .hero-link a::before { opacity: 0.8; content: ""; display: block; background: var(--hero-link-filter); position: absolute; z-index: 1; width: 100%; height: 100%; transition: all var(--animate-duration-faster) ease; border-bottom-left-radius: var(--border-radius-m); } @media only screen and (min-width: 768px) { .hero--box .hero-link a::before { border-bottom-left-radius: 0; } } .hero--box .hero-link a:hover::before { opacity: 0; } .hero--box .hero-link a { text-decoration: none; } .hero--box .hero-link-label { background: var(--hero-box-cta-color); color: var(--hero-box-cta-color-text); display: flex; align-items: center; padding: var(--space-s); text-transform: uppercase; font-weight: var(--font-weight-sbd); text-decoration: none; z-index: 1; position: relative; font-size: var(--step-0); justify-content: space-between; gap: var(--space-l); } .hero--box .hero-links { display: grid; grid-template-columns: 1fr auto; height: 100%; grid-column: 9/-1; border-top: 1px solid var(--color-border); } @media only screen and (min-width: 768px) { .hero--box .hero-links { border-top: none; } } .hero--box .hero-links li { margin-block-end: 1px; padding-inline-start: 0; } .hero--box .hero-links li:nth-of-type(1) .hero-link-label { --hero-box-cta-color: var(--hero-box-cta-1-color); --hero-box-cta-color-text: var(--hero-box-cta-1-color-text); } .hero--box .hero-links li:nth-of-type(2) .hero-link-label { --hero-box-cta-color: var(--hero-box-cta-2-color); --hero-box-cta-color-text: var(--hero-box-cta-2-color-text); } .hero--box .hero-link--inline a::before, .hero--box .hero-link--inline img { display: none; } .hero--box .hero-inline-links { writing-mode: vertical-rl; height: 100%; background: var(--color-border); } .hero--box .hero-inline-links li { display: block; } .hero--box .hero-feartured-link img { object-fit: cover; height: 100%; border-bottom-left-radius: var(--border-radius-m); } .hero--box .hero-feartured-link .hero-link-label { position: absolute; bottom: 0; width: 100%; border-bottom-left-radius: var(--border-radius-m); } @media only screen and (min-width: 768px) { .hero--box .hero-feartured-link .hero-link-label { border-bottom-left-radius: 0; } } /* HERO-BOX Center Adjustments */ .hero-box.hero-box--center h1 { font-size: var(--step-5); text-transform: uppercase; position: relative; background: var(--color-background-default); } @media only screen and (min-width: 1024px) { .hero-box.hero-box--center h1 { font-size: var(--step-6); } } .hero-box.hero-box--center svg { width: 80px; height: 80px; } @media only screen and (min-width: 1024px) { .hero-box.hero-box--center svg { width: 120px; height: 120px; } } /*-------------------------------------------------- HERO-BOX-LIVE Styles --------------------------------------------------*/ .hero--box-live { --color-list: var(--color-neutral-grey); --color-information-bg: var(--color-text-default); } .hero--box-live h1 { font-size: var(--step-5); } .hero--box-live .hero-inner > div:first-child { grid-column: 1/6; grid-row: 1; } .hero--box-live .grid.two { grid-column: 6/-5; grid-row: 1; height: 100%; padding-inline-end: var(--space-l); padding-block-end: var(--space-l); margin-inline-start: var(--space-l); } @media only screen and (min-width: 768px) { .hero--box-live .grid.two { padding-block-start: var(--space-l); margin-inline-start: 0; } } .hero--box-live .two-col { grid-column: 1/-1; } .hero--box-live .cta-btn a { font-size: var(--step--1); } .hero--box-live .information-block { grid-column: 12/-1; } [data-user-color-scheme=dark-theme] .hero--box { --hero-box-cta-2-color: var(--hero-box-bg); --hero-box-cta-1-color: var(--hero-box-bg); --color-information-bg: var(--color-icon-bg); --color-list: var(--color-white); } /*-------------------------------------------------- HERO-SECTION VIDEO Styles --------------------------------------------------*/ @media only screen and (min-width: 768px) { .hero-section { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; } } .hero-section .hero-wrapper { position: relative; overflow: hidden; background: url("/assets/img/hero/hero-wrapper-bg.jpg") bottom; background-size: cover; } @media only screen and (min-width: 768px) { .hero-section .hero-wrapper { height: 520px; margin-block-end: 10rem; width: 100%; } } @media only screen and (min-width: 1000px) { .hero-section .hero-wrapper { margin-block-end: 13rem; } } @media only screen and (min-width: 1200px) { .hero-section .hero-wrapper { margin-block-end: 13rem; } } @media only screen and (min-width: 1500px) { .hero-section .hero-wrapper { margin-block-end: 15rem; } } .hero-section .hero-wrapper video { display: none; } @media only screen and (min-width: 768px) { .hero-section .hero-wrapper video { width: 100%; display: block; object-fit: cover; height: 100%; object-position: center; } } .hero-section .hero-wrapper::before { content: ""; background: linear-gradient(to bottom, transparent -60%, var(--color-neutral-black) 80%); transition: all var(--animate-duration-faster) ease; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.7; } .hero-section .hero-wrapper figure { display: none; } @media only screen and (min-width: 768px) { .hero-section .hero-wrapper figure { display: block; } } .hero-section .hero--box { margin-block-end: var(--space-xl); } @media only screen and (min-width: 768px) { .hero-section .hero--box { position: absolute; z-index: 2; top: 230px; } } @media only screen and (min-width: 900px) { .hero-section .hero--box { top: 280px; } } @media only screen and (min-width: 1024px) { .hero-section .hero--box { padding-inline: 15px; top: 330px; max-width: var(--max-width); } } /* Spacing for adjacent hero-wrapper elements */ .hero-wrapper + div, .hero-wrapper + section { margin-block-start: var(--space-2xl); } /* Adjust hero-wrapper bottom margin when containing ul */ @media only screen and (min-width: 1024px) { .hero-wrapper:has(ul) { margin-block-end: var(--space-3xl); } } /*-------------------------------------------------- Campaign Overrides --------------------------------------------------*/ .campaign .hero-section .hero-wrapper::before { --color-neutral-black: transparent; } /* About -------------------------------------------*/ #about-section header { grid-column: 1/8; padding-block-end: var(--space-m); } #about-section figure { grid-column: 8/-1; } #about-section .about-content { grid-column: 1/-1; grid-template-columns: subgrid; } #about-section .section-title { margin-block-end: 0; } #about-section .about-content div:nth-of-type(1) { grid-column: 1/8; padding-block-end: var(--space-m); } @media only screen and (min-width: 768px) { #about-section .about-content div:nth-of-type(1) { margin-block-start: 0; padding-block-end: 0; } } #about-section .about-content div:nth-of-type(2) { grid-column: 8/14; } @media only screen and (min-width: 768px) { #about-section .about-content div:nth-of-type(2) { border-left: 1px solid; padding-left: var(--space-l); } } #about-section .about-content div:nth-of-type(3) { grid-column: 14/-1; align-self: end; justify-self: end; display: none; } @media only screen and (min-width: 768px) { #about-section .about-content div:nth-of-type(3) { display: block; } } .video-paragraph { position: relative; } .video-paragraph p { line-height: var(--lineheight-s); padding-top: var(--space-l); border-inline-start-width: var(--border-width-r); border-inline-start-style: solid; border-inline-color: var(--color-border); position: relative; z-index: 1; hyphens: none; font-size: var(--step-1); padding-inline-start: var(--space-l); padding-inline-end: var(--space-l); } @media only screen and (min-width: 1024px) { .video-paragraph p { padding-top: var(--space-xl); padding-inline-start: var(--space-xl); padding-inline-end: var(--space-xl); } } .video-paragraph p:before { content: ""; display: block; position: absolute; top: -8px; left: -4px; width: 8px; height: 8px; border-radius: var(--border-radius-l); outline: 1.5px solid; } .about--2 .grid.fifteen > div:nth-of-type(1) { grid-column: 1/8; position: relative; z-index: 1; grid-column: 1/8; } .about--2 .grid.fifteen > div:nth-of-type(2) { grid-column: 8/-1; } /*-------------------------------------------------- Statistics Section --------------------------------------------------*/ #statistics { position: relative; } #statistics .heading-flag-group { --color-border: transparent; position: relative; top: 22px; margin-block-end: 0; } /*-------------------------------------------------- Statistic Items Container --------------------------------------------------*/ .statistic-items { gap: var(--space-2xl); background: var(--color-background-default); padding-inline: var(--space-l); border-top-right-radius: var(--border-radius-r); border-top-left-radius: var(--border-radius-r); padding-block-end: var(--space-2xs); padding-block-start: var(--space-l); } @media only screen and (min-width: 768px) { .statistic-items { border-bottom: var(--border-width-xl) var(--color-border) solid; } } @media only screen and (min-width: 1024px) { .statistic-items { justify-content: space-between; } } .statistic-items .statistic-item { flex-direction: column; align-items: flex-start; align-self: flex-start; gap: var(--space-2xs); flex-shrink: 0; } .statistic-items .statistic-item:not(:first-child) { border-inline-start: var(--border-width-m) solid var(--color-text-default); padding-inline-start: var(--space-l); justify-content: center; } .statistic-items .statistic-item-data { display: flex; align-items: baseline; gap: var(--space-2xs); } .statistic-items p { text-transform: uppercase; font-size: var(--step--1); margin-block-end: var(--space-3xs); } .statistic-items .number { font-size: var(--step-6); font-weight: var(--font-weight-bd); line-height: 1; font-family: var(--titlefont); font-variation-settings: "wght" var(--font-weight-sbd); } .statistic-items .label { font-weight: var(--font-weight-sbd); } /*-------------------------------------------------- Statistics Box Spacing --------------------------------------------------*/ .statistics + .statistics-box { margin-block-start: 0; } /* benefits-card-item -------------------------------------------*/ .benefits-card-item { --color-dash: var(--color-text-alt); --auto-grid-min-size: 22rem; position: relative; width: var(--auto-grid-min-size); padding: var(--space-m); min-height: 500px; display: flex; align-items: flex-end; flex-shrink: 0; background-size: cover; } .benefits-card-item .benefits-card-item-inner { position: relative; z-index: 2; } .benefits-card-item h3 { margin-block-end: var(--space-m); color: var(--color-text-alt); } .benefits-card-item .benefits-card-item-number { font-size: var(--step-7); font-weight: var(--font-weight-sbd); line-height: 1; color: var(--color-white); font-family: var(--titlefont); font-variation-settings: "wght" var(--font-weight-sbd); } .benefits-card-item p { color: var(--color-text-alt); } .benefits-card-item img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .benefits-card-item::before { content: ""; background: linear-gradient(to bottom, transparent -80%, var(--color-filter) 70%); transition: all var(--animate-duration-faster) ease; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .benefits-card-item:hover::before { background: linear-gradient(to bottom, transparent -80%, var(--color-primary) 70%); } /* box paragraph -------------------------------------------*/ .box-paragraph { background: var(--color-background-default); display: flex; padding: var(--space-l); line-height: var(--lineheight-s); border-radius: var(--border-radius-r); height: 100%; margin-block-end: var(--space-xl); } @media only screen and (min-width: 768px) { .box-paragraph { padding: var(--space-xl); margin-block-end: 0; } } .box-paragraph p { font-size: var(--step-2); line-height: var(--lineheight-s); font-weight: var(--font-weight-m); } /* who-will-you-meet -------------------------------------------*/ #who-will-you-meet header { grid-row: 1; grid-column: 1/9; } #who-will-you-meet header + svg { display: none; } @media only screen and (min-width: 768px) { #who-will-you-meet header + svg { display: block; } } #who-will-you-meet > div { grid-column: 2/-8; grid-row: 2; margin-block-end: var(--space-xl); } @media only screen and (min-width: 768px) { #who-will-you-meet > div { margin-block-end: 0; } } #who-will-you-meet figure { grid-column: 9/-1; grid-row: 2; } #who-will-you-meet figure img { border-radius: var(--border-radius-m); } #who-will-you-meet figure .heading-flag-group::after, #who-will-you-meet figure .heading-flag-group::before { --color-border: transparent; } #who-will-you-meet figure .heading-flag-group { position: relative; bottom: -20px; z-index: 1; margin-block-end: 0; } @media only screen and (min-width: 1024px) { #who-will-you-meet svg { display: block; align-self: center; grid-column: 13/-1; width: 236px; justify-content: end; } } #who-will-you-meet .cta-btn { margin-block-end: var(--space-xl); } /* GRAPH DESIGN ---------------------------------------- */ #graph-statistics svg { width: 100%; background: var(--color-background-default); padding: var(--space-xl); padding-block-start: var(--space-2xl); border-radius: var(--border-radius-m); } [data-user-color-scheme=dark-theme] #graph-statistics #bar-2 { fill: var(--color-border-alt); } /* Gallery -------------------------------------------*/ .gallery-section { grid-template-rows: auto auto; margin-block-start: var(--space-l); align-items: center; gap: var(--space-s); } @media only screen and (min-width: 768px) { .gallery-section { margin-block: 0; } } .gallery-section img { transition: all var(--animate-duration-faster) ease; } .gallery-section img:hover { opacity: 0.5; cursor: pointer; } .gallery-section-content img { width: 220px; height: 220px; } .posts .gallery-section { display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { .posts .gallery-section { display: grid; } } .flow:has(.gallery-section) { margin: 0; } /* GALLERY SECTION ---------------------------------------- */ .gallery-section { margin-inline: auto; } @media only screen and (min-width: 768px) { .gallery-section { display: grid; grid-template-areas: "img-1 img-2 img-3 img-3 img-4" "img-5 img-6 img-3 img-3 img-7"; } } .full-bleed.gallery-section { margin-left: calc(50% - 50vw); max-width: 100vw; } @media only screen and (min-width: 1024px) { .full-bleed.gallery-section { margin-block-start: var(--space-3xl); } } @media only screen and (min-width: 1800px) { .full-bleed.gallery-section { max-width: 100%; margin-left: inherit; } } .posts-sections + .gallery-section { margin-block-start: var(--space-2xl); } @media only screen and (min-width: 1024px) { .posts-sections + .gallery-section { margin-block-start: var(--space-3xl); } } /* GALLERY SECTION FULL ---------------------------------------- */ @media only screen and (min-width: 768px) { .gallery-section--full { display: grid; grid-template-areas: "img-1 img-2 img-3 img-3 img-4" "img-5 img-6 img-3 img-3 img-7" "img-8 img-8 img-9 img-10 img-11" "img-8 img-8 img-12 img-13 img-14" "img-15 img-16 img-17 img-18 img-18" "img-19 img-20 img-21 img-18 img-18"; } } .gallery-section.full-bleed { display: none; } @media only screen and (min-width: 768px) { .gallery-section.full-bleed { display: grid; } } @media only screen and (min-width: 1024px) { .gallery-section.full-bleed { height: auto; } } /* TURN INDIVIDUAL ITEMS TO GRID AREAS ---------------------------------------- */ .gallery-section figure:nth-of-type(1) { grid-area: img-1; } .gallery-section figure:nth-of-type(2) { grid-area: img-2; } .gallery-section figure:nth-of-type(3) { grid-area: img-3; align-self: end; } .gallery-section figure:nth-of-type(4) { grid-area: img-4; } .gallery-section figure:nth-of-type(5) { grid-area: img-5; } .gallery-section figure:nth-of-type(6) { grid-area: img-6; } .gallery-section figure:nth-of-type(7) { grid-area: img-7; } .gallery-section figure:nth-of-type(8) { grid-area: img-8; } .gallery-section figure:nth-of-type(9) { grid-area: img-9; } .gallery-section figure:nth-of-type(10) { grid-area: img-10; } .gallery-section figure:nth-of-type(11) { grid-area: img-11; } .gallery-section figure:nth-of-type(12) { grid-area: img-12; } .gallery-section figure:nth-of-type(13) { grid-area: img-13; } .gallery-section figure:nth-of-type(14) { grid-area: img-14; } .gallery-section figure:nth-of-type(15) { grid-area: img-15; } .gallery-section figure:nth-of-type(16) { grid-area: img-16; } .gallery-section figure:nth-of-type(17) { grid-area: img-17; } .gallery-section figure:nth-of-type(18) { grid-area: img-18; } .gallery-section figure:nth-of-type(19) { grid-area: img-19; } .gallery-section figure:nth-of-type(20) { grid-area: img-20; } .gallery-section figure:nth-of-type(21) { grid-area: img-21; } /* GALLERY CONTENT ---------------------------------------- */ .hero-wrapper + .gallery-section.grid.five img { height: 100%; } .gallery-section.gallery-section-content { grid-template-rows: auto auto auto; padding: 0; grid-template-areas: "img-1 img-2 img-3" "img-4 img-5 img-6"; } .gallery-section-content figure { margin-block-end: var(--space-s); } @media only screen and (min-width: 768px) { .gallery-section-content figure { margin-block-end: 0; } } /* GALLERY PAGE SECTIONS */ .posts-sections .gallery-section { padding-bottom: 0; } @media only screen and (min-width: 768px) { .posts-sections:nth-of-type(2) .gallery-section { display: grid; grid-template-areas: "img-1 img-1 img-2 img-3 img-4" "img-1 img-1 img-5 img-6 img-7"; } } @media only screen and (min-width: 768px) { .posts-sections:nth-of-type(3) .gallery-section { display: grid; grid-template-areas: "img-1 img-2 img-3 img-4 img-4" "img-5 img-6 img-7 img-4 img-4"; } } /* Two-column gallery aside fixes features */ @media only screen and (min-width: 768px) { .gallery-section:has(.features) { grid-template-areas: inherit; } } /* Steps CTA Component -------------------- Styles for the call-to-action steps section. */ .steps-cta { background: var(--color-background-alt); position: relative; padding: var(--space-m); padding-block-start: var(--space-xl); border-radius: var(--border-radius-m); margin-block-start: var(--space-3xl); margin-block-end: var(--space-xl); } @media only screen and (min-width: 768px) { .steps-cta { padding: var(--space-xl); } } .steps-cta div:nth-of-type(1) { text-align: center; margin-block-end: var(--space-l); } @media only screen and (min-width: 768px) { .steps-cta div:nth-of-type(1) { margin-block-end: 0; } } .steps-cta ol { position: relative; } .steps-cta ol li { font-weight: var(--font-weight-sbd); margin-block-end: var(--space-xs); font-size: var(--step-1); display: flex; } @media only screen and (min-width: 1024px) { .steps-cta ol li { font-size: 1.5rem; } } .steps-cta .grid { align-items: center; } @media only screen and (min-width: 768px) { .steps-cta .grid { grid-template-columns: auto auto; } } .steps-cta ol li::before { background: var(--color-icon-bg); color: var(--color-text-alt); font-size: var(--step-3); outline: none; height: 60px; width: 60px; line-height: 1.8; font-weight: var(--font-weight-sbd); display: flex; align-items: center; justify-content: center; position: static; } .steps-cta svg { position: absolute; transform: translate(-50%); top: -60px; width: 120px; } @media only screen and (min-width: 1024px) { .steps-cta svg { width: 180px; } } .steps-cta h2 { margin-inline: auto; font-size: var(--step-4); margin-block-start: 0; } @media only screen and (min-width: 1024px) { .steps-cta h2 { max-width: 15ch; } } .steps-cta .cta-btn a { font-size: var(--step-1); display: block; } @media only screen and (min-width: 768px) { .steps-cta .cta-btn a { display: inline-block; } } /* SVG graphic override for bottom-right placement */ .steps-cta.svg-graphic--bottom-right svg:not(.block-icon) { top: unset; transform: unset; border-bottom-right-radius: var(--border-radius-m); } /* Dark theme adjustments for the Steps CTA component */ [data-user-color-scheme=dark-theme] .steps-cta { --color-icon-bg: var(--color-white); } [data-user-color-scheme=dark-theme] .steps-cta ol li::before, [data-user-color-scheme=dark-theme] .steps-cta svg { --color-text-alt: var(--color-background-alt); } /* feedback-box -------------------------------------------*/ .feedback-box { display: flex; justify-content: space-between; padding: var(--space-s); background: var(--color-background-default); align-items: center; } .feedback-box p { font-weight: var(--font-weight-m); } .feedback-box div { display: flex; align-items: center; gap: var(--space-2xs); } /* Sponsors -------------------------------------------*/ .sponsor-item { justify-content: center; border: var(--color-border-alt) var(--border-width-m) solid; padding: var(--space-2xs); background: var(--color-white); flex-direction: column; gap: 0; } .sponsor-item img { margin-block-start: var(--space-m); margin-block-end: var(--space-m); height: 75px; } .sponsor-item-stand { background: var(--color-background-default); padding: var(--space-3xs); width: 100%; text-align: center; text-transform: uppercase; } .sponsor-item-stand p { font-size: var(--step--1); } .half-section .sponsor-item img { height: auto; } /* SPONSOR LIST SCROLLABLE MOBILE ---------------------------------------- */ @media only screen and (min-width: 768px) { .sponsors ul { display: grid; padding-bottom: 0; } } /* SPONSORS SECTION ---------------------------------------- */ @media only screen and (min-width: 768px) { .grid.fifteen + #sponsors { margin-block: var(--space-3xl); } } #sponsors hr { width: 100%; grid-column: 1/-8; margin-block-end: var(--space-l); } /* SPONSORS ROWS LIST ---------------------------------------- */ .sponsors-list-rows { display: flex; justify-content: center; flex-direction: column; text-align: center; row-gap: var(--space-2xs); } .sponsors-list-rows ul { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (min-width: 768px) { .sponsors-list-rows ul li { width: 25%; } } @media only screen and (min-width: 1024px) { .sponsors-list-rows ul li { width: 20%; } } .sponsors-list-rows h4 { margin-block-end: var(--space-m); } .sponsors img { height: auto; padding-inline: var(--space-xs); } /* related events -------------------------------------------*/ .related-events ul { padding-bottom: 0; } @media only screen and (min-width: 1024px) { .related-events ul { justify-content: center; } } .related-events li { --grid--flex-item-size: 14rem; flex-shrink: 0; background: var(--color-white); padding: var(--space-xs); margin: 0; } /* audience-block -------------------------------------------*/ .audience { position: relative; } .audience > div:first-of-type h2::after { content: ""; background: var(--color-neutral-grey); width: 400px; height: 400px; display: block; position: absolute; left: 80px; border-radius: var(--border-radius-l); z-index: -1; } @media only screen and (min-width: 768px) { .audience > div:first-of-type h2::after { top: -80px; } } .audience > div:first-of-type { margin-block-end: var(--space-l); } @media only screen and (min-width: 768px) { .audience + .gallery-section { margin-block-start: var(--space-3xl); } } /*-------------------------------------------------- Footer Links Container --------------------------------------------------*/ .footer-links { --color-text-link: var(--color-text-default); position: relative; background: var(--color-background-default); grid-template-columns: 1fr 3fr; padding: var(--space-m); border-radius: var(--border-radius-m); } @media only screen and (min-width: 768px) { .footer-links { padding: var(--space-l); } } .footer-links > .flow { margin-block-end: var(--space-l); } @media only screen and (min-width: 768px) { .footer-links > .flow { margin-block-end: 0; } } .footer-links img { max-width: 170px; } @media only screen and (min-width: 768px) { .footer-links img { max-width: 240px; } } .footer-links svg { right: 0; left: unset; transform: scaleX(-1); } @media only screen and (min-width: 768px) { .footer-links svg { transform: unset; right: unset; left: 0; } } /*-------------------------------------------------- Footer Links Inner Grid --------------------------------------------------*/ .footer-links-inner { grid-template-rows: auto auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "footer-links-inner-1 footer-links-inner-2" "footer-links-inner-3 footer-links-inner-4" "footer-links-inner-5 footer-links-inner-6"; } @media only screen and (min-width: 1300px) { .footer-links-inner { grid-template-columns: repeat(3, 1fr); grid-template-areas: "footer-links-inner-1 footer-links-inner-2 footer-links-inner-3" "footer-links-inner-4 footer-links-inner-5 footer-links-inner-6"; } } .footer-links-inner .dash::after { margin-block-start: var(--space-xs); height: var(--border-width-l); width: 50px; } .footer-links-inner h2 { margin-block-end: var(--space-m); } .footer-links-inner a { text-decoration: none; font-size: 1rem; } .footer-links-inner ul li { font-size: 1rem; } /*-------------------------------------------------- Footer Links Inner Div Styling --------------------------------------------------*/ @media only screen and (min-width: 768px) { .footer-links-inner div { border-inline-start: solid var(--color-border) var(--border-width-m); padding-inline: var(--space-m); height: 100%; } } @media only screen and (min-width: 1024px) { .footer-links-inner div { padding-inline-end: 0; } } /*-------------------------------------------------- Grid Area Assignments & Specific Overrides --------------------------------------------------*/ .footer-links-inner div:nth-of-type(1) { grid-area: footer-links-inner-1; padding-block-end: var(--space-s); } .footer-links-inner div:nth-of-type(2) { grid-area: footer-links-inner-2; padding-block-end: var(--space-s); } .footer-links-inner div:nth-of-type(3) { grid-area: footer-links-inner-3; padding-block-end: var(--space-s); } .footer-links-inner div:nth-of-type(4) { grid-area: footer-links-inner-4; padding-block-end: var(--space-s); } .footer-links-inner div:nth-of-type(5) { grid-area: footer-links-inner-5; padding-block-end: var(--space-s); } .footer-links-inner div:nth-of-type(6) { grid-area: footer-links-inner-6; } .footer-links-inner div:nth-of-type(6) ul li { padding-inline-start: var(--space-s); } .footer-links-inner div:nth-of-type(6) ul li:last-of-type { padding-inline-start: 0; padding-block-start: var(--space-s); } .footer-links-inner div:nth-of-type(6) ul li:last-of-type:before { display: none; } /* speaker-item -------------------------------------------*/ #speakers { position: relative; } #speakers svg { display: none; } @media only screen and (min-width: 1024px) { #speakers svg { display: block; } } .speakers { --auto-grid-min-size: 16rem; --grid--flex-item-size: 20rem; column-count: 1; } .speaker-item { border-top-left-radius: 500px; border-top-right-radius: 500px; background: var(--color-background-default); padding: var(--space-s); border-bottom-left-radius: var(--border-radius-r); border-bottom-right-radius: var(--border-radius-r); transition: all var(--animate-duration-faster) ease; margin-block-end: var(--space-l); height: 100%; width: 300px; margin: auto; margin-block-end: var(--space-xl); } @media only screen and (min-width: 768px) { .speaker-item { margin-block-end: 0; width: 100%; } } .speaker-item h3, .speaker-item p { font-size: var(--step--1); margin-block-end: var(--space-3xs); } .speaker-item .speaker-item-inner { padding-block-start: var(--space-m); } .speaker-item img { transition: all var(--animate-duration-faster) ease; border-radius: 500px; } .speaker-item:hover { --color-background-default: var(--color-primary-light); cursor: pointer; } .speaker-item:hover img { transform: rotateZ(11deg); } /* SPEAKER MINI ---------------------------------------- */ .speaker-item-mini figure img { border-radius: var(--border-radius-l); } /* Features -------------------------------------------*/ #features { position: relative; } div:has(.dash) + .features { margin-block-start: var(--space-l); } .features { --auto-grid-min-size: 25rem; } .feature-item { --space-m: var(--space-s); margin-block-end: var(--space-l); } @media only screen and (min-width: 768px) { .feature-item { margin-block-end: 0; } } .feature-item figure { border: var(--border-width-xl) var(--color-border-alt) solid; display: flex; padding: var(--space-xl); justify-content: center; align-items: center; background: var(--color-white); } .feature-item figure img { width: 100%; } .feature-item h3 { font-size: var(--step-2); padding-block-start: var(--space-3xs); } .feature-item .feature-item-category + h3 { margin-block-start: 0; } .feature-item .feature-item-category { text-transform: uppercase; font-size: var(--step--1); margin-block-start: 2rem; } .feature-item .feature-item-box { background: var(--color-background-default); padding: var(--space-m); } .feature-item:last-of-type { margin-block-end: 0; } .feature-item.feature-item--images figure { padding: 0; display: block; } .post-article-type .post-item--featured { margin-block-end: var(--space-l); } @media only screen and (min-width: 1024px) { .post-article-type .post-item--featured { margin-block-end: 0; } } /* feature-item features landing */ .feature-items .feature-item { margin-block-end: var(--space-s); } .feature-item.inline-item { max-width: 470px; padding-bottom: var(--space-xl); flex-grow: unset; height: auto; box-sizing: border-box; } .features .sponsor-item img { height: 110px; } /* tab-item -------------------------------------------*/ .tab-item:has(::before) { border: 1px solid red; } .tab-item { position: relative; } .tab-item:hover { cursor: pointer; } .tab-item:hover summary { color: var(--color-text-link); } .tab-item summary { background: var(--color-background-default); padding-inline: 75px; font-weight: var(--font-weight-m); text-transform: uppercase; padding-block: var(--space-xs); margin-inline-start: 10px; border-radius: var(--border-radius-m); } .tab-item summary:hover, .tab-item[open] summary { transition: all var(--animate-duration-faster) ease; background: var(--color-background-alt); color: var(--color-text-link); } .tab-item[open] summary { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .tab-item::before { content: ""; width: 70px; height: 70px; background: var(--icon-tab) var(--color-icon-bg) no-repeat 18px; display: inline-block; border-radius: 100px; position: absolute; top: -5px; left: 0; transition: all var(--animate-duration-faster) ease; background-size: 35px; } .tab-item:hover::before { --color-text-default: var(--color-text-link); } .tab-item-inner { border: 1px solid var(--color-background-default); padding-inline: var(--space-l); padding-block: var(--space-s); margin-inline-start: 30px; } .tab-item-inner p { margin-block-end: var(--space-s); } .tab-item.shuttle { --icon-tab: var(--icon-bus); } .tab-item.train { --icon-tab: var(--icon-train); } .tab-item.car { --icon-tab: var(--icon-car); } .tab-item.air { --icon-tab: var(--icon-plane); } /*-------------------------------------------------- Checklist Box Container --------------------------------------------------*/ .checklist-box { position: relative; display: grid; padding: var(--space-xl); border-radius: var(--border-radius-m); background: var(--color-background-default); margin-block-start: var(--space-l); /*-------------------------------------------------- Heading & Typography --------------------------------------------------*/ /*-------------------------------------------------- Ordered List Styling --------------------------------------------------*/ /*-------------------------------------------------- SVG Icon Positioning --------------------------------------------------*/ /*-------------------------------------------------- First Child Container Adjustments --------------------------------------------------*/ /*-------------------------------------------------- CTA & Button Styling --------------------------------------------------*/ } @media only screen and (min-width: 768px) { .checklist-box { grid-template-columns: auto 1fr; margin-block-start: var(--space-2xl); } } @media only screen and (min-width: 1024px) { .checklist-box { margin-block-start: var(--space-xl); } } @media only screen and (min-width: 768px) { .checklist-box h2 { max-width: 14ch; } } .checklist-box p { font-size: var(--step-2); } .checklist-box ol li { margin-block-end: var(--space-2xs); font-size: var(--step-0); display: flex; padding-inline: 0; } .checklist-box ol li::before { font-size: var(--step-0); height: 40px; width: 40px; line-height: 2; position: static; } .checklist-box svg { right: 35px; left: unset; bottom: 65px; } @media only screen and (min-width: 768px) { .checklist-box svg { bottom: 70px; left: 55px; right: unset; } } .checklist-box > div:first-of-type { display: flex; flex-direction: column-reverse; justify-content: space-between; gap: var(--space-m); } @media only screen and (min-width: 768px) { .checklist-box > div:first-of-type { flex-direction: column; } } .checklist-box .cta-btn a, .checklist-box .cta-btn a:visited, .checklist-box button[type=submit] { color: var(--color-text-link); background-color: inherit; outline: inherit; text-transform: inherit; padding-block: inherit; padding-inline: inherit; border-radius: inherit; text-align: inherit; display: inherit; line-height: inherit; text-decoration: underline; transition: inherit; font-weight: inherit; position: inherit; font-size: inherit; border: inherit; } .checklist-box .cta-btn a:hover, .checklist-box .cta-btn a:focus { scale: inherit; } /*-------------------------------------------------- Quick Links Component --------------------------------------------------*/ .quick-links { display: flex; flex-direction: column; justify-content: center; align-items: center; /*-------------------------------------------------- Quick Links List Styling --------------------------------------------------*/ } @media only screen and (min-width: 768px) { .quick-links { margin-block-start: var(--space-2xl); } } .quick-links ul { flex-wrap: wrap; justify-content: center; } .quick-links ul li { padding: 0; } /* Event details -------------------------------------------*/ .event-details { border: var(--color-border) var(--border-width-r) solid; text-align: center; padding: var(--space-2xs); margin-block-end: var(--space-m); } .event-details-target span:not(:last-of-type):after { content: "|"; padding-inline-start: var(--space-2xs); padding-inline-end: var(--space-3xs); } /*-------------------------------------------------- Navigation Styles --------------------------------------------------*/ @media only screen and (min-width: 768px) { .primary-menu { display: flex; gap: var(--space-m); justify-content: center; align-items: center; border-block-start: 1px solid var(--color-border); } } @media screen and (min-width: 1279px) { .primary-menu { border-block-start: none; } } .primary-menu > ul { display: flex; flex-direction: column; gap: var(--space-3xs); } @media only screen and (min-width: 768px) { .primary-menu > ul { flex-direction: row; gap: var(--space-s); } } @media screen and (min-width: 1279px) { .primary-menu > ul { gap: 0; } } .primary-menu > ul > li { gap: var(--space-l); margin: 0; display: block; position: unset; } @media only screen and (min-width: 768px) { .primary-menu > ul > li { padding-block: 35px; padding-inline: var(--space-xs); } } @media screen and (min-width: 1279px) { .primary-menu > ul > li { padding-block: 45px; padding-inline: var(--space-xs); } } .primary-menu > ul > li > a, .primary-menu > ul > li > .tbm-link-container > a { --color-text-link: var(--color-white); padding: var(--space-s); text-decoration: none; font-weight: var(--font-weight-sbd); width: 100%; display: block; background: var(--color-text-default); font-size: var(--step--1); position: relative; } @media only screen and (min-width: 768px) { .primary-menu > ul > li > a, .primary-menu > ul > li > .tbm-link-container > a { --color-text-link: var(--color-text-default); } } @media only screen and (min-width: 768px) { .primary-menu > ul > li > a, .primary-menu > ul > li > .tbm-link-container > a { display: inline-block; background: initial; padding: 0; font-size: 18px; } } .primary-menu > ul > li > a::after, .primary-menu > ul > li > .tbm-link-container > a::after { content: ""; justify-self: end; width: 0.8em; height: 0.5em; background-color: var(--color-white); clip-path: polygon(100% 0%, 0 0%, 50% 100%); position: absolute; bottom: 22px; right: 18px; } @media only screen and (min-width: 768px) { .primary-menu > ul > li > a::after, .primary-menu > ul > li > .tbm-link-container > a::after { display: none; } } .primary-menu > ul > li:hover > .tbm-link-container > a { --color-text-link-hover: var(--color-white); background: var(--color-primary); } @media only screen and (min-width: 768px) { .primary-menu > ul > li:hover > .tbm-link-container > a { --color-primary: transparent; --color-white: var(--color-text-default); } } @media only screen and (max-width: 767px) { .primary-menu > ul li.primary-menu-link-open > a, .primary-menu > ul li.primary-menu-link > a:hover { background: var(--color-primary); color: var(--color-white); } } .primary-menu li.primary-menu-link-open > .tbm-link-container > a, .primary-menu li.primary-menu-link-open:hover > .tbm-link-container > a { --color-text-default: var(--color-primary); } @media only screen and (min-width: 1024px) { .primary-menu li.primary-menu-link-open > .tbm-link-container > a, .primary-menu li.primary-menu-link-open:hover > .tbm-link-container > a { --color-text-default: inherit; } } .primary-menu li:hover, .primary-menu-link-open { background: var(--color-background-default); } .primary-menu-link-open a::after { --color-text-default: var(--color-white); } /*-------------------------------------------------- Alt Themes Dropdown --------------------------------------------------*/ .alt-themes { position: absolute; padding: 1rem; z-index: 9999; background: var(--color-background-default); left: 0; } .alt-themes li { position: relative; } .alt-themes label { position: absolute; left: 4px; top: -4px; } .alt-themes label:hover { cursor: pointer; } .alt-themes li::before { display: none; } .alt-themes li:first-child { display: none; } /*-------------------------------------------------- DEV Menu --------------------------------------------------*/ .tbm-link-container { display: flex; gap: var(--space-2xs); } .tbm-button { display: none; } .navigation-pages { padding-block: var(--space-m); } .navigation-pages h3 { margin-block-end: var(--space-3xs); } .tbm-submenu-toggle { display: none; } /* updated-section -------------------------------------------*/ .updated-section { text-align: center; border-bottom: var(--color-border) var(--border-width-r) solid; padding-block-end: var(--space-m); margin-block-start: var(--space-m); } .updated-section p { font-size: var(--step-1); } /* Connect -------------------------------------------*/ .connect { margin-block-end: var(--space-xl); margin-block-start: var(--space-xl); } .connect .flow { margin-block-end: var(--space-m); } @media only screen and (min-width: 768px) { .connect .flow { margin-block-end: 0; } } @media only screen and (min-width: 768px) { .connect > div:nth-of-type(1) { display: flex; align-items: center; } } @media only screen and (min-width: 768px) { .connect > div:nth-of-type(1) > div:nth-of-type(1) { border-inline-end: var(--border-width-r) solid var(--color-border); padding-inline-end: var(--space-l); margin-inline-end: var(--space-l); } } @media only screen and (min-width: 768px) { .connect > div:nth-of-type(1) > div { width: 50%; } } .connect > div:nth-of-type(1) > div:nth-of-type(2) { --border-radius-r: 1rem; display: flex; flex-direction: column; row-gap: var(--space-xs); } @media only screen and (min-width: 768px) { .connect > div:nth-of-type(1) > div:nth-of-type(2) { padding-inline: var(--space-xl); } } .connect > div:nth-of-type(1) .cta-btn.outline a { --color-button-border: var(--color-text-default); --color-button-text: var(--color-text-default); } /* box-cta -------------------------------------------*/ #box-cta { display: flex; flex-direction: column; justify-content: space-between; background: var(--color-background-default); padding-inline: var(--space-l); text-align: center; padding-block: var(--space-s); gap: var(--space-m); } @media only screen and (min-width: 768px) { #box-cta { flex-direction: row; align-items: center; text-align: left; } } #box-cta p { font-size: var(--step-1); font-weight: var(--font-weight-m); } #box-cta .cta-btn a { display: block; } @media only screen and (min-width: 768px) { #box-cta .cta-btn a { display: inline-block; } } /* testimonial -------------------------------------------*/ .testimonial { grid-column: 3/-3; background: var(--color-background-default); position: relative; margin-inline: auto; } @media only screen and (min-width: 768px) { .testimonial { padding-block: var(--space-3xs); padding-block-end: var(--space-l); } } .testimonial p { font-size: var(--step-2); line-height: 1.3; margin-block-end: var(--space-s); font-weight: var(--font-weight-m); } .testimonial svg { display: none; } @media only screen and (min-width: 768px) { .testimonial svg { display: inline-block; position: absolute; left: -75px; } } .testimonial-block { padding: var(--space-l); } .testimonial-block blockquote { margin: 0; } @media only screen and (min-width: 768px) { .testimonial-block { align-items: center; display: grid; margin-inline-start: var(--space-2xl); padding: var(--space-m) var(--space-xl); } } @media only screen and (min-width: 768px) { .testimonial-block .cta-btn { grid-column: 2; position: absolute; bottom: -23px; } } /* two-column-section -------------------------------------------*/ #two-column-section div:nth-of-type(1) { grid-column: 1/8; position: relative; } #two-column-section div:nth-of-type(1) svg { transform: scaleX(-1); width: 120px; } #two-column-section div:nth-of-type(2) { grid-column: 4/-1; } @media only screen and (min-width: 1024px) { #two-column-section div:nth-of-type(2) { grid-column: 8/-1; } } /* top-countries -------------------------------------------*/ .top-countries { padding-block-start: var(--space-m); } @media only screen and (min-width: 768px) { .top-countries { padding-block-end: var(--space-m); } } .top-countries h4 { margin-block-end: var(--space-s); } .top-countries ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .top-countries li { outline: 1px solid var(--color-border); font-size: var(--step--1); padding-block: var(--space-3xs); padding-inline: var(--space-xs); font-weight: var(--font-weight-r); border-radius: var(--border-radius-r); gap: var(--space-2xs); } /* Faq section -------------------------------------------*/ #faq-section .heading-flag-group { grid-column: 1/-1; } #faq-section .flow { grid-column: 1/-1; } @media only screen and (min-width: 1024px) { #faq-section .flow { grid-column: 4/-4; margin: 0; } } #faq-section .tab-item::before { content: none; } #faq-section .tab-item summary { padding-inline: var(--space-s); margin-inline-start: 0; } #faq-section .tab-item-inner { margin-inline-start: 0; } /* post-item -------------------------------------------*/ .post-item { --grid--flex-item-size: 26rem; background: var(--color-background-default); margin-block-end: var(--space-m); } .post-item h3 { margin-block-end: var(--space-s); } .post-item a { --color-text-link: var(--text-color-default); text-decoration: none; } .post-item img { width: 100%; height: auto; transition: all var(--animate-duration-faster) ease; } .post-item > div { padding: var(--space-m); } .post-item svg { position: absolute; bottom: 35px; } .post-item .excerpt { font-size: var(--step--1); } .post-item .post-category { text-transform: uppercase; font-size: var(--step--1); } .post-item:not(.post-item--video) > div { min-height: 330px; position: relative; } @media only screen and (min-width: 768px) { .post-item:not(.post-item--video) > div { min-height: 430px; } } @media screen and (min-width: 1279px) { .post-item:not(.post-item--video) > div { min-height: 330px; } } .post-item:hover { cursor: pointer; background: var(--color-background-alt); } .post-item:hover img { opacity: 0.5; } .post-item:hover svg, .post-item:hover a:before { transition: all var(--animate-duration-faster) ease; scale: var(--scale-up); transform: rotateZ(360deg); } /* POST ITEM Featured ---------------------------------------- */ .post-item--featured .excerpt { font-size: var(--step-1); } .post-item--featured > div { height: 400px; } /* POST ITEM FOR VIDEO ---------------------------------------- */ .post-item--video h3 { margin-block-end: var(--space-3xs); } .post-item--video .video-player a::before { background: var(--color-primary) var(--icon-play-video) 19px no-repeat; bottom: -28px; top: unset; right: 30px; left: unset; height: 55px; width: 55px; background-size: 20px; } /* POST ITEM SLIM ---------------------------------------- */ .post-item--slim { background: transparent; padding: var(--space-xs); } .post-item--slim h3 { margin-block-end: 0; font-weight: 500; } /* Post item list GRID VIEW */ .views-exposed-form + .posts { margin-block-start: var(--space-xs); } /* posts section -------------------------------------------*/ .posts-sections { row-gap: var(--space-m); } .posts-sections h2 { grid-column: 1/-1; grid-row: 1; } .posts-sections p { grid-column: 2/-1; grid-row: 1; } @media only screen and (min-width: 768px) { .posts-sections p { margin: 0; } } .posts-sections .posts { grid-column: 1/-1; } /* event-feature-card -------------------------------------------*/ .event-feature-card { display: flex; justify-content: space-between; background: var(--color-background-default); border-top-left-radius: var(--border-radius-m); border-bottom-left-radius: var(--border-radius-m); align-items: center; margin-block-end: var(--space-l); } .event-feature-card h2 { margin-block-end: var(--space-2xs); } .event-feature-card > div { padding-block: var(--space-s); padding-inline-start: var(--space-s); } .event-feature-card figure { border: var(--border-width-l) solid var(--color-border-alt); } /* video-player -------------------------------------------*/ .video-player { position: relative; margin-block-start: var(--space-xl); } @media only screen and (min-width: 768px) { .video-player { margin-block-start: 0; } } .video-player a:hover:before { scale: var(--scale-up); transform: rotateZ(360deg); } .video-player a::before { transition: all var(--animate-duration-faster) ease; content: ""; background: var(--color-primary) var(--icon-play-video) 17px no-repeat; display: block; height: 50px; width: 50px; position: absolute; z-index: 1; border-radius: 100%; background-size: 20px; top: unset; bottom: 10px; left: 10px; } @media only screen and (min-width: 768px) { .video-player a::before { height: 70px; width: 70px; top: 170px; left: -35px; background: var(--color-primary) var(--icon-play-video) 23px no-repeat; background-size: 28px; bottom: unset; } } .video-player--square::after { content: ""; background: var(--color-neutral-grey); width: 250px; height: 250px; display: block; position: absolute; top: 80px; left: -105px; border-radius: var(--border-radius-l); z-index: -1; } .video-player--circle { width: 400px; margin-inline: auto; padding-top: 0; padding-bottom: 0; } @media only screen and (min-width: 1024px) { .video-player--circle { height: 550px; width: 550px; } } .video-player--circle a::before { top: unset; bottom: 35px; left: 0; position: relative; } .video-player--circle img { border-radius: var(--border-radius-l); height: 300px; width: 300px; transition: all var(--animate-duration-faster) ease; object-fit: cover; } @media only screen and (min-width: 400px) { .video-player--circle img { height: 400px; width: 400px; } } @media only screen and (min-width: 1024px) { .video-player--circle img { height: 550px; width: 550px; } } .video-player--circle a { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; } .video-player--circle img:hover { transform: rotateZ(11deg); } .video-paragraph::after { content: ""; background: var(--color-neutral-grey); width: 250px; height: 250px; display: block; position: absolute; top: -194px; left: -200px; border-radius: var(--border-radius-l); z-index: -1; } /* information-block -------------------------------------------*/ .information-block { --color-dash: var(--color-white); --color-primary: var(--color-white); position: relative; background: var(--color-icon-bg); padding: var(--space-l); height: 100%; font-size: var(--step--1); } @media only screen and (min-width: 768px) { .information-block { border-bottom-left-radius: 0; padding: var(--space-s); } } .information-block svg { position: absolute; right: 0; top: 10px; right: 15px; width: 50px; } .information-block li, .information-block h2, .information-block p { color: var(--color-white); } .information-block li { gap: var(--space-2xs); } .information-block h2 { display: flex; flex-direction: column-reverse; margin-block-start: var(--space-3xs); } .information-block .dash::after { margin-block-start: 0; margin-block-end: var(--space-m); } .information-block .cta-btn a, .information-block p { font-size: var(--step--1); } .information-block .information-block-section:not(:last-of-type)::after { content: ""; display: block; height: var(--border-width-r); background: var(--color-white); width: 50px; margin-block-start: var(--space-s); } .information-block .information-block-section h2 { margin-block-end: var(--space-2xs); } .information-block .information-block-section:not(:last-of-type) { margin-block-end: var(--space-s); } /* mega-menu -------------------------------------------*/ .page-header .mega-menu .cta-btn { align-self: center; justify-self: flex-start; } .mega-menu { display: none; transition: all 0.2s ease-out 0s; background: var(--color-background-default); --color-text-link: var(--color-text-default); width: 100%; z-index: 9; left: 0; } @media only screen and (min-width: 768px) { .mega-menu { position: absolute; top: 39.8rem; } } .mega-menu h2 { word-break: break-word; } @media only screen and (min-width: 768px) { .mega-menu .grid.four:has(.information-block) > .flow:not(:last-of-type) { padding-block: var(--space-l); } } @media only screen and (min-width: 768px) { .mega-menu .grid.four > .flow { padding-block: var(--space-l); } } .mega-menu .grid.four > .flow:first-child { margin-block-end: var(--space-l); } .mega-menu .mega-menu-featured-link { border-top: var(--border-width-r) solid var(--color-border); padding-block-start: var(--space-s); padding-block-end: var(--space-s); transition: all var(--animate-duration-faster) ease; } @media only screen and (min-width: 768px) { .mega-menu .mega-menu-featured-link { border-top: none; padding-block-start: 0; } } .mega-menu .mega-menu-featured-link img { width: 100%; margin-block-end: var(--space-m); display: none; height: 200px; } @media only screen and (min-width: 768px) { .mega-menu .mega-menu-featured-link img { display: block; } } .mega-menu .mega-menu-featured-link h3 { text-transform: none; font-weight: var(--font-weight-r); font-size: var(--step--1); word-break: break-word; } @media only screen and (min-width: 768px) { .mega-menu .mega-menu-featured-link h3 { font-size: var(--step-2); font-weight: var(--font-weight-sbd); text-transform: uppercase; } } .mega-menu .mega-menu-featured-link h3:after { content: ">"; display: inline-block; margin-inline-start: var(--space-3xs); } @media only screen and (min-width: 768px) { .mega-menu .mega-menu-featured-link h3:after { display: none; } } .mega-menu .mega-menu-featured-link a { text-decoration: none; } .mega-menu .mega-menu-featured-link .navigation-links { margin-block-start: var(--space-s); } @media only screen and (min-width: 768px) { .mega-menu .mega-menu-featured-link .navigation-links { margin-block-start: var(--space-m); } } .mega-menu .mega-menu-featured-link:hover img { opacity: 0.5; } .mega-menu .mega-menu-featured-link:hover h3 a { --color-text-link: var(--color-primary); } .mega-menu .l-rs.navigation-links { margin-block-start: 0; } .mega-menu .l-rs.navigation-links li { margin: 0; } .mega-menu .flow + .flow { padding-block: 0; } .mega-menu p { font-size: var(--step--1); } @media only screen and (min-width: 1024px) { .mega-menu p { font-size: var(--step-0); } } @media only screen and (min-width: 768px) { .tbm-main .mega-menu { position: absolute; top: 185px; z-index: 10; } } @media screen and (min-width: 1300px) { .tbm-main .mega-menu { top: 113px; } } .mega-menu:has(.information-block) .grid.four > .flow:last-of-type { padding: 0; height: 100%; } .skinny .mega-menu { top: 159.5px; } @media screen and (min-width: 1300px) { .skinny .mega-menu { top: 82.5px; } } .primary-menu-link-open .mega-menu { display: block; padding-block-start: var(--space-l); width: 100vw; margin-left: calc(50% - 50vw); } @media only screen and (min-width: 768px) { .primary-menu-link-open .mega-menu { padding-block: 0; } } .primary-menu-link-open .level-1 { --color-background-default: var(--color-primary); color: var(--color-white); } @media only screen and (min-width: 768px) { .primary-menu-link-open .level-1 { color: var(--color-text-default); } } /* track-item -------------------------------------------*/ .track-item { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-xs); margin-block-start: var(--space-xs); position: relative; } .track-item h4 { font-size: 1em; } .track-item dt { background: var(--color-background-default); padding: var(--space-xs); transition: all var(--animate-duration-faster) ease; } .track-item dt span { font-weight: var(--font-weight-m); font-size: var(--step-0); } .track-item dd { background: var(--color-background-default); padding: var(--space-xs); transition: all var(--animate-duration-faster) ease; } .track-item dt, .track-item dd { border-radius: var(--border-radius-r); } .track-item summary span { padding-inline-start: var(--space-3xs); font-size: var(--step-0); } .track-item summary svg { float: right; } .track-item .track-details { background: var(--color-white); padding: var(--space-m); margin-block-start: var(--space-xs); } .track-item .sponsor-item { width: 50%; } [data-user-color-scheme=dark-theme] .track-item .track-details { background: var(--color-background-alt); border: 1px solid var(--color-border); } /* TRACK ITEM BOX ---------------------------------------- */ .track-item-box { grid-template-columns: 1fr; background: var(--color-background-default); border-radius: var(--border-radius-r); padding: var(--space-s); gap: var(--space-s); } .track-item-box .feature-name { font-weight: var(--font-size-r); font-size: var(--step--1); } .track-item-box .track-location { margin-block-start: var(--space-3xs); } .track-item-box .speaker-item-mini { font-size: var(--step--1); } .track-item-box .speaker-item-mini figure { width: 40px; } .track-item-box .labels, .track-item-box p { font-size: var(--step--1); } .track-item-box .speakers { margin-block-start: var(--space-2xs); } .track-name { text-transform: uppercase; } .labels { font-weight: var(--font-weight-m); margin-inline-end: var(--space-3xs); } /* price-toggle -------------------------------------------*/ .price-toggle { gap: var(--space-s); background: var(--color-background-default); width: 100%; padding: var(--space-s); border-top: var(--border-width-l) solid var(--color-border); cursor: pointer; } @media only screen and (min-width: 1024px) { .price-toggle { width: 30%; } } .price-toggle svg { width: 70px; } .price-item { border-top: 3px dotted var(--color-background-default); } .price-item .special-list { margin-block-start: var(--space-m); } @media only screen and (min-width: 768px) { .price-item .special-list { margin-block-start: 0; } } details.price-item[open] { padding-bottom: var(--space-l); } /* categories -------------------------------------------*/ .categories { display: flex; gap: var(--space-2xs); flex-wrap: wrap; } .category-bullet a { outline: 1px solid; padding-block: var(--space-3xs); padding-inline: var(--space-2xs); font-size: 1rem; text-decoration: none; border-radius: var(--border-radius-m); } /* subnav -------------------------------------------*/ .quicktabs-tabs { margin-block-end: var(--space-l); } .subnav ul, .bef-links ul, .quicktabs-tabs { display: flex; gap: 1px; flex-wrap: wrap; justify-content: center; } .subnav ul li, .bef-links ul li, .quicktabs-tabs li { margin: 0; text-align: center; } .subnav ul li::before, .bef-links ul li::before, .quicktabs-tabs li::before { display: none; } .subnav ul li a, .bef-links ul li a, .quicktabs-tabs li a { --color-text-link: var(--text-color-default); padding: var(--space-s); outline: 1px solid var(--color-border-alt); text-decoration: none; font-weight: var(--font-weight-sbd); text-transform: uppercase; font-weight: var(--font-weight-sbd); width: 100%; display: block; } @media only screen and (min-width: 768px) { .subnav ul li a, .bef-links ul li a, .quicktabs-tabs li a { width: auto; } } .subnav ul li a:hover, .subnav ul li a.active, .subnav ul .bef-link--selected, .subnav ul li.active a, .bef-links ul li a:hover, .bef-links ul li a.active, .bef-links ul .bef-link--selected, .bef-links ul li.active a, .quicktabs-tabs li a:hover, .quicktabs-tabs li a.active, .quicktabs-tabs .bef-link--selected, .quicktabs-tabs li.active a { background: var(--color-primary); color: var(--color-white); } .subnav ul li.primary a, .bef-links ul li.primary a, .quicktabs-tabs li.primary a { background: var(--color-background-alt); } .subnav ul li.primary a:hover, .bef-links ul li.primary a:hover, .quicktabs-tabs li.primary a:hover { background: var(--color-primary); } ul.quicktabs-tabs li { display: flex !important; padding: 0px !important; } .subnav + .flow { margin-block-start: var(--space-l); } .subnav--primary { margin-block-start: var(--space-m); } .subnav + section, .subnav + div:not(.print-btn), .subnav + .section-header { margin-block-start: var(--space-2xl); } /* SUBNAV with dates ---------------------------------------- */ .subnav:has(span) li { flex-grow: 0; position: relative; bottom: 0px; margin-inline-start: 2px; } .subnav:has(span) li a { background: var(--color-background-default); font-weight: var(--font-weight-bd); } .subnav:has(span) li span { display: block; font-weight: var(--font-weight-r); font-size: var(--step--1); text-transform: none; } .subnav-wrapper { justify-content: space-between; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-s); justify-content: center; } .subnav-wrapper #edit-actions { display: none; } /* Drupal fixes ---------------------------------------- */ .bef-links { margin-block-end: var(--space-s); } .bef-links li { padding-inline-start: 0; } .quicktabs-tabs, .subnav-wrapper { margin-block-end: var(--space-2xl); } .views-exposed-form.subnav-wrapper, .views-exposed-form.bef-exposed-form { display: block; } /* subscribe-block -------------------------------------------*/ .subscribe-block { background: var(--color-background-default); border-radius: var(--border-radius-m); padding: var(--space-l); } /* Benefit -------------------------------------------*/ #benefits > div:first-of-type { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } #benefits svg { margin-block-end: var(--space-l); } @media only screen and (min-width: 1024px) { #benefits svg { margin-block-end: 0; } } #benefits { height: 100%; } @media only screen and (min-width: 1600px) { #benefits { width: inherit; } } #benefits hr { grid-column: 1/-1; margin-block-end: var(--space-l); } .benefits-card-item:last-of-type { margin-inline-end: var(--space-l); } /* language-switcher -------------------------------------------*/ .language-switcher { font-size: var(--step--1); text-transform: uppercase; z-index: 9; } .language-switcher .trigger.focusable, .language-switcher ul li:before, .language-switcher legend { display: none; } .language-switcher .dropbutton-arrow { right: 25px; top: 32px; } .language-switcher fieldset { padding: var(--space-s) var(--space-xs); border-radius: var(--border-radius-m); background: var(--color-neutral-grey) var(--icon-globe) no-repeat 20px; border: none; outline: 1px solid var(--color-border-alt); background-size: 25px; text-indent: 40px; font-weight: 400; font-size: 15px; margin-block: var(--space-xs); } .language-switcher a.language-link { text-decoration: none; } .language-switcher button { display: none; } .language-switcher .dropbutton-action { margin-block-end: 0; } .language-switcher .dropbutton-toggle::after { bottom: unset; top: 8px; right: 5px; } .dropbutton-toggle button { background: red; } .dropbutton-arrow { display: none !important; } /* separator-special -------------------------------------------*/ @media only screen and (min-width: 768px) { .separator-special { margin: 0; } } .separator-special + #benefits-row { margin-block-start: 0; } /* profile-item -------------------------------------------*/ .profiles-row:first-of-type { margin-block-start: var(--space-2xl); } .profiles-row { margin-block-end: var(--space-xl); } @media only screen and (min-width: 768px) { .profiles-row { margin-block-end: var(--space-3xl); } } .profiles-row > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-m); margin-block: var(--space-m); } .profile-item { position: relative; display: block; padding: var(--space-m); background: var(--color-neutral-grey); border-radius: var(--border-radius-m); width: 100%; } @media only screen and (min-width: 1024px) { .profile-item { width: 45%; } } .profile-item > svg { border-bottom-right-radius: 30px; } .profile-item h3 { margin-block-end: var(--space-xs); } .profile-item > div { display: flex; gap: var(--space-s); flex-direction: column; } @media only screen and (min-width: 768px) { .profile-item > div { flex-direction: row; } } .profile-item > div ul li { gap: var(--space-xs); line-height: var(--lineheight-r); font-size: var(--step--1); } @media only screen and (min-width: 1024px) { .profile-item > div ul li { font-size: var(--step-0); } } .profile-item > div ul li svg { position: relative; } .profile-item img { width: 100px; height: 100px; border-radius: 100px; } .profile-item .job-title { text-transform: uppercase; } .profile-item .job-title:before { content: ""; display: block; } /* Price-tag -------------------------------------------*/ .price-tag { background: var(--color-neutral-grey); padding: var(--space-s); border: var(--border-width-l); border-radius: var(--border-radius-m); font-weight: var(--font-weight-m); border: 3px dashed var(--color-dash); margin-block: var(--space-m); } @media only screen and (min-width: 768px) { .price-tag { width: 50%; } } /*-------------------------------------------------- Pager Styles --------------------------------------------------*/ ul.pager__items { display: flex; justify-content: center; gap: var(--space-2xs); flex-wrap: wrap; margin-block-start: var(--space-m); /* Pager item reset */ /* Pager link styling */ /* Adjustments for navigation buttons */ /* Remove default pseudo-element on list items */ /* Hover state for pager links */ } ul.pager__items li.pager__item { margin: 0; padding: 0; } ul.pager__items li.pager__item a { font-size: var(--step--1); text-decoration: none; padding: var(--space-3xs) var(--space-2xs); border: 1px solid; border-radius: var(--border-radius-m); width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-weight: 400; } ul.pager__items li.pager__item--last a, ul.pager__items li.pager__item--next a, ul.pager__items li.pager__item--first a, ul.pager__items li.pager__item--previous a { width: auto; padding-inline: var(--space-s); } ul.pager__items li:before { content: ""; display: none; } ul.pager__items li.pager__item a:hover { color: var(--color-white); background: var(--color-button); } /* Pager container */ .pager { width: 100%; } /* advertorial -------------------------------------------*/ .advertorial { background: var(--color-background-default); display: flex; justify-content: center; padding-block: var(--space-s); } .advertorial iframe { width: 970px; } /*@import "block/hero", "block/special-list", "block/buttons", "block/about", "block/panel-feature", "block/why-attend", "block/features", "block/step-plan", "block/box-cta", "block/menu", "block/album", "block/forms/forms", "block/event-details", "block/judges", "block/benefit", "block/sponsorship-card", "block/opportunities";*/ } @layer site-specific { /* holding-page -------------------------------------------*/ .holding-page .page-header { margin-block-end: var(--space-s); padding-block-end: var(--space-s); padding-inline: 0; } #statistics + #box-cta { margin-block-start: 5px; } @media only screen and (min-width: 768px) { #statistics + #box-cta { margin-block-start: 0; } } .holding-page #about-section { margin-block-start: var(--space-2xl); } /* conference -------------------------------------------*/ @media only screen and (min-width: 768px) { #view-conference { display: grid; grid-template-columns: 1fr 3fr; gap: var(--space-m); } } #view-conference .subnav-wrapper { grid-row: 1; grid-column: 1/-1; margin-block-start: var(--space-xl); margin-block-end: var(--space-l); } @media only screen and (min-width: 768px) { #view-conference .subnav-wrapper { margin-block-end: 0; } } /* Article -------------------------------------------*/ .article { padding-block-start: var(--space-l); } .article .dash::after, .article h1 { margin-block-start: 0; margin-block-end: var(--space-s); } .article h1, .article .h1 { font-size: var(--step-6); } @media only screen and (min-width: 1024px) { .article h1, .article .h1 { font-size: var(--step-7); } } .article header h1, .article header p { grid-column: 5/-3; } .article .post { padding-block-end: var(--space-xl); } .article .post > div:nth-of-type(2) { grid-column: 5/-3; margin-block-end: var(--space-l); } .article .lead-image img { aspect-ratio: 16/9; } @media only screen and (min-width: 1024px) { .article .lead-image img { height: 550px; } } .article .categories, .article .subscribe-block { grid-column: 5/-3; } .article .categories { padding-block-end: var(--space-l); } .article .lead-image { margin-block: var(--space-xl); } .article-landing blockquote { margin-left: -15rem; float: left; width: 20rem; margin-inline-end: var(--space-l); border-block-start: var(--border-width-l) solid; padding-block-start: var(--space-s); } .article-landing blockquote p { font-size: var(--step-1); font-weight: var(--font-weight-sbd); } /* TYPESET ARTICLE ---------------------------------------- */ .post p + h2, .post p + h3, .post p + h4, .post p + h5, .post p + div, .post p + pre { margin-top: var(--space-xl); } .post p + ul, .post p + ol { margin-top: var(--space-l); } /*.post { padding-bottom: var(--space-xl); @include respond-to(desktop){ padding-bottom: var(--space-3xl); } p + h2, p + h3, p + h4, p + h5, p + div, p + pre{ margin-top: var(--space-xl); } p + ul, p + ol{ margin-top: var(--space-l); } h3 + ul, h3 + ol{ margin-top: var(--space-xl); } ul + .cta-btn, ol + .cta-btn, h2 + .cta-btn, h3 + .cta-btn{ margin-top: var(--space-xl); margin-bottom: var(--space-l); } ol + h2, ul + h2, ol + h3, ul + h3, ol + h4, ul + h4{ margin-top: var(--space-xl); } ul + p, ol + p, h2 + p, h2 + ul, h2 + ol, h2 + dl{ margin-top: var(--space-xl); } hr + h3, p + hr{ margin-top: var(--space-xl); } }*/ /* South-china-overrides -------------------------------------------*/ .south-china { --graphics-size: 180px; /*= shapes */ /*= features homepage */ /*= speakers homepage */ /* checklist */ /* benefits row */ object-position: right; } .south-china .hero.hero--box:before { /* content: ""; height: 115px; width: 160px; background: url(../img/south-china/dragon-4.png) no-repeat; display: block; position: absolute; bottom: -80px; left: -95px; display: block; background-size: contain; z-index: 2;*/ } .south-china .hero-box { background: url("../img/south-china/lex-website-banner.jpg"); background-size: cover; } .south-china .hero-box h1, .south-china .hero-box p { color: var(--color-white); } .south-china .hero-box:before { content: ""; height: 220px; width: 220px; background: url(../img/south-china/dragon-7.png) no-repeat; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .south-china .video-paragraph::after, .south-china .audience h2::after { border-top-left-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .south-china #features > div:nth-of-type(1) { background: url(../img/south-china/dragon-3.png) no-repeat right; background-size: var(--graphics-size); } .south-china #speakers > div:nth-of-type(1) { background: url(../img/south-china/dragon-4.png) no-repeat right; background-size: var(--graphics-size); } .south-china .steps-cta:before { content: ""; height: 200px; width: 100px; background: url(../img/south-china/dragon-6.svg) no-repeat; display: block; position: absolute; top: -130px; right: 50px; display: block; background-size: contain; } .south-china .steps-cta { background: url("../img/south-china/lex-south-china-alt.jpg"); background-size: cover; } .south-china .checklist-box { background: var(--color-background-alt); } .south-china .checklist-box:before { content: ""; height: 220px; width: 400px; background: url(../img/south-china/dragon-skin.svg) no-repeat; display: block; position: absolute; top: 200px; left: -135px; display: block; background-size: contain; } .south-china .benefits-row { background: url(../img/south-china/dragon-4.png) no-repeat top right; background-size: var(--graphics-size); } /* South-china-overrides -------------------------------------------*/ .gess-dubai { --graphics-size: 180px; /*= shapes */ /*= features homepage */ /*= speakers homepage */ /* checklist */ /* benefits row */ object-position: right; } .gess-dubai .hero.hero--box:before { /* content: ""; height: 115px; width: 160px; background: url(../img/south-china/dragon-4.png) no-repeat; display: block; position: absolute; bottom: -80px; left: -95px; display: block; background-size: contain; z-index: 2;*/ } .gess-dubai .hero-box { background: url("../img/gess/lex-website-banner.jpg"); background-size: cover; } .gess-dubai .hero-box h1, .gess-dubai .hero-box p, .gess-dubai .hero-box span, .gess-dubai .hero-box div { color: var(--color-white); } .gess-dubai .hero-box .dash::after { background: var(--color-white); } .gess-dubai .hero-box:before { content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-3.png) no-repeat; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .gess-dubai .hero-box.graphic--right:before { content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-32.png) no-repeat; display: block; position: absolute; top: -80px; left: unset; right: -80px; display: block; background-size: contain; } .gess-dubai .hero-box.visit:before { content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-32.png) no-repeat; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .gess-dubai .event-feature-card img { width: 150px; } .gess-dubai .audience h2::after { top: 90px; left: 330px; } .gess-dubai #features > div:nth-of-type(1) { background: url(../img/gess/dragon-01.png) no-repeat right; background-size: var(--graphics-size); } .gess-dubai #speakers > div:nth-of-type(1) { background: url(../img/gess/dragon-04.png) no-repeat right; background-size: var(--graphics-size); } .gess-dubai .steps-cta:before { content: ""; height: 200px; width: 100px; background: url(../img/gess/dragon-6.png) no-repeat; display: block; position: absolute; top: -130px; right: 50px; display: block; background-size: contain; } .gess-dubai .steps-cta { color: var(--color-white); background: url("../img/gess/lex-south-china-alt.jpg"); background-size: cover; } .gess-dubai .checklist-box { background: var(--color-background-alt); } .gess-dubai .checklist-box:before { content: ""; height: 220px; width: 400px; background: url(../img/gess/dragon-skin.png) no-repeat; display: block; position: absolute; top: 200px; left: -135px; display: block; background-size: contain; } .gess-dubai .benefits-row { background: url(../img/gess/dragon-04.png) no-repeat top right; background-size: var(--graphics-size); } /* Classic dual color -------------------------------------------*/ .classic-dual-color { --graphics-size: 180px; --border-radius-r: 0; --border-radius-m: 0px; --border-radius-l: 0; --color-dash: var(--color-secondary); /*= shapes */ /*= features homepage */ /*= speakers homepage */ object-position: right; } .classic-dual-color .dash::after { content: ""; margin-block-start: var(--space-m); background: var(--color-dash); } .classic-dual-color .cta-btn a { --color-button-border: var(--color-secondary); } .classic-dual-color .hero { --color-dash: var(--color-secondary); } .classic-dual-color .hero--box .hero-feartured-link .hero-link-label { --color-button: var(--color-secondary); --color-button-border: var(--color-secondary); --color-button-text: #2D2D2D; --hero-box-cta-color: var(--color-secondary); --hero-box-cta-color-text: #2D2D2D; } .classic-dual-color .hero.hero--box:before { /* content: ""; height: 115px; width: 160px; background: url(../img/south-china/dragon-4.png) no-repeat; display: block; position: absolute; bottom: -80px; left: -95px; display: block; background-size: contain; z-index: 2;*/ } .classic-dual-color .hero-box { background-size: cover; } .classic-dual-color .hero-box h1, .classic-dual-color .hero-box p, .classic-dual-color .hero-box span, .classic-dual-color .hero-box div { color: var(--color-white); } .classic-dual-color .hero-box .dash::after { background: var(--color-white); } .classic-dual-color .hero-box:before { content: ""; height: 220px; width: 220px; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .classic-dual-color .hero-box.graphic--right:before { content: ""; height: 220px; width: 220px; display: block; position: absolute; top: -80px; left: unset; right: -80px; display: block; background-size: contain; } .classic-dual-color .hero-box.visit:before { content: ""; height: 220px; width: 220px; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .classic-dual-color .event-feature-card img { width: 150px; } .classic-dual-color .audience h2::after { top: 90px; left: 330px; } .classic-dual-color .about-content svg { display: none; } .classic-dual-color #features > div:nth-of-type(1) { background-size: var(--graphics-size); } .classic-dual-color #speakers > div:nth-of-type(1) { background-size: var(--graphics-size); } .classic-dual-color .steps-cta { border: 1px var(--color-primary) solid; background: transparent; background-size: cover; } .classic-dual-color .audience h2::after { content: ""; background: none; } /* Classic dual color -------------------------------------------*/ .fashion { --graphics-size: 180px; --color-dash: var(--color-secondary); /*= shapes */ /*= features homepage */ /*= speakers homepage */ object-position: right; } .fashion .dash::after { content: ""; margin-block-start: var(--space-m); background: var(--color-dash); } .fashion .cta-btn a { --color-button-border: var(--color-secondary); } .fashion .hero { --color-dash: var(--color-secondary); } .fashion .hero--box .hero-feartured-link .hero-link-label { --color-button: var(--color-secondary); --color-button-border: var(--color-secondary); --color-button-text: #2D2D2D; --hero-box-cta-color: var(--color-secondary); --hero-box-cta-color-text: #fff; } .fashion .hero.hero--box:before { /* content: ""; height: 115px; width: 160px; background: url(../img/south-china/dragon-4.png) no-repeat; display: block; position: absolute; bottom: -80px; left: -95px; display: block; background-size: contain; z-index: 2;*/ } .fashion .hero-box { background-size: cover; } .fashion .hero-box h1, .fashion .hero-box p, .fashion .hero-box span, .fashion .hero-box div { color: var(--color-white); } .fashion .hero-box .dash::after { background: var(--color-white); } .fashion .sponsor-item { border: none; padding: 0; } .fashion .sponsor-item img { margin-block-start: 0; margin-block-end: 0; } .fashion .hero-box:before { content: ""; height: 220px; width: 220px; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .fashion .hero-box.graphic--right:before { content: ""; height: 220px; width: 220px; display: block; position: absolute; top: -80px; left: unset; right: -80px; display: block; background-size: contain; } .fashion .hero-box.visit:before { content: ""; height: 220px; width: 220px; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .fashion .event-feature-card img { width: 150px; } .fashion .audience h2::after { top: 90px; left: 330px; } .fashion .about-content svg { display: none; } .fashion #features > div:nth-of-type(1) { background-size: var(--graphics-size); } .fashion #speakers > div:nth-of-type(1) { background-size: var(--graphics-size); } .fashion .steps-cta { border: 1px var(--color-primary) solid; background: transparent; background-size: cover; } .fashion .audience h2::after { content: ""; background: none; } .fashion .steps-cta { border-radius: 0; } /* Classic dual color -------------------------------------------*/ .fanexpo { --graphics-size: 180px; --color-dash: var(--color-secondary); } @media only screen and (min-width: 1024px) { .fanexpo .hero-section .hero--box { top: 340px; } } @media only screen and (min-width: 768px) { .fanexpo .mega-menu { top: 41.8rem; } } @media only screen and (min-width: 768px) { .fanexpo .skinny.mega-menu { top: 86.5px; } } .fanexpo .hero--box .hero-inner { --hero-box-bg: #18181a; background: var(--hero-box-bg); } .fanexpo .steps-cta { --color-background-alt: #18181a; background: var(--color-background-alt); } .fanexpo .hero--box .hero-links li:nth-of-type(2) .hero-link-label { --hero-box-cta-2-color: #3A3B3C; --hero-box-cta-color: var(--hero-box-cta-2-color); --hero-box-cta-color-text: var(--hero-box-cta-2-color-text); } .fanexpo .hero--box .hero-links li:nth-of-type(1) .hero-link-label { --hero-box-cta-1-color-text: #161618; --hero-box-cta-color: var(--hero-box-cta-1-color); --hero-box-cta-color-text: var(--hero-box-cta-1-color-text); } .fanexpo .steps-cta { background: url(../img/homepage/fx-bg.jpg); background-size: cover; } .fanexpo h1, .fanexpo .h1 { font-size: var(--step-7); letter-spacing: 0; } @media only screen and (min-width: 1500px) { .fanexpo h1, .fanexpo .h1 { font-size: var(--step-8); } } .fanexpo h2, .fanexpo .h2 { font-size: var(--step-6); letter-spacing: 0; } .fanexpo h3, .fanexpo .h3 { font-size: var(--step-4); letter-spacing: 0; } .fanexpo h4, .fanexpo .h4 { font-size: var(--step-3); letter-spacing: 0; line-height: 1; } .fanexpo h5, .fanexpo .h5 { font-size: var(--step-2); letter-spacing: 0; } .fanexpo .section-title { line-height: 1; letter-spacing: 0; } /* Classic dual color -------------------------------------------*/ .art-miami { --graphics-size: 180px; --color-dash: var(--color-secondary); } .art-miami h1, .art-miami .h1, .art-miami h2, .art-miami .h2, .art-miami h3, .art-miami .h3, .art-miami h4, .art-miami .h4, .art-miami h5, .art-miami .h5 { font-weight: var(--font-weight-bl); font-variation-settings: "wght" var(--font-weight-bl); } .art-miami .hero--box .hero-inner { border-radius: 0; } .art-miami .video-player--circle img { border-radius: 0; } .art-miami .cta-btn-inline a::after { border-radius: 0; } .art-miami .hero--box h1 { font-size: var(--step-8); } .art-miami .cta-btn a, .art-miami .cta-btn a:visited, .art-miami button[type=submit] { border-radius: 0; outline: none; } .art-miami .connect .cta-btn a, .art-miami .connect .cta-btn a:visited, .art-miami .connect button[type=submit] { --color-background-alt: #fff; background: var(--color-background-alt); border: 1px solid black; border-radius: 0; } .art-miami .audience h2::after { border: 0; width: 220px; height: 220px; } .art-miami .hero--box .hero-links li:nth-of-type(1) .hero-link-label { --hero-box-cta-1-color-text: #fff; --hero-box-cta-color: #00aaef; --hero-box-cta-color-text: var(--hero-box-cta-1-color-text); } @media only screen and (min-width: 768px) { .art-miami .audience h2::after { top: 120px; left: 420px; } } .art-miami .statistic-items, .art-miami .steps-cta, .art-miami .footer-links { border-radius: 0; } .art-miami .dash::after { --color-dash: var(--color-secondary); content: ""; background: var(--color-dash); } .art-miami .video-paragraph::after, .art-miami .audience h2::after { border-radius: 0; } /* South-china-overrides -------------------------------------------*/ .network-x { /*= shapes */ /*= features homepage */ /*= speakers homepage */ /* checklist */ object-position: right; } .network-x h1, .network-x .h1, .network-x h2, .network-x .h2, .network-x h3, .network-x .h3, .network-x h4, .network-x .h4, .network-x h5, .network-x .h5 { font-weight: var(--font-weight-bd); font-variation-settings: unset; /*background-image: linear-gradient(90deg, #b792fc, #00b9f9); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; line-height: 0.9;*/ line-height: 1; } .network-x h1, .network-x .h1 { font-size: var(--step-8); letter-spacing: 0; } .network-x h2, .network-x .h2 { font-size: var(--step-6); letter-spacing: 0; } .network-x h3, .network-x .h3 { font-size: var(--step-4); letter-spacing: 0; } .network-x h4, .network-x .h4 { font-size: var(--step-3); letter-spacing: 0; } .network-x h5, .network-x .h5 { font-size: var(--step-2); letter-spacing: 0; } .network-x .cta-btn a, .network-x .cta-btn a:visited, .network-x button[type=submit] { --color-button-border: #e3ebff; color: var(--color-button-text); background: linear-gradient(90deg, #b792fc, #00b9f9); background-image: linear-gradient(90deg, #b792fc, #00b9f9); background-size: 200% auto; } .network-x .speaker-item-inner h3 { font-size: var(--step-2); } .network-x .connect > div:nth-of-type(1) .cta-btn.outline a { --color-button-text: #fff; } .network-x .hero.hero--box:before { /* content: ""; height: 115px; width: 160px; background: url(../img/south-china/dragon-4.png) no-repeat; display: block; position: absolute; bottom: -80px; left: -95px; display: block; background-size: contain; z-index: 2;*/ } .network-x .hero-box { background: url("../img/gess/lex-website-banner.jpg"); background-size: cover; } .network-x .hero-box h1, .network-x .hero-box p, .network-x .hero-box span, .network-x .hero-box div { color: var(--color-white); } .network-x .hero-box .dash::after { background: var(--color-white); } .network-x .hero-box:before { content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-3.png) no-repeat; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .network-x .hero-box.graphic--right:before { content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-32.png) no-repeat; display: block; position: absolute; top: -80px; left: unset; right: -80px; display: block; background-size: contain; } .network-x .hero-box.visit:before { content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-32.png) no-repeat; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } .network-x .event-feature-card img { width: 150px; } .network-x .audience h2::after { top: 90px; left: 330px; } .network-x #speakers > div:nth-of-type(1) { background: none; background-size: var(--graphics-size); } .network-x .steps-cta:before { content: ""; height: 200px; width: 100px; background: none; display: block; position: absolute; top: -130px; right: 50px; display: block; background-size: contain; } .network-x .steps-cta { color: var(--color-white); background: linear-gradient(90deg, #b792fc, #00b9f9); background-image: linear-gradient(90deg, #b792fc, #00b9f9); background-size: 200% auto; background-size: cover; } .network-x .checklist-box { background: var(--color-background-alt); } .network-x .checklist-box:before { display: none; content: ""; height: 220px; width: 400px; background: none; display: block; position: absolute; top: 200px; left: -135px; display: block; background-size: contain; } /* Classic dual color -------------------------------------------*/ .jewellery { --graphics-size: 180px; --color-dash: var(--color-secondary); } .jewellery h1, .jewellery .h1, .jewellery h2, .jewellery .h2, .jewellery h3, .jewellery .h3, .jewellery h4, .jewellery .h4, .jewellery h5, .jewellery .h5 { font-weight: var(--font-weight-bl); font-variation-settings: "wght" var(--font-weight-bl); } @media only screen and (min-width: 768px) { .jewellery .skinny .logo img { width: 330px; margin: 0px; } } @media only screen and (min-width: 1024px) { .jewellery .hero-section .hero--box { top: 400px; } } @media only screen and (min-width: 1024px) { .jewellery .hero-section .hero-wrapper { margin-block-end: 21rem; } } .jewellery .video-player--circle img { border-radius: 0; } .jewellery .cta-btn-inline a::after { border-radius: 0; } .jewellery .hero--box h1 { font-size: var(--step-8); } .jewellery .cta-btn a, .jewellery .cta-btn a:visited, .jewellery button[type=submit] { border-radius: 0; outline: none; } .jewellery .connect .cta-btn a, .jewellery .connect .cta-btn a:visited, .jewellery .connect button[type=submit] { --color-background-alt: #fff; background: var(--color-background-alt); border: 1px solid black; border-radius: 0; } .jewellery .audience h2::after { border: 0; width: 220px; height: 220px; transform: rotate(45deg); } .jewellery .hero--box .hero-links li:nth-of-type(1) .hero-link-label { --hero-box-cta-1-color-text: #fff; --hero-box-cta-color-text: var(--hero-box-cta-1-color-text); } @media only screen and (min-width: 768px) { .jewellery .audience h2::after { top: 120px; left: 420px; } } .jewellery .statistic-items, .jewellery .steps-cta, .jewellery .footer-links { border-radius: 0; } .jewellery .video-paragraph::after, .jewellery .audience h2::after { border-radius: 0; transform: rotate(45deg); } .jewellery .dash::after { --color-dash: var(--color-secondary); content: ""; background: var(--color-dash); } .jewellery #features > div:nth-of-type(1) { background: none; } @media only screen and (min-width: 768px) { .jewellery #features > div:nth-of-type(1) { background: url(../img/jewellery/jgt-ring-1-7e41353b.webp) no-repeat right; background-size: var(--graphics-size); } } .jewellery .hero--box .hero-inner > div:first-child { background: none; } @media only screen and (min-width: 1300px) { .jewellery .hero--box .hero-inner > div:first-child { --graphics-size: 165px; background: url(../img/jewellery/jgt-neckless-31c9732d.webp) no-repeat 85% top; background-size: var(--graphics-size); } } /*-------------------------------------------------- Global Settings & CSS Variables --------------------------------------------------*/ html, .page-exhibitor-list { overflow-x: hidden; } .page-exhibitor-list { /* CSS Variables */ /* Border & Spacing Variables */ --color-border-alt: #E8E8E8; --border-radius-default: 5px; --border-radius-alt: 1rem; --border-width-l: 5px; --spacing-small: 1rem; --spacing-default: 2rem; --spacing-medium: 3.2rem; --spacing-large: 6.4rem; --spacing-x-large: 12.8rem; --flow-space: 2rem; --list-item-spacing: 2rem; --grid-gap: 2.8rem; --font-weight: 500; --font-weight-bold: 700; --transition: all .15s ease; /* Icon URLs */ --clear-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJDYWxxdWVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTcuMjIgMTYuNjMiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00LjA3LDQuNzVoMS44N2MuNjYsMCwxLjE5LC41MywxLjE5LDEuMTlzLS41MywxLjE5LTEuMTksMS4xOUgxLjE5Yy0uNjYsMC0xLjE5LS41My0xLjE5LTEuMTlWMS4xOUMwLC41MywuNTMsMCwxLjE5LDBzMS4xOSwuNTMsMS4xOSwxLjE5djEuOWwuNjUtLjY1QzYuMjgtLjgxLDExLjU0LS44MSwxNC43OCwyLjQ0YzMuMjUsMy4yNSwzLjI1LDguNTEsMCwxMS43Ni0zLjI1LDMuMjUtOC41MSwzLjI1LTExLjc2LDAtLjQ2LS40Ni0uNDYtMS4yMiwwLTEuNjgsLjQ2LS40NiwxLjIyLS40NiwxLjY4LDAsMi4zMiwyLjMyLDYuMDgsMi4zMiw4LjQsMHMyLjMyLTYuMDgsMC04LjRjLTIuMzItMi4zMi02LjA4LTIuMzItOC40LDBsLS42NCwuNjRaIi8+PC9zdmc+"); --caret-down: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJDYWxxdWVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIwLjEzIDE5Mi4wNyI+PHBhdGggZD0iTTEzNy40NiwxODIuN2MxMi41LDEyLjUsMzIuOCwxMi41LDQ1LjMsMEwzMTAuNzYsNTQuN2M5LjItOS4yLDExLjktMjIuOSw2LjktMzQuOVMzMDEuMDYsMCwyODguMDYsMEwzMi4wNiwuMUMxOS4xNiwuMSw3LjQ2LDcuOSwyLjQ2LDE5LjlTLjI2LDQ1LjYsOS4zNiw1NC44TDEzNy4zNiwxODIuOGwuMS0uMVoiLz48L3N2Zz4="); --caret-up: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJDYWxxdWVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIwLjEzIDE5Mi4wNyI+PHBhdGggZD0iTTE4Mi42OCw5LjM4Yy0xMi41LTEyLjUtMzIuOC0xMi41LTQ1LjMsMEw5LjM4LDEzNy4zOEMuMTgsMTQ2LjU4LTIuNTIsMTYwLjI3LDIuNDgsMTcyLjI3czE2LjYsMTkuOCwyOS42LDE5LjhoMjU2YzEyLjksMCwyNC42LTcuOCwyOS42LTE5LjhzMi4yLTI1LjctNi45LTM0LjlMMTgyLjc4LDkuMzhoLS4xWiIvPjwvc3ZnPg=="); --close-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDM4NCA1MTIiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAwcHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM0Mi42LDE1MC42YzEyLjUtMTIuNSwxMi41LTMyLjgsMC00NS4zcy0zMi44LTEyLjUtNDUuMywwbC0xMDUuMywxMDUuNC0xMDUuNC0xMDUuM2MtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zLDBzLTEyLjUsMzIuOCwwLDQ1LjNsMTA1LjQsMTA1LjMtMTA1LjMsMTA1LjRjLTEyLjUsMTIuNS0xMi41LDMyLjgsMCw0NS4zczMyLjgsMTIuNSw0NS4zLDBsMTA1LjMtMTA1LjQsMTA1LjQsMTA1LjNjMTIuNSwxMi41LDMyLjgsMTIuNSw0NS4zLDBzMTIuNS0zMi44LDAtNDUuM2wtMTA1LjQtMTA1LjMsMTA1LjMtMTA1LjRaIi8+Cjwvc3ZnPg=="); --search-icon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTEwcHgiIGhlaWdodD0iNTEwcHgiIHZpZXdCb3g9IjAgMCA1MTAgNTEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPm1hZ25pZnlpbmctZ2xhc3M8L3RpdGxlPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Im1hZ25pZnlpbmctZ2xhc3MiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00MTYsMjA4IEM0MTYsMjUzLjkgNDAxLjEsMjk2LjMgMzc2LDMzMC43IEw0ODYuNiw0NDEuNCBMNTA5LjMsNDY0IEw0NjQsNTA5LjMgTDQ0MS40LDQ4Ni43IEwzMzAuNywzNzYgQzI5Ni4zLDQwMS4yIDI1My45LDQxNiAyMDgsNDE2IEM5My4xLDQxNiAwLDMyMi45IDAsMjA4IEMwLDkzLjEgOTMuMSwwIDIwOCwwIEMzMjIuOSwwIDQxNiw5My4xIDQxNiwyMDggWiBNMjA4LDM1MiBDMjU5LjQ0NjI0NSwzNTIgMzA2Ljk4NDUzNywzMjQuNTUzNzU2IDMzMi43MDc2NiwyODAgQzM1OC40MzA3ODMsMjM1LjQ0NjI0NSAzNTguNDMwNzgzLDE4MC41NTM3NTUgMzMyLjcwNzY2LDEzNiBDMzA2Ljk4NDUzNyw5MS40NDYyNDQgMjU5LjQ0NjI0NSw2NCAyMDgsNjQgQzEyOC40NzA5OTYsNjQgNjQsMTI4LjQ3MDk5NiA2NCwyMDggQzY0LDI4Ny41MjkwMDQgMTI4LjQ3MDk5NiwzNTIgMjA4LDM1MiBMMjA4LDM1MiBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==); --close-icon-active: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAuMTUgMzIwLjE1Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMDA2NmI5OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMTAuNjcsNTQuNjhjMTIuNS0xMi41LDEyLjUtMzIuOCwwLTQ1LjNzLTMyLjgtMTIuNS00NS4zLDBsLTEwNS4zLDEwNS40TDU0LjY3LDkuNDhDNDIuMTctMy4wMiwyMS44OC0zLjAyLDkuMzgsOS40OHMtMTIuNSwzMi44LDAsNDUuM2wxMDUuNCwxMDUuM0w5LjQ3LDI2NS40N2MtMTIuNSwxMi41LTEyLjUsMzIuOCwwLDQ1LjNzMzIuOCwxMi41LDQ1LjMsMGwxMDUuMy0xMDUuNCwxMDUuNCwxMDUuM2MxMi41LDEyLjUsMzIuOCwxMi41LDQ1LjMsMHMxMi41LTMyLjgsMC00NS4zbC0xMDUuNC0xMDUuMywxMDUuMy0xMDUuNGgwWiIvPgo8L3N2Zz4=); --close-icon-white: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDM4NCA1MTIiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAwcHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM0Mi42LDE1MC42YzEyLjUtMTIuNSwxMi41LTMyLjgsMC00NS4zcy0zMi44LTEyLjUtNDUuMywwbC0xMDUuMywxMDUuNC0xMDUuNC0xMDUuM2MtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zLDBzLTEyLjUsMzIuOCwwLDQ1LjNsMTA1LjQsMTA1LjMtMTA1LjMsMTA1LjRjLTEyLjUsMTIuNS0xMi41LDMyLjgsMCw0NS4zczMyLjgsMTIuNSw0NS4zLDBsMTA1LjMtMTA1LjQsMTA1LjQsMTA1LjNjMTIuNSwxMi41LDMyLjgsMTIuNSw0NS4zLDBzMTIuNS0zMi44LDAtNDUuM2wtMTA1LjQtMTA1LjMsMTA1LjMtMTA1LjRaIi8+Cjwvc3ZnPg=="); --category-new: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDkgMTEiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgICAgc3Ryb2tlLXdpZHRoOiAwcHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTcsMWMuMS0uMywwLS42LS4yLS44LS4yLS4yLS42LS4yLS44LDBMLjksNWMtLjIuMi0uMy41LS4yLjgsMCwuMy4zLjQuNi40aDIuMmwtMS41LDMuOWMtLjEuMywwLC42LjIuOC4yLjIuNi4yLjgsMGw1LjEtNC44Yy4yLS4yLjMtLjUuMi0uOCwwLS4zLS4zLS40LS42LS40aC0yLjJsMS41LTMuOVoiLz4KPC9zdmc+"); } .page-exhibitor-list .views-element-container { --color-text-link: #0066B9; --color-button: #0066B9; --color-primary: #0066B9; } /*-------------------------------------------------- Page Layout & Core Elements --------------------------------------------------*/ .page-exhibitor-list .exhibitor-filter-main > p { margin-block-end: var(--space-xs); } .page-exhibitor-list ul.pager__items { margin: var(--spacing-xl) 0; } .page-exhibitor-list .main { background: var(--color-body); } .page-exhibitor-list .view-exhibitor-search-index-page { padding-top: var(--spacing-medium); } @media only screen and (min-width: 768px) { .page-exhibitor-list .view-exhibitor-search-index-page { padding-top: var(--spacing-large); } } @media only screen and (min-width: 768px) { .page-exhibitor-list .width-65 { width: 70%; } } @media only screen and (min-width: 768px) { .page-exhibitor-list .content-header .primary-msg p { line-height: 1.4; } } .page-exhibitor-list .views-exposed-form .views-exposed-widget input.form-submit { background-color: var(--link-color); } .page-exhibitor-list .sidebar { padding-top: 25px; display: none; } .page-exhibitor-list .item-list .pager { margin-top: var(--spacing-large); } .page-exhibitor-list .pager li a, .page-exhibitor-list .pager li a:visited { color: var(--link-color); } .page-exhibitor-list .pager li.pager-current, .page-exhibitor-list .pager li:hover, .page-exhibitor-list .pager li a:hover { background-color: var(--link-color) !important; } /*-------------------------------------------------- Filter & Search Controls --------------------------------------------------*/ .search-data { text-align: left; } .search-data li { display: inline-block; padding-right: 10px; } .search-data li.label { border-right: none; padding-right: 5px; } .view-controls { display: grid; grid-template-columns: 1fr repeat(1, minmax(0, 1fr) 1fr); grid-gap: var(--grid-gap); padding-bottom: var(--space-l); position: relative; } .view-controls #print-btn { justify-content: end; } .expandable-btn { display: flex; gap: var(--spacing-default); border: none; align-items: center; background: none; padding: 0; } .expandable-btn svg { background: var(--expandable-btn-bg); color: var(--color-text-default); border: var(--expandable-btn-border); width: 25px !important; height: 25px !important; padding: var(--space-xs); border: 1px solid var(--color-text-default); } .expandable-btn:hover, .expandable-btn.active { cursor: pointer; } .expandable-btn:hover span, .expandable-btn.active span { color: var(--color-text-default); } .expandable-btn:hover svg, .expandable-btn.active svg { --expandable-btn-bg: var(--color-text-default); --expandable-btn-icon: var(--color-white); --expandable-btn-border: var(--color-text-default); cursor: pointer; } .expandable-btn:focus { --expandable-btn-bg: var(--color-text-default); --expandable-btn-icon: var(--color-white); --expandable-btn-border: var(--color-text-default); } .expandable-btn:focus span { color: var(--color-text-default); } .expandable-btn span { font-weight: var(--font-weight-bold); display: none; color: var(--color-text-default); } @media only screen and (min-width: 768px) { .expandable-btn span { display: inline-block; } } .expandable-btn.grid-view { flex-direction: row-reverse; } .expandable-btn + .expandable-btn-links { display: none; } .expandable-btn.active + .expandable-btn-links { border: 1px solid var(--color-text-link); right: 0; top: 51px; position: absolute; display: block; } @media only screen and (min-width: 768px) { .expandable-btn.active + .expandable-btn-links { right: 54px; top: 56px; } } .expandable-btn.active + .expandable-btn-links a { padding: var(--space-xs); display: block; font-size: var(--step--1); } .expandable-btn.active + .expandable-btn-links .print-results-list__item { padding: 0px; margin: 0; } .expandable-btn.active + .expandable-btn-links .print-results-list__item:before { display: none; } button.list-view { display: flex; } .exhibitor-counts { margin-block-end: var(--space-s); } .expandable-buttons { display: flex; justify-content: center; grid-column: 2; gap: var(--space-s); } .expandable-btn.active svg, .expandable-btn:hover svg { color: #fff; } .category-listing li { padding-inline: 0; } /*-------------------------------------------------- Exhibitor List Layout & Items --------------------------------------------------*/ /* Grid View Display */ .exhibitor-list.grid.four { display: block; } @media only screen and (min-width: 768px) { .exhibitor-list.grid.four { display: grid; grid-template-columns: var(--grid-2); } } @media only screen and (min-width: 1300px) { .exhibitor-list.grid.four { display: grid; grid-template-columns: var(--grid-3); } } @media only screen and (min-width: 768px) { .exhibitor-list { gap: var(--space-m); display: grid; margin-top: var(--space-s); margin-block-end: var(--space-xl); } } /* Exhibitor List Item Base */ .exhibitor-list--item { background: var(--exhibitor-card-bg); border: 5px solid var(--color-border-alt); border-radius: 1rem; position: relative; display: block; margin-block-end: var(--space-m); } @media only screen and (min-width: 768px) { .exhibitor-list--item { margin-block-end: 0; } } .exhibitor-list--item .exhibitor-tags { margin: 0; } .exhibitor-list--item .exhibitor-tags li { position: absolute; z-index: 2; top: 0; left: 0; color: var(--color-white); padding: 5px 10px 3px 30px; font-size: 14px; text-transform: uppercase; font-weight: 700; } .exhibitor-list--item .exhibitor-tags li:first-of-type { border-top-left-radius: 5px; } .exhibitor-list--item .exhibitor-tags .new { background: var(--category-new) var(--color-neutral-black) 8px; background-size: 15px; background-repeat: no-repeat; } .exhibitor-list--item .exhibitor-tags .new:before { display: none; } .grid .exhibitor-list__item.active .exhibitor-tags { position: absolute; top: 34px; left: 33px; } .grid .exhibitor-list__item.active .exhibitor { height: auto; } ul li.exhibitor-list__item:before { display: none; } .exhibitor-list__item { background: var(--color-white); transition: var(--transition); display: block; margin: 0; padding: 0; } @media only screen and (min-width: 768px) { .exhibitor-list__item { position: relative; } } .exhibitor-list__item h3 { font-weight: var(--font-weight-bold); text-transform: none; font-size: var(--step-2); } .exhibitor-list__item .exhibitor-details { background: var(--color-white); display: none; } .exhibitor-list__item .exhibitor-details .social-networks__item { width: 30px; height: 35px; } .exhibitor-list__item .exhibitor-details .social-networks__item svg { color: var(--text-color); } .exhibitor-list__item .exhibitor-details .social-networks__item:has(.fa-facebook-f) { width: 20px; height: 33px; } .exhibitor-list__item .exhibitor-details .fa-facebook-f { width: 18px; } .exhibitor-list__item .exhibitor-details .social-networks__item:nth-of-type(2) { position: relative; top: -2px; } .exhibitor-list__item .exhibitor-details .categories li { line-height: 1.8; } .exhibitor-list__item .exhibitor-details .categories li a { display: inline-block; line-height: 1.4; } .exhibitor-list__item .exhibitor-details .fa-youtube { position: relative; top: 5px; } .exhibitor-list__item figure { display: flex; flex-direction: column; margin: 0; position: relative; } .exhibitor-list__item figure img { width: 200px; margin: 0 auto; } .exhibitor-list__item .exhibitor-logo { text-align: center; justify-content: center; background: var(--color-body); display: flex; height: 20rem; align-items: center; border-bottom: 2px solid var(--color-border-alt); border-top-left-radius: var(--border-radius-alt); border-top-right-radius: var(--border-radius-alt); position: relative; } @media only screen and (min-width: 1024px) { .exhibitor-list__item .exhibitor-logo { padding: 0 var(--spacing-default); } } .exhibitor-list__item .exhibitor-logo img { position: absolute; background: var(--color-white); z-index: 1; } .exhibitor-list__item .exhibitor-logo__title { text-transform: uppercase; font-weight: 500; font-size: var(--step-1); line-height: 1.2; opacity: 0.08; margin: 0 auto; color: var(--color-border); } .exhibitor-list__item .exhibitor { --exhibitor-bg: var(--color-white); padding: var(--spacing-default) 0; text-align: center; border-top: 0; background: var(--color-neutral-grey); height: 350px; position: relative; } .exhibitor-list__item .exhibitor__name { margin: var(--spacing-small) 0; padding: 10px; } .exhibitor-list__item .exhibitor h2, .exhibitor-list__item .exhibitor h3, .exhibitor-list__item .exhibitor ul li { font-size: var(--step-1); } .exhibitor-list__item .exhibitor .field__flags__item { display: block; } .exhibitor-list__item .exhibitor__country { position: absolute; width: -12px; bottom: -6px; z-index: 1; } .exhibitor-list__item .exhibitor__country img { border-radius: 5px; border: 1px solid var(--color-background-alt); } .exhibitor-list__item .exhibitor .exhibitor__stand { margin-bottom: var(--spacing-small); font-size: var(--step--1); } .exhibitor-list__item .exhibitor .exhibitor__category { margin-bottom: var(--spacing-small); color: var(--color-darkgrey); font-weight: 600; line-height: 1.4; } .exhibitor-list__item .exhibitor .exhibitor__stand::before { display: block; background: var(--color-neutral-black); content: ""; width: 50px; height: 1.5px; margin: 0 auto var(--spacing-small); } .exhibitor-list__item .exhibitor .view-more { --color-button: #0066B9; background: var(--color-button); border: none; color: var(--color-white); font-size: var(--step--1); margin-top: var(--spacing-small); padding: 10px 15px; border-radius: 30px; font-weight: 600; } .exhibitor-list__item .exhibitor .view-more:hover { background: var(--color-button); color: var(--color-white); opacity: 0.9; } .exhibitor-list__item a, .exhibitor-list__item a:visited { color: var(--link-color); text-decoration-color: var(--link-color); } /* Grid Item Active & Expanded */ .grid .view-more { bottom: 30px; position: absolute; left: 50%; transform: translate(-50%, 0); } .grid .exhibitor-list--item.expanded { grid-column: 1/-1; } .grid .exhibitor-list__item.active { position: relative; padding: var(--space-m); border-radius: 1rem; grid-column: 1/-1; } @media only screen and (min-width: 1024px) { .grid .exhibitor-list__item.active { display: flex; } } .grid .exhibitor-list__item.active .btn-close { display: none; align-items: center; flex-direction: row-reverse; gap: 0.5rem; background: none; border: none; position: absolute; right: 15px; top: 15px; font-size: var(--step--1); color: var(--color-text-alt); height: 40px; } @media only screen and (min-width: 1024px) { .grid .exhibitor-list__item.active .btn-close { display: flex; } } .grid .exhibitor-list__item.active .btn-close svg { width: 15px; fill: var(--color-text-alt); } .grid .exhibitor-list__item.active figure { position: relative; border: 5px solid var(--color-border-alt); border-radius: 1rem; } @media only screen and (min-width: 1024px) { .grid .exhibitor-list__item.active figure { width: 50%; margin: 0; } } .grid .exhibitor-list__item.active .exhibitor .view-more { display: none; } .exhibitor-list__item.active .exhibitor-details { display: block !important; padding: var(--spacing-medium) 0 0; width: 100%; border-radius: var(--border-radius-alt); } @media only screen and (min-width: 1024px) { .exhibitor-list__item.active .exhibitor-details { display: flex !important; flex-direction: row-reverse; align-items: center; } } @media only screen and (min-width: 1024px) { .exhibitor-list__item.active .exhibitor-details > ul { display: flex; width: 100%; } } .exhibitor-list__item.active .exhibitor-details > ul > li:nth-of-type(1) { display: flex; align-items: center; flex-direction: column; margin-block-end: var(--space-l); padding-inline: 0; } @media only screen and (min-width: 1024px) { .exhibitor-list__item.active .exhibitor-details > ul > li:nth-of-type(1) { width: 50%; border-right: var(--border-width-r) solid var(--color-border); margin-right: var(--spacing-large); } } .exhibitor-list__item.active .exhibitor-details > ul > li:nth-of-type(1) a, .exhibitor-list__item.active .exhibitor-details > ul > li:nth-of-type(1) a:visited { color: var(--link-color); text-decoration-color: var(--link-color); } .exhibitor-list__item.active .exhibitor-details > ul > li:nth-of-type(2) { text-align: center; } @media only screen and (min-width: 1024px) { .exhibitor-list__item.active .exhibitor-details > ul > li:nth-of-type(2) { text-align: left; width: 66%; } } .exhibitor-list__item.active .exhibitor-details > ul > li:nth-of-type(2) a, .exhibitor-list__item.active .exhibitor-details > ul > li:nth-of-type(2) a:visited { color: var(--color-neutral-grey); text-decoration-color: var(--color-neutral-grey); } .exhibitor-list__item.active .exhibitor-details .social-networks { display: flex; grid-gap: 1em; align-items: center; margin-bottom: var(--spacing-medium); } .exhibitor-list__item.active .exhibitor-details .btn-close { display: flex; align-items: center; flex-direction: row-reverse; gap: 0.5rem; background: var(--color-border); border: none; border-radius: 45px; padding: 15px; } @media only screen and (min-width: 1024px) { .exhibitor-list__item.active .exhibitor-details .btn-close { display: flex; } } .exhibitor-list__item.active .exhibitor-details .btn-close svg { width: 15px; } /* List View Display (Basic Profile) */ @media only screen and (min-width: 768px) { .list-view { display: grid; } } .list-view .expanded figure { outline: var(--border-width-r) solid var(--exhibitor-card-bg); border-radius: 5px; } .list-view .exhibitor-list__item:not(:first-of-type) { margin: var(--spacing-default) 0; } .list-view .exhibitor-list__item:before { display: none; } .list-view .exhibitor-list__item { padding: var(--spacing-small); display: block; flex-direction: column; justify-content: center; } @media only screen and (min-width: 768px) { .list-view .exhibitor-list__item { flex-direction: row; justify-content: left; align-items: center; } } .list-view .exhibitor-list__item .exhibitor-logo { border-radius: 0; border: 5px solid var(--color-body); } .list-view .exhibitor-list__item .exhibitor-logo img { width: 180px; } .list-view .exhibitor-list__item .exhibitor { text-align: left; margin-top: var(--space-s); border: none; height: auto; padding-left: var(--spacing-small) !important; } @media only screen and (min-width: 768px) { .list-view .exhibitor-list__item .exhibitor { width: 100%; margin-top: 0; padding-left: var(--spacing-default) !important; min-height: 100px; } } .list-view .exhibitor-list__item .exhibitor .exhibitor__stand::before { margin-left: 0; } .list-view .exhibitor-list__item .exhibitor-logo { width: 250px; margin: 0 auto; } @media only screen and (min-width: 1024px) { .list-view .exhibitor-list__item .exhibitor-logo { height: 86px; } } .list-view .exhibitor-list__item .exhibitor__country { display: none; top: 15px; left: 15px; } .list-view .exhibitor-list__item .exhibitor__country img { padding: 0; } .list-view .exhibitor-list__item .exhibitor { --exhibitor-bg: var(--color-white); display: grid; grid-template-columns: 1fr auto; padding: 0; gap: var(--space-2xs); } .list-view .exhibitor-list__item .exhibitor .exhibitor__name { grid-column: 1; align-self: end; max-width: 35rem; padding: 0; } .list-view .exhibitor-list__item .exhibitor .exhibitor__stand { grid-column: 1; } .list-view .exhibitor-list__item .exhibitor .exhibitor__stand + p { display: contents; } .list-view .exhibitor-list__item .exhibitor .exhibitor__stand + p .view-more { --view-more-bg: var(--color-button); grid-row: 3/-2; grid-column: 2; background: var(--view-more-bg); text-decoration: none; font-weight: bold; border-radius: 0; border: none; color: var(--color-white); margin-top: 0; } @media only screen and (min-width: 1024px) { .list-view .exhibitor-list__item .exhibitor .exhibitor__stand + p .view-more { margin-top: 0; padding: 0 var(--spacing-default); } } .list-view .exhibitor-list__item .exhibitor .exhibitor__stand + p .view-more:focus, .list-view .exhibitor-list__item .exhibitor .exhibitor__stand + p .view-more:hover { --view-more-bg: var(--color-text-default); --link-color: var(--color-white); cursor: pointer; } .list-view .exhibitor-list__item.active { flex-direction: column; } .list-view .exhibitor-list__item.active .exhibitor__country { top: 15%; } .list-view .exhibitor-list__item.active .exhibitor-details { margin-top: var(--spacing-default); padding-bottom: var(--spacing-medium); } @media only screen and (min-width: 768px) { .list-view .exhibitor-list__item figure { flex-direction: row; align-items: center; overflow: hidden; } } .list-view .exhibitor-details { padding-top: var(--spacing-default) !important; } .list-view .exhibitor-details ul > li:nth-of-type(1) { --color-border: var(--color-border-alt); } .list-view .btn-close { display: none !important; } @media only screen and (min-width: 1024px) { .list-view .exhibitor-tags { position: absolute; top: 10px; left: -30px; } } @media only screen and (min-width: 1024px) { .list-view .exhibitor-tags li { border-radius: 0 !important; } } /*-------------------------------------------------- Basic Profile Styles --------------------------------------------------*/ .basic-profile .exhibitor-logo__title { text-transform: uppercase; font-size: var(--step-1); color: #ccc; width: 20ch; display: block; line-height: 1; } .basic-profile .exhibitor-logo { background: var(--color-white); border-bottom: 1px solid var(--color-white); } /*-------------------------------------------------- Exhibitor Filter & Facets --------------------------------------------------*/ .facets-checkbox { display: none; } .exhibitor-filter-items { display: grid; gap: var(--space-m); margin-bottom: var(--space-xl); } @media only screen and (min-width: 768px) { .exhibitor-filter-items { grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: var(--spacing-default); } } .exhibitor-filter-items div { position: relative; } .toggle-title-exhibitor { background: var(--color-body) var(--caret-down) no-repeat 95%; background-size: 20px; padding: var(--space-s); border: 3px solid var(--color-border-alt); display: block; font-weight: 700; font-size: var(--step--1); } .toggle-title-exhibitor:hover { cursor: pointer; } .toggle-title-exhibitor.minus { background: var(--color-body) var(--caret-up) no-repeat 95%; background-size: 20px; } .toggle-title-exhibitor.minus + .toggle-section { --toggle-link-bg: var(--color-neutral-grey); background: var(--toggle-link-bg); } @media only screen and (min-width: 768px) { .toggle-title-exhibitor.minus + .toggle-section { width: 400px; position: absolute; top: 70px; z-index: 10; border: none; } } .toggle-title-exhibitor.minus + .toggle-section ul li { background: none; } .exhibitor-list--item .toggle-section { display: block; } @media only screen and (min-width: 768px) { .exhibitor-list--item .toggle-section { background: var(--toggle-link-bg); position: absolute; z-index: 9; border: 3px solid var(--color-border-alt); top: -3px; padding: var(--spacing-medium); } } .exhibitor-list--item .toggle-section ul li { background: none; } .toggle-section { padding: var(--spacing-m); box-shadow: var(--box-shadow); padding-block: var(--space-m); } .toggle-section .facetapi-limit-link { margin-bottom: var(--spacing-default); display: block; } .facetapi-facetapi-checkbox-links { margin-bottom: 0 !important; } .facetapi-facetapi-checkbox-links li { border-bottom: none !important; } .facetapi-facetapi-checkbox-links li .facetapi-checkbox { padding-left: var(--spacing-default); font-weight: var(--font-weight); } .facetapi-facetapi-checkbox-links li span { padding-left: 20px; font-weight: 600; color: var(--link-color); } .exhibitor__name { text-transform: uppercase; font-weight: 700; } /*-------------------------------------------------- Category & Facet Links --------------------------------------------------*/ .category-links { display: flex; gap: var(--spacing-small); flex-wrap: wrap; } .category-link, .category-link-visitor { display: inline-block; position: relative; left: 10px; padding: 3px 15px 3px 30px !important; } .category-link a, .category-link-visitor a { position: absolute; height: 100%; width: 100%; left: 10px; text-decoration: none; } .category-link a:hover, .category-link-visitor a:hover { --close-icon: var(--close-icon-white); color: var(--color-white); text-decoration: none; } .category-link a .search-x, .category-link-visitor a .search-x { --close-icon: var(--close-icon-active); background: var(--close-icon) 0; text-indent: -9995px; display: block; background-repeat: no-repeat; background-size: 15px; } .category-link:hover a .search-x, .category-link-visitor:hover a .search-x { --close-icon: var(--close-icon-white); } .js-facets-links { gap: var(--spacing-small); display: flex; flex-flow: nowrap; overflow-x: scroll; padding: var(--spacing-small) 0 var(--spacing-default) 1px !important; } @media only screen and (min-width: 768px) { .js-facets-links { padding-top: var(--spacing-medium) !important; } } .js-facets-links li { flex-shrink: 0; } .js-facets-links li span { padding-left: 20px; } ul li.facet-item:before { display: none; } .facet-item { display: block; padding: 0; margin: 0; } .facet-item label { width: 100%; padding: 0 var(--space-s); font-size: 17px; font-weight: 400; } .facetapi-facetapi-links li.leaf a, .facet-item a, .category-link { font-size: var(--step--1); padding: 5px 10px; border-radius: 15px; background: var(--color-neutral-grey); text-decoration: none; transition: var(--transition); color: var(--color-text-link); } .facetapi-facetapi-links li.leaf a:hover, .facet-item a:hover, .category-link:hover { background: var(--color-text-link); color: var(--color-white); text-decoration: none; } /*-------------------------------------------------- AZ Filter --------------------------------------------------*/ .block-facet--glossaryaz { display: flex; justify-content: center; background: var(--color-neutral-grey); padding-block: var(--space-2xs); margin-block-end: var(--space-l); margin: 0; } .block-facet--glossaryaz ul { display: flex; flex-wrap: wrap; justify-content: center; } .block-facet--glossaryaz ul li a { font-size: var(--step-0); } /*-------------------------------------------------- Reset CTA Button --------------------------------------------------*/ .reset-cta { background: #0099F1 var(--clear-icon) no-repeat 15px; padding: 13px var(--space-xl) var(--space-xs) var(--space-2xl); border-radius: 15px; color: var(--color-white); font-weight: 500; font-size: var(--step--1); transition: var(--transition); border: none; background-size: 25px; } .reset-cta:hover { background: var(--color-text-default) var(--clear-icon) no-repeat 15px; background-size: 22px; } /*-------------------------------------------------- Popular Categories & Selected Filters --------------------------------------------------*/ @media only screen and (min-width: 768px) { .popular-categories { overflow: hidden; } } .popular-categories, .selected-filters { display: grid; grid-template-columns: 1fr; align-items: center; margin: var(--space-m) 0 var(--space-l); } @media only screen and (min-width: 768px) { .popular-categories, .selected-filters { gap: var(--spacing-small); grid-template-columns: auto 1fr; margin: var(--space-s) 0 var(--space-m); } } .popular-categories p, .selected-filters p { font-size: var(--step--1); margin: 0; font-weight: 600; } .selected-filters { row-gap: var(--spacing-small); } @media only screen and (min-width: 768px) { .selected-filters { row-gap: 0; } } .selected-filters + a { flex-shrink: 0; } .popular-categories p { font-size: var(--step--1); } @media only screen and (min-width: 768px) { .popular-categories p { width: 10ch; line-height: 1.2; } } /*-------------------------------------------------- Checkbox Styles --------------------------------------------------*/ input[type=checkbox]::before { content: ""; margin-right: 12px; display: inline-block; vertical-align: text-top; width: 20px; height: 20px; background: var(--color-white); border: 2px solid #c7c7c7; position: relative; top: -7px; } input[type=checkbox]:checked::after { content: ""; position: absolute; left: 25px; top: 2px; background: var(--color-white); width: 2px; height: 2px; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; transform: rotate(45deg); } input[type=checkbox] { position: relative; cursor: pointer; padding: 0; margin-bottom: 0; } input[type=checkbox]:checked::before { background: var(--link-color); border: 2px solid var(--link-color); } /*-------------------------------------------------- Exhibitor Current Search & Views Form --------------------------------------------------*/ .exhibitor-current-search { display: flex; flex-direction: column; margin-bottom: var(--spacing-medium); border-bottom: 3px solid var(--color-border-alt); padding-bottom: var(--spacing-default); } @media only screen and (min-width: 768px) { .exhibitor-current-search { justify-content: space-between; flex-direction: row; padding-bottom: 0; } } #edit-submit-exhibitor-search-index-page { height: 100% !important; width: 100% !important; border-top-left-radius: 0; border-bottom-left-radius: 0; font-weight: var(--font-weight-bold); } .page-exhibitor-list .views-exposed-form { display: grid; grid-template-columns: 1fr 55px; margin-bottom: 0; margin-block-start: var(--space-l); } .page-exhibitor-list .views-exposed-form .form-autocomplete { padding: var(--spacing-small); height: 60px; transition: var(--transition); width: 100%; border-radius: 0; border: 4px solid var(--color-border-alt); margin: 0; } .page-exhibitor-list .views-exposed-form .button { background: var(--color-text-default) var(--search-icon) no-repeat 15px; background-size: 30px; position: relative; text-indent: -99999px; border: none; } .form-autocomplete { padding: var(--spacing-small); height: 35px; border: 3px solid var(--color-border-alt); width: 100%; } /*-------------------------------------------------- Autocomplete Options & Error Message --------------------------------------------------*/ .auto-category, .auto-company { font-weight: bold; } .ui-autocomplete { padding: 5px; background: #fff; line-height: 1.6; } .ui-autocomplete li.ui-menu-item { white-space: normal; margin: 0; padding: 5px; } .ui-autocomplete li.selected { background: #eee; color: inherit; text-decoration: underline; font-size: bold; cursor: pointer; } .ui-autocomplete li.ui-menu-item:before { display: none; } .ui-autocomplete p { margin: 0; } #autocomplete ul.links, #autocomplete ul.links li { background: none; } #autocomplete p { margin: 0; } .view-empty { background: #ffeaea; padding: 25px; border: 1px solid #eac1c1; color: #995f5f; } /*-------------------------------------------------- Az Filter & Facets --------------------------------------------------*/ .az-filter ul, .item-list .facetapi-search-api-glossary { display: flex; justify-content: center; background-color: var(--color-secondary-light); padding: var(--spacing-small); margin-bottom: var(--spacing-medium); gap: var(--spacing-small); flex-wrap: wrap; } .az-filter ul li, .item-list .facetapi-search-api-glossary li { padding: 0; margin: 0; margin-right: var(--spacing-small); display: inline-block; } .az-filter ul li a, .item-list .facetapi-search-api-glossary li a { text-decoration: none; color: var(--color-text-default); } .az-filter.hidden { display: none; } .js-facets-links li span { padding-left: 0; } ul li.facet-item:before { display: none; } .facet-item { display: block; padding: 0; } .facet-item label { width: 100%; padding: 0 var(--space-s); } /*-------------------------------------------------- Category Bullets & Listing --------------------------------------------------*/ .facetapi-facetapi-links li.leaf a, .facet-item a, .category-link { font-size: var(--step--1); padding: 5px 10px; border-radius: 15px; background: var(--color-neutral-grey); text-decoration: none; transition: var(--transition); color: var(--color-text-link); } .facetapi-facetapi-links li.leaf a:hover, .facet-item a:hover, .category-link:hover { background: var(--color-text-link); color: var(--color-white); text-decoration: none; } .block-facet--glossaryaz { display: flex; justify-content: center; background: var(--color-neutral-grey); padding-block: var(--space-2xs); margin-block-end: var(--space-l); } .block-facet--glossaryaz ul { display: flex; flex-wrap: wrap; justify-content: center; } .block-facet--glossaryaz ul li a { font-size: var(--step-0); } /*-------------------------------------------------- Category Listing & Basic Profile --------------------------------------------------*/ .category-listing h3 { margin-block-end: var(--space-s); font-size: var(--step-1); } .basic-profile .exhibitor-logo__title { text-transform: uppercase; font-size: var(--step-1); color: #ccc; width: 20ch; display: block; line-height: 1; } .basic-profile .exhibitor-logo { background: var(--color-white); border-bottom: 1px solid var(--color-white); } /*-------------------------------------------------- Block facet CTA --------------------------------------------------*/ #submit-country-visitor, #submit-categories-visitor, #submit-sectors-visitor, #submit-categories { color: var(--color-button-text); background-color: var(--color-button); outline: var(--border-width-l) solid var(--color-button-border); text-transform: uppercase; padding-block: var(--space-xs) var(--space-xs); padding-inline: var(--space-s); border-radius: var(--border-radius-r); text-align: center; display: inline-block; cursor: pointer; line-height: 1.2; text-decoration: none; transition: var(--animate-duration) cubic-bezier(0.19, 1, 0.22, 1); font-weight: var(--font-weight-bd); position: relative; font-size: var(--step--1); border: none; margin-block-end: var(--space-s); margin-inline-start: var(--space-s); } .facets-soft-limit-link { margin-block-end: var(--space-s); display: block; margin-inline-start: var(--space-s); font-size: 18px; } /* Taxonomy -------------------------------------------*/ .taxonomy-page .feed-icon { display: none; } .taxonomy-page .posts { margin-block-end: var(--space-xl); margin-block-start: var(--space-xl); } /* Lex europe EXPROM 2025 -------------------------------------------*/ [data-user-color-scheme=lex-exprom-2025] { --titlefont: "stinger-variable", sans-serif; --color-primary: #E13C2C; --color-primary-light: hsl(302, 28%, 93%); --color-text-default: #04376A; --color-secondary: #E13C2C; --color-secondary-light: #FFB6D9; --color-neutral-grey: #F8F4FA; --color-filter: #6445BB; --icon-globe: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuMy4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQ2KSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICMwNDM3NzQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMTUuMSw0NzYuM2MtMjUtMjYuNC01NS41LTY3LjYtNzIuOS0xMjQuM0g1My42YzMwLjMsNjMuOCw5MCwxMTEuMSwxNjEuNSwxMjQuM1pNMjE3LjUsNDI5LjhjMTQsMTguNSwyNy45LDMyLjQsMzguNSw0MS42LDEwLjUtOS4zLDI0LjUtMjMuMSwzOC41LTQxLjYsMTUuNC0yMC4zLDMwLjctNDYuMSw0MS43LTc3LjdoLTE2MC4zYzExLDMxLjYsMjYuMyw1Ny40LDQxLjcsNzcuN2gtLjFaTTE2MCwyNTZjMCwyMy4xLDIuNSw0NC41LDYuOCw2NGgxNzguNGM0LjMtMTkuNSw2LjgtNDAuOSw2LjgtNjRzLTIuNS00NC41LTYuOC02NGgtMTc4LjRjLTQuMywxOS41LTYuOCw0MC45LTYuOCw2NGgwWk0xMzQuMSwxOTJINDEuM2MtNiwyMC4zLTkuMyw0MS44LTkuMyw2NHMzLjIsNDMuNyw5LjMsNjRoOTIuOGMtMy45LTE5LjgtNi4xLTQxLjEtNi4xLTY0czIuMi00NC4yLDYuMS02NFpNMTc1LjgsMTYwaDE2MC4zYy0xMS0zMS42LTI2LjMtNTcuNC00MS43LTc3LjctMTQtMTguNS0yNy45LTMyLjQtMzguNS00MS42LTEwLjUsOS4zLTI0LjUsMjMuMS0zOC41LDQxLjYtMTUuNCwyMC4zLTMwLjcsNDYuMS00MS43LDc3LjdoLjFaTTM3Ny45LDE5MmMzLjksMTkuOCw2LjEsNDEuMSw2LjEsNjRzLTIuMiw0NC4yLTYuMSw2NGg5Mi44YzYtMjAuMyw5LjMtNDEuOCw5LjMtNjRzLTMuMi00My43LTkuMy02NGgtOTIuOFpNNDU4LjUsMTYwYy0zMC4zLTYzLjgtOTAtMTExLjEtMTYxLjUtMTI0LjMsMjUsMjYuNCw1NS41LDY3LjYsNzIuOSwxMjQuM2g4OC42Wk0xNDIuMiwxNjBjMTcuNS01Ni42LDQ3LjktOTcuOSw3Mi45LTEyNC4zLTcxLjYsMTMuMi0xMzEuMiw2MC41LTE2MS41LDEyNC4zaDg4LjYsMFpNMjk2LjksNDc2LjNjNzEuNi0xMy4yLDEzMS4yLTYwLjQsMTYxLjUtMTI0LjNoLTg4LjZjLTE3LjUsNTYuNi00Ny45LDk3LjktNzIuOSwxMjQuM1pNMjU2LDUxMkMxMTQuNiw1MTIsMCwzOTcuNCwwLDI1NlMxMTQuNiwwLDI1NiwwczI1NiwxMTQuNiwyNTYsMjU2LTExNC42LDI1Ni0yNTYsMjU2WiIvPgo8L3N2Zz4=); /*= shapes */ /*= features homepage */ /*= speakers homepage */ /* checklist */ /* benefits row */ object-position: right; } @media only screen and (min-width: 1450px) { [data-user-color-scheme=lex-exprom-2025] .front .audience:after { display: block; width: 500px; height: 500px; content: ""; position: absolute; right: -350px; background: url("../img/lex-2025-badge.png"); background-size: cover; } } [data-user-color-scheme=lex-exprom-2025] h1, [data-user-color-scheme=lex-exprom-2025] .h1, [data-user-color-scheme=lex-exprom-2025] h2, [data-user-color-scheme=lex-exprom-2025] .h2, [data-user-color-scheme=lex-exprom-2025] h3, [data-user-color-scheme=lex-exprom-2025] .h3, [data-user-color-scheme=lex-exprom-2025] h4, [data-user-color-scheme=lex-exprom-2025] .h4, [data-user-color-scheme=lex-exprom-2025] h5, [data-user-color-scheme=lex-exprom-2025] .h5 { font-family: "stinger-variable", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; } [data-user-color-scheme=lex-exprom-2025] .hero h1 { font-variation-settings: "wdth" 100, "wght" 800; } @media only screen and (min-width: 1500px) { [data-user-color-scheme=lex-exprom-2025] .hero-section .hero-wrapper { margin-block-end: 15rem; } } @media only screen and (min-width: 768px) { [data-user-color-scheme=lex-exprom-2025] .hero-section .hero-wrapper { height: 580px; width: 100%; } } @media only screen and (min-width: 1024px) { [data-user-color-scheme=lex-exprom-2025] .hero-section .hero--box { padding-inline: 15px; top: 404px; max-width: var(--max-width); } } [data-user-color-scheme=lex-exprom-2025] .video-paragraph::after { content: ""; background: transparent; width: 250px; height: 250px; display: block; position: absolute; top: -194px; left: -200px; border-radius: var(--border-radius-l); z-index: -1; border: 33px var(--color-background-default) solid; } [data-user-color-scheme=lex-exprom-2025] .audience > div:first-of-type h2::after { content: ""; background: transparent; border: 33px var(--color-background-default) solid; width: 400px; height: 400px; display: block; position: absolute; left: 80px; border-radius: var(--border-radius-l); z-index: -1; top: 0; } [data-user-color-scheme=lex-exprom-2025] .hero-box { background-size: cover; } [data-user-color-scheme=lex-exprom-2025] .hero-box .dash::after { background: var(--color-white); } [data-user-color-scheme=lex-exprom-2025] .hero-box:before { /*content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-3.png) no-repeat; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain;*/ } [data-user-color-scheme=lex-exprom-2025] .hero-box.graphic--right:before { content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-32.png) no-repeat; display: block; position: absolute; top: -80px; left: unset; right: -80px; display: block; background-size: contain; } [data-user-color-scheme=lex-exprom-2025] .hero-box.visit:before { content: ""; height: 220px; width: 220px; background: url(../img/gess/dragon-32.png) no-repeat; display: block; position: absolute; top: -80px; left: -80px; display: block; background-size: contain; } [data-user-color-scheme=lex-exprom-2025] .event-feature-card img { width: 150px; } [data-user-color-scheme=lex-exprom-2025] .audience h2::after { top: 90px; left: 330px; } [data-user-color-scheme=lex-exprom-2025] #features > div:nth-of-type(1) { background: url(../img/gess/dragon-01.png) no-repeat right; background-size: var(--graphics-size); } [data-user-color-scheme=lex-exprom-2025] #speakers > div:nth-of-type(1) { background: url(../img/gess/dragon-04.png) no-repeat right; background-size: var(--graphics-size); } [data-user-color-scheme=lex-exprom-2025] .steps-cta { color: var(--color-white); background: url("../img/lex-2025-grass.jpg"); background-size: cover; } [data-user-color-scheme=lex-exprom-2025] .steps-cta svg { --color-icon-bg: var(--color-primary); } [data-user-color-scheme=lex-exprom-2025] .steps-cta svg:not(.block-icon) { display: none; } [data-user-color-scheme=lex-exprom-2025] .steps-cta .cta-btn a { color: #006633; background-color: var(--color-white); outline: var(--border-width-l) solid var(--color-button-border); } [data-user-color-scheme=lex-exprom-2025] .steps-cta ol li::before { background: var(--color-white); color: #28701D; font-size: var(--step-3); outline: none; height: 60px; width: 60px; line-height: 1.8; font-weight: var(--font-weight-sbd); display: flex; align-items: center; justify-content: center; } [data-user-color-scheme=lex-exprom-2025] .steps-cta:before { /*content: ""; height: 200px; width: 100px; background: url(../img/lex/stars-lex.png) no-repeat; display: block; position: absolute; top: -50px; right: 50px; display: block; background-size: contain;*/ } [data-user-color-scheme=lex-exprom-2025] .checklist-box { background: #E4EEFD; } [data-user-color-scheme=lex-exprom-2025] .checklist-box:before { /*content: ""; height: 220px; width: 400px; background: url(../img/gess/dragon-skin.png) no-repeat; display: block; position: absolute; top: 200px; left: -135px; display: block; background-size: contain;*/ } [data-user-color-scheme=lex-exprom-2025] .benefits-row { background: url(../img/gess/dragon-04.png) no-repeat top right; background-size: var(--graphics-size); } [data-user-color-scheme=lex-exprom-2025] .statistic-items .number { font-variation-settings: "wdth" 100, "wght" 800; letter-spacing: -4.5px; } [data-user-color-scheme=lex-exprom-2025] .hero-section .hero-wrapper::before { content: ""; background: transparent; transition: all var(--animate-duration-faster) ease; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.7; } [data-user-color-scheme=lex-exprom-2025] .statistic-items .number { font-weight: 800; font-variation-settings: normal; } /* Classic dual color -------------------------------------------*/ .fanexpo { --graphics-size: 180px; --color-dash: var(--color-secondary); } @media only screen and (min-width: 1024px) { .fanexpo .hero-section .hero--box { top: 340px; } } @media only screen and (min-width: 768px) { .fanexpo .mega-menu { top: 41.8rem; } } @media only screen and (min-width: 768px) { .fanexpo .skinny.mega-menu { top: 86.5px; } } .fanexpo .hero--box .hero-inner { --hero-box-bg: #18181a; background: var(--hero-box-bg); } .fanexpo .steps-cta { --color-background-alt: #18181a; background: var(--color-background-alt); } .fanexpo .hero--box .hero-links li:nth-of-type(2) .hero-link-label { --hero-box-cta-2-color: #3A3B3C; --hero-box-cta-color: var(--hero-box-cta-2-color); --hero-box-cta-color-text: var(--hero-box-cta-2-color-text); } .fanexpo .hero--box .hero-links li:nth-of-type(1) .hero-link-label { --hero-box-cta-1-color-text: #161618; --hero-box-cta-color: var(--hero-box-cta-1-color); --hero-box-cta-color-text: var(--hero-box-cta-1-color-text); } .fanexpo .steps-cta { background: url(../img/homepage/fx-bg.jpg); background-size: cover; } .fanexpo h1, .fanexpo .h1 { font-size: var(--step-7); letter-spacing: 0; } @media only screen and (min-width: 1500px) { .fanexpo h1, .fanexpo .h1 { font-size: var(--step-8); } } .fanexpo h2, .fanexpo .h2 { font-size: var(--step-6); letter-spacing: 0; } .fanexpo h3, .fanexpo .h3 { font-size: var(--step-4); letter-spacing: 0; } .fanexpo h4, .fanexpo .h4 { font-size: var(--step-3); letter-spacing: 0; line-height: 1; } .fanexpo h5, .fanexpo .h5 { font-size: var(--step-2); letter-spacing: 0; } .fanexpo .section-title { line-height: 1; letter-spacing: 0; } [data-user-color-scheme=asia-theme] .about-content svg, [data-user-color-scheme=asia-theme] .hero-box.hero-box--center svg, [data-user-color-scheme=asia-theme] .separator-special svg, [data-user-color-scheme=asia-theme] .steps-cta.svg-graphic--bottom-right svg:not(.block-icon), [data-user-color-scheme=asia-theme] .checklist-box svg, [data-user-color-scheme=asia-theme] .hero .svg-graphic--top-right svg:not(.block-icon), [data-user-color-scheme=asia-theme] .footer-links svg { display: none !important; } [data-user-color-scheme=asia-theme] .separator-special hr { margin-block-start: var(--space-xl); } @media only screen and (min-width: 850px) { [data-user-color-scheme=asia-theme] .hero-section .hero-wrapper { margin-block-end: 17rem; } } @media only screen and (min-width: 1024px) { [data-user-color-scheme=asia-theme] .hero-section .hero-wrapper { margin-block-end: 28rem; } } @media only screen and (min-width: 1200px) { [data-user-color-scheme=asia-theme] .hero-section .hero-wrapper { margin-block-end: 28rem; } } @media only screen and (min-width: 1024px) { [data-user-color-scheme=asia-theme] .hero-section .hero--box { padding-inline: 15px; top: 455px; max-width: var(--max-width); } } [data-user-color-scheme=asia-theme] #benefits svg { display: none; } [data-user-color-scheme=asia-theme] .steps-cta { --color-icon-bg: var(--color-primary); background: url("../img/lex-asia-steps.jpg"); } [data-user-color-scheme=asia-theme] .steps-cta ol li, [data-user-color-scheme=asia-theme] .steps-cta h2 { color: var(--color-white); } [data-user-color-scheme=asia-theme] .hero--box .hero-inner { background: url("../img/content-image.jpg"); background-size: cover; background-position-y: bottom; } [data-user-color-scheme=asia-theme] .hero-box.hero-box--center, [data-user-color-scheme=asia-theme] .checklist-box { background: url("../img/content-image.jpg"); background-position-y: bottom; background-size: cover; } [data-user-color-scheme=asia-theme] .checklist-box { --color-text-link: var(--color-text-default); } [data-user-color-scheme=asia-theme] .hero-box.hero-box--center h1 { background: transparent; } } /* demegnqi add */ .js-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center; transition-delay: var(--animate-duration); } .js-popup-content { background: white; padding: 20px 40px 40px 40px; border-radius: 5px; width: 80%; max-width: 500px; position: relative; } .js-popup-content-lg { background: white; padding: 20px 40px 40px 40px; border-radius: 5px; width: 80%; max-width: 800px; position: relative; } .js-popup-content-lg .two-col div { text-align: center; margin-bottom: 20px; } .js-popup-content-lg img { max-width: 250px; display: inline-block; margin-bottom: 10px; } .js-popup-content h4, .js-popup-content-lg h4 { text-align: center; margin-bottom: 20px; } .js-close-btn { z-index: 10; position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 1.4em; background: none; border: none; } .posts-sections h2 { margin-top: 60px; } .pagination { /*display: inline-block;*/ padding-left: 0; margin: 20px 0; border-radius: 4px; text-align: center; display: flex; justify-content: center; } .pagination > li { display: inline; } .pagination > li:before { content: ""; background: none; height: 0px; width: 0px; display: none; border-radius: 0px; border: none; } .pagination > li > a, .pagination > li > span { /*position: relative;*/ width: 45px; height: 45px; /*display: inline-block;*/ display: flex; align-items: center; justify-content: center; font-weight: 400; padding: 10px 12px; /*margin-left: -1px;*/ line-height: 1.42857143; color: var(--color-text-link); text-decoration: none; background-color: #fff; border: 1px solid var(--color-text-link); border-radius: 50%; transition: color var(--animate-duration) ease; font-size: 1em; text-align: center; } .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover { color: var(--color-text-link); background-color: #eee; /*border-color: #ddd;*/ border: 1px solid var(--color-text-link); } .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { /*z-index: 2;*/ color: #fff; cursor: default; background-color: var(--color-text-link); border-color: var(--color-text-link); } .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd } .quicktabs-hide { display: none; } ul.quicktabs-tabs { margin-top: 0; } ul.quicktabs-tabs li { display: inline; background: none; list-style-type: none; padding: 2px; white-space: nowrap; } .steps-cta a, .steps-cta a:visited { color: #fff; } .wechat { display: flex; justify-content: space-between; justify-items: center; } .wechat div { width: 50%; text-align: center; } .wechat p { margin-top: 8px; font-size: 0.75em; } .wechat img { width: 90%; }