@font-face {
  font-family: "Noto Sans";
  src: local("Noto Sans"), url("/static/site/notosans.woff2"); }

@font-face {
  font-family: "Urbanist";
  src: local("Urbanist"), url("/static/site/urbanist.woff2"); }

body {
  margin: 0;
  font-family: "Noto Sans";
  line-height: 1.4;
  padding-bottom: 100px; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Urbanist";
  font-weight: 700; }

h2 {
  font-size: 22pt;
  color: #006e76;
  text-transform: uppercase; }

img, svg, video {
  max-width: 100%; }

p {
  font-size: 14pt; }

a {
  color: #006e76;
  text-decoration-color: #00818a; }

header {
  display: grid;
  grid-template-columns: 1fr auto;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color: #00818a; }
  header a {
    display: contents; }
  header img {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    height: 100px; }
    @media (max-width: 800px) {
      header img {
        padding-top: 20px;
        height: 70px; } }
    @media (max-width: 600px) {
      header img {
        padding-top: 13px;
        padding-bottom: 13px;
        height: 50px; } }
    @media (max-width: 500px) {
      header img {
        padding-left: 10px; } }
    @media (max-width: 420px) {
      header img {
        padding-top: 7px;
        padding-bottom: 7px;
        height: 40px; } }
  header .sidemenu-opener {
    display: none;
    background-color: unset;
    border: none;
    margin: 10px;
    width: 32px;
    height: 28px;
    background-image: url("/static/site/menu-open-button.svg");
    background-repeat: no-repeat; }
    @media (max-width: 850px) {
      header .sidemenu-opener {
        display: block; } }
    @media (max-width: 600px) {
      header .sidemenu-opener {
        align-self: center; } }
#sidemenu-toggle {
  display: none; }

nav {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 10px 20px; }
  nav > div > a {
    font-size: 14pt;
    color: #000;
    padding-left: 20px;
    padding-right: 20px;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #000;
    text-decoration: none; }
    nav > div > a:last-child {
      border-right-style: none; }
  @media (max-width: 850px) {
    nav {
      display: none;
      position: relative;
      padding: 0; }
      #sidemenu-toggle:checked + nav {
        display: block; }
      nav > div {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 80vw;
        background-color: #00818a;
        flex-direction: column;
        padding: 20px 10px; }
        nav > div > a {
          display: block;
          color: white;
          border-right-style: none; }
          nav > div > a:not(:last-child) {
            padding-bottom: 20px; } }
main {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto; }

footer {
  padding-top: 50px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  max-width: 1000px;
  font-size: 10pt;
  color: #888; }

main > .homepage {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 400px);
  grid-template-areas: "heading-image heading-image" "intro intro" "fbposts donations"; }
  @media (max-width: 700px) {
    main > .homepage {
      grid-template-columns: auto;
      grid-template-areas: "heading-image" "intro" "donations" "fbposts"; } }
  main > .homepage > .heading-image {
    grid-area: heading-image; }
  main > .homepage > .intro {
    grid-area: intro; }
    main > .homepage > .intro > p {
      padding-left: 15px;
      padding-right: 15px; }
  main > .homepage > .fbposts {
    grid-area: fbposts;
    padding-left: 15px;
    padding-right: 15px; }
    main > .homepage > .fbposts > h2 > a {
      text-decoration: none; }
    main > .homepage > .fbposts > .listing-link {
      display: block;
      text-align: right;
      padding-right: 20px;
      padding-top: 10px; }
    main > .homepage > .fbposts > .fbposts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      overflow-wrap: anywhere; }
      @media (max-width: 450px) {
        main > .homepage > .fbposts > .fbposts-grid {
          grid-template-columns: auto; } }
      @media (min-width: 450px) {
        main > .homepage > .fbposts > .fbposts-grid img, main > .homepage > .fbposts > .fbposts-grid video {
          width: 100%;
          object-fit: cover;
          max-height: 300px; } }
  main > .homepage > .donations {
    grid-area: donations;
    padding-left: 15px;
    padding-right: 15px; }
    main > .homepage > .donations img {
      width: 300px; }

main > .page h1, main > .page h2 {
  padding-left: 15px; }

main > .page > article > p {
  padding-left: 15px;
  padding-right: 15px; }

main > .page img {
  max-height: 70vh; }

main > .page .donation-form {
  padding-left: 15px;
  padding-right: 15px; }

.donation-form {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
  column-gap: 20px;
  max-width: 400px; }
  .donation-form > label {
    display: contents;
    line-height: 25px; }
    .donation-form > label > .label-text::after {
      content: ":"; }
  .donation-form > p {
    grid-column: 1 / 3;
    font-size: 12pt;
    margin: 0; }
  .donation-form > .actions {
    grid-column: 2; }
  .donation-form input {
    background: #ffffff;
    padding: 3px 5px;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    border-color: #888888; }
  .donation-form input[type=submit] {
    padding: 5px 10px;
    font-size: 12pt;
    background-color: #006e76;
    border-radius: 3px;
    color: #fff;
    border-style: none; }
  .donation-form > .errors {
    grid-column: 1 / 3;
    list-style: none;
    color: maroon;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 0; }
  @media (max-width: 400px) {
    .donation-form {
      grid-template-columns: auto;
      gap: 3px; }
      .donation-form > label > .label-text {
        padding-top: 5px; }
      .donation-form > p {
        grid-column: 1; }
      .donation-form > .actions {
        grid-column: 1;
        justify-self: right;
        padding-top: 20px; } }
main > .donor-page > .transactions-table {
  border-collapse: collapse;
  border-style: solid;
  border-width: 1px;
  border-color: #bbb; }
  main > .donor-page > .transactions-table thead {
    background-color: #bdfbff; }
  main > .donor-page > .transactions-table th {
    padding: 5px 20px; }
  main > .donor-page > .transactions-table td {
    padding: 5px 15px; }
  main > .donor-page > .transactions-table td:nth-child(2) {
    text-align: right; }

main > .sbirka-page .total-donated {
  font-size: 32px;
  font-family: "Urbanist";
  font-weight: 700;
  text-align: center;
  padding-top: 20px; }
  main > .sbirka-page .total-donated > .amount {
    color: #006e76;
    font-size: 40pt; }

main > .homepage .total-donated > .amount {
  color: #006e76;
  font-size: 40pt;
  font-weight: 700;
  text-align: center; }

main > .dekujeme-page table.donors {
  padding-left: 50px;
  text-transform: uppercase; }
  main > .dekujeme-page table.donors td {
    padding-bottom: 5px; }

.fbpost-trunc {
  display: flex;
  flex-direction: column; }
  .fbpost-trunc video, .fbpost-trunc img {
    align-self: center; }
  .fbpost-trunc > a {
    text-decoration: none;
    color: black; }
  .fbpost-trunc p {
    font-size: 12pt; }

main > .fbpost-full {
  padding-left: 15px;
  padding-right: 15px; }
  main > .fbpost-full > .attachments {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    justify-items: center; }
    main > .fbpost-full > .attachments img, main > .fbpost-full > .attachments video {
      max-height: 500px; }
    @media (max-width: 700px) {
      main > .fbpost-full > .attachments {
        grid-template-columns: 1fr 1fr; } }
    @media (max-width: 500px) {
      main > .fbpost-full > .attachments {
        grid-template-columns: auto; }
        main > .fbpost-full > .attachments img, main > .fbpost-full > .attachments video {
          max-height: 45vh; } }
:is(.fbpost-full, .fbpost-trunc) > .date {
  color: #666;
  text-align: right; }
  :is(.fbpost-full, .fbpost-trunc) > .date a {
    color: #666; }

main > .fbposts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding-left: 15px;
  padding-right: 15px;
  overflow-wrap: anywhere; }
  @media (max-width: 800px) {
    main > .fbposts-grid {
      grid-template-columns: 1fr 1fr; } }
  @media (max-width: 450px) {
    main > .fbposts-grid {
      grid-template-columns: auto; } }
  @media (min-width: 450px) {
    main > .fbposts-grid img, main > .fbposts-grid video {
      width: 100%;
      object-fit: cover;
      max-height: 300px; } }