:root {
	 --brand-color: #d2033a;
	 --brand-color-dark-2: #bdc0c5;
	 --fg-color-1: #0e1012;
	 --fg-color-2: #fafcff;
	 --fg-color-3: #d5dae1;
	 --bg-color-1: #fafcff;
	 --bg-color-2: #ecf0f5;
	 --bg-color-3: #0e1012;
	 --gap-xs: 6px;
	 --gap-s: 12px;
	 --gap-m: 25px;
	 --gap-l: 45px;
	 --gap-xl: 65px;
	 --gap-page: 320px;
	 --fs-s: 9pt;
	 --fs-m: 13pt;
	 --fs-l: 24pt;
	 --fs-xl: 38pt;
	 --fs-xxl: 60pt;
	 --size-xs: 9pt;
	 --size-s: 13pt;
	 --size-m: 24pt;
	 --size-l: 34pt;
	 --size-xl: 54pt;
	 --size-xxl: 94pt;
	 --br-s: 15px;
	 --br-m: 38px;
	 --br-l: 65px;
	 --bs-m: 0px 3px 10px rgba(0, 0, 0, 0.1);
	 --td-m: 0.4s;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-Regular.ttf') format('truetype');
	 font-weight: normal;
	 font-style: normal;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-ExtraboldItalic.ttf') format('truetype');
	 font-weight: 800;
	 font-style: italic;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-Bold.ttf') format('truetype');
	 font-weight: bold;
	 font-style: normal;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-Black.ttf') format('truetype');
	 font-weight: 900;
	 font-style: normal;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-Light.ttf') format('truetype');
	 font-weight: 300;
	 font-style: normal;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-Semibold.ttf') format('truetype');
	 font-weight: 600;
	 font-style: normal;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-Medium.ttf') format('truetype');
	 font-weight: 500;
	 font-style: normal;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-MediumItalic.ttf') format('truetype');
	 font-weight: 500;
	 font-style: italic;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-BlackItalic.ttf') format('truetype');
	 font-weight: 900;
	 font-style: italic;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-Italic.ttf') format('truetype');
	 font-weight: normal;
	 font-style: italic;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-SemiboldItalic.ttf') format('truetype');
	 font-weight: 600;
	 font-style: italic;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-Extrabold.ttf') format('truetype');
	 font-weight: 800;
	 font-style: normal;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-BoldItalic.ttf') format('truetype');
	 font-weight: bold;
	 font-style: italic;
}

@font-face {
	 font-family: 'Rubik';
	 src: url('/font/Rubik-LightItalic.ttf') format('truetype');
	 font-weight: 300;
	 font-style: italic;
}

@media (max-width: 1600px) {
	:root {
		 --gap-page: 210px;
	}
}

@media (max-width: 1280px) {
	:root {
		 --gap-page: 150px;
	}
}

@media (max-width: 1080px) {
	:root {
		--gap-xs: 5px;
		--gap-s: 10px;
		--gap-m: 18px;
		--gap-l: 35px;
		--gap-xl: 55px;
		--gap-page: 90px;
		--fs-s: 8pt;
		--fs-m: 12pt;
		--fs-l: 19pt;
		--fs-xl: 29pt;
		--fs-xxl: 40pt;
	}
}
@media (max-width: 890px) {
	:root {
		--gap-page: 50px;
		--br-s: 1px;
		--br-m: 28px;
		--br-l: 50px;
	}
	 
	.col-m.col-2:not(.no-row), .col-l.col-2:not(.no-row), .col-m.col-3:not(.no-row), .col-l.col-3:not(.no-row), .row-mobile {
		grid-auto-flow: row !important;
		grid-template-columns: none !important;
	}
}

@media (max-width: 600px) {
	.brand-button-group {
		grid-auto-flow: row !important;
		grid-template-columns: none !important;
	}

	.title-mobile {
		display: inline !important;
	}

	.title-desktop {
		display: none !important;
	}
}

@media (max-width: 450px) {
	:root {
		--gap-page: 15px;
	}

	.col-m.col-2, .col-l.col-2, .col-m.col-3, .col-l.col-3 {
		grid-auto-flow: row !important;
		grid-template-columns: none !important;
	}
}

*, *::before, *::after {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
	 font-family: "Rubik", Calibri, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
}

html, body {
	text-rendering: optimizeLegibility;
	background-color: var(--bg-color-1);
	scroll-behavior: smooth;
}
 a:focus, a, button, input, textarea, select {
	 outline: none;
	 border: 0;
	 max-width: 100%;
	 text-decoration: none;
}
 li {
	 list-style-type: none;
}

.body {
	margin-top: var(--gap-m);
	padding: 0 var(--gap-page) 0 var(--gap-page);
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	opacity: 0 !important;
}

 .col, .col-xs, .col-s, .col-m, .col-l, .col-xl {
	 display: grid !important;
	 grid-auto-flow: column;
}
 .row, .row-xs, .row-s, .row-m, .row-l, .row-xl {
	 display: grid !important;
	 grid-auto-flow: row;
}
 .col-xs, .row-xs {
	 grid-gap: var(--gap-xs);
}
 .col-s, .row-s {
	 grid-gap: var(--gap-s);
}
 .col-m, .row-m {
	 grid-gap: var(--gap-m);
}
 .col-l, .row-l {
	 grid-gap: var(--gap-l);
}
 .col-xl, .row-xl {
	 grid-gap: var(--gap-xl);
}
 .col-left {
	 grid-template-columns: 1fr auto;
}
 .col-right {
	 grid-template-columns: auto 1fr;
}
 .col-2 {
	 grid-auto-columns: 1fr 1fr;
}
 .col-3 {
	 grid-auto-columns: 1fr 1fr 1fr;
}
 .row-top {
	 grid-template-rows: 1fr auto;
}
 .row-bottom {
	 grid-template-rows: auto 1fr;
}
 .flex {
	 display: flex;
}
/* Text */
 .nowrap-text {
	 white-space: nowrap;
	 overflow: hidden;
	 text-overflow: ellipsis;
}

.title-desktop {
	display: inline;
}

.title-mobile {
	display: none;
}

.title-text-s, .title-text-m, .title-text-l, .title-text-xl, .title-text-xxl {
	 color: var(--fg-color-1);
	 font-weight: 700;
}
 .title-text-s.brand-1, .title-text-m.brand-1, .title-text-l.brand-1, .title-text-xl.brand-1, .title-text-xxl.brand-1 {
	 color: var(--fg-color-1) !important;
}
 .title-text-s.brand-2, .title-text-m.brand-2, .title-text-l.brand-2, .title-text-xl.brand-2, .title-text-xxl.brand-2 {
	 color: var(--fg-color-2) !important;
}
 .title-text-s.substrate, .title-text-m.substrate, .title-text-l.substrate, .title-text-xl.substrate, .title-text-xxl.substrate {
	 background-color: var(--bg-color-1);
	 margin-right: auto;
	 padding-right: var(--gap-s);
	 border-radius: var(--br-s);
}
 .title-text-s {
	 font-size: var(--fs-s);
}
 .title-text-m {
	 font-size: var(--fs-m);
}
 .title-text-l {
	 font-size: var(--fs-l);
}
 .title-text-xl {
	 font-size: var(--fs-xl);
}
 .title-text-xxl {
	 font-size: var(--fs-xxl);
	 line-height: 1.1;
}
 .desc-text-s, .desc-text-m, .desc-text-l {
	 color: var(--brand-color-dark-2);
}
 .desc-text-s, .desc-text-s a {
	 font-size: var(--fs-s) !important;
}
 .desc-text-m, .desc-text-m a {
	 font-size: var(--fs-m) !important;
}
 .desc-text-l, .desc-text-l a {
	 font-size: var(--fs-l) !important;
}
 .primary-text-s, .primary-text-m, .primary-text-l {
	 color: var(--fg-color-1);
	 line-height: 1.3 !important;
}
 .primary-text-s.brand-1, .primary-text-m.brand-1, .primary-text-l.brand-1 {
	 color: var(--fg-color-1) !important;
}
 .primary-text-s.brand-2, .primary-text-m.brand-2, .primary-text-l.brand-2 {
	 color: var(--fg-color-2) !important;
}
 .primary-text-s {
	 font-size: var(--fs-s);
}
 .primary-text-m {
	 font-size: var(--fs-m);
}
 .primary-text-l {
	 font-size: var(--fs-l);
}
 .icon-xs, .icon-s, .icon-m, .icon-l, .icon-xl, .icon-xxl {
	 fill: var(--fg-color-1);
}
 .icon-xs path, .icon-s path, .icon-m path, .icon-l path, .icon-xl path, .icon-xxl path {
	 stroke: var(--fg-color-1);
}
 .icon-xs.brand-1, .icon-s.brand-1, .icon-m.brand-1, .icon-l.brand-1, .icon-xl.brand-1, .icon-xxl.brand-1 {
	 fill: var(--fg-color-1) !important;
}
 .icon-xs.brand-1 path, .icon-s.brand-1 path, .icon-m.brand-1 path, .icon-l.brand-1 path, .icon-xl.brand-1 path, .icon-xxl.brand-1 path {
	 stroke: var(--fg-color-1) !important;
}
 .icon-xs.brand-2, .icon-s.brand-2, .icon-m.brand-2, .icon-l.brand-2, .icon-xl.brand-2, .icon-xxl.brand-2 {
	 fill: var(--fg-color-2) !important;
}
 .icon-xs.brand-2 path, .icon-s.brand-2 path, .icon-m.brand-2 path, .icon-l.brand-2 path, .icon-xl.brand-2 path, .icon-xxl.brand-2 path {
	 stroke: var(--fg-color-2) !important;
}
 .icon-xs.desc, .icon-s.desc, .icon-m.desc, .icon-l.desc, .icon-xl.desc, .icon-xxl.desc {
	 fill: var(--fg-color-2) !important;
}
 .icon-xs.desc path, .icon-s.desc path, .icon-m.desc path, .icon-l.desc path, .icon-xl.desc path, .icon-xxl.desc path {
	 stroke: var(--fg-color-2) !important;
}
 .icon-xs {
	 width: var(--size-xs);
	 height: var(--size-xs);
}
 .icon-s {
	 width: var(--size-s);
	 height: var(--size-s);
}
 .icon-m {
	 width: var(--size-m);
	 height: var(--size-m);
}
 .icon-l {
	 width: var(--size-l);
	 height: var(--size-l);
}
 .icon-xl {
	 width: var(--size-xl);
	 height: var(--size-xl);
}
 .icon-xxl {
	 width: var(--size-xxl);
	 height: var(--size-xxl);
}
 .target-out {
	 display: contents;
}
 .target-in {
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
}
 .v-center {
	 margin: auto 0;
	 align-items: center;
}
 .v-in-center {
	 margin: auto 0;
}
 .v-out-center {
	 align-items: center;
}
 .h-in-center {
	 margin: 0 auto;
}
 .h-right {
	 margin-right: auto !important;
}
 .h-left {
	 margin-left: auto !important;
}
 .v-top {
	 margin-top: auto;
}
 .v-bottom {
	 margin-bottom: auto;
}
 .in-center {
	 margin: auto;
}
 .text-center {
	 text-align: center;
	 width: 100%;
}
 .brand-button {
	 display: flex;
	 border-radius: var(--br-m);
	 background-color: var(--fg-color-1);
	 padding: var(--gap-s) var(--gap-m);
	 height: max-content;
	 user-select: none;
	 cursor: pointer;
	 line-height: 0.9;
	 transition: background-color var(--td-m), transform var(--td-m);
}
 .brand-button .button-text {
	 font-size: var(--fs-m);
	 color: var(--fg-color-2);
	 width: 100%;
	 text-align: center;
}
 .brand-button.brand-1 {
	 background-color: var(--fg-color-1);
}
 .brand-button.brand-1 .button-text {
	 color: var(--fg-color-2);
}
 .brand-button.brand-2 {
	 background-color: var(--fg-color-2);
}
 .brand-button.brand-2 .button-text {
	 color: var(--fg-color-1);
}
 .brand-button.desc {
	 background-color: var(--fg-color-3);
}
 .brand-button.desc .button-text {
	 color: var(--fg-color-1);
}
 .brand-button:hover {
	 background-color: var(--brand-color);
}
 .brand-button:hover.brand-1 {
	 background-color: var(--brand-color);
}
 .brand-button:hover.brand-2 {
	 background-color: var(--brand-color-dark-2);
}
 .brand-button:hover.desc {
	 background-color: var(--brand-color-dark-2);
}
 .icon-button {
	 cursor: pointer;
}
 .icon-button svg {
	 transition: fill var(--td-m);
}
 .icon-button.brand-1 svg {
	 fill: var(--fg-color-1) !important;
}
 .icon-button.brand-2 svg {
	 fill: var(--fg-color-2) !important;
}
 .icon-button:hover.brand-1 svg {
	 fill: var(--brand-color) !important;
}
 .icon-button:hover.brand-2 svg {
	 fill: var(--brand-color-dark-2) !important;
}
 .brand-link-button {
	 color: var(--fg-color-1);
	 cursor: pointer;
	 user-select: none;
	 text-decoration: underline;
	 transition: color var(--td-m);
}
 .brand-link-button.brand-1 {
	 color: var(--fg-color-1);
}
 .brand-link-button.brand-2 {
	 color: var(--fg-color-2);
}
 .brand-link-button:hover {
	 color: var(--brand-color);
}
 .brand-link-button:hover.brand-1 {
	 color: var(--brand-color);
}
 .brand-link-button:hover.brand-2 {
	 color: var(--brand-color-dark-2);
}
 .link-button-m, .link-button-l {
	 color: var(--fg-color-1);
	 margin: auto 0;
	 cursor: pointer;
	 user-select: none;
	 transition: text-decoration var(--td-m);
}
 .link-button-m.brand-1, .link-button-l.brand-1 {
	 color: var(--fg-color-1);
}
 .link-button-m.brand-2, .link-button-l.brand-2 {
	 color: var(--fg-color-2);
}
 .link-button-m:hover, .link-button-l:hover {
	 text-decoration: underline;
}
 .link-button-m {
	 font-size: var(--fs-m);
}
 .link-button-l {
	 font-weight: bold;
	 font-size: var(--fs-l);
}
 .brand-button-group {
	 display: grid;
	 user-select: none;
	 grid-auto-flow: column;
	 background-color: var(--bg-color-2);
	 border-radius: var(--br-m);
}
 .brand-button-group .button-group-item {
	 display: flex;
	 cursor: pointer;
	 border-radius: inherit;
	 padding: var(--gap-s) var(--gap-m);
	 transition: background-color var(--td-m);
}
 .brand-button-group .button-group-item .button-group-item-text {
	 margin: auto;
	 font-size: var(--fs-m);
	 color: var(--fg-color-1);
	 transition: color var(--td-m);
	 line-height: 0.9;
}
 .brand-button-group .button-group-item.selected {
	 background-color: var(--fg-color-1);
	 cursor: default;
}
 .brand-button-group .button-group-item.selected .button-group-item-text {
	 color: var(--fg-color-2);
}
 .brand-button-group .button-group-item:not(.selected):hover {
	 background-color: var(--fg-color-3);
}
 .brand-card-m, .brand-card-l {
	 background-color: var(--bg-color-3);
	 border-radius: var(--br-m);
	 transition: transform var(--td-m);
}
 .brand-card-m:not(.disabled), .brand-card-l:not(.disabled) {
	 cursor: pointer;
}
 .brand-card-m {
	 padding: var(--gap-m);
}
 .brand-card-l {
	 padding: var(--gap-l);
}
 .card-m, .card-l {
	 background-color: var(--bg-color-2);
	 border-radius: var(--br-m);
	 transition: transform var(--td-m);
}
 .card-m:not(.disabled), .card-l:not(.disabled) {
	 cursor: pointer;
}
 .card-m {
	 padding: var(--gap-m);
}
 .card-l {
	 padding: var(--gap-l);
}
 .case-card {
	 display: flex;
	 position: relative;
	 background-color: var(--bg-color-3);
	 border-radius: var(--br-m);
	 padding: var(--gap-m);
	 background-size: cover;
	 background-position: center;
	 cursor: pointer;
}

.case-card .case-card-content {
	 z-index: 2;
	 min-height: 390px;
}

.case-card .case-card-back {
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 background-color: rgba(0, 0, 0, 0.65);
	 z-index: 1;
	 border-radius: inherit;
	 transition: background-color var(--td-m);
}

.case-card:hover .case-card-back {
	 background-color: rgba(0, 0, 0, 0.2);
}

.brand-tag {
	 padding: var(--gap-xs) var(--gap-s);
	 font-size: var(--fs-m);
	 color: var(--fg-color-1);
	 border: 2px solid var(--fg-color-1);
	 border-radius: var(--br-m);
	 line-height: 0.8;
}

.brand-tag.brand-1 {
	 color: var(--fg-color-1) !important;
	 border: 2px solid var(--fg-color-1) !important;
}

.brand-tag.brand-2 {
	 color: var(--fg-color-2) !important;
	 border: 2px solid var(--fg-color-2) !important;
}