@font-face {
  font-family: "Calibri";
  font-style: normal;
  font-weight: 400;
  src: local("Calibri"), url(https://fonts.gstatic.com/l/font?kit=YH3ek_qpdaY7ILI-bfzlYQ&skey=a1029226f80653a8&v=v8) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; }

@font-face {
  font-family: CalibriB;
  font-style: normal;
  font-weight: 700;
  src: local("Calibri Bold"), local("Calibri-Bold"), url(https://fonts.gstatic.com/l/font?kit=cCwcoZCh95jEfkePtzfl9_k_vArhqVIZ0nv9q090hN8&skey=cd2dd6afe6bf0eb2&v=v8) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; }

p, a, li {
  line-height: 150%;
  font-family: "Calibri";
  /*font-family: "futura-pt",sans-serif !important */
  font-size: 18px;
  font-weight: 300;
  outline: 0; }

h1, h2, h5 {
  font-family: "Calibri" !important; }

h3, h4 {
  font-family: "CalibriB" !important; }

body {
  margin: unset; }

#Kart .container {
  display: grid;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  width: 80%;
  margin: auto;
  height: 700px; }

.containerTitle {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-bottom: 0px;
  background-color: #3fbfad;
  box-shadow: 1px 1px 2px #7d7d7d;
  width: 80%;
  margin: auto; }
  .containerTitle h1 {
    font-size: 36px;
    color: white;
    padding-bottom: 8px;
    padding-top: 10px;
    display: inline; }

.backgroundImage {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; }

.grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: gray; }

.oldEvent {
  color: white;
  position: absolute;
  top: calc(50% - 30px);
  width: 100%;
  z-index: 999;
  text-align: center;
  background-color: rgba(128, 128, 128, 0.84);
  font-size: 24px;
  padding: 10px 0px; }

.noselect, .headerNavButtons, .headerNavButtons * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.toggleMenu {
  display: none !important; }

.hide {
  display: none !important; }

.toggleEvents {
  display: none !important; }

.headerNavButtons {
  background-color: unset !important;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center; }
  .headerNavButtons div {
    background-color: #505b64;
    box-shadow: 1px 1px 2px #303030;
    display: inline-block;
    margin: 20px;
    padding: 10px;
    width: 140px;
    cursor: pointer;
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out; }
    .headerNavButtons div a {
      text-decoration: none;
      color: white; }
      .headerNavButtons div a h4 {
        margin: unset; }
    .headerNavButtons div:hover {
      background-color: #8d8d8d !important; }

.showMore {
  text-align: center;
  background-color: orange;
  margin: auto;
  width: 130px;
  padding: 2px 20px;
  cursor: pointer;
  box-shadow: 1px 1px 2px #999999; }
  .showMore a, .showMore p {
    font-size: 20px;
    font-weight: 600; }

.headerText {
  position: absolute;
  right: 100px;
  color: white;
  background-color: rgba(45, 45, 45, 0.74);
  padding: 20px;
  bottom: 180px;
  box-shadow: 1px 1px 2px #303030;
  font-size: 26px;
  line-height: 125%;
  font-family: "futura-pt", sans-serif !important;
  margin: auto;
  max-width: 600px; }
  .headerText h1 {
    line-height: 100%; }
  .headerText p:last-child {
    margin-bottom: unset; }
  .headerText p:first-child {
    margin-top: unset; }
    .headerText p:first-child::first-letter {
      font-size: 125%; }
  .headerText p {
    font-size: 26px;
    line-height: 125%;
    font-family: "futura-pt", sans-serif !important; }

a.anchor {
  display: block;
  position: relative;
  top: calc(100% + 60px);
  visibility: hidden; }

.blurTop {
  position: relative; }
  .blurTop:before {
    content: "";
    position: absolute;
    top: 85%;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.75));
    opacity: 1; }

.blurBottom {
  position: relative; }
  .blurBottom:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 90%;
    left: 0;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.75));
    opacity: 1; }

.blurBottomDepartment {
  position: relative; }
  .blurBottomDepartment:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 96%;
    left: 0;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.8));
    bottom: 96%; }
    @media (max-width: 900px) {
      .blurBottomDepartment:before {
        display: none; } }

#content {
  display: grid;
  width: 100%; }

.displaysMounth {
  grid-column: 1/5;
  color: white; }

.insertCalendar:before {
  content: "";
  display: block;
  background: url("/layoutImages/calendar-solid.png") no-repeat;
  width: 25px;
  height: 25px;
  float: left;
  background-size: cover;
  margin-right: 10px; }

.event {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 200px 80px;
  background-color: white;
  max-height: 280px;
  cursor: pointer;
  box-shadow: 1px 1px 2px #999999;
  transition: all 0.2s ease-in-out;
  transform: scale(1); }
  .event:hover {
    transition: all 0.2s ease-in-out;
    transform: scale(1.02);
    z-index: 99; }
  .event a {
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 10; }
  .event .eventImage {
    grid-column: 1/3;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative; }
    .event .eventImage .eventDepartment {
      position: absolute;
      top: 0;
      left: 0;
      padding: 6px 18px;
      color: white;
      padding-left: 6px; }
      .event .eventImage .eventDepartment img {
        width: 100%;
        height: auto; }
      .event .eventImage .eventDepartment h4 {
        margin: unset;
        font-family: "futura-pt", sans-serif !important;
        font-weight: 400; }
  .event .date p {
    line-height: 22px;
    text-align: center;
    width: 100%;
    color: white; }
  .event .metadata {
    margin: auto;
    margin-left: 12px; }
    .event .metadata h4 {
      margin: unset; }

.displayContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 10px;
  width: 80%;
  margin: auto; }
  @media (max-width: 900px) {
    .displayContainer {
      grid-template-columns: 1fr;
      margin-bottom: 30px;
      width: 100%; } }
  .displayContainer .display:nth-child(odd) {
    margin-right: 5px; }
    @media (max-width: 900px) {
      .displayContainer .display:nth-child(odd) {
        margin: auto; } }
  .displayContainer .display:nth-child(even) {
    margin-left: 5px; }
    @media (max-width: 900px) {
      .displayContainer .display:nth-child(even) {
        margin: auto; } }
  .displayContainer .display {
    background-color: white;
    cursor: pointer;
    box-shadow: 1px 1px 2px #999999;
    position: relative;
    padding-bottom: 20px; }
    .displayContainer .display a {
      position: absolute;
      height: 100%;
      width: 100%;
      display: block;
      z-index: 10; }
    .displayContainer .display .eventImage {
      position: relative; }
      .displayContainer .display .eventImage img {
        width: 100%;
        height: auto; }
      .displayContainer .display .eventImage .eventDepartment {
        position: absolute;
        top: 0;
        left: 0;
        padding: 6px 18px;
        color: white;
        padding-left: 6px; }
        .displayContainer .display .eventImage .eventDepartment h4 {
          margin: unset;
          font-family: "futura-pt", sans-serif !important;
          font-weight: 400; }
    .displayContainer .display .daysLeft {
      width: 90%;
      margin: auto; }
      .displayContainer .display .daysLeft p {
        text-align: right;
        color: red;
        margin-bottom: 6px; }
    .displayContainer .display .date {
      width: 100%;
      text-align: center; }
      .displayContainer .display .date .bar {
        position: relative;
        height: 43px;
        width: 90%;
        margin: auto;
        margin: auto;
        border: 1px solid; }
        .displayContainer .display .date .bar .fill {
          height: 100%;
          width: 100%;
          max-width: 100%; }
        .displayContainer .display .date .bar .dateText {
          z-index: 10;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%; }
          .displayContainer .display .date .bar .dateText p {
            margin: 8px 0px !important; }
    .displayContainer .display .metadata {
      width: 90%;
      margin: auto;
      padding-top: 10px;
      position: relative; }
      .displayContainer .display .metadata h2 {
        margin: unset; }
    .displayContainer .display .expireDate {
      padding-top: 4px;
      width: 100%;
      color: white; }
      .displayContainer .display .expireDate div:first-child {
        margin-left: 5%; }
      .displayContainer .display .expireDate div:nth-child(2) {
        float: right;
        margin-right: 12px; }
      .displayContainer .display .expireDate div {
        display: inline-block; }
      .displayContainer .display .expireDate p {
        margin: unset; }

.staff {
  padding-bottom: 120px; }
  .staff .container {
    width: 80%;
    display: grid;
    grid-row-gap: 40px;
    grid-column-gap: 40px;
    margin: auto;
    margin-top: 10px; }
    .staff .container .person {
      display: grid;
      grid-template-columns: 1fr 3fr;
      background-color: #f6f6f6; }
      .staff .container .person .image {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; }
      .staff .container .person .metadata {
        display: grid;
        grid-template-columns: 1fr;
        padding: 40px; }
        .staff .container .person .metadata .contectPerson {
          display: grid;
          grid-template-columns: 1fr 2fr;
          max-width: 600px; }
          .staff .container .person .metadata .contectPerson div:nth-child(even) {
            text-align: left; }
          .staff .container .person .metadata .contectPerson p {
            margin: 8px 0px; }

#news {
  margin-top: 20vh; }
  #news .container {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding-bottom: 60px;
    grid-row-gap: 40px;
    grid-column-gap: 40px;
    grid-auto-rows: minmax(350px, auto); }
    #news .container .fullRow {
      display: flex;
      grid-column: 1/7; }
    #news .container .case {
      background-color: #e0e3e7;
      cursor: pointer;
      box-shadow: 1px 1px 2px #999999; }
      #news .container .case a {
        display: block;
        padding: 80px;
        text-decoration: none;
        color: black; }
    #news .container .image {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer; }
      #news .container .image a {
        display: block;
        height: 100%; }

footer {
  background-color: #505b64;
  color: white;
  margin-top: 15vh;
  padding-top: 20px; }
  footer h4 {
    font-size: 18px; }
  footer p {
    margin: 10px 0px !important; }
  footer .container {
    grid-template-columns: repeat(5, 1fr);
    display: grid;
    margin: 0px 10vw;
    grid-column-gap: 30px; }
    footer .container div {
      height: auto; }
      footer .container div ul {
        padding: unset; }
        footer .container div ul li {
          list-style-type: none;
          margin: 10px 0px; }
    footer .container a {
      text-decoration: none;
      color: white; }

.navButtons {
  width: 100%;
  text-align: center;
  background-color: #e0e3e7; }
  .navButtons div {
    display: inline-block;
    margin: 20px;
    padding: 10px;
    width: auto;
    cursor: pointer;
    min-width: 180px; }
    .navButtons div a {
      text-decoration: none;
      color: white; }
      .navButtons div a h4 {
        margin: unset;
        font-size: 22px; }

#header {
  display: grid;
  grid-template-columns: auto 80px;
  align-items: center;
  box-shadow: 1px 1px 2px #999999;
  position: fixed;
  width: 100%;
  z-index: 999;
  background-color: white;
  top: 0;
  height: 85.5px; }
  #header a {
    font-size: 24px;
    cursor: pointer; }
  #header img {
    height: 76px !important;
    width: auto !important; }

#menu {
  position: fixed;
  width: 100%;
  z-index: 999;
  background-color: #505b64;
  box-shadow: 1px 1px 2px #999999;
  padding-bottom: 20px;
  padding-top: 20px;
  color: white; }
  #menu .exitMenu {
    position: absolute;
    right: 60px; }
    #menu .exitMenu a {
      font-size: 32px;
      cursor: pointer; }
  #menu .menuContent {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: 0px 10vw; }
    #menu .menuContent div {
      width: 20vw;
      height: auto; }
      #menu .menuContent div ul {
        padding: unset; }
        #menu .menuContent div ul li {
          list-style-type: none;
          margin: 10px 0px; }
    #menu .menuContent a {
      text-decoration: none;
      color: white; }

@media (max-width: 900px) {
  .toggleMobile {
    display: none !important; }

  .margin20Mobile {
    margin: 0px 20px !important; }

  .headerNavButtons {
    display: none !important; }

  .headerText {
    left: unset;
    bottom: 0;
    position: relative;
    right: unset;
    max-width: unset;
    padding-bottom: 40px; }

  .blurBottom::before, .blurTop::before {
    display: none !important; }

  body {
    overflow-x: hidden; }

  .paddingSection {
    display: none; }

  #menu {
    height: 110vh;
    top: 0px; }
    #menu .exitMenu {
      right: 10px; }
    #menu h4 {
      margin: 10px 0px; }
    #menu .menuContent {
      flex-direction: column; }
      #menu .menuContent div {
        width: unset; }

  footer {
    margin-top: 20px !important; }
    footer .container {
      grid-template-columns: repeat(1, 1fr) !important;
      margin: 0px 2vw; }
      footer .container div {
        margin: 0px 10px; }
        footer .container div ul li {
          margin: 10px 10px !important; }

  .hideMobile {
    display: none !important; }

  .containerTitle {
    width: unset !important;
    margin: unset !important; }

  #content {
    margin-top: 66px !important; }

  #header {
    height: 66px;
    grid-template-columns: auto 30px !important; }
    #header img {
      height: unset !important;
      width: auto !important;
      max-height: 66px;
      max-width: calc(100vw - 40px); }
    #header .menuButton {
      text-align: right;
      margin-right: 16px;
      min-width: 22px; }

  .headerImage {
    height: calc(80vh - 85.5px - 87px); }

  .navButtons div {
    display: block;
    width: unset; }
    .navButtons div a {
      text-decoration: none;
      color: white; }
      .navButtons div a h4 {
        margin: unset; }

  #events .container {
    margin: unset !important;
    width: unset !important; }

  #news {
    margin-top: 40px; }
    #news .container {
      margin: unset;
      width: unset; }
      #news .container .case {
        width: unset; }
        #news .container .case a {
          padding: 16px; }
    #news .fullrow {
      display: unset !important; }
      #news .fullrow div {
        width: unset !important; }
      #news .fullrow .image {
        width: unset; }
        #news .fullrow .image a {
          height: 200px; } }