/* ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com *//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: currentColor; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. */ html { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: Standard, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font family by default. 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } /** * Non-graphical global CSS rules */ html{ min-height: 100vh; } .content{ /* @apply overflow-hidden; */ } /** Mockup **/ body{ } :root{ --vh: 100vh; --spacing-size: 0.625rem; } /* 10px */ @media (min-width: 62rem){ :root{ --spacing-size: var(--grid-gutter) } } /** * Graphical global CSS rules */ html{ } body{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .content{ height: 100%; } body.has-menu-toggled #site-content-wrapper{ position: fixed; top: var(--header-height); left: 0px; width: 100%; } .skip-link{ position: absolute; top: -9999px; left: -9999px; display: block; height: 0px; } .skip-link a:focus{ position: fixed; top: 1.25rem; left: 1.25rem; z-index: 50; height: auto; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 1rem; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } @font-face { font-family: 'Standard'; src: url('../fonts/standard-book-webfont.woff2') format('woff2'), url('../fonts/standard-book-webfont.woff') format('woff'), url('../fonts/standard-book-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Standard'; src: url('../fonts/standard-book-italic-webfont.woff2') format('woff2'), url('../fonts/standard-book-italic-webfont.woff') format('woff'), url('../fonts/standard-book-italic-webfont.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Standard'; src: url('../fonts/standard-bold-webfont.woff2') format('woff2'), url('../fonts/standard-bold-webfont.woff') format('woff'), url('../fonts/standard-bold-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Standard'; src: url('../fonts/standard-bold-italic-webfont.woff2') format('woff2'), url('../fonts/standard-bold-italic-webfont.woff') format('woff'), url('../fonts/standard-bold-italic-webfont.ttf') format('truetype'); font-weight: bold; font-style: italic; } html{ text-rendering: geometricPrecision; } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ /* @apply font-bold; */ } h1{ /* @apply font-bold; */ } h2{ /* @apply font-bold; */ } h3{ /* @apply font-bold; */ } h4{ /* @apply font-bold; */ } h5{ /* @apply font-bold; */ } h6{ /* @apply font-bold; */ } p{ margin-bottom: 0.9375rem; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } @media (min-width: 48rem){ p{ margin-bottom: 3.125rem; } } p a{ text-decoration-line: underline; } :root{ --grid-offset: 0; } @media (min-width: 48rem){ :root{ --grid-offset: 120px } } :root{ --grid-gutter: 0.46875rem; } /* 7.5px */ @media (min-width: 80rem){ :root{ --grid-gutter: 0.625rem /* 10px */ } } .grid-container, .block-container{ width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .grid-container, .block-container{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .grid-container, .block-container{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .grid-container, .block-container{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .grid-container, .block-container{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .grid-container :where(.grid-container), .grid-container :where(.block-container), .block-container :where(.grid-container), .block-container :where(.block-container){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .columns{ margin-left: calc(var(--grid-gutter) * -1); margin-right: calc(var(--grid-gutter) * -1); display: flex; flex-wrap: wrap; } .column{ padding-left: var(--grid-gutter); padding-right: var(--grid-gutter); } :root{ --spacing-lg: 3.125rem; } @layer utilties{ .spacing-base{ margin-bottom: 1.5625rem; } @media (min-width: 48rem){ .spacing-base{ margin-bottom: 2.1875rem; } } .spacing-lg{ margin-bottom: 2.1875rem; } @media (min-width: 48rem){ .spacing-lg{ margin-bottom: 4.5rem; } } .spacing-xl{ margin-bottom: 4.5rem; } @media (min-width: 80rem){ .spacing-xl{ margin-bottom: 7.5rem; } } } .container{ width: 100%; } @media (min-width: 40rem){ .container{ max-width: 40rem; } } @media (min-width: 48rem){ .container{ max-width: 48rem; } } @media (min-width: 62rem){ .container{ max-width: 62rem; } } @media (min-width: 80rem){ .container{ max-width: 80rem; } } @media (min-width: 120rem){ .container{ max-width: 120rem; } } @media (min-width: 128rem){ .container{ max-width: 128rem; } } .mt-12{ margin-top: 3rem; } .mt-16{ margin-top: 4rem; } .mt-20{ margin-top: 5rem; } .mt-24{ margin-top: 6rem; } .mt-32{ margin-top: 8rem; } .mt-40{ margin-top: 10rem; } .mb-16{ margin-bottom: 4rem; } .mb-20{ margin-bottom: 5rem; } .mb-24{ margin-bottom: 6rem; } .mb-32{ margin-bottom: 8rem; } .mb-40{ margin-bottom: 10rem; } .block{ display: block; } .hidden{ display: none; } .w-full{ width: 100%; } .grow{ flex-grow: 1; } .resize{ resize: both; } .overflow-x-clip{ overflow-x: clip; } /* .h1{ @apply text-3xl lg:text-4xl xl:text-5xl leading-snug; } .h2{ @apply text-2xl lg:text-3xl xl:text-4xl leading-snug; } .h3{ @apply text-2xl lg:text-4xl xl:text-3xl leading-snug; } .h4{ @apply text-lg lg:text-xl xl:text-2xl leading-snug; } .h5{ @apply text-lg xl:text-xl leading-snug; } .h6{ @apply text-base leading-snug; } */ .row{ width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .row{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .row{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .row{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } /* margin-right: calc(var(--grid-gutter) * 2); */ @media (min-width: 120rem){ .row{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .block-container{ width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .block-container{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .block-container{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .block-container{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .block-container{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .block-container :where(.block-container), .block-container :where(.grid-container){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-composition{ margin-bottom: 2.1875rem; } @media (min-width: 48rem){ .block-composition{ margin-bottom: 4.5rem; } } .block-has-margin{ margin-bottom: 2.1875rem; } @media (min-width: 48rem){ .block-has-margin{ margin-bottom: 4.5rem; } } .block-has-margin-sm{ margin-bottom: 2.1875rem; } @media (min-width: 48rem){ .block-has-margin-sm{ margin-bottom: 3.125rem; } } .block-accordion__inner{ border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); } .block-accordion__inner:last-child:not(:first-child){ border-bottom-width: 1px; } .block-accordion__inner > span{ position: relative; display: flex; min-height: 2.25rem; width: 100%; cursor: pointer; align-items: center; padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 3rem; padding-right: 1.25rem; font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .block-accordion__inner > span{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .block-accordion__inner > span{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; padding-left: 4rem; } } .block-accordion__inner > span::before{ content: ''; background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='black'/%3E%3C/svg%3E%0A"); background-size: 100%; transition: transform .2s ease; position: absolute; top: 0px; left: 0px; aspect-ratio: 1 / 1; width: 2.25rem; --tw-rotate: 0deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); background-position: center; background-repeat: no-repeat; } @media (min-width: 80rem){ .block-accordion__inner > span::before{ width: 3.125rem; } } .block-accordion__inner > span:hover{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-accordion__inner > span:hover::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A"); } .block-accordion__inner > div{ padding-top: 1.125rem; padding-bottom: 2.1875rem; padding-left: 3rem; padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 80rem){ .block-accordion__inner > div{ padding-left: 4rem; } } .block-accordion__inner > div > p{ margin-bottom: 0px; margin-bottom: 0; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-accordion__inner > div div[class^="block-"]{ margin-bottom: 0px; margin-bottom: 0; } .block-accordion__inner > div div[class^="block-"] p{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-accordion__inner.is-toggled{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-accordion__inner.is-toggled > span::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A"); --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); /* background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M34.545 16.868 16.867 34.546l-1.414-1.414 17.678-17.678 1.414 1.414Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M33.13 34.546 15.454 16.868l1.414-1.414 17.678 17.678-1.414 1.414Z' fill='%23fff'/%3E%3C/svg%3E"); */ } .block-accordion__inner.is-toggled .block-link::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='%23fff'/%3E%3C/svg%3E"); } .block-accordion__inner.is-toggled .block-link{ --tw-border-opacity: 1; border-color: rgb(83 90 90 / var(--tw-border-opacity)); } .block-accordion__inner.is-toggled .block-link:hover{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .block-accordion__inner.is-toggled .block-link:hover::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='%23000'/%3E%3C/svg%3E"); } .block-accordion__inner.is-toggled .block-link[href]:not(:where( [href^="#"], [href^="/"]:not([href^="//"]),))::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='white'/%3E%3C/svg%3E%0A"); } .block-accordion__inner.is-toggled .block-link[href]:not(:where( [href^="#"], [href^="/"]:not([href^="//"]),)):hover::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='black'/%3E%3C/svg%3E%0A"); } .block-accordion--2cols{ -moz-column-gap: calc(var(--grid-gutter) * 2); column-gap: calc(var(--grid-gutter) * 2); } @media (min-width: 80rem){ .block-accordion--2cols{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* @apply lg:w-1/2; */ .block-accordion--sm .block-accordion__inner > span{ padding-left: calc(2.25rem + 0.625rem); font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } .block-accordion--sm .block-accordion__inner > span::before{ width: 2.25rem; --tw-translate-y: -0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .block-accordion--sm .block-accordion__inner > div{ padding-top: 1rem; padding-bottom: 1rem; padding-left: calc(2.25rem + 0.625rem); } .block-carousel{ width: 100%; } .block-carousel .swiper .swiper-button-prev, .block-carousel .swiper .swiper-button-next{ top: 0px; margin-top: 0px; margin-top: 0; height: var(--carousel-img-height); width: 50%; } .block-carousel .swiper .swiper-button-prev::after,.block-carousel .swiper .swiper-button-next::after{ content: none; } .block-carousel .swiper .swiper-button-prev{ left: 0px; } .block-carousel .swiper .swiper-button-next{ right: 0px; } .block-carousel .swiper .swiper-slide{ height: auto; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .block-carousel .swiper .swiper-slide__img{ aspect-ratio: 3/2; height: auto; } .block-carousel .swiper .swiper-slide__img img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-carousel .swiper .swiper-slide__caption p{ margin-top: 2.1875rem; margin-bottom: 0px; margin-bottom: 0; height: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } .block-carousel .swiper .swiper-pagination{ position: absolute; top: calc(var(--carousel-img-height) + 0.625rem); display: flex; -moz-column-gap: 0.625rem; column-gap: 0.625rem; } .block-carousel .swiper .swiper-pagination .swiper-pagination-bullet{ margin: 0px; margin: 0; height: 1px; width: 100%; border-radius: 0px; --tw-bg-opacity: 1; background-color: rgb(163 173 173 / var(--tw-bg-opacity)); opacity: 1; } .block-carousel .swiper .swiper-pagination .swiper-pagination-bullet-active{ height: 3px; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } .block-events-list-row{ width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .block-events-list-row{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .block-events-list-row{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .block-events-list-row{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .block-events-list-row{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .block-events-list-row :where(.grid-container),.block-events-list-row :where(.block-container), .block-container :where(.block-events-list-row){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-container :where(.block-events-list-row){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-events-list-row__title{ border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); padding-top: 0.75rem; padding-bottom: 0.75rem; } .block-events-list-row__title h3{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } @media (min-width: 48rem){ .block-events-list-row__title h3{ font-size: 40px; font-size: 2.5rem; line-height: 50px; line-height: 3.125rem; } } @media (min-width: 80rem){ .block-events-list-row__title h3{ font-size: 44px; font-size: 2.75rem; line-height: 55px; line-height: 3.4375rem; } } .block-events-list-row-item{ display: grid; min-height: 96px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; -moz-column-gap: 1.25rem; column-gap: 1.25rem; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); padding-top: 0.625rem; padding-bottom: 0.625rem; } .block-events-list-row-item__img{ position: relative; display: none; height: 100%; } .block-events-list-row-item__img img{ position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-events-list-row-item__date{ grid-area: 1 / 1 / 2 / 7; } .block-events-list-row-item__date span{ display: block; } .block-events-list-row-item__date span:first-child{ font-weight: 700; } .block-events-list-row-item__title{ grid-area: 1 / 7 / 2 / 13; } .block-events-list-row-item__title p{ display: inline; font-weight: 700; font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } @media (min-width: 48rem){ .block-events-list-row-item__title p{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } .block-events-list-row-item__title span{ margin-left: 1rem; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } .block-events-list-row-item:hover .block-events-list-row-item__img{ grid-area: 1 / 1 / 2 / 3; display: block; } .block-events-list-row-item:hover .block-events-list-row-item__date{ grid-area: 1 / 3 / 2 / 7; } .block-featured-content-stacked{ margin-top: 3.125rem; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); padding-top: 1.5625rem; padding-bottom: 1.5625rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 80rem){ .block-featured-content-stacked{ margin-top: 4.5rem; padding-top: 2.1875rem; padding-bottom: 2.1875rem; } } .block-featured-content-stacked p{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-featured-content-stacked__inner .block-featured-content-stacked__img{ aspect-ratio: 3/2; } @media (min-width: 62rem){ .block-featured-content-stacked__inner .block-featured-content-stacked__img{ aspect-ratio: 2/1; } } @media (min-width: 80rem){ .block-featured-content-stacked__inner .block-featured-content-stacked__img{ aspect-ratio: 21/9; } } .block-featured-content-stacked__inner .block-featured-content-stacked__img img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-featured-content-stacked__inner .block-paragraph{ margin-top: 2.1875rem; } @media (min-width: 62rem){ .block-featured-content-stacked__inner .block-paragraph{ width: 91.666667%; } } .block-featured-content-stacked__inner .block-paragraph p{ margin-bottom: 0px; margin-bottom: 0; font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } @media (min-width: 48rem){ .block-featured-content-stacked__inner .block-paragraph p{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } .block-featured-content-columns{ margin-top: 3.125rem; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); padding-top: 1.5625rem; padding-bottom: 1.5625rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 80rem){ .block-featured-content-columns{ margin-top: 4.5rem; padding-top: 2.1875rem; padding-bottom: 2.1875rem; } } .block-featured-content-columns p{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-featured-content-columns__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: calc(var(--grid-gutter) * 2); column-gap: calc(var(--grid-gutter) * 2); } @media (min-width: 62rem){ .block-featured-content-columns__inner{ display: grid; } } .block-featured-content-columns__inner .block-featured-content-columns__img{ margin-bottom: 1.5625rem; height: 100%; } @media (min-width: 62rem){ .block-featured-content-columns__inner .block-featured-content-columns__img{ order: 2; margin-bottom: 0px; margin-bottom: 0; } } .block-featured-content-columns__inner .block-featured-content-columns__img img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-featured-content-columns__inner .block-featured-content-columns__content{ display: flex; flex-direction: column; } @media (min-width: 62rem){ .block-featured-content-columns__inner .block-featured-content-columns__content{ order: 1; } } .block-featured-content-columns__inner .block-featured-content-columns__content .block-title{ } .block-featured-content-columns__inner .block-featured-content-columns__content .block-paragraph{ margin-bottom: 1.5625rem; align-self: flex-end; } @media (min-width: 48rem){ .block-featured-content-columns__inner .block-featured-content-columns__content .block-paragraph{ margin-bottom: 3.125rem; } } .block-featured-content-columns__inner .block-featured-content-columns__content .block-paragraph p{ margin-bottom: 0px; margin-bottom: 0; font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 62rem){ .block-featured-content-columns__inner .block-featured-content-columns__content .block-link{ align-self: flex-end; } } .block-featured-content-cover{ position: relative; margin-bottom: 2.1875rem; aspect-ratio: 16 / 9; } .block-featured-content-cover__content{ position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 10; display: flex; aspect-ratio: 1 / 1; max-width: 25vw; flex-direction: column; justify-content: space-between; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-top: 1rem; padding-bottom: 1rem; padding-left: 0.75rem; padding-right: 0.75rem; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .block-featured-content-cover__content p{ font-weight: 700; font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .block-featured-content-cover__content p{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .block-featured-content-cover__content p{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } .block-featured-content-cover__content a{ display: block; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } .block-featured-content-cover__img{ height: 100%; width: 100%; } .block-featured-content-cover__img img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-featured-tabs{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); padding-top: 1.5625rem; padding-bottom: 1.5625rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 48rem){ .block-featured-tabs{ padding-top: 2.1875rem; padding-bottom: 2.1875rem; } } @media (min-width: 62rem){ .block-featured-tabs{ padding-top: 0px; padding-top: 0; } } .block-featured-tabs__tabs{ display: flex; padding-bottom: 1.5625rem; font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .block-featured-tabs__tabs{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .block-featured-tabs__tabs{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } @media (min-width: 48rem){ .block-featured-tabs__tabs{ padding-bottom: 2.1875rem; } } @media (min-width: 62rem){ .block-featured-tabs__tabs{ --tw-translate-y: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); padding-bottom: 0px; padding-bottom: 0; } } .block-featured-tabs__tabs button{ display: block; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } .block-featured-tabs__tabs button:not(:first-child){ margin-left: 0.5rem; } .block-featured-tabs__tabs button.is-selected{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-featured-tabs-tab{ display: none; } .block-featured-tabs-tab > div{ grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: calc(var(--grid-gutter) * 2); column-gap: calc(var(--grid-gutter) * 2); } @media (min-width: 62rem){ .block-featured-tabs-tab > div{ display: grid; } .block-featured-tabs-tab .block-featured-tabs-tab__content{ order: 1; align-self: flex-end; } } .block-featured-tabs-tab .block-featured-tabs-tab__content p{ margin-bottom: 0px; margin-bottom: 0; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } .block-featured-tabs-tab .block-featured-tabs-tab__img{ margin-bottom: 1.5625rem; aspect-ratio: 3/2; } @media (min-width: 48rem){ .block-featured-tabs-tab .block-featured-tabs-tab__img{ margin-bottom: 2.1875rem; } } @media (min-width: 62rem){ .block-featured-tabs-tab .block-featured-tabs-tab__img{ order: 2; margin-bottom: 0px; margin-bottom: 0; } } .block-featured-tabs-tab .block-featured-tabs-tab__img img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-files-list__inner > p{ margin-bottom: 1rem; font-weight: 700; } .block-files-list__inner ul{ display: flex; flex-wrap: wrap; gap: 0.9375rem; } .block-files-list__inner ul li a{ min-height: 2.25rem; position: relative; display: inline-flex; align-items: center; --tw-bg-opacity: 1; background-color: rgb(237 242 242 / var(--tw-bg-opacity)); padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 2.5rem; padding-right: 0.75rem; } .block-files-list__inner ul li a::before{ content: ''; background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m24.852 19.834-6.354 6.353-6.354-6.353.708-.708 5.146 5.147V9.5h1v14.773l5.146-5.147.708.708ZM27 28H10v-1h17v1Z' fill='%23000'/%3E%3C/svg%3E"); position: absolute; top: 0px; left: 0px; aspect-ratio: 1 / 1; width: 2.25rem; background-position: center; background-repeat: no-repeat; } .block-files-list__inner ul li:hover a{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-files-list__inner ul li:hover a::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m24.852 19.834-6.354 6.353-6.354-6.353.708-.708 5.146 5.147V9.5h1v14.773l5.146-5.147.708.708ZM27 28H10v-1h17v1Z' fill='%23fff'/%3E%3C/svg%3E"); } .block-grid-list{ container-type: inline-size; } .block-grid-list__inner{ display: grid; -moz-column-gap: calc(var(--grid-gutter) * 2); column-gap: calc(var(--grid-gutter) * 2); row-gap: 2.1875rem; } @media (min-width: 62rem){ .block-grid-list__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 80rem){ .block-grid-list__inner{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .block-grid-list__inner > div{ border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); padding-top: 0.5rem; } .block-grid-list__inner > div p{ margin-bottom: 0px; margin-bottom: 0; font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } .block-grid-list__inner > div p:first-child{ --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } @container (min-width: 35rem){ @media (min-width: 48rem){ .block-grid-list__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } } @container (min-width: 56rem) { @media (min-width: 62rem){ .block-grid-list__inner{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } } @container (min-width: 62rem) { @media (min-width: 80rem){ .block-grid-list__inner{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } } .block-hero-banner{ height: var(--hero-banner-height); margin-bottom: 2.5rem; overflow: hidden; width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .block-hero-banner{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .block-hero-banner{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .block-hero-banner{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .block-hero-banner{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .block-hero-banner :where(.grid-container),.block-hero-banner :where(.block-container), .block-container :where(.block-hero-banner){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-container :where(.block-hero-banner){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-hero-banner__img{ height: 100%; width: 100%; } .block-hero-banner__img img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-banner-scroll{ /* @apply h-[900px]; */ height: 160vh; position: relative; margin-bottom: 2.5rem; } .block-banner-scroll__content{ position: sticky; top: 100px; z-index: 10; padding-top: 2rem; } .block-banner-scroll__content h1{ font-size: 5.75vw; line-height: 110%; } .block-banner-scroll__content h1 span{ background: transparent; position: relative; } /* &::after{ content: ''; height: 90%; top: 10%; @apply absolute left-0 inline-block w-full bg-accent-200 -z-10; } */ .block-banner-scroll__content h1 span.is-active{ } .block-banner-scroll__images{ margin-left: var(--grid-offset); width: calc(100% - var(--grid-offset)); position: absolute; top: 0px; left: 0px; z-index: 0; height: 100%; } .block-banner-scroll__images .block-banner-scroll-img{ transition: opacity .1s ease; position: absolute; width: 30vw; opacity: 0; } .block-banner-scroll__images .block-banner-scroll-img picture{ aspect-ratio: 1 / 1; } .block-banner-scroll__images .block-banner-scroll-img picture img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-banner-scroll__images .block-banner-scroll-img:first-child{ right: 10vw; top: 30vh; opacity: 1 !important; } .block-banner-scroll__images .block-banner-scroll-img:nth-child(2){ left: 5vw; top: 70vh; opacity: 1 !important; } .block-banner-scroll__images .block-banner-scroll-img:nth-child(3){ right: 30vw; top: 200vh; } .block-banner-scroll__images .block-banner-scroll-img:nth-child(4){ right: 5vw; top: 150vh; } .block-banner-scroll__images .block-banner-scroll-img.is-visible{ /* @apply opacity-100; */ } .block-images-grid--black{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); padding-top: 3rem; padding-bottom: 3rem; } .block-images-grid__inner{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .block-images-grid__inner > div{ position: relative; } .block-images-grid__inner > div:first-child{ grid-area: 1 / 1 / 4 / 7; aspect-ratio: 4/5; } .block-images-grid__inner > div:nth-child(2){ grid-area: 1 / 7 / 2 / 10; } .block-images-grid__inner > div:nth-child(3){ grid-area: 1 / 10 / 2 / 13; } .block-images-grid__inner > div:nth-child(4){ grid-area: 2 / 7 / 4 / 10; } .block-images-grid__inner > div:nth-child(5){ grid-area: 2 / 10 / 4 / 13; } .block-images-grid__inner > div img{ position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-link{ /* @apply grid grid-cols-2 items-center; */ position: relative; display: flex; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .block-link{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .block-link{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } .block-link:last-child:not(:first-child){ border-bottom-width: 1px; } .block-link::before{ content: ''; background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='%23000'/%3E%3C/svg%3E"); background-size: 100%; position: absolute; top: 0px; left: 0px; aspect-ratio: 1 / 1; width: 2.25rem; background-position: center; background-repeat: no-repeat; } @media (min-width: 80rem){ .block-link::before{ width: 3.125rem; } } .block-link > span{ display: flex; min-height: 2.25rem; align-items: center; padding-top: 0.125rem; padding-bottom: 0.125rem; padding-left: 3rem; padding-right: 1.25rem; } @media (min-width: 80rem){ .block-link > span{ padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 4rem; } } .block-link:hover{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-link:hover::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='%23fff'/%3E%3C/svg%3E"); } .block-link[href]:not(:where( [href^="#"], [href^="/"]:not([href^="//"]),))::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='black'/%3E%3C/svg%3E%0A"); } .block-link[href]:not(:where( [href^="#"], [href^="/"]:not([href^="//"]),)) span span{ margin-left: 0.9375rem; --tw-translate-y: 0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); align-self: flex-start; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } .block-link[href]:not(:where( [href^="#"], [href^="/"]:not([href^="//"]),)):hover::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='white'/%3E%3C/svg%3E%0A"); } .block-link--white{ --tw-border-opacity: 1; border-color: rgb(83 90 90 / var(--tw-border-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .block-link--white::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='white'/%3E%3C/svg%3E"); } .block-link--white[href]:not(:where( [href^="#"], [href^="/"]:not([href^="//"]),))::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='white'/%3E%3C/svg%3E%0A"); } .block-links-list-columns{ margin-bottom: 4rem; } @media (min-width: 62rem){ .block-links-list-columns ul{ -moz-columns: 2; columns: 2; gap: calc(var(--grid-gutter)*2) } } /* @apply -mx-[var(--grid-gutter)]; */ .block-links-list-columns ul li{ /* @apply w-full px-[var(--grid-gutter)]; */ /* @apply border-t border-grey-200 flex items-center h-[3.5vw]; */ /* a{ @apply flex items-center h-full w-full text-size-lg; &::before{ content: ''; background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23000'/%3E%3C/svg%3E"); background-size: 24px 18px; @apply w-[50px] h-[50px] bg-no-repeat inline-block bg-center mr-4; } } &:nth-last-child(2), &:last-child{ @apply border-b; } */ } .block-page-title-banner{ margin-bottom: 2.1875rem; } @media (min-width: 48rem){ .block-page-title-banner{ margin-bottom: 4.5rem; } } @media (min-width: 80rem){ .block-page-title-banner{ margin-bottom: 7.5rem; } } @media (min-width: 62rem){ .block-page-title-banner__img{ height: calc(var(--page-title-banner-img-height) - var(--grid-gutter)*2) } } .block-page-title-banner__img{ position: relative; z-index: 20; margin-bottom: calc(var(--grid-gutter) * 2); aspect-ratio: 16 / 9; overflow: hidden; width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .block-page-title-banner__img{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .block-page-title-banner__img{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .block-page-title-banner__img{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .block-page-title-banner__img{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .block-page-title-banner__img :where(.grid-container),.block-page-title-banner__img :where(.block-container), .block-container :where(.block-page-title-banner__img){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-container :where(.block-page-title-banner__img){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } @media (min-width: 48rem){ .block-page-title-banner__img{ aspect-ratio: auto; } } .block-page-title-banner__img img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 62rem){ .block-page-title-banner__video{ height: calc(var(--page-title-banner-img-height) - var(--grid-gutter)*2) } } .block-page-title-banner__video{ position: relative; z-index: 20; margin-bottom: calc(var(--grid-gutter) * 2); aspect-ratio: 16 / 9; overflow: hidden; width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .block-page-title-banner__video{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .block-page-title-banner__video{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .block-page-title-banner__video{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .block-page-title-banner__video{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .block-page-title-banner__video :where(.grid-container),.block-page-title-banner__video :where(.block-container), .block-container :where(.block-page-title-banner__video){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-container :where(.block-page-title-banner__video){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } @media (min-width: 48rem){ .block-page-title-banner__video{ aspect-ratio: auto; } } .block-page-title-banner__video video{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-page-title-banner .block-title{ bottom: calc(var(--grid-gutter) * 2); z-index: 10; margin-bottom: 0px; margin-bottom: 0; } @media (min-width: 48rem){ .block-page-title-banner .block-title{ padding-top: calc(var(--grid-gutter) * 2); } } @media (min-width: 62rem){ .block-page-title-banner .block-title{ position: sticky; } } .block-paragraph{ container: paragraph / inline-size; } .block-paragraph p{ font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } @media (min-width: 48rem){ @media not all and (min-width: 80rem){ .block-paragraph--lg p{ max-width: 48rem; } } } @media (min-width: 80rem){ .block-paragraph--lg p{ font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } .block-paragraph--1col{ width: 50%; } } @container paragraph (min-width: 80rem){ .block-paragraph p{ width: 75%; } } .query-loop__inner{ grid-template-columns: repeat(1, minmax(0,1fr)); } @media (min-width: 62rem){ .query-loop__inner{ grid-template-columns: repeat(var(--query-loop-columns-per-row), minmax(0, 1fr)); } } .query-loop__inner{ display: grid; -moz-column-gap: var(--size-ratio-base); column-gap: var(--size-ratio-base); row-gap: var(-xl); } @layer utilties{ .block-tease-row{ margin-bottom: 4.5rem; } @media (min-width: 80rem){ .block-tease-row{ margin-bottom: 7.5rem; } } .block-title{ margin-bottom: 1.5625rem; } @media (min-width: 48rem){ .block-title{ margin-bottom: 2.1875rem; } } } .block-title h1,.block-title h2,.block-title h3,.block-title h4,.block-title h5,.block-title h6{ margin-bottom: 0px; margin-bottom: 0; font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } @media (min-width: 48rem){ .block-title h1,.block-title h2,.block-title h3,.block-title h4,.block-title h5,.block-title h6{ font-size: 54px; font-size: 3.375rem; line-height: 65px; line-height: 4.0625rem; } } @media (min-width: 80rem){ .block-title h1,.block-title h2,.block-title h3,.block-title h4,.block-title h5,.block-title h6{ font-size: 58px; font-size: 3.625rem; line-height: 70px; line-height: 4.375rem; } } .block-title h1 + a,.block-title h2 + a,.block-title h3 + a,.block-title h4 + a,.block-title h5 + a,.block-title h6 + a{ flex-shrink: 0; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .block-title h1 + a,.block-title h2 + a,.block-title h3 + a,.block-title h4 + a,.block-title h5 + a,.block-title h6 + a{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .block-title h1 + a,.block-title h2 + a,.block-title h3 + a,.block-title h4 + a,.block-title h5 + a,.block-title h6 + a{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } .block-title .block-title__inner{ width: 91.666667%; } /* .column{ @apply flex justify-between items-baseline; } + .block-links-list-columns{ @apply mt-16; } */ .block-title--xs h1,.block-title--xs h2,.block-title--xs h3,.block-title--xs h4,.block-title--xs h5,.block-title--xs h6{ font-weight: 700; font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } .block-title--sm h1,.block-title--sm h2,.block-title--sm h3,.block-title--sm h4,.block-title--sm h5,.block-title--sm h6{ font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .block-title--sm h1,.block-title--sm h2,.block-title--sm h3,.block-title--sm h4,.block-title--sm h5,.block-title--sm h6{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .block-title--sm h1,.block-title--sm h2,.block-title--sm h3,.block-title--sm h4,.block-title--sm h5,.block-title--sm h6{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } .block-title--lg h1,.block-title--lg h2,.block-title--lg h3,.block-title--lg h4,.block-title--lg h5,.block-title--lg h6{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } @media (min-width: 48rem){ .block-title--lg h1,.block-title--lg h2,.block-title--lg h3,.block-title--lg h4,.block-title--lg h5,.block-title--lg h6{ font-size: 54px; font-size: 3.375rem; line-height: 65px; line-height: 4.0625rem; } } @media (min-width: 80rem){ .block-title--lg h1,.block-title--lg h2,.block-title--lg h3,.block-title--lg h4,.block-title--lg h5,.block-title--lg h6{ font-size: 90px; font-size: 5.625rem; line-height: 105px; line-height: 6.5625rem; } } .block-title--divider .block-title__inner{ width: 100%; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); padding-top: 0.75rem; } .block-title--link .block-title__inner{ width: 100%; align-items: baseline; justify-content: space-between; } @media (min-width: 62rem){ .block-title--link .block-title__inner{ display: flex; } } .block-title--link .block-title__inner h1,.block-title--link .block-title__inner h2,.block-title--link .block-title__inner h3,.block-title--link .block-title__inner h4,.block-title--link .block-title__inner h5,.block-title--link .block-title__inner h6{ margin-right: 1rem; } /* .block-container + .block-title{ @apply mt-[5.5vw] } */ .block-video__inner{ position: relative; aspect-ratio: 16 / 9; } .block-video__inner video{ position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; } .block-video__caption p{ margin-top: 1.125rem; margin-bottom: 0px; margin-bottom: 0; font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } .breadcrumbs{ margin-top: 1.5625rem; margin-bottom: 2.1875rem; width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .breadcrumbs{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .breadcrumbs{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .breadcrumbs{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .breadcrumbs{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .breadcrumbs :where(.grid-container),.breadcrumbs :where(.block-container), .block-container :where(.breadcrumbs){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-container :where(.breadcrumbs){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } @media (min-width: 48rem){ .breadcrumbs{ margin-top: 3.125rem; margin-bottom: 4.5rem; } } @media (min-width: 80rem){ .breadcrumbs{ margin-top: 6.25rem; margin-bottom: 2.1875rem; } } .breadcrumbs ul{ display: flex; flex-wrap: wrap; } .breadcrumbs ul li{ font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .breadcrumbs ul li{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .breadcrumbs ul li{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } .breadcrumbs ul li:not(:last-child)::after{ content: '/'; margin-left: 0.75vw; margin-right: 0.75vw; } .breadcrumbs ul li a, .breadcrumbs ul li span{ --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } .breadcrumbs ul li:last-child span{ --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } button, input[type="submit"]{ text-rendering: geometricPrecision; } .btn{ } .card{ position: relative; --tw-bg-opacity: 1; background-color: rgb(237 242 242 / var(--tw-bg-opacity)); padding: 1rem; } .card--black{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } .card--black p, .card--black span{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .card__content{ display: flex; aspect-ratio: 1 / 1; flex-direction: column; justify-content: space-between; } .card .card-header, .card .card-main{ position: relative; z-index: 10; } .card .card-header{ display: flex; justify-content: space-between; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } .card .card-date{ font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } .card .card-title{ font-weight: 700; font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } .card .card-bg{ pointer-events: none; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; transform-origin: center; --tw-scale-x: 1.25; --tw-scale-y: 1.25; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); opacity: 0; } .card .card-bg img{ z-index: 10; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0.75; } .card--has-background.is-hovered{ z-index: 20; background-color: transparent; } .card--has-background.is-hovered p, .card--has-background.is-hovered span{ --tw-text-opacity: 1; color: rgb(255 204 0 / var(--tw-text-opacity)); } .card--has-background.is-hovered .card-bg{ opacity: 1; } .card--has-background.is-hovered::after{ content: ''; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(255 204 0 / var(--tw-border-opacity)); } .card--has-keyword .card-keyword{ font-size: calc(70vw / var(--card-keyword-chars)); pointer-events: none; position: absolute; top: 50%; left: 50%; z-index: 50; --tw-translate-y: -50%; --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); white-space: nowrap; --tw-text-opacity: 1; color: rgb(255 204 0 / var(--tw-text-opacity)); opacity: 0; } .card--has-keyword.is-hovered{ z-index: 20; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .card--has-keyword.is-hovered .card-header span{ --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } .card--has-keyword.is-hovered .card-main p, .card--has-keyword.is-hovered .card-main span{ --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .card--has-keyword.is-hovered .card-keyword{ opacity: 1; } .card--has-keyword.is-hovered::after{ content: ''; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); } .chip{ } .contacts-section{ margin-top: 2.1875rem; --tw-bg-opacity: 1; background-color: rgb(255 204 0 / var(--tw-bg-opacity)); padding-top: 1.5625rem; padding-bottom: 1.5625rem; } @media (min-width: 80rem){ .contacts-section{ margin-top: 4.5rem; padding-top: 2.1875rem; padding-bottom: 2.1875rem; } } .contacts-section .block-title__inner a{ --tw-text-opacity: 1; color: rgb(158 127 0 / var(--tw-text-opacity)); } .contacts-section-cards-row{ width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .contacts-section-cards-row{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .contacts-section-cards-row{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .contacts-section-cards-row{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .contacts-section-cards-row{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .contacts-section-cards-row :where(.grid-container),.contacts-section-cards-row :where(.block-container), .block-container :where(.contacts-section-cards-row){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } @layer utilties{ .contacts-section-cards-row{ margin-bottom: 1.5625rem; } @media (min-width: 48rem){ .contacts-section-cards-row{ margin-bottom: 2.1875rem; } } } .block-container :where(.contacts-section-cards-row){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .contacts-section-cards-row__inner{ display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .contacts-section-cards-row__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 80rem){ .contacts-section-cards-row__inner{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media not all and (min-width: 80rem){ @media (min-width: 62rem){ .contacts-section-cards-row__inner-squares{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } } .contacts-section-cards-row > p{ margin-bottom: 1rem; font-weight: 700; } .contacts-section-card{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: flex-start; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); padding: calc(var(--grid-gutter) * 2); --tw-text-opacity: 1; color: rgb(255 204 0 / var(--tw-text-opacity)); } @media (min-width: 80rem){ .contacts-section-card{ display: grid; } } .contacts-section-card p{ --tw-text-opacity: 1; color: rgb(255 204 0 / var(--tw-text-opacity)); } .contacts-section-card a{ text-decoration-line: underline; } .contacts-section-card header{ margin-bottom: 2.1875rem; } @media (min-width: 80rem){ .contacts-section-card header{ margin-bottom: 0px; margin-bottom: 0; } } .contacts-section-card header p{ margin-bottom: 0px; margin-bottom: 0; font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } @media (min-width: 48rem){ .contacts-section-card header p{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } .contacts-section-card header p:last-child:not(:first-child){ font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } @media (min-width: 80rem){ .contacts-section-card > div{ aspect-ratio: 1 / 1; } } .contacts-section-card > div:first-child{ display: flex; flex-direction: column; } @media (min-width: 80rem){ .contacts-section-card > div:first-child{ height: 100%; } } .contacts-section-card > div:first-child header{ flex-grow: 1; } .contacts-section-card > div:first-child:last-child{ grid-column: span 2; } .contacts-section-card:not(.contacts-section-card--span) > div{ aspect-ratio: 1 / 1; } .contacts-section-card--span{ align-self: flex-start; } @media (min-width: 80rem){ .contacts-section-card--span{ align-self: inherit; grid-column: span 2 } } .contacts-section-card--span footer{ margin-bottom: 2.1875rem; } @media (min-width: 80rem){ .contacts-section-card--span footer{ margin-bottom: 0px; margin-bottom: 0; } } .contacts-section + .site-footer{ margin-top: 0px !important; margin-top: 0 !important; } .contacts-section--noMargin{ margin-top: 0px; margin-top: 0; } .content-section{ margin-top: 3.125rem; } @media (min-width: 62rem){ .content-section{ margin-top: 4.5rem; } } .content-section--noMargin{ margin-top: 0px; margin-top: 0; } .degree-curricula{ --tw-bg-opacity: 1; background-color: rgb(237 242 242 / var(--tw-bg-opacity)); } .degree-curricula__tabs{ padding-top: 2.1875rem; padding-bottom: 2.1875rem; font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .degree-curricula__tabs{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .degree-curricula__tabs{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } @media (min-width: 62rem){ .degree-curricula__tabs{ display: flex; flex-wrap: nowrap; } } .degree-curricula__tabs button{ display: block; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } @media (min-width: 62rem){ .degree-curricula__tabs button:not(:first-child){ margin-left: 0.5rem; } } .degree-curricula__tabs button.is-selected{ --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .degree-curriculum{ /*fix for using margin of last child element as real inner margin*/ padding-bottom: 1px; padding-bottom: 0.0625rem; } .degree-curriculum__marquee{ margin-left: calc(var(--grid-offset) * -1); width: 100vw; } .degree-curriculum__excerpt{ margin-bottom: 2.1875rem; font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } @media (min-width: 48rem){ .degree-curriculum__excerpt{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } .degree-curriculum__cols{ margin-bottom: 4.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: calc(var(--grid-gutter) * 2); column-gap: calc(var(--grid-gutter) * 2); } @media (min-width: 62rem){ .degree-curriculum__cols{ display: grid; } } @media (min-width: 80rem){ .degree-curriculum__cols > *:last-child p{ font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } } .degree-curriculum__cols > *:last-child p:last-child{ margin-bottom: 0px; margin-bottom: 0; } .degree-curriculum .block-accordion{ margin-bottom: 3.125rem; } .degree-curriculum .block-accordion + *{ margin-bottom: 1.5625rem; } [data-tab-index]{ display: none; } .events-posts__day{ position: sticky; top: -1px; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-top: 0.75rem; padding-bottom: 0.75rem; } .events-posts__day span{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } @media (min-width: 48rem){ .events-posts__day span{ font-size: 40px; font-size: 2.5rem; line-height: 50px; line-height: 3.125rem; } } @media (min-width: 80rem){ .events-posts__day span{ font-size: 44px; font-size: 2.75rem; line-height: 55px; line-height: 3.4375rem; } } .event-item{ display: grid; min-height: 96px; grid-template-columns: repeat(12, minmax(0, 1fr)); -moz-column-gap: 1.25rem; column-gap: 1.25rem; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); padding-top: 1.25rem; padding-bottom: 1.25rem; } .event-item > *:first-child{ grid-area: 1 / 1 / 3 / 7; font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } .event-item > *:last-child{ grid-area: 1 / 7 / 3 / 13; } .event-item__info{ display: flex; flex-direction: column; justify-content: space-between; } .event-item__date{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } @media (min-width: 48rem){ .event-item__date{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } .event-item__date span{ display: block; } .event-item__date span + span{ --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } .event-item__title{ font-weight: 700; font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } @media (min-width: 48rem){ .event-item__title{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } .event-item__title + p{ margin-top: 1.5rem; } .event-item-ongoing{ padding-top: 1.25rem; padding-bottom: 1.25rem; } .event-item-ongoing:first-child{ padding-top: 0px; padding-top: 0; } .event-item-ongoing:first-child span{ font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } .event-item-ongoing:last-child{ padding-bottom: 0px; padding-bottom: 0; } .event-item-ongoing:not(:last-child){ border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); } .event-item-ongoing p{ margin-bottom: 0px; margin-bottom: 0; font-weight: 700; font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } .event-item-ongoing p span{ margin-left: 0.75rem; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); } .site-footer{ position: relative; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); padding-bottom: 2.5rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } @media (min-width: 48rem){ .site-footer{ font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } } .site-footer__backTop{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 27'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m11.5 4.289-7.32 6.778L2.82 9.6 12.5.637 22.18 9.6l-1.36 1.467L13.5 4.29V27h-2V4.289Z' fill='%23fff'/%3E%3C/svg%3E"); background-size: 24px; position: absolute; top: 1.875rem; right: calc(var(--grid-gutter) * 2); height: 2rem; width: 2rem; background-repeat: no-repeat; text-indent: -9999px; } .site-footer__title{ margin-bottom: 3.125rem; display: flex; align-items: flex-start; padding-top: 2rem; } @media (min-width: 48rem){ .site-footer__title{ padding-top: 1.5625rem; } } .site-footer__title svg{ margin-right: 1.25rem; width: 1.875rem; } @media (min-width: 48rem){ .site-footer__title svg{ display: none; } } .site-footer__title p{ --tw-translate-y: -0.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .site-footer__title p{ --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); font-weight: 700; font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } } .site-footer__title p span{ display: block; } @media (min-width: 48rem){ .site-footer__title p span{ display: inline; } } .site-footer__main{ display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.875rem; } @media (min-width: 48rem){ .site-footer__main{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.125rem; } } @media (min-width: 80rem){ .site-footer__main{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .site-footer__main > div p{ margin-bottom: 0px; margin-bottom: 0; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } @media (min-width: 48rem){ .site-footer__main > div p{ font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } } .site-footer__main > div > span{ font-weight: 700; } .site-footer__nav ul,.site-footer__social-links ul{ margin-top: 0.9375rem; } .site-footer__nav ul li,.site-footer__social-links ul li{ display: flex; align-items: center; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(83 90 90 / var(--tw-border-opacity)); } @media (min-width: 48rem){ .site-footer__nav ul li,.site-footer__social-links ul li{ border-top-width: 0px; } } .site-footer__nav ul li:last-child,.site-footer__social-links ul li:last-child{ border-bottom-width: 1px; } @media (min-width: 48rem){ .site-footer__nav ul li:last-child,.site-footer__social-links ul li:last-child{ border-bottom-width: 0px; } } .site-footer__nav ul li::before,.site-footer__social-links ul li::before{ content: ''; } @media (min-width: 48rem){ .site-footer__nav ul li::before,.site-footer__social-links ul li::before{ content: none; } } .site-footer__nav ul li::before,.site-footer__social-links ul li::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath d='m21.441 12.5 5.556 6m0 0-5.556 6m5.556-6H10' stroke='%23fff'/%3E%3C/svg%3E"); margin-right: 0.625rem; display: inline-block; height: 2.25rem; width: 2.25rem; background-repeat: no-repeat; } .site-footer__colophon nav{ margin-top: 3.125rem; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); padding-top: 1.5625rem; } .site-footer__colophon nav ul{ display: flex; } .site-footer__colophon nav ul li:not(:last-child){ margin-right: 1.875rem; } .site-footer__colophon nav ul li a{ font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } @media (min-width: 48rem){ .site-footer__colophon nav ul li a{ font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } } .hamburger-btn { --hamburgerPadding: 8px; --hamburgerWidth: 50px; --hamburgerHeight: 50px; --hamburgerLineWidth: 24px; --hamburgerLineHeight: 2px; --hamburgerMargin: 6px; --hamburgerBackground: true; --hamburgerBackgroundColor: transparent; --hamburgerColor: #242424; --hamburgerBorderRadius: false; --hamburgerBorderRadiusPx: 0; padding: var(--hamburgerPadding); width: var(--hamburgerWidth); height: var(--hamburgerHeight); border-radius: var(--hamburgerBorderRadiusPx); background: var(--hamburgerBackgroundColor); position: relative; display: flex; cursor: pointer; align-items: center; } .hamburger-btn:focus{ /* outline: none; */ } .hamburger-btn span{ margin: 0 auto; display: inline-block; position: relative; top: 0; width: var(--hamburgerLineWidth); height: var(--hamburgerLineHeight); border-radius: 5px; background-color: var(--hamburgerColor); /* transition: background-color .1s .1s ease; */ display: block; } .hamburger-btn span::before, .hamburger-btn span::after{ content: ''; position: absolute; width: var(--hamburgerLineWidth); height: var(--hamburgerLineHeight); border-radius: 5px; background-color: var(--hamburgerColor); display: block; } .hamburger-btn span::before{ margin-top: calc(var(--hamburgerMargin) * -1); transform: rotate(0deg); /* transition: margin .2s .2s ease, transform .2s ease; */ } .hamburger-btn span::after{ margin-top: var(--hamburgerMargin); transform: rotate(0deg); /* transition: margin .2s .2s ease, transform .2s ease; */ } .hamburger-btn.is-toggled span{ background-color: transparent !important; } /* transition: background-color .2s ease; */ .hamburger-btn.is-toggled span:before{ margin-top: 0; transform: rotate(45deg); /* transition: margin .2s ease, transform .2s .2s ease; */ } .hamburger-btn.is-toggled span:after{ margin-top: 0; transform: rotate(-45deg); /* transition: margin .2s ease, transform .2s .2s ease; */ } .site-header{ transition: transform .5s ease; position: sticky; top: 0px; z-index: 40; --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } body.has-menu-toggled .site-header{ border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); } @media (min-width: 48rem){ body.has-menu-toggled .site-header{ border-bottom-width: 0px; } } @media (min-width: 80rem){ .site-header.is-hidden{ --tw-translate-y: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .site-header-topbar{ display: none; height: 2.5rem; align-items: center; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 80rem){ .site-header-topbar{ display: flex; } } .site-header-topbar__container{ display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } .site-header-topbar__container nav ul{ display: flex; align-items: center; } .site-header-topbar__container nav ul li a{ } .site-header-topbar__container nav ul li:not(:last-child){ margin-right: 1.25rem; } .site-header-topbar__actions{ display: flex; align-items: center; } .site-header-topbar__actions .site-header-topbar__lang{ margin-right: 0.9375rem; } .site-header-topbar__actions .site-header-topbar__search svg{ display: block; height: 2.25rem; width: 22px; } .site-header-navbar{ display: flex; height: 3.125rem; align-items: center; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } @media (min-width: 80rem){ .site-header-navbar{ height: 3.75rem; } } .site-header-navbar__inner{ display: flex; align-items: center; justify-content: space-between; width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .site-header-navbar__inner{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .site-header-navbar__inner{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .site-header-navbar__inner{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .site-header-navbar__inner{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .site-header-navbar__inner :where(.grid-container),.site-header-navbar__inner :where(.block-container), .block-container :where(.site-header-navbar__inner){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-container :where(.site-header-navbar__inner){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .site-header-navbar__main{ display: flex; align-items: center; justify-content: space-between; } @media (min-width: 80rem){ .site-header-navbar__main{ width: 75%; } } .site-header-navbar__main nav{ display: none; } @media (min-width: 80rem){ .site-header-navbar__main nav{ display: block; } } .site-header-navbar__main nav ul li{ -webkit-user-select: none; -moz-user-select: none; user-select: none; } .site-header-navbar__main nav > ul{ display: flex; align-items: center; } .site-header-navbar__main nav > ul > li:not(:last-child){ margin-right: 1.5rem; } @media (min-width: 80rem){ .site-header-navbar__main nav > ul > li:not(:last-child){ margin-right: 2rem; } } .site-header-navbar__main nav > ul > li > a{ display: block; } .site-header-navbar__main nav > ul > li.is-toggled > a{ font-weight: 700; } .site-header-navbar__main .site-header-navbar__actions{ display: flex; --tw-translate-x: calc(var(--grid-gutter) * 1.75); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); align-items: center; } @media (min-width: 80rem){ .site-header-navbar__main .site-header-navbar__actions{ --tw-translate-x: calc(var(--grid-gutter) * 1.25); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .site-header-navbar__main .site-header-navbar__actions > a{ margin-right: 0.5rem; --tw-translate-y: 1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @media (min-width: 80rem){ .site-header-navbar__main .site-header-navbar__actions > a{ display: none; } .site-header-navbar__main .site-header-navbar__actions .hamburger-btn{ display: none; } .site-header-navbar__main .site-header-navbar__actions .hamburger-btn.is-active{ display: flex; } } .site-header-navbar__title{ font-weight: 700; } @media (min-width: 80rem){ .site-header-navbar__title{ width: 25%; } } .site-header-navbar-submenu li{ /* .menu-item{ @apply relative overflow-hidden; &-overlay{ @apply absolute z-10 !important; @apply bg-black w-full h-full block overflow-hidden top-0 left-0 pointer-events-none opacity-100; } > a{ transition: color .4s ease; @apply block text-black; } &:hover{ > a{ @apply relative text-white z-20; } } } */ } .site-header-navbar-submenu > li{ margin-right: 0px; margin-right: 0; } .site-header-navbar-submenu > li > a{ display: inline-block; width: 100%; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } .site-header-navbar-submenu > li > a:hover{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .site-header-navbar-submenu-0{ padding-left: var(--grid-offset); padding-right: calc(var(--grid-gutter) * 2); orphans: 1; transform: translateZ(0) translateY(calc(100% - 2px)); pointer-events: none; visibility: hidden; position: absolute; bottom: 0px; left: 0px; width: 100%; -moz-columns: 3; columns: 3; -moz-column-gap: calc(var(--grid-gutter) * 2); column-gap: calc(var(--grid-gutter) * 2); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-top: 2.5rem; padding-bottom: 3.125rem; opacity: 0; } .site-header-navbar-submenu-0.is-visible{ pointer-events: auto; visibility: visible; opacity: 1; } .site-header-navbar-submenu-0.is-visible > li{ opacity: 1; } .site-header-navbar-submenu-0.is-visible.is-closing > li{ transition: opacity .1s ease; opacity: 0; } .site-header.is-hidden .site-header-navbar__main .site-header-navbar-submenu-0{ display: none; } .site-header-navbar-submenu-0 > li { transition: opacity .25s ease .25s; -moz-column-break-inside: avoid; break-inside: avoid; opacity: 0; } .site-header-navbar__main nav.is-toggled .site-header-navbar-submenu-0 > li{ transition: none; } .site-header-navbar-submenu-0 > li > a{ border-top-width: 1px; border-bottom-width: 1px; border-top-color: rgb(0 0 0 / var(--tw-border-opacity)); --tw-border-opacity: 1; border-bottom-color: rgb(211 216 216 / var(--tw-border-opacity)); font-weight: 700; } .site-header-navbar-submenu-0 > li > a:first-child:last-child{ border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(211 216 216 / var(--tw-border-opacity)); } .site-header-navbar-submenu:not(.site-header-navbar-submenu-0) > li{ border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); } .site-header-navbar-submenu:not(.site-header-navbar-submenu-0) > li:hover > a{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .site-header-navbar-submenu:not(.site-header-navbar-submenu-0) > li > a{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); -moz-column-gap: var(--size-ratio-base); column-gap: var(--size-ratio-base); } .site-header-navbar-submenu:not(.site-header-navbar-submenu-0) > li > a > span{ grid-column: 2 / 5; } #overlay{ transition: all .5s ease; pointer-events: none; visibility: hidden; position: fixed; top: 0px; left: 0px; z-index: 30; height: 100vh; width: 100%; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); --tw-bg-opacity: 0.5; opacity: 0; } #overlay.is-active{ pointer-events: auto; visibility: visible; opacity: 1; } .site-logo{ transition: all .2s ease; transform: translateY(0) translateX(-2px); position: fixed; bottom: 2.5rem; left: 2.5rem; z-index: 20; display: none; mix-blend-mode: difference; } @media (min-width: 48rem){ .site-logo{ display: block; } } .site-logo svg{ width: 40px; display: block; } .site-logo.is-visible{ transform: translateY(0) translateX(-50%); left: 0px; } body.footer-in-viewport .site-logo.is-visible{ transform: translateY(0) translateX(-2px); left: 2.5rem; } .block-marquee-images{ --marquee-item-width: 66vw; } @media (min-width: 48rem){ .block-marquee-images{ --marquee-item-width: 40vw } } @media (min-width: 62rem){ .block-marquee-images{ --marquee-item-width: 33vw } } @media (min-width: 80rem){ .block-marquee-images{ --marquee-item-width: 25vw } } .block-marquee-images{ overflow-x: clip; margin-bottom: 2.1875rem; margin-left: calc(calc(var(--grid-gutter) * 2) * -1); } @media (min-width: 62rem){ .block-marquee-images{ margin-left: 0px; margin-left: 0; } } /* @apply overflow-hidden mb-5; */ .block-marquee-images__inner{ display: flex; } .block-marquee-images__inner .block-marquee-images-item{ width: var(--marquee-item-width); margin-right: calc(var(--grid-gutter) * 2); aspect-ratio: 1 / 1; } .block-marquee-images__inner .block-marquee-images-item img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .block-marquee-images.is-hovered{ position: relative; z-index: 10; } /* .marquee-card{ @apply relative bg-grey-100 p-4; &--black{ @apply bg-black; p, span{ @apply text-white; } } &__content{ @apply aspect-square flex flex-col justify-between; } .marquee-card-header, .marquee-card-main{ @apply relative z-10; } .marquee-card-header{ @apply flex justify-between text-grey-300; } .marquee-card-date{ @apply text-size-sm; } .marquee-card-title{ @apply text-size-md font-bold; } .marquee-card-bg{ @apply absolute left-0 top-0 w-full h-full scale-125 origin-center opacity-0 pointer-events-none bg-black; img{ @apply w-full h-full bg-cover z-10 opacity-75; } } &--has-background{ &.is-hovered{ @apply bg-transparent z-20; p, span{ @apply text-accent-200; } .marquee-card-bg{ @apply opacity-100; } &::after{ content: ''; @apply w-full h-full border border-accent-200 absolute left-0 top-0; } } } &--has-keyword{ .marquee-card-keyword{ font-size: calc(70vw / var(--marquee-card-keyword-chars)); @apply absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] opacity-0 pointer-events-none text-accent-200 whitespace-nowrap z-50; } &.is-hovered{ @apply z-20 bg-white; .marquee-card-header{ span{ @apply text-grey-300; } } .marquee-card-main{ p, span{ @apply text-black; } } .marquee-card-keyword{ @apply opacity-100; } &::after{ content: ''; @apply w-full h-full border border-grey-200 absolute left-0 top-0; } } } } */ .block-marquee-posts-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } .block-marquee-posts-row{ --marquee-card-width: 27.5vw; /* @apply overflow-hidden mb-5; */ overflow-x: clip; margin-bottom: 1.25rem; } .block-marquee-posts-row__wrapper{ display: flex; } .block-marquee-posts-row__wrapper .card{ width: var(--marquee-card-width); margin-right: 1.25rem; } .block-marquee-posts-row.is-hovered{ position: relative; z-index: 10; } /* .marquee-card{ @apply relative bg-grey-100 p-4; &--black{ @apply bg-black; p, span{ @apply text-white; } } &__content{ @apply aspect-square flex flex-col justify-between; } .marquee-card-header, .marquee-card-main{ @apply relative z-10; } .marquee-card-header{ @apply flex justify-between text-grey-300; } .marquee-card-date{ @apply text-size-sm; } .marquee-card-title{ @apply text-size-md font-bold; } .marquee-card-bg{ @apply absolute left-0 top-0 w-full h-full scale-125 origin-center opacity-0 pointer-events-none bg-black; img{ @apply w-full h-full bg-cover z-10 opacity-75; } } &--has-background{ &.is-hovered{ @apply bg-transparent z-20; p, span{ @apply text-accent-200; } .marquee-card-bg{ @apply opacity-100; } &::after{ content: ''; @apply w-full h-full border border-accent-200 absolute left-0 top-0; } } } &--has-keyword{ .marquee-card-keyword{ font-size: calc(70vw / var(--marquee-card-keyword-chars)); @apply absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] opacity-0 pointer-events-none text-accent-200 whitespace-nowrap z-50; } &.is-hovered{ @apply z-20 bg-white; .marquee-card-header{ span{ @apply text-grey-300; } } .marquee-card-main{ p, span{ @apply text-black; } } .marquee-card-keyword{ @apply opacity-100; } &::after{ content: ''; @apply w-full h-full border border-grey-200 absolute left-0 top-0; } } } } */ .block-marquee-posts-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } .menu-mobile{ pointer-events: none; visibility: hidden; position: absolute; z-index: 30; margin-left: auto; width: 100%; max-width: 48rem; overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); opacity: 0; } @media (min-width: 48rem){ .menu-mobile{ min-height: calc(var(--vh) - var(--header-height)); width: calc((100% - (var(--grid-offset) - var(--grid-gutter) * 2))); } } @media (min-width: 80rem){ .menu-mobile{ display: none; } } .menu-mobile.is-toggled{ pointer-events: auto; visibility: visible; position: relative; opacity: 1; } .menu-mobile nav ul li a{ display: block; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); padding-top: 0.375rem; } .menu-mobile .menu-mobile__primary{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .menu-mobile .menu-mobile__primary ul li{ position: relative; } .menu-mobile .menu-mobile__primary ul li .menu-mobile-accordion-container{ display: flex; } .menu-mobile .menu-mobile__primary ul li .menu-mobile-accordion-container a{ min-height: 3.125rem; width: calc(100% - 3.125rem); display: block; border-bottom-width: 1px; border-right-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); padding-top: 0.875rem; padding-bottom: 0.625rem; font-weight: 700; } .menu-mobile .menu-mobile__primary ul li .menu-mobile-accordion-container button{ display: flex; width: 3.125rem; flex-shrink: 0; align-items: flex-start; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); } .menu-mobile .menu-mobile__primary ul li .menu-mobile-accordion-container button svg{ pointer-events: none; width: 100%; } .menu-mobile .menu-mobile__primary ul li ul{ display: none; } .menu-mobile .menu-mobile__primary ul li ul li a{ padding-left: calc(var(--grid-gutter) * 6); } .menu-mobile .menu-mobile__primary ul li.is-toggled > .menu-mobile-accordion-container button svg{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .menu-mobile .menu-mobile__primary ul li.is-toggled > .menu-mobile-accordion-container + ul{ display: block; /* li{ &:last-child{ a{ @apply border-b-black; &:first-child:last-child{ &::after{ @apply border-black; } } } button{ @apply border-black; } } } */ } .menu-mobile .menu-mobile__primary ul:not(.menu-mobile-level-last) > li > .menu-mobile-accordion-container > a:first-child:last-child::after{ content: ''; position: absolute; bottom: 0px; right: 0px; display: block; width: 3.125rem; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); } .menu-mobile .menu-mobile__primary ul.menu-mobile-level-0 > li:not(.is-toggled) > .menu-mobile-accordion-container > a{ --tw-border-opacity: 1; border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); } .menu-mobile .menu-mobile__primary ul.menu-mobile-level-0 > li:not(.is-toggled) > .menu-mobile-accordion-container > a:first-child:last-child::after{ --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); } .menu-mobile .menu-mobile__primary ul.menu-mobile-level-0 > li:not(.is-toggled) > .menu-mobile-accordion-container button{ --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); } .menu-mobile .menu-mobile__primary ul.menu-mobile-level-0 > li.is-toggled > ul > li:last-child > .menu-mobile-accordion-container > a{ --tw-border-opacity: 1; border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); } .menu-mobile .menu-mobile__primary ul.menu-mobile-level-0 > li.is-toggled > ul > li:last-child > .menu-mobile-accordion-container > a:first-child:last-child::after{ --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); } .menu-mobile .menu-mobile__primary ul.menu-mobile-level-0 > li.is-toggled > ul > li:last-child > .menu-mobile-accordion-container button{ --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); } .menu-mobile .menu-mobile__primary ul.menu-mobile-level-last > li > .menu-mobile-accordion-container > a{ font-weight: 400; } .menu-mobile .menu-mobile__primary ul.menu-mobile-level-last > li:last-child > .menu-mobile-accordion-container > a:first-child:last-child::after{ content: ''; position: absolute; bottom: 0px; right: 0px; display: block; width: 3.125rem; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(211 216 216 / var(--tw-border-opacity)); } .menu-mobile__secondary{ --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); padding-top: 0.625rem; padding-bottom: 1.25rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .post-archive-header{ margin-top: 8rem; margin-bottom: 4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 1.25rem; column-gap: 1.25rem; } .post-archive-header nav ul{ display: flex; } .post-archive-header nav ul li a{ --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .post-archive-header nav ul li a{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .post-archive-header nav ul li a{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } .post-archive-header nav ul li a span{ margin-left: 0.625rem; margin-right: 0.25rem; display: inline-block; vertical-align: top; font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } .post-archive-header nav ul li.is-active a{ --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .post-archive-header nav ul li:not(:last-child){ margin-right: 1rem; } .post-archive-header nav ul li:not(:last-child)::after{ content: ','; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } @media (min-width: 48rem){ .post-archive-header nav ul li:not(:last-child)::after{ font-size: 26px; font-size: 1.625rem; line-height: 35px; line-height: 2.1875rem; } } @media (min-width: 80rem){ .post-archive-header nav ul li:not(:last-child)::after{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } } .post-archive-header__description{ margin-top: 0.5vw; font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } .post-archive-posts{ margin-bottom: 10rem; } .secondary-nav-trigger{ display: block; height: 1px; width: 100%; background-color: transparent; } .secondary-nav{ transition: top .5s ease, opacity .2s ease; position: fixed; top: var(--header-height); z-index: 30; display: flex; width: 100vw; align-items: center; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); opacity: 0; } @media (min-width: 62rem){ .secondary-nav{ top: 0px; } } .secondary-nav::before{ content: ''; width: calc(100vw - var(--grid-gutter)*4); } @media (min-width: 48rem){ .secondary-nav::before{ width: calc(100vw - var(--grid-gutter)*2 - var(--grid-offset)); } } .secondary-nav::before{ position: absolute; top: 0px; left: calc(var(--grid-gutter) * 2); height: 1px; --tw-bg-opacity: 1; background-color: rgb(211 216 216 / var(--tw-bg-opacity)); } @media (min-width: 48rem){ .secondary-nav::before{ left: var(--grid-offset); } } @media (min-width: 62rem){ .secondary-nav::before{ display: none; } } .secondary-nav::after{ content: ''; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); pointer-events: none; position: absolute; right: 0px; height: 100%; width: 3rem; } .secondary-nav ul{ padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .secondary-nav ul{ padding-left: var(--grid-offset); padding-right: var(--secondary-nav-button-width) } } .secondary-nav ul{ display: flex; overflow: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } /* IE and Edge */ /* Firefox */ .secondary-nav ul::-webkit-scrollbar { display: none; } .secondary-nav ul{ display: flex; height: 3.125rem; align-items: center; } @media (min-width: 80rem){ .secondary-nav ul{ height: 3.75rem; } } .secondary-nav ul li a{ font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } .secondary-nav ul li:not(:last-child){ margin-right: 1.875rem; } .secondary-nav > a{ position: absolute; right: -0px; top: 0px; z-index: 10; display: none; height: 100%; align-items: center; padding-top: 0.75rem; padding-bottom: 0.75rem; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.5625rem; } @media (min-width: 62rem){ .secondary-nav > a{ display: flex; } } .secondary-nav > a span{ display: inline-flex; align-items: center; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-right: calc(var(--grid-gutter) * 2); } .secondary-nav > a span::after{ content: ''; background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='m14.333 8 4.167 4.5m0 0L14.333 17m4.167-4.5H6' stroke='%23A3ADAD'/%3E%3C/svg%3E"); background-size: 100%; margin-left: 0.625rem; aspect-ratio: 1 / 1; width: 1.875rem; background-position: center; background-repeat: no-repeat; } .secondary-nav > a::before{ content: ''; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); height: 100%; width: 4rem; } .secondary-nav.is-stacked{ top: var(--header-height); } .secondary-nav.is-visible{ opacity: 1; } .tease-wrapper{ display: grid; -moz-column-gap: 1.25rem; column-gap: 1.25rem; row-gap: 3.5rem; } @media (min-width: 48rem){ .tease-wrapper{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 62rem){ .tease-wrapper{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 80rem){ .tease-wrapper{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* @TODO */ @media not all and (min-width: 80rem){ @media (min-width: 62rem){ .tease-wrapper .tease:nth-child(4){ display: none; } } } .tease__title{ margin-bottom: var(--size-ratio-base); font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } @media (min-width: 48rem){ .tease__title{ font-size: 40px; font-size: 2.5rem; line-height: 50px; line-height: 3.125rem; } } @media (min-width: 80rem){ .tease__title{ font-size: 44px; font-size: 2.75rem; line-height: 55px; line-height: 3.4375rem; } } .tease__img{ margin-bottom: var(--size-ratio-base); aspect-ratio: 3/2; } .tease__img img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } /* @todo */ .tease--sm{ position: relative; aspect-ratio: 1 / 1; overflow: hidden; } .tease--sm .tease__img{ transition: height .2s ease; position: absolute; top: 0px; left: 0px; width: 100%; --tw-bg-opacity: 1; background-color: rgb(237 242 242 / var(--tw-bg-opacity)); } .tease--sm .tease__main .tease-main-header{ display: flex; justify-content: space-between; padding-top: 0.75rem; padding-bottom: 0.75rem; --tw-text-opacity: 1; color: rgb(163 173 173 / var(--tw-text-opacity)); font-size: 13px; font-size: 0.8125rem; line-height: 20px; line-height: 1.25rem; } .tease--sm .tease__main .tease-main-title{ font-weight: 700; font-size: 20px; font-size: 1.25rem; line-height: 30px; line-height: 1.875rem; } .tease--sm:hover .tease__img{ height: 100% !important; } .tease--sm:hover .tease__main{ } .archive-degrees-degree{ margin-bottom: 4.5rem; } .archive-degrees-degree h2{ font-size: 30px; font-size: 1.875rem; line-height: 40px; line-height: 2.5rem; } @media (min-width: 48rem){ .archive-degrees-degree h2{ font-size: 40px; font-size: 2.5rem; line-height: 50px; line-height: 3.125rem; } } @media (min-width: 80rem){ .archive-degrees-degree h2{ font-size: 58px; font-size: 3.625rem; line-height: 70px; line-height: 4.375rem; } } .archive-degrees-degree .block-grid-list{ margin-top: 4.5rem; } .archive-degrees-degree a.block-link{ margin-top: 3.125rem; } .course-module{ margin-top: 4.5rem; } .course-module + .course-module{ margin-top: 3.125rem; } .course-module__title{ margin-bottom: 1.125rem; font-weight: 700; width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .course-module__title{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .course-module__title{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .course-module__title{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .course-module__title{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .course-module__title :where(.grid-container),.course-module__title :where(.block-container), .block-container :where(.course-module__title){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-container :where(.course-module__title){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .degree-cols{ /* grid-auto-rows: auto; @apply grid-container grid lg:grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)] pt-[var(--grid-offset)]; */ margin-top: 0px; margin-top: 0; -moz-column-gap: calc(var(--grid-gutter) * 2); column-gap: calc(var(--grid-gutter) * 2); width: 100%; padding-left: calc(var(--grid-gutter) * 2); padding-right: calc(var(--grid-gutter) * 2); } @media (min-width: 48rem){ .degree-cols{ padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } } .degree-cols{ margin-left: var(--grid-offset); } @media (min-width: 48rem){ .degree-cols{ width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2) } } @media (min-width: 120rem){ .degree-cols{ max-width: 120rem; margin-left: max(var(--grid-offset), calc((100vw - 120rem)/2)) } } .degree-cols :where(.grid-container),.degree-cols :where(.block-container), .block-container :where(.degree-cols){ margin-left: 0px; margin-left: 0; margin-right: 0px; margin-right: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } .block-container :where(.degree-cols){ margin-left: 0px; margin-left: 0; width: 100%; padding-left: 0px; padding-left: 0; padding-right: 0px; padding-right: 0; } @media (min-width: 62rem){ .degree-cols{ display: flex; } .degree-cols > *{ width: 50%; } .degree-cols__col{ order: 2; } } .degree-cols__col:not(.course-cols__col-info){ margin-bottom: 4.5rem; } @media (min-width: 62rem){ .degree-cols__col:not(.course-cols__col-info){ margin-bottom: 0px; margin-bottom: 0; } } .degree-cols__col-info{ top: 4rem; height: 100%; } @media (min-width: 62rem){ .degree-cols__col-info{ order: 1; } } @media (min-width: 80rem){ .degree-cols__col-info{ position: sticky; } } .degree-cols__col-info .block-grid-list{ margin-bottom: 3.125rem; } body.single-degree section{ scroll-margin-top: var(--secondary-nav-height); } @media (min-width: 62rem){ .lg\:block{ display: block; } .lg\:hidden{ display: none; } .lg\:w-3\/4{ width: 75%; } .lg\:w-1\/2{ width: 50%; } }