/*FONTS START*/
@font-face {
	font-family: "Xolonium";
	src: url("fonts/woff2/Xolonium-Regular.woff2") format("woff2"),
		 url("fonts/woff/Xolonium-Regular.woff") format("woff"),
		 url("fonts/ttf/Xolonium-Regular.ttf") format("truetype"),
		 url("fonts/otf/Xolonium-Regular.otf") format("otf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Xolonium";
	src: url("fonts/woff2/Xolonium-Bold.woff2") format("woff2"),
		 url("fonts/woff/Xolonium-Bold.woff") format("woff"),
		 url("fonts/ttf/Xolonium-Bold.ttf") format("truetype"),
		 url("fonts/otf/Xolonium-Bold.otf") format("otf");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Meteora";
	src: url("fonts/ttf/Meteora-Light.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Meteora";
	src: url("fonts/ttf/Meteora-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "SpaceMono";
	src: url("fonts/ttf/SpaceMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "SpaceMono";
	src: url("fonts/ttf/SpaceMono-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Regular.woff2") format("woff2"),
		 url("fonts/woff/ApfelGrotezk-Regular.woff") format("woff"),
		 url("fonts/otf/ApfelGrotezk-Regular.otf") format("otf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Fett.woff2") format("woff2"),
		 url("fonts/woff/ApfelGrotezk-Fett.woff") format("woff"),
		 url("fonts/otf/ApfelGrotezk-Fett.otf") format("otf");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Brukt.woff2") format("woff2"),
		 url("fonts/woff/ApfelGrotezk-Brukt.woff") format("woff"),
		 url("fonts/otf/ApfelGrotezk-Brukt.otf") format("otf");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Regular.woff2") format("woff2"),
		 url("fonts/woff/Sentient-Regular.woff") format("woff"),
		 url("fonts/ttf/Sentient-Regular.ttf") format("truetype"),
		 url("fonts/otf/Sentient-Regular.otf") format("otf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Bold.woff2") format("woff2"),
		 url("fonts/woff/Sentient-Bold.woff") format("woff"),
		 url("fonts/ttf/Sentient-Bold.ttf") format("truetype"),
		 url("fonts/otf/Sentient-Bold.otf") format("otf");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-BoldItalic.woff2") format("woff2"),
		 url("fonts/woff/Sentient-BoldItalic.woff") format("woff"),
		 url("fonts/ttf/Sentient-BoldItalic.ttf") format("truetype"),
		 url("fonts/otf/Sentient-BoldItalic.otf") format("otf");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Regular.woff2") format("woff2"),
		 url("fonts/woff/Sentient-Regular.woff") format("woff"),
		 url("fonts/ttf/Sentient-Regular.ttf") format("truetype"),
		 url("fonts/otf/Sentient-Regular.otf") format("otf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Bold.woff2") format("woff2"),
		 url("fonts/woff/Sentient-Bold.woff") format("woff"),
		 url("fonts/ttf/Sentient-Bold.ttf") format("truetype"),
         url("fonts/otf/Sentient-Bold.otf") format("otf");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-BoldItalic.woff2") format("woff2"),
		 url("fonts/woff/Sentient-BoldItalic.woff") format("woff"),
		 url("fonts/ttf/Sentient-BoldItalic.ttf") format("truetype"),
		 url("fonts/otf/Sentient-BoldItalic.otf") format("otf");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-Medium.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-MediumItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
}

/*Xolonium     (NORMAL TITLE    / 400/700)*/
/*ApfelGrotezk (NORMAL TEXT     / 400/700)*/

/*Meteora      (SERIF TITLE     / 400/700)*/
/*Sentient     (SERIF TEXT      / 400/700)*/

/*SpaceMono    (MONOSPACE TITLE / 400/700)*/
/*DMMono       (MONOSPACE TEXT  / 400/700)*/

/*FONTS END*/

/*VARIABLES START*/
:root,
[data-accessibility~="light"] {
	--primary-color: #252525;
	--primary-text-color: #252525;
	--bg-color: #F4F3F2;

	--shade-1: #EBEAE9;
	--shade-2: #BEBDBC;
	--shade-3: #8B8A89;
	--shade-4: #5B5A59;
	--shade-5: #F2F2F4;

	--focus-color: #F08000;
	--error-color: #C1292E;
	--success-color: #7EA16B;
	--info-color: #235789;

	--font-size-small: 0.8rem;		    /*16px*/
	--line-height-small: 1rem;		    /*16px*/
	
	--font-size: 1rem;				    /*20px*/
	--line-height: 1.5rem;			    /*30px*/

	--font-size-medium: 1.25rem;	    /*25px*/
	--line-height-medium: 1.9rem;    	/*38px*/

	--title-1-size: 3.75rem;		    /*75px*/
	--title-1-line: 3.75rem;		    /*75px*/

	--title-2-size: 1.75rem;		    /*35px*/
	--title-2-line: 1.2rem;			    /*24px*/

	--title-3-size: 1.15rem;		    /*23px*/
	--title-3-line: 1.75rem;		    /*35px*/

	--title-4-size: 1rem;			    /*20px*/
	--title-4-line: 1.5rem;			    /*30px*/

	--content-width: 68.3rem;           /* 1366px Default desktop width */

	--mobile-width-small: 16rem;        /* 320px Extra small mobile (e.g., older smartphones) */
	--mobile-width-medium: 24rem;       /* 480px Small mobile */
	--mobile-width: 38.4rem;            /* 768px Regular mobile */
	--tablet-width-small: 48rem;        /* 960px Small tablets */
	--tablet-width: 51.2rem;            /* 1024px Regular tablets */
	--tablet-width-large: 64rem;        /* 1280px Large tablets or smaller laptops */
	--desktop-width-small: 72rem;       /* 1440px Smaller desktops */
	--desktop-width-large: 96rem;       /* 1920px Full HD desktop */
	--desktop-ultrawide: 128rem;        /* 2560px Ultrawide desktop screens */

	--spacing-xx-small: 0.25rem;	    /*5x*/
	--spacing-x-small: 0.5rem;		    /*10px*/
	--spacing-small: 0.75rem;		    /*15px*/
	--spacing-normal: 1rem;			    /*20px*/
	--spacing-medium: 1.25rem;		    /*25px*/
	--spacing-large: 1.5rem;		    /*30px*/
	--spacing-x-large: 1.75rem;		    /*35px*/
	--spacing-xx-large: 2.5rem;		    /*50px*/
	--spacing-xxx-large: 2.75rem;	    /*55px*/

	--letter-spacing-largest: 0.1rem;	/*2px*/
	--letter-spacing-large: 0.075rem;	/*1.5px*/
	--letter-spacing-medium: 0.06rem;	/*1.2px*/
	--letter-spacing-normal: 0.05rem;	/*1px*/
	--letter-spacing-small: 0.025rem;	/*0.5px*/
}

@media (max-width: 48rem) {
	:root,
	[data-accessibility~="light"] {
		--title-1-size: 2.75rem;
		--title-1-line: 2.75rem;

		--title-2-size: 1.4rem;
		--title-2-line: 1.8rem;

		--letter-spacing-normal: 0.025rem;
	}
}

[data-accessibility~="dark"] {
	--primary-color: #DADADA;
	--primary-text-color: #DADADA;
	--bg-color: #252525;

	--shade-1: #3A3A3A;                 /* Slightly lighter for UI borders or highlights */
	--shade-2: #525252;                 /* Mid-gray for neutral elements */
    --shade-3: #7A7A7A;                 /* Muted gray for less important text */
	--shade-4: #A9A9A9;                 /* Lighter gray for subtle elements */
	--shade-5: #1A1A1A;                 /* Darker shade for background contrast */

	--focus-color: #F08000;             /* Bright orange for focus indication */
	--error-color: #FF5E5E;             /* Softer red for errors (to avoid being too harsh) */
	--success-color: #A8E490;			/* Softer green for success feedback */
	--info-color: #82B3FF;              /* Softer blue for informational elements */
}

[data-accessibility~="high-contrast"] {
	--primary-color: #FFFFFF;           /* Bright white for primary UI elements */
	--primary-text-color: #FFFFFF;      /* Pure black for text */
	--bg-color: #000000;                /* Pure black for background */

	--shade-1: #FFFFFF;                 /* Pure white for highlights */
	--shade-2: #E0E0E0;                 /* Bright gray for borders */
	--shade-3: #A0A0A0;                 /* Mid-gray for inactive states */
	--shade-4: #606060;                 /* Darker gray for contrast */
	--shade-5: #000000;                 /* Background-like for deep contrast */

	--focus-color: #FFD700;             /* Bright yellow for focus indication */
	--error-color: #FF0000;             /* Bright red for errors */
	--success-color: #00FF00;           /* Bright green for success */
	--info-color: #00BFFF;              /* Bright cyan for informational elements */
}

[data-accessibility~="narrow"] {
	--content-width: 48rem;             /* 960px */
}

[data-accessibility~="regular"] {
	--content-width: 68.3rem;           /* 1366px */
}

[data-accessibility~="wider"] {
	--content-width: 80rem;             /* 1600px */
}

[data-accessibility~="extra-wide"] {
	--content-width: 96rem;             /* 1920px */
}

[data-accessibility~="unlimited"] {
	--content-width: 100%;
}

[data-accessibility~="small"] {
	--default-font-size: 16px;
}

[data-accessibility~="normal"] {
	--default-font-size: 20px;
}

[data-accessibility~="large"] {
	--default-font-size: 24px;
}

[data-accessibility~="dynamic"] {
	--default-font-size: 100%;
}

html[data-accessibility~="cursor"] {
    cursor: url(cursor-icon-bg.svg), auto;
}

html[data-accessibility~="cursor"] a,
html[data-accessibility~="cursor"] button {
	cursor: url(cursor-hand-icon-bg.svg), pointer;
}

html[data-accessibility~="cursor"] textarea,
html[data-accessibility~="cursor"] input[type="text"],
html[data-accessibility~="cursor"] input[type="email"],
html[data-accessibility~="cursor"] input[type="password"],
html[data-accessibility~="cursor"] p,
html[data-accessibility~="cursor"] ul li {
    cursor: url(text-cursor-icon-bg.svg), pointer;
}
/*VARIABLES END*/

/*COMMON HTML START*/
html {
	display: flex;
	justify-content: center;
	background-color: var(--bg-color);
	color: var(--primary-color);
	font-family: "Xolonium", sans-serif;
	font-size: var(--default-font-size);
	scroll-behavior: smooth;
}

[data-accessibility~="serif"] {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] {
	font-family: SpaceMono, sans-serif;
}

[data-accessibility~="disabled"] {
	scroll-behavior: auto;
}

body {
	position: relative;
	padding: var(--spacing-medium);
	width: 100%;
	max-width: var(--content-width);
}

body[data-mode="blurred"]::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(var(--spacing-x-small));
}

body[data-mode="blurred"] nav::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(var(--spacing-x-small));
}

::-moz-selection {
	color: var(--primary-color);
	background: var(--focus-color);
}

::selection {
	color: var(--primary-color);
	background: var(--focus-color);
}

::-webkit-scrollbar {
	width: var(--spacing-x-small);
}

::-webkit-scrollbar-track {
	background: var(--shade-1);
}

::-webkit-scrollbar-thumb {
	background: var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--shade-3);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Xolonium", sans-serif;
	color: var(--primary-text-color);
}

h1,
h2 {
	font-weight: 700;
}

h3,
h4,
h5,
h6 {
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
	margin-top: var(--spacing-small);
}

h1 {
	font-size: var(--title-1-size);
	line-height: 1;
	margin-bottom: 5px;
}

h2 {
	font-size: var(--title-2-size);
	line-height: var(--title-2-line);
	margin-bottom: var(--spacing-x-small);
}

h2[data-type="wip"] {
	font-family: "Xolonium", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	width: 100%;
	margin-top: var(--spacing-medium);
	margin-bottom: var(--spacing-xx-large);
}

[data-accessibility~="serif"] h1,
[data-accessibility~="serif"] h2,
[data-accessibility~="serif"] h3,
[data-accessibility~="serif"] h4,
[data-accessibility~="serif"] h5,
[data-accessibility~="serif"] h6 {
	font-family: "Meteora", serif;
}

[data-accessibility~="serif"] h2[data-type="wip"] {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] h1,
[data-accessibility~="monospace"] h2,
[data-accessibility~="monospace"] h3,
[data-accessibility~="monospace"] h4,
[data-accessibility~="monospace"] h5,
[data-accessibility~="monospace"] h6 {
	font-family: SpaceMono, sans-serif;
}

[data-accessibility~="monospace"] h2[data-type="wip"] {
	font-family: SpaceMono, sans-serif;
}

@media (max-width: 48rem) {
	h1 {
		font-size: min(15vw, var(--title-1-size));
		line-height: var(--title-1-line);
		margin-bottom: var(--spacing-x-small);
	}

	h2 {
		font-size: var(--title-2-size);
		line-height: var(--title-2-line);
		margin-bottom: 8px;
	}

	h2[data-type="wip"] {
		font-size: 30px;
		margin-top: var(--spacing-normal);
		margin-bottom: 40px;
	}

	h3 {
		font-size: var(--font-size);
		margin-top: var(--spacing-x-small);
	}

	h4 {
		font-size: 18px;
		margin-top: var(--spacing-x-small);
	}

	h5,
	h6 {
		font-size: 16px;
		margin-top: 8px;
	}
}

p,
ul li {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
}

[data-accessibility~="serif"] p,
[data-accessibility~="serif"] ul li {
	font-family: "Sentient", serif;
}

[data-accessibility~="monospace"] p,
[data-accessibility~="monospace"] ul li {
	font-family: "DMMono", sans-serif;
}

[data-accessibility~="spacing"] p,
[data-accessibility~="spacing"] ul li {
	letter-spacing: var(--letter-spacing-largest);
	word-spacing: 0.25rem;
}

[data-accessibility~="line"] p,
[data-accessibility~="line"] ul li {
	line-height: 1.75;
}

#main p:not(:last-child),
main p:not(:last-child) {
    margin-bottom: var(--spacing-small);
}

#main p:last-of-type,
#main p:last-of-type {
    margin-bottom: 0;
}

main {
	position: relative;
}

main ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

main li {
    padding-left: var(--spacing-x-large);
    text-indent: -27px;
	line-height: 2;
}

main li:before {
	font-family: "Xolonium", sans-serif;
	content: "●";
	padding-right: var(--spacing-x-small);
}

blockquote {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding-left: var(--spacing-xxx-large);
	padding-top: var(--spacing-small);
	padding-bottom: var(--spacing-small);
}

blockquote::before {
	content: '⚡';
	font-family: "Xolonium", sans-serif;
	position: absolute;
	left: 0;
	margin-bottom: var(--spacing-small);
	font-size: 55px;
}

blockquote p {
	font-family: "Xolonium", sans-serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--primary-text-color);
	margin-bottom: var(--spacing-small);
	border-left: 2px solid var(--primary-color);
	padding-left: var(--spacing-small);
}

[data-accessibility~="serif"] blockquote p {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] blockquote p {
	font-family: SpaceMono, sans-serif;
}

a[href]:not(:where(
	[href^="#"],
	[href^="/"]:not([href^="//"]),
	[href^="mailto:"],
	[href^="tel:"],
	[href^="https://studioaugustine.test"],
    [href^="https://www.studioaugustine.test/"],
	[href^="https://www.studioaugustine.ee/"],
	[href^="https://studioaugustine.ee/"],
	[href*="javascript:void(0);"],
	[data-type="main-title-navigation"] > a,
    figure > a,
	[data-type="portfolio-item"] > a,
	.feed-image,
)):after {
 	content: "↗";
}

a {
	font-weight: 700;
	color: var(--primary-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--focus-color);
}

a:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 1px;
}

a[data-type="disabled"] {
    pointer-events: none;
}

[data-accessibility~="links"] a {
	background-color: var(--info-color);
}

[data-accessibility~="links"] a:hover {
	color: var(--primary-color);
}

figure {
	padding-top: var(--spacing-medium);
	padding-bottom: var(--spacing-small);
}

figure a:focus-visible img {
	outline: 2px solid var(--focus-color);
	outline-offset: 5px;
}

/*Disable user-select START*/
img,
button,
a[data-button]{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
}

/*:focus-visible {
	outline: 2px solid red;
	outline-offset: var(--spacing-xx-small);
	border-radius: 1px;
    transform: scale(1.05);
    transition-duration: 250ms;	
}*/
/*Disable user-select END*/

img,
.sl-wrapper .sl-image img {
	border-radius: 10px;
}

.sl-wrapper {
    background-color: rgba(211, 211, 211, 0.5);
    z-index: 9999;
}

figcaption {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);	
	margin-top: var(--spacing-x-small);
    padding-left: var(--spacing-x-small);
}

hr {
	margin-top: var(--spacing-x-large);
	margin-bottom: var(--spacing-x-large);
	border-top: 2px solid var(--primary-color);
}

hr[data-type="navbar"] {
	margin-top: var(--spacing-small);
	margin-bottom: var(--spacing-small);
}

hr[data-type="chart"] {
	margin-top: var(--spacing-x-large);
	margin-bottom: 15px;
}

main hr {
	border-top: 1px solid rgba(37, 37, 37, 0.25);
}

.sa-content + hr {
	border-top: 2px solid var(--primary-color);
}

main hr + [data-type="image-set"] figure {
	padding-top: 5px;
}

br {
	margin-top: var(--spacing-medium);
	margin-bottom: var(--spacing-medium);
}

[data-type~="hidden"] {
    display: none!important;
}

[data-type~="shown"] {
    display: block;
}

[data-button~="default"],
[data-button~="secondary"] {
	font-size: var(--font-size-medium);
	line-height: var(--line-height-medium);
    font-weight: 400;
	padding: var(--spacing-xx-small) var(--spacing-small);
	border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
	text-align: center;
	transition-duration: 250ms;
}

[data-button~="default"] {
    background-color: var(--primary-color);
	color: var(--bg-color);
    border: none;
}

[data-button~="secondary"] {
    background-color: var(--bg-color);
	color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

[data-button~="close"] {
	position: fixed;
    right: 25px;
    top: 25px;
    height: 50px;
    width: 50px;
    border: 2px solid var(--focus-color)!important;
    background-color: var(--bg-color)!important;
    border-radius: 15px;
    padding: 10px!important;
    margin-top: 0;
    margin-right: 0;
	z-index: 9999;
	border: 2px solid var(--focus-color);
}

[data-button~="inverted"] {
    background-color: var(--bg-color);
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
}

[data-button~="default"]:hover,
[data-button~="secondary"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

[data-button~="default"]:hover {
	color: var(--bg-color);
}

[data-button~="secondary"]:hover {
	color: var(--primary-color);
}

[data-button~="inverted"]:hover {
    background-color: var(--primary-color);
	color: var(--bg-color);
	border: 2px solid var(--bg-color);
}

[data-button~="default"]:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 4px!important;
	transform: scale(1.05);
	transition-duration: 250ms;
}

:disabled[data-button~="default"] {
	opacity: 0.5;
	cursor: default;
}

:disabled[data-button~="default"]:hover {
	transform: scale(1);
}

[data-accessibility~="button"] [data-button~="default"] {
	font-size: 32px;
	padding: var(--spacing-small) var(--spacing-x-large);
}
/*COMMON HTML END*/

/*JQUERY UI RESET START*/
.ui-tabs .ui-tabs-panel {
	padding: unset;
}
/*JQUERY UI RESET END*/

/*HEADER HTML START*/
[data-type="skip-to-main"] {
	position: absolute;
	top: -200px;
    left: 50%;
	transform: translate(-50%, 0);
    width: fit-content;
	min-width: 540px;
	height: auto;
	z-index: -999;
	opacity: 0;
	visibility: hidden;
}

[data-type="skip-to-main"]:focus,
[data-type="skip-to-main"]:focus-visible,
[data-type="skip-to-main"]:active {
	top: var(--spacing-large);
	transform: scale(1) translate(-50%, 0);
    z-index: 9999;
	opacity: 1;
	visibility: visible;
}

[data-type="skip-to-main"]:hover {
	transform: scale(1) translate(-50%, 0);
	transition-duration: 250ms;
}

@media only screen and (max-width: 40rem) {
	[data-type="skip-to-main"] {
		min-width: unset;
		opacity: 0;
		visibility: hidden;
	}

	[data-type="skip-to-main"]:focus,
	[data-type="skip-to-main"]:focus-visible,
	[data-type="skip-to-main"]:active {
		opacity: 0;
		visibility: hidden;
	}
}

header {
	position: relative;
	z-index: 9999;
}

header > nav > ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-inline-start: 0;
	list-style-type: none;
	width: 100%;
}

header > nav > ul > li {
	display: flex;
	column-gap: var(--spacing-medium);
	align-items: flex-start;
	width: fit-content;
}

header > nav > ul > li > a {
	text-decoration: none;
}

header > nav > ul > li > a > p {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.25s linear;
	font-family: "Xolonium", sans-serif;
	color: var(--primary-color);
	transition-duration: 250ms;
}

[data-accessibility~="serif"] header > nav > ul > li > a > p {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] header > nav > ul > li > a > p {
	font-family: SpaceMono, sans-serif;
}

header > nav > ul > li > a:hover > p,
header > nav > ul > li > a:focus-visible > p {
	visibility: visible;
	opacity: 1;
	transition-duration: 250ms;
}

header > nav > ul > li > a:first-child {
	align-self: flex-start;
}

img[data-type="back-button"] {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition-duration: 250ms;
}

img[data-type="back-button"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

header > nav > ul > li > a:first-child img {
	width: 100%;
	max-width: 75px;
}

[data-accessibility~="dark"] header > nav > ul > li > a:first-child img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] header > nav > ul > li > a:first-child img {
	filter: invert(1) contrast(200%);
}

header > nav > ul > li:nth-child(2) {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: var(--spacing-medium);
	font-family: "ApfelGrotezk", sans-serif;
}

[data-accessibility~="serif"] header > nav > ul > li:nth-child(2) {
	font-family: "Sentient", serif;
}

[data-accessibility~="monospace"] header > nav > ul > li:nth-child(2) {
	font-family: "DMMono", sans-serif;
}

header > nav > ul > li:nth-child(2) div:first-child {
	display: inherit;
	text-align: end;
}

header > nav > ul > li:nth-child(2) div:first-child p,
header > nav > ul > li:nth-child(2) div:first-child a {
	font-size: 16px;
	font-weight: 700;
	text-align: end;
	text-decoration: none;
	color: var(--primary-color);
	letter-spacing: 1.5px;
}

header > nav > ul > li:nth-child(2) div:nth-child(2) p {
	font-size: 16px;
	color: var(--focus-color);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="SAlogo"] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: fit-content;
	gap: var(--spacing-x-small);
}

[data-type="SAlogo"] p {
	line-height: 1;
}

[data-type="backButton"] {
	width: 100%;
	max-width: 75px;
	height: auto;
}

[data-logo="brand"] + p {
	display: none;
}

header > nav > ul > li:nth-child(2) div:first-child a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media only screen and (max-width: 40rem) {
	header > nav > ul {
		flex-direction: column;
		row-gap: var(--spacing-medium);
	}

	header > nav > ul > li:nth-child(2) {
		align-self: flex-end;
	}	
	
	[data-type="SAlogo"] p,
	header > nav > ul > li > a > p {
		display: none;
	}	
}

@media only screen and (max-width: 51.2rem) {
	header > nav > ul > li:nth-child(2) div {
		display: none;
	}
	
	header > nav > ul > li:nth-child(2) {
		column-gap: 0;
	}	
}

@media only screen and (max-width: 38.4rem) {
	[data-type="backButton"] {
		display: none;
	}
}

/* Portfolio START */
[data-type="portfolio"],
[data-type="games"] {
	display: grid;
	gap: var(--spacing-normal);
	margin-top: var(--spacing-medium);
	margin-bottom: var(--spacing-large);
}

[data-type="portfolio"][data-category~="brand"] {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

[data-type="games"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

@media only screen and (min-width: 24rem) {
	[data-accessibility~="narrow"] [data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr;
	}
}

@media only screen and (min-width: 38.4rem) {
	[data-accessibility~="narrow"] [data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (min-width: 64rem) {
	[data-accessibility~="narrow"] [data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 96rem) {
	[data-accessibility~="extra-wide"] [data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="extra-wide"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 96rem) {
	[data-accessibility~="unlimited"] [data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="unlimited"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 128rem) {
	[data-accessibility~="unlimited"] [data-type="portfolio"][data-category~="brand"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

[data-accessibility~="button"] [data-type="portfolio"][data-category~="brand"] {
	grid-template-columns: 1fr 1fr 1fr;
}

[data-type="portfolio"][data-category="beyond"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

[data-accessibility~="button"] [data-type="portfolio"][data-category="beyond"] {
	grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 68.3rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr 1fr;
	}

	nav ul {
		display: none;
	}
}

@media only screen and (max-width: 24rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr;
	}
}
/* Portfolio END */

[data-type="portfolio-item"] img,
[data-type="games"] img {
	border-radius: 15px;
}

[data-type="games"] img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

[data-accessibility~="dark"] [data-type="portfolio-item"] img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type="portfolio-item"] img {
  	filter: invert(1) contrast(200%);
	border: 2px solid var(--primary-color);
}

[data-type="portfolio-item"] img:hover,
[data-type="game"] img:hover {
	transform: scale(1.02);
	cursor: pointer;
}

[data-type="portfolio"] img,
[data-type="games"] img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="portfolio"] a:focus-visible img {
	transform: scale(1.02);
	outline: 2px solid var(--focus-color);
	outline-offset: var(--spacing-xx-small);
	border-radius: 17px;
	transition-duration: 250ms;
}

.contact-container p,
.contact-container a {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: 1px;
}

.contact-container a {
	color: var(--focus-color);
	text-decoration: none;
}

.contact-container {
	padding: var(--spacing-normal);
	text-align: right;
	margin-right: var(--spacing-x-small);
}

@media only screen and (max-width: 48rem) {
	.contact-container {
		display: none;
	}
}

.footer-contact-container p, .footer-contact-container a {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: 1px;
}

.footer-contact-container a {
	color: var(--focus-color);
	text-decoration: none;
}

.footer-contact-container {
	text-align: left;
	padding: var(--spacing-normal);
	margin-bottom: var(--spacing-medium);
	margin-left: var(--spacing-x-small);
}

@media only screen and (min-width: 961px) {
	.footer-contact-container {
		display: none;
	}
}

@media only screen and (max-width: 460px) {
	.footer-contact-container {
		text-align: center;
		margin-left: 0;
	}
}

[data-type="footer-credits"] {
	display: flex;
	flex-direction: column;
	gap: 0;	
	text-align: center;
}

[data-type="footer-credits"] span {
    white-space: nowrap;
}

@media only screen and (max-width: 460px) {
	[data-type="footer-credits"] {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}

[data-type="info-box"] {
	text-align: center;
}

[data-button="back-to-top"] {
    display: none;
    position: fixed;
    bottom: var(--spacing-medium);
    right: var(--spacing-x-large);
	gap: var(--spacing-x-small);
	padding: var(--spacing-x-small) var(--spacing-medium) var(--spacing-x-small) var(--spacing-medium);
	width: fit-content;
	height: fit-content;
	font-size: 16px;
	letter-spacing: 1px;
	cursor: pointer;
	background-color: #252525;
	color: #F4F3F2;
	border: 2px solid #F4F3F2;
	border-radius: 5px;
}

[data-accessibility~="button"] [data-button="back-to-top"] {
	padding: var(--spacing-small) var(--spacing-x-large) var(--spacing-small) var(--spacing-x-large);
}

@media only screen and (max-width: 1366px) {
	[data-button="back-to-top"] {
		right: var(--spacing-medium);
	}
}

[data-type="logo-image"] {
	width: 100%;
	border-radius: unset;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-accessibility~="dark"] [data-type="logo-image"] {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type="logo-image"] {
	filter: invert(1) contrast(200%);
}

[data-logo~="brand"] {
	max-width: unset!important;
}

[data-logo~="sa"] {
	height: 62px;
	width: auto;
	max-width: fit-content;
}

[data-logo~="saplus"] {
	height: 84px;
	width: auto;
	max-width: fit-content;
}

[data-logo~="saplustop"] {
	height: 80px;
	width: auto;
	max-width: fit-content;
	margin-top: -18px;
}

[data-type="explore-further"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 25px;
}

footer hr:first-child {
	margin-top: var(--spacing-x-large);
	margin-bottom: var(--spacing-medium);
}

footer hr:nth-of-type(2) {
	margin-top: 32px;
	margin-bottom: 45px;
}

[data-type="explore-further"] span {
	font-size: 50px;
	font-family: "Xolonium", sans-serif;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media only screen and (max-width: 38.4rem) {
	[data-type="explore-further"] {
		flex-direction: column;
		gap: 25px;
	}

	[data-type="explore-further"] a {
		width: 100%;
	}

	[data-type="explore-further"] span {
		display: none;
	}

	.ui-helper-clearfix:before, .ui-helper-clearfix:after {
		display: none;
	}
}

[data-type="footer"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
	margin-bottom: 50px;
}

[data-button~="icon"] {
	padding: 0;
	margin: 0;
	background-color: unset;
	border: none;
	cursor: pointer;
	transition-duration: 250ms;
	width: 50px;
	height: auto;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-accessibility~="dark"] [data-button~="icon"] {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-button~="icon"] {
	filter: invert(1) contrast(200%);
}

.main-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	position: relative;
	text-indent: -5px;
	text-indent: -5px each-line;
}

.main-accessibility {
	display: flex;
	flex-direction: row;
	gap: 25px;
}

.main-accessibility [data-button~="icon"]:hover,
.main-accessibility [data-button~="icon"]:focus-visible {
	transform: scale(1.05);
	transition-duration: 250ms;	
}

.main-accessibility [data-button~="icon"]:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 10px;
}

@media only screen and (max-width: 48rem) {
	.main-title {
		align-items: flex-start;
	}
}

@media only screen and (max-width: 38.4rem) {
	.main-title #main {
		order: 2;
		border-top: 1px solid rgba(37, 37, 37, 0.25);
		padding-top: 10px;
		width: 100%;
	}
	
	.main-title .main-accessibility {
		order: 1;
		justify-content: flex-end;	
		width: 100%;
	}
	
	[data-page~="project"] .main-accessibility {
		border-top: 1px solid rgba(37, 37, 37, 0.25);
		margin-top: 10px;
		padding-top: 20px;		
	}
	
	.main-title {
		flex-direction: column;
	}

	.main-accessibility {
		gap: 15px;
	}

	.main-accessibility [data-button~="icon"] {
		width: 40px;
	}
}

[data-accessibility~="button"] [data-button~="icon"] {
	width: 80px;
	height: auto;
}

[data-type="footer"] > a:hover {
	color: var(--bg-color);
}

[data-type="footer"] button:focus-visible,
[data-type="footer"] a:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 1px;
	transition-duration: 250ms;
}

[data-type="footer"] a,
[data-type="navigation-explore"],
[data-type="navigation-deeper"],
[data-type="navigation-reverse"],
[data-type="navigation-forward"] {
	transition-duration: 250ms;
}

[data-type="footer"] a:hover,
[data-type="footer"] a:focus-visible,
[data-type="footer"] button:hover,
[data-type="footer"] button:focus-visible,
[data-type="navigation-explore"]:hover,
[data-type="navigation-deeper"]:hover,
[data-type="navigation-reverse"]:hover,
[data-type="navigation-forward"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

[data-type="footer"] a[data-type="contacts"]::before {
	content: '🌍 ';
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-reverse"]::before {
	content: '← 😃';
	font-family: "Xolonium", sans-serif;
	margin-right: var(--spacing-xx-small);
}

[data-type="navigation-forward"]::after {
	content: '😛 →';
	font-family: "Xolonium", sans-serif;
	margin-left: var(--spacing-xx-small);
}

[data-type="navigation-explore"]::before {
	content: '← 😃';
	font-family: "Xolonium", sans-serif;
	margin-right: var(--spacing-xx-small);
}

[data-type="navigation-deeper"]::after {
	content: '😊 →';
	font-family: "Xolonium", sans-serif;
	margin-left: var(--spacing-xx-small);
}

[data-type="navigation-explore"]:hover::before,
[data-type="navigation-explore"]:focus-visible::before {
	content: '← 😇';
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-deeper"]:hover::after,
[data-type="navigation-deeper"]:focus-visible::after {
	content: '😁 →';
	font-family: "Xolonium", sans-serif;
}

[data-type="footer"] a[data-type="contacts"]:hover::before,
[data-type="footer"] a[data-type="contacts"]:focus-visible::before {
	content: '🌎 ';
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-reverse"]:hover::before,
[data-type="navigation-reverse"]:focus-visible::before {
	content: '← 😉';
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-forward"]:hover::after,
[data-type="navigation-forward"]:focus-visible::after {
	content: '😝 →';
	font-family: "Xolonium", sans-serif;
}

[data-type="flex-row-wrap"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
}

[data-type="contact"] {
	margin-top: 10px;
}

[data-type="contact-grid"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xx-small);
}

[data-type="contact-item"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
}

[data-type="contact-item"] p {
	font-size: 18px;
	width: fit-content;
	margin: 0!important;
}

[data-type="contact-item"] p:first-child {
	color: var(--focus-color);
	width: 150px;
	text-align: end;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="contact-item"] p:last-child {
	font-weight: 700;
	letter-spacing: 1.2px;
	text-align: start;
}

@media only screen and (max-width: 48rem) {
	[data-type="contact-item"] {
		display: block;
	}

	[data-type="contact-item"] p:first-of-type {
		text-align: start;
	}
}

#scrollAccess,
#accessibilityButton a,
#accessibilityButtonFooter a {
	cursor: pointer;
}

/*EASY-TO-READ START*/
[data-type~="easy-content"] {
	padding: var(--spacing-medium)!important;
	border: 2px solid #252525!important;
	border-radius: 15px;
	width: fit-content;
	margin-top: var(--spacing-x-large);
}

[data-type~="easy-to-read"] {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0!important;
	margin-bottom: 40px;
}

[data-type~="easy-to-read"] ul {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 25px;
	padding: 0!important;
}

[data-type~="easy-content"] ul {
	display: block;
}

[data-type~="easy-to-read"] > ul > li::before {
	display: none;
}

[data-type~="easy-to-read"] > ul > li > a {
	padding: 0!important;
}

[data-accessibility~="dark"] [data-type~="easy-to-read"] > ul > li > a {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type~="easy-to-read"] > ul > li > a {
	filter: invert(1) contrast(200%);
}

[data-type~="easy-to-read"] > ul > li:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 7px;
}

[data-type~="easy-to-read"] > ul > li > a {
	background-color: #252525;
	border-radius: 15px;
	cursor: pointer;
}

[data-type~="easy-to-read"] > ul > li > a > img {
	height: 80px;
	width: auto;
	border-radius: 15px;
}

[data-type~="easy-to-read"] > ul > li {
	margin: 0;
}

@media only screen and (max-width: 38.4rem) {
	[data-type~="easy-to-read"] ul {
		flex-direction: column-reverse;
	}

	[data-type~="easy-to-read"] > ul > li {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	[data-type~="easy-to-read"] > ul > li > a {
		background-color: #252525;
		border-radius: 15px;
		cursor: pointer;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	[data-type~="easy-to-read"] > ul > li::before {
		display: none;
	}
}
/*EASY-TO-READ END*/

/*BREADCRUMBS START*/
nav[aria-label="breadcrumb"] {
	margin-bottom: var(--spacing-xx-small);
}

nav[aria-label="breadcrumb"] ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-small);
	row-gap: 0;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li {
	font-size: 18px;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li a {
	text-decoration: none;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li.breadcrumb-separator {
	font-size: var(--font-size-medium);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*BREADCRUMBS END*/

/*SITEMAP START*/
[data-type="sitemap"] {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

[data-type="sitemap"] li {
    padding-left: 35px;
    text-indent: -27px;
	line-height: 1.55;
}

[data-type="sitemap"] li:before {
	font-family: "Xolonium", sans-serif;
	content: "●";
	padding-right: 10px;
}

[data-type="sitemap"] li a {
    text-decoration: none;
}
/*SITEMAP END*/

#scrollAccess {
	position: fixed;
	right: var(--spacing-medium);
	top: var(--spacing-medium);
	opacity: 0;
	visibility: hidden;
	z-index: 9998;
}

#scrollAccess img {
	width: 50px;
	height: auto;
	border: 2px solid #F4F3F2;
	background: #252525;
	border-radius: 15px;
}

#scrollAccess.show {
	opacity: 1;
	visibility: visible;
}

.ui-tooltip {
	font-size: 16px;
	text-wrap: nowrap;
	text-transform: uppercase;
	text-align: center;
	color: var(--primary-text-color);
	background-color: var(--bg-color);
	padding: 10px 15px;
	border: 2px solid var(--primary-color);
	border-radius: 5px;
}

ul {
	list-style-type: none;
}

sitemap ul li:before {
	width: 24px;
	height: 24px;
	padding: 5px;
	position: relative;
	counter-increment: item;
	content: "▶";
	color: #252525;
	font-size: 20px;
	line-height: 16px;
	font-weight: 400;
}

@media only screen and (max-width: 48rem) {
	.ui-tooltip {
		display: none;
		opacity: 0;
		visibility: hidden;
	}
}

[data-accessibility~="button"] .ui-tooltip {
	font-size: var(--font-size);
	z-index: 9997;
}

[data-type="accessibility"] {
	display: none;
	position: fixed;
	z-index: 9998;
	background-color: var(--bg-color);
	overflow: auto;
}

[data-accessibility~="navbar"] [data-type="accessibility"] {
	bottom: 0;
	left: 0;
	width: 100vw;
	height: fit-content;
	max-height: 100vh;
	border-top: 2px solid var(--primary-color);
}

[data-accessibility~="sidebar"] [data-type="accessibility"] {
	top: 0;
	right: 0;
	width: fit-content;
	max-width: 690px;
	height: 100vh;
	max-height: 100vh;
	border-left: 2px solid var(--primary-color);
}

[data-type="accessibility"] > div {
	width: 100%;
	max-width: var(--content-width);
	padding: var(--spacing-medium);
	margin-block-start: 1em;
	margin-inline-end: 10px;
}

[data-type="accessibility"] > div > div {
	padding-bottom: 40px;
}

[data-type="accessibility"] label {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	letter-spacing: 1px;
}

[data-type="accessibility"] h3 {
	font-size: var(--font-size);
	margin-bottom: var(--spacing-xx-small);
}

[data-accessibility~="button"] .ui-button {
	font-size: var(--font-size-medium);
	padding: var(--spacing-small) var(--spacing-x-large);
}

.ui-checkboxradio-icon-space {
	margin-left: 0;
	margin-right: 0;
}

[data-accessibility~="button"] .ui-checkboxradio-icon-space {
	margin-left: 2px;
	margin-right: 2px;
}

[data-type~="banner"] {
	background-color: #252525;
	color: #f4f3f2;
	padding: 25px 15px;
	text-align: center;
	border: 2px solid #F4F3F2;
	border-radius: 15px;
	line-height: 1;
}

[data-type~="cookie"] {
	position: fixed;
	left: 35px;
	bottom: 25px;
	width: 400px;
	background-color: #252525;
	color: #f4f3f2;
}

@media only screen and (max-width: 48rem) {
	[data-type~="cookie"] {
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
	}
}

[data-type~="cookie"] p {
	margin-bottom: 25px;
}

#cookie-banner[data-type*="available"] {
    display: block;
}

#cookie-banner[data-type*="disabled"] {
    display: none;
}

[data-chat~="chatbot-prefill"] {
	display: flex;
	flex-direction: row;
	gap: 15px;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	transition-duration: 1000ms;
}

[data-chat~="chatbot-prefill"] li {
	width: 100%;
	border: 2px solid #252525;
	border-radius: 5px;
	padding: 15px;
	cursor: pointer;
	transition: transform 250ms;
	will-change: transform;
	background-color: var(--bg-color);
	z-index: 1;
}

[data-chat~="chatbot-prefill"] li::before {
	content: "";
	padding-right: 35px;
}

[data-chat~="chatbot-prefill"] li:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
	z-index: 2;
}

[data-entity~="user"],
[data-entity~="bot"] {
    display: flex;
	flex-direction: row;
    gap: 5px;
}

[data-entity~="user"]:nth-child(2) {
	display: none;
}

[data-entity~="user"]::before {
  	content: 'YOU: ';
	color: var(--error-color);
	margin-right: -1px;
}

[data-entity~="bot"]::before {
  	content: 'SAB: ';
	color: var(--info-color);
}

[data-chat~="chatbot-box"] {
	height: 100%;
	max-height: calc(100vh - 608px);
	border: 2px solid #252525;
	border-radius: 5px;
	margin-top: 15px;
	margin-bottom: 25px;
	padding: 25px;
	background-color: var(--shade-5);
	overflow: auto;
	transition-duration: 1000ms;
}

[data-chat~="chatbot-input"] {
	display: flex;
	gap: 25px;
}

[data-chat~="chatbot-input"] input {
	padding: 25px;
	width: 100%;
	border: 2px solid #252525;
	border-radius: 5px;
	background-color: var(--shade-5);
}

[data-chat~="chatbot-input"] button {
	width: fit-content;
	min-width: 150px;
}

[data-type="site-status"] [role="tablist"] h3 {
    padding: 5px 5px 5px 0;
}

[data-type="site-status"] .ui-accordion-content  {
	padding: 5px 0 0 25px;
}

[data-type="site-status"] p  {
	margin-bottom: 0!important;
}

[data-type="site-status"] [role="tablist"] h3::before {
	font-family: "Xolonium", sans-serif;
    content: "●";
    padding-right: var(--spacing-x-small);
}

#rssContainer {
	display: none;
}

.feed-item {
	display: flex;
	gap: 25px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}

.feed-title {
	font-size: var(--font-size);
	font-weight: bold;
}

.feed-date {
	font-size: 12px;
	color: gray;
}

.feed-description {
	margin: 10px 0;
}

.feed-image {
	width: fit-content;
}

.feed-content {
	width: 100%;
}

.feed-image img {
    width: 480px;
    max-width: 480px;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.checkbox-container {
	margin-bottom: 20px;
}

.checkbox-container label {
	margin-right: 10px;
}

.ui-button {
	border: 2px solid var(--primary-color);
	border-radius: 5px;
	padding: 11px 15px;
	margin-right: unset;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: unset;
	border: 2px solid var(--primary-color);
}

.ui-icon-background {
	background-color: var(--bg-color);
	width: 16px!important;
	height: 16px!important;
	color: green;
}

.ui-state-active .ui-icon-background {
	color: var(--focus-color);
}

.ui-checkboxradio-label {
	background-color: var(--bg-color);
	color: var(--primary-color);
}

.ui-checkboxradio-label.ui-checkboxradio-checked {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

.ui-checkboxradio-checked .ui-icon-background {
	color: var(--bg-color);
	background-color: var(--primary-color);
	border: unset;
}

.ui-icon-check {
	position: relative;
}

.ui-icon-check::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	color: green;
	width: 16px;
	height: 16px;
	border: 2px solid var(--bg-color);
}

.ui-button .ui-icon {
	background-image: url("checked.svg");
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
}

.accessibility-container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
}

.essential_audio {
	opacity: 0;
	visibility: hidden;
	margin-top: 0;
	margin-bottom: 0;
}

[data-type~="easy-to-listen"] {
	width: 100%;
}

[data-type~="easy-to-listen"] .essential_audio {
	opacity: 1;
	visibility: visible;
}

[data-img~="blurOnLoad"] {
	filter: blur(10px);
	transition: filter 0.5s ease-out;
	margin: -5px -10px -10px -5px;
	background-color: #252525;
	transition-duration: 1000ms;
}

[data-img~="square"] {
	width: 100%;
	aspect-ratio: 1 / 1;
}

[data-img~="banner"] {
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

[data-img~="banner"] {
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

@media only screen and (max-width: 48rem) {
	[data-img~="banner"] {
		width: 100%;
		aspect-ratio: 4 / 2;
		object-fit: cover;
	}
}

[data-img~="landscape"] {
	width: 100%;
	height: auto;
}

[data-img~="imgLoaded"] {
	filter: unset;
	background-color: unset;
	margin: unset;
	transition-duration: 1000ms;
}

.sl-wrapper .sl-close {
	right: 25px;
	top: 25px;
	height: 50px;
	width: 50px;
	border: 2px solid var(--focus-color);
	background-color: var(--bg-color);
	border-radius: 15px;
	padding: 10px;
	margin-top: 0;
	margin-right: 0;
}

table {
	border: 1px solid #000;
}

table,
tr {
	height: fit-content;
}

[data-type="image-set"][data-layout="multi"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="dual"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="triple"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="quad"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 25px;
}

@media only screen and (max-width: 48rem) {
	[data-type="image-set"][data-layout="dual"],
	[data-type="image-set"][data-layout="triple"] {
		display: flex;
		flex-direction: column;
		gap: unset;
	}
	
	[data-type="image-set"][data-layout="multi"],
    [data-type="image-set"][data-layout="quad"]	{
		grid-template-columns: 1fr 1fr;
	}	
}

[data-type="main-title-navigation"] {
	display: flex;
	gap: 25px;
}	

@media only screen and (max-width: 38.4rem) {
	[data-type="main-title-navigation"] {
		display: flex;
		gap: 15px;
	}	
}

hr[data-type="dark"] {
	border-top: 2px solid var(--primary-color);
}

hr[data-type="light"] {
	border-top: 1px solid rgba(37, 37, 37, 0.25);
}

.link-tooltip,
[data-tooltip="status-bar"] {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: fit-content;
	padding: 10px;
	background-color: #F4F3F2;
	border-top: 2px solid #252525;
	border-right: 2px solid #252525;
	border-top-right-radius: 15px;
	z-index: 9999;
	color: #252525;
	transition: opacity 200ms, transform 200ms;
	transform: translateY(10px); /* Optional for a slide-in effect */
	margin-bottom: 0!important;
	font-weight: 400;
}

[data-tooltip="status-bar"] span,
.link-tooltip span {
	text-decoration: underline;
	text-underline-offset: 6px;
}

[data-tooltip="status-bar"] span:after,
.link-tooltip span:after {
	content: " ↗";
}

[data-anchor="button"] > li:hover > [data-tooltip="status-bar"],
[data-type="portfolio"] a:hover > .link-tooltip,
[data-type="portfolio"] a:hover > [data-tooltip="status-bar"],
[data-type="portfolio"] a:focus-visible > .link-tooltip,
[data-type="explore-further"] a:hover + .link-tooltip,
[data-type="main-title-navigation"] a:hover + .link-tooltip,
[data-type="games"] a:hover > .link-tooltip,
[data-type="entertainment-poster"] a:hover > [data-tooltip="status-bar"],
[data-type="games"] a:hover > [data-tooltip="status-bar"]  {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

[data-accessibility~="tooltipsOFF"] .link-tooltip {
	display: none!important;
}

@media only screen and (max-width: 48rem) {
	.link-tooltip {
		display: none!important;
	}	
}

[data-anchor="button"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	row-gap: 20px;
}

[data-anchor="button"] li {
	display: flex;
	flex-direction: row;
	align-items: center;	
	background-color: #252525;
	border-radius: 5px;
	text-indent: unset;
	padding-left: unset;
}

[data-anchor="button"] li a {
	height: 100%;
	padding: 0 14px;
	color: rgba(37, 37, 37, 0.5);
	cursor: default;
	border: 2px solid #252525;
	border-left: unset;
	background-color: #F4F3F2;
	border-radius: 5px;
	border-top-left-radius: unset;	
	border-bottom-left-radius: unset;	
	display: block;
	text-decoration: none;
}

[data-anchor="button"] li label {
	border-top-right-radius: unset;	
	border-bottom-right-radius: unset;	
}

[data-anchor="button"] li label.ui-checkboxradio-checked + a {
	color: #252525;
	cursor: pointer;
}

[data-anchor="button"] li::before {
	display: none;
}

nav a {
	cursor: pointer;
}

[data-type="search"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

[data-type="search"] input {
	flex: 1;
	border: 1px solid #252525;
	padding: 9px 17px;
	border-radius: 5px;
}

[data-type="search"] input:focus-visible {
	outline: unset;
	border: 2px solid #252525;
	padding: 8px 16px;
}

[data-type="search"] button {
	outline: unset;
	padding: 8px 16px;
	border-radius: 5px;
	cursor: pointer;
}

[data-type="search"] button {
	color: #F4F3F2;
	background-color: #252525;
	border: 2px solid #252525;
}	

[data-type="search"] button#clearSearch {
	color: #252525;
	background-color: #F4F3F2;
	border: 2px solid #252525;
}				

[data-type="search"] button:hover {
	color: #252525;
	background-color: #F4F3F2;
}

[data-type="search"] button#clearSearch:hover {
	color: #F4F3F2;
	background-color: #252525;
}

[data-type="upcoming-shows"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
} 

@media only screen and (max-width: 72rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr 1fr 1fr;
	} 
}

@media only screen and (max-width: 48rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr 1fr;
	} 
}

@media only screen and (max-width: 38.4rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr;
	} 
}

[data-type="favorite-shows"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 20px;
}     

@media only screen and (max-width: 72rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	} 
}

@media only screen and (max-width: 48rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr 1fr;
	} 
}

@media only screen and (max-width: 38.4rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr;
	} 
}

[data-type="upcoming-shows"] li,
[data-type="favorite-shows"] li {
	padding-left: unset;
	text-indent: unset;
	line-height: unset;
}                

[data-type="upcoming-shows"] li::before,
[data-type="favorite-shows"] li::before {
	content: unset;
}

[data-type="upcoming-shows"] h3 {
	line-height: 1.2;
	margin-bottom: 15px;
}

[data-type="upcoming-shows"] h3 span {
	font-family: "ApfelGrotezk";
	font-size: 20px;
}

[data-type="upcoming-shows"] p {
	font-size: 16px;
	margin-bottom: unset!important;
}

[data-type="upcoming-shows"] figure:first-of-type {
	padding-top: 10px;
}

[data-img="episode"] img {
	width: 100%;
	height: auto;
}

[data-type="episode-date"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-left: 60px;
	font-weight: 700;
}                

[data-type="episode-date"] span {
	font-weight: 400;
}

[data-type="episode-date"]:first-of-type {
	margin-top: 30px;
}                

[data-type="episode-date"]::before {
	content: "";
	background: url('../img/icons/calendar.svg');
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
}

@media only screen and (max-width: 48rem) {
	[data-mobile="false"] {
		display: none;
	}
}

[data-type="entertainment-poster"],
[data-type="games"] {
	position: relative;
}

[data-type="entertainment-poster"] a,
[data-type="games"] a {
	display: flex;
	position: relative;
	cursor: pointer;
	pointer-events: auto;
	object-fit: cover;
}

[data-type="entertainment-poster"] img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

#owned-mugs [data-type="entertainment-poster"] img,
#all-mugs [data-type="entertainment-poster"] img {
	aspect-ratio: 1 / 1;
	object-fit: cover;	
}

@media only screen and (max-width: 48rem) {
    [data-type="entertainment-poster"] a,
	[data-type="games"] a {
        pointer-events: none;
    }

    [data-type="entertainment-poster"] [data-tooltip='status-bar'], 
	[data-type="games"] [data-tooltip='status-bar']{
        pointer-events: auto;
    }

    [data-type="entertainment-poster"][data-status="active"] [data-tooltip='status-bar'],
	[data-type="games"][data-status="active"] [data-tooltip='status-bar'] {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

[data-type="entertainment-poster"] [data-upcoming]::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;	
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	border-radius: 10px 0 10px 0;
    background-color: var(--primary-color);	
}

[data-upcoming="true"]::before {
	background: url('../img/icons/upcoming-episodes.svg');
	border-top: 2px solid #FFD700;
	border-left: 2px solid #FFD700;	
}

[data-upcoming="false"]::before {
	background: url('../img/icons/full-season.svg');
	border-top: 2px solid var(--success-color);
	border-left: 2px solid var(--success-color);	
}

@media only screen and (max-width: 48rem) {
	[data-tooltip="status-bar"] {
        width: 100%;
		border-top: 2px solid var(--primary-color);
		border-right: unset;
		border-top-right-radius: unset;		
	}
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] small,
[data-type="games"] [data-tooltip="status-bar"] small {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-left: 60px;
	margin-bottom: 15px;
	margin-top: 20px;
	max-width: 250px;
	line-height: 1.2;
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] small::before,
[data-type="games"] [data-tooltip="status-bar"] small::before {
	content: "";
	background: url('../img/icons/genre.svg');
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	position: absolute;
	left: 10px;
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] small:nth-child(3)::before {
	content: "";
	background: url('../img/icons/upcoming-episodes-light.svg');
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	position: absolute;
	left: var(--spacing-x-small);
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] div,
[data-type="games"] [data-tooltip="status-bar"] div {
	display: flex;
	flex-direction: column;
}

[data-type="rating"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-left: 60px;
	margin-bottom: var(--spacing-small);
	margin-top: var(--spacing-normal);
	max-width: 250px;
	line-height: 1.2;	
}

[data-type="entertainment-poster"] hr,
[data-type="games"] hr {
	margin-top: var(--spacing-x-small);
	margin-bottom: var(--spacing-x-small);
}

[data-type="rating"]::before {
	content: "";
	background: url('../img/icons/rating.svg');
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	position: absolute;
	left: var(--spacing-x-small);
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="tracks-information"] small::before {
	content: "";
	background: url('../img/icons/album.svg');
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	position: absolute;
	left: var(--spacing-x-small);
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="tracks-information"] small:first-of-type::before {
	content: "";
	background: url('../img/icons/artust.svg');
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	position: absolute;
	left: var(--spacing-x-small);
}

[data-type="loader"] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #F4F3F2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 19999;
}

[data-type="loader"] img {
	width: fit-content;
	height: auto;
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(1)::before,
[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(2)::before,
[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(3)::before,
[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(4)::before,
[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(5)::before,
[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(6)::before,
[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(7)::before {
	content: "";
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	position: absolute;
	left: var(--spacing-x-small);
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(1)::before {
	background: url('../img/icons/code.svg');
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(2)::before {
	background: url('../img/icons/low-price.svg');
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(3)::before {
	background: url('../img/icons/top-price.svg');
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(4)::before {
	background: url('../img/icons/calendar.svg');
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(5)::before {
	background: url('../img/icons/designer.svg');
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(6)::before {
	background: url('../img/icons/category.svg');
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] [data-type="mug-details"] small:nth-child(7)::before {
	background: url('../img/icons/size.svg');
}

[data-type="entertainment-poster"] [data-status="owned"]::before {
	content: "";
	background: url('../img/icons/rating.svg');
	position: absolute;
	right: 0;
	bottom: 0;	
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	border-radius: 10px 0 10px 0;
    background-color: var(--primary-color);	
}

[data-type="notification"] {
	padding: 20px;
	border: 2px solid #252525;
	border-radius: 10px;
	width: fit-content;
}