:root {
   --font-size-small: .85rem;
   --font-size-normal: .95rem;
   --font-size-medium: 1.375rem;
   --font-size-big: 2.75rem;
   --color-white: #E0DCD5;
   --color-brown:#A79B78;
   --color-orange:#A55A28;
   --plyr-color-main: var(--color-orange);
   --line-thickness: 1px;
   --swiper-theme-color: var(--color-orange););
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
   font-feature-settings:'kern';  
   text-rendering: optimizeLegibilaity; 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
html {
   width: 100%;
   -webkit-tap-highlight-color: transparent;
   font-size: 1.3vw;
   background-color: var(--color-white);
}
body {
   font-family:"peridot-pe-variable";
   background-color: var(--color-white);
   height: 100%;
   color: var(--color-black);
   font-size:var(--font-size-normal);
   display: flex;
   transition: .25s background-color, .25s color;
   letter-spacing: 0em;
   overflow-x: hidden;
   line-height: 1.59;
   flex-direction: column;
   min-height: 100vh;
}

body.reverse {
    background-color: var(--color-brown);
}
a{
    color:inherit;
    text-decoration:none;
}
.library footer .text.lib {
    display: block;
}
body:not(.library) footer .text.lib,
.library footer .text.screen, .library footer .text.mob{
    display:none;
}
h1, .titleShift .textbox h2, .textbox h2:last-child {
    font-size: var(--font-size-big);
    font-weight: inherit;
    font-family: 'Passenger Serif';
    line-height: 1.2;
    text-align: center;
    max-width: 39.6rem;
    margin: 0 auto 2.2rem;
    transition: .5s font-size ease-out;
    padding-left: 2rem;
}
.titleShift .textbox h2, .textbox h2:last-child {
    text-transform: none;
  
}
.date{text-align:center;}
h2 + .date {
    margin-top: -2rem;
    margin-bottom: 2.2rem;
}
.textbox h2:last-child{
      margin: 0 auto;
}
.dropbox:not(.in) .date {
    font-size: var(--font-size-small);
}
.dropbox .date {
    transition:.25s font-size ease-out;
    font-size: var(--font-size-normal);
    text-align: center;
}
header {
    font-size: var(--font-size-small);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--color-brown) 14%, rgba(255, 255, 255, 0) 100%);
    padding: 1.25rem 0;
    height: 10rem;
    position: fixed;
    z-index: 3;
    width: 100%;
}

.plyr__video-embed.videoplayer {
    width: 100%;
    position: relative;
}
.imagegallery, figure.image.mediaImage,figure.video {
    margin: 0 auto 5rem;
}
.innerBox {
    display: none;
    padding-bottom: 2rem;
}
.imagegallery{
    overflow: hidden;
    position: relative;
}

.swiper-slide .imgInner:after {
    content: '';
    padding-bottom: 56.25%;
    display: none;
}
.imgInner{
    /* height: 100%; */
    position: relative;
}
.swiper-pagination-bullet {
    height: .4rem;
    width: .4rem;
}
.imagegallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    top: 0;
    display: block;
    width: auto;
    height: 35rem;
    margin: auto;
}
.reverse header{
     background: linear-gradient(180deg, var(--color-white) 14%, rgba(255, 255, 255, 0) 100%);
}
.homepage header, .homepage footer {
    background: transparent;
}
.homepage nav:not(.skiplinks) {
    display: block;
    font-size: 17vh;
    position: fixed;
    line-height: 1;
    width: 100%;
    z-index: 4;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
}
article.textbox .text:last-child {
    margin-bottom: 0;
}
.video + article.textbox {
    padding-top: 0;
}

article.textbox:last-of-type {
    margin-bottom: 0 !important;
}
article.textbox .text:empty {
    display: none;
}
.textbox .imagegallery {
    /* max-width: 36em; */
}

.textbox .swiper-button-next, .textbox .swiper-button-prev {
    top: 50%;
}
.textbox .swiper-button-next{
  right: calc((100% - 36em) / 2 / 2);
}
.textbox .swiper-button-prev{
left: calc((100% - 36em) / 2 / 2);
}
.homepage nav:not(.skiplinks) ul li a {text-decoration: none !important;!i;!;color: inherit;}
.homepage #menu:before {
    display: none;
}
.textbox + #tiles {
    /* margin-top: -5rem; */
}
#tiles.threeCol {
    grid-column-gap: 0;
    grid-row-gap: 0;
    padding: 0 1.5rem;
    grid-template-columns: repeat(3,1fr);
}
header nav > ul > li:hover ul {
    display: block;
    margin-top: -.2rem;
}
header nav > ul > li > ul li a{
    line-height:1.25;
    color: var(--color-orange);
}
header > nav > ul > li > ul {
    display:none;
    line-height: 1.4;
}

.homepage footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.homepage header > nav > ul > li > ul {
    display: none !important;!i;!;
}
.imgBox.landscape img {
    /* object-fit: cover; */
}

.swiper-button-next, .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
}
#menu {
    /* display: none; */
    font-family: inherit;
    font-size: inherit;
    background-color: transparent;
    position: relative;
    border: none;
    line-height:1.59;
    color: inherit;
    cursor: pointer;
}
.swiper-pagination {
    position: relative;
    margin-top: 1rem;
}
main .text .arrchar:before {
    content: '\e801';
    font-family: 'fontello';
    font-size: .5rem;
    vertical-align: .4em;
}
#menu:before {
    content: '';
    display: inline-block;
    position: absolute;
    transform: rotate(180deg);
    left: -1.2em;
    /* background-image: url(../img/arrow.svg); */
    /* width: .55em; */
    /* height: .8em; */
    font-family: 'fontello';
    content: '\e803';
    font-size: .67em;
    background-repeat: no-repeat;
    transition: .15s transform ease-out;
    background-size: 100% auto;
    background-position: center;
    top: .25em;
}
#menu.is-active:before{
       /* content: '\2191'; */
       transform: rotate(0deg);
}

.tile {
    padding: 3.75rem;
    background-color: var(--color-brown);
    box-shadow: inset 0 0 2rem 1rem var(--color-white),inset 0 0 2rem 1rem var(--color-white);
}
.tile figure img {
    width: 100%;
    display: block;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    height: 100%;
    position: absolute;
}

#tiles {
    padding: 0 4.85rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 4.5rem;
    grid-row-gap: 4rem;
    margin-bottom: 5rem;
}
.text p.small {
    font-size: var(--font-size-small);
}
 .textbox .text h3,.textbox .text > h2 {
    font-weight: bold;
    font-size: inherit;
    margin-bottom: 0;
    font-size: var(--font-size-normal);
    text-transform: none;
}
.innerBox figure.image:last-child {
    margin-bottom: 3rem;
}
.text ul {
    margin: 1em 1em;
}
.catName {
    text-align: center;
}
.text .lead {
    font-size: var(--font-size-medium);
    font-family: 'Passenger Serif';
    font-weight: normal;
}
.tile h2, .tile h3 {
    font-size: var(--font-size-medium);
    font-family: 'Passenger Serif';
    text-transform: none;
    font-weight:100;
    line-height: 1;
    margin-bottom: 1rem;
    text-align: center;
}

.tile figure {
    margin-bottom: 1rem;
    height: 15rem;
    position: relative;
    width: 100%;
    transition: .25s transform ease-out;
    transform: scale(1);
}
.homepage nav ul li.homeButton {
    display: none;
}

.titleShift .textbox.dropbox:not(.in) h2 {
    font-size: var(--font-size-medium);
    cursor: pointer;
}
.dropbox h2{
    cursor:pointer;
}
footer {
    display: grid;
    height: 5.65rem;
    grid-template-columns: repeat(3,1fr);
    padding: 0 1.25rem 1.25rem;
    position:relative;
    z-index: 2;
    font-size: var(--font-size-small);
    background: linear-gradient(0deg, var(--color-brown) 14%, rgba(255, 255, 255, 0) 100%);
}
.reverse footer{
      background: linear-gradient(0deg, var(--color-white) 14%, rgba(255, 255, 255, 0) 100%);

}
body:not(.reverse) article.textbox.dropbox:nth-of-type(2n + 1) {
    margin: -4rem 0 -4rem;
}

body:not(.reverse) article.textbox.dropbox:nth-of-type(2n):last-child {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
article.imageslider .imagegallery, figure.image.mediaImage.landscape {
  /*  max-width: 50rem;*/
}
figure.video {
    max-width: 50rem;
}
main .text p a, main .text ul a, footer .text > p > a {
    text-decoration: underline;
    text-underline-offset: .1em;
    text-decoration-thickness: var(--line-thickness);
    position: relative;
}
footer .text > p > a:before{
    content:'\2192  '; 
}
header nav ul li a.rex-current{
       color: var(--color-orange);
}
.homepage header nav ul li a.rex-current{
       color: inherit;
}
footer .text:nth-of-type(1) {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

ul.subsites {
    display: flex;
    list-style: none;
    gap: 3em;
    margin: 0;
}

footer .text:nth-of-type(2), footer .text:nth-of-type(3),footer .text:nth-of-type(4) {
    text-align: right;
        display: flex;
      justify-content:flex-end;
    align-items: flex-end;
}
nav:not(.skiplinks) ul {
    list-style: none;
}
#logo, header nav:not(.skiplinks){
    display: inline-flex;
    justify-content: center;
    text-align: center;
}
header nav:not(.skiplinks) {
display:none;
}
body.navIn header nav {
    display: flex;
}
.mediaImage + .textbox {
    margin-top: -5rem;
}
article.textbox + article.textbox.titlebox {
    margin-top: -4rem;
}
.navIn main {
    transform: translateY(6em);
}
figure.image {
    max-width: 25rem;
    margin: 0 auto 0;
}
.text + figure.image{
    margin-top: 2.75rem;
}
figcaption {
    text-align: left;
    font-size: var(--font-size-small);
    margin-top: .65rem;
    line-height: 1.5;
    padding: 0 1rem;
    z-index: 2;
    text-align: center;
    position: relative;
}
    footer .text.screen, footer .text.lib {
    display: flex;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
}
        footer .text.mob {
    display: none;
}
body:not(.reverse) article.textbox:nth-of-type(2n) {
    background-color: var(--color-brown);
}
.image picture, .image img {
    width: 100%;
    margin: auto;
    display: block;
}
body:not(.reverse) article.textbox:nth-of-type(2n):before, body:not(.reverse) article.textbox:nth-of-type(2n):after, body:not(.reverse) {
    height: 5rem;
    content:'';
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 0;
    top: 0;
    display: flex;
    background:linear-gradient(180deg, var(--color-white) 14%, rgba(255, 255, 255, 0) 100%)
}

h1.hidden {
    font-size: 0;
    margin: 0;
    left: 0;
    position: absolute;
}
h1 + article.textbox {
    padding-top: 0;
}
 body:not(.reverse) article.textbox:nth-of-type(2n):after{
       background:linear-gradient(0deg, var(--color-white) 14%, rgba(255, 255, 255, 0) 100%);
       bottom: 0;
       top: unset;
 }
footer.upsideDown {/* background: linear-gradient(180deg, var(--color-brown) 14%, rgba(255, 255, 255, 0) 100%); */}

body:not(.reverse) article.textbox:nth-of-type(2n):last-child{
    /* margin-bottom: -5rem; */
    /* padding-bottom: 11rem; */
}
main {
    margin: 7rem 0 0;
    text-align: left;
    transition: .25s transform ease-out;
    flex-grow: 1;
}

html.is-changing .transition-fade {
  transition: opacity 0.25s, background-color 0.25s, color 0.25s;
  opacity: 1;
}
html.is-animating .transition-fade {
  opacity: 0;
}
h2 {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-transform: uppercase;
}
article.imageBox {
    position: fixed;
    left: 50%;
    z-index: 2;
    top: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%,-50%);
}
.floatingImage img {
    width: 100%;
}
.floatingImage figcaption {
    position: absolute;
    top: 0;
    display: none;
    width: 100%;
    padding: .6rem;
    margin-top: 0;
    height: 100%;
    background-color: var(--color-orange);
    color: var(--color-white);
}

.floatingImage:hover figcaption {
    display: block;
}
figure.floatingImage {
    width: 16rem;
    position:absolute;
    height: auto;
}
article.textbox.dropbox:not(.in) {
    padding: 5rem 1.25rem 3rem;
}
article.textbox {
    width:100%;
    display:block;
    padding: 5rem 0 4rem;
    position: relative;
    transition: .5s padding ease-out;
    z-index: 1;
}
article.textbox .text{
    max-width: 36em;
    margin: 0 auto 2.75rem;
    padding-left: 2em;
}
.text p:not(:last-of-type), .text ul:not(:last-of-type) {
    margin-bottom: 1em;
}
body:not(.reverse) article.dropbox.in:nth-child(2n):last-child {
    padding-bottom: 0 !important;
}
footer .text > p > a {
    font-family: 'Passenger Serif';
    color: var(--color-orange);
    line-height: 1;
}
#tiles > h2 {
    grid-column: 1 span;
}
#tiles > h2 {
    font-size: var(--font-size-big);
    font-family: 'Passenger Serif';
    text-transform: none;
    grid-column: 3 span;
    font-weight: inherit;
    line-height: 1;
    text-align: center;
    margin-top: 0;
    margin-bottom: 4rem;
}
nav.skiplinks {
    left: 1.2rem;
    top: 3rem;
    padding: 0;
    z-index: 10;
    position: fixed;
}
nav.skiplinks ul {
    position: absolute !important;
    left: 0;
    top: 0;
    padding: 0;
    display: block;
    margin: 0;
    list-style: none;
}
.skiplink {
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    font-size: 1rem;
    display: inline-block;
    white-space: nowrap;
}
.skiplink:focus {
    display: block;
    border-radius: 0;
    z-index: 100;
    width: auto;
    height: auto;
}
#cookiemessage {
    display: none;
}

@media (min-width: 1900px) {
  html {
      font-size: 25px;
  }  
}
@media (min-width: 1025px) {
 
}
@media (orientation: portrait) and (min-width: 501px) and (max-width: 1025px) {
  html {
      font-size: 3vw;
  }  
}

@media (orientation: landscape) and (min-width: 501px) and (max-width: 1025px) {
  html {
      font-size: 20px;
  }
}


@media (min-width: 200px) and (max-width: 500px) {
  html {
      font-size: 4.25vw;
  }  
  
}
@media (max-width: 1025px){
 :root {
  --font-size-small: .9rem;
  --font-size-normal: 1.05rem;
  --font-size-big: 1.75rem;
  --line-thickness: 1px;
}
    .swiper-button-next, .swiper-button-prev {
    display: none;
}

figcaption {
    padding-left: .5rem;
}

.swiper-pagination-bullet {
    width: .6rem;
    height: .6rem;
}
    h1 {
    padding: 0 1.25rem;
    max-width: 100%;
}
    article.textbox {
    padding: 5rem 1.5rem;
}
    body:not(.reverse) article.textbox:nth-of-type(2n):last-child{
        padding-bottom:5rem;
    }
    figure.image, figure.video {
    padding: 0 1.5rem;
}
    figure.image.mediaImage, figure.video{
        margin-bottom:2rem;
    }
    footer .text.screen {
    display: none;
}
    footer .text.lib{
        position: unset;
    }
    #tiles > h2{
        margin-bottom:1rem;
        grid-column:1;
    }
        footer .text.mob {
    display: flex;
}
    .homepage nav:not(.skiplinks) {
    font-size: 4rem;
    line-height: 1;
}
h1, .titleShift .textbox h2, .textbox h2:last-child{
padding-left:unset;
}
.homepage nav ul li a {
    line-height: unset;
    padding: 0.1em 0 0.1em;
    display: block;
}
    footer {
    grid-template-columns: repeat(3,1fr);
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: 1rem;
    height: 4rem;
}
    main {
    margin-top: 6rem;
}
    .navIn main {
    transform: translateY(9em);
}

figure.floatingImage {
    width: 10rem;
}
#tiles, #tiles.threeCol {
    padding: 0;
    grid-template-columns: repeat(1,1fr);
}

.tile {
    box-shadow: inset 0 0 1rem .5rem var(--color-white), inset 0 0 1rem 1.5rem var(--color-white);
}
article.imageBox {
    width: 200%;
    height: 200%;
}
header {
    height: 8rem;
}
header nav ul li a {
    line-height: 2;
}
footer .text:nth-of-type(1) {
    display: contents;
}
body.homepage {
    height: 100%;
    position: fixed;
    width: 100%;
    min-height: unset;
}
    .imagegallery img {
    width: 100%;
    height: auto;
}
    article.textbox .text {
    padding-left: 0;
}
ul.subsites {
    display: contents;
}
}
@media (hover: hover) {
main .text p a:hover, main .text ul a:hover,footer .text > p > a:hover {
    text-decoration: none;

}
    .tile:hover figure {
    transform: scale(1.03);
}
    .homepage nav ul li a:hover{
      color:var(--color-brown);  
    }
header nav ul li a:hover, footer .subsites li a:hover {
    text-decoration: underline;
    text-underline-offset: .1em;
    text-decoration-thickness: var(--line-thickness);
}
}
@font-face {
    font-family: 'Passenger Serif';
    src: url('fonts/PassengerSerif-MediumItalic.woff2') format('woff2'),
        url('fonts/PassengerSerif-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Passenger Serif';
    src: url('fonts/PassengerSerif-Medium.woff2') format('woff2'),
        url('fonts/PassengerSerif-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


.white ::selection {
   color: var(--color-black);
   background-color: var(--color-orange);
}
.white ::-moz-selection {
   color: var(--color-black);
   background-color: var(--color-orange);
}

::selection {
   color: var(--color-black);
   background-color: var(--color-orange);
}
::-moz-selection {
   color: var(--color-black);
   background-color: var(--color-orange);
}
@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot?12544802');
  src: url('fonts/fontello.eot?12544802#iefix') format('embedded-opentype'),
       url('fonts/fontello.woff2?12544802') format('woff2'),
       url('fonts/fontello.woff?12544802') format('woff'),
       url('fonts/fontello.ttf?12544802') format('truetype'),
       url('fonts/fontello.svg?12544802#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?12544802#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-arrow:before { content: '\e803'; } /* '' */