@import url(https://unpkg.com/leaflet@1.7.1/dist/leaflet.css);
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk5hkaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk0ZjaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4n.ttf) format('truetype');
}

:root {
  --font-family: "Open Sans", sans-serif;
  --font-xxl: 32px;
  --font-xl: 28px;
  --font-l: 20px;
  --font-m: 16px;
  --font-s: 14px;
  --font-xs: 12px;
  --font-xxs: 8px;
  --aspect-ratio: 16 / 9;
  --space-xs: 5px;
  --space-s: 10px;
  --space-m: 20px;
  --space-l: 40px;
  --space-xl: 80px;
  --color-green: #27b06c;
  --color-white: #ffffff;
  --color-grey: #bdbdbd;
  --color-grey-transparent-02: rgba(189, 189, 189, 0.2);
  --color-gray: #484848;
  --color-gray-transparent-02: rgba(72, 72, 72, 0.2);
  --color-gray-transparent-05: rgba(72, 72, 72, 0.5);
}
.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}
.offset-1 {
  margin-left: calc(100% / 12 * 1);
}
.col-1 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 1) - (var(--space-s) * 2));
}
.offset-2 {
  margin-left: calc(100% / 12 * 2);
}
.col-2 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 2) - (var(--space-s) * 2));
}
.offset-3 {
  margin-left: calc(100% / 12 * 3);
}
.col-3 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 3) - (var(--space-s) * 2));
}
.offset-4 {
  margin-left: calc(100% / 12 * 4);
}
.col-4 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 4) - (var(--space-s) * 2));
}
.offset-5 {
  margin-left: calc(100% / 12 * 5);
}
.col-5 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 5) - (var(--space-s) * 2));
}
.offset-6 {
  margin-left: calc(100% / 12 * 6);
}
.col-6 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 6) - (var(--space-s) * 2));
}
.offset-7 {
  margin-left: calc(100% / 12 * 7);
}
.col-7 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 7) - (var(--space-s) * 2));
}
.offset-8 {
  margin-left: calc(100% / 12 * 8);
}
.col-8 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 8) - (var(--space-s) * 2));
}
.offset-9 {
  margin-left: calc(100% / 12 * 9);
}
.col-9 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 9) - (var(--space-s) * 2));
}
.offset-10 {
  margin-left: calc(100% / 12 * 10);
}
.col-10 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 10) - (var(--space-s) * 2));
}
.offset-11 {
  margin-left: calc(100% / 12 * 11);
}
.col-11 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 11) - (var(--space-s) * 2));
}
.offset-12 {
  margin-left: calc(100% / 12 * 12);
}
.col-12 {
  padding: 0 var(--space-s);
  width: calc((100% / 12 * 12) - (var(--space-s) * 2));
}
@media (min-width: 1200px) {
  .offset-xl-1 {
    margin-left: calc(100% / 12 * 1);
  }
  .col-xl-1 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 1) - (var(--space-s) * 2));
  }
  .offset-xl-2 {
    margin-left: calc(100% / 12 * 2);
  }
  .col-xl-2 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 2) - (var(--space-s) * 2));
  }
  .offset-xl-3 {
    margin-left: calc(100% / 12 * 3);
  }
  .col-xl-3 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 3) - (var(--space-s) * 2));
  }
  .offset-xl-4 {
    margin-left: calc(100% / 12 * 4);
  }
  .col-xl-4 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 4) - (var(--space-s) * 2));
  }
  .offset-xl-5 {
    margin-left: calc(100% / 12 * 5);
  }
  .col-xl-5 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 5) - (var(--space-s) * 2));
  }
  .offset-xl-6 {
    margin-left: calc(100% / 12 * 6);
  }
  .col-xl-6 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 6) - (var(--space-s) * 2));
  }
  .offset-xl-7 {
    margin-left: calc(100% / 12 * 7);
  }
  .col-xl-7 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 7) - (var(--space-s) * 2));
  }
  .offset-xl-8 {
    margin-left: calc(100% / 12 * 8);
  }
  .col-xl-8 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 8) - (var(--space-s) * 2));
  }
  .offset-xl-9 {
    margin-left: calc(100% / 12 * 9);
  }
  .col-xl-9 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 9) - (var(--space-s) * 2));
  }
  .offset-xl-10 {
    margin-left: calc(100% / 12 * 10);
  }
  .col-xl-10 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 10) - (var(--space-s) * 2));
  }
  .offset-xl-11 {
    margin-left: calc(100% / 12 * 11);
  }
  .col-xl-11 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 11) - (var(--space-s) * 2));
  }
  .offset-xl-12 {
    margin-left: calc(100% / 12 * 12);
  }
  .col-xl-12 {
    padding: 0 var(--space-s);
    width: calc((100% / 12 * 12) - (var(--space-s) * 2));
  }
}
.form-group {
  position: relative;
}
.form-group label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.form-group input {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--color-gray);
  font-family: var(--font-family);
  font-size: var(--font-m);
  font-weight: 400;
  height: calc(var(--font-m) + var(--space-s) * 2 + 2px);
  margin: 0;
  outline: none;
  padding: var(--space-s);
  width: 100%;
}
.form-group input::placeholder {
  color: var(--color-gray);
  font-weight: 400;
}
.form-group input:focus {
  border-color: var(--color-green);
}
.form-group input.light {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: var(--color-gray-transparent-02);
  border-color: var(--color-white);
  border-width: 2px;
  color: var(--color-white);
  height: calc(var(--font-m) + var(--space-s) * 2 + 4px);
}
.form-group input.light::placeholder {
  color: var(--color-white);
  font-weight: 400;
}
.form-group input.dark {
  background-color: var(--color-dark-grey);
  border-color: var(--color-white);
  color: var(--color-white);
}
.form-group input.dark::placeholder {
  color: var(--color-white);
}
.form-group input.dark + .checkbox {
  border-color: var(--color-white);
}
.form-group input.dark + .checkbox + label {
  color: var(--color-white);
}
.form-group textarea {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--color-gray);
  font-family: var(--font-family);
  font-size: var(--font-m);
  line-height: 1.5;
  margin: 0;
  outline: none;
  padding: var(--space-s);
  resize: none;
  width: 100%;
}
.form-group textarea::placeholder {
  color: var(--color-gray);
  font-weight: 400;
}
.form-group textarea:focus {
  border-color: var(--color-green);
}
.form-group.form-check {
  align-items: center;
  display: flex;
}
.form-group.form-check label {
  font-size: var(--font-xs);
  opacity: 1;
  position: static;
  width: calc(100% - (var(--space-m) + var(--space-m) + 2px));
}
.form-group.form-check input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.form-group.form-check input:checked + .checkbox .icon {
  opacity: 1;
}
.form-group.form-check .checkbox {
  border: 1px solid var(--color-gray);
  height: calc(var(--space-m) - 2px);
  margin-right: var(--space-m);
  width: calc(var(--space-m) - 2px);
}
.form-group.form-check .checkbox .icon {
  opacity: 0;
}
@keyframes arrow-animation {
  0% {
    transform: translateX(0);
  }
  49% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(-100%);
  }
}
body {
  margin: 0;
  color: var(--color-gray);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
body.no-scroll {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  line-height: inherit;
}
a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul li {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}
button {
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}
.green-btn {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  padding: var(--space-s) calc(var(--space-s) + var(--space-xs));
  background-color: var(--color-green);
  color: var(--color-white);
  transition: opacity 256ms;
}
.green-btn.large {
  padding: var(--space-m) var(--space-l);
}
.green-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.green-btn img {
  height: 16px;
  width: 16px;
}
picture.icon {
  display: flex;
  height: 16px;
  width: 16px;
}
picture.icon img {
  object-fit: contain;
  object-position: center center;
}
.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-s);
  color: var(--color-white);
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  background-color: var(--color-green);
}
.share-button:hover {
  cursor: pointer;
}
.caption {
  display: block;
  color: var(--color-green);
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  margin-bottom: var(--space-m);
}
.unified-content * {
  color: var(--color-gray) !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-m) !important;
  height: unset !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  width: unset !important;
}
.unified-content p:not(:last-child) {
  margin-bottom: 1em !important;
}
.unified-content img {
  max-width: 100%;
}
#header {
  --layout-width: 940px;
  --navigation-height: 76px;
  --navigation-border-height: 2px;
  --theme-primary-color: #484848;
  --theme-secondary-color: #27b06c;
  --logo-height: 50px;
  --logo-gap: 30px;
  --lower-logo-text: 2px;
  --logo-menu-gap: 30px;
  --menu-items-gap: var(--space-l);
  --lower-menu-item: 8px;
  --menu-button-width: 20px;
  --menu-button-heights: 1px;
  --menu-button-gaps: 5px;
  --video-area-height: 475px;
  --megamenu-padding: var(--space-l);
}
#video-area {
  position: relative;
  padding: var(--space-m) 0;
}
#video-area.min-height {
  min-height: var(--video-area-height);
}
@media (max-width: 768px) {
  #video-area.min-height {
    min-height: unset;
  }
}
@media (max-width: 1199px) {
  #video-area {
    padding: var(--space-m) var(--space-s);
  }
}
#video-area video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#video-area .inner {
  width: 100%;
  max-width: var(--layout-width);
  margin: auto;
}
#megamenu-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 512ms;
}
#megamenu-overlay.show {
  pointer-events: all;
  opacity: 1;
}
#navigation {
  position: relative;
  z-index: 100;
  border-bottom: var(--navigation-border-height) solid var(--theme-secondary-color);
  background-color: var(--color-white);
}
@media (max-width: 1199px) {
  #navigation {
    padding: 0 var(--space-s);
  }
}
#navigation .inner {
  width: 100%;
  max-width: var(--layout-width);
  margin: auto;
  display: flex;
  gap: var(--logo-menu-gap);
}
#navigation .logo {
  flex-shrink: 0;
}
#navigation .logo a {
  height: var(--navigation-height);
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
}
#navigation .logo a img {
  height: var(--logo-height);
}
#navigation .logo a h1 {
  margin-top: var(--lower-logo-text);
  font-size: 28px;
  line-height: 1;
  font-weight: bold;
  color: var(--theme-primary-color);
}
#navigation .menu {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--menu-items-gap);
  justify-content: flex-end;
}
#navigation .menu li:not(.menu-button) {
  height: var(--navigation-height);
  display: flex;
  align-items: center;
}
#navigation .menu li:not(.menu-button) a {
  margin-top: var(--lower-menu-item);
  display: block;
  line-height: 1;
  color: var(--theme-primary-color);
  transition: text-shadow 256ms, color 256ms;
}
#navigation .menu li:not(.menu-button) a .square {
  position: relative;
}
#navigation .menu li:not(.menu-button) a .square:before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-8px + -2.5px);
  width: 8px;
  height: 8px;
  background-color: var(--color-green);
  opacity: 0;
  transition: opacity 256ms;
}
#navigation .menu li:not(.menu-button) a.active {
  color: var(--theme-primary-color);
  text-shadow: 0px 0px 1px var(--theme-primary-color);
}
#navigation .menu li:not(.menu-button) a.active .square::before {
  opacity: 1;
}
#navigation .menu li:not(.menu-button) a:not([data-target]):hover {
  color: var(--theme-primary-color);
  text-shadow: 0px 0px 1px var(--theme-primary-color);
}
#navigation .menu li:not(.menu-button) a:not([data-target]):hover .square::before {
  opacity: 1;
}
@media (max-width: 1199px) {
  #navigation .menu li:not(.menu-button) {
    display: none;
  }
}
#navigation .menu li.menu-button {
  position: relative;
  display: none;
}
@media (max-width: 1199px) {
  #navigation .menu li.menu-button {
    display: flex;
    align-items: center;
  }
}
#navigation .menu li.menu-button #menu-button {
  margin-top: var(--lower-menu-item);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--menu-button-gaps);
}
#navigation .menu li.menu-button #menu-button div {
  width: var(--menu-button-width);
  height: var(--menu-button-heights);
  background-color: var(--theme-primary-color);
  transition: background-color 256ms, filter 256ms;
}
#navigation .menu li.menu-button #menu-button:hover div {
  background-color: var(--theme-secondary-color);
  filter: drop-shadow(0px 0px 1px var(--theme-secondary-color));
}
#megamenu {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 100;
  width: var(--layout-width);
  margin: auto;
  overflow: hidden;
  background-color: var(--color-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 512ms;
}
#megamenu.show {
  pointer-events: all;
  opacity: 1;
}
#megamenu > .pages {
  display: flex;
  transition: margin 256ms;
}
#megamenu > .pages .page {
  box-sizing: border-box;
  width: var(--layout-width);
  padding: var(--megamenu-padding);
}
#megamenu > .pages .page > .title {
  display: none;
}
#megamenu > .pages .page > .groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-m);
}
#megamenu > .pages .page > .groups .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#megamenu > .pages .page > .groups .group .link-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
#megamenu > .pages .page > .groups .group .link-group > .title {
  color: var(--theme-secondary-color);
  font-weight: bold;
  margin-bottom: var(--space-s);
}
#megamenu > .pages .page > .groups .group .link-group .links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
#megamenu > .pages .page > .groups .group .link-group .links .link {
  transition: text-shadow 256ms, color 256ms;
}
#megamenu > .pages .page > .groups .group .link-group .links .link .square {
  position: relative;
}
#megamenu > .pages .page > .groups .group .link-group .links .link .square:before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-8px + -2.5px);
  width: 8px;
  height: 8px;
  background-color: var(--color-green);
  opacity: 0;
  transition: opacity 256ms;
}
#megamenu > .pages .page > .groups .group .link-group .links .link:hover {
  color: var(--theme-primary-color);
  text-shadow: 0px 0px 1px var(--theme-primary-color);
}
#megamenu > .pages .page > .groups .group .link-group .links .link:hover .square::before {
  opacity: 1;
}
@media (max-width: 1199px) {
  #megamenu {
    display: none;
  }
}
#mobile-menu {
  display: none;
}
@media (max-width: 1199px) {
  #mobile-menu {
    display: none;
  }
  #mobile-menu.show {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-m) var(--space-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    background-color: var(--color-white);
    overflow: scroll;
    scrollbar-width: none;
  }
  #mobile-menu.show::-webkit-scrollbar {
    display: none;
  }
  #mobile-menu.show > li {
    max-width: var(--layout-width);
    width: 100%;
    margin: auto;
  }
  #mobile-menu.show > li > .title {
    color: var(--color-green);
    font-size: var(--font-xl);
    font-weight: bold;
  }
  #mobile-menu.show > li > .first-level {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin-top: var(--space-m);
  }
  #mobile-menu.show > li > .first-level > li > .title {
    color: var(--color-green);
    font-weight: bold;
  }
  #mobile-menu.show > li > .first-level > li > .second-level {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
}
#searchbar {
  width: 50%;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-l);
}
@media (max-width: 1199px) {
  #searchbar {
    width: 75%;
  }
}
@media (max-width: 768px) {
  #searchbar {
    width: 100%;
    gap: var(--space-m);
  }
}
#searchbar input {
  flex-shrink: 0;
  flex-grow: 1;
  padding: 4px var(--space-s);
  border: 2px solid var(--color-white);
  background-color: var(--color-gray-transparent-02);
  color: var(--color-white);
  font-size: var(--font-m);
  line-height: 24px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color 256ms;
}
#searchbar input::placeholder {
  color: var(--color-white);
}
#searchbar input:focus {
  background-color: var(--color-gray-transparent-05);
  outline: none;
}
#searchbar input:focus::placeholder {
  color: var(--color-grey);
}
#searchbar button {
  padding: var(--space-s);
}
#weatherbar {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-m);
}
#weatherbar .weather {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-s);
  background-color: rgba(0, 0, 0, 0.32);
  font-size: var(--font-xs);
  color: var(--color-white);
}
@media (max-width: 768px) {
  #weatherbar .weather {
    flex-grow: 1;
  }
}
#weatherbar .weather .icon {
  width: 60px;
  height: 60px;
  margin-bottom: var(--space-xs);
}
#weatherbar .weather .temp {
  font-size: var(--font-m);
  font-weight: bold;
  margin-bottom: var(--space-s);
}
footer.footer {
  background-color: var(--color-gray);
  color: var(--color-white);
  padding: var(--space-m) 0;
}
footer.footer .selfgovernment {
  align-items: center;
  display: flex;
  margin-bottom: var(--space-m);
}
footer.footer .selfgovernment__image {
  display: flex;
  height: 55px;
  margin-right: var(--space-m);
  width: 50px;
}
footer.footer .selfgovernment__image img {
  object-fit: contain;
  object-position: center center;
}
footer.footer .selfgovernment__name {
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 1.5;
}
footer.footer .contact {
  font-size: var(--font-m);
  line-height: 1.5;
  text-align: right;
}
footer.footer .contact__title {
  font-weight: 700;
}
footer.footer .contact a {
  color: inherit;
  text-decoration: none;
}
footer.footer .newsletter__title {
  font-weight: 700;
  margin-bottom: var(--space-l);
}
footer.footer .newsletter__input {
  margin-bottom: var(--space-m);
}
footer.footer .newsletter__terms {
  margin-bottom: var(--space-m);
}
footer.footer-bottom {
  background-color: var(--color-green);
  color: var(--color-white);
  font-size: var(--font-xs);
  padding: var(--space-m) 0;
  padding-bottom: 120px;
}
footer.footer-bottom .links {
  font-weight: 700;
}
footer.footer-bottom .links a {
  color: inherit;
  display: inline-flex;
  margin-bottom: var(--space-s);
  margin-right: var(--space-l);
  text-decoration: none;
}
footer.footer-bottom .links a:last-child {
  margin-right: 0;
}
footer.footer-bottom .copyright {
  line-height: 1.5;
}
/** MOBILE */
@media (max-width: 1199px) {
  footer.footer {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
  }
  footer.footer .selfgovernment__county {
    font-size: var(--font-xs);
  }
  footer.footer .contact {
    text-align: left;
  }
  footer.footer-bottom {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
  }
  footer.footer-bottom .links a {
    margin-bottom: var(--space-m);
  }
}
.back-element {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: 12px;
  line-height: 24px;
}
#breadcrumb {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-m);
  row-gap: var(--space-s);
}
@media (max-width: 1199px) {
  #breadcrumb {
    justify-content: flex-end;
  }
}
#breadcrumb a {
  display: flex;
  gap: var(--space-m);
  color: var(--color-gray);
  font-size: 12px;
  line-height: 24px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
}
#breadcrumb a:not(:last-child):after {
  content: ">";
  font-size: 12px;
  line-height: 24px;
  font-weight: bold;
  pointer-events: none;
}
/*
.breadcrumb {

	display: flex;
	flex-wrap: wrap;
	margin-bottom: var( --space-l );


	a {

		color: var( --color-white );
		background-color: rgba(  39, 176, 108, 1.00 );
		font-size: var( --font-xs );
		padding: var( --space-s ) var( --space-m );
		padding-left: calc(var(--space-m) + 16px);
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;

		position: relative;
		&::after{
			content: "";
			position: absolute;
			right: -16px; top: 0;
			z-index: 2;
			width: 0; height: 0;

			border-left: 16px solid rgba(  39, 176, 108, 1.00 );
			border-top: 16px solid transparent; border-bottom: 16px solid transparent;
		}
		&::before{
			content: "";
			position: absolute;
			right: -16px; top: 0;
			z-index: 1;
			width: 0; height: 0;

			border-left: 16px solid var(--color-white);
			border-top: 16px solid transparent; border-bottom: 16px solid transparent;
		}


		&:nth-child( 2 ) {

			background-color: rgba(  39, 176, 108, 0.90 );
			&::after{
				border-left: 16px solid rgba(  39, 176, 108, 0.90 );
			}

		}

		&:nth-child( 3 ) {

			background-color: rgba(  39, 176, 108, 0.80 );
			&::after{
				border-left: 16px solid rgba(  39, 176, 108, 0.80 );
			}

		}

		&:nth-child( 4 ) {

			background-color: rgba(  39, 176, 108, 0.70 );
			&::after{
				border-left: 16px solid rgba(  39, 176, 108, 0.70 );
			}

		}

		&:nth-child( 5 ) {

			background-color: rgba(  39, 176, 108, 0.60 );
			&::after{
				border-left: 16px solid rgba(  39, 176, 108, 0.60 );
			}

		}

		&:nth-child( 6 ) {

			background-color: rgba(  39, 176, 108, 0.50 );
			&::after{
				border-left: 16px solid rgba(  39, 176, 108, 0.50 );
			}

		}

	}

}
*/
ul.paginator {
  display: flex;
  justify-content: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  margin-top: var(--space-l);
}
ul.paginator li a {
  width: var(--space-l);
  height: var(--space-l);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-size: var(--font-xs);
  text-align: center;
  text-decoration: none;
  background-color: var(--color-gray);
}
ul.paginator li.active a {
  background-color: var(--color-green);
}
.article-element {
  --image-margin-bottom: 3px;
  --information-divider-diameter: 2px;
  --information-gap: var(--space-xs);
  --title-line-height: 24px;
  --small-padding: var(--space-xs);
  --small-title-margin-bottom: 3px;
  display: flex;
  flex-direction: column;
}
.article-element .image {
  display: flex;
  width: 100%;
  margin-bottom: var(--image-margin-bottom);
}
.article-element .image picture {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  overflow: hidden;
}
.article-element .image picture img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 256ms;
}
.article-element .information {
  display: flex;
  align-items: center;
  gap: var(--information-gap);
}
.article-element .information .date,
.article-element .information .category {
  font-size: var(--font-xs);
}
.article-element .information .category {
  color: var(--color-green);
}
.article-element .information .divider {
  position: relative;
  width: var(--information-divider-diameter);
  height: var(--information-divider-diameter);
  border-radius: 50%;
  background-color: var(--color-gray);
}
.article-element .title {
  overflow: hidden;
  font-weight: bold;
  transition: color 256ms;
}
.article-element:hover .title {
  color: var(--color-green);
}
.article-element:hover .image picture img {
  transform: scale(1.1);
}
.article-element.small {
  padding: var(--small-padding);
  flex-direction: column-reverse;
  justify-content: flex-end;
}
.article-element.small .image {
  display: none;
}
.article-element.small .title {
  margin-bottom: var(--small-title-margin-bottom);
}
.article-element.--background-transition {
  transition: background-color 256ms;
}
.article-element.--background-transition:hover {
  background-color: var(--color-grey-transparent-02);
}
.article-element.--title-min-height-1 .title {
  min-height: calc(var(--title-line-height) * 1);
}
.article-element.--title-min-height-2 .title {
  min-height: calc(var(--title-line-height) * 2);
}
.article-element.--title-min-height-3 .title {
  min-height: calc(var(--title-line-height) * 3);
}
.article-element.--title-max-height-1 .title {
  max-height: calc(var(--title-line-height) * 1);
}
.article-element.--title-max-height-2 .title {
  max-height: calc(var(--title-line-height) * 2);
}
.article-element.--title-max-height-3 .title {
  max-height: calc(var(--title-line-height) * 3);
}
.event-element {
  --image-body-gap: var(--space-m);
  --body-gap: var(--space-xs);
  --title-font-size: var(--font-m);
  --title-line-height: calc(var(--title-font-size) * 1.5);
  --title-rows: 1;
  --title-mobile-max-rows: 1;
  --title-height: calc(var(--title-line-height) * var(--title-rows));
  --title-mobile-max-height: calc(var(--title-line-height) * var(--title-mobile-max-rows));
  --description-font-size: var(--font-m);
  --description-line-height: calc(var(--description-font-size) * 1.5);
  --description-rows: 3;
  --description-mobile-max-rows: 3;
  --description-height: calc(var(--description-line-height) * var(--description-rows));
  --description-mobile-max-height: calc(var(--description-line-height) * var(--description-mobile-max-rows));
  --date-font-size: var(--font-xs);
  --date-line-height: calc(var(--date-font-size) * 1.5);
  --date-rows: 1;
  --date-mobile-max-rows: 2;
  --date-height: calc(var(--date-line-height) * var(--date-rows));
  --date-mobile-max-height: calc(var(--date-line-height) * var(--date-mobile-max-rows));
  height: calc(var(--title-height) + var(--description-height) + var(--date-height) + calc(var(--body-gap) * 2));
  display: flex;
  gap: var(--image-body-gap);
}
@media (max-width: 768px) {
  .event-element {
    height: unset;
    flex-direction: column;
    gap: var(--space-xs);
  }
}
.event-element .image {
  flex-shrink: 0;
  position: relative;
  display: flex;
  height: 100%;
  aspect-ratio: var(--aspect-ratio);
  overflow: hidden;
}
@media (max-width: 768px) {
  .event-element .image {
    width: 100%;
    height: unset;
  }
}
.event-element .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 256ms;
}
.event-element .image .category {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 var(--space-xs);
  font-size: var(--font-s);
}
.event-element .body {
  flex-grow: 1;
  display: grid;
  grid-template-areas: 'title' 'description' 'date';
  gap: var(--body-gap);
}
@media (max-width: 768px) {
  .event-element .body {
    grid-template-areas: 'date' 'title' 'description';
  }
}
.event-element .title {
  grid-area: title;
  height: var(--title-height);
  overflow: hidden;
  font-size: var(--title-font-size);
  font-weight: bold;
  transition: color 256ms;
}
@media (max-width: 768px) {
  .event-element .title {
    height: unset;
    max-height: var(--title-mobile-max-height);
  }
}
.event-element .description {
  grid-area: description;
  height: var(--description-height);
  overflow: hidden;
  font-size: var(--description-font-size);
}
@media (max-width: 768px) {
  .event-element .description {
    height: unset;
    max-height: var(--description-mobile-max-height);
  }
}
.event-element .date {
  grid-area: date;
  height: var(--date-height);
  overflow: hidden;
  font-size: var(--date-font-size);
}
@media (max-width: 768px) {
  .event-element .date {
    height: unset;
    max-height: var(--date-mobile-max-height);
  }
}
.event-element:hover .image img {
  transform: scale(1.1);
}
.event-element:hover .title {
  color: var(--color-green);
}
.citycard-element {
  display: flex;
  flex-direction: column;
}
.citycard-element > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
.citycard-element > .image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
}
.citycard-element > .image picture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.citycard-element > .image picture img {
  object-fit: cover;
  object-position: center center;
}
.citycard-element > .description {
  font-weight: 300;
}
.citycard-element > .information {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.citycard-element > .information > div {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-m);
  row-gap: var(--space-s);
}
.citycard-element > .information > div .name {
  font-weight: bold;
  white-space: nowrap;
}
.citycard-element > .information > div .value {
  font-weight: 300;
}
.citycard-element > .information > div a {
  color: var(--color-green);
}
.citycard-element > .title,
.citycard-element > .image,
.citycard-element > .description {
  margin-bottom: var(--space-l);
}
.competition-element {
  position: relative;
  padding: var(--space-m);
  border-radius: 4px;
  background-color: var(--color-white);
}
.competition-element > .logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 35%;
  max-height: calc(20px + 30px + 40px + 24px + 20px + 24px + 20px + 24px);
  text-align: right;
}
.competition-element > .logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.competition-element > .title {
  font-size: 20px;
  line-height: 30px;
  font-weight: bold;
  margin-right: calc(35% + var(--space-m));
}
.competition-element > .information {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.competition-element > .information > div .name {
  float: left;
  font-weight: bold;
  margin-right: var(--space-m);
}
.competition-element > .information > div .value {
  font-weight: 300;
}
.competition-element > .information .beneficiary-name,
.competition-element > .information .amount,
.competition-element > .information .rate-precent {
  margin-right: calc(35% + var(--space-m));
}
.competition-element > .title {
  margin-bottom: var(--space-l);
}
.document-category-element {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  background-color: var(--color-white);
  border: 2px solid rgba(72, 72, 72, 0.2);
}
.document-category-element::after {
  content: "";
  position: absolute;
  bottom: var(--space-s);
  right: var(--space-s);
  height: 11px;
  width: 11px;
  border-color: var(--color-green);
  border-width: 0 3px 3px 0;
  border-style: solid;
  transition: border 256ms;
}
.document-category-element > .image {
  flex-shrink: 0;
}
.document-category-element > .title {
  color: var(--color-green);
  font-weight: bold;
  max-height: 48px;
  overflow: hidden;
}
.document-category-element.small::after {
  border-width: 0 2px 2px 0;
  height: 5px;
  width: 5px;
}
.document-category-element.small > .title {
  font-size: 12px;
}
.document-element {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  background-color: var(--color-white);
  border: 2px solid var(--color-gray-transparent-02);
}
.document-element::after {
  content: "";
  position: absolute;
  bottom: var(--space-xs);
  right: var(--space-xs);
  height: 11px;
  width: 11px;
  border-color: var(--color-green);
  border-width: 0 3px 3px 0;
  border-style: solid;
  transition: border 256ms;
}
.document-element .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.publication-element {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  background-color: var(--color-white);
  border: 2px solid rgba(72, 72, 72, 0.2);
}
.publication-element::after {
  content: "";
  position: absolute;
  bottom: var(--space-s);
  right: var(--space-s);
  height: 11px;
  width: 11px;
  border-color: var(--color-green);
  border-width: 0 3px 3px 0;
  border-style: solid;
  transition: border 256ms;
}
.publication-element > .image {
  flex-shrink: 0;
}
.publication-element > .title {
  color: var(--color-green);
  font-weight: bold;
  max-height: 48px;
  overflow: hidden;
}
.publication-element.small::after {
  border-width: 0 2px 2px 0;
  height: 5px;
  width: 5px;
}
.publication-element.small > .title {
  font-size: 12px;
}
#szechenyi {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  border-top-left-radius: 150px;
  z-index: 10;
}
#szechenyi img {
  pointer-events: none;
  height: 150px;
}

#szechenyiplusz {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;

  z-index: 10;
}
#szechenyiplusz img {
  pointer-events: none;
  height: 100px;
}



.documentBrowser {
  --gap: var(--space-s);
  --padding: var(--space-s);
  --border-bottom: 1px solid var(--color-grey-transparent-02);
}
.documentBrowser .content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.documentBrowser .documents,
.documentBrowser .folders {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.documentBrowser .folder {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.documentBrowser .folder .cover {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap);
  padding: var(--padding);
  border-bottom: var(--border-bottom);
  transition: text-shadow 256ms;
}
.documentBrowser .folder .cover .arrow-below {
  display: none;
}
.documentBrowser .folder .cover .count {
  color: var(--color-green);
  pointer-events: none;
}
.documentBrowser .folder .cover .arrow {
  transition: 256ms;
  margin-left: auto;
  pointer-events: none;
}
.documentBrowser .folder .cover:hover {
  cursor: pointer;
  text-shadow: 1px 0 0 currentColor;
}
.documentBrowser .folder > .documents,
.documentBrowser .folder > .folders {
  display: none;
}
.documentBrowser .folder > .documents > .folder > .cover .arrow-below,
.documentBrowser .folder > .folders > .folder > .cover .arrow-below,
.documentBrowser .folder > .documents > .document .arrow-below,
.documentBrowser .folder > .folders > .document .arrow-below {
  display: block;
}
.documentBrowser .folder.show > .cover {
  text-shadow: 1px 0 0 currentColor;
}
.documentBrowser .folder.show > .cover .arrow {
  transform: rotate(90deg);
}
.documentBrowser .folder.show > .documents,
.documentBrowser .folder.show > .folders {
  display: flex;
  padding-left: var(--padding);
}
.documentBrowser .document {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap);
  padding: var(--padding);
  border-bottom: var(--border-bottom);
  text-decoration: none;
  color: var(--color-gray);
  transition: text-shadow 256ms;
}
.documentBrowser .document .arrow-below {
  display: none;
}
.documentBrowser .document .file {
  margin-left: auto;
  pointer-events: none;
}
.documentBrowser .document:hover {
  cursor: pointer;
  text-shadow: 1px 0 0 currentColor;
}
.gallery-viewer {
  /** MOBILE */
}
.gallery-viewer .gallery-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  padding: calc(var(--space-l) * 2 + 24px) calc(var(--space-l) * 6 + 24px);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
}
.gallery-viewer .gallery-layout.active {
  opacity: 1;
  pointer-events: all;
}
.gallery-viewer .gallery-layout > .close {
  position: absolute;
  top: var(--space-l);
  right: var(--space-l);
  opacity: 0.75;
  transition: opacity 256ms;
  cursor: pointer;
}
.gallery-viewer .gallery-layout > .close:hover {
  opacity: 1;
}
.gallery-viewer .gallery-layout .main-image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery-viewer .gallery-layout .main-image .imageWrapper {
  position: relative;
  height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
}
.gallery-viewer .gallery-layout .main-image .imageWrapper .title,
.gallery-viewer .gallery-layout .main-image .imageWrapper .copyright {
  margin-right: 0;
  margin-left: auto;
  color: white;
  text-align: right;
}
.gallery-viewer .gallery-layout .main-image .imageWrapper img {
  max-width: 100%;
  max-height: 100%;
}
.gallery-viewer .gallery-layout .prev-button,
.gallery-viewer .gallery-layout .next-button {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 256ms;
}
.gallery-viewer .gallery-layout .prev-button.active,
.gallery-viewer .gallery-layout .next-button.active {
  cursor: pointer;
  opacity: 0.75;
  pointer-events: all;
}
.gallery-viewer .gallery-layout .prev-button.active:hover,
.gallery-viewer .gallery-layout .next-button.active:hover {
  opacity: 1;
}
.gallery-viewer .gallery-layout .prev-image {
  position: absolute;
  top: 50%;
  right: calc(100% - calc(var(--space-l) * 4 + 24px));
  opacity: 0;
  pointer-events: none;
  width: 20%;
}
.gallery-viewer .gallery-layout .prev-image picture {
  display: flex;
  height: 0;
  margin-top: calc(-1 * (100% / 16 * 9) / 2);
  padding-top: calc(100% / 16 * 9);
  position: relative;
  width: 100%;
}
.gallery-viewer .gallery-layout .prev-image picture img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center center;
}
.gallery-viewer .gallery-layout .prev-image.active {
  opacity: 1;
}
.gallery-viewer .gallery-layout .next-image {
  position: absolute;
  top: 50%;
  left: calc(100% - calc(var(--space-l) * 4 + 24px));
  opacity: 0;
  pointer-events: none;
  width: 20%;
}
.gallery-viewer .gallery-layout .next-image picture {
  display: flex;
  height: 0;
  margin-top: calc(-1 * (100% / 16 * 9) / 2);
  padding-top: calc(100% / 16 * 9);
  position: relative;
  width: 100%;
}
.gallery-viewer .gallery-layout .next-image picture img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center center;
}
.gallery-viewer .gallery-layout .next-image.active {
  opacity: 1;
}
@media (max-width: 1199px) {
  .gallery-viewer .gallery-layout {
    padding: calc(var(--space-s) * 2 + 24px) calc(var(--space-s) * 3);
    gap: var(--space-s);
  }
  .gallery-viewer .gallery-layout > .close {
    top: var(--space-s);
    right: var(--space-s);
  }
  .gallery-viewer .gallery-layout .next-image {
    left: calc(100% - var(--space-m));
  }
  .gallery-viewer .gallery-layout .prev-image {
    right: calc(100% - var(--space-m));
  }
}
/*
.gallery-layout {

	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 200;

	background-color: rgba( 0, 0, 0, 0.60 );
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );

	opacity: 0;
	pointer-events: none;


	picture.close {

		cursor: pointer;

		position: absolute;
		top: var( --space-l );
		right: var( --space-l )

	}

	.main-image {

		position: absolute;
		top: 5%;
		left: 15%;
		height: 90%;
		width: 70%;

		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;


		img {

			max-width: 100%;
			max-height: 100%;

		}

		.title {

			align-items: center;
			color: var( --color-white );
			display: flex;
			font-size: var( --font-xs );
			font-weight: 700;
			height: calc( var( --font-xs ) * 2 * 1.5 );
			justify-content: flex-end;
			line-height: 1.5;
			margin-bottom: var( --space-m );
			overflow: hidden;
			text-align: right;
			width: 100%

		}

		.copyright {

			color: var( --color-white );
			font-size: var( --font-xs );
			font-weight: 700;
			height: calc( var( --font-xs ) * 2 * 1.5 );
			line-height: 1.5;
			margin-top: var( --space-m );
			overflow: hidden;
			text-align: right;
			width: 100%

		}

	}

	.prev-button {

		cursor: pointer;
		position: absolute;
		right: calc( 85% + var( --space-l ) );
		top: calc( 50% - 12px );
		opacity: 0.25;
		pointer-events: none;


		&.active {

			opacity: 1;
			pointer-events: all;

		}

	}

	.next-button {

		cursor: pointer;
		position: absolute;
		left: calc( 85% + var( --space-l ) );
		top: calc( 50% - 12px );
		opacity: 0.25;
		pointer-events: none;


		&.active {

			opacity: 1;
			pointer-events: all;

		}

	}

	.prev-image {

		position: absolute;
		top: 50%;
		right: calc( 85% + var( --space-l ) + 24px + var( --space-l ) );
		opacity: 0;
		pointer-events: none;
		width: 20%;


		picture {

			display: flex;
			height: 0;
			margin-top: calc( -1 * ( 100% / 16 * 9 ) / 2 );
			padding-top: calc( 100% / 16 * 9 );
			position: relative;
			width: 100%;


			img {

				position: absolute;
				left: 0;
				top: 0;

				object-fit: cover;
				object-position: center center;

			}

		}

		&.active {

			opacity: 1;
			pointer-events: all;

		}

	}

	.next-image {

		position: absolute;
		top: 50%;
		left: calc( 85% + var( --space-l ) + 24px + var( --space-l ) );
		opacity: 0;
		pointer-events: none;
		width: 20%;


		picture {

			display: flex;
			height: 0;
			margin-top: calc( -1 * ( 100% / 16 * 9 ) / 2 );
			padding-top: calc( 100% / 16 * 9 );
			position: relative;
			width: 100%;


			img {

				position: absolute;
				left: 0;
				top: 0;

				object-fit: cover;
				object-position: center center;

			}

		}

		&.active {

			opacity: 1;
			pointer-events: all;

		}

	}

	&.active {

		opacity: 1;
		pointer-events: all;

	}

}
*/
.popup-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  align-items: center;
  display: flex;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 256ms;
}
.popup-wrapper.active {
  opacity: 1;
  pointer-events: all;
}
.popup {
  background-color: var(--color-white);
  border-radius: var(--space-s);
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.25);
  max-width: calc(100vw - var(--space-l));
  min-width: 320px;
  padding: var(--space-xl);
  position: relative;
}
.popup .close {
  cursor: pointer;
  position: absolute;
  right: var(--space-m);
  top: var(--space-m);
}
.popup .title {
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;
  text-align: center;
}
.connected-links {
  display: grid;
  grid-gap: var(--space-m);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.connected-links a {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m);
  border: 2px solid rgba(72, 72, 72, 0.4);
  transition: border-color 256ms;
}
.connected-links a:hover {
  border-color: var(--color-green);
}
.connected-links a .icon {
  margin-left: auto;
}
.connected-galleries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}
.connected-galleries > a {
  display: flex;
}
.connected-galleries > a .gallery-image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
}
.connected-galleries > a .gallery-image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/** MOBILE */
@media (max-width: 1199px) {
  .connected-galleries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.connected-sponsor-image {
  width: 100%;
  display: flex;
  justify-content: center;
}
.connected-sponsor-image img {
  max-width: 100%;
}
.connected-youtube-video {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
}
.connected-youtube-video iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.connected-documents {
  --gap: var(--space-s);
  --padding: var(--space-s);
  --border-bottom: 1px solid var(--color-grey-transparent-02);
}
.connected-documents .caption {
  color: var(--color-green);
  font-weight: 700;
  margin-bottom: var(--space-m);
}
.connected-documents .content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.connected-documents .documents {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.connected-documents .document {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap);
  padding: var(--padding);
  border-bottom: var(--border-bottom);
  text-decoration: none;
  color: var(--color-gray);
  transition: text-shadow 256ms;
}
.connected-documents .document .file {
  margin-left: auto;
  pointer-events: none;
}
.connected-documents .document:hover {
  cursor: pointer;
  text-shadow: 1px 0 0 currentColor;
}
.connected-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.connected-poster {
  width: 100%;
  display: flex;
  justify-content: center;
}
.connected-poster > picture {
  position: relative;
}
.connected-poster > picture:hover {
  cursor: pointer;
}
.connected-poster > picture img {
  max-width: 100%;
}
.connected-poster > picture .category {
  position: absolute;
  top: var(--space-l);
  right: 0;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--font-xs);
}
.connected-poster > picture .date {
  position: absolute;
  bottom: var(--space-l);
  right: 0;
  padding: var(--space-xs) var(--space-s);
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.95);
}
.connected-poster-zoom {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  visibility: hidden;
  opacity: 0;
}
.connected-poster-zoom.--active {
  visibility: visible;
  opacity: 1;
}
.connected-poster-zoom .close {
  position: absolute;
  top: var(--space-l);
  right: var(--space-l);
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.connected-poster-zoom .image {
  position: absolute;
  max-width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.connected-poster-zoom .image .title {
  pointer-events: none;
  align-items: center;
  color: var(--color-white);
  display: flex;
  font-size: var(--font-xs);
  font-weight: 700;
  height: calc(var(--font-xs) * 2 * 1.5);
  justify-content: flex-end;
  line-height: 1.5;
  margin-bottom: var(--space-m);
  overflow: hidden;
  text-align: right;
  width: 100%;
}
.connected-poster-zoom .image .poster {
  pointer-events: none;
  width: 100%;
  max-height: 85%;
}
.connected-poster-zoom .image .copyright {
  pointer-events: none;
  color: var(--color-white);
  font-size: var(--font-xs);
  font-weight: 700;
  height: calc(var(--font-xs) * 2 * 1.5);
  line-height: 1.5;
  margin-top: var(--space-m);
  overflow: hidden;
  text-align: right;
  width: 100%;
}
.connected-gdpr-notice {
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-gray);
}
.connected-gdpr-notice a {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--color-gray);
  font-weight: 700;
}
#pages-search #main .result-element {
  padding: var(--space-s);
}
#pages-search #main .result-element .category {
  display: inline-block;
  margin-bottom: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  font-size: var(--font-xs);
}
#pages-search #main .result-element .title {
  overflow: hidden;
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 24px;
  transition: color 256ms;
  margin-bottom: var(--space-m);
}
#pages-search #main .result-element .divider {
  height: 1px;
  background-color: var(--color-gray);
}
#pages-search #main .result-element:hover .title {
  color: var(--color-green);
}
#pages-search #main .result-element.--title-min-height-1 .title {
  min-height: 24px;
}
#pages-search #main .result-element.--title-min-height-2 .title {
  min-height: 48px;
}
#pages-search #main .result-element.--title-min-height-3 .title {
  min-height: 72px;
}
#pages-search #main .result-element.--title-max-height-1 .title {
  max-height: 24px;
}
#pages-search #main .result-element.--title-max-height-2 .title {
  max-height: 48px;
}
#pages-search #main .result-element.--title-max-height-3 .title {
  max-height: 72px;
}
body.default {
  background-color: var(--color-grey-transparent-02);
}
@media (max-width: 1199px) {
  body.default {
    background-color: unset;
  }
}
#layout {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#layout.home {
  grid-template-areas: 'main main main main';
  grid-template-rows: 1fr;
}
#layout.alternative {
  grid-template-areas: 'toolbar toolbar toolbar toolbar' 'main main main main';
  grid-template-rows: auto 1fr;
  width: 100%;
  max-width: 940px;
  margin: auto;
}
#layout.default {
  grid-template-areas: 'sidebar toolbar toolbar toolbar' 'sidebar main main main';
  grid-template-rows: auto 1fr;
  width: 100%;
  max-width: 940px;
  margin: auto;
}
@media (max-width: 1199px) {
  #layout.default {
    grid-template-areas: 'toolbar toolbar toolbar toolbar' 'sidebar sidebar sidebar sidebar' 'main main main main';
    padding: 0 var(--space-s);
    max-width: 960px;
  }
  #layout.alternative {
    padding: 0 var(--space-s);
    max-width: 960px;
  }
}
#sidebar {
  grid-area: sidebar;
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}
#sidebar .back-element {
  margin-bottom: var(--space-l);
}
#sidebar .title {
  margin-right: calc(var(--space-l) + var(--space-s) + var(--space-s));
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-m);
  color: var(--color-green);
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  border-bottom: 1px solid var(--color-gray);
}
#sidebar .articles {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-l);
}
#sidebar .links {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
#sidebar .links a {
  margin-left: calc(-1 * var(--space-m));
  padding: var(--space-m);
  font-size: 12px;
  line-height: 16px;
  transition: background-color 256ms;
}
#sidebar .links a.active {
  font-weight: bold;
  color: var(--color-white);
  background-color: var(--color-green);
}
#sidebar .links a:not(.active):hover {
  background-color: var(--color-grey);
}
@media (max-width: 1199px) {
  #sidebar {
    padding-top: 0;
    padding-bottom: var(--space-m);
  }
  #sidebar.default {
    background-color: var(--color-white);
  }
  #sidebar.default .back-element,
  #sidebar.default .title {
    display: none;
  }
  #sidebar.default .articles,
  #sidebar.default .links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }
  #sidebar.default .links a {
    margin-left: 0;
  }
}
#toolbar {
  grid-area: toolbar;
}
#toolbar.default {
  background-color: var(--color-white);
  display: flex;
  gap: var(--space-l);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-l);
  min-height: 24px;
}
#toolbar.default .back-element {
  display: none;
}
#toolbar.alternative {
  display: flex;
  gap: var(--space-l);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-l) 0;
  min-height: 24px;
}
@media (max-width: 1199px) {
  #toolbar.default {
    padding: var(--space-m) 0;
  }
  #toolbar.default .back-element {
    display: flex;
  }
  #toolbar.alternative {
    padding: var(--space-m) 0;
  }
}
#main {
  grid-area: main;
}
#main.default {
  min-height: calc(100vh - calc(154px + 262px + 104px));
  padding: 0 var(--space-l);
  padding-bottom: var(--space-l);
  background-color: var(--color-white);
}
#main.alternative {
  min-height: calc(100vh - calc(154px + 262px + 104px));
  padding-bottom: var(--space-l);
}
@media (max-width: 1199px) {
  #main.default {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: var(--space-m);
  }
  #main.alternative {
    padding-bottom: var(--space-m);
  }
}
#pages-index #main {
  --section-inner-padding: var(--space-l) 0;
  --title-margin-bottom: calc(var(--space-m) + var(--space-s));
  --title-all-gap: var(--space-s);
  display: flex;
  flex-direction: column;
}
#pages-index #main section {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1199px) {
  #pages-index #main section {
    padding: 0 var(--space-s);
  }
}
#pages-index #main section:nth-child(2n) {
  background-color: var(--color-grey-transparent-02);
}
#pages-index #main section .inner {
  width: 100%;
  max-width: 940px;
  margin: auto;
  padding: var(--section-inner-padding);
}
#pages-index #main section .inner > .title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--title-all-gap);
  margin-bottom: var(--title-margin-bottom);
}
#pages-index #main section .inner > .title h2 {
  position: relative;
  font-size: 27px;
  line-height: 32px;
  font-weight: bold;
  text-align: center;
}
#pages-index #main section .inner > .title h2 .square {
  position: relative;
  height: 32px;
}
#pages-index #main section .inner > .title h2 .square:before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-12px + -2.5px);
  width: 12px;
  height: 12px;
  background-color: var(--color-green);
}
#pages-index #main section .inner > .title a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.5px;
  overflow: hidden;
}
#pages-index #main section .inner > .title a .icon {
  width: 15px;
  height: 15px;
}
#pages-index #main section .inner > .title a:hover .icon img {
  animation: arrow-animation 0.5s;
}
@media (max-width: 768px) {
  #pages-index #main section .inner > .title a {
    position: static;
    align-self: flex-end;
  }
}
#pages-index #main section.articles {
  --categories-margin-bottom: calc(var(--space-m) + var(--space-s));
  --categories-column-gap: var(--space-l);
  --categories-row-gap: var(--space-l);
  --group-column-gap: var(--space-m);
  --group-row-gap: calc(var(--space-m));
}
#pages-index #main section.articles .inner .title .all {
  display: none;
}
#pages-index #main section.articles .categories {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--categories-column-gap);
  row-gap: var(--categories-row-gap);
  margin-bottom: var(--categories-margin-bottom);
}
#pages-index #main section.articles .categories a {
  cursor: pointer;
  transition: text-shadow 256ms;
}
#pages-index #main section.articles .categories a[data-active="true"] {
  text-shadow: 0px 0px 1px var(--color-gray);
}
#pages-index #main section.articles .categories a[disabled] {
  color: var(--color-gray-transparent-02);
  pointer-events: none;
}
#pages-index #main section.articles .categories .indicator {
  position: absolute;
  height: 1px;
  background-color: var(--color-green);
  transition: top 256ms, left 256ms, width 256ms;
}
#pages-index #main section.articles .groups .group {
  display: none;
}
#pages-index #main section.articles .groups .group[data-active="true"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: var(--group-row-gap);
  column-gap: var(--group-column-gap);
}
@media (max-width: 1199px) {
  #pages-index #main section.articles .groups .group[data-active="true"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  #pages-index #main section.articles .groups .group[data-active="true"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
#pages-index #main section.articles .groups .group a .article-element {
  box-sizing: border-box;
  height: 100%;
}
#pages-index #main section.articles .groups .group a .article-element.small {
  margin: 0 calc(-1 * var(--space-xs));
}
#pages-index #main section.mayor .inner {
  padding-bottom: 0;
}
@media (max-width: 1199px) {
  #pages-index #main section.mayor .inner {
    padding: var(--section-inner-padding);
  }
}
#pages-index #main section.mayor .content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-m);
}
@media (max-width: 1199px) {
  #pages-index #main section.mayor .content {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
#pages-index #main section.mayor .content .image {
  position: relative;
}
#pages-index #main section.mayor .content .image > img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: calc(100% - var(--space-s));
  width: auto;
  margin: auto;
  margin-bottom: var(--space-s);
}
@media (max-width: 1199px) {
  #pages-index #main section.mayor .content .image > img {
    position: static;
    height: auto;
    width: 50%;
  }
}
@media (max-width: 768px) {
  #pages-index #main section.mayor .content .image > img {
    width: 75%;
    margin-bottom: 35px;
  }
}
#pages-index #main section.mayor .content .image .stand {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  margin: auto;
  padding: var(--space-m) 0 var(--space-s) 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1199px) {
  #pages-index #main section.mayor .content .image .stand {
    width: 75%;
  }
}
@media (max-width: 768px) {
  #pages-index #main section.mayor .content .image .stand {
    width: 100%;
  }
}
#pages-index #main section.mayor .content .image .stand img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
#pages-index #main section.mayor .content .image .stand .name {
  z-index: 1;
  text-align: center;
  font-size: var(--font-l);
  color: var(--color-white);
}
#pages-index #main section.mayor .content .image .stand .title {
  z-index: 1;
  text-align: center;
  font-size: var(--font-s);
  color: var(--color-white);
}
#pages-index #main section.mayor .content .introduction {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-m);
}
@media (max-width: 1199px) {
  #pages-index #main section.mayor .content .introduction {
    align-items: center;
  }
}
#pages-index #main section.mayor .content .introduction .greeting-title {
  margin-bottom: var(--space-xs);
  color: var(--color-green);
  font-weight: bold;
}
@media (max-width: 1199px) {
  #pages-index #main section.mayor .content .introduction .greeting-title {
    text-align: center;
  }
}
#pages-index #main section.mayor .content .introduction .greeting-quote {
  margin-bottom: calc(var(--space-m) + var(--space-s));
}
@media (max-width: 1199px) {
  #pages-index #main section.mayor .content .introduction .greeting-quote {
    text-align: center;
  }
}
#pages-index #main section.mayor .content .introduction .poem-title {
  margin-bottom: var(--space-xs);
  font-weight: bold;
  font-size: var(--font-l);
}
@media (max-width: 1199px) {
  #pages-index #main section.mayor .content .introduction .poem-title {
    text-align: center;
  }
}
#pages-index #main section.mayor .content .introduction .poem-quote-wrapper {
  display: flex;
  margin-bottom: calc(var(--space-s) + var(--space-xs));
}
#pages-index #main section.mayor .content .introduction .poem-quote-wrapper .quote .poem-author {
  margin-top: var(--space-xs);
  text-align: right;
  font-weight: bold;
}
#pages-index #main section.events .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#pages-index #main section.gallery .group {
  display: grid;
  grid-template-areas: repeat(4, minmax(0, 1fr));
  gap: var(--space-m);
}
@media (max-width: 1199px) {
  #pages-index #main section.gallery .group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  #pages-index #main section.gallery .group {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
#pages-index #main section.gallery .group a:first-child {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
@media (max-width: 1199px) {
  #pages-index #main section.gallery .group a:first-child {
    grid-column: unset;
    grid-row: unset;
  }
}
#pages-index #main section.gallery .group a:nth-child(4) {
  grid-column: 3 / 5;
  grid-row: 2 / 4;
}
@media (max-width: 1199px) {
  #pages-index #main section.gallery .group a:nth-child(4) {
    grid-column: unset;
    grid-row: unset;
  }
}
#pages-index #main section.gallery .group a .gallery_image {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  overflow: hidden;
}
#pages-index #main section.gallery .group a .gallery_image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
  transition: transform 256ms;
}
#pages-index #main section.gallery .group a:hover .gallery_image img {
  transform: scale(1.1);
}
#pages-index #main section.videos .inner {
  max-width: unset;
}
#pages-index #main section.videos .slide {
  overflow: hidden;
}
#pages-index #main section.videos .slide .videos {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: margin-left 1s;
}
#pages-index #main section.videos .slide .videos .video {
  box-sizing: border-box;
  width: 940px;
  padding: 0 var(--space-xl);
  transition: padding 1s;
}
@media (max-width: 1199px) {
  #pages-index #main section.videos .slide .videos .video {
    width: 100%;
    padding: 0;
  }
}
#pages-index #main section.videos .slide .videos .video[data-active="true"] {
  padding: 0;
}
#pages-index #main section.videos .slide .videos .video div.iframe {
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  max-width: 940px;
  margin: auto;
  position: relative;
}
#pages-index #main section.videos .slide .videos .video div.iframe iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
#pages-index #main section.videos .toolbar {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--space-m) + var(--space-s));
}
#pages-index #main section.videos .toolbar.hide {
  display: none;
}
#pages-index #main section.videos .toolbar .buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
#pages-index #main section.videos .toolbar .buttons button {
  flex-grow: 1;
}
@media (max-width: 768px) {
  #pages-index #main section.videos .toolbar .buttons button span {
    display: none;
  }
}
#pages-index #main section.links {
  --image-padding: var(--space-l);
}
#pages-index #main section.links .group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}
@media (max-width: 1199px) {
  #pages-index #main section.links .group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  #pages-index #main section.links .group {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
#pages-index #main section.links .group a {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  background-color: var(--color-white);
}
#pages-index #main section.links .group a picture {
  position: absolute;
  top: var(--image-padding);
  bottom: var(--image-padding);
  left: var(--image-padding);
  right: var(--image-padding);
  height: calc(100% - calc(2 * var(--image-padding)));
  width: calc(100% - calc(2 * var(--image-padding)));
}
#pages-index #main section.links .group a picture img {
  object-fit: contain;
  object-position: center;
  transition: transform 256ms;
}
#pages-index #main section.links .group a:hover picture img {
  transform: scale(1.1);
}
#pages-index #main section.documents .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#pages-index #main section.application .introduction {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 60px;
  padding: 0 100px;
}
@media (max-width: 768px) {
  #pages-index #main section.application .introduction {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  #pages-index #main section.application .introduction {
    padding: 0;
  }
}
#pages-index #main section.application .introduction .left .description {
  text-align: center;
  margin-bottom: var(--space-m);
}
#pages-index #main section.application .introduction .left .download {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#pages-index #main section.application .introduction .left .download .text {
  text-align: center;
  margin-bottom: var(--space-l);
}
@media (max-width: 768px) {
  #pages-index #main section.application .introduction .left .download .text br {
    display: none;
  }
}
#pages-index #main section.application .introduction .left .download .qrcode {
  margin-bottom: var(--space-l);
  padding: calc(var(--space-s) + var(--space-xs));
  background-color: var(--color-white);
  border-radius: 12.5%;
}
#pages-index #main section.application .introduction .left .download .link {
  margin-bottom: var(--space-l);
  margin-top: calc(2 * var(--space-l));
  font-weight: bold;
  cursor: pointer;
}
#pages-index #main section.application .introduction .left .download .text.hide,
#pages-index #main section.application .introduction .left .download .qrcode.hide,
#pages-index #main section.application .introduction .left .download .link.hide {
  display: none;
}
#pages-index #main section.application .introduction .right {
  position: relative;
  margin-bottom: -40px;
  overflow: hidden;
}
@media (max-width: 768px) {
  #pages-index #main section.application .introduction .right {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}
#pages-index #main section.application .introduction .right img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#pages-nav #main .group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
#pages-nav #main .group a {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-xl) var(--space-m) var(--space-m) var(--space-m);
  border: 2px solid rgba(72, 72, 72, 0.4);
}
#pages-nav #main .group a span {
  height: 48px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--color-green);
  font-size: 12px;
  font-weight: bold;
}
#pages-nav #main .group a .icon {
  flex-shrink: 0;
  margin-top: 4px;
  margin-bottom: 4px;
}
@media (max-width: 1199px) {
  #pages-nav #main .group a {
    padding: var(--space-l) var(--space-s) var(--space-s) var(--space-s);
  }
}
#pages-display #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#pages-display #main > .image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
}
#pages-display #main > .image picture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#pages-display #main > .image picture img {
  object-fit: cover;
  object-position: center center;
}
#pages-display #main > .title,
#pages-display #main > .image,
#pages-display #main > .content,
#pages-display #main > .connected-galleries {
  margin-bottom: var(--space-l);
}
#pages-imprint #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#pages-imprint #main > .information {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#pages-imprint #main > .information > div {
  font-weight: 300;
}
#pages-imprint #main > .information > div .name {
  float: left;
  font-weight: bold;
  margin-right: var(--space-m);
}
#pages-imprint #main > .information > .appentum span {
  font-weight: bold;
}
#pages-imprint #main > .title {
  margin-bottom: var(--space-l);
}
#pages-search #main .articles,
#pages-search #main .events,
#pages-search #main .documents,
#pages-search #main .pages,
#pages-search #main .results {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#pages-sitemap #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
  margin-bottom: var(--space-l);
}
#pages-sitemap #main .group > .navigation {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
#pages-sitemap #main .group.lvl-0 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}
#pages-sitemap #main .group.lvl-0 > .navigation {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
}
#pages-sitemap #main .group.lvl-0 > .navigation > .title {
  font-weight: bold;
  color: var(--color-green);
}
#pages-sitemap #main .group.lvl-1,
#pages-sitemap #main .group.lvl-2 {
  display: flex;
  flex-direction: column;
  margin-left: var(--space-s);
}
#pages-sitemap #main .group.lvl-1 > .navigation > .title,
#pages-sitemap #main .group.lvl-2 > .navigation > .title {
  transition: color 256ms;
}
#pages-sitemap #main .group.lvl-1 > .navigation > .title:hover,
#pages-sitemap #main .group.lvl-2 > .navigation > .title:hover {
  color: var(--color-green);
}
#pages-sitemap #main .group.lvl-1 {
  gap: var(--space-s);
}
#pages-sitemap #main .group.lvl-1 > .navigation {
  gap: var(--space-xs);
}
#pages-sitemap #main .group.lvl-1 > .navigation > .title {
  font-weight: 400;
}
#pages-sitemap #main .group.lvl-2 {
  gap: var(--space-s);
}
#pages-sitemap #main .group.lvl-2 > .navigation > .title {
  font-weight: 300;
}
#articles-index #main .categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
  opacity: 0;
  visibility: hidden;
  transition: opacity 512ms;
}
#articles-index #main .categories.show {
  opacity: 1;
  visibility: visible;
}
#articles-index #main .categories button {
  display: block;
  margin: 0 !important;
  padding: 4px var(--space-s);
  background-color: var(--color-grey);
  color: var(--color-white);
  font-size: 12px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color 256ms;
}
#articles-index #main .categories button[data-empty="true"] {
  display: none;
}
#articles-index #main .categories button[data-active="true"] {
  background-color: var(--color-gray);
}
#articles-index #main .categories a {
  height: 32px;
  box-sizing: border-box;
  display: block;
  padding: 4px var(--space-s);
  background-color: var(--color-grey);
  color: var(--color-white);
  font-size: 12px;
  line-height: 24px;
  -webkit-text-size-adjust: 100%;
}
#articles-index #main .results:not(.archive) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
@media (max-width: 1199px) {
  #articles-index #main .results:not(.archive) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
#articles-index #main .results.archive {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#articles-index #main .results.archive .year,
#articles-index #main .results.archive .month {
  --year_group-margin-left: var(--space-s);
  --year_group-margin-left-mobile: 0;
  --year_name-background-color: var(--color-green);
  --month_group-margin-left: var(--space-m);
  --month_name-background-color: rgba(39, 176, 108, 0.6);
  --month_group-margin-left-mobile: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#articles-index #main .results.archive .year > .name,
#articles-index #main .results.archive .month > .name {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  border: 2px solid var(--color-green);
  cursor: pointer;
  transition: background-color 256ms, color 256ms;
}
#articles-index #main .results.archive .year > .name .image,
#articles-index #main .results.archive .month > .name .image {
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: url(https://kornye.onkormdev.pro-developers.hu/kornye/img/icon/arrow-right.svg);
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 256ms;
}
#articles-index #main .results.archive .year.open > .name,
#articles-index #main .results.archive .month.open > .name {
  border: 2px solid transparent;
  color: var(--color-white);
}
#articles-index #main .results.archive .year.open > .name .image,
#articles-index #main .results.archive .month.open > .name .image {
  background: url(https://kornye.onkormdev.pro-developers.hu/kornye/img/icon/arrow-right-white.svg);
  transform: rotate(90deg);
}
#articles-index #main .results.archive .year > .group {
  display: none;
}
#articles-index #main .results.archive .year.open > .name {
  background-color: var(--year_name-background-color);
}
#articles-index #main .results.archive .year.open > .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-left: var(--year_group-margin-left);
}
#articles-index #main .results.archive .month > .group {
  display: none;
}
#articles-index #main .results.archive .month.open > .name {
  background-color: var(--month_name-background-color);
}
#articles-index #main .results.archive .month.open > .group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
  margin-left: var(--month_group-margin-left);
}
@media (max-width: 1199px) {
  #articles-index #main .results.archive .year.open > .group {
    margin-left: var(--year_group-margin-left-mobile);
  }
  #articles-index #main .results.archive .month.open > .group {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-left: var(--month_group-margin-left-mobile);
  }
}
#articles-view #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#articles-view #main > .image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
}
#articles-view #main > .image picture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#articles-view #main > .image picture img {
  object-fit: cover;
  object-position: center center;
}
#articles-view #main > .image .category {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space-xs) var(--space-s);
  font-size: 12px;
}
#articles-view #main > .image .date {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--space-xs) var(--space-s);
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.95);
}
#articles-view #main > .headline {
  font-weight: 600;
  text-align: justify;
}
#articles-view #main > .title,
#articles-view #main > .image,
#articles-view #main > .headline,
#articles-view #main > .content,
#articles-view #main > .connected-sponsor-image,
#articles-view #main > .connected-youtube-video,
#articles-view #main > .connected-links,
#articles-view #main > .connected-galleries,
#articles-view #main > .connected-events,
#articles-view #main > .connected-documents {
  margin-bottom: var(--space-l);
}
#articles-view #main #article-share {
  display: flex;
  justify-content: flex-end;
}
#citycards-index #main .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
#competitions-index, #competitions-indexperiod {
  background-color: var(--color-grey-transparent-02);
}
#competitions-index #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#competitions-index #main .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}


#competitions-index #main .group a {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-xl) var(--space-m) var(--space-m) var(--space-m);
  border: 2px solid rgba(72, 72, 72, 0.4);
}
#competitions-index #main .group a span {
  height: 48px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--color-green);
  font-size: 12px;
  font-weight: bold;
}
#competitions-index #main .group a .icon {
  flex-shrink: 0;
  margin-top: 4px;
  margin-bottom: 4px;
}
@media (max-width: 1199px) {
  #competitions-index #main .group a {
    padding: var(--space-l) var(--space-s) var(--space-s) var(--space-s);
  }
}










#competitions-index #main > .title {
  margin-bottom: var(--space-l);
}

#competitions-indexperiod #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#competitions-indexperiod #main .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
#competitions-indexperiod #main > .title {
  margin-bottom: var(--space-l);
}



#competitions-view #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#competitions-view #main > .information {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#competitions-view #main > .information > div .name {
  float: left;
  margin-right: var(--space-m);
  font-weight: bold;
}
#competitions-view #main > .information > div .value {
  font-weight: 300;
}
#competitions-view #main > .title,
#competitions-view #main > .information,
#competitions-view #main > .connected-galleries {
  margin-bottom: var(--space-l);
}
#events-index #main > .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#events-view #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#events-view #main > .image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
}
#events-view #main > .image picture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#events-view #main > .image picture img {
  object-fit: cover;
  object-position: center center;
}
#events-view #main > .image .category {
  position: absolute;
  top: var(--space-l);
  right: 0;
  padding: var(--space-xs) var(--space-s);
  font-size: 12px;
}
#events-view #main > .image .date {
  position: absolute;
  bottom: var(--space-l);
  right: 0;
  padding: var(--space-xs) var(--space-s);
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.95);
}
#events-view #main > .title,
#events-view #main > .connected-poster,
#events-view #main > .image,
#events-view #main > .content,
#events-view #main > .connected-gdpr-notice {
  margin-bottom: var(--space-l);
}
#documents-index #main .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
main#document h2 {
  margin-bottom: var(--space-l);
}
main#document .document-image {
  position: relative;
}
main#document .document-image-layout {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
}
main#document .document-image-layout button {
  color: var(--color-white);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: var(--space-m) var(--space-l);
}
main#document .document-image canvas {
  width: 100%;
}
#galleries-index #main .group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}
#galleries-index #main .group a {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
#galleries-index #main .group a .image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  overflow: hidden;
}
#galleries-index #main .group a .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 256ms;
}
#galleries-index #main .group a .title {
  font-weight: bold;
  transition: color 256ms;
}
#galleries-index #main .group a:hover .image img {
  transform: scale(1.1);
}
#galleries-index #main .group a:hover .title {
  color: var(--color-green);
}
#galleries-view #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
  text-align: center;
}
#galleries-view #main > .gallery-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
}
#galleries-view #main > .gallery-images > a img {
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  object-position: center;
  object-fit: cover;
}
@media (max-width: 1199px) {
  #galleries-view #main > .gallery-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#galleries-view #main > .title {
  margin-bottom: var(--space-l);
}
#problems-add #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#problems-add #main .user_name-wrapper .content input,
#problems-add #main .user_email-wrapper .content input,
#problems-add #main .user_phone-wrapper .content input,
#problems-add #main .description-wrapper .content input,
#problems-add #main .user_name-wrapper .content textarea,
#problems-add #main .user_email-wrapper .content textarea,
#problems-add #main .user_phone-wrapper .content textarea,
#problems-add #main .description-wrapper .content textarea {
  box-sizing: border-box;
  width: 100%;
  padding: calc(var(--space-m) * (2 / 3)) var(--space-m);
  color: var(--color-gray);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 0;
  outline: none;
  transition: border-color 256ms;
}
#problems-add #main .user_name-wrapper .content input:focus,
#problems-add #main .user_email-wrapper .content input:focus,
#problems-add #main .user_phone-wrapper .content input:focus,
#problems-add #main .description-wrapper .content input:focus,
#problems-add #main .user_name-wrapper .content textarea:focus,
#problems-add #main .user_email-wrapper .content textarea:focus,
#problems-add #main .user_phone-wrapper .content textarea:focus,
#problems-add #main .description-wrapper .content textarea:focus {
  border-color: var(--color-green);
}
#problems-add #main .user_name-wrapper .content textarea,
#problems-add #main .user_email-wrapper .content textarea,
#problems-add #main .user_phone-wrapper .content textarea,
#problems-add #main .description-wrapper .content textarea {
  resize: none;
}
#problems-add #main .user_name-wrapper .error-wrapper,
#problems-add #main .user_email-wrapper .error-wrapper,
#problems-add #main .user_phone-wrapper .error-wrapper,
#problems-add #main .description-wrapper .error-wrapper {
  display: none;
}
#problems-add #main .problem_category_id-wrapper > label {
  display: block;
  color: var(--color-green);
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  margin-bottom: var(--space-m);
}
#problems-add #main .problem_category_id-wrapper > .content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-m);
}
#problems-add #main .problem_category_id-wrapper > .content .radio {
  position: relative;
  height: 100%;
}
#problems-add #main .problem_category_id-wrapper > .content .radio input {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}
#problems-add #main .problem_category_id-wrapper > .content .radio input:checked + label {
  background-color: var(--color-green);
}
#problems-add #main .problem_category_id-wrapper > .content .radio input:checked + label span {
  color: var(--color-white);
}
#problems-add #main .problem_category_id-wrapper > .content .radio label {
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: calc(var(--space-m) * (2 / 3)) var(--space-m);
  border: 1px solid var(--color-green);
  cursor: pointer;
  transition: background-color 256ms;
}
#problems-add #main .problem_category_id-wrapper > .content .radio label span {
  display: flex;
  align-items: center;
  color: var(--color-green);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: color 256ms;
}
#problems-add #main .address-wrapper .content {
  display: flex;
  row-gap: var(--space-m);
  column-gap: var(--space-s);
}
#problems-add #main .address-wrapper .content .input {
  display: flex;
  column-gap: var(--space-m);
  row-gap: var(--space-s);
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  padding: calc(var(--space-m) * (2 / 3)) var(--space-m);
  color: var(--color-gray);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 0;
  outline: none;
  transition: border-color 256ms;
}
#problems-add #main .address-wrapper .content .input.active {
  border-color: var(--color-green);
}
#problems-add #main .address-wrapper .content .input label {
  flex-shrink: 0;
  font-weight: bold;
}
#problems-add #main .address-wrapper .content .input input {
  flex-grow: 1;
  color: var(--color-gray);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
  outline: none;
}
#problems-add #main .address-wrapper .content > button {
  padding: calc(var(--space-m) * (2 / 3)) var(--space-m);
  color: var(--color-white);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.2px;
  cursor: pointer;
}
@media (max-width: 1199px) {
  #problems-add #main .address-wrapper .content {
    flex-direction: column;
    align-items: flex-start;
  }
}
#problems-add #main .address-wrapper #address-map.active {
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  margin-top: var(--space-m);
}
#problems-add #main .pictures-wrapper .pictures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-m);
}
#problems-add #main .pictures-wrapper .pictures .input-picture {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-gray);
}
#problems-add #main .pictures-wrapper .pictures .input-picture .input-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#problems-add #main .pictures-wrapper .pictures .input-picture .input-container input {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
#problems-add #main .pictures-wrapper .pictures .picture {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
}
#problems-add #main .pictures-wrapper .pictures .picture img:not(.remove) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#problems-add #main .pictures-wrapper .pictures .picture .remove {
  position: absolute;
  top: 0;
  right: 0;
  margin: var(--space-s);
  cursor: pointer;
}
#problems-add #main .pictures-wrapper .pictures .picture .input-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
}
#problems-add #main .pictures-wrapper .pictures .picture .input-container input {
  pointer-events: none;
}

#problems-add #main .submit-wrapper {
  display: flex;
  justify-content: safe flex-start;
  gap: var(--space-m);
}
@media (max-width: 768px) {
  #problems-add #main .submit-wrapper {
    flex-direction: column;
  }
}
#problems-add #main .submit-wrapper #policy-wrapper {
  display: flex;
  gap: var(--space-m);
  align-items: center;
}
#problems-add #main .submit-wrapper #policy-wrapper .input {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
#problems-add #main .submit-wrapper #policy-wrapper .input .checked,
#problems-add #main .submit-wrapper #policy-wrapper .input .empty,
#problems-add #main .submit-wrapper #policy-wrapper .input input {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
#problems-add #main .submit-wrapper #policy-wrapper .input .checked,
#problems-add #main .submit-wrapper #policy-wrapper .input .empty {
  pointer-events: none;
}
#problems-add #main .submit-wrapper #policy-wrapper .input input {
  cursor: pointer;
  opacity: 0;
}
#problems-add #main .submit-wrapper #policy-wrapper .input .checked {
  opacity: 0;
  transition: opacity 256ms;
}
#problems-add #main .submit-wrapper #policy-wrapper .input input:checked ~ .checked {
  opacity: 1;
}
#problems-add #main .submit-wrapper #policy-wrapper label {
  cursor: pointer;
}
#problems-add #main .submit-wrapper #policy-wrapper label a {
  text-decoration: underline;
  color: var(--color-green);
  white-space: nowrap;
}
#problems-add #main .submit-wrapper button {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-left: auto;
  padding: calc(var(--space-m)) var(--space-l);
  color: var(--color-white);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.2px;
  cursor: pointer;
}
#problems-add #main > .title,
#problems-add #main .user_name-wrapper,
#problems-add #main .user_email-wrapper,
#problems-add #main .user_phone-wrapper,
#problems-add #main .problem_category_id-wrapper,
#problems-add #main .description-wrapper,
#problems-add #main .address-wrapper,
#problems-add #main .pictures-wrapper {
  margin-bottom: var(--space-l);
}
#publications-index #main .results {
  --year_group-margin-left: var(--space-s);
  --year_group-margin-left-mobile: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#publications-index #main .results .year {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
#publications-index #main .results .year > .name {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  border: 2px solid var(--color-green);
  cursor: pointer;
  transition: background-color 256ms, color 256ms;
}
#publications-index #main .results .year > .name .image {
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: url(https://kornye.onkormdev.pro-developers.hu/kornye/img/icon/arrow-right.svg);
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 256ms;
}
#publications-index #main .results .year > .group {
  display: none;
}
#publications-index #main .results .year.open > .name {
  border: 2px solid transparent;
  color: var(--color-white);
  background-color: var(--color-green);
}
#publications-index #main .results .year.open > .name .image {
  background: url(https://kornye.onkormdev.pro-developers.hu/kornye/img/icon/arrow-right-white.svg);
  transform: rotate(90deg);
}
#publications-index #main .results .year.open > .group {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-left: var(--year_group-margin-left);
}
@media (max-width: 1199px) {
  #publications-index #main .results .year.open > .group {
    margin-left: var(--year_group-margin-left-mobile);
  }
}
#publications-view #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#publications-view #main > .publication {
  position: relative;
}
#publications-view #main > .publication .blur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#publications-view #main > .publication .tools {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-l);
}
#publications-view #main > .publication .tools a {
  padding: calc(var(--space-m) * (2 / 3)) var(--space-m);
  color: var(--color-white);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background-color: var(--color-green);
  cursor: pointer;
}
#publications-view #main > .title {
  margin-bottom: var(--space-l);
}
#youtubevideos-index #main > .title {
  font-size: 28px;
  line-height: 42px;
  font-weight: bold;
}
#youtubevideos-index #main > .group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
#youtubevideos-index #main > .group a {
  position: relative;
}
#youtubevideos-index #main > .group a iframe {
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  border: none;
  pointer-events: none;
}
#youtubevideos-index #main > .group a .date {
  position: absolute;
  right: 0;
  top: 0;
  padding: var(--space-xs) var(--space-s);
  color: var(--color-white);
  font-size: var(--font-xs);
  background-color: var(--color-green);
}
#youtubevideos-index #main > .title {
  margin-bottom: var(--space-l);
}