when using getCueAsHTML()\n div {\n display: inline;\n }\n}\n","// ==========================================================================\n// Controls\n// ==========================================================================\n\n$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;\n$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;\n$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);\n$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;\n$plyr-control-radius: var(--plyr-control-radius, 3px) !default;\n$plyr-control-toggle-checked-background: var(\n --plyr-control-toggle-checked-background,\n var(--plyr-color-main, $plyr-color-main)\n) !default;\n$plyr-video-controls-background: var(\n --plyr-video-controls-background,\n linear-gradient(rgba(#000, 0), rgba(#000, 0.75))\n) !default;\n$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;\n$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;\n$plyr-video-control-background-hover: var(\n --plyr-video-control-background-hover,\n var(--plyr-color-main, $plyr-color-main)\n) !default;\n$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;\n$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;\n$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;\n$plyr-audio-control-background-hover: var(\n --plyr-audio-control-background-hover,\n var(--plyr-color-main, $plyr-color-main)\n) !default;\n","// ==========================================================================\n// Captions\n// ==========================================================================\n\n$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;\n$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;\n$plyr-font-size-captions-base: $plyr-font-size-base !default;\n$plyr-font-size-captions-small: $plyr-font-size-small !default;\n$plyr-font-size-captions-medium: $plyr-font-size-large !default;\n$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;\n","// --------------------------------------------------------------\n// Control buttons\n// --------------------------------------------------------------\n\n.plyr__control {\n background: transparent;\n border: 0;\n border-radius: $plyr-control-radius;\n color: inherit;\n cursor: pointer;\n flex-shrink: 0;\n overflow: visible; // IE11\n padding: $plyr-control-padding;\n position: relative;\n transition: all 0.3s ease;\n\n svg {\n display: block;\n fill: currentColor;\n height: $plyr-control-icon-size;\n pointer-events: none;\n width: $plyr-control-icon-size;\n }\n\n // Default focus\n &:focus {\n outline: 0;\n }\n\n // Tab focus\n &.plyr__tab-focus {\n @include plyr-tab-focus;\n }\n}\n\n// Remove any link styling\na.plyr__control {\n text-decoration: none;\n\n &::after,\n &::before {\n display: none;\n }\n}\n\n// Change icons on state change\n.plyr__control:not(.plyr__control--pressed) .icon--pressed,\n.plyr__control.plyr__control--pressed .icon--not-pressed,\n.plyr__control:not(.plyr__control--pressed) .label--pressed,\n.plyr__control.plyr__control--pressed .label--not-pressed {\n display: none;\n}\n","// --------------------------------------------------------------\n// Controls\n// --------------------------------------------------------------\n\n// Hide native controls\n.plyr--full-ui ::-webkit-media-controls {\n display: none;\n}\n\n// Playback controls\n.plyr__controls {\n align-items: center;\n display: flex;\n justify-content: flex-end;\n text-align: center;\n\n .plyr__progress__container {\n flex: 1;\n min-width: 0; // Fix for Edge issue where content would overflow\n }\n\n // Spacing\n .plyr__controls__item {\n margin-left: calc(#{$plyr-control-spacing} / 4);\n\n &:first-child {\n margin-left: 0;\n margin-right: auto;\n }\n\n &.plyr__progress__container {\n padding-left: calc(#{$plyr-control-spacing} / 4);\n }\n\n &.plyr__time {\n padding: 0 calc(#{$plyr-control-spacing} / 2);\n }\n\n &.plyr__progress__container:first-child,\n &.plyr__time:first-child,\n &.plyr__time + .plyr__time {\n padding-left: 0;\n }\n }\n\n // Hide empty controls\n &:empty {\n display: none;\n }\n}\n\n// Some options are hidden by default\n.plyr [data-plyr='captions'],\n.plyr [data-plyr='pip'],\n.plyr [data-plyr='airplay'],\n.plyr [data-plyr='fullscreen'] {\n display: none;\n}\n\n.plyr--captions-enabled [data-plyr='captions'],\n.plyr--pip-supported [data-plyr='pip'],\n.plyr--airplay-supported [data-plyr='airplay'],\n.plyr--fullscreen-enabled [data-plyr='fullscreen'] {\n display: inline-block;\n}\n","// --------------------------------------------------------------\n// Menus\n// --------------------------------------------------------------\n\n.plyr__menu {\n display: flex; // Edge fix\n position: relative;\n\n // Animate the icon\n .plyr__control svg {\n transition: transform 0.3s ease;\n }\n\n .plyr__control[aria-expanded='true'] {\n svg {\n transform: rotate(90deg);\n }\n\n // Hide tooltip\n .plyr__tooltip {\n display: none;\n }\n }\n\n // The actual menu container\n &__container {\n animation: plyr-popup 0.2s ease;\n background: $plyr-menu-background;\n border-radius: 4px;\n bottom: 100%;\n box-shadow: $plyr-menu-shadow;\n color: $plyr-menu-color;\n font-size: $plyr-font-size-base;\n margin-bottom: 10px;\n position: absolute;\n right: -3px;\n text-align: left;\n white-space: nowrap;\n z-index: 3;\n\n > div {\n overflow: hidden;\n transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n // Arrow\n &::after {\n border: $plyr-menu-arrow-size solid transparent;\n border-top-color: $plyr-menu-background;\n content: '';\n height: 0;\n position: absolute;\n right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));\n top: 100%;\n width: 0;\n }\n\n [role='menu'] {\n padding: $plyr-control-padding;\n }\n\n [role='menuitem'],\n [role='menuitemradio'] {\n margin-top: 2px;\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n // Options\n .plyr__control {\n align-items: center;\n color: $plyr-menu-color;\n display: flex;\n font-size: $plyr-font-size-menu;\n padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5);\n user-select: none;\n width: 100%;\n\n > span {\n align-items: inherit;\n display: flex;\n width: 100%;\n }\n\n &::after {\n border: $plyr-menu-item-arrow-size solid transparent;\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n &--forward {\n padding-right: calc(#{$plyr-control-padding} * 4);\n\n &::after {\n border-left-color: $plyr-menu-item-arrow-color;\n right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});\n }\n\n &.plyr__tab-focus::after,\n &:hover::after {\n border-left-color: currentColor;\n }\n }\n\n &--back {\n font-weight: $plyr-font-weight-regular;\n margin: $plyr-control-padding;\n margin-bottom: calc(#{$plyr-control-padding} / 2);\n padding-left: calc(#{$plyr-control-padding} * 4);\n position: relative;\n width: calc(100% - (#{$plyr-control-padding} * 2));\n\n &::after {\n border-right-color: $plyr-menu-item-arrow-color;\n left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});\n }\n\n &::before {\n background: $plyr-menu-back-border-color;\n box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;\n content: '';\n height: 1px;\n left: 0;\n margin-top: calc(#{$plyr-control-padding} / 2);\n overflow: hidden;\n position: absolute;\n right: 0;\n top: 100%;\n }\n\n &.plyr__tab-focus::after,\n &:hover::after {\n border-right-color: currentColor;\n }\n }\n }\n\n .plyr__control[role='menuitemradio'] {\n padding-left: $plyr-control-padding;\n\n &::before,\n &::after {\n border-radius: 100%;\n }\n\n &::before {\n background: rgba(#000, 0.1);\n content: '';\n display: block;\n flex-shrink: 0;\n height: 16px;\n margin-right: $plyr-control-spacing;\n transition: all 0.3s ease;\n width: 16px;\n }\n\n &::after {\n background: #fff;\n border: 0;\n height: 6px;\n left: 12px;\n opacity: 0;\n top: 50%;\n transform: translateY(-50%) scale(0);\n transition: transform 0.3s ease, opacity 0.3s ease;\n width: 6px;\n }\n\n &[aria-checked='true'] {\n &::before {\n background: $plyr-control-toggle-checked-background;\n }\n\n &::after {\n opacity: 1;\n transform: translateY(-50%) scale(1);\n }\n }\n\n &.plyr__tab-focus::before,\n &:hover::before {\n background: rgba($plyr-color-gray-900, 0.1);\n }\n }\n\n // Option value\n .plyr__menu__value {\n align-items: center;\n display: flex;\n margin-left: auto;\n margin-right: calc((#{$plyr-control-padding} - 2) * -1);\n overflow: hidden;\n padding-left: calc(#{$plyr-control-padding} * 3.5);\n pointer-events: none;\n }\n }\n}\n","// ==========================================================================\n// Menus\n// ==========================================================================\n\n$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;\n$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;\n$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;\n$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;\n$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;\n$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;\n$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;\n$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;\n$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;\n","// --------------------------------------------------------------\n// Slider inputs -
\n// --------------------------------------------------------------\n\n.plyr--full-ui input[type='range'] {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: calc(#{$plyr-range-thumb-height} * 2);\n\n // `color` property is used in JS to populate lower fill for WebKit\n color: $plyr-range-fill-background;\n display: block;\n height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});\n margin: 0;\n min-width: 0;\n padding: 0;\n transition: box-shadow 0.3s ease;\n width: 100%;\n\n &::-webkit-slider-runnable-track {\n @include plyr-range-track;\n\n background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));\n }\n\n &::-webkit-slider-thumb {\n @include plyr-range-thumb;\n\n appearance: none;\n margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);\n }\n\n // Mozilla\n &::-moz-range-track {\n @include plyr-range-track;\n }\n\n &::-moz-range-thumb {\n @include plyr-range-thumb;\n }\n\n &::-moz-range-progress {\n background: currentColor;\n border-radius: calc(#{$plyr-range-track-height} / 2);\n height: $plyr-range-track-height;\n }\n\n // Microsoft\n &::-ms-track {\n @include plyr-range-track;\n\n color: transparent;\n }\n\n &::-ms-fill-upper {\n @include plyr-range-track;\n }\n\n &::-ms-fill-lower {\n @include plyr-range-track;\n\n background: currentColor;\n }\n\n &::-ms-thumb {\n @include plyr-range-thumb;\n\n // For some reason, Edge uses the -webkit margin above\n margin-top: 0;\n }\n\n &::-ms-tooltip {\n display: none;\n }\n\n // Focus styles\n &::-moz-focus-outer {\n border: 0;\n }\n\n &:focus {\n outline: 0;\n }\n\n &.plyr__tab-focus {\n &::-webkit-slider-runnable-track {\n @include plyr-tab-focus;\n }\n\n &::-moz-range-track {\n @include plyr-tab-focus;\n }\n\n &::-ms-track {\n @include plyr-tab-focus;\n }\n }\n}\n","// ==========================================================================\n// Sliders\n// ==========================================================================\n\n// Thumb\n$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;\n$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;\n$plyr-range-thumb-shadow: var(\n --plyr-range-thumb-shadow,\n 0 1px 1px rgba($plyr-color-gray-900, 0.15),\n 0 0 0 1px rgba($plyr-color-gray-900, 0.2)\n) !default;\n\n// Active state\n$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;\n\n// Track\n$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;\n\n// Fill\n$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;\n\n// Type specific\n$plyr-video-range-track-background: var(\n --plyr-video-range-track-background,\n $plyr-video-progress-buffered-background\n) !default;\n$plyr-video-range-thumb-active-shadow-color: var(\n --plyr-audio-range-thumb-active-shadow-color,\n rgba(#fff, 0.5)\n) !default;\n$plyr-audio-range-track-background: var(\n --plyr-audio-range-track-background,\n $plyr-audio-progress-buffered-background\n) !default;\n$plyr-audio-range-thumb-active-shadow-color: var(\n --plyr-audio-range-thumb-active-shadow-color,\n rgba($plyr-color-gray-900, 0.1)\n) !default;\n","// --------------------------------------------------------------\n// Faux poster overlay\n// --------------------------------------------------------------\n\n.plyr__poster {\n background-color: var(--plyr-video-background, $plyr-video-background);\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: contain;\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n transition: opacity 0.2s ease;\n width: 100%;\n z-index: 1;\n}\n\n.plyr--stopped.plyr__poster-enabled .plyr__poster {\n opacity: 1;\n}\n\n// Allow interaction with YouTube controls while paused\n.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {\n display: none;\n}\n","// --------------------------------------------------------------\n// Time\n// --------------------------------------------------------------\n\n.plyr__time {\n font-size: $plyr-font-size-time;\n}\n\n// Media duration hidden on small screens\n.plyr__time + .plyr__time {\n // Add a slash in before\n &::before {\n content: '\\2044';\n margin-right: $plyr-control-spacing;\n }\n\n @media (max-width: ($plyr-bp-md - 1px)) {\n display: none;\n }\n}\n","/* stylelint-disable selector-max-compound-selectors */\n// --------------------------------------------------------------\n// Tooltips\n// --------------------------------------------------------------\n\n.plyr__tooltip {\n background: $plyr-tooltip-background;\n border-radius: $plyr-tooltip-radius;\n bottom: 100%;\n box-shadow: $plyr-tooltip-shadow;\n color: $plyr-tooltip-color;\n font-size: $plyr-font-size-small;\n font-weight: $plyr-font-weight-regular;\n left: 50%;\n line-height: 1.3;\n margin-bottom: calc(#{$plyr-tooltip-padding} * 2);\n opacity: 0;\n padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);\n pointer-events: none;\n position: absolute;\n transform: translate(-50%, 10px) scale(0.8);\n transform-origin: 50% 100%;\n transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;\n white-space: nowrap;\n z-index: 2;\n\n // The background triangle\n &::before {\n border-left: $plyr-tooltip-arrow-size solid transparent;\n border-right: $plyr-tooltip-arrow-size solid transparent;\n border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;\n bottom: calc(#{$plyr-tooltip-arrow-size} * -1);\n content: '';\n height: 0;\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n width: 0;\n z-index: 2;\n }\n}\n\n// Displaying\n.plyr .plyr__control:hover .plyr__tooltip,\n.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,\n.plyr__tooltip--visible {\n opacity: 1;\n transform: translate(-50%, 0) scale(1);\n}\n\n.plyr .plyr__control:hover .plyr__tooltip {\n z-index: 3;\n}\n\n// First tooltip\n.plyr__controls > .plyr__control:first-child .plyr__tooltip,\n.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {\n left: 0;\n transform: translate(0, 10px) scale(0.8);\n transform-origin: 0 100%;\n\n &::before {\n left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});\n }\n}\n\n// Last tooltip\n.plyr__controls > .plyr__control:last-child .plyr__tooltip {\n left: auto;\n right: 0;\n transform: translate(0, 10px) scale(0.8);\n transform-origin: 100% 100%;\n\n &::before {\n left: auto;\n right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});\n transform: translateX(50%);\n }\n}\n\n.plyr__controls > .plyr__control:first-child,\n.plyr__controls > .plyr__control:first-child + .plyr__control,\n.plyr__controls > .plyr__control:last-child {\n &:hover .plyr__tooltip,\n &.plyr__tab-focus .plyr__tooltip,\n .plyr__tooltip--visible {\n transform: translate(0, 0) scale(1);\n }\n}\n","// ==========================================================================\n// Tooltips\n// ==========================================================================\n\n$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;\n$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;\n$plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);\n$plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;\n$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;\n$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;\n$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;\n","// --------------------------------------------------------------\n// Playback progress\n// --------------------------------------------------------------\n\n// Offset the range thumb in order to be able to calculate the relative progress (#954)\n$plyr-progress-offset: $plyr-range-thumb-height;\n\n.plyr__progress {\n left: calc(#{$plyr-progress-offset} * 0.5);\n margin-right: $plyr-progress-offset;\n position: relative;\n\n input[type='range'],\n &__buffer {\n margin-left: calc(#{$plyr-progress-offset} * -0.5);\n margin-right: calc(#{$plyr-progress-offset} * -0.5);\n width: calc(100% + #{$plyr-progress-offset});\n }\n\n input[type='range'] {\n position: relative;\n z-index: 2;\n }\n\n // Seek tooltip to show time\n .plyr__tooltip {\n font-size: $plyr-font-size-time;\n left: 0;\n }\n}\n\n.plyr__progress__buffer {\n -webkit-appearance: none; /* stylelint-disable-line */\n background: transparent;\n border: 0;\n border-radius: 100px;\n height: $plyr-range-track-height;\n left: 0;\n margin-top: calc((#{$plyr-range-track-height} / 2) * -1);\n padding: 0;\n position: absolute;\n top: 50%;\n\n &::-webkit-progress-bar {\n background: transparent;\n }\n\n &::-webkit-progress-value {\n background: currentColor;\n border-radius: 100px;\n min-width: $plyr-range-track-height;\n transition: width 0.2s ease;\n }\n\n // Mozilla\n &::-moz-progress-bar {\n background: currentColor;\n border-radius: 100px;\n min-width: $plyr-range-track-height;\n transition: width 0.2s ease;\n }\n\n // Microsoft\n &::-ms-fill {\n border-radius: 100px;\n transition: width 0.2s ease;\n }\n}\n\n// Loading state\n.plyr--loading .plyr__progress__buffer {\n animation: plyr-progress 1s linear infinite;\n background-image: linear-gradient(\n -45deg,\n $plyr-progress-loading-background 25%,\n transparent 25%,\n transparent 50%,\n $plyr-progress-loading-background 50%,\n $plyr-progress-loading-background 75%,\n transparent 75%,\n transparent\n );\n background-repeat: repeat-x;\n background-size: $plyr-progress-loading-size $plyr-progress-loading-size;\n color: transparent;\n}\n\n.plyr--video.plyr--loading .plyr__progress__buffer {\n background-color: $plyr-video-progress-buffered-background;\n}\n\n.plyr--audio.plyr--loading .plyr__progress__buffer {\n background-color: $plyr-audio-progress-buffered-background;\n}\n","// ==========================================================================\n// Progress\n// ==========================================================================\n\n// Loading\n$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;\n$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;\n\n// Buffered\n$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;\n$plyr-audio-progress-buffered-background: var(\n --plyr-audio-progress-buffered-background,\n rgba($plyr-color-gray-200, 0.6)\n) !default;\n","// --------------------------------------------------------------\n// Volume\n// --------------------------------------------------------------\n\n.plyr__volume {\n align-items: center;\n display: flex;\n max-width: 110px;\n min-width: 80px;\n position: relative;\n width: 20%;\n\n input[type='range'] {\n margin-left: calc(#{$plyr-control-spacing} / 2);\n margin-right: calc(#{$plyr-control-spacing} / 2);\n position: relative;\n z-index: 2;\n }\n}\n\n// Auto size on iOS as there's no slider\n.plyr--is-ios .plyr__volume {\n min-width: 0;\n width: auto;\n}\n","// --------------------------------------------------------------\n// Audio styles\n// --------------------------------------------------------------\n\n// Container\n.plyr--audio {\n display: block;\n}\n\n// Controls container\n.plyr--audio .plyr__controls {\n background: $plyr-audio-controls-background;\n border-radius: inherit;\n color: $plyr-audio-control-color;\n padding: $plyr-control-spacing;\n}\n\n// Control elements\n.plyr--audio .plyr__control {\n &.plyr__tab-focus,\n &:hover,\n &[aria-expanded='true'] {\n background: $plyr-audio-control-background-hover;\n color: $plyr-audio-control-color-hover;\n }\n}\n\n// Range inputs\n.plyr--full-ui.plyr--audio input[type='range'] {\n &::-webkit-slider-runnable-track {\n background-color: $plyr-audio-range-track-background;\n }\n\n &::-moz-range-track {\n background-color: $plyr-audio-range-track-background;\n }\n\n &::-ms-track {\n background-color: $plyr-audio-range-track-background;\n }\n\n // Pressed styles\n &:active {\n &::-webkit-slider-thumb {\n @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);\n }\n\n &::-moz-range-thumb {\n @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);\n }\n\n &::-ms-thumb {\n @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);\n }\n }\n}\n\n// Progress\n.plyr--audio .plyr__progress__buffer {\n color: $plyr-audio-progress-buffered-background;\n}\n","// --------------------------------------------------------------\n// Video styles\n// --------------------------------------------------------------\n\n@use 'sass:math';\n\n// Container\n.plyr--video {\n background: var(--plyr-video-background, $plyr-video-background);\n overflow: hidden;\n\n &.plyr--menu-open {\n overflow: visible;\n }\n}\n\n.plyr__video-wrapper {\n background: var(--plyr-video-background, $plyr-video-background);\n height: 100%;\n margin: auto;\n overflow: hidden;\n position: relative;\n width: 100%;\n}\n\n// Default to 16:9 ratio but this is set by JavaScript based on config\n$embed-padding: (math.div(100, 16) * 9);\n\n.plyr__video-embed,\n.plyr__video-wrapper--fixed-ratio {\n @supports not (aspect-ratio: 16 / 9) {\n height: 0;\n padding-bottom: to-percentage($embed-padding);\n position: relative;\n }\n\n aspect-ratio: 16 / 9;\n}\n\n.plyr__video-embed iframe,\n.plyr__video-wrapper--fixed-ratio video {\n border: 0;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n// For Vimeo, if the full custom UI is supported\n.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {\n $height: 240;\n $offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50)));\n\n padding-bottom: to-percentage($height);\n position: relative;\n transform: translateY(-$offset);\n}\n\n// Controls container\n.plyr--video .plyr__controls {\n background: $plyr-video-controls-background;\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n bottom: 0;\n color: $plyr-video-control-color;\n left: 0;\n padding: calc(#{$plyr-control-spacing} / 2);\n padding-top: calc(#{$plyr-control-spacing} * 2);\n position: absolute;\n right: 0;\n transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;\n z-index: 3;\n\n @media (min-width: $plyr-bp-sm) {\n padding: $plyr-control-spacing;\n padding-top: calc(#{$plyr-control-spacing} * 3.5);\n }\n}\n\n// Hide controls\n.plyr--video.plyr--hide-controls .plyr__controls {\n opacity: 0;\n pointer-events: none;\n transform: translateY(100%);\n}\n\n// Control elements\n.plyr--video .plyr__control {\n \n}\n\n// Large play button (video only)\n.plyr__control--overlaid {\n background: $plyr-video-control-background-hover;\n border: 0;\n border-radius: 100%;\n color: $plyr-video-control-color;\n display: none;\n left: 50%;\n opacity: 0.9;\n padding: calc(#{$plyr-control-spacing} * 1.5);\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: 0.3s;\n z-index: 2;\n\n // Offset icon to make the play button look right\n svg {\n left: 2px;\n position: relative;\n }\n\n &:hover,\n &:focus {\n opacity: 1;\n }\n}\n\n.plyr--playing .plyr__control--overlaid {\n opacity: 0;\n visibility: hidden;\n}\n\n.plyr--full-ui.plyr--video .plyr__control--overlaid {\n display: block;\n}\n\n// Video range inputs\n.plyr--full-ui.plyr--video input[type='range'] {\n &::-webkit-slider-runnable-track {\n background-color: $plyr-video-range-track-background;\n }\n\n &::-moz-range-track {\n background-color: $plyr-video-range-track-background;\n }\n\n &::-ms-track {\n background-color: $plyr-video-range-track-background;\n }\n\n // Pressed styles\n &:active {\n &::-webkit-slider-thumb {\n @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);\n }\n\n &::-moz-range-thumb {\n @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);\n }\n\n &::-ms-thumb {\n @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);\n }\n }\n}\n\n// Progress\n.plyr--video .plyr__progress__buffer {\n color: $plyr-video-progress-buffered-background;\n}\n","// --------------------------------------------------------------\n// Fullscreen\n// --------------------------------------------------------------\n\n.plyr:fullscreen {\n @include plyr-fullscreen-active;\n}\n\n// Fallback for unsupported browsers\n.plyr--fullscreen-fallback {\n @include plyr-fullscreen-active;\n\n bottom: 0;\n display: block;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 10000000;\n}\n","// ==========================================================================\n// Advertisements\n// ==========================================================================\n\n.plyr__ads {\n border-radius: inherit;\n bottom: 0;\n cursor: pointer;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1; // Hide it by default\n\n // Make sure the inner container is big enough for the ad creative.\n > div,\n > div iframe {\n height: 100%;\n position: absolute;\n width: 100%;\n }\n\n // The countdown label\n &::after {\n background: $plyr-color-gray-900;\n border-radius: 2px;\n bottom: $plyr-control-spacing;\n color: #fff;\n content: attr(data-badge-text);\n font-size: 11px;\n padding: 2px 6px;\n pointer-events: none;\n position: absolute;\n right: $plyr-control-spacing;\n z-index: 3;\n }\n\n &:empty::after {\n display: none;\n }\n}\n\n// Advertisement cue's for the progress bar\n.plyr__cues {\n background: currentColor;\n display: block;\n height: $plyr-range-track-height;\n left: 0;\n opacity: 0.8;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 3px;\n z-index: 3; // Between progress and thumb\n}\n","// ==========================================================================\n// Colors\n// ==========================================================================\n\n$plyr-color-main: var(--plyr-color-main, hsl(198deg 100% 50%)) !default;\n$plyr-video-background: var(--plyr-video-background, rgb(0 0 0 / 100%)) !default;\n\n// Grayscale\n$plyr-color-gray-900: hsl(216deg 15% 16%) !default;\n$plyr-color-gray-800: hsl(216deg 15% 25%) !default;\n$plyr-color-gray-700: hsl(216deg 15% 34%) !default;\n$plyr-color-gray-600: hsl(216deg 15% 43%) !default;\n$plyr-color-gray-500: hsl(216deg 15% 52%) !default;\n$plyr-color-gray-400: hsl(216deg 15% 61%) !default;\n$plyr-color-gray-300: hsl(216deg 15% 70%) !default;\n$plyr-color-gray-200: hsl(216deg 15% 79%) !default;\n$plyr-color-gray-100: hsl(216deg 15% 88%) !default;\n$plyr-color-gray-50: hsl(216deg 15% 97%) !default;\n","// --------------------------------------------------------------\n// Preview Thumbnails\n// --------------------------------------------------------------\n\n@import './settings';\n\n.plyr__preview-thumb {\n background-color: $plyr-preview-background;\n border-radius: 3px;\n bottom: 100%;\n box-shadow: $plyr-preview-shadow;\n margin-bottom: calc(#{$plyr-preview-padding} * 2);\n opacity: 0;\n padding: $plyr-preview-radius;\n pointer-events: none;\n position: absolute;\n transform: translate(0, 10px) scale(0.8);\n transform-origin: 50% 100%;\n transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;\n z-index: 2;\n\n &--is-shown {\n opacity: 1;\n transform: translate(0, 0) scale(1);\n }\n\n // The background triangle\n &::before {\n border-left: $plyr-preview-arrow-size solid transparent;\n border-right: $plyr-preview-arrow-size solid transparent;\n border-top: $plyr-preview-arrow-size solid $plyr-preview-background;\n bottom: calc(#{$plyr-preview-arrow-size} * -1);\n content: '';\n height: 0;\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n width: 0;\n z-index: 2;\n }\n\n &__image-container {\n background: $plyr-preview-image-background;\n border-radius: calc(#{$plyr-preview-radius} - 1px);\n overflow: hidden;\n position: relative;\n z-index: 0;\n\n img {\n height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript\n left: 0;\n max-height: none;\n max-width: none;\n position: absolute;\n top: 0;\n width: 100%;\n }\n }\n\n // Seek time text\n &__time-container {\n bottom: $plyr-preview-time-bottom-offset;\n left: 0;\n position: absolute;\n right: 0;\n white-space: nowrap;\n z-index: 3;\n\n span {\n background-color: $plyr-preview-time-background;\n border-radius: calc(#{$plyr-preview-radius} - 1px);\n color: $plyr-preview-time-color;\n font-size: $plyr-preview-time-font-size;\n padding: $plyr-preview-time-padding;\n }\n }\n}\n\n.plyr__preview-scrubbing {\n bottom: 0;\n filter: blur(1px);\n height: 100%;\n left: 0;\n margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 100%;\n z-index: 1;\n\n &--is-shown {\n opacity: 1;\n }\n\n img {\n height: 100%;\n left: 0;\n max-height: none;\n max-width: none;\n object-fit: contain;\n position: absolute;\n top: 0;\n width: 100%;\n }\n}\n","// --------------------------------------------------------------\n// Preview Thumbnails\n// --------------------------------------------------------------\n\n$plyr-preview-padding: $plyr-tooltip-padding !default;\n$plyr-preview-background: $plyr-tooltip-background !default;\n$plyr-preview-radius: $plyr-tooltip-radius !default;\n$plyr-preview-shadow: $plyr-tooltip-shadow !default;\n$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;\n$plyr-preview-image-background: $plyr-color-gray-200 !default;\n$plyr-preview-time-font-size: $plyr-font-size-time !default;\n$plyr-preview-time-padding: 3px 6px !default;\n$plyr-preview-time-background: rgba(0, 0, 0, 0.55);\n$plyr-preview-time-color: #fff;\n$plyr-preview-time-bottom-offset: 6px;\n","// --------------------------------------------------------------\n// Animation utils\n// --------------------------------------------------------------\n\n.plyr--no-transition {\n transition: none !important;\n}\n","// --------------------------------------------------------------\n// Hiding content nicely\n// --------------------------------------------------------------\n\n// Screen reader only elements\n.plyr__sr-only {\n clip: rect(1px, 1px, 1px, 1px);\n overflow: hidden;\n\n // !important is not always needed\n @if $plyr-sr-only-important {\n border: 0 !important;\n height: 1px !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n } @else {\n border: 0;\n height: 1px;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n}\n\n.plyr [hidden] {\n display: none !important;\n}\n","// ==========================================================================\n// Plyr styles\n// https://github.com/sampotts/plyr\n// TODO: Review use of BEM classnames\n// ==========================================================================\n@charset 'UTF-8';\n@import 'lib/css-vars';\n\n$css-vars-use-native: true;\n\n@import 'settings/breakpoints';\n@import 'settings/colors';\n@import 'settings/cosmetics';\n@import 'settings/type';\n@import 'settings/badges';\n@import 'settings/captions';\n@import 'settings/controls';\n@import 'settings/helpers';\n@import 'settings/menus';\n@import 'settings/progress';\n@import 'settings/sliders';\n@import 'settings/tooltips';\n@import 'lib/animation';\n@import 'lib/functions';\n@import 'lib/mixins';\n@import 'base';\n@import 'components/badges';\n@import 'components/captions';\n@import 'components/control';\n@import 'components/controls';\n@import 'components/menus';\n@import 'components/sliders';\n@import 'components/poster';\n@import 'components/times';\n@import 'components/tooltips';\n@import 'components/progress';\n@import 'components/volume';\n@import 'types/audio';\n@import 'types/video';\n@import 'states/fullscreen';\n@import 'plugins/ads';\n@import 'plugins/preview-thumbnails/index';\n@import 'utils/animation';\n@import 'utils/hidden';\n\n\n\n//Overrides\n.plyr--video button.plyr__control--overlaid{\n &,\n &:hover,\n &:focus{\n @apply\n bg-transparent\n rounded-none\n p-0\n shadow-none;\n background: url($dist + '/play_btn.svg');\n background-size: contain;\n }\n svg{\n @apply hidden;\n }\n\n\n}\n.plyr.plyr--paused,\n.plyr.plyr--stopped{\n .plyr__controls { display: none }\n} \n\n\n\n//Customizations\n.plyr{\n @apply rounded-md\n overflow-hidden;\n\n &.plyr--stopped::before{\n content: '';\n @apply\n absolute\n inset-0\n z-10;\n background: linear-gradient(106.73deg, rgba(118, 188, 33, 0.4) 1.48%, rgba(0, 171, 200, 0.4) 100%)\n }\n\n &--video button.plyr__control--overlaid{\n width: 70px;\n height: 78px;\n z-index: 10;\n opacity: 1;\n }\n \n}",".Box{\n @apply\n bg-white\n rounded\n p-3\n shadow-box\n border-black\n border;\n}",".Share{\n $count: 4;\n $gap: 8px*$count;\n $icons: 16px * $count;\n $padding: 24px + 4px;\n $height: 34px;\n $width: $icons + $gap + $padding;\n @apply relative;\n\n &-btn{\n @apply flex items-center gap-2;\n }\n\n &-btnText{\n @apply\n text-blue-light\n font-bold\n inline-block\n relative\n z-0;\n }\n\n &-arrow{\n @apply\n bg-no-repeat\n bg-bottom\n bg-blue-light\n inline-block\n rounded-full\n transition\n z-20 \n relative;\n @include size($height);\n background-image: url(\"#{$dist}/share-arrow.svg\");\n }\n\n &-list{\n @apply\n bg-blue-light\n flex\n items-center\n gap-1\n absolute\n right-2\n z-10\n top-1/2\n -translate-y-1/2\n rounded-l-full\n origin-right\n scale-x-0\n transition\n pr-0;\n direction: rtl;\n @include size($width, $height);\n\n li{ @apply shrink-0 }\n \n img{ @apply block w-2 h-2; }\n }\n\n //open\n\n &.is-open {\n .Share{\n &-arrow{ @apply -rotate-90; } \n &-list{ @apply scale-100 pr-3 pl-sm; }\n }\n }\n}","@charset \"UTF-8\";\n\n/// Sets the `width` and `height` of the element in one statement.\n///\n/// @argument {number (with unit) | string} $width\n///\n/// @argument {number (with unit) | string} $height [$width]\n///\n/// @example scss\n/// .first-element {\n/// @include size(2em);\n/// }\n///\n/// // CSS Output\n/// .first-element {\n/// width: 2em;\n/// height: 2em;\n/// }\n///\n/// @example scss\n/// .second-element {\n/// @include size(auto, 10em);\n/// }\n///\n/// // CSS Output\n/// .second-element {\n/// width: auto;\n/// height: 10em;\n/// }\n///\n/// @require {function} _is-size\n\n@mixin size(\n $width,\n $height: $width\n) {\n @if _is-size($height) {\n height: $height;\n } @else {\n @error \"`#{$height}` is not a valid length for the `$height` argument \" +\n \"in the `size` mixin.\";\n }\n\n @if _is-size($width) {\n width: $width;\n } @else {\n @error \"`#{$width}` is not a valid length for the `$width` argument \" +\n \"in the `size` mixin.\";\n }\n}\n",".btn{\n @apply\n text-center\n rounded-full\n px-5\n py-1.75\n text-white\n text-16\n font-bold\n bg-green\n flex\n items-center\n justify-center\n transition-all\n gap-1\n whitespace-nowrap;\n\n height: 52px;\n\n\n &:hover,\n &:focus{\n box-shadow: 2px 2px 0px $green-dark;\n transform: translate(-2px, -2px);\n }\n\n &[disabled]{\n @apply\n bg-opacity-50\n bg-gray-dark\n cursor-not-allowed;\n &:hover,\n &:focus{\n box-shadow: none;\n transform: translate(0,0);\n }\n }\n\n}\n.btn--thin {\n height: 40px;\n &:hover,\n &:focus{\n height: 40px;\n }\n}\n.btn--secondary{\n @apply bg-blue;\n\n &:hover,\n &:focus{\n box-shadow: 2px 2px 0px $blue-dark;\n }\n}\n\n.btn--ghost{\n @apply \n bg-white \n text-gray-dark\n border\n border-gray-dark;\n\n &:hover,\n &:focus{\n box-shadow: 2px 2px 0px $gray-dark;\n }\n}\n\n.btn--text{\n @apply\n text-blue-light;\n\n &::after{\n @apply\n inline-block\n ml-2\n translate-y-[1px];\n content: inline-svg('
')\n }\n\n &:hover{\n color: darken($blue-dark, $amount: 8);\n\n &::after{\n content: inline-svg('
')\n }\n }\n}\n\n\n/*************************************\n* Auto space out button when after a p\n*************************************/\np + .btn{\n @apply mt-2;\n}","input::placeholder{\n\t@apply text-gray-dark;\n}\nlabel{\n\t@apply\n\t\ttext-black\n\t\tfont-bold\n block;\n}\n\n/*************************************\n* Inputs\n*************************************/\nselect {\n\t@apply block \n\t\tborder-b\n\t\tborder-black\n\t\tbg-gray-light\n\t\th-auto \n\t\tpy-3 \n\t\tpx-3\n\t\tpr-9\n\t\tappearance-none \n\t\trelative;\n\t\t\n\tbackground: url($dist + '/arrow-down.svg') $gray-light no-repeat right 24px center;\n}\n\ninput[type=\"checkbox\"]{\n\t@apply\n\t\tappearance-none\n\t\tborder-black\n\t\tborder\n\t\trounded-[2px]\n\t\tcursor-pointer;\n\t@include size(20px);\n\n\t&:checked{\n\t\t@apply\n\t\t\tbg-blue\n\t\t\tbg-no-repeat\n\t\t\tbg-center;\n\t\tbackground-image: inline-svg('
');\n\t\tbackground-size: 70%;\n\t\tborder-color: darken($blue-dark, 14%);\n\t}\n}\n\ninput[type=\"radio\"]{\n\t@apply\n\t\tappearance-none\n\t\tborder-black\n\t\tborder\n\t\trounded-full\n\t\tcursor-pointer\n\t\tgrid\n\t\tcontent-center\n\t\tjustify-center;\n\t@include size(21px);\n\n\t&::before {\n\t\tcontent: \"\";\n\t\t@include size(8px);\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\ttransition: 120ms transform ease-in-out;\n\t\tbox-shadow: inset 1em 1em white;\n\t}\n\n\t&:checked{\n\t\t@apply bg-blue; \n\t\tborder-color: darken($blue-dark, 14%);\n\n\t\t&::before {\n\t\t\t\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n}\n\n.form-check-label{\n\t@apply\n\t\tflex\n\t\titems-start\n\t\tgap-1\n\t\tmy-2\n\t\tfont-normal\n\t\tcursor-pointer;\n\t\n\tinput{\n\t\ttransform: translateY(2px);\n\t\tflex-shrink: 0;\n\t}\n}\n\n\n\n/*************************\n* Icons inside Inputs\n**************************/\ninput.icn{\n\tbackground-repeat: no-repeat;\n\tbackground-position: $spacing-1 center;\n\tpadding-left: $spacing-4;\n\n\t&:focus,\n\t&-active{\n\t\tpadding-left: $spacing-4 !important;\t\n\t}\n}\n\n\n.formRow{\n\t@apply mb-3;\n}\n\n\n/*************************\n* Freeform stuff\n**************************/\n\n.Form textarea {\n @apply block \n border-b\n border-black\n bg-gray-light\n h-auto \n p-1 \n w-full;\n}\n\n#{$all-text-inputs}{\n\t@apply\n\t\tw-full\n\t\tp-3\n\t\ttext-black\n\t\tbg-gray-light\n\t\tborder-b\n\t\tborder-black\n\t\trounded-tr-sm\n\t\trounded-tl-sm;\n}\n#{$all-text-inputs-active},\n#{$all-text-inputs-focus}{\n @apply\n outline-none\n border-blue;\n}\n\n.freeform {\n\t&-row {\n\t\tbutton[type=submit] {\n\t\t\t@apply \n\t\t\t\tbtn\n\t\t\t\tmt-[48px];\n\t\t}\n\t}\n}\n\n//Floating Labels\n.Floating{\n\t@apply relative;\n\n\t&-input{\n\t\tpadding-top: calc($spacing-3 + 4px);\n\t\tpadding-bottom: calc($spacing-3 - 4px);\n\t}\n\t&-input:placeholder-shown{\n\t\t@apply p-3;\n\t}\n\n\t&-label{\n\t\t@apply\n\t\t\tabsolute\n \t\tleft-3\n\t\t\tfont-normal\n\t\t\ttext-gray-dark\n\t\t\tpointer-events-none\n\t\t\ttransition-all\n\t\t\ttop-sm\n\t\t\t-translate-y-0\n\t\t\ttext-14;\n\t}\n\n\t&-input:placeholder-shown + &-label{\n\t\t@apply\n\t\t\ttop-1/2\n\t\t\t-translate-y-1/2\n\t\t\ttext-18;\n\t}\n\n\ttextarea.Floating-input:placeholder-shown + &-label{\n\t\t@apply top-3 translate-y-0;\n\t}\n\n}\n#{$all-text-inputs}{\n&.is-error{\n\t@apply border-red;\n}\n}\nul.errors{\n\t@apply mt-1 font-bold text-red;\n}\n\n\n\n/*************************************\n* Search Forms with results\n*************************************/\n.Search{\n\t&-input{\n\t\t@apply\n\t\t\tborder\n\t\t\tborder-black\n bg-white\n\t\t\tp-3\n\t\t\tpl-7\n\t\t\trounded-full\n\t\t\tw-full;\n\t\tbackground: url(\"#{$dist}/icn_search--big.svg\") 24px center no-repeat;\n\t}\n\n\t&-cancel{\n\t\t@apply\n\t\t\tabsolute\n\t\t\tright-3\n\t\t\ttop-1/2\n\t\t\t-translate-y-1/2\n\t\t\trounded-none\n\t\t\tbg-transparent\n\t\t\tbg-center\n\t\t\tp-0\n\t\t\tflex\n\t\t\titems-center\n\t\t\tgap-1\n\t\t\tleading-none;\n \n\t\t&::after{\n\t\t\tcontent: url(\"#{$dist}/icn_close.svg\");\n\t\t\t@apply\n\t\t\t\tw-3\n\t\t\t\th-3\n\t\t\t\tblock;\n\t\t\ttransform: translateY(1px)\n \t\t}\n\n\t\tspan{\n\t\t\t@apply\n\t\t\t\ttext-gray-medium\n\t\t\t\ttext-12\n\t\t\t\tbg-gray-light\n\t\t\t\tblock\n\t\t\t\th-3\n\t\t\t\tw-3\n\t\t\t\tpt-sm\n\t\t\t\ttext-center\n\t\t\t\tborder\n\t\t\t\tborder-gray-line;\n\t\t\tline-height: $spacing-1*1.5;\n\t\t\tborder-radius: 4px;\n\t\t}\n \t}\n\n\t&-form{ @apply relative }\n\n\t&-resultsTitle {\n\t\t@apply\n\t\t\tpt-2\n\t\t\tpx-2\n\t\t\tuppercase;\n\t}\n\n &-result {\n @apply\n block\n p-2\n\t\t\tborder-b\n\t\t\tborder-gray\n\t\t\ttransition-all;\n\n\t\t&:last-child {\n\t\t\t@apply\n\t\t\t\tborder-b-0;\n\t\t}\n\n\t\t> h5 {\n\t\t\t@apply \n\t\t\t\ttext-18;\n\t\t}\n\n\t\tp {\n\t\t\t@apply\n\t\t\t\ttext-16;\n\t\t}\n\n &:focus{\n @apply\n outline-none\n bg-gray-light;\n\t\t\t\t// my-1\n\t\t\t\t// rounded\n }\n \n /* &:first-of-type{\n @apply mt-2;\n } */\n }\n\n\t&-highlighted.prose {\n\t\t@apply text-gray-dark;\n\t\t\n\t\th1, h2, h3, h4, h5 {\n\t\t\t@apply \n\t\t\t\ttext-18;\n\t\t}\n\n\t\tp {\n\t\t\t&:not(:first-child) {\n\t\t\t\t@apply\n\t\t\t\t\thidden;\n\t\t\t}\n\t\t}\n\n\t\tul {\n\t\t\t// list-style-position: inside;\n\t\t\t@apply\n\t\t\t\tlist-inside;\n\t\t}\n\t}\n\n\t&-findBranch {\n\t\t@apply\n\t\t\tflex \n\t\t\tjustify-end \n\t\t\titems-center\n\t\t\ttext-18\n\t\t\ttext-black;\n\n\t\t\n\t\t&:after {\n\t\t\tcontent: url($dist + '/arrow-right.svg');\n\t\t\t@apply\n\t\t\t\tblock\n\t\t\t\tml-2;\n\t\t}\n\n\t\t/* &.Search-findBranch {\n\t\t\t&--white {\n\t\t\t\t@apply text-white;\n\n\t\t\t\t&:after {\n\t\t\t\t\tcontent: url($dist + 'arrow-right--white.svg');\n\t\t\t\t}\n\t\t\t}\n\t\t} */\n\t}\n}\n::-webkit-search-cancel-button, \n::-webkit-search-decoration, \n::-webkit-search-results-button, \n::-webkit-search-results-decoration {\n display: none;\n}\n\n\n/**\n\n// Custom radio styling\n.Form input[type=\"radio\"] + label {\n @apply relative\n cursor-pointer\n pl-4;\n}\n\n.Form input[type=\"radio\"] + label::before {\n display: block;\n content: '';\n height: 20px;\n width: 20px;\n border-radius: 100px;\n margin-right: 16px;\n border: 1px solid $blue-light;\n background: $blue-lightest;\n position: absolute;\n top: 1px;\n left: 0;\n \n}\n\n.Form input[type=\"radio\"] {\n position: absolute;\n height: 1px; \n width: 1px;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n.Form input[type=\"radio\"]:checked + label::before {\n background: white;\n border: 4px solid $blue;\n}\n\n.Form input[type=\"radio\"]:focus + label::before {\n box-shadow: 0 0px 6px $blue-light;\n}\n\n// Custom checkbox styling\n.Form input[type=\"checkbox\"] + label {\n @apply relative\n cursor-pointer\n pl-4;\n}\n\n.Form input[type=\"checkbox\"] + label::before {\n display: block;\n content: '';\n height: 20px;\n width: 20px;\n margin-right: 16px;\n border: 1px solid $blue-light;\n background: $blue-lightest;\n position: relative;\n position: absolute;\n top: -1px;\n left: 0;\n}\n\n.Form input[type=\"checkbox\"] {\n position: absolute;\n height: 1px; \n width: 1px;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n.Form input[type=\"checkbox\"]:checked + label::before {\n background: $blue;\n border-color: $blue;\n}\n\n.Form input[type=\"checkbox\"]:checked + label::after {\n content: '';\n position: absolute;\n top: 4px;\n left: 3px;\n border-left: 2px solid white;\n border-bottom: 2px solid white;\n height: 7px;\n width: 14px;\n transform: rotate(-45deg);\n}\n\n.Form input[type=\"checkbox\"]:focus + label::before {\n box-shadow: 0 0px 6px $blue-light;\n}\n\n.Form input[type=\"checkbox\"].FormField-error + label::before {\n border-color: #f00;\n background: rgba(255, 0, 0, 0.1);\n}\n\n.Form input.FormField-error, textarea.FormField-error {\n border-color: #f00;\n background: rgba(255, 0, 0, 0.1);\n}\n\nselect.FormField-error {\n border-color: #f00;\n background: url($dist + 'images/icon-select.svg') rgba(255, 0, 0, 0.1) no-repeat right 20px center;\n}\n\n.FormField-errors {\n @apply text-16\n mt-1\n block;\n color: #f00;\n}\n\n.FormStatus {\n p {\n @apply mb-0;\n }\n}\n\n**/",".FooterRouting {\n @apply\n flex\n flex-row\n justify-between\n items-center\n bg-blue-dark\n w-full\n py-3\n px-5;\n\n @screen lg {\n @apply\n px-[2.5%]\n mt-7\n flex-col\n items-start;\n }\n}\n\n.FooterRoutingNumber {\n @apply\n text-16\n text-white\n p-0\n m-0;\n\n &--text {\n @apply\n mr-3\n font-bold;\n }\n\n @screen lg {\n @apply\n flex\n flex-row\n justify-between\n w-full\n mb-2;\n }\n}\n\n.FooterTelephoneBanking {\n @apply\n text-16\n text-white\n p-0\n m-0\n flex\n flex-row\n items-center;\n\n &--icon {\n @apply\n flex\n flex-row\n items-center\n mr-3;\n\n &:before {\n content: url($dist + '/icons/phone-footer.svg');\n @apply\n block\n w-[17px]\n h-[17px]\n mr-1;\n }\n }\n\n @screen lg {\n @apply\n flex\n flex-row\n justify-between\n w-full;\n }\n}\n\n.Footer {\n @apply\n w-full\n bg-black;\n\n &-main,\n &-meta,\n &-newsletterPrivacy {\n @apply\n flex\n flex-row\n py-6\n px-9;\n\n @screen lg {\n @apply\n flex-col\n container\n px-0\n py-6;\n }\n }\n\n &-meta {\n @apply\n flex\n flex-col\n items-center\n justify-center\n pt-2;\n }\n\n &-newsletterPrivacy {\n @apply\n pt-4\n pb-1\n }\n\n &-siteNav {\n @apply\n flex\n flex-row\n w-full\n justify-around;\n\n @screen lg {\n @apply\n flex-col;\n }\n\n li {\n > p, > h6 {\n @apply\n text-gray-medium\n text-[20px]\n font-normal;\n }\n\n > ul {\n @apply\n flex\n flex-col\n mt-3;\n\n li {\n @apply mb-2;\n\n a {\n @apply\n text-18\n text-white;\n }\n }\n }\n }\n }\n\n &-newsletterPrivacy {\n @apply\n justify-between\n items-center;\n\n @screen lg {\n @apply\n items-start;\n }\n }\n}\n\n.FooterLogo {\n @apply\n block\n bg-no-repeat\n mb-5\n h-[77px];\n\n aspect-ratio: calc( 245/77 );\n background: url(\"#{$dist}/logo-footer.svg\") center/100% no-repeat;\n}\n\n.FooterOpenAccount {\n @apply\n px-8\n font-bold\n btn\n md:w-min;\n}\n\n.FooterNewsletter {\n // more to come\n @screen lg {\n @apply\n mb-2;\n }\n\n &-fields {\n @apply\n flex\n flex-row\n items-center\n rounded-full\n bg-white\n bg-opacity-50;\n\n }\n\n &-emailInput {\n @apply\n bg-transparent\n py-[16px]\n px-[30px]\n outline-none\n border-none\n text-white\n font-bold;\n\n &:focus {\n\n }\n\n &::placeholder {\n @apply\n text-white;\n }\n }\n\n &-submit {\n @apply\n rounded-full\n bg-black\n text-white\n py-[12px]\n px-[25px]\n mr-[4px]\n transition-colors;\n\n &:hover {\n @apply\n bg-green\n text-black;\n }\n }\n}\n\n.FooterPrivacyNav {\n @apply\n flex\n flex-row\n mx-auto;\n\n li {\n @apply\n mr-5;\n\n &:last-child {\n @apply mr-0;\n }\n\n a {\n @apply\n text-white;\n }\n }\n\n @screen lg {\n @apply\n flex-col\n mt-2;\n\n li {\n @apply\n mr-0\n mb-2;\n }\n }\n\n}\n\n.FooterFootnotes {\n @apply\n flex\n flex-col;\n\n @screen lg {\n @apply\n flex-row\n w-full;\n }\n\n li {\n @apply\n flex\n flex-row\n items-baseline\n justify-start\n mb-5\n text-white;\n\n &:before {\n @apply\n text-white\n mr-1;\n content: attr(data-footnote) \". \";\n }\n\n p {\n @apply\n text-white\n font-bold\n text-16;\n }\n\n strong {\n @apply text-white\n }\n\n a{\n @apply underline text-white\n }\n }\n}\n\n.FooterHousingOpportunities {\n @apply\n flex\n flex-row\n max-h-[95px]\n items-center;\n\n li {\n @apply mr-5;\n\n &:last-child {\n @apply mr-0;\n }\n }\n}",".SearchModal{\n @apply\n w-9/16\n mx-auto\n mt-15;\n border-radius: 52px;\n\n @screen lg {\n @apply\n w-14/16;\n }\n}",".LoginModal {\n @apply \n relative \n max-w-md \n mx-auto \n mt-15\n p-5\n bg-white \n rounded-md \n border \n border-black \n shadow-black \n shadow-box-small;\n}","@import 'searchModal';\n@import 'loginModal';\n\n:root{\n --navHeight: 135px;\n}\n\n.Nav{\n @apply\n flex\n items-center\n justify-center\n z-[100]\n relative;\n height: var(--navHeight);\n background-color: $white;\n box-shadow: 0px 2px 0px $gray-light;\n\n @screen sm {\n @apply \n sticky\n top-0;\n }\n\n &>.container>*{\n @apply relative z-20;\n }\n\n .logo{\n @apply -translate-y-1;\n }\n\n //main nav items with dropdowns\n &-main{\n @apply\n flex\n gap-4\n relative;\n \n a{\n @apply\n font-bold\n text-black;\n }\n\n &::before{\n content: '';\n @apply\n -bottom-sm\n absolute\n border-b-2\n border-blue;\n left: var(--pos);\n width: var(--width);\n transition: all .3s $easeInOutQuad;\n }\n\n @screen lg+ {\n @apply gap-2;\n }\n }\n\n &-utility{\n @apply \n flex\n gap-3\n items-center;\n\n\n &>a:not(.btn),\n &>button{\n @apply \n font-bold\n tracking-wider\n text-black\n transition-none\n gap-1;\n }\n \n @screen lg+ {\n \n }\n }\n \n &-searchBtn{\n background-image: url(\"#{$dist}/icn-search.svg\");\n width: 17px;\n height: 17px;\n }\n\n &-locationBtn,\n &-loginBtn{\n @apply flex items-center gap-1;\n }\n \n &-searchBtn,\n &-loginBtn{\n @apply \n rounded-none\n bg-transparent\n p-0\n bg-no-repeat\n uppercase;\n }\n\n &-loginBtn::before{\n content: url(\"#{$dist}/icn-lock.svg\");\n }\n\n &-hamburger{\n @apply hidden;\n }\n\n &.is-mobile {\n @apply\n w-full\n max-w-full;\n }\n}\n\n.logo{\n @apply\n block\n bg-no-repeat;\n \n height: 54px;\n aspect-ratio: calc( 192/54 );\n background: url(\"#{$dist}/logo.svg\") center/100% no-repeat;\n text-indent: -9999px;\n \n //2023 50 year anniversary logo\n &--50{\n background: url(\"#{$dist}/logo-50.svg\") left/100% no-repeat;\n background-size: contain;\n height: 75px;\n aspect-ratio: calc( 192/84 );\n\n }\n\n @screen lg+ {\n width: 130px;\n }\n @screen md {\n height: 55px;\n }\n @screen sm {\n height: 35px;\n }\n}\n\n\n.navIcon {\n width: 29px;\n}\n\n\n/*************************************\n* Hamburger Menu\n*************************************/\n\n@screen lg{\n .Nav{\n &-hamburger{\n @apply block;\n }\n &-main{ @apply hidden; }\n &-utility>a.btn{\n @apply hidden;\n }\n }\n}\n\n.Nav.is-mobile.is-open{\n @apply min-h-screen overflow-auto block;\n padding-top: 30px;\n}\n\n.Nav-hamburger{\n @apply\n relative\n z-20\n}\n.BurgerNav{\n @apply\n min-h-screen\n h-full\n w-full\n absolute\n top-0\n left-0\n translate-x-full\n bg-gray-light\n transition-transform\n ease-out\n z-10\n bg-white;\n\n /* min-h-screen\n h-full\n \n max-height: 99999px; */\n\n margin-top: var(--navHeight);\n max-height: 99999px; \n max-width: 100vw;\n\n &.is-open{\n @apply translate-x-0;\n }\n\n @screen sm {\n &-pane {\n @apply\n overflow-y-scroll;\n }\n }\n\n &-list{\n @apply\n border-t\n border-gray-line;\n\n a{\n @apply\n grid\n p-2\n border-b\n border-gray-line\n text-24\n text-black\n font-bold\n gap-1\n items-center;\n grid-template-columns: $spacing-4 1fr $spacing-1;\n\n &::after{\n content: url(\"#{$dist}/arrow-right.svg\")\n }\n\n span{\n grid-column-start: 2;\n }\n\n &.BurgerNav-cta{\n @apply\n bg-green\n text-white;\n\n &::after{\n content: url(\"#{$dist}/arrow-right--inverted.svg\")\n }\n }\n }\n\n li:last-of-type>a{@apply border-b-0}\n }\n\n &-back{\n @apply \n flex\n gap-1\n items-center\n ml-7\n text-blue-light\n py-2;\n\n &::before{\n content: inline-svg('
')\n }\n }\n}\n\n\n\n/*************************************\n* Dropdowns\n*************************************/\n$dropdownTransition: .4s $easeOutQuad;\n.Dropdown{\n @apply\n absolute\n z-10\n top-0\n left-0\n right-0\n bg-white\n rounded-bl-md\n rounded-br-md\n opacity-0;\n padding-top: var(--navHeight);\n transform: perspective(1000px) rotateX(-25deg);\n visibility: hidden;\n transform-origin: top center;\n transition: all $dropdownTransition;\n\n &.is-open{\n transform: perspective(1000px) rotateX(0deg);\n box-shadow: 0px 8px 0px $gray-light;\n opacity: 1;\n visibility: visible;\n\n .Dropdown-container{\n @apply opacity-100 bg-white;\n }\n }\n\n &-container{\n @apply\n flex \n justify-between\n gap-1\n items-start\n pb-8\n opacity-0\n bg-green;\n transition: all .5s $easeOutQuad .0s;\n }\n\n \n}\n\n\n\n\n.DropTabs{\n @apply\n flex\n w-10/16\n shrink-0;\n\n &-list{\n @apply\n flex\n flex-col\n shrink-0\n gap-2\n pr-4\n border-r\n border-gray-line;\n }\n\n &-tab{\n @apply\n bg-white\n rounded-sm\n p-2\n gap-9\n text-gray-dark\n flex\n justify-between\n text-left\n w-full\n items-center;\n\n &::after{\n content: url(\"#{$dist}/arrow-right--green.svg\");\n line-height: 0;\n }\n\n &:hover{\n @apply\n bg-gray-light\n translate-y-0\n translate-x-0\n shadow-none;\n }\n\n &.is-selected{\n @apply\n bg-blue\n text-white;\n \n &::after{\n content: url(\"#{$dist}/arrow-right--white.svg\");\n }\n }\n }\n}\n\n\n.DropNavs{\n @apply\n columns-2\n gap-x-7\n gap-y-4\n space-y-4\n pl-5;\n // max-height: 50vh;\n min-height: 390px;\n\n &-list{\n @apply space-y-2;\n break-inside: avoid;\n }\n\n li>a{\n @apply text-blue-light;\n\n &:hover{\n @apply underline;\n color: darken($blue-dark, 5%);\n }\n }\n li>h5>a{\n @apply text-black;\n }\n \n}\n\n\n.DropCTA{\n @apply\n border\n border-gray-line\n rounded-lg\n rounded-tr-none\n p-2\n w-3/16\n flex\n flex-col\n justify-center\n items-center\n text-14\n text-center\n flex-1;\n\n max-width: 252px;\n max-height: 373px;\n \n &.is-primary{\n @apply\n shadow-box-small;\n }\n\n &-visual{\n @apply \n aspect-square \n block \n w-full\n flex\n items-center\n justify-center\n overflow-hidden\n rounded-lg\n rounded-tr-none\n mb-2;\n }\n\n p{\n @apply\n leading-tight\n text-black;\n }\n}\n\n",".ProductBox{\n @apply\n rounded-lg\n rounded-tr-none\n rounded-bl-none\n bg-gray-light\n flex\n flex-col\n gap-4\n items-center\n py-4\n px-3\n transition-all\n border\n border-transparent\n w-full\n text-gray-dark;\n\n &:hover{\n @apply\n shadow-box-small\n shadow-black\n -translate-x-1\n -translate-y-1\n border\n border-black;\n }\n \n &-body{\n @apply \n pt-4 \n border-t;\n border-color: lighten($color: $gray-medium, $amount: 21%)\n\n }\n ul{\n @apply\n flex\n flex-col\n gap-2\n }\n\n li{\n @apply\n flex\n gap-3\n text-black\n text-16\n leading-relaxed;\n }\n\n li::before{\n content: url(\"#{$dist}/checkmark.svg\");\n @apply block leading-none;\n transform: translateY(1px);\n }\n}\n\n\n.Rate{\n \n\n &-number{\n @apply\n text-87\n text-green-medium\n relative\n block\n flex\n flex-wrap\n justify-center\n mb-1;\n gap: 6px;\n\n span{\n @apply inline-block align-baseline;\n line-height: remto(72px);\n }\n\n //visual help with centering\n .Rate-unit:first-child{\n @apply -ml-3;\n }\n\n }\n\n sup,sub{\n @apply\n text-green-medium\n text-32\n inline-block\n static \n leading-none; \n }\n\n sub{\n @apply self-end;\n }\n\n sup{\n @apply self-start;\n\n small{\n @apply block text-14 font-bold;\n }\n }\n\n &-label{\n @apply \n text-center\n font-normal\n text-gray-dark\n basis-full\n text-22;\n\n }\n}",".Tag{\n @apply\n rounded-full\n py-sm\n px-3\n font-black\n uppercase\n text-[13px]\n tracking-widest\n flex\n gap-1\n items-center;\n background-color: darken($color: $gray-light, $amount: 4%);\n color: $black;\n // color: lighten($color: $gray-dark, $amount: 15%)\n}",".Tabs{\n &-list{\n @apply \n flex\n gap-4;\n\n /* @screen sm {\n @apply flex-col;\n } */\n }\n\n &-tab{\n @apply\n bg-transparent\n border\n border-gray-dark\n text-gray-dark\n text-16\n font-bold\n tracking-wider;\n\n &:hover{\n @apply\n shadow-none\n translate-x-0\n translate-y-0\n text-black\n border-black;\n }\n\n &.is-active{\n @apply\n border-blue\n bg-blue\n text-white;\n }\n &.is-active::after {\n @apply inline-block\n pt-1;\n content: url($dist + '/arrow-right-white-button.svg');\n }\n }\n}",".Breadcrumbs{\n @apply\n py-2\n border-b\n border-t\n border-gray-line;\n}",".AccountFinder {\n @apply\n w-full;\n\n &-messages{\n @apply\n overflow-auto\n pb-5\n pt-4\n border-t\n border-gray-line;\n height: 330px;\n }\n\n &-list{\n @apply\n flex\n flex-col\n items-start\n justify-start\n gap-2;\n }\n\n .AccountFinder-typing{\n @apply\n block\n w-5;\n padding: 0px 20px;\n\n //faux typing indicator\n &::before{\n content: url(\"#{$dist}/three-dots.svg\");\n @apply\n block\n w-full\n object-fill;\n }\n }\n\n &-message-container {\n @apply\n flex\n flex-row;\n\n .AccountFinder-message-source {\n @apply\n rounded-full\n bg-black\n self-start\n mt-1;\n padding: 8px 6px;\n }\n\n .AccountFinder-message-source-text {\n @apply\n text-16\n font-semibold\n mb-1;\n }\n\n .AccountFinder-message-text {\n @apply\n rounded-sm\n text-white\n bg-blue\n pl-2\n pr-3\n py-1;\n\n //animate the message bubbles in\n transform: scale(0);\n transform-origin: top left;\n animation: bubble 300ms linear 0s 1 normal forwards;\n\n a {\n @apply text-white underline;\n }\n }\n }\n\n .AccountFinder-message-container:nth-child(even){\n @apply\n self-start\n relative;\n\n .AccountFinder-message-source-text-customer {\n display: none;\n }\n\n .AccountFinder-message-text {\n @apply\n bg-blue\n relative\n rounded-tl-none;\n }\n\n //caret\n // &::before{\n // content: '';\n // background-image: inline-svg('
');\n // @apply\n // absolute\n // leading-none\n // -translate-y-full;\n // height: 8px;\n // width: 15px;\n // top: 0;\n // left:-1px;\n // }\n }\n\n .AccountFinder-message-container:nth-child(odd){\n @apply\n self-end;\n\n // hide avatar for user input messages\n img {\n display: none;\n }\n\n .AccountFinder-message-source-text-pathways {\n display: none;\n }\n\n .AccountFinder-message-text {\n @apply\n bg-green\n self-end\n rounded-tr-none;\n transform-origin: top right;\n }\n\n // caret\n // &::before{\n // content: '';\n // background-image: inline-svg('
');\n // @apply\n // absolute\n // leading-none\n // -translate-y-full;\n // height: 8px;\n // width: 15px;\n // top: 0;\n // right:-1px;\n // }\n }\n\n &-answers{\n @apply\n bg-white\n rounded-full\n py-2\n px-2\n gap-1\n flex;\n overflow: overlay;\n\n @screen sm {\n @apply overflow-x-scroll;\n }\n }\n\n &-answer{\n @apply\n text-black\n border\n border-opacity-20\n text-16\n font-normal\n py-2\n px-2;\n background: linear-gradient(0deg, rgba(0, 174, 199, 0.1), rgba(0, 174, 199, 0.1)), #FFFFFF;\n border: 1px solid #00AEC7;\n\n &:hover,\n &:focus{\n box-shadow: 2px 2px 0px $gray-medium !important;\n }\n }\n}\n\n@keyframes bubble {\n from{ opacity: 0; transform:scale(0); }\n to{ opacity: 1; transform:scale(1);}\n}",".Accordion{\n @apply\n flex-1 \n min-h-[16rem] \n space-y-4;\n\n &-item{\n @apply\n rounded \n bg-white\n border\n border-black;\n }\n\n .is-expanded{\n @apply shadow-box-small shadow-black;\n }\n\n &-btn{\n @apply\n rounded-none\n bg-transparent\n flex \n w-full \n items-center \n justify-between \n p-3 \n text-24 \n font-bold\n text-black;\n\n &:focus,\n &:hover{\n @apply\n transform-none\n shadow-none;\n }\n }\n\n &-plus{\n background-image: url(\"#{$dist}/plus.svg\");\n @apply\n block;\n text-indent: -9999px;\n //not using rem because on smaller screens it changes\n @include size(24px);\n }\n}",".Guide{\n @apply\n shadow-box-small\n shadow-gray-line\n rounded-md\n border\n border-gray-medium\n flex\n flex-col\n overflow-hidden\n transition-all;\n aspect-ratio: .598;\n max-width: 360px;\n min-width: 300px;\n\n &-visual{\n @apply\n relative\n flex-1;\n\n h4{\n @apply\n text-white\n absolute\n w-1/2\n text-[28px]\n z-10;\n }\n\n img{\n @apply\n absolute\n z-0\n object-contain\n bottom-0;\n }\n }\n\n &-body{\n @apply\n p-2\n text-center\n text-gray-dark;\n }\n\n &:hover{\n @apply shadow-none;\n transform: translate(8px, 8px);\n }\n \n}",".ProductSlider{\n --gutter: 28px;\n --per-page: 3;\n\n &-list{\n @apply\n grid\n overflow-x-scroll\n py-5\n mt-5;\n cursor: grab;\n // grid-gap: calc(var(--gutter));\n grid-template-columns: 2.5% repeat(var(--total), calc(100% * (5.9 / 16) - var(--gutter) * 2)) 2.5%;\n // grid-template-columns: 2.5% repeat(var(--total), calc(#{100*(4 / 16)}% - var(--gutter) * 2)) 2.5%;\n grid-template-rows: minmax(380px, 1fr);\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n -ms-overflow-style: none;\n scroll-snap-type: x proximity;\n scroll-padding-left: 2.5%;\n\n &::before,\n &::after {\n content: '';\n }\n\n &::-webkit-scrollbar{ @apply hidden; }\n\n &.is-down{\n scroll-snap-type: none;\n\n li{\n transform: scale(1.02);\n }\n\n }\n }\n\n &-item{\n scroll-snap-align: start;\n @apply relative flex;\n padding-right: var(--gutter);\n\n &:not(li:last-child)::after{\n content: '';\n @apply\n absolute;\n top:0;\n bottom:0;\n width:1px;\n right:var(--gutter);\n }\n\n }\n\n &-item:first-child{\n a{\n @apply opacity-100;\n }\n }\n\n @screen lg+{\n --per-page: 3;\n &-list{\n grid-template-columns: 2.5% repeat(var(--total), calc(100% * (6/ 16) - var(--gutter) * 2)) 2.5%;\n }\n }\n\n @screen md{\n --per-page: 2;\n &-list{\n grid-template-columns: 2.5% repeat(var(--total), calc(100% * (8 / 16) - var(--gutter) * 2)) 2.5%;\n }\n }\n @media (max-width: 600px){\n --per-page: 1;\n &-list{\n grid-template-columns: 2.5% repeat(var(--total), calc(100% * (16 / 16) - var(--gutter) * 2)) 2.5%;\n }\n }\n\n @screen sm{\n --per-page: 1;\n &-list{\n grid-template-columns: 2.5% repeat(var(--total), calc(100% * (16 / 16) - var(--gutter) * 2)) 2.5%;\n }\n }\n\n}\n\n.Pages,\n.swiper-pagination{\n @apply\n flex\n justify-center\n gap-1;\n\n &-page,\n .swiper-pagination-bullet{\n @apply\n rounded-full\n bg-gray-line\n w-1\n h-1\n transition-all\n duration-500\n cursor-pointer;\n\n &.is-active,\n &.swiper-pagination-bullet-active{\n @apply w-4 bg-blue cursor-default;\n }\n }\n}","@charset \"UTF-8\";\n/*!\n * Hamburgers\n * @description Tasty CSS-animated hamburgers\n * @author Jonathan Suh @jonsuh\n * @site https://jonsuh.com/hamburgers\n * @link https://github.com/jonsuh/hamburgers\n */\n\n// Settings\n// ==================================================\n$hamburger-padding-x : 15px !default;\n$hamburger-padding-y : 15px !default;\n$hamburger-layer-width : 40px !default;\n$hamburger-layer-height : 4px !default;\n$hamburger-layer-spacing : 6px !default;\n$hamburger-layer-color : #000 !default;\n$hamburger-layer-border-radius : 4px !default;\n$hamburger-hover-opacity : 0.7 !default;\n$hamburger-active-layer-color : $hamburger-layer-color !default;\n$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;\n\n// To use CSS filters as the hover effect instead of opacity,\n// set $hamburger-hover-use-filter as true and\n// change the value of $hamburger-hover-filter accordingly.\n$hamburger-hover-use-filter : false !default;\n$hamburger-hover-filter : opacity(50%) !default;\n$hamburger-active-hover-filter: $hamburger-hover-filter !default;\n\n// Types (Remove or comment out what you don’t need)\n// ==================================================\n$hamburger-types: (\n 3dx,\n 3dx-r,\n 3dy,\n 3dy-r,\n 3dxy,\n 3dxy-r,\n arrow,\n arrow-r,\n arrowalt,\n arrowalt-r,\n arrowturn,\n arrowturn-r,\n boring,\n collapse,\n collapse-r,\n elastic,\n elastic-r,\n emphatic,\n emphatic-r,\n minus,\n slider,\n slider-r,\n spin,\n spin-r,\n spring,\n spring-r,\n stand,\n stand-r,\n squeeze,\n vortex,\n vortex-r\n) !default;\n\n// Base Hamburger (We need this)\n// ==================================================\n@import \"base\";\n\n// Hamburger types\n// ==================================================\n@import \"types/3dx\";\n@import \"types/3dx-r\";\n@import \"types/3dy\";\n@import \"types/3dy-r\";\n@import \"types/3dxy\";\n@import \"types/3dxy-r\";\n@import \"types/arrow\";\n@import \"types/arrow-r\";\n@import \"types/arrowalt\";\n@import \"types/arrowalt-r\";\n@import \"types/arrowturn\";\n@import \"types/arrowturn-r\";\n@import \"types/boring\";\n@import \"types/collapse\";\n@import \"types/collapse-r\";\n@import \"types/elastic\";\n@import \"types/elastic-r\";\n@import \"types/emphatic\";\n@import \"types/emphatic-r\";\n@import \"types/minus\";\n@import \"types/slider\";\n@import \"types/slider-r\";\n@import \"types/spin\";\n@import \"types/spin-r\";\n@import \"types/spring\";\n@import \"types/spring-r\";\n@import \"types/stand\";\n@import \"types/stand-r\";\n@import \"types/squeeze\";\n@import \"types/vortex\";\n@import \"types/vortex-r\";\n\n// ==================================================\n// Cooking up additional types:\n//\n// The Sass for each hamburger type should be nested\n// inside an @if directive to check whether or not\n// it exists in $hamburger-types so only the CSS for\n// included types are generated.\n//\n// e.g. hamburgers/types/_new-type.scss\n//\n// @if index($hamburger-types, new-type) {\n// .hamburger--new-type {\n// ...\n// }\n// }\n","@use \"sass:math\";\n\n// Hamburger\n// ==================================================\n.hamburger {\n padding: $hamburger-padding-y $hamburger-padding-x;\n display: inline-block;\n cursor: pointer;\n\n transition-property: opacity, filter;\n transition-duration: 0.15s;\n transition-timing-function: linear;\n\n // Normalize (