@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/NotoSans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/NotoSans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/NotoSans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/NotoSans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family:
    "Noto Sans",
    system-ui,
    -apple-system,
    Arial,
    sans-serif;
  background: #ffffff;
  color: #00855a;
}

.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 4.4444vmin;
  padding: 0 0.9259vmin 0 1.9444vmin;
  border: 0;
  border-radius: 2.2222vmin;
  background: #00855a;
  color: #ffffff;
  font-family: inherit;
  font-size: 2.2222vmin;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.btn:active {
  background: #006b49;
}

.btn--archive {
  padding-right: 1.4815vmin;
  background: #4dac6f;
}

.btn--archive:active {
  background: #3f9a60;
}

.badge {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 2.7778vmin;
  height: 2.7778vmin;
  margin-left: 1.2963vmin;
  border-radius: 50%;
  background: #92c56e;
}

.badge .icon {
  display: block;
  width: auto;
}

.icon--play {
  height: 1.5511vmin;
  -webkit-transform: translateX(0.2744vmin);
  transform: translateX(0.2744vmin);
}

.icon--pause {
  height: 1.2963vmin;
}

.icon--home {
  height: 1.3217vmin;
  -webkit-transform: translateY(-0.0926vmin);
  transform: translateY(-0.0926vmin);
}

.icon--archive {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  height: 2.7778vmin;
  width: auto;
  margin-left: 1.2963vmin;
}

.btn--round {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 4.4444vmin;
  height: 4.4444vmin;
  padding: 0;
  border-radius: 50%;
}

.btn--round .badge {
  margin-left: 0;
}

#menu-screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#logo {
  display: block;
  width: 42.3148vmin;
  height: auto;
  margin: 4.4444vmin 0 18.5185vmin 0;
}

#menu-screen nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#menu-screen nav > .btn {
  width: 9.6296vmin;
  margin-right: 3.2407vmin;
}

#menu-screen nav > .btn--archive {
  width: 19.6296vmin;
  margin-right: 0;
  margin-left: 9.7223vmin;
}

body[data-screen="video"] {
  background: #000000;
}

#video-screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#player {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
}

#video-screen nav {
  position: fixed;
  left: 3.7vmin;
  bottom: 3.8vmin;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#video-screen nav > .btn {
  margin-right: 1.8519vmin;
}

#video-screen nav > #btn-home {
  width: 13.7963vmin;
}

#video-screen nav > .btn:last-child {
  margin-right: 0;
}

#start-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 16vmin;
  height: 16vmin;
}

#start-overlay .badge {
  width: 11vmin;
  height: 11vmin;
}

#start-overlay .icon--play {
  height: 5vmin;
}

body[data-screen="pdf"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#pdf-pages {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
  scrollbar-width: none;
  background: #ffffff;
}

#pdf-pages::-webkit-scrollbar {
  display: none;
}

.pdf-page {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
}

body[data-screen="pdf"] nav {
  position: fixed;
  left: 3.7vmin;
  right: 3.7vmin;
  bottom: 3.8vmin;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body[data-screen="pdf"] nav > .btn {
  margin-right: 1.8519vmin;
}

body[data-screen="pdf"] nav > #pdf-counter {
  margin-right: 0;
  margin-left: auto;
}

/* Licznik wyglada jak przycisk, ale nim nie jest — chodzi o czytelnosc:
   sterowanie lezy teraz na slajdzie, a ten bywa ciemny. */
.btn--static {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 1.9444vmin;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

.icon--prev {
  height: 1.5511vmin;
  -webkit-transform: scaleX(-1) translateX(0.2744vmin);
  transform: scaleX(-1) translateX(0.2744vmin);
}

.btn--toggle .icon--play {
  display: none;
}

.btn--toggle[data-state="paused"] .icon--play {
  display: block;
}

.btn--toggle[data-state="paused"] .icon--pause {
  display: none;
}

@-webkit-keyframes kiosk-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes kiosk-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  -webkit-animation: kiosk-enter 260ms ease-out backwards;
  animation: kiosk-enter 260ms ease-out backwards;
}

.is-entering {
  -webkit-animation: kiosk-enter 260ms ease-out backwards;
  animation: kiosk-enter 260ms ease-out backwards;
}

body.is-leaving {
  opacity: 0;
  -webkit-transition: opacity 180ms ease-in;
  transition: opacity 180ms ease-in;
}