@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;
}

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

#social-links {
  padding-right: 30px;
  grid-area: media;
}

#accessibility > ul,
#social-links > ul {
  margin: 0px;
  display: flex;
  padding: 10px 0 0;
}

#accessibility > ul > li,
#social-links > ul > li {
  display: inline-block;
}
#social-links > ul {
  justify-content: flex-end;
}

#accessibility .high-contrast-switch {
  display: block;
  width: 30px;
  height: 0;
  padding-top: 30px;
  overflow: hidden;
  margin: 0 3px 0 0;
  cursor: pointer;
  position:relative;

  &:before {
    content: '';
    position: absolute;
    inset: 1px;
    display: block;
    background-color: #666;
    mask: url(/_gfx/header/btn_bw.svg) no-repeat;
    mask-size: 70%;
    mask-position: 50% 50%;
  }

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

#accessibility .link-to-disabled-support {
  display: block;
  width: 30px;
  height: 0;
  padding-top: 30px;
  overflow: hidden;
  margin: 0 3px;
  cursor: pointer;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    inset: 1px;
    display: block;
    background-color: #666;
    mask: url(/_gfx/header/btn_disabled.svg) no-repeat;
    mask-size: 70%;
    mask-position: 50% 50%;
  }

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


#accessibility .font-size-switch {
  display: block;
  width: 30px;
  height: 0;
  padding-top: 30px;
  overflow: hidden;
  margin: 0 3px;
  cursor: pointer;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    inset: 1px;
    display: block;
    background-color: #666;
    mask: url(/_gfx/header/btn_textsize.svg) no-repeat;
    mask-size: 70%;
    mask-position: 50% 50%;
  }

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

#accessibility .link-to-lector {
  display: block;
  width: 30px;
  height: 0;
  padding-top: 30px;
  overflow: hidden;
  margin: 0 3px;
  cursor: pointer;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    inset: 1px;
    display: block;
    background-color: #666;
    mask: url(/_gfx/header/btn_lector.svg) no-repeat;
    mask-size: contain;
    mask-position: 0% 50%;
  }

  body.hc &:before {
    background-color: yellow;
  }
}

#social-links .link-to-youtube {
  display: block;
  width: 30px;
  height: 0;
  padding-top: 30px;
  overflow: hidden;
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    inset: 1px;
    background: url(/_gfx/header/btn_youtube.svg) no-repeat;
    background-position: 50% 50%;
  }
  body.hc &:before {
    filter: invert() sepia(1) hue-rotate(19deg) saturate(5) ;
  }
}



#social-links .link-to-bip {
  margin: 2px 7px 0 12px ;
  display: block;
  width: 49px;
  height: 0;
  padding-top: 31px;
  overflow: hidden;
  position: relative;
  &:before {
    content: '';
    display: block;
    position: absolute;
    inset: 1px;
    background: url(/_gfx/logo_bip.svg) no-repeat;
    background-position: 50% 50%;
  }
  body.hc &:before {
    filter: invert() sepia(1) hue-rotate(19deg) saturate(5);
  }
}

#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: none;
}

.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;
    background-image: linear-gradient(to bottom, #d2d2d2 0%, #d2d2d2 36px, #0006 36px, #0002 43px, #0000 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: 75%;
    min-width: 240px;
  }

  #accessibility::after {
    content: 'ŁKA';
    position: absolute;
    right: calc(10px + (100vw - 360px) * 0.36);
    font-size: 20px;
    top: 2px;
    font-weight: bold;
    font-style: italic;
    background: url(/_gfx/logo_lka_small.svg) no-repeat;
    background-position: 0 50%;
    background-size: 26px;
    padding-left: 29px;
  }

  .hc #accessibility:after {
    color: yellow;
    background: none;
  }

  #social-links {
    width: 25%; /* compatibility */
    min-width: 80px;
    right: 0;
    right: min(0px, calc(100vw - 320px));
  }

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

  #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) {
  #accessibility:after {
    content: initial
  }
}

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