/* Start:/local/templates/direkt2026/assets/css/blog.css?17853289159891*/
.blog-sections ~ .blog-list {
	margin: 80px 0 120px;
}
.blog-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
	gap: 32px;
	align-items: start;
	justify-content: space-between;
	margin-bottom: 60px;
}
.blog-list.blog-list__not-full {
    grid-template-rows: unset;
}
.blog-item {
	display: grid;
	grid-template-columns: 189px calc(100% - 189px - 16px);
	gap: 16px;
	align-items: center;
}
.blog-item.blog-item__big {
	grid-template-columns: 100%;
	grid-row: span 3 / span 3;
}
.blog-item picture {
	overflow: hidden;
	display: block;
	border-radius: 20px;
	height: 228px;
}
.blog-item img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.5s ease;
}
.blog-item.blog-item__big picture {
	height: 404px;
	border-radius: var(--border-radius);
	position: relative;
}
.blog-item.blog-item__big picture:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(to right, var(--color-text) 20.47%, var(--color-gradient-end) 78.94%);
	-webkit-mask: linear-gradient(var(--color-text) 0 0) content-box, linear-gradient(var(--color-text) 0 0);
	mask-composite: add, add;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: all 0.5s ease;
}
.blog-item.blog-item__big img {
	border-radius: var(--border-radius);
}
.blog-item.blog-item__big .blog-item__info {
	margin-top: 16px;
}
.blog-item__date {
	font-family: 'GeologicaRegular';
	font-size: 24px;
}
.blog-item__title h3 {
	font-family: 'GeologicaBold';
	font-size: 24px;
	margin: 0;
	padding: 0;
}
.blog-item__descr {
	font-size: 18px;
}
.blog-item.blog-item__big .blog-item__date,
.blog-item.blog-item__big .blog-item__title h3 {
	font-size: 32px;
}
.blog-item__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.blog-item__first {
	grid-template-columns: 100%;
	margin-bottom: 32px;
	position: relative;
}
.blog-item__first picture {
	height: 500px;
}
.blog-item__first .blog-item__info {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
}

.blog-list.blog-list__section .blog-item.blog-item__big {
	grid-row-start: var(--row);
}
.blog-list.blog-list__section .blog-item {
	grid-row-start: var(--row);
	grid-column-start: var(--column);
}
.blog-section__list {
	margin-bottom: 80px;
}
.blog-section__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 80px;
}
.blog-section__top h2 {
	font-family: 'GeologicaBold';
	font-size: 64px;
	margin: 0;
	padding: 0;
}
.blog-section__top a:not(.no-hover):after {
	width: 35px;
	height: 35px;
	mask: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1567 1.26172C14.1567 0.564096 13.5912 -0.00143909 12.8936 -0.00143909H1.52513C0.827511 -0.00143909 0.261976 0.564096 0.261976 1.26172C0.261976 1.95934 0.827511 2.52488 1.52513 2.52488H11.6304V12.6301C11.6304 13.3278 12.1959 13.8933 12.8936 13.8933C13.5912 13.8933 14.1567 13.3278 14.1567 12.6301V1.26172ZM0.893555 13.2617L1.78674 14.1549L13.7867 2.15491L12.8936 1.26172L12.0004 0.368531L0.000367224 12.3685L0.893555 13.2617Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
}
.blog-section__top .blog-section__more:hover {
	color: var(--color-link);
}
.blog-section__top a {
	font-family: 'GeologicaBold';
	font-size: 24px;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.blog-section__top a:hover {
	text-decoration: none;
}

@media (max-width: 1400px) {
	.title-top__list:has(> .blog-sections) {
		flex-direction: column;
		align-items: start;
	}
	.title-top__list .blog-sections {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
	}
}
@media (max-width: 991px) {
	.blog-popular__list {
		flex-direction: column;
	}
	.blog-section__top {
		margin-bottom: 32px;
	}
	.blog-section__top h2 {
		font-size: 28px;
	}
	.blog-section__top .blog-section__more {
		display: none;
	}
	.blog-section__list .blog-list {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, 1fr);
		gap: 20px;
		justify-content: start;
	}
	.blog-section__list .blog-item.blog-item__big {
		grid-column: span 3 / span 3;
		grid-row: unset;
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	.blog-section__list .blog-item.blog-item__big picture {
		margin: 0;
		height: 240px;
	}
	.blog-section__list .blog-item.blog-item__big img {
		height: 100%;
	}
	.blog-section__list .blog-item {
		grid-template-columns: unset;
	}
	.blog-section__list .blog-item picture {
		height: auto;
		height: 189px;
	}
	.blog-section__list .blog-item img {
		height: 100%;
	}
	.blog-section__list .blog-item.blog-item__big .blog-item__info {
		margin-top: 0;
	}
	.blog-list.blog-list__section {
		display: flex;
		flex-wrap: wrap;
	}
	.blog-list.blog-list__section .blog-item.blog-item__big {
		grid-row-start: unset;
		width: 100%;
	}
	.blog-list.blog-list__section .blog-item {
		grid-row-start: unset;
		grid-column-start: unset;
		width: calc(100vw/3 - 30px);
		grid-template-columns: unset;
	}
}
@media (max-width: 844px) {
	.blog-item__date,
	.blog-item__title h3 {
		font-size: 16px;
	}
	.blog-item.blog-item__big .blog-item__date, 
	.blog-item.blog-item__big .blog-item__title h3 {
		font-size: 24px;
	}
}
@media (max-width: 768px) {
	.blog-section__list .blog-list {
		display: flex;
		flex-direction: column;
	}
	.blog-section__list .blog-item.blog-item__big {
		grid-template-columns: 100%;
	}
	.blog-btn-light {
		margin-left: 5px;
	}
}


.blog-detail {
	margin-bottom: 60px;
}
.blog-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;
}
.blog-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;
}
.blog-banner__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 423px;
	z-index: 1;
	position: relative;
	max-width: 55%;
	gap: 30px;
}
.blog-banner img {
	border-radius: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
.blog-banner:hover:before {
	opacity: 0;
}
.blog-banner__time {
	font-size: 24px;
	font-family: 'GeologicaRegular';
}
.blog-banner__title {
	font-size: 32px;
	font-family: 'GeologicaBold';
	margin: 0;
}
.blog-banner__tags {
	display: flex;
	align-items: center;
	gap: 15px;
}

.blog-props {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 42px;
	margin-top: 38px;
	align-items: center;
}
.blog-prop_img {
	background: linear-gradient(#1F2831, #1F2831 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);
	height: fit-content;
}
.blog-prop_img img {
	border-radius: var(--border-radius);
	height: 100%;
	width: 100%;
	object-fit: contain;
}
.blog-prop_text {
	margin-top: 25px;
}
.blog-props__full {
	margin-top: 38px;
}
.blog-props__full img {
	background: linear-gradient(#1F2831, #1F2831 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);
	height: auto;
	width: 100%;
}
.blog-prop_text > h2  {
	margin-bottom: 0;
}
.link_parthners {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.link_parthners .btn {
	padding: 10px 20px;
}
.blog-props {
	z-index: 2;
	position:relative;
}
.blog-bottom {
	margin: 48px 0;
	display: grid;
	justify-content: space-between;
	grid-template-columns: 1fr auto;
	margin: 48px 0;
}

[style="color: #a763a9;"],
[style="color: #a763a9;"]:hover,
[style="color: #91278f;"],
[style="color: #91278f;"]:hover {
	color: var(--color-text) !important;
}
.blog__detail a > span[style="color: #a763a9;"],
.blog__detail a > span[style="color: #91278f;"] {
	text-decoration: underline;
}
.blog__detail a:hover:has(> span[style="color: #a763a9;"]),
.blog__detail a:hover:has(> span[style="color: #a763a9;"]) span,
.blog__detail a:hover:has(> span[style="color: #91278f;"]),
.blog__detail a:hover:has(> span[style="color: #91278f;"]) span {
	text-decoration: none;
}
.direction-works.blog_popular_section {
	margin: 20px 0 0;
}
.decor_wave ~ .container:has(> .direction-works.blog_popular_section) {
	z-index: 99;
}

main .js_fixed_top.sticky.open_menu__fixed {
	width: 0;
	opacity: 0;
	height: 0;
	visibility: hidden;
}

@media (max-width: 991px) {
	.blog-props {
		grid-template-columns: 100%;
	}
	.blog-props__full .blog-prop_text {
		columns: 1;
	}
	.blog__detail {
		margin-bottom: 30px;
	}
	.link-back__detail {
		font-size: 28px;
	}
	.icon-back {
		width: 12px;
		height: 12px;
	}
}

@media (max-width: 768px) {
	.blog-banner__time,
	.blog-banner__title {
		font-size: 16px;
	}
	.blog-banner__tags {
		font-size: 12px;
	}
	.blog__detail {
		font-size: 16px;
	}
	.blog-props {
		gap: 32px;
	}
	.blog-prop_text {
		margin-top: 0;
	}
	.blog-props,
	.blog-props__full {
		margin-top: 15px;
	}
	.blog-props h2 {
		margin: 20px 0;
	}
	.blog-prop_text h2 + br + br {
		margin-top: -20px;
		display: block;
	}
	.blog-banner__inner {
		max-width: unset;
	}
	.blog-list.blog-list__section .blog-item {
		width: 100%;
	}
	.blog-bottom {
		grid-template-columns: 100%;
		row-gap: 20px;
	}
	.link_parthners {
		flex-direction: column;
	}
	.link_parthners .btn {
		width: 100%;
	}
	.blog-props__full table,
	.blog-prop_text table {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		display: block;
	}
}

/* End */


/* Start:/local/templates/direkt2026/components/bitrix/catalog.section.list/blog_header/style.css?17853288531391*/
.blog-sections {
	display: grid;
	grid-template-columns: repeat(var(--count-section), 1fr);
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 32px;
}
.title-top__list .blog-sections {
	width: calc(100% - 110px - 48px);
}
.blog-sections > button,
.blog-sections > a.selected,
.blog-sections > a:hover {
}
.blog-sections > a:hover,
.blog-sections > a:focus,
.blog-sections > a:active {
	text-decoration: none;
}
.blog-sections > button,
.blog-sections > a {
	font-family: "GeologicaBold";
	white-space: nowrap;
	font-size: 20px;
	padding: 10.5px 10px;
}
.blog-sections > a span {
	text-transform: uppercase;
}
.title-top__list.fixed {
	position: fixed;
	width: 100%;
	right: 0;
	left: 0;
	padding: 20px;
	background: var(--color-main-bg);
	z-index: 99;
}

@media (max-width: 1440px) {
	.blog-sections > button,
	.blog-sections > a {
		padding: 10px;
	}
	.blog-sections.fixed {
		padding: 20px 60px;
	}
}
@media (max-width: 991px) {
	.blog-sections.fixed {
		padding: 20px 10px;
	}
	.blog-sections {
		gap: 10px;
	}
}
@media (max-width: 844px) {
	.blog-sections {
		grid-template-columns: 100%;
		gap: 10px;
	}
	.blog-sections > button,
	.blog-sections > a {
		width: 100%;
	}
	.blog-sections.fixed {
		position: relative;
	}
	main .blog-sections > button, 
	main .blog-sections > a {
		font-size: 16px;
	}
	.title-top__list .blog-sections {
		width: 100%;
	}
}
/* 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 */
/* /local/templates/direkt2026/assets/css/blog.css?17853289159891 */
/* /local/templates/direkt2026/components/bitrix/catalog.section.list/blog_header/style.css?17853288531391 */
/* /local/templates/direkt2026/components/bitrix/news.list/list_double_swiper/style.css?178465554471863 */