@import url(https://fonts.googleapis.com/css?family=Signika+Negative:300,400,600&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic);

:root {
	--color-logo-red: #ed1b24;
	--color-logo-red: #e7131d; /* tweaked for 4.5 contrast */
	--color-logo-yellow: #ffd504;
	--color-logo-black: #000;
	--color-input-border: #949494;
}

html {
	padding: 0px;
	margin: 0px;
	width: 100%;
	min-height: 100%;
	scroll-snap-type: y proximity;
}

body {
	font-family: Lato, arial, helvetica, sans-serif;
	position: relative;
	box-sizing: border-box;
	min-width: 320px;
	max-width: 1275px;
	padding: 0px 15px 0px 260px;
	font-weight: 400;
	background-color: #e2e2e2;
	font-size: 14px;
	line-height: 1.6;
	width: 100%;
	height: 100%;
	margin: 0px auto;
	color: #505050;
	font-size: 16px;
	scroll-snap-type: y proximity;
}

body:is(.no-background, .double-tile) > main {
	background-color: #0000;
	box-shadow: inherit;
	h2 {
		margin: 0px;
	}
}

@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */
	html, body {
		scroll-snap-type: none;
	}
}

*,
*:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
button:focus {
	outline: none;
	outline-offset: 0;
}

ol li,
ul li {
	font-size: 1em;
	line-height: 1.5em;
	margin: 0;
}

.list-unstyled {
	padding: 0;
}

.list-unstyled li {
	list-style-type: none;
}

.list-unstyled .list-unstyled {
	padding-left: 40px;
}

table caption {
	text-align: center;
	padding-bottom: 10px;
}

table th {
	padding: 2px 5px;
}

table td {
	padding: 2px 5px;
}

iframe {
	border: none;
}

.hidden {
	display: none;
}

body.hc {
	background-color: #000;
	color: yellow;
}

body.hc-visible {
	display: none;
}

body.hc section.hc-visible {
	display: block;
}

body.hc img.hc-visible {
	display: inline-block;
}

body.hc .hc-hidden {
	display: none;
}

html[data-whatintent=keyboard] :focus {
	outline: 2px solid #151515;
}

body.hc :focus,
html[data-whatintent=keyboard] body.hc :focus {
	outline: 2px solid yellow;
}

p {
	font-family: Lato, arial, helvetica, sans-serif;
	line-height: inherit;
	margin-top: 0px;
	font-size: inherit;
}

body.bw {
	filter: url(/_gfx/desaturate.svg#desaturate); /* Firefox 3.5+ */
	filter: gray; /* IE5+ */
	-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome 18+ (currently Beta) */
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.6);
	border-radius: 1px;
	background-color: rgba(255,255,255,1);
}

::-webkit-scrollbar-thumb {
	border-radius: 1px;
	background-color: rgba(192,192,192,1);
	color: rgba(192,192,192,0.3);
}

#mainmenu {
	display: block;
	position: fixed;
	top: 0px;
	left: calc(50% - 624px);
	height: 100vh;
	width: 230px;
	min-width: 200px;
	background-color: white;
	box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
	z-index: 30;
	overflow: hidden;
	transition: left 0.2s ease-in-out;
}

.hc #mainmenu {
	background-color: #000;
}

.skip-links {
	top: 2px;
	width: 0px;
	height: 0px;
	position: absolute;
	z-index: 100;
}

.skip-links > ul {
	list-style-type: none;
}

.skip-links a,
.skip-links a:visited {
	position: absolute;
	top: 0;
	left: -9000em;
	display: block;
	text-align: center;
	width: 200px;
	text-decoration: none;
}

.skip-links a:hover,
.skip-links a:focus,
.skip-links a:active {
	left: 0;
	padding: 5px 10px;
	background: #ffd500;
	color: #444
}

a[href=\#skip-facebook],
a[href=\#skip-facebook]:visited {
	position: absolute;
	top: 2px;
	left: -9000em;
	text-decoration: none
}

a[href=\#skip-facebook]:hover,
a[href=\#skip-facebook]:focus,
a[href=\#skip-facebook]:active {
	left: 2px;
	background: #fff;
	color: #444;
	padding: 5px 10px;
	outline: 2px solid #151515
}

.hc a[href=\#skip-facebook]:hover,
.hc a[href=\#skip-facebook]:focus,
.hc a[href=\#skip-facebook]:active {
	background: #000;
	color: #ff0;
}

.homepage-link {
	display: block;
	overflow: hidden;
	width: 176px;
	height: 0;
	padding-top: 105px;
	background: url(/_gfx/logo_lka.svg) no-repeat;
	margin: 30px auto 12px;
}

.pdf-info {
	text-transform: none;
}

body.hc .homepage-link {
	background: unset;
	background-color: yellow;
	mask: url(/_gfx/logo_lka.svg) no-repeat;
}

.mainmenu-link {
	display: block;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 500;
	color: #444;
	font-size: 18px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #e2e2e2;
	padding: 5px 9px;
	background: #ffffff;
	padding: 8px 50px 8px 16px;
	background-image: url(/_gfx/left-menu-arrow.svg);
	background-repeat: no-repeat;
	background-position: 195px 50%;
}

body.hc .mainmenu-link {
	background: #000;
	color: yellow;
	border-color: yellow;
}

body.hc .mainmenu-link-active,
body.hc .mainmenu-link-active a {
	background-color: yellow;
	color: black;
}

#mainmenu a:last-child img {
	margin: 10px auto;
}

#mainmenu nav {
	margin-top: 70px;
	border-style: solid;
	border-color: #e2e2e2;
	border-width: 1px 0px 0px 0px;
	width: 230px;
	padding: 0px;
}

#mainmenu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#mainmenu li {
	padding: 3px 0px 0px;
}

.hc #mainmenu nav {
	border-color: yellow
}

.mainmenu-link-active {
	background-color: #ffd500;
}

.mainmenu-link-active a {
	background-color: #ffd500;
	font-weight: bold;
	background-image: url(/_gfx/left-menu-arrow.svg#active);
}

nav#topmenu {
	scroll-margin: 2px;
}

nav#topmenu ul {
	box-sizing: border-box;
	list-style-type: none;
	padding: 0px;
	margin: 0 -10px;
	display: flex;
	flex-wrap: wrap;
}

nav#topmenu li {
	flex: 1 0 50%;
}

nav#topmenu a {
	display: block;
	position: relative;
	margin: 10px;
	min-width: max-content;
	text-align: center;
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-size: 16px;
	padding: 12px 32px 12px 72px;
	text-transform: uppercase;
	background-image: var(--icon-image), linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
	background-repeat: no-repeat, no-repeat;
	background-size: auto 32px, cover;
	background-position: 30px 50%, 50% 50%;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0px 0px 12px #0008;
	background-color: #086c9e;
	border-color: #086c9e;
	transition: all 0.3s ease-in-out;
}

nav#topmenu a:hover {
	box-shadow: 0px 0px 4px #fff4, 4px 4px 18px #000c;
}

nav#topmenu a:active {
	box-shadow: 0 0 3px #000;
}

nav#topmenu li:nth-child(2) > a {
	background-color: #773eb3;
	border-color: #773eb3;
}

nav#topmenu li:nth-child(3) > a {
	background-color: #2d46b5;
	border-color: #2d46b5;
}

nav#topmenu li:nth-child(4) > a {
	background-color: #027d0b;
	border-color: #027d0b;
}

nav#topmenu li:nth-child(5) > a {
	background-color: #d21900;
	border-color: #d21900;
}

nav#topmenu li:nth-child(6) > a {
	background-color: #006b20;
	border-color: #006b20;
}

body.hc nav#topmenu li > a {
	background-color: #000;
	border-color: #ff0;
	color: #ff0;
}

.contact-phone {
	display: inline-block;
	vertical-align: top;
	padding-top: 2px;
	font-weight: bold;
	font-size: 22px;
	letter-spacing: 1px;
	line-height: 100%;
}

#social-links ul {
	display: block;
	padding-right: 7px;
	text-align: right;
}

strong {
	font-weight: bold;
}

.hc strong {
	color: yellow;
}

.hc .contact-phone a {
	color: yellow;
}

body > header,
body > main,
body > footer {
	display: flow-root;
	position: relative;
	box-sizing: border-box;
	width: auto;
	padding: 0px;
}

body > header {
	display: grid;
	grid: auto / min-content auto min-content;
	grid-template-areas:
		"banner banner banner"
		"accessibility contact media"
		"menu menu menu"
		"koleo koleo koleo"
		"finder finder finder"
}

body > header > :first-child {
	grid-area: banner;
	box-shadow: 0 0 12px #0004;
}

:is(#accessibility, #social-links) > ul {
	margin: 0px;
	display: flex;
	padding: 10px 0 0;
	> li {
		display: inline-block;
	}
}

#accessibility {
	padding-left: 30px;
	grid-area: accessibility;

	> ul > li > * {
		display: block;
		width: 30px;
		height: 0;
		padding-top: 30px;
		overflow: hidden;
		margin: 0 3px;
		cursor: pointer;
		position: relative;

		:is(:first-child > &) {
			margin: 0 3px 0 0;
		}

		&:before {
			content: '';
			position: absolute;
			inset: 1px;
			display: block;
			background-color: #666;
			mask: no-repeat 50% 50% / 70%;
			transition: background-color 0.2s ease-in-out;
		}
		&:hover:before {
			background-color: var(--color-logo-red);
			background-color: black;
		}
		&:hover {
			filter: drop-shadow(0 0 2px white);
		}

		body.hc &:before {
			mask-size: 100%;
			background-color: yellow;
		}
	}

	.high-contrast-switch:before {
		mask-image: url(/_gfx/header/btn_bw.svg);
	}

	.font-size-switch:before {
		mask-image: url(/_gfx/header/btn_textsize.svg);
	}

	.link-to-disabled-support:before {
		mask-image: url(/_gfx/header/btn_disabled.svg);
	}

	.link-to-lector:before {
		mask: url(/_gfx/header/btn_lector.svg) 0% 50% / contain no-repeat;
	}
	.link-to-easy-to-read:before {
		mask-image: url(/_gfx/header/btn_easy_to_read.svg);
	}
}

#social-links {
	padding-right: 30px;
	min-width: 0px;
	grid-area: media;

	> ul {
		justify-content: flex-end;

		> li > * {
			display: block;
			height: 0;
			overflow: hidden;
			cursor: pointer;
			position: relative;

			&:before {
				content: '';
				display: block;
				position: absolute;
				inset: 1px;
				background: 50% 50% no-repeat;
			}

			body.hc &:before {
				filter: invert() sepia(1) hue-rotate(19deg) saturate(5) ;
			}
	}}

	.link-to-youtube {
		width: 30px;
		padding-top: 30px;

		&:before {
			background-image: url(/_gfx/header/btn_youtube.svg);
		}
	}

	.link-to-bip {
		width: 51px;
		padding-top: 31px;
		margin: 2px 7px 0 12px ;

		&:before {
			background-image: url(/_gfx/logo_bip.svg);
		}
}}

#contact-phone {
	grid-area: contact;
	max-width: 600px;
	color: #333;
	margin: auto;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 100%;
	text-align: center;
	padding: 12px 10px 0;
}

#contact-phone a {
	color: black;
	text-decoration: none;
	font-size: 22px;
}

#contact-phone > :last-child {
	font-size: 11px;
	line-height: 1.4em;
	font-style: italic;
	letter-spacing: 0.2px;
	font-weight: normal;
}

body.hc #contact-phone,
body.hc #contact-phone a {
	color: yellow;
}

#topmenu {
	grid-area: menu;
}

header > cs-koleo-widget {
	grid-area: koleo;
}


header > cs-fare-finder {
	grid-area: finder;
}

cs-datetime-local:not([shim]),
cs-lka-station {
	display: contents;
}

cs-datetime-local[shim] {
	width: 100%;
	height: 100%;
}

body > main {
	display: flow-root;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-width: 320px;
	max-width: 1280px;
	min-height: calc(100% - 0px);
	padding: 0 0 32px;
	margin: 10px auto 20px;
	box-shadow: 0px 0px 12px #0004;
	background-color: white;
}

body.hc > main {
	background-color: black;
}

body > footer {
	display: flow-root;
	border-style: solid;
	border-width: 1px;
	border-color: #aaa;
	background-color: white;
	padding: 10px 20px;
	margin-top: 25px;
	box-sizing: border-box;
	width: 100%;
	box-shadow: 0px 0px 12px #0004;
}

.hc footer {
	background-color: #000;
	border-color: #000;
	color: yellow;
}

main a {
	border-bottom: 1px solid #ce7272;
	color: #444;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

body.hc main a {
	color: yellow;
	border-bottom: 1px solid yellow;
}

main a:hover {
	filter: drop-shadow(3px 3px 2px #0005);
	border-color: red;
	color: black;
}

main a:active {
	filter: drop-shadow(1px 1px 1px white) drop-shadow(0px 0px 1px #0008) ;
	color: #a00;
}

.hc article * a {
	color: yellow;
}

.hc article * a:hover {
	color: yellow;
}

article {
	padding: 20px;
}

main > section {
	padding: 20px;
}

body.hc article {
	font-size: 18px;
}

body.size main {
	font-size: 32px;
}

body.size main legend {
	font-size: 32px;
}

body.hc main legend,
body.hc main label {
	color: yellow;
}

body.size main input,
body.size main select,
body.size main button,
body.size main textarea {
	font-size: 32px;
}

body.hc main input,
body.hc main select,
body.hc main button,
body.hc main textarea {
	border-style: solid;
	border-color: yellow;
	border-width: 1px;
	background-color: black;
	color: yellow;
	background-color: black;
}

body.no-background.hc article {
	background-color: initial;
	color: #505050;
}

#menu-toggle {
	display: none;
	box-sizing: border-box;
	position: fixed;
	text-align: center;
	top: 4px;
	left: 0px;
	width: 48px;
	height: 30px;
	color: #666;
	font-size: 22px;
	line-height: 1.4em;
	z-index: 25;
	user-select: none;
	cursor: pointer;
}

#menu-toggle:focus,
#menu-toggle:active {
	background-color: transparent;
}

.hc #menu-toggle {
	color: yellow;
}

#menu-toggle[aria-expanded=true] {
	width: calc(100% - 230px);
	height: 100%;
	left: 230px;
	top: 0px;
	color: #0000;
	cusror: auto;
}

#menu-toggle[aria-expanded=true]+#mainmenu {
	left: 0px;
}

table.styled {
	width: 100%;
}

table.styled td {
	background-color: #e2e2e2;
	padding: 4px 6px;
}

table.styled th {
	padding: 4px 6px;
	background-color: #e8e8e8;
}

table.styled tr:first-child th {
	background-color: #ddd
}

/*
 * Hide only visually, but have it available for screen readers: h5bp.com/v
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

main h1,
main h2 {
	box-sizing: border-box;
	font-family: signika negative, arial, helvetica, sans-serif;
	font-size: 34px;
	font-weight: bold;
	margin: 1em 0px 0.5em;
	padding: 0px 20px;
	color: #505050;
}

body.hc > main h1,
body.hc > main h2 {
	color: yellow;
}

main > h1 {
	line-height: 1.3em;
}

body.size > main > h1 {
	font-size: 42px;
}

main h3 {
	margin: 0.5em 0;
	padding: 0;
	font-size: 24px;
	color: #444;
	text-align: left;
	font-weight: bold;
	border-width: 0px;
}

article h4 {
	margin: 0.5em 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.6;
	color: #505050;
	text-align: left;
	font-weight: 400;
	border-width: 0px;
}

.hc article h1,
.hc article h2,
.hc h3,
.hc article h3,
.hc article h4 {
	color: yellow;
}

body.size main h1,
body.size main h2 {
	font-size: 54px;
}

body.size main h3 {
	font-size: 42px;
}

body.size main h4 {
	font-size: 36px;
}

body.size #mainmenu nav .mainmenu-link {
	font-size: 24px;
	line-height: 1.3;
	padding: 8px 20px 8px 6px;
	background-image: none;
}

body.size nav#topmenu a {
	font-size: 20px;
}

.bigone {
	margin-top: -20px;
	overflow: hidden;
}

.bigone > div {
	margin: 0px;
	width: 100%;
	height: 100%;
}

.bigone > div > h1 {
	padding: 20px;
	width: auto;
}

.box-1x2-tile {
	width: 320px;
	height: 660px;
	overflow: hidden;
	position: relative;
	float: left;
	margin: 10px 10px 10px 0px;
	background-color: white;
	box-shadow: 0px 0px 12px #0004;
	box-sizing: border-box;
	border-style: solid;
	border-width: 4px;
	border-color: #909ca2;
	scroll-margin: 15px;
}

.links-list {
	padding: 0px;
	margin: -2px -10px 0px -10px;
}

ul.links-list > li {
	--color: #fed102;
	float:left;
	position: relative;
	display: block;
	box-sizing: border-box;
	box-shadow: 0px 0px 12px #0004;
	width: 320px;
	height: 320px;
	margin: 10px;
	border-style: solid;
	border-color: var(--color);
	border-width: 4px;
	background-color: var(--color);
	transition: all 0.3s ease-in-out;
	scroll-margin: 15px;
}

main ul.links-list > li > a {
	border-bottom: 0px;
}

ul.links-list > li:hover {
	box-shadow: 0px 0px 4px #fff4, 4px 4px 18px #0008;
}

ul.links-list > li:active {
	box-shadow: 2px 2px 4px white, -1px -1px 4px #0008;
}

ul.links-list > li._with-background {
	background-image: var(--background);
	background-size: cover;
	background-position: 50% 50%;
}

ul.links-list > li > a,
ul.links-list > li > div {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: flex-end;
	text-decoration: none;
	position: absolute;
	top: 0;
}

ul.links-list > li > a:hover {
	text-shadow: none;
	filter: none;
}

ul.links-list > li > a::after,
ul.links-list > li > div::after {
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 0px;
	height: 0px;
	border-top: 35px solid var(--color);
	border-left: 35px solid transparent;
}

ul.links-list > li > a > div {
	width: 100%;
	color: white;
	box-sizing: border-box;
	background-color: var(--color);
	padding: 11px 20px 5px;
	margin: 0px;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 100%;
}

.bw .links-list-news-subtitle {
	border-color: black;
	background-color: black;
}

ul.links-list > ._tile-green {
	--color: #027d0b;
}

ul.links-list > ._tile-olive {
	--color: #777727;
}

ul.links-list > ._tile-blue {
	--color: #086c9e;
}

ul.links-list > ._tile-violet {
	--color: #771e7d;
}

ul.links-list > ._tile-sand {
	--color: #766d65;
}

ul.links-list > ._tile-black {
	--color: #000;
}

ul.links-list > ._tile-red {
	--color: #d21900;
}

body.hc ul.links-list > li {
	--color: yellow;
}

body.hc ul.links-list > li > a > div {
	color: black;
	padding: 8px 6px 0;
}

body.size ul.links-list > li > a > div {
	font-size: 28px;
	line-height: 1.2;
}

._pager {
	display: flow-root;
	text-align: center;
	width: 100%;
}

._pager > .pages-list {
	display: inline-block;
}

._pager > .pages-list > :matches(a, span) {
	padding: 2px 4px;
}

._pager > .pages-list > :-webkit-any(a, span) {
	margin: 2px 4px;
	text-decoration: none;
}

section.galleries-list > ul {
	display: grid;
	grid: auto-flow auto / repeat(auto-fill, minmax(228px, 1fr));
	grid-gap: 10px 12px;
	padding: 20px;
}

section.galleries-list > ul > li {
	display: block;
}

section.galleries-list > ul > li > a {
	text-decoration: none;
	display: block;
	width: 232px;
	position: relative;
	margin: auto;
}

section.galleries-list > ul > li > a > img {
	display: block;
	margin: auto;
	box-shadow: 0 0 1px #0006, 2px 2px 8px #0003 inset, 2px 2px 18px #0001 inset;
	position: relative;
	padding: 16px
}

section.galleries-list > ul > li > a > div {
	text-align: center;
	margin: auto;
	color: white;
	font-weight: bold;
	position: absolute;
	text-shadow: 0 0 2px black;
	line-height: 1.1;
	top: 0;
	bottom: 0;
	padding: 24px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	filter: drop-shadow(1px 1px 5px black);
}

main > section.gallery {
	margin: 0 0 40px;
}

cs-gallery:not([fullscreen]) {
	display: grid;
	grid: auto-flow auto / repeat(auto-fill, minmax(228px, 1fr));
	grid-gap: 10px 12px;
}

cs-gallery:not([fullscreen]) > cs-gallery-item {
	display: block;
	position: relative;
	margin: auto;
	padding: 14px 16px;
	box-shadow: 2px 2px 8px #0003 inset, 2px 2px 18px #0001 inset;
}

cs-gallery:not([fullscreen]) > cs-gallery-item > img {
	display: block;
	box-shadow: 0 0 1px #0006;
	position: relative;
	width: 200px;
	height: 126px;
}

cs-gallery:not([fullscreen]) > cs-gallery-item::after {
	content: '';
	display: block;
	background-color: rgba(255,220,0,0.7);
	position: absolute;
	top: 14px;
	left: 16px;
	right: 16px;
	bottom: 14px;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	background-image: url(/_gfx/gallery-zoom.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;

}

cs-gallery:not([fullscreen]) > cs-gallery-item:hover::after {
	opacity: 1;
}

cs-gallery-item {
	cursor: pointer;
}

.double-tile ul.links-list > :first-child {
	width: 660px;
}

cs-carousel.top-banner {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 25.2%;
	overflow: hidden;
}

cs-carousel.top-banner img {
	width: 100%;
}

cs-carousel:not(:defined) > :nth-child(n+2) {
	display: none;
}

cs-carousel img {
	display: block;
}

article img {
	max-width: 100%;
	height: auto;
}

article.bigone {
	width: 100%;
	background-color: white;
	height: 100%;
}

article.bigone + .news-subtitle {
	margin-top: -62px;
	width: calc(100% - 20px);
}

h1.intro {
	font-weight: 300;
	color: white;
	font-size: 64px;
	font-family: signika negative, arial, helvetica, sans-serif;
	margin: 10px;
	line-height: 1.3;
	padding: 1px;
	transition: all 0.5s ease-in-out;
}

.news-subtitle {
	background-color: #ffd504;
	padding: 12px 20px 12px;
	width: 100%;
	margin-left: -20px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 20px;
	color: white;
}

blockquote {
	display: block;
	margin: 0.5em;
	padding: 1em;
	font-size: 150%;
	line-height: 1.6;
	color: #444;
	text-align: left;
	font-family: Lato, arial, helvetica, sans-serif;
	font-weight: 400;
	font-style: italic;
	background-color: #f8f8f8;
	border-width: 0px;
}

fieldset-chrome-bug {
	display: inline-grid;
	grid-auto-columns: minmax(200px, 40%);
	justify-content: inherit;
	align-items: inherit;
}

cs-paging-loader {
	display: contents;
}

cs-contact-form {
	padding: 0 20px;
	display: block;
}

cs-auto-repeat-fields {
	display: contents;
}

.contact-form {
	position: relative;
	text-align: left;
	max-width: 630px;
	margin: auto;
}

.size .contact-form {
	max-width: initial;
}

.contact-form > label {
	display: block;
	padding: 8px 0px 0px;
}

.contact-form label > input[type=text],
.contact-form label > cs-lka-station > input[type=text],
.contact-form label > input[type=number],
.contact-form label > input[type=email],
.contact-form label > input[type=date],
.contact-form label > input[type=tel],
.contact-form label > input[type=time],
.contact-form label > select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 34px;
	border-width: 1px;
	border-style: solid;
	padding: 8px 16px;
	border-radius: 3px;
	border-color: var(--color-input-border);
	box-shadow: 2px 2px 6px #aaa6;
	background-color: white;
	transition: box-shadow 0.2s ease-in-out;
}

body.hc .contact-form label > input[type=text],
body.hc .contact-form label > input[type=number],
body.hc .contact-form label > input[type=email],
body.hc .contact-form label > input[type=date],
body.hc .contact-form label > input[type=time],
body.hc .contact-form label > select {
	background-color: black;
	border-color: yellow;
}

body.hc .contact-form label > input[type=checkbox]:before,
body.hc .contact-form label > input[type=radio]:before {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	border: 2px solid yellow;
	content: "";
	background: #000;
	font-weight: bold;
	box-sizing: border-box;
}

body.hc .contact-form label > input[type=radio]:before {
	border-radius: 6px;
}


body.hc.size .contact-form label > input[type=checkbox] {
	width: 18px;
	height: 18px;
}

body.hc.size .contact-form label > input[type=checkbox]:before {
	width: 20px;
	height: 20px;
	top: -1px;
	left: -1px;
}

body.hc.size .contact-form label > input[type=radio] {
	width: 22px;
	height: 22px;
}

body.hc.size .contact-form label > input[type=radio]:before {
	top: -1px;
	left: -0px;
	width: 22px;
	height: 22px;
	border-radius: 10px;
}

body.hc .contact-form label > input[type=radio]:checked:before,
body.hc .contact-form label > input[type=checkbox]:checked:before {
	background-color: yellow;
}

body.hc img.hc-convert {
	filter:invert() grayscale() brightness(200) contrast(0.5) sepia() saturate(400%) hue-rotate(5deg)
}

body.size .contact-form label > input[type=text],
body.size .contact-form label > input[type=number],
body.size .contact-form label > input[type=email],
body.size .contact-form label > input[type=date],
body.size .contact-form label > input[type=time],
body.size .contact-form label > select {
	height: initial;
}

.contact-form label > input[type=time],
.contact-form label > input[type=date] {
	text-align: center;
}

.contact-form label > textarea {
	display: block;
	width: 100%;
	height: 180px;
	max-height: 50vh;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	padding: 16px;
	border-radius: 3px 3px 0 3px;
	border-color: var(--color-input-border);
	box-shadow: 2px 2px 6px #aaa3;
	background-color: white;
	transition: box-shadow 0.2s ease-in-out;
	resize: vertical;
}

.contact-form label > input[type=text]:focus,
.contact-form label > input[type=email]:focus,
.contact-form label > textarea:focus {
	box-shadow: 2px 2px 6px #aaa8;
}

.contact-form button {
	user-select: none;
	background-color: #f8f8f8;
	margin: 10px 0 0 auto;
	display: block;
	padding: 8px 12px 6px;
	border-radius: 4px;
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: var(--color-input-border);
	box-shadow: 2px 2px 6px #0002;
	transition: box-shadow 0.2s ease-in-out;
	color: #333;
}

.contact-form button:hover {
	box-shadow: 3px 3px 12px #0005;
}

.contact-form button:active {
	box-shadow: 2px 2px 4px #fffb, 0px 0px 4px #0003, -1px -1px 2px #fff3 inset;
}

.contact-form > button {
	user-select: none;
	background-color: var(--color-logo-yellow);
	margin: 20px 0px 20px auto;
	display: block;
	padding: 14px 24px 10px;
	border-radius: 4px;
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: #ffbb00;
	letter-spacing: 1px;
	font-size: 16px;
	box-shadow: 2px 2px 12px #0004;
	text-transform: uppercase;
	transition: box-shadow 0.2s ease-in-out;
}

.contact-form > button:hover {
	box-shadow: 4px 4px 16px #0007;
}

.contact-form > button:active {
	box-shadow: 2px 2px 4px #fffb, 0px 0px 4px #0008, -1px -1px 2px #fff3 inset;
}

.contact-form ._required {
	font-weight: bold;
}

.contact-form > fieldset {
	padding: 12px;
	border-width: 0;
	position: relative;
}

.contact-form > fieldset > legend {
	float: left;
	font-size: 18px;
	border-width: 0 0 1px 0;
	border-color: var(--color-logo-red);
	border-style: solid;
	margin: 0 -12px;
	width: calc(100% + 24px);
	display: block;
	box-sizing: border-box;
	line-height: 1.2;
	padding: 0 0 3px;
}

body.hc .contact-form > fieldset > legend {
	border-color: yellow;
}

.contact-form fieldset fieldset-chrome-bug {
	width: 100%;
	grid-gap: 4px 12px;
	grid-template-columns: 1fr 1fr;
	padding: 12px 0 4px;
}

fieldset-chrome-bug > label {
	align-self: end;
}

.contact-form fieldset[name=travel] fieldset-chrome-bug {
	grid-template-columns: repeat(3, 1fr);
}

.contact-form fieldset[name=travel] fieldset-chrome-bug > :nth-child(2),
.contact-form fieldset[name=travel] fieldset-chrome-bug > :nth-child(4),
.contact-form fieldset[name=travel] fieldset-chrome-bug > :nth-child(5) {
	grid-column: 1 / 3;
}

.contact-form fieldset[name=stages] fieldset-chrome-bug {
	grid-template-columns: repeat(3, 1fr);
}

.contact-form fieldset[name=stages] fieldset-chrome-bug > :nth-child(4n+1) {
	grid-column: 1 / 3;
}

body.size .contact-form fieldset[name=stages] fieldset-chrome-bug > :nth-child(4n+1) {
	grid-column: 1 / 4;
}

.contact-form fieldset[name=stages] fieldset-chrome-bug > :nth-child(4n+2) {
	grid-column: 1;
	padding-top: 0;
}

.contact-form fieldset[name=stages] fieldset-chrome-bug > :nth-child(4n+3),
.contact-form fieldset[name=stages] fieldset-chrome-bug > :nth-child(4n+4) {
	padding-top: 0;
}

.contact-form fieldset[name=stages] fieldset-chrome-bug > :last-child {
	grid-column: 3
}

.contact-form fieldset[name=group] fieldset-chrome-bug {
	grid-template-columns: 1fr;

	& input {
		width: auto;
	}
}

.contact-form fieldset[name=support] fieldset-chrome-bug > :first-child {
	grid-column: 1 / 3;
}

.contact-form fieldset[name=sports-fans-contact] fieldset-chrome-bug > :nth-child(-n+2) {
	grid-column: 1 / 3;
}

.contact-form fieldset[name=travel-type] fieldset-chrome-bug {
	display: block;
	padding-top: 2em;

	& > label + label {
		padding-left:  30px;
	}
}

cs-lka-card55 > form {
	& fieldset[name=card-order] fieldset-chrome-bug {
		grid-template-columns: 1fr;

		& > label {
			display: block;

			> input:is([type=checkbox], [type=radio]) {
				margin-right: 1em;
			}
		}
	}

	& fieldset[name=card-client] fieldset-chrome-bug {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"name name surname surname"
			"email email phone phone"
			"birthdate birthdate pesel pesel"
			"postalcode town town town"
			"street street home flat";

		& > :is(:has(input[name=first_name]), .__field_first_name) {
			grid-area: name
		}

		& > :is(:has(input[name=last_name]), .__field_last_name) {
			grid-area: surname
		}

		&  > :is(:has(input[name=email]), .__field_email) {
			grid-area: email
		}

		& > :is(:has(input[name=phone]), .__field_phone) {
			grid-area: phone
		}

		& > :is(:has(input[name=birthdate]), .__field_birthdate) {
			grid-area: birthdate
		}

		& > :is(:has(input[name=pesel]), .__field_pesel) {
			grid-area: pesel
		}

		& > :is(:has(input[name=postcode]), .__field_postcode) {
			grid-area: postalcode
		}

		& > :is(:has(input[name=town]), .__field_town) {
			grid-area: town
		}

		& > :is(:has(input[name=street]), .__field_street) {
			grid-area: street
		}

		& > :is(:has(input[name=house_no]), .__field_house_no) {
			grid-area: home
		}

		& > :is(:has(input[name=appartment_no]), .__field_appartment_no) {
			grid-area: flat
		}

		& label:has(input:is([name=email],[name=phone]):not([required])) {
			position: relative;
			&:before {
				content: '(opcjonalnie)';
				position: absolute;
				font-size: 80%;
				line-height: 100%;
				top: 7px;
				right:8px;
			}
		}
	}

	& fieldset[name=card-photo] fieldset-chrome-bug {
		grid-template-columns: 1fr;

		.photo_preview {
			width: 118px;
			height: 152px;
			float: left;
			background-color: #eee;
			border-style: solid;
			border-width: 1px;
			border-color: #ccc;
			border-radius: 4px;
			padding: 10px;
			> img {
				max-width: 118px;
				max-height: 152px;
			}
		}
	}

	& fieldset[name=card-payment] fieldset-chrome-bug {
		grid-template-columns: 1fr;

	}
}

.card55-form-preview fieldset-chrome-bug label > div {
	padding: 0.2em 1em;
	font-weight: bold;
}

.card55-form-preview fieldset-chrome-bug ._value {
	font-weight: bold;
}

cs-accept-cookies-pane {
	position: fixed;
	display: flex;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 200;
	color: white;
	background-color: #555;
	font-size: 14px;
	padding: 2px;
	text-align: center;
	line-height: 1.1;

	&:not(:defined) > button {
		display: none;
	}

	> :first-child {
		padding: 20px;
		flex: 1 0;
	}

	> button {
		flex: 0 0;
		background-color: var(--color-logo-yellow);
		padding: 8px;
		border-width: 0px;
		user-select: none;
	}

	& p {
		padding: 0;
		margin: 0;
	}

	& a {
		color: white;
		font-weight: bold;
		text-decoration: none;
	}
}

cs-koleo-widget {
	display: block;
	grid: auto / auto;
	margin-top: 10px;
	box-sizing: border-box;
	padding: 4px 20px 6px;
	background: var(--color-logo-yellow);
	color: black;
	width: 100%;
	box-shadow: 0px 0px 12px #0008;
	font-family: "Exo 2", Helvetica, Arial, sans-serif;
	scroll-margin: 40px;
}

cs-koleo-widget input,
cs-koleo-widget button,
cs-fare-finder input,
cs-fare-finder button,
cs-fare-finder select,
cs-fare-finder option {
	font-family: "Exo 2", Helvetica, Arial, sans-serif;
}

cs-koleo-widget:not(:defined) > form > button {
	pointer-events: none;
}

cs-koleo-widget > form {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	grid: auto / repeat(4, min-content);
	margin-top: 4px;
	gap: 8px;
	align-items: stretch;
}

cs-koleo-widget > form > label:first-child > cs-lka-station > input,
cs-fare-finder > form > ._fare > label:nth-child(2) > cs-lka-station > input {
	background-image: url(/_gfx/koleo/from.svg);
	background-repeat: no-repeat;
	background-position: 8px 50%;
	background-size: 15px 15px;
	padding-left: 30px;
	text-transform: uppercase;
}


cs-koleo-widget > form > label:nth-child(2) cs-lka-station > input,
cs-fare-finder > form > ._fare > label:nth-child(3) cs-lka-station > input,
cs-fare-finder > form > ._fare > label:nth-child(n+4) cs-lka-station > input {
	background-image: url(/_gfx/koleo/to.svg);
	background-repeat: no-repeat;
	background-position: 8px 50%;
	background-size: 15px 15px;
	padding-left: 30px;
	text-transform: uppercase;
}

cs-fare-finder > form > ._fare > label:nth-child(n+4) cs-lka-station > input {
	background-image: url(/_gfx/koleo/through.svg);
}

cs-fare-finder > form > ._fare > label:nth-child(5) {
	grid-area: station1;
	grid-row: 2;
}

cs-fare-finder > form > ._fare > label:nth-child(6) {
	grid-area: station2;
	grid-row: 2;
}

cs-fare-finder > form > ._fare > label:nth-child(7) {
	grid-area: station3;
	grid-row: 2;
}

cs-fare-finder._hide-through > form > ._fare > label:nth-child(n+5) {
	display: none;
}

cs-koleo-widget > h2,
cs-fare-finder > h2 {
	font-weight: normal;
	font-size: 18px;
	margin: 0px;
	padding: 0px;
	color: black;
}

cs-fare-finder > form > ._options {
	grid-area: options;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	width: 100%;
}

cs-fare-finder > form > ._discounts {
	grid-area: discounts;
	display: flex;
	gap: 10px;
	width: 100%;
	justify-content: stretch;
}

cs-fare-finder > form > ._discounts > label {
	display: contents;
}

cs-fare-finder > form > ._discounts > label > span {
	grid-row: auto;
	padding: 6px 0 0 0;
}

cs-fare-finder > form > ._discounts > label > select {
	padding: 10px 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #500;
	background-color: white;
	width: 100%;
}

cs-koleo-widget > a {
	color: black;
	text-decoration: none;
	display: block;
	margin: 8px auto 0px;
	text-align: center;
	width: -moz-fit-content;
	width: fit-content;
}

cs-koleo-widget > a > img {
	margin-left: 10px;
}

cs-koleo-widget > form > label > input,
cs-koleo-widget > form > label > * > input,
cs-koleo-widget > form > label > cs-datetime-local[shim]::part(input),
cs-fare-finder  > form > ._fare > label > input[type=text],
cs-fare-finder > form > ._fare >label > * > input[type=text],
cs-fare-finder  > form > ._fare > label > input[type=date],
cs-fare-finder > form > ._fare > label > cs-datetime-local[shim]::part(input) {
	padding: 10px 8px 10px 28px;
	border-style: solid;
	border-width: 1px;
	border-color: #500;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

cs-fare-finder > form > div._train-type {
	padding: 0px 25px;
}

cs-koleo-widget > form > label > cs-datetime-local[shim]::part(input) {
	font-family: "Exo 2", Helvetica, Arial, sans-serif;
	padding-left: 30px;
}

cs-fare-finder {
	display: block;
	grid: auto / auto;
	margin-top: 10px;
	box-sizing: border-box;
	padding: 4px 20px 12px;
	background: var(--color-logo-yellow);
	color: black;
	width: 100%;
	box-shadow: 0px 0px 12px #0008;
	font-family: "Exo 2", Helvetica, Arial, sans-serif;
	scroll-margin: 40px;
}

cs-fare-finder > form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

cs-fare-finder > form > ._fare {
	width: 100%;
	display: grid;
	grid: auto / repeat(4, 1fr);
	margin-top: 4px;
	gap: 8px;
	align-items: stretch;
	grid-template-areas: "date station1 station2 station3";
}

cs-fare-finder > form > button {
	width: 100%;
}

cs-datetime-local:not(:defined) > input {
	color: white;
}

cs-datetime-local[shim]::part(input):focus {
	outline: none;
	outline-offset: 0;
}

cs-fare-finder:not(:defined) ._ticket > label:last-child,
cs-fare-finder._hide-seasonal ._ticket > label:last-child {
	visibility: hidden;
}

cs-fare-finder ._results {
	padding-left: 120px;
	width: 100%;
}

cs-fare-finder fieldset  {
	border-width: 0px;
	padding: 0px;
	margin: 0px;
}


cs-fare-finder fieldset > legend {
	float: left;
	padding: 0px 4px 0px 0px;
}

cs-fare-finder ._results > ._warning {
	margin-left: -120px;
	text-align: center;
	color: black;
	font-weight: bold;
}

cs-fare-finder ._results > div {
	margin: 20px 0px 30px;
}

cs-fare-finder ._results h3 {
	margin: 0px;
	padding: 0px;
}

cs-fare-finder ._through {
	text-align: right;
}

cs-fare-finder ._through span {
	display: inline-block;
	background-color: var(--color-logo-red);
	color: white;
	padding: 0px 6px 3px;
	position: relative;
	margin: 0px 8px;
}

cs-fare-finder ._through span:before {
	position: absolute;
	top: 0px;
	left: -8px;
	box-sizing: border-box;
	border-width: 14px 0px 14px 8px;
	border-style: solid;
	border-color: var(--color-logo-red) var(--color-logo-red) var(--color-logo-red) rgba(0,0,0,0);
	display: block;
	height: 28px;;
	content: "";
	font-weight: bold;
	box-sizing: border-box;
}
cs-fare-finder ._through span:after {
	position: absolute;
	top: 0px;
	right: -8px;
	box-sizing: border-box;
	border-width: 14px 0px 14px 8px;
	border-style: solid;
	border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--color-logo-red);
	display: block;
	height: 28px;
	content: "";
	font-weight: bold;
	box-sizing: border-box;
}

cs-fare-finder ._price {
	margin-left: -120px;
	background-color: white;
	border-style: solid;
	border-width: 10px 0px;
	border-radius: 10px;
	border-color: var(--color-logo-red);
	padding: 5px 10px 5px 32px;
	float: left;
	box-sizing: border-box;
	width: 110px;
	text-align: right;
	background-repeat: no-repeat;
	background-image: url(/_gfx/logo_lka_small.svg);
	background-size: 24px;
	background-position: 10px 50%;
	margin-top: 7px;
	font-size: 17px;
	font-weight: bold;
	color: #444;

}

html[data-whatintent=keyboard] cs-datetime-local[shim]::part(input):focus {
	outline: 2px solid #151515;
}

cs-koleo-widget > form > * {
	flex: 1 0 180px;
}

cs-koleo-widget > form > button,
cs-fare-finder > form > button {
	flex: 1 0 256px;
	background-image: url(/_gfx/koleo/looking_glass.svg);
	background-repeat: no-repeat;
	background-position: 8px 50%;
	background-size: 15px 15px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-sizing: border-box;
	padding: 10px 8px 10px 30px;
	background-color: var(--color-logo-red);
	color: white;
	font-weight: bold;
	border-width: 0px;
}

.sitemap-link {
	text-decoration: none;
	border-bottom: 1px solid #151515;
	transition: border 0.3s ease 0s;
	color: #151515;
}

.sitemap-link:hover,
.sitemap-link:focus {
	border-bottom: 1px solid transparent
}

@supports not (-webkit-touch-callout: none) {
	/* CSS specific to non iOS devices */
	html[data-whatintent=touch] nav#topmenu,
	html[data-whatintent=touch] body > header,
	html[data-whatintent=touch] body > main,
	html[data-whatintent=touch] body > footer,
	html[data-whatintent=touch] main h1,
	html[data-whatintent=touch] main h2,
	html[data-whatintent=touch] ul.links-list > li,
	html[data-whatintent=touch] .box-1x2-tile,
	html[data-whatintent=touch] cs-koleo-widget {
		scroll-snap-align: start;
	}
}



@property --train-offset {
	syntax: "<percentage>";
	initial-value: -0%;
	inherits: false;
}

@keyframes trainOffset {
	0% { left: -80%; }
	60% { left: 110%; }
	100% { left: 110%; }
}

cs-animated-banner {
	display: block;
	width: 100%;
	aspect-ratio: 1000/252;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-image: url('/_data/banner/10 lat LKA/banner-filler.jpg');

	img.train {
		position: absolute;
		top: 78%;
		width: 68.5%;
		animation: trainOffset 12s infinite ease-in-out forwards;
	}

	video {
		opacity: 1;
		display: block; width: 100%; max-height: 252px;
		transition-property: opacity, display;
		transition-duration: 2s;
		transition-behavior: allow-discrete;

		@starting-style {
			opacity: 0;
		}
	}
	@media (prefers-reduced-data: reduce) {
		video {
			display: none;
			opacity: 0;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		video {
			display: none;
			opacity: 0;
		}
		img.train {
			animation: initial;
			left: -10%;
		}
	}
	&:not(:defined) {
		video {
			display: none;
			opacity: 0;
		}
	}

}

safari-fix {
	display: block;
	padding: 2px 8px;
}
safari-fix:hover {
	background-color: #eee;
}

@media (max-width: 1291px) {

	body {
		padding-left: calc(50% - 380px);
	}

	#accessibility {
		padding-left: calc(7vw - 60px);
	}

	#social-links {
		padding-right: calc(7vw - 60px);
	}

	.box-1x2-tile {
		width: calc(50% - 10px);
		height: 0;
		padding-top: calc(100% + 8px);
	}

	ul.links-list > li,
	.double-tile ul.links-list > :first-child {
		width: calc(50% - 20px);
		height: 0;
		padding-top: calc(50% - 20px);
	}
}

@media (max-width: 1264px) {
	body {
		padding-left: 245px;
	}
	#mainmenu {
		left: 0px;
	}
}

@media (max-width: 1180px) {
	nav#topmenu li {
		flex: 1 0 50%;
	}
	cs-fare-finder > form > ._options {
		flex-wrap: wrap;
		gap: 0px 16px;
		justify-content: flex-start;
	}

	cs-fare-finder > form > ._options > fieldset {
		display: grid;
		gap: 0px 2px;
		grid-template-areas:
			"label option1 option1"
			"label option2 seasonal";
	}
	cs-fare-finder > form > ._options > fieldset > :first-child {
		grid-area: label
	}
	cs-fare-finder > form > ._options > fieldset > :nth-child(2) {
		grid-area: option1
	}
	cs-fare-finder > form > ._options > fieldset > :nth-child(3) {
		grid-area: option2
	}

	cs-fare-finder > form > ._options > fieldset > :nth-child(4) {
		grid-area: seasonal
	}

	cs-fare-finder > form > ._discounts {
		display: grid;
		grid: auto / auto max-content;
		justify-content: stretch;
		gap: 0px 10px;
	}
	cs-fare-finder > form > ._discounts > label {
		display: contents;
	}
	cs-fare-finder > form > ._discounts > label > span {
		grid-row: 1;
		padding: 0;
	}
}

@media (max-width: 1080px) {
	cs-fare-finder > form > ._fare {
		grid: auto / repeat(2, 1fr);
		grid-template-areas:
			"station1 station2"
			"date station3";
	}
	cs-fare-finder > form > ._discounts {
		grid: auto / auto auto;
		grid-gap: 0px 8px;
	}
}

@media (max-width: 952px) {

	body {
		padding: 0px 4px;
	}

	body > header {
		grid: auto / 1fr min-content;
		grid-template-areas:
			"accessibility media"
			"banner banner"
			"contact contact"
			"menu menu"
			"koleo koleo"
			"finder finder";
	}

	#mainmenu {
		left: -250px;
		top: 0px;
	}

	#menu-toggle {
		display: block;
	}

	nav#topmenu ul {
		margin: -2px;
	}

	nav#topmenu a {
		margin: 2px;
	}

	body > header > :first-child {
		padding-top: 44px;
	}

	#accessibility,
	#social-links {
		position: fixed;
		min-height: 48px;
		z-index: 20;
		.hc & {
			background-image: linear-gradient(to bottom, black 36px, yellow 36px, yellow 38px, #0000 38px);
			height: 38px;
		}
	}

	#accessibility {
		left: 0;
		width: max(320px, 100%);
		min-width: max(320px, 100%);
		display: flex;
		justify-content: space-between;
		min-width: 240px;
		background-image: linear-gradient(to bottom, #d2d2d2 0%, #d2d2d2 36px, #0006 36px, #0002 43px, #0000 48px);

		@media (min-width: 420px) {
			&::after {
				--element-width: 45px;
				content: 'ŁKA';
				font-size: 20px;
				font-weight: bold;
				font-style: italic;
				background: url(/_gfx/logo_lka_small.svg) no-repeat;
				background-position: calc(50% - var(--element-width) / 2 - 50px ) 30%;
				background-size: 26px;
				padding: 2px 100px 0px 29px;
				text-align: center;
				flex: 1;
			}
		}

		.hc &::after {
			color: yellow;
			background: none;
		}
	}

	#social-links {
		right: 0;
		right: min(0px, calc(100vw - 320px));
	}

	#accessibility > ul,
	#social-links > ul {
		padding: 3px 0 0;
	}

	#accessibility > ul {
		padding-left: 48px;
	}

	#contact-phone {
		padding-bottom: 8px;
	}

	nav#topmenu {
		scroll-margin: 42px;
	}

	body > main,
	body > footer {
		scroll-margin: 40px;
	}

	.box-1x2-tile {
		width: calc(50% - 2px);
		height: 644px;
		margin: 4px 2px 2px 0px;
		scroll-margin: 40px;
	}

	ul.links-list {
		margin: 10px -2px 0px -2px;
	}

	ul.links-list > li,
	.double-tile ul.links-list > :first-child {
		margin: 2px;
		width: calc(50% - 4px);
		padding-top: calc(50% - 4px);
		scroll-margin: 40px;
	}
}

@media (max-width: 720px) {
	cs-koleo-widget > form > * {
		flex: 1 0 50%;
	}
	cs-fare-finder > form > ._fare {
		grid: auto / 1fr;
		grid-template-areas: auto;
	}
	cs-fare-finder > form > ._fare > label:nth-child(n) {
		grid-area: auto;
	}

	cs-fare-finder > form > ._options {
		gap: 8px 16px;
		display: flex;
		justify-content: space-between;
	}
	cs-fare-finder > form > ._options > fieldset {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
	cs-fare-finder > form > ._options > fieldset._ticket {
		display: grid;
		grid-template-areas:
			"label label"
			"option1 option1"
			"option2 seasonal";
	}
}

@media (max-width: 668px) {
	ul.links-list > li,
	.double-tile ul.links-list > :first-child {
		width: 500px;
		height: 500px;
		margin: 4px auto;
		float: none;
	}

	.box-1x2-tile {
		width: 100%;
		height: 100vw;
		max-width: 500px;
		margin: auto;
		float: none;
	}
}

@media (max-width: 640px) {
	nav#topmenu li {
		flex: 1 0 100%;
	}

	nav#topmenu a {
		margin: 0px 2px;
		padding-top: calc(1px + 1vw);
		padding-bottom: calc(1px + 1vw);
	}

	footer {
		width: 320px;
		margin: auto;
		box-sizing: border-box;
		margin-top: 20px;
	}

	.menu-visible main::before {
		left: 230px;
	}

	.scroll-up-button,
	.scroll-down-button {
		display: none;
	}

	body article {
		height: auto;
		overflow: hidden;
		padding-bottom: 60px;
		margin: 20px auto 0px;
		box-sizing: border-box;
	}

	article {
		width: auto;
	}

	.contact-phone {
		margin-top: 28px;
		width: 100%;
		box-sizing: border-box;
		text-align: left;
	}

	.contact-phone span {
		padding: 0px 10px;
	}
}

@media (max-width: 580px) {
	.contact-form fieldset fieldset-chrome-bug {
		grid-template-columns: 1fr;
	}

	.contact-form fieldset[name=stages] fieldset-chrome-bug > :nth-child(4n+1) {
		grid-column: 1 / 4;
	}

	.contact-form fieldset[name=support] fieldset-chrome-bug > :first-child {
		grid-column: 1;
	}

	cs-fare-finder > form > ._discounts {
		grid: auto / 1fr;
		gap: 8px;
	}
	cs-fare-finder > form > ._discounts > label > span {
		display: none;
	}

}

@media (max-width: 520px) {
	.contact-form fieldset[name=travel-type] fieldset-chrome-bug {
		display: grid;
		padding-top: 1em;
	}
	.contact-form fieldset[name=travel-type] fieldset-chrome-bug > label+label {
		padding-left:  0px;

	}

	ul.links-list {
		margin: 4px 0;
	}

	ul.links-list > li,
	.double-tile ul.links-list > :first-child {
		width: 100%;
		height: 0;
		padding-top: 100%;
	}
	cs-fare-finder > form > ._options {
		justify-content: flex-start;
	}
}

@media (max-width: 480px) {
	cs-fare-finder > form > ._options {
		display: flex;
		justify-content: flex-start;
	}
	cs-fare-finder > form > ._options > fieldset {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
}

@media (max-width: 400px) {
	.contact-form fieldset[name=travel] fieldset-chrome-bug > :nth-child(2),
	.contact-form fieldset[name=travel] fieldset-chrome-bug > :nth-child(4),
	.contact-form fieldset[name=travel] fieldset-chrome-bug > :nth-child(5) {
		grid-column: 1 / 4;
	}
	.contact-form fieldset[name=travel] fieldset-chrome-bug > :nth-child(3n+3) {
		grid-column: 1 / 2;
	}
}

@media (max-width: 360px) {

	#menu-toggle {
		width: max(40px, calc(20% - 24px));
	}
	#accessibility {
		& > ul {
			padding-left: max(40px, calc(20% - 24px));
		}
	}
	#social-links {
		background-image: none;
		.link-to-bip {
			margin: 2px max(1px, calc(100vw / 5.7143 - 56px)) 0 max(1px, calc(100vw / 3.3333 - 96px));
		}

	}
}

@media (max-width: 320px) {
	ul.links-list > li,
	.double-tile ul.links-list > :first-child {
		height: 312px;
		width: 312px;
	}
}