/* Start:/local/templates/direkt2026/components/bitrix/news/works/bitrix/news.detail/.default/style.css?17851762293882*/
.case__detail {
	margin-bottom: 100px;
}
.case-banner {
	position: relative;
	padding: 16px;
	border-radius: 20px;
	overflow: hidden;
	z-index: 3;
	border: 1px solid transparent;
	background: linear-gradient(127.99deg, var(--color-text) 20.47%, var(--color-gradient-end) 78.94%) border-box;
	margin-bottom: 32px;
}
.case-banner:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
	border-radius: 20px;
	pointer-events: none;
	z-index: 0;
	opacity: 1;
	transition: all 0.5s ease;
}
.case-banner__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 423px;
	z-index: 1;
	position: relative;
}
.case-banner img {
	border-radius: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
.case-banner video {
	z-index: -1;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.case-banner:hover video {
	opacity: 1;
}
.case-banner:hover:before {
	opacity: 0;
}
.case-banner__time {
	font-size: 24px;
	font-family: 'GeologicaRegular';
}
.case-banner__title {
	font-size: 24px;
	font-family: 'GeologicaBold';
}
.work__block:hover .work__bg-video {
	opacity: 1;
}
.work__block:hover .work__bg-static {
	transform: scale(1.05);
}
.case-info {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 32px;
}
.case-block {
	overflow: hidden;
	border-radius: var(--border-radius);
	position: relative;
	padding: 30px 36px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 30px;
	border: 1px solid transparent;
	background: linear-gradient(var(--color-second-bg), var(--color-second-bg) 0) padding-box,
				linear-gradient(127.99deg, var(--color-text) 20.47%, var(--color-gradient-end) 78.94%) border-box;
}
.case-block h2 {
	margin: 0;
	font-size: 32px;
	font-family: 'GeologicaMedium';
}
.case-block .case-block_descr {
	font-size: 18px;
	font-family: 'GeologicaRegular';
}
.case-block .case-block_descr p:first-child {
	margin-top: 0;
}
.case-block .case-block_descr p:last-child {
	margin-bottom: 0;
}
.case-props {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 42px;
	margin-top: 38px;
}
.case-prop_img {
	background: linear-gradient(var(--color-second-bg), var(--color-second-bg) 0) padding-box,
				linear-gradient(127.99deg, var(--color-text) 20.47%, var(--color-gradient-end) 78.94%) border-box;
	border: 1px solid transparent;
	border-radius: var(--border-radius);
}
.case-prop_img img {
	border-radius: var(--border-radius);
	height: 100%;
	width: 100%;
}
.case-prop_text {
	margin-top: 25px;
}
.case-prop_text h2 {
	margin: 0;
	font-size: 32px;
	font-family: 'GeologicaMedium';
	margin-bottom: 19px;
}
.case-prop_descr {
	font-size: 18px;
	font-family: 'GeologicaRegular';
}
.case-preview {
	margin-top: 38px;
}
.case-prop_descr ul {
	padding-left: 15px;
}

@media (max-width: 991px) {
	.case-info {
		grid-template-columns: 100%;
	}
	.case-block h2,
	.case-prop_text h2 {
		color: var(--color-link);
		font-size: 23px;
	}
	.case-block .case-block_descr,
	.case-prop_descr {
		font-size: 16px;
	}
	.case-props {
		grid-template-columns: 100%;
		gap: 32px;
	}
	.case-prop_img {
		text-align: center;
	}
	.case-prop_img img {
		max-height: 284px;
	}
}

.case__all {
	border-radius: 18px;
	outline: 1px white solid;
	outline-offset: -1px;
	padding: 54px 27px 31px 27px;
	margin-bottom: 144px;
	margin-top: 32px;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	flex-wrap: wrap;
}
.case__all {
  border-radius: 18px;
  outline: 1px white solid;
  outline-offset: -1px;
  padding: 54px 27px 31px 27px;
  margin-bottom: 144px;
  margin-top: 32px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  flex-wrap: wrap;
}

/* End */


/* Start:/local/templates/direkt2026/components/bitrix/news.list/list_double_swiper/style.css?178465554471863*/
:root {
    --sk-glyph: rgb(0, 0, 0);
    --sk-glyph-gray: rgb(29, 29, 31);
    --sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88);
    --sk-glyph-gray-secondary: rgb(110, 110, 115);
    --sk-glyph-gray-secondary-alpha: rgba(0, 0, 0, 0.56);
    --sk-glyph-gray-secondary-alt: rgb(66, 66, 69);
    --sk-glyph-gray-secondary-alt-alpha: rgba(0, 0, 0, 0.72);
    --sk-glyph-gray-tertiary: rgb(134, 134, 139);
    --sk-glyph-gray-tertiary-alpha: rgba(0, 0, 0, 0.48);
    --sk-glyph-blue: rgb(0, 102, 204);
    --sk-glyph-orange: rgb(182, 68, 0);
    --sk-glyph-green: rgb(0, 128, 9);
    --sk-glyph-red: rgb(227, 0, 0);
    --sk-fill: rgb(255, 255, 255);
    --sk-fill-secondary: rgb(250, 250, 252);
    --sk-fill-tertiary: rgb(245, 245, 247);
    --sk-fill-gray: rgb(29, 29, 31);
    --sk-fill-gray-alpha: rgba(0, 0, 0, 0.88);
    --sk-fill-gray-secondary: rgb(134, 134, 139);
    --sk-fill-gray-secondary-alpha: rgba(0, 0, 0, 0.48);
    --sk-fill-gray-tertiary: rgb(210, 210, 215);
    --sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16);
    --sk-fill-gray-quaternary: rgb(232, 232, 237);
    --sk-fill-gray-quaternary-alpha: rgba(0, 0, 0, 0.08);
    --sk-fill-blue: rgb(0, 113, 227);
    --sk-fill-orange: rgb(245, 99, 0);
    --sk-fill-orange-secondary: rgb(255, 249, 244);
    --sk-fill-green: rgb(3, 161, 14);
    --sk-fill-green-secondary: rgb(245, 255, 246);
    --sk-fill-red: rgb(227, 0, 0);
    --sk-fill-red-secondary: rgb(255, 242, 244);
    --sk-fill-yellow: rgb(255, 224, 69);
    --sk-fill-yellow-secondary: rgb(255, 254, 242);
    --sk-productred: rgb(175, 30, 45);
    --sk-enviro-green: rgb(0, 217, 89);
    --sk-enviro-neutral: rgb(232, 232, 237)
}

.dotnav {
    --sk-dotnav-size: 8px;
    --sk-dotnav-height: calc(var(--sk-dotnav-margin-block) * 2 + var(--sk-dotnav-size));
    --sk-dotnav-width: var(--sk-dotnav-size);
    --sk-dotnav-scale: 1;
    --sk-dotnav-scale-2: 0.75;
    --sk-dotnav-scale-3: 0.5;
    --sk-dotnav-opacity: 1;
    --sk-dotnav-margin-block: 8px;
    --sk-dotnav-margin-inline: 8px;
    --sk-dotnav-scrim-height: 56px;
    --sk-dotnav-items-padding-block: 0px;
    --sk-dotnav-items-padding-inline: 0px;
    --sk-dotnav-variable-duration: 320ms;
    --sk-dotnav-margin-offset-inline-start: 0px;
    --sk-dotnav-margin-offset-inline-end: 0px;
    --sk-dotnav-logical-factor: var(--r-sk-logical-factor, 1);
    --sk-dotnav-fade-in-out-duration: calc(var(--sk-dotnav-variable-duration) / 2 - 20ms);
    --sk-dotnav-fade-in-delay: calc(var(--sk-dotnav-variable-duration) - var(--sk-dotnav-fade-in-out-duration));
    --sk-dotnav-hover-animation-duration: 120ms;
    --sk-dotnav-animation-stagger-duration: 40ms;
    --sk-dotnav-animation-collapse-duration: 380ms;
    --sk-dotnav-background: rgba(0, 0, 0, 0.42);
    --sk-dotnav-background-hover: rgba(0, 0, 0, 0.54);
    --sk-dotnav-background-current: rgba(0, 0, 0, 0.8);
    --sk-dotnav-focus-color: #0071e3;
    --sk-dotnav-scrim-background-color: rgba(210, 210, 215, 0.64);
    --sk-dotnav-scrim-solid-background-color: rgb(232, 232, 237);
    width: -moz-fit-content;
    width: fit-content
}

.dotnav.dotnav-scrim,
.dotnav.dotnav-scrim-solid,
.dotnav.dotnav-scrim-no-blur {
    --sk-dotnav-background: rgba(255, 255, 255, 1);
    --sk-dotnav-background-current: rgb(255, 255, 255);
    --sk-dotnav-background-hover: rgba(255, 255, 255, 0.72);
    --sk-dotnav-focus-color: #0071e3
}

.dotnav .dotnav-stop-transitions .dotnav-link {
    transition: none !important
}

.dotnav .dotnav-stop-transitions .dotnav-link::before {
    transition: none !important
}

.dotnav .dotnav-items {
    margin: 0;
    list-style: none;
    --sk-dotnav-count: 2;
    --sk-dotnav-width: calc(var(--sk-dotnav-size) * var(--sk-dotnav-count) + var(--sk-dotnav-margin-inline) * var(--sk-dotnav-count) * 2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    padding-block: var(--sk-dotnav-items-padding-block);
    padding-inline: var(--sk-dotnav-items-padding-inline);
    height: var(--sk-dotnav-height);
    width: var(--sk-dotnav-width)
}


.dotnav .dotnav-items:focus-visible {
    outline: none
}

.dotnav .dotnav-items.dotnav-links-small {
    --sk-dotnav-count: 2;
    --sk-dotnav-width: calc(var(--sk-dotnav-size) * var(--sk-dotnav-count) + var(--sk-dotnav-margin-inline) * var(--sk-dotnav-count) * 2)
}

/* .dotnav .dotnav-items:has(:nth-child(2)) {
    --sk-dotnav-count: 2
}
.dotnav .dotnav-items:has(:nth-child(3)) {
    --sk-dotnav-count: 3
}
.dotnav .dotnav-items:has(:nth-child(4)) {
    --sk-dotnav-count: 4
}
.dotnav .dotnav-items:has(:nth-child(5)) {
    --sk-dotnav-count: 5
}
.dotnav .dotnav-items:has(:nth-child(6)) {
    --sk-dotnav-count: 6
}
.dotnav .dotnav-items:has(:nth-child(7)) {
    --sk-dotnav-count: 7
}

.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(2)) {
    --sk-dotnav-count: 2
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(3)) {
    --sk-dotnav-count: 3
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(4)) {
    --sk-dotnav-count: 4
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(5)) {
    --sk-dotnav-count: 5
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(2)) {
    --sk-dotnav-count: 2
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(3)) {
    --sk-dotnav-count: 3
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(4)) {
    --sk-dotnav-count: 4
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(5)) {
    --sk-dotnav-count: 5
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(6)) {
    --sk-dotnav-count: 6
}
.dotnav .dotnav-items.dotnav-links-small:has(:nth-child(7)) {
    --sk-dotnav-count: 7
}
.dotnav .dotnav-items.dotnav-links-small.dotnav-links-small:has(:nth-child(2)) {
    --sk-dotnav-count: 2
}
.dotnav .dotnav-items.dotnav-links-small.dotnav-links-small:has(:nth-child(3)) {
    --sk-dotnav-count: 3
}
.dotnav .dotnav-items.dotnav-links-small.dotnav-links-small:has(:nth-child(4)) {
    --sk-dotnav-count: 4
}
.dotnav .dotnav-items.dotnav-links-small.dotnav-links-small:has(:nth-child(5)) {
    --sk-dotnav-count: 5
} */

.dotnav .dotnav-link {
    outline: none;
    box-sizing: content-box;
    display: block;
    position: relative;
    padding-block: var(--sk-dotnav-margin-block);
    padding-inline: var(--sk-dotnav-margin-inline);
    height: var(--sk-dotnav-size);
    width: var(--sk-dotnav-size);
    margin-inline-start: var(--sk-dotnav-margin-offset-inline-start);
    margin-inline-end: var(--sk-dotnav-margin-offset-inline-end);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: height var(--sk-dotnav-hover-animation-duration) linear, width var(--sk-dotnav-hover-animation-duration) linear
}

.dotnav .dotnav-link::before {
    content: "";
    display: block;
    border-radius: 999px;
    position: absolute;
    top: calc(50% - var(--sk-dotnav-size)/2);
    left: calc(50% - var(--sk-dotnav-size)/2);
    scale: var(--sk-dotnav-scale);
    height: var(--sk-dotnav-size);
    width: var(--sk-dotnav-size);
    background: var(--sk-dotnav-background);
    opacity: var(--sk-dotnav-opacity);
    transition: background-color var(--sk-dotnav-hover-animation-duration) linear, transform var(--sk-dotnav-hover-animation-duration) ease-in-out, scale var(--sk-dotnav-hover-animation-duration) ease-in-out
}

.dotnav .dotnav-link:hover::before {
    background: var(--sk-dotnav-background-hover);
    transition: top var(--sk-dotnav-hover-animation-duration) linear, left var(--sk-dotnav-hover-animation-duration) linear, height var(--sk-dotnav-hover-animation-duration) linear, width var(--sk-dotnav-hover-animation-duration) linear, scale var(--sk-dotnav-hover-animation-duration) linear, transform var(--sk-dotnav-hover-animation-duration) linear
}

.dotnav .dotnav-focused.dotnav-item .dotnav-link::before,
.dotnav .dotnav-focused.dotnav-link::before {
    transition: none
}

.dotnav .current.dotnav-item .dotnav-link,
.dotnav .current.dotnav-link {
    cursor: default;
    pointer-events: none
}

.dotnav .current.dotnav-item .dotnav-link::before,
.dotnav .current.dotnav-link::before {
    background: var(--sk-dotnav-background-current)
}

.dotnav .dotnav-items:has(:focus-visible) .dotnav-focused.dotnav-item .dotnav-link::before,
.dotnav .dotnav-items:has(:focus-visible) .dotnav-focused.dotnav-link::before {
    outline: 2px solid var(--sk-dotnav-focus-color);
    outline-offset: var(--sk-focus-offset-container, 3px)
}

.dotnav .dotnav-trunc-2 {
    --sk-dotnav-scale: var(--sk-dotnav-scale-2)
}

.dotnav .dotnav-trunc-2 .dotnav-link:hover::before {
    --sk-dotnav-size: calc((1/var(--sk-dotnav-scale)) * 8px)
}

.dotnav .dotnav-trunc-3 {
    --sk-dotnav-scale: var(--sk-dotnav-scale-3)
}

.dotnav .dotnav-trunc-3 .dotnav-link:hover::before {
    --sk-dotnav-size: calc((1/var(--sk-dotnav-scale)) * 6px)
}

.dotnav .dotnav-transitioning .dotnav-link {
    pointer-events: none
}

.dotnav .dotnav-transitioning .dotnav-link::before {
    transition: transform var(--sk-dotnav-variable-duration) ease-in-out, scale var(--sk-dotnav-variable-duration) ease-in-out;
    pointer-events: none
}

.dotnav .dotnav-trunc-4,
.dotnav .dotnav-trunc-hidden {
    --sk-dotnav-scale: var(--sk-dotnav-scale-3);
    --sk-dotnav-margin-block: 0;
    --sk-dotnav-margin-inline: 0;
    --sk-dotnav-size: 0;
    --sk-dotnav-opacity: 0
}

.dotnav .dotnav-trunc-4:not(.dotnav-transitioning),
.dotnav .dotnav-trunc-hidden:not(.dotnav-transitioning) {
    position: absolute;
    top: 0;
    left: 0
}

.dotnav .dotnav-trunc-4:not(.dotnav-transitioning) .dotnav-link,
.dotnav .dotnav-trunc-hidden:not(.dotnav-transitioning) .dotnav-link {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(0 0 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0
}

.dotnav .dotnav-trunc-4 .dotnav-link,
.dotnav .dotnav-trunc-hidden .dotnav-link {
    transition: width var(--sk-dotnav-variable-duration) ease-in-out, height var(--sk-dotnav-variable-duration) ease-in-out, padding-block var(--sk-dotnav-variable-duration) ease-in-out, padding-inline var(--sk-dotnav-variable-duration) ease-in-out, padding var(--sk-dotnav-variable-duration) ease-in-out
}

.dotnav .dotnav-trunc-4 .dotnav-link::before,
.dotnav .dotnav-trunc-hidden .dotnav-link::before {
    transition: width var(--sk-dotnav-variable-duration) ease-in-out, height var(--sk-dotnav-variable-duration) ease-in-out, left var(--sk-dotnav-variable-duration) ease-in-out, opacity var(--sk-dotnav-variable-duration) ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, scale var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out
}

.dotnav .dotnav-trunc-4.dotnav-dot-stop-transitions .dotnav-link,
.dotnav .dotnav-trunc-hidden.dotnav-dot-stop-transitions .dotnav-link {
    transition: none !important
}

.dotnav .dotnav-trunc-4.dotnav-dot-stop-transitions .dotnav-link::before,
.dotnav .dotnav-trunc-hidden.dotnav-dot-stop-transitions .dotnav-link::before {
    transition: none !important
}

.dotnav .dotnav-becoming-visible-1 .dotnav-link {
    animation: dotnav-become-visible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-fade-in-delay) - var(--sk-dotnav-animation-stagger-duration)*2) both
}

.dotnav .dotnav-becoming-invisible-1 .dotnav-link {
    animation: dotnav-become-invisible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-animation-stagger-duration)*0) both
}

.dotnav .dotnav-becoming-visible-2 .dotnav-link {
    animation: dotnav-become-visible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-fade-in-delay) - var(--sk-dotnav-animation-stagger-duration)*1) both
}

.dotnav .dotnav-becoming-invisible-2 .dotnav-link {
    animation: dotnav-become-invisible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-animation-stagger-duration)*1) both
}

.dotnav .dotnav-becoming-visible-3 .dotnav-link {
    animation: dotnav-become-visible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-fade-in-delay) - var(--sk-dotnav-animation-stagger-duration)*0) both
}

.dotnav .dotnav-becoming-invisible-3 .dotnav-link {
    animation: dotnav-become-invisible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-animation-stagger-duration)*2) both
}

@keyframes dotnav-shift-start-1 {
    0% {
        translate: calc(8px*var(--sk-dotnav-logical-factor))
    }
    100% {
        translate: 0px
    }
}

@keyframes dotnav-shift-end-1 {
    0% {
        translate: calc(-8px*var(--sk-dotnav-logical-factor))
    }
    100% {
        translate: 0px
    }
}

@keyframes dotnav-shift-start-2 {
    0% {
        translate: calc(16px*var(--sk-dotnav-logical-factor))
    }
    100% {
        translate: 0px
    }
}

@keyframes dotnav-shift-end-2 {
    0% {
        translate: calc(-16px*var(--sk-dotnav-logical-factor))
    }
    100% {
        translate: 0px
    }
}

@keyframes dotnav-shift-start-3 {
    0% {
        translate: calc(24px*var(--sk-dotnav-logical-factor))
    }
    100% {
        translate: 0px
    }
}

@keyframes dotnav-shift-end-3 {
    0% {
        translate: calc(-24px*var(--sk-dotnav-logical-factor))
    }
    100% {
        translate: 0px
    }
}

@keyframes dotnav-shift-start-expand {
    0% {
        translate: calc(-24px*var(--sk-dotnav-logical-factor))
    }
    19% {
        translate: calc(-24px*var(--sk-dotnav-logical-factor))
    }
    100% {
        translate: 0
    }
}

@keyframes dotnav-shift-end-expand {
    0% {
        translate: calc(20px*var(--sk-dotnav-logical-factor))
    }
    19% {
        translate: calc(20px*var(--sk-dotnav-logical-factor))
    }
    100% {
        translate: 0
    }
}

@keyframes dotnav-become-visible {
    0% {
        opacity: 0;
        scale: 0
    }
    100% {
        opacity: 1;
        scale: 1
    }
}

@keyframes dotnav-become-invisible {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.dotnav .dotnav-shift-start-1 .dotnav-link::before {
    animation: dotnav-shift-start-1 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav .dotnav-shift-start-2 .dotnav-link::before {
    animation: dotnav-shift-start-2 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav .dotnav-shift-start-3 .dotnav-link::before {
    animation: dotnav-shift-start-3 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav .dotnav-shift-end-1 .dotnav-link::before {
    animation: dotnav-shift-end-1 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav .dotnav-shift-end-2 .dotnav-link::before {
    animation: dotnav-shift-end-2 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav .dotnav-shift-end-3 .dotnav-link::before {
    animation: dotnav-shift-end-3 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav .dotnav-collapse {
    transition: width var(--sk-dotnav-variable-duration) ease-in-out 60ms
}

.dotnav .dotnav-collapse .dotnav-dot-4 .dotnav-link::before,
.dotnav .dotnav-collapse .dotnav-dot-5 .dotnav-link::before {
    transition: transform 320ms ease-in-out 60ms
}

.dotnav .dotnav-collapse .dotnav-dot-6 .dotnav-link::before {
    transition: opacity 160ms ease-in-out 80ms, transform 160ms ease-in-out 80ms
}

.dotnav .dotnav-collapse .dotnav-dot-7 .dotnav-link::before {
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out
}

.dotnav .dotnav-expand {
    transition: width var(--sk-dotnav-variable-duration) ease-in-out
}

.dotnav .dotnav-expand.dotnav-expand-left .dotnav-link::before {
    animation: dotnav-shift-start-expand var(--sk-dotnav-variable-duration) both
}

.dotnav .dotnav-expand.dotnav-expand-right .dotnav-link::before {
    animation: dotnav-shift-end-expand var(--sk-dotnav-variable-duration) both
}

.dotnav .dotnav-expand .dotnav-dot-6 .dotnav-link::before {
    transition: opacity 160ms ease-in-out 120ms, padding-block 0ms ease-in-out 120ms, padding-inline 0ms ease-in-out 120ms, transform 120ms ease-in-out 160ms
}

.dotnav .dotnav-expand .dotnav-dot-7 .dotnav-link::before {
    transition: opacity 160ms ease-in-out 200ms, transform 160ms ease-in-out 200ms
}

.dotnav.dotnav-scrim {
    --sk-dotnav-items-padding-inline: calc((var(--sk-dotnav-scrim-height) - var(--sk-dotnav-size) - (var(--sk-dotnav-margin-inline) * 2)) / 2);
    --sk-dotnav-height: var(--sk-dotnav-scrim-height);
    --sk-dotnav-scrim-backdrop-filter: saturate(180%) blur(20px)
}

.dotnav.dotnav-scrim .dotnav-items {
    border-radius: 999px;
    background: var(--sk-dotnav-scrim-background-color);
    backdrop-filter: var(--sk-dotnav-scrim-backdrop-filter)
}

.dotnav.dotnav-scrim-solid {
    --sk-dotnav-items-padding-inline: calc((var(--sk-dotnav-scrim-height) - var(--sk-dotnav-size) - (var(--sk-dotnav-margin-inline) * 2)) / 2);
    --sk-dotnav-height: var(--sk-dotnav-scrim-height);
    --sk-dotnav-scrim-backdrop-filter: none
}

.dotnav.dotnav-scrim-solid .dotnav-items {
    border-radius: 999px;
    background: var(--sk-dotnav-scrim-background-color);
    backdrop-filter: var(--sk-dotnav-scrim-backdrop-filter)
}

.dotnav.dotnav-scrim-solid .dotnav-items {
    background: var(--sk-dotnav-scrim-solid-background-color)
}

.dotnav.dotnav-scrim-no-blur {
    --sk-dotnav-items-padding-inline: calc((var(--sk-dotnav-scrim-height) - var(--sk-dotnav-size) - (var(--sk-dotnav-margin-inline) * 2)) / 2);
    --sk-dotnav-height: var(--sk-dotnav-scrim-height);
    --sk-dotnav-scrim-backdrop-filter: none
}

.dotnav.dotnav-scrim-no-blur .dotnav-items {
    border-radius: 999px;
    background: var(--sk-dotnav-scrim-background-color);
    backdrop-filter: var(--sk-dotnav-scrim-backdrop-filter)
}

.dotnav-timed {
    --sk-dotnav-timed-track-width: 32px;
    --sk-dotnav-timed-duration: 3000ms;
    --sk-dotnav-iconcontrol-margin: 4px;
    --sk-dotnav-iconcontrol-icon-size: 36px;
    --sk-dotnav-iconcontrol-border-radius: 0px;
    --sk-dotnav-timed-track-color: rgb(0, 0, 0);
    --sk-dotnav-timed-track-background-color: rgba(0, 0, 0, 0.42);
    --sk-dotnav-scrim-timed-track-color: rgb(132, 59, 245);
    --sk-dotnav-scrim-timed-track-background-color: rgba(255, 255, 255, 1);
    --sk-dotnav-iconcontrol-content-color: rgba(0, 0, 0, 0.42);
    --sk-dotnav-iconcontrol-content-color-hover: rgba(0, 0, 0, 0.54);
    --sk-dotnav-scrim-iconcontrol-scrim-color: rgba(210, 210, 215, 0.64);
    --sk-dotnav-scrim-iconcontrol-scrim-color-hover: rgba(222.9661016949, 222.9661016949, 226.5254237288, 0.6976);
    --sk-dotnav-scrim-iconcontrol-scrim-color-active: rgba(192.9186602871, 192.9186602871, 197.5119617225, 0.6544);
    --sk-dotnav-scrim-iconcontrol-content-color: rgba(0, 0, 0, 0.48);
    --sk-dotnav-scrim-iconcontrol-content-color-hover: rgba(0, 0, 0, 0.72);
    --sk-dotnav-scrim-solid-iconcontrol-scrim-color: rgb(232, 232, 237);
    --sk-dotnav-scrim-solid-iconcontrol-scrim-color-hover: rgb(235.68, 235.68, 239.88);
    --sk-dotnav-scrim-solid-iconcontrol-scrim-color-active: rgb(222.72, 222.72, 227.52);
    --sk-dotnav-scrim-solid-iconcontrol-content-color: rgba(0, 0, 0, 0.48);
    --sk-dotnav-scrim-solid-iconcontrol-content-color-hover: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    flex-direction: row-reverse
}

@keyframes dotnav-timed-animation {
    0% {
        width: var(--sk-dotnav-size)
    }
    100% {
        width: calc(100% - var(--sk-dotnav-margin-inline)*2)
    }
}

@keyframes dotnav-timed-dot-expand {
    0% {
        left: calc(50% - var(--sk-dotnav-size)/2);
        width: 8px
    }
    100% {
        left: calc(50% - 16px);
        width: 32px
    }
}

@keyframes dotnav-timed-dot-shrink {
    0% {
        left: calc(50% - 16px);
        width: 32px
    }
    100% {
        left: calc(50% - var(--sk-dotnav-size)/2);
        width: 8px
    }
}

.dotnav-timed .dotnav-items {
    width: calc(var(--sk-dotnav-width) + var(--sk-dotnav-timed-track-width) - var(--sk-dotnav-size))
}

.dotnav-timed .dotnav-link {
    transition: width 250ms linear
}

.dotnav-timed .dotnav-link::after {
    content: "";
    position: absolute;
    display: block;
    inset-block: var(--sk-dotnav-margin-block);
    left: var(--sk-dotnav-margin-inline);
    width: var(--sk-dotnav-size);
    border-radius: 999px;
    opacity: 0;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-fill-mode: forwards;
    animation-duration: var(--sk-dotnav-timed-duration);
    animation-timing-function: linear
}

.dotnav-timed .dotnav-focused.dotnav-item .dotnav-link,
.dotnav-timed .dotnav-focused.dotnav-link {
    width: var(--sk-dotnav-timed-track-width)
}

.dotnav-timed .dotnav-focused.dotnav-item .dotnav-link::before,
.dotnav-timed .dotnav-focused.dotnav-link::before {
    left: calc(50% - 16px);
    width: calc(100% - var(--sk-dotnav-margin-inline)*2);
    background: var(--sk-dotnav-timed-track-background-color);
    animation: dotnav-timed-dot-expand 250ms ease-in
}

.dotnav-timed .current:not(.dotnav-focused).dotnav-item .dotnav-link::before,
.dotnav-timed .current:not(.dotnav-focused).dotnav-link::before {
    background: var(--sk-dotnav-background-current)
}

.dotnav-timed .current.dotnav-focused.dotnav-item .dotnav-link,
.dotnav-timed .current.dotnav-focused.dotnav-link {
    width: var(--sk-dotnav-timed-track-width);
    pointer-events: none
}

.dotnav-timed .current.dotnav-focused.dotnav-item .dotnav-link::before,
.dotnav-timed .current.dotnav-focused.dotnav-link::before {
    left: calc(50% - 16px);
    width: calc(100% - var(--sk-dotnav-margin-inline)*2);
    background: var(--sk-dotnav-timed-track-background-color);
    animation: dotnav-timed-dot-expand 250ms ease-in
}

.dotnav-timed .current.dotnav-focused.dotnav-item .dotnav-link::after,
.dotnav-timed .current.dotnav-focused.dotnav-link::after {
    background: var(--sk-dotnav-background-current);
    animation-name: dotnav-timed-animation;
    animation-play-state: running;
    animation-delay: calc(var(--sk-dotnav-variable-duration) - 160ms);
    opacity: 1;
    transition: opacity 80ms ease-in calc(var(--sk-dotnav-variable-duration) - 80ms)
}

.dotnav-timed .dotnav-previous-current.dotnav-item .dotnav-link::before,
.dotnav-timed .dotnav-previous-current.dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out;
    transition: scale calc(var(--sk-dotnav-variable-duration) - 200ms) ease-in-out 200ms
}

.dotnav-timed .dotnav-previous-current.dotnav-item .dotnav-link:hover::before,
.dotnav-timed .dotnav-previous-current.dotnav-link:hover::before {
    transition: top var(--sk-dotnav-hover-animation-duration) linear, left var(--sk-dotnav-hover-animation-duration) linear, height var(--sk-dotnav-hover-animation-duration) linear, width var(--sk-dotnav-hover-animation-duration) linear, scale var(--sk-dotnav-hover-animation-duration) linear, transform var(--sk-dotnav-hover-animation-duration) linear
}

.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-start-1 .dotnav-link::before {
    animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-start-1 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-start-2 .dotnav-link::before {
    animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-start-2 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-start-3 .dotnav-link::before {
    animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-start-3 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-end-1 .dotnav-link::before {
    animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-end-1 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-end-2 .dotnav-link::before {
    animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-end-2 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-end-3 .dotnav-link::before {
    animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-end-3 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-start-1 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-1 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-start-2 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-2 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-start-3 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-3 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-end-1 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-1 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-end-2 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-2 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-end-3 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-3 var(--sk-dotnav-variable-duration) ease-in-out both
}

.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-start-1 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-1 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both;
    transition: left 250ms linear, width var(--sk-dotnav-variable-duration) linear, height var(--sk-dotnav-variable-duration) ease-in-out, opacity 140ms ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out, scale 0ms 140ms
}

.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-start-2 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-2 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both;
    transition: left 250ms linear, width var(--sk-dotnav-variable-duration) linear, height var(--sk-dotnav-variable-duration) ease-in-out, opacity 140ms ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out, scale 0ms 140ms
}

.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-start-3 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-3 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both;
    transition: left 250ms linear, width var(--sk-dotnav-variable-duration) linear, height var(--sk-dotnav-variable-duration) ease-in-out, opacity 140ms ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out, scale 0ms 140ms
}

.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-end-1 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-1 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both;
    transition: left 250ms linear, width var(--sk-dotnav-variable-duration) linear, height var(--sk-dotnav-variable-duration) ease-in-out, opacity 140ms ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out, scale 0ms 140ms
}

.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-end-2 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-2 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both;
    transition: left 250ms linear, width var(--sk-dotnav-variable-duration) linear, height var(--sk-dotnav-variable-duration) ease-in-out, opacity 140ms ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out, scale 0ms 140ms
}

.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-end-3 .dotnav-link::before {
    animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-3 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both;
    transition: left 250ms linear, width var(--sk-dotnav-variable-duration) linear, height var(--sk-dotnav-variable-duration) ease-in-out, opacity 140ms ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out, scale 0ms 140ms
}

.dotnav-timed.dotnav-timed-paused .current.dotnav-item .dotnav-link::after,
.dotnav-timed.dotnav-timed-paused .current.dotnav-link::after {
    animation-play-state: paused
}

.dotnav-timed.dotnav-stop-transitions .dotnav-items .dotnav-link {
    transition: none
}

.dotnav-timed.dotnav-stop-transitions .dotnav-items .dotnav-link::before {
    transition: background-color var(--sk-dotnav-hover-animation-duration) linear
}

.dotnav-timed.dotnav-stop-transitions .dotnav-items .dotnav-focused .dotnav-link::before {
    animation-duration: 0ms;
    width: var(--sk-dotnav-timed-track-width)
}

.dotnav-timed .dotnav-iconcontrol {
    margin-inline-start: var(--sk-dotnav-iconcontrol-margin);
    margin-block: 0;
    padding: 0;
    border-radius: var(--sk-dotnav-iconcontrol-border-radius);
    color: var(--sk-dotnav-iconcontrol-content-color);
    transition: color var(--sk-dotnav-hover-animation-duration) linear;
    background: rgba(0, 0, 0, 0)
}

.dotnav-timed .dotnav-iconcontrol path {
    fill: currentColor
}

.dotnav-timed .dotnav-iconcontrol:hover {
    color: var(--sk-dotnav-iconcontrol-content-color-hover)
}

.dotnav-timed .dotnav-iconcontrol:focus-visible {
    outline: 2px solid var(--sk-dotnav-focus-color);
    outline-offset: -6px
}

.dotnav-timed .dotnav-iconcontrol-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--sk-dotnav-iconcontrol-icon-size);
    width: var(--sk-dotnav-iconcontrol-icon-size)
}

.dotnav-timed .dotnav-iconcontrol-icon svg {
    height: 100%;
    fill: currentColor;
    transform: translate(0, 0)
}

.dotnav-timed .dotnav-iconcontrol-play,
.dotnav-timed .dotnav-iconcontrol-replay {
    display: none
}

.dotnav-timed.dotnav-timed-paused:not(.dotnav-timed-end) .dotnav-iconcontrol-play {
    display: block
}

.dotnav-timed.dotnav-timed-paused:not(.dotnav-timed-end) .dotnav-iconcontrol-pause {
    display: none
}

.dotnav-timed.dotnav-timed-end .dotnav-iconcontrol-replay {
    display: block
}

.dotnav-timed.dotnav-timed-end .dotnav-iconcontrol-pause {
    display: none
}

.dotnav-timed.dotnav-scrim {
    --sk-dotnav-iconcontrol-margin: 16px;
    --sk-dotnav-iconcontrol-icon-size: 56px;
    --sk-dotnav-iconcontrol-border-radius: 999px
}

.dotnav-timed.dotnav-scrim .dotnav-focused.dotnav-item .dotnav-link::before,
.dotnav-timed.dotnav-scrim .dotnav-focused.dotnav-link::before,
.dotnav-timed.dotnav-scrim .current.dotnav-item .dotnav-link::before,
.dotnav-timed.dotnav-scrim .current.dotnav-link::before {
    --sk-dotnav-timed-track-background-color: var(--sk-dotnav-scrim-timed-track-background-color)
}

.dotnav-timed.dotnav-scrim .dotnav-focused.dotnav-item .dotnav-link::after,
.dotnav-timed.dotnav-scrim .dotnav-focused.dotnav-link::after,
.dotnav-timed.dotnav-scrim .current.dotnav-item .dotnav-link::after,
.dotnav-timed.dotnav-scrim .current.dotnav-link::after {
    --sk-dotnav-background-current: var(--sk-dotnav-scrim-timed-track-color)
}

.dotnav-timed.dotnav-scrim .dotnav-iconcontrol {
    transition: background-color 100ms linear;
    backdrop-filter: var(--sk-dotnav-scrim-backdrop-filter);
    color: var(--sk-dotnav-scrim-iconcontrol-content-color);
    background: var(--sk-dotnav-scrim-iconcontrol-scrim-color)
}

.dotnav-timed.dotnav-scrim .dotnav-iconcontrol:hover {
    color: var(--sk-dotnav-scrim-iconcontrol-content-color-hover);
    background: var(--sk-dotnav-scrim-iconcontrol-scrim-color-hover)
}

.dotnav-timed.dotnav-scrim .dotnav-iconcontrol:active {
    background: var(--sk-dotnav-scrim-iconcontrol-scrim-color-active)
}

.dotnav-timed.dotnav-scrim .dotnav-iconcontrol:focus-visible {
    outline: 2px solid var(--sk-dotnav-focus-color);
    outline-offset: var(--sk-focus-offset-container, 3px)
}

.dotnav-timed.dotnav-scrim-solid {
    --sk-dotnav-iconcontrol-margin: 16px;
    --sk-dotnav-iconcontrol-icon-size: 56px;
    --sk-dotnav-iconcontrol-border-radius: 999px
}

.dotnav-timed.dotnav-scrim-solid .dotnav-focused.dotnav-item .dotnav-link::before,
.dotnav-timed.dotnav-scrim-solid .dotnav-focused.dotnav-link::before,
.dotnav-timed.dotnav-scrim-solid .current.dotnav-item .dotnav-link::before,
.dotnav-timed.dotnav-scrim-solid .current.dotnav-link::before {
    --sk-dotnav-timed-track-background-color: var(--sk-dotnav-scrim-timed-track-background-color)
}

.dotnav-timed.dotnav-scrim-solid .dotnav-focused.dotnav-item .dotnav-link::after,
.dotnav-timed.dotnav-scrim-solid .dotnav-focused.dotnav-link::after,
.dotnav-timed.dotnav-scrim-solid .current.dotnav-item .dotnav-link::after,
.dotnav-timed.dotnav-scrim-solid .current.dotnav-link::after {
    --sk-dotnav-background-current: var(--sk-dotnav-scrim-timed-track-color)
}

.dotnav-timed.dotnav-scrim-solid .dotnav-iconcontrol {
    transition: background-color 100ms linear;
    backdrop-filter: var(--sk-dotnav-scrim-backdrop-filter);
    color: var(--sk-dotnav-scrim-solid-iconcontrol-content-color);
    background: var(--sk-dotnav-scrim-solid-iconcontrol-scrim-color);
	border: 0px;
}

.dotnav-timed.dotnav-scrim-solid .dotnav-iconcontrol:hover {
    color: var(--sk-dotnav-scrim-solid-iconcontrol-content-color-hover);
    background: var(--sk-dotnav-scrim-solid-iconcontrol-scrim-color-hover)
}

.dotnav-timed.dotnav-scrim-solid .dotnav-iconcontrol:active {
    background: var(--sk-dotnav-scrim-solid-iconcontrol-scrim-color-active)
}

.dotnav-timed.dotnav-scrim-solid .dotnav-iconcontrol:focus-visible {
    outline: 2px solid var(--sk-dotnav-focus-color);
    outline-offset: var(--sk-focus-offset-container, 3px)
}

.dotnav-timed.dotnav-scrim-no-blur {
    --sk-dotnav-iconcontrol-margin: 16px;
    --sk-dotnav-iconcontrol-icon-size: 56px;
    --sk-dotnav-iconcontrol-border-radius: 999px
}

.dotnav-timed.dotnav-scrim-no-blur .dotnav-focused.dotnav-item .dotnav-link::before,
.dotnav-timed.dotnav-scrim-no-blur .dotnav-focused.dotnav-link::before,
.dotnav-timed.dotnav-scrim-no-blur .current.dotnav-item .dotnav-link::before,
.dotnav-timed.dotnav-scrim-no-blur .current.dotnav-link::before {
    --sk-dotnav-timed-track-background-color: var(--sk-dotnav-scrim-timed-track-background-color)
}

.dotnav-timed.dotnav-scrim-no-blur .dotnav-focused.dotnav-item .dotnav-link::after,
.dotnav-timed.dotnav-scrim-no-blur .dotnav-focused.dotnav-link::after,
.dotnav-timed.dotnav-scrim-no-blur .current.dotnav-item .dotnav-link::after,
.dotnav-timed.dotnav-scrim-no-blur .current.dotnav-link::after {
    --sk-dotnav-background-current: var(--sk-dotnav-scrim-timed-track-color)
}

.dotnav-timed.dotnav-scrim-no-blur .dotnav-iconcontrol {
    transition: background-color 100ms linear;
    backdrop-filter: var(--sk-dotnav-scrim-backdrop-filter);
    color: var(--sk-dotnav-scrim-iconcontrol-content-color);
    background: var(--sk-dotnav-scrim-iconcontrol-scrim-color)
}

.dotnav-timed.dotnav-scrim-no-blur .dotnav-iconcontrol:hover {
    color: var(--sk-dotnav-scrim-iconcontrol-content-color-hover);
    background: var(--sk-dotnav-scrim-iconcontrol-scrim-color-hover)
}

.dotnav-timed.dotnav-scrim-no-blur .dotnav-iconcontrol:active {
    background: var(--sk-dotnav-scrim-iconcontrol-scrim-color-active)
}

.dotnav-timed.dotnav-scrim-no-blur .dotnav-iconcontrol:focus-visible {
    outline: 2px solid var(--sk-dotnav-focus-color);
    outline-offset: var(--sk-focus-offset-container, 3px)
}

.theme-dark {
    --sk-glyph: rgb(255, 255, 255);
    --sk-glyph-gray: rgb(245, 245, 247);
    --sk-glyph-gray-alpha: rgba(255, 255, 255, 0.92);
    --sk-glyph-gray-secondary: rgb(134, 134, 139);
    --sk-glyph-gray-secondary-alpha: rgba(255, 255, 255, 0.56);
    --sk-glyph-gray-secondary-alt: rgb(210, 210, 215);
    --sk-glyph-gray-secondary-alt-alpha: rgba(255, 255, 255, 0.8);
    --sk-glyph-gray-tertiary: rgb(110, 110, 115);
    --sk-glyph-gray-tertiary-alpha: rgba(255, 255, 255, 0.4);
    --sk-glyph-blue: rgb(41, 151, 255);
    --sk-glyph-orange: rgb(255, 121, 27);
    --sk-glyph-green: rgb(3, 161, 14);
    --sk-glyph-red: rgb(255, 48, 55);
    --sk-fill: rgb(0, 0, 0);
    --sk-fill-secondary: rgb(22, 22, 23);
    --sk-fill-tertiary: rgb(29, 29, 31);
    --sk-fill-gray: rgb(245, 245, 247);
    --sk-fill-gray-alpha: rgba(255, 255, 255, 0.92);
    --sk-fill-gray-secondary: rgb(110, 110, 115);
    --sk-fill-gray-secondary-alpha: rgba(255, 255, 255, 0.4);
    --sk-fill-gray-tertiary: rgb(66, 66, 69);
    --sk-fill-gray-tertiary-alpha: rgba(255, 255, 255, 0.24);
    --sk-fill-gray-quaternary: rgb(51, 51, 54);
    --sk-fill-gray-quaternary-alpha: rgba(255, 255, 255, 0.2);
    --sk-fill-orange-secondary: rgb(41, 13, 0);
    --sk-fill-green-secondary: rgb(0, 43, 3);
    --sk-fill-red: rgb(255, 48, 55);
    --sk-fill-red-secondary: rgb(51, 0, 0);
    --sk-fill-yellow: rgb(173, 130, 0);
    --sk-fill-yellow-secondary: rgb(43, 32, 0);
    --sk-enviro-neutral: rgb(0, 0, 0);
    --sk-body-background-color: rgb(0, 0, 0);
    --sk-body-text-color: rgb(245, 245, 247);
    --sk-headline-text-color: rgb(245, 245, 247);
    --sk-body-link-color: rgb(41, 151, 255);
    --sk-link-disabled-opacity: 0.36;
    --sk-focus-color-alt: rgb(255, 255, 255)
}

.theme-dark .badge {
    --sk-badge-background: rgba(245, 99, 0, 0.2);
    --sk-badge-text-color: rgb(255, 121, 27)
}

.theme-dark .badge-no-scrim {
    --sk-badge-background: transparent;
    --sk-badge-text-color: rgb(255, 121, 27)
}

.theme-dark .badge-solid-scrim {
    --sk-badge-background: rgb(71, 30, 0);
    --sk-badge-text-color: rgb(255, 121, 27)
}

.theme-dark .badge-neutral {
    --sk-badge-background: rgba(245, 245, 247, 0.14);
    --sk-badge-text-color: rgb(210, 210, 215)
}

.theme-dark .badge-neutral.badge-no-scrim {
    --sk-badge-background: transparent;
    --sk-badge-text-color: rgb(210, 210, 215)
}

.theme-dark .badge-neutral.badge-solid-scrim {
    --sk-badge-background: rgb(51, 51, 54);
    --sk-badge-text-color: rgb(210, 210, 215)
}

.theme-dark a.block {
    --sk-blocklink-color: rgb(41, 151, 255)
}

.theme-dark .button {
    --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.36);
    --sk-button-background: rgb(0, 113, 227);
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB
}

.theme-dark .button-neutral {
    --sk-button-background: rgb(245, 245, 247);
    --sk-button-background-hover: rgb(255, 255, 255);
    --sk-button-background-active: #EDEDF2;
    --sk-button-color: rgb(0, 0, 0)
}

.theme-dark .button-secondary {
    --sk-button-background: transparent;
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB;
    --sk-button-color: rgb(41, 151, 255);
    --sk-button-color-hover: rgb(255, 255, 255);
    --sk-button-border-color: rgb(41, 151, 255)
}

.theme-dark .button-secondary-neutral {
    --sk-button-background: transparent;
    --sk-button-background-hover: rgb(255, 255, 255);
    --sk-button-background-active: #EDEDF2;
    --sk-button-color: rgb(245, 245, 247);
    --sk-button-color-hover: rgb(0, 0, 0);
    --sk-button-border-color: rgb(245, 245, 247)
}

.theme-dark .colorindicator {
    --sk-colorindicator-background-color: rgb(29, 29, 31);
    --sk-colorindicator-swatch-border-color: conic-gradient(from 90deg, rgba(255, 255, 255, 0.08) 0deg, rgba(255, 255, 255, 0.48) 64.8deg, rgba(255, 255, 255, 0.48) 115.2deg, rgba(255, 255, 255, 0.08) 180deg, rgba(255, 255, 255, 0) 208.8deg, rgba(255, 255, 255, 0) 331.2deg, rgba(255, 255, 255, 0.08) 360deg);
    --sk-colorindicator-label-color: rgb(134, 134, 139)
}

.theme-dark .dotnav {
    --sk-dotnav-background: rgba(255, 255, 255, 0.36);
    --sk-dotnav-background-hover: rgba(255, 255, 255, 0.48);
    --sk-dotnav-background-current: rgba(255, 255, 255, 0.8);
    --sk-dotnav-focus-color: #0071e3;
    --sk-dotnav-scrim-background-color: rgba(66, 66, 69, 0.72);
    --sk-dotnav-scrim-solid-background-color: rgb(51, 51, 54);
    --sk-dotnav-timed-track-color: rgba(255, 255, 255, 0.8);
    --sk-dotnav-timed-track-background-color: rgba(255, 255, 255, 0.36);
    --sk-dotnav-scrim-timed-track-color: rgb(255, 255, 255);
    --sk-dotnav-scrim-timed-track-background-color: rgba(255, 255, 255, 0.4);
    --sk-dotnav-iconcontrol-content-color: rgba(255, 255, 255, 0.36);
    --sk-dotnav-iconcontrol-content-color-hover: rgba(255, 255, 255, 0.48);
    --sk-dotnav-scrim-iconcontrol-scrim-color: rgba(66, 66, 69, 0.72);
    --sk-dotnav-scrim-iconcontrol-scrim-color-hover: rgba(72.6170678337, 72.6170678337, 75.5120350109, 0.7256);
    --sk-dotnav-scrim-iconcontrol-scrim-color-active: rgba(57.1631799163, 57.1631799163, 59.7615062762, 0.7424);
    --sk-dotnav-scrim-iconcontrol-content-color: rgba(255, 255, 255, 0.4);
    --sk-dotnav-scrim-iconcontrol-content-color-hover: rgba(255, 255, 255, 0.64);
    --sk-dotnav-scrim-solid-iconcontrol-scrim-color: rgb(51, 51, 54);
    --sk-dotnav-scrim-solid-iconcontrol-scrim-color-hover: rgb(55.08, 55.08, 58.02);
    --sk-dotnav-scrim-solid-iconcontrol-scrim-color-active: rgb(46.92, 46.92, 49.68);
    --sk-dotnav-scrim-solid-iconcontrol-content-color: rgba(255, 255, 255, 0.4);
    --sk-dotnav-scrim-solid-iconcontrol-content-color-hover: rgba(255, 255, 255, 0.64)
}

.theme-dark .dotnav.dotnav-scrim,
.theme-dark .dotnav.dotnav-scrim-solid,
.theme-dark .dotnav.dotnav-scrim-no-blur {
    --sk-dotnav-background: rgba(255, 255, 255, 0.4);
    --sk-dotnav-background-current: rgb(255, 255, 255);
    --sk-dotnav-background-hover: rgba(255, 255, 255, 0.64);
    --sk-dotnav-focus-color: rgb(255, 255, 255)
}

.theme-dark .iconcontrol {
    --sk-iconcontrol-scrim-color: rgb(51, 51, 54);
    --sk-iconcontrol-content-color: rgba(255, 255, 255, 0.8);
    --sk-iconcontrol-scrim-color-hover: rgb(55.08, 55.08, 58.02);
    --sk-iconcontrol-content-color-hover: rgb(255, 255, 255);
    --sk-iconcontrol-scrim-color-active: rgb(46.92, 46.92, 49.68);
    --sk-iconcontrol-content-color-active: rgb(255, 255, 255);
    --sk-iconcontrol-border-color: transparent;
    --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36)
}

.theme-dark .iconcontrol-primary {
    --sk-iconcontrol-scrim-color: rgb(245, 245, 247);
    --sk-iconcontrol-content-color: rgb(0, 0, 0);
    --sk-iconcontrol-scrim-color-hover: rgb(255, 255, 255);
    --sk-iconcontrol-content-color-hover: rgb(0, 0, 0);
    --sk-iconcontrol-scrim-color-active: #EDEDF2;
    --sk-iconcontrol-content-color-active: rgb(0, 0, 0);
    --sk-iconcontrol-border-color: transparent;
    --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36)
}

.theme-dark .iconcontrol-secondary {
    --sk-iconcontrol-scrim-color: transparent;
    --sk-iconcontrol-content-color: rgb(245, 245, 247);
    --sk-iconcontrol-scrim-color-hover: rgb(255, 255, 255);
    --sk-iconcontrol-content-color-hover: rgb(0, 0, 0);
    --sk-iconcontrol-scrim-color-active: #EDEDF2;
    --sk-iconcontrol-content-color-active: rgb(0, 0, 0);
    --sk-iconcontrol-border-color: rgb(245, 245, 247);
    --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36)
}

.theme-dark .iconcontrol-tertiary {
    --sk-iconcontrol-scrim-color: rgb(51, 51, 54);
    --sk-iconcontrol-content-color: rgba(255, 255, 255, 0.8);
    --sk-iconcontrol-scrim-color-hover: rgb(55.08, 55.08, 58.02);
    --sk-iconcontrol-content-color-hover: rgb(255, 255, 255);
    --sk-iconcontrol-scrim-color-active: rgb(46.92, 46.92, 49.68);
    --sk-iconcontrol-content-color-active: rgb(255, 255, 255);
    --sk-iconcontrol-border-color: transparent;
    --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36)
}

.theme-dark .iconcontrol-tertiary-alpha {
    --sk-iconcontrol-scrim-color: rgba(66, 66, 69, 0.72);
    --sk-iconcontrol-content-color: rgba(255, 255, 255, 0.8);
    --sk-iconcontrol-scrim-color-hover: rgba(72.6170678337, 72.6170678337, 75.5120350109, 0.7256);
    --sk-iconcontrol-content-color-hover: rgb(255, 255, 255);
    --sk-iconcontrol-scrim-color-active: rgba(57.1631799163, 57.1631799163, 59.7615062762, 0.7424);
    --sk-iconcontrol-content-color-active: rgb(255, 255, 255);
    --sk-iconcontrol-border-color: transparent;
    --sk-iconcontrol-disabled-opacity: var(--sk-link-disabled-opacity, 0.36)
}

.theme-dark .list,
.theme-dark .list-title {
    --sk-list-copy-color: rgb(245, 245, 247);
    --sk-list-title-color: rgb(245, 245, 247)
}

.theme-dark .paddlenav {
    --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8);
    --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255);
    --sk-paddlenav-arrow-color-active: rgb(255, 255, 255)
}

.theme-dark .paddlenav-solid {
    --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8);
    --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255);
    --sk-paddlenav-arrow-color-active: rgb(255, 255, 255);
    --sk-paddlenav-background: rgb(51, 51, 54);
    --sk-paddlenav-background-hover: rgb(55.08, 55.08, 58.02);
    --sk-paddlenav-background-active: rgb(46.92, 46.92, 49.68)
}

.theme-dark .paddlenav-alpha {
    --sk-paddlenav-arrow-color: rgba(255, 255, 255, 0.8);
    --sk-paddlenav-arrow-color-hover: rgb(255, 255, 255);
    --sk-paddlenav-arrow-color-active: rgb(255, 255, 255);
    --sk-paddlenav-background: rgba(66, 66, 69, 0.72);
    --sk-paddlenav-background-hover: rgba(72.6170678337, 72.6170678337, 75.5120350109, 0.7256);
    --sk-paddlenav-background-active: rgba(57.1631799163, 57.1631799163, 59.7615062762, 0.7424)
}

.theme-dark .pin {
    --sk-pin-color: rgb(110, 110, 115);
    --sk-pin-caption-color: rgb(134, 134, 139)
}

.theme-dark .quote {
    --sk-quote-copy-color: colors.color(quote.$quote-copy-color, $swatch-book);
    --sk-quote-credit-color: colors.color(quote.$quote-credit-color, $swatch-book)
}

.theme-dark .sosumi {
    --sk-sosumi-text-color: rgba(255, 255, 255, 0.56);
    --sk-sosumi-link-color: rgba(255, 255, 255, 0.8)
}

.theme-dark .stat {
    --sk-stat-value-color: rgb(245, 245, 247);
    --sk-stat-caption-color: rgb(245, 245, 247)
}

.theme-dark .thumbnav {
    --sk-thumbnav-image-border-color: rgb(110, 110, 115);
    --sk-thumbnav-image-border-color-hover: rgb(110, 110, 115);
    --sk-thumbnav-image-border-color-current: rgb(0, 113, 227);
    --sk-thumbnav-image-background: rgb(29, 29, 31);
    --sk-thumbnav-copy-color: rgb(134, 134, 139);
    --sk-thumbnav-copy-color-hover: rgb(245, 245, 247)
}

.theme-dark .thumbnav-neutral {
    --sk-thumbnav-image-border-color: rgb(110, 110, 115);
    --sk-thumbnav-image-border-color-hover: rgb(110, 110, 115);
    --sk-thumbnav-image-border-color-current: rgb(245, 245, 247);
    --sk-thumbnav-image-background: rgb(29, 29, 31);
    --sk-thumbnav-copy-color: rgb(134, 134, 139);
    --sk-thumbnav-copy-color-hover: rgb(245, 245, 247)
}

.theme-dark .tile {
    --sk-tile-background: rgb(0, 0, 0);
    --sk-tile-button-icon-color: rgba(255, 255, 255, 0.8);
    --sk-tile-button-background: rgba(66, 66, 69, 0.72);
    --sk-tile-button-icon-color-hover: rgb(255, 255, 255);
    --sk-tile-button-background-hover: rgba(72.6170678337, 72.6170678337, 75.5120350109, 0.7256);
    --sk-tile-button-background-active: rgba(57.1631799163, 57.1631799163, 59.7615062762, 0.7424)
}

.typography-body-reduced {
    font-size: 14px;
    line-height: 1.4285914286;
    font-weight: 400;
    letter-spacing: -0.016em;
}


.typography-media-gallery-headline {
    font-size: 56px;
    line-height: 1.0714285714;
    font-weight: 600;
    letter-spacing: -0.005em;
}

@media(max-width: 1068px) {
    .typography-media-gallery-headline {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
    }
}

.typography-media-gallery-longnote {
    font-size: 21px;
    line-height: 1.1904761905;
    font-weight: 400;
    letter-spacing: .011em;
}

@media(max-width: 1068px) {
    .typography-media-gallery-longnote {
        font-size: 17px;
        line-height: 1.2353641176;
        font-weight: 400;
        letter-spacing: -0.022em;
    }
}

:root {
    --media-gallery-section-padding-bottom: var(--media-gallery-dotnav-gap);
    --media-gallery-tile-gap: 20px;
    --media-gallery-dotnav-gap: 12px;
    --media-gallery-dotnav-iconcontrol-margin-top: unset;
    --media-gallery-dotnav-iconcontrol-margin-right: calc(12px + env(safe-area-inset-right));
    --media-gallery-bottom-copy-duration: 600ms;
    --media-gallery-slide-duration: 800ms;
    --media-gallery-genre-m-dot-padding: 0.25em;
    --media-gallery-longnote-position-left: 18px;
    --media-gallery-button-margin-top: 0;
    --media-gallery-tile-width: 930px;
    --media-gallery-tile-height: 415px;
    --fam-gallery-tile-height: 415px;
    --media-gallery-headline-margin-bottom: 26px;
    --media-gallery-bottom-content-padding-left: 16px;
    --media-gallery-bottom-content-padding-bottom: 16px;
    --media-gallery-bottom-content-padding-right: 16px
}

@media(min-width: 1441px) {
    :root {
        --media-gallery-tile-width: 1250px;
        --media-gallery-tile-height: 415px;
        --fam-gallery-tile-height: 415px;
    }
}
@media(max-width: 1440px) {
    :root {
        --media-gallery-tile-width: 688px;
        --media-gallery-tile-height: 300px;
        --fam-gallery-tile-height: 300px;
		--media-gallery-tile-gap: 10px;
    }
}
@media(max-height: 850px) {
    :root {
        --media-gallery-tile-width: 65vw;
        --media-gallery-tile-height: 28vh;
        --fam-gallery-tile-height: 28vh;
    }
}
@media(max-width: 1068px) {
    :root {
        --media-gallery-tile-width: 65vw;
        --media-gallery-tile-height: 28vh;
        --fam-gallery-tile-height: 28vh;
    }
}
@media(max-width: 734px) {
    :root {
        --media-gallery-tile-width: 70vw;
        --media-gallery-dotnav-gap: 10px;
        --media-gallery-dotnav-iconcontrol-margin-right: calc(10px + env(safe-area-inset-right));
        --media-gallery-longnote-position-left: 0;
        --media-gallery-button-margin-top: 13px
    }
}

.main {
    overflow-x: clip
}

.button-dark {
    --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.36);
    --sk-button-background: rgb(0, 113, 227);
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB
}

.button-dark.button-neutral {
    --sk-button-background: rgb(245, 245, 247);
    --sk-button-background-hover: rgb(255, 255, 255);
    --sk-button-background-active: #EDEDF2;
    --sk-button-color: rgb(0, 0, 0)
}

.button-dark.button-secondary {
    --sk-button-background: transparent;
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB;
    --sk-button-color: rgb(41, 151, 255);
    --sk-button-color-hover: rgb(255, 255, 255);
    --sk-button-border-color: rgb(41, 151, 255)
}

.button-dark.button-secondary-neutral {
    --sk-button-background: transparent;
    --sk-button-background-hover: rgb(255, 255, 255);
    --sk-button-background-active: #EDEDF2;
    --sk-button-color: rgb(245, 245, 247);
    --sk-button-color-hover: rgb(0, 0, 0);
    --sk-button-border-color: rgb(245, 245, 247)
}

.theme-light .button.button-dark {
    --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.36);
    --sk-button-background: rgb(0, 113, 227);
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB
}

.theme-light .button.button-dark.button-neutral {
    --sk-button-background: rgb(245, 245, 247);
    --sk-button-background-hover: rgb(255, 255, 255);
    --sk-button-background-active: #EDEDF2;
    --sk-button-color: rgb(0, 0, 0)
}

.theme-light .button.button-dark.button-secondary {
    --sk-button-background: transparent;
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB;
    --sk-button-color: rgb(41, 151, 255);
    --sk-button-color-hover: rgb(255, 255, 255);
    --sk-button-border-color: rgb(41, 151, 255)
}

.theme-light .button.button-dark.button-secondary-neutral {
    --sk-button-background: transparent;
    --sk-button-background-hover: rgb(255, 255, 255);
    --sk-button-background-active: #EDEDF2;
    --sk-button-color: rgb(245, 245, 247);
    --sk-button-color-hover: rgb(0, 0, 0);
    --sk-button-border-color: rgb(245, 245, 247)
}

.button-light {
    --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42);
    --sk-button-background: rgb(0, 113, 227);
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB
}

.button-light.button-neutral {
    --sk-button-background: rgb(29, 29, 31);
    --sk-button-background-hover: #272729;
    --sk-button-background-active: #18181A;
    --sk-button-color: rgb(255, 255, 255)
}

.button-light.button-secondary {
    --sk-button-background: transparent;
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB;
    --sk-button-color: rgb(0, 102, 204);
    --sk-button-color-hover: rgb(255, 255, 255);
    --sk-button-border-color: rgb(0, 102, 204)
}

.button-light.button-secondary-neutral {
    --sk-button-background: transparent;
    --sk-button-background-hover: #272729;
    --sk-button-background-active: #18181A;
    --sk-button-color: rgb(29, 29, 31);
    --sk-button-color-hover: rgb(255, 255, 255);
    --sk-button-border-color: rgb(29, 29, 31)
}

.theme-dark .button.button-light {
    --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42);
    --sk-button-background: rgb(0, 113, 227);
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB
}

.theme-dark .button.button-light.button-neutral {
    --sk-button-background: rgb(29, 29, 31);
    --sk-button-background-hover: #272729;
    --sk-button-background-active: #18181A;
    --sk-button-color: rgb(255, 255, 255)
}

.theme-dark .button.button-light.button-secondary {
    --sk-button-background: transparent;
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB;
    --sk-button-color: rgb(0, 102, 204);
    --sk-button-color-hover: rgb(255, 255, 255);
    --sk-button-border-color: rgb(0, 102, 204)
}

.theme-dark .button.button-light.button-secondary-neutral {
    --sk-button-background: transparent;
    --sk-button-background-hover: #272729;
    --sk-button-background-active: #18181A;
    --sk-button-color: rgb(29, 29, 31);
    --sk-button-color-hover: rgb(255, 255, 255);
    --sk-button-border-color: rgb(29, 29, 31)
}

.endless-entertainment {
    display: flex;
    flex-direction: column
}

.media-gallery-headline-container {
    margin-bottom: var(--media-gallery-headline-margin-bottom);
    text-align: center
}

.media-gallery-headline {
    font-size: 56px;
    line-height: 1.0714285714;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: #000
}

@media(max-width: 1068px) {
    .media-gallery-headline {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
    }
}

.media-gallery-headline.theme-dark {
    color: var(--color-text);
}

.media-gallery-is-sliding {
    pointer-events: none
}

.media-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.media-gallery-item-container {
    position: relative;
    width: calc(var(--media-gallery-tile-width) + var(--media-gallery-tile-gap));
    height: var(--media-gallery-tile-height);
    margin: 0
}

.media-gallery-item {
    position: absolute;
    width: calc(var(--media-gallery-tile-width) + var(--media-gallery-tile-gap));
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: unset;
    transform-style: preserve-3d;
    will-change: transform
}

.media-gallery:not(.media-gallery-is-sliding) .media-gallery-item {
    will-change: auto
}

.media-gallery-wrapper-link {
    display: grid;
    position: relative;
    width: var(--media-gallery-tile-width);
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    background-color: #000;
    text-decoration: none !important;
    z-index: 4;
    backface-visibility: hidden;
    transform: translateZ(0);
	border-radius: var(--border-radius);
}
.media-gallery-wrapper-link .media-gallery-bg-wrappermedia-gallery-bg-wrapper:before {
	content: "";
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.current-item .media-gallery-wrapper-link {
    pointer-events: all
}

.media-gallery-bg-wrapper,
.media-gallery-contents {
    width: 100%;
    height: 100%;
    grid-area: 1/1;
    position: relative;
	max-height: var(--media-gallery-tile-height);
}

.media-gallery-wrapper-link:hover .media-gallery-bg:after {
	background: rgba(0, 0, 0, 0);
}
.media-gallery-bg:after {
	content: "";
	background: rgba(0, 0, 0, 0.2);
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: var(--border-radius);
	transition: all 0.5s ease;
}
.media-gallery-bg,
.media-gallery-bg img {
    display: block;
    width: 100%;
    height: 100%
}

.media-gallery-bg img {
    -o-object-fit: cover;
    object-fit: cover;
    backface-visibility: hidden
}

.media-gallery-contents {
    display: flex;
    align-items: end;
    cursor: pointer;
    z-index: 3
}

.media-gallery-top-content {
    display: flex;
    width: 100%;
    position: absolute;
    top: 0;
    padding: 16px;
    box-sizing: border-box;
	font-size: 24px;
	font-family: "GeologicaRegular";
}

.media-gallery-bottom-content {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: var(--media-gallery-bottom-content-padding-bottom);
    box-sizing: border-box;
    opacity: .36;
    transition: opacity .4s ease;
    padding-left: var(--media-gallery-bottom-content-padding-left);
    padding-right: var(--media-gallery-bottom-content-padding-right)
}

.current-item .media-gallery-bottom-content {
    opacity: 1
}

.films-media-gallery-bottom-content {
    transform: translateZ(0)
}

.more-from-apple-gallery .media-gallery-button,
.tv-media-gallery .media-gallery-button {
    margin-top: var(--media-gallery-button-margin-top);
    flex-shrink: 0
}

@media(min-width: 1069px) {
    .more-from-apple-gallery .media-gallery-button,
    .tv-media-gallery .media-gallery-button {
        --sk-button-padding-horizontal: 22px;
        --sk-button-padding-vertical: 12px;
        --sk-button-min-width-basis: 70px;
        --sk-button-margin-horizontal: 18px;
        --sk-button-margin-vertical: 18px;
        font-size: 17px;
        line-height: 1.1764805882;
        font-weight: 400;
        letter-spacing: -0.022em;
    }
    .more-from-apple-gallery .media-gallery-button:lang(ar),
    .tv-media-gallery .media-gallery-button:lang(ar) {
        letter-spacing: 0em;
    }
    .more-from-apple-gallery .media-gallery-button:lang(ja),
    .tv-media-gallery .media-gallery-button:lang(ja) {
        letter-spacing: 0em;
    }
    .more-from-apple-gallery .media-gallery-button:lang(ko),
    .tv-media-gallery .media-gallery-button:lang(ko) {
        letter-spacing: 0em;
    }
    .more-from-apple-gallery .media-gallery-button:lang(zh),
    .tv-media-gallery .media-gallery-button:lang(zh) {
        letter-spacing: 0em
    }
}

.theme-dark .more-from-apple-gallery .media-gallery-button,
.theme-dark .tv-media-gallery .media-gallery-button {
    --sk-button-color: rgb(0, 0, 0);
    --sk-button-background: rgb(245, 245, 247);
    --sk-button-background-hover: rgb(255, 255, 255);
    --sk-button-background-active: #EDEDF2
}

.tv-media-gallery .media-gallery-contents {
    background: radial-gradient(100% 33% at left bottom, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0))
}

@media(max-width: 734px) {
    .tv-media-gallery .media-gallery-contents {
        background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 200px)
    }
}

@media(max-width: 734px) {
    .more-from-apple-gallery .media-gallery-contents {
        --media-gallery-bottom-content-padding-left: 25px;
        --media-gallery-bottom-content-padding-right: 25px
    }
}

.media-gallery-longnote {
    color: var(--color-text);
    font-size: 24px;
	font-family: "GeologicaBold";
    line-height: 1;
	margin: 0;
}

@media(max-width: 1068px) {
    .media-gallery-longnote {
        font-size: 17px;
        line-height: 1.2353641176;
        font-weight: 400;
        letter-spacing: -0.022em;
    }
}

.media-gallery-dotnav {
    margin-top: var(--media-gallery-dotnav-gap);
    margin-bottom: var(--media-gallery-dotnav-gap);
    width: 100%;
    height: var(--sk-dotnav-iconcontrol-icon-size);
    position: relative;
    justify-content: center;
    order: 4
}

.media-gallery-dotnav-iconcontrol {
    position: absolute;
    top: var(--media-gallery-dotnav-iconcontrol-margin-top);
    right: var(--media-gallery-dotnav-iconcontrol-margin-right)
}

.media-gallery-dotnav .media-gallery-dotnav-iconcontrol {
    border-radius: 50%
}

.media-gallery-dotnav.dotnav-scrim-solid {
    --sk-dotnav-iconcontrol-icon-size: 24px
}

.media-gallery-dotnav.dotnav-scrim-solid .media-gallery-dotnav-items {
    background: none
}

.dotnav-timed {
    --sk-dotnav-scrim-solid-iconcontrol-scrim-color: rgba(210, 210, 215, 0.64)
}

@media(hover: hover) {
    .dotnav-timed {
        --sk-dotnav-scrim-solid-iconcontrol-scrim-color-hover: rgba(223, 223, 227, 0.6976)
    }
}

#tv-media-gallery+#fam-media-gallery {
    padding-top: var(--media-gallery-tile-gap)
}


.fam-media-gallery {
    --media-gallery-longnote-position-left: 0;
    --media-gallery-tile-width: 417px;
    --media-gallery-bottom-content-padding-left: 16px;
    --media-gallery-bottom-content-padding-bottom: 44px;
    --media-gallery-bottom-content-padding-right: 16px
}
@media(min-width: 1441px) {
    .fam-media-gallery {
        --media-gallery-tile-width: 470px
    }
}
@media(max-width: 1550px) {
    .fam-media-gallery {
    --media-gallery-bottom-content-padding-bottom: 20px;
    }
}
@media(max-width: 1068px) {
    .fam-media-gallery {
        --media-gallery-tile-width: 32vw;
		--media-gallery-bottom-content-padding-bottom: 16px;
    }
}
@media(max-width: 640px) {
    .fam-media-gallery {
        --media-gallery-tile-width: 55vw;
    }
}

.fam-media-gallery .media-gallery-item-container {
    height: var(--fam-gallery-tile-height);
    transform: translateZ(0);
    backface-visibility: hidden
}

.fam-media-gallery .media-gallery-bg-wrapper.media-gallery-bg-wrapper-music {
    display: flex;
    align-items: center
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-bg-wrapper.media-gallery-bg-wrapper-music {
        flex-direction: column
    }
}

.fam-media-gallery .media-gallery-bg.media-gallery-bg-music {
    margin-left: 19px;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 3px 5px 30px rgba(0, 0, 0, .22);
    z-index: 4;
    backface-visibility: hidden
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-bg.media-gallery-bg-music {
        margin-left: 0;
        margin-top: 46px
    }
}

.fam-media-gallery .media-gallery-bg.media-gallery-bg-music,
.fam-media-gallery .media-gallery-bg.media-gallery-bg-music img {
    width: unset;
    height: unset
}

.fam-media-gallery .media-gallery-contents {
    position: relative
}

.fam-media-gallery .media-gallery-top-content {
    padding-top: 33px;
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-top-content {
		padding-top: 16px;
        font-size: 18px;
    }
	.media-gallery-top-content {
        font-size: 18px;
    }
}
@media(max-width: 734px) {
	.media-gallery-top-content,
    .fam-media-gallery .media-gallery-top-content {
        font-size: 14px;
    }
}

.fam-media-gallery .media-gallery-logo {
    fill: var(--color-text);
}

.fam-media-gallery .media-gallery-logo-fitness {
    width: 78px;
    height: 21px
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-logo-fitness {
        width: 88px;
        height: 20px
    }
}

.fam-media-gallery .media-gallery-logo-arcade {
    width: 68px;
    height: 21px
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-logo-arcade {
        width: 72px;
        height: 20px
    }
}

.fam-media-gallery .media-gallery-logo-music {
    width: 59px;
    height: 21px
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-logo-music {
        width: 64px;
        height: 20px
    }
}

.fam-media-gallery .media-gallery-button {
    flex-shrink: 0;
    --sk-button-color: rgb(255, 255, 255);
    --sk-button-color-hover: var(--sk-button-color);
    --sk-button-color-active: var(--sk-button-color-hover);
    --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42);
    --sk-button-backdrop-filter: none;
    --sk-button-border-color: transparent;
    --sk-button-border-radius: 980px;
    --sk-button-margin-horizontal: 14px;
    --sk-button-margin-vertical: 14px;
    --sk-button-min-width-basis: 60px;
    --sk-button-padding-horizontal: 16px;
    --sk-button-padding-vertical: 9px;
    --sk-button-border-width: 1px;
    --sk-button-box-sizing: content-box;
    --sk-button-width: auto;
    --sk-button-display: inline-block;
    font-size: 14px;
    line-height: 1.2857742857;
    font-weight: 400;
    letter-spacing: -0.016em;
    background: var(--sk-button-background);
    color: var(--sk-button-color);
    backdrop-filter: var(--sk-button-backdrop-filter);
    border-color: var(--sk-button-border-color);
    padding-block: calc(var(--sk-button-padding-vertical) - var(--sk-button-border-width));
    padding-inline: calc(var(--sk-button-padding-horizontal) - var(--sk-button-border-width));
    border-radius: var(--sk-button-border-radius);
    border-style: solid;
    border-width: var(--sk-button-border-width);
    width: var(--sk-button-width);
    min-width: calc(var(--sk-button-min-width-basis) - var(--sk-button-padding-horizontal)*2);
    cursor: pointer;
    display: var(--sk-button-display);
    box-sizing: var(--sk-button-box-sizing);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    --sk-button-background: rgb(0, 113, 227);
    --sk-button-background-hover: #0076DF;
    --sk-button-background-active: #006EDB;
    --sk-button-color: rgb(255, 255, 255);
    --sk-button-background: rgb(29, 29, 31);
    --sk-button-background-hover: #272729;
    --sk-button-background-active: #18181A
}

.fam-media-gallery .media-gallery-button:hover {
    background: var(--sk-button-background-hover, var(--sk-button-background));
    color: var(--sk-button-color-hover, var(--sk-button-color));
    text-decoration: none;
    border-color: rgba(0, 0, 0, 0)
}

.fam-media-gallery .media-gallery-button:focus-visible {
    outline: 2px solid var(--sk-focus-color, #0071e3);
    outline-offset: var(--sk-focus-offset-container, 3px)
}

.fam-media-gallery .media-gallery-button:active {
    background: var(--sk-button-background-active, var(--sk-button-background));
    color: var(--sk-button-color-active, var(--sk-button-color));
    outline: none
}

.fam-media-gallery .media-gallery-button:disabled,
.fam-media-gallery .media-gallery-button.disabled {
    pointer-events: none;
    opacity: var(--sk-button-disabled-opacity)
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-button {
        --sk-button-padding-horizontal: 11px;
        --sk-button-padding-vertical: 4px;
        --sk-button-min-width-basis: 45px;
        --sk-button-margin-horizontal: 10px;
        --sk-button-margin-vertical: 10px;
        font-size: 12px;
        line-height: 1.3333733333;
        font-weight: 400;
        letter-spacing: -0.01em;
    }
}

.fam-media-gallery .media-gallery-bottom-content {
    justify-content: space-between;
    flex-flow: row-reverse
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-bottom-content {
        justify-content: center;
        flex-flow: column-reverse
    }
}

.fam-media-gallery .media-gallery-longnote {
    font-size: 24px;
    line-height: 1;
	font-family: "GeologicaBold";
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-longnote {
        font-size: 18px;
    }
}

@media(max-width: 734px) {
    .fam-media-gallery .media-gallery-longnote {
        font-size: 14px;
    }
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-longnote {
        width: 100%;
    }
}

.fam-media-gallery .media-gallery-longnote.media-gallery-longnote-music {
    margin-left: 19px;
    position: relative;
    z-index: 3
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-longnote.media-gallery-longnote-music {
        margin-left: 0
    }
}

@media(min-width: 1069px) {
    .fam-media-gallery .media-gallery-longnote.media-gallery-longnote-music-hide-large {
        display: none
    }
}

@media(max-width: 1068px) {
    .fam-media-gallery .media-gallery-longnote.media-gallery-longnote-music-hide-medium-small {
        display: none
    }
}

.fam-media-gallery .theme-dark .media-gallery-contents {
    background: linear-gradient(to bottom, rgba(29, 29, 31, 0.4) 0%, rgba(29, 29, 31, 0) 70px, rgba(29, 29, 31, 0) calc(100% - 70px), rgba(29, 29, 31, 0.4) 100%)
}

@media(max-width: 1068px) {
    .fam-media-gallery .theme-dark .media-gallery-contents {
        background: linear-gradient(to bottom, rgba(29, 29, 31, 0.45) 0%, rgba(29, 29, 31, 0) 60px, rgba(29, 29, 31, 0) calc(100% - 120px), rgba(29, 29, 31, 0.45) 100%)
    }
}

@media(max-width: 734px) {
    .fam-media-gallery .theme-dark .media-gallery-contents {
        background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7)), linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 200px)
    }
}

.fam-media-gallery .theme-dark .media-gallery-button {
    --sk-button-color: rgb(0, 0, 0);
    --sk-button-background: rgb(245, 245, 247);
    --sk-button-background-hover: rgb(255, 255, 255);
    --sk-button-background-active: #EDEDF2
}

.fam-media-gallery .theme-light .media-gallery-logo-music>svg {
    fill: #1d1d1f
}

.fam-media-gallery .theme-light .media-gallery-longnote-music {
    color: #1d1d1f;
    text-shadow: none
}

.visuallyhidden {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(0 0 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
}

.dotnav-item {
	opacity: 0;
	width: 0;
}
.dotnav-item.current {
	opacity: 1;
	width: auto;
}
/* prev 3 elements */
.dotnav-item:has(+ .dotnav-item.current) {
	opacity: 1;
	width: auto;
}
.dotnav-item:has(+ .dotnav-item + .dotnav-item.current) {
	opacity: 1;
	width: auto;
	--sk-dotnav-scale: var(--sk-dotnav-scale-2);
}
.dotnav-item:has(+ .dotnav-item + .dotnav-item + .dotnav-item.current) {
	opacity: 1;
	width: auto;
	--sk-dotnav-scale: var(--sk-dotnav-scale-3);
}
/* next 3 elements */
.dotnav-item.current + .dotnav-item {
	opacity: 1;
	width: auto;
}
.dotnav-item.current + .dotnav-item  + .dotnav-item {
	opacity: 1;
	width: auto;
	--sk-dotnav-scale: var(--sk-dotnav-scale-2);
}
.dotnav-item.current + .dotnav-item  + .dotnav-item  + .dotnav-item {
	opacity: 1;
	width: auto;
	--sk-dotnav-scale: var(--sk-dotnav-scale-3);
}
/* End */


/* Start:/local/templates/direkt2026/components/bitrix/catalog.section.list/works_section/style.css?17846555444676*/
.cases-all {
	padding: 60px 50px;
	border-radius: 20px;
	border: 1px solid transparent;
	background: linear-gradient(var(--color-main-bg), var(--color-main-bg) 0) padding-box,
				linear-gradient(127.99deg, var(--color-text) 20.47%, var(--color-gradient-end) 78.94%) border-box;
}
.cases-all__link {
	font-family: 'GeologicaBold';
	font-size: 32px;
	transition: all 0.5s ease;
}
.cases-all__link svg {
	margin-left: 13px;
}
.cases-all__link:hover {
	color: var(--color-link);
}
.cases-all__block {
	margin-top: 48px;
	display: grid;
	grid-template-columns: 215px repeat(3, 1fr);
	align-items: center;
	gap: 5vw;
}
.cases-all__title {
	color: transparent;
	background: linear-gradient(147.99deg, #6B32C9 19.23%, rgba(72, 59, 245, 0.8) 115.38%);
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0px 0px 4px rgba(132, 59, 245, 0.4);
	font-family: 'GeologicaBold';
	font-size: 64px;
	text-decoration: none;
	text-align: center;
}
.cases-all__title:hover:after {
	background-color: var(--color-link);
}
.cases-all__title:hover {
	text-decoration: none;
	color: transparent;
	background: linear-gradient(147.99deg, #6B32C9 19.23%, rgba(72, 59, 245, 0.8) 115.38%);
	background-clip: text;
	-webkit-background-clip: text;
	opacity: 0.8;
}
.cases-all__block a.btn {
	font-size: 18px;
	font-family: "GeologicaThin";
	border-radius: var(--border-radius);
	white-space: nowrap;
	display: inline-block;
}
.cases-all__block.cases-all__link__wrap {
	gap: unset;
	grid-template-columns: repeat(4, 1fr);
}

.cases .cases-all {
	padding: 40px 50px;
}
.cases .cases-all .cases-all__link {}
.cases .cases-all .cases-all__list {
	margin-top: 80px;
}
.cases .cases-all .cases-all__block {
	column-gap: 21px;
	margin-top: 27px;
	display: flex;
	row-gap: 10px;
}
.cases .cases-all .cases-all__title {
	font-size: 32px;
	color: var(--color-text);
}
.cases .cases-all .cases-all__title:hover {
	color: var(--color-link);
}
.cases .cases-all .cases-all__block a.btn {
	padding: 17px 20px;
}
.cases-all__btn {
	display: flex;
	align-items: center;
	column-gap: 21px;
	justify-content: space-between;
}

@media (max-width: 1700px) {
	.cases .cases-all .cases-all__list {
		margin-top: 48px;
		display: grid;
		grid-template-columns: repeat(3, calc(100%/3 - 13px));
		column-gap: 20px;
	}
	.cases .cases-all .cases-all__title {
		margin: 0 auto;
		color: var(--color-link);
	}
	.cases .cases-all .cases-all__block {
		flex-direction: column;
		align-items: start;
		row-gap: 34px;
		margin: 0;
		width: 100%;
	}
	.cases .cases-all .cases-all__btn {
		flex-direction: column;
		align-items: start;
		row-gap: 24px;
		width: 100%;
	}
	.cases .cases-all .cases-all__btn > div {
		width: 100%;
	}
	.cases .cases-all .cases-all__block a.btn {
		width: 100%;
		white-space: break-spaces;
		padding: 12px 8px;
		font-size: 16px;
	}
}
@media (max-width: 1330px) {
	.cases .cases-item:nth-child(7) {
		display: none;
	}
	.cases .cases-all {
		grid-column: span 2 / span 2;
		padding: 20px;
	}
	.cases .cases-all .cases-all__list {
		margin-top: 20px;
	}
	.cases .cases-all .cases-all__block {
		row-gap: 20px;
	}
	.cases .cases-all .cases-all__btn {
		row-gap: 10px;
	}
	.cases .cases-all .cases-all__title {
		margin: 0;
	}
	.cases-all__link {
		font-size: 24px;
	}
	.cases-all .cases-all__title {
		font-size: 24px;
	}
	.cases .cases-all .cases-all__btn > div {
		width: auto;
	}
	.cases-all__block.cases-all__link__wrap {
		gap: 10px;
		flex-wrap: wrap;
		display: flex;
		margin-top: 32px;
	}
}
@media (max-width: 844px) {
	.cases .cases-all {
		grid-column: unset;
		padding: 24px;
	}
	.cases .cases-all .cases-all__list {
		display: flex;
		flex-direction: column;
		row-gap: 30px;
	}
	.cases .cases-all .cases-all__block {
		display: grid;
		grid-template-columns: 100px calc(100% - 100px - 21px);
	}
	.cases .cases-all .cases-all__btn {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.cases-all__block a.btn {
		width: auto !important;
		font-size: 16px;
		padding: 11px 20px;
	}
	.cases-all__link {
		font-size: 16px;
	}
	.cases-all__link svg {
		width: 16px;
		margin-bottom: -7px;
	}
	.cases-all {
		padding: 24px 10px;
		margin-bottom: 80px;
	}
}
@media (max-width: 670px) {
	.cases .cases-all {
		padding: 24px 10px;
		margin-bottom: 0px;
	}
	.cases .cases-all .cases-all__block {
		grid-template-columns: 100%;
	}
	.cases .cases-all .cases-all__title {
		text-align: left;
	}
	.cases .cases-all .cases-all__btn {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.cases .cases-all .cases-all__block a.btn {
		font-size: 12px;
		width: 100% !important;
	}
}
@media (max-width: 350px) {
	.cases .cases-all .cases-all__btn {
		grid-template-columns: 100%;
	}
}
/* End */
/* /local/templates/direkt2026/components/bitrix/news/works/bitrix/news.detail/.default/style.css?17851762293882 */
/* /local/templates/direkt2026/components/bitrix/news.list/list_double_swiper/style.css?178465554471863 */
/* /local/templates/direkt2026/components/bitrix/catalog.section.list/works_section/style.css?17846555444676 */