*{
  box-sizing: border-box;
}
*:focus{
  outline: none;
}


/* width */
::-webkit-scrollbar {
  height: 0.3em;
  width: 0.4em;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--cOffWhite);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--cLightGray);
}


body{
  margin: 0px;
  
  min-height: 100vh;

  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 100%;

  background-color: var(--cWhite);
}
main{
  padding-bottom: var(--pagePadding);
}
section{
  padding-left: var(--pagePadding);
  padding-right: var(--pagePadding);
}


:root{
  --pagePadding: 30px;
  --pagePaddingTop: 80px;
  --navWidth: 20px;

  --pageWithoutPadding: calc(100vw - (2 * var(--pagePadding)));
  
  --cWhite: white;
  --cOffWhite: #d8e1f3;
  --cBlack: #0B1D3C;
  --cLightGray: #61749a;
  --cDarkGray: #535c6e;
  
  --cNavBg: 22, 27, 36;
  
  --spacingXs: 5px;
  --spacingS:  15px;
  --spacingM:  30px;
  --spacingL:  60px;
  --spacingXl: 100px;
  --spacingXxl: 200px;
  
  --fontSize: 17px;
}
.mobileHide{
  visibility: hidden;
}


@media only screen and (min-width: 600px) {
  :root{
    --pagePadding: 60px;
    --pagePaddingTop: 90px;
    --navWidth: 20px;
  }

  section{
    padding-left: calc(var(--pagePadding) + var(--navWidth));
  }
}
@media only screen and (min-width: 768px) {
  :root{
    --pagePadding: 70px;
    --pagePaddingTop: 110px;
    --navWidth: 30px;

    --fontSize: 20px;
  }
  .mobileHide{
    visibility: visible;
  }
}
@media only screen and (min-width: 992px) {
  :root{
    --pagePadding: 80px;
    --pagePaddingTop: 120px;
    --navWidth: 40px;
  }
}
@media only screen and (min-width: 1200px) {
  :root{
    --pagePadding: 100px;
    --pagePaddingTop: 130px;
    --navWidth: 50px;
  }
}
@media only screen and (min-width: 1500px) {
  :root{
    --pagePadding: 150px;
  }
}





.cBlack{color: var(--cBlack);}
.cLightGray{color: var(--cLightGray);}
.cDarkGray{color: var(--cDarkGray);}
.cWhite{color: var(--cBlack);}


.mgAllXs{margin-top : var(--spacingXs); margin-left : var(--spacingXs); margin-right : var(--spacingXs); margin-bottom : var(--spacingXs); }
.mgAllS{margin-top : var(--spacingS); margin-left : var(--spacingS); margin-right : var(--spacingS); margin-bottom : var(--spacingS); }
.mgAllM{margin-top : var(--spacingM); margin-left : var(--spacingM); margin-right : var(--spacingM); margin-bottom : var(--spacingM); }
.mgAllL{margin-top : var(--spacingL); margin-left : var(--spacingL); margin-right : var(--spacingL); margin-bottom : var(--spacingL); }
.mgAllXl{margin-top : var(--spacingXl); margin-left : var(--spacingXl); margin-right : var(--spacingXl); margin-bottom : var(--spacingXl); }
.mgAllPage{margin-top : var(--spacingPage); margin-left : var(--spacingPage); margin-right : var(--spacingPage); margin-bottom : var(--spacingPage); }


.mgVertXs{margin-top : var(--spacingXs); margin-bottom : var(--spacingXs); }
.mgVertS{margin-top : var(--spacingS); margin-bottom : var(--spacingS); }
.mgVertM{margin-top : var(--spacingM); margin-bottom : var(--spacingM); }
.mgVertL{margin-top : var(--spacingL); margin-bottom : var(--spacingL); }
.mgVertXl{margin-top : var(--spacingXl); margin-bottom : var(--spacingXl); }
.mgVertPage{margin-top : var(--spacingPage); margin-bottom : var(--spacingPage); }


.mgHorizXs{margin-left : var(--spacingXs); margin-right : var(--spacingXs); }
.mgHorizS{margin-left : var(--spacingS); margin-right : var(--spacingS); }
.mgHorizM{margin-left : var(--spacingM); margin-right : var(--spacingM); }
.mgHorizL{margin-left : var(--spacingL); margin-right : var(--spacingL); }
.mgHorizXl{margin-left : var(--spacingXl); margin-right : var(--spacingXl); }
.mgHorizPage{margin-left : var(--spacingPage); margin-right : var(--spacingPage); }


.mgTopXs{margin-top : var(--spacingXs); }
.mgTopS{margin-top : var(--spacingS); }
.mgTopM{margin-top : var(--spacingM); }
.mgTopL{margin-top : var(--spacingL); }
.mgTopXl{margin-top : var(--spacingXl); }
.mgTopPage{margin-top : var(--spacingPage); }


.mgLeftXs{margin-left : var(--spacingXs); }
.mgLeftS{margin-left : var(--spacingS); }
.mgLeftM{margin-left : var(--spacingM); }
.mgLeftL{margin-left : var(--spacingL); }
.mgLeftXl{margin-left : var(--spacingXl); }
.mgLeftPage{margin-left : var(--spacingPage); }


.mgRightXs{margin-right : var(--spacingXs); }
.mgRightS{margin-right : var(--spacingS); }
.mgRightM{margin-right : var(--spacingM); }
.mgRightL{margin-right : var(--spacingL); }
.mgRightXl{margin-right : var(--spacingXl); }
.mgRightPage{margin-right : var(--spacingPage); }


.mgBottomXs{margin-bottom : var(--spacingXs); }
.mgBottomS{margin-bottom : var(--spacingS); }
.mgBottomM{margin-bottom : var(--spacingM); }
.mgBottomL{margin-bottom : var(--spacingL); }
.mgBottomXl{margin-bottom : var(--spacingXl); }
.mgBottomPage{margin-bottom : var(--spacingPage); }







.pdAllXs{padding-top : var(--spacingXs); padding-left : var(--spacingXs); padding-right : var(--spacingXs); padding-bottom : var(--spacingXs); }
.pdAllS{padding-top : var(--spacingS); padding-left : var(--spacingS); padding-right : var(--spacingS); padding-bottom : var(--spacingS); }
.pdAllM{padding-top : var(--spacingM); padding-left : var(--spacingM); padding-right : var(--spacingM); padding-bottom : var(--spacingM); }
.pdAllL{padding-top : var(--spacingL); padding-left : var(--spacingL); padding-right : var(--spacingL); padding-bottom : var(--spacingL); }
.pdAllXl{padding-top : var(--spacingXl); padding-left : var(--spacingXl); padding-right : var(--spacingXl); padding-bottom : var(--spacingXl); }
.pdAllPage{padding-top : var(--spacingPage); padding-left : var(--spacingPage); padding-right : var(--spacingPage); padding-bottom : var(--spacingPage); }


.pdVertXs{padding-top : var(--spacingXs); padding-bottom : var(--spacingXs); }
.pdVertS{padding-top : var(--spacingS); padding-bottom : var(--spacingS); }
.pdVertM{padding-top : var(--spacingM); padding-bottom : var(--spacingM); }
.pdVertL{padding-top : var(--spacingL); padding-bottom : var(--spacingL); }
.pdVertXl{padding-top : var(--spacingXl); padding-bottom : var(--spacingXl); }
.pdVertPage{padding-top : var(--spacingPage); padding-bottom : var(--spacingPage); }


.pdHorizXs{padding-left : var(--spacingXs); padding-right : var(--spacingXs); }
.pdHorizS{padding-left : var(--spacingS); padding-right : var(--spacingS); }
.pdHorizM{padding-left : var(--spacingM); padding-right : var(--spacingM); }
.pdHorizL{padding-left : var(--spacingL); padding-right : var(--spacingL); }
.pdHorizXl{padding-left : var(--spacingXl); padding-right : var(--spacingXl); }
.pdHorizPage{padding-left : var(--spacingPage); padding-right : var(--spacingPage); }


.pdTopXs{padding-top : var(--spacingXs); }
.pdTopS{padding-top : var(--spacingS); }
.pdTopM{padding-top : var(--spacingM); }
.pdTopL{padding-top : var(--spacingL); }
.pdTopXl{padding-top : var(--spacingXl); }
.pdTopPage{padding-top : var(--spacingPage); }


.pdLeftXs{padding-left : var(--spacingXs); }
.pdLeftS{padding-left : var(--spacingS); }
.pdLeftM{padding-left : var(--spacingM); }
.pdLeftL{padding-left : var(--spacingL); }
.pdLeftXl{padding-left : var(--spacingXl); }
.pdLeftPage{padding-left : var(--spacingPage); }


.pdRightXs{padding-right : var(--spacingXs); }
.pdRightS{padding-right : var(--spacingS); }
.pdRightM{padding-right : var(--spacingM); }
.pdRightL{padding-right : var(--spacingL); }
.pdRightXl{padding-right : var(--spacingXl); }
.pdRightPage{padding-right : var(--spacingPage); }


.pdBottomXs{padding-bottom : var(--spacingXs); }
.pdBottomS{padding-bottom : var(--spacingS); }
.pdBottomM{padding-bottom : var(--spacingM); }
.pdBottomL{padding-bottom : var(--spacingL); }
.pdBottomXl{padding-bottom : var(--spacingXl); }
.pdBottomPage{padding-bottom : var(--spacingPage); }







.shiftTopXs{top : var(--spacingXs); position: relative;}
.shiftTopS{top : var(--spacingS); position: relative;}
.shiftTopM{top : var(--spacingM); position: relative;}
.shiftTopL{top : var(--spacingL); position: relative;}
.shiftTopXl{top : var(--spacingXl); position: relative;}
.shiftTopPage{top : var(--spacingPage); position: relative;}


.shiftLeftXs{left : var(--spacingXs); position: relative;}
.shiftLeftS{left : var(--spacingS); position: relative;}
.shiftLeftM{left : var(--spacingM); position: relative;}
.shiftLeftL{left : var(--spacingL); position: relative;}
.shiftLeftXl{left : var(--spacingXl); position: relative;}
.shiftLeftPage{left : var(--spacingPage); position: relative;}


.shiftRightXs{right : var(--spacingXs); position: relative;}
.shiftRightS{right : var(--spacingS); position: relative;}
.shiftRightM{right : var(--spacingM); position: relative;}
.shiftRightL{right : var(--spacingL); position: relative;}
.shiftRightXl{right : var(--spacingXl); position: relative;}
.shiftRightPage{right : var(--spacingPage); position: relative;}


.shiftBottomXs{bottom : var(--spacingXs); position: relative;}
.shiftBottomS{bottom : var(--spacingS); position: relative;}
.shiftBottomM{bottom : var(--spacingM); position: relative;}
.shiftBottomL{bottom : var(--spacingL); position: relative;}
.shiftBottomXl{bottom : var(--spacingXl); position: relative;}
.shiftBottomPage{bottom : var(--spacingPage); position: relative;}





.taLeft{text-align:left;}
.taCentre{text-align:center;}
.taRight{text-align:right;}




.block{display: block !important;}
.inline{display: inline !important;}
.inlineBlock{display: inline-block !important;}



.posRelative{position: relative !important;}
.posStatic{position: static !important;}
.posAbsolute{position: absolute !important;}

.z1{z-index: 1;}
.z2{z-index: 2;}
.z3{z-index: 3;}
.z4{z-index: 4;}
.z5{z-index: 5;}




.row{display: flex; flex-wrap: wrap;}
.spaceBetween{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}
.centerHoriz{display: flex; align-items: center; flex-wrap: wrap;}
.centerVert{display: flex; justify-content: center; flex-wrap: wrap;}
.centerBoth{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.justify-bottom{display: flex; flex-wrap: wrap; align-items: flex-end;}





.dreamOrphans{font-family: Dream Orphans, Georgia, sans-serif;}
.helvetica{font-family: HelveticaNeue, Helvetica, Arial, sans-serif;}






body{
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  font-size: var(--fontSize);
  color: var(--cBlack);
}
h1,
.h1{
  font-family: Dream Orphans, Georgia, sans-serif;
  font-size: calc(var(--fontSize) * 3);
}
@media only screen and (min-width: 600px) {
  h1,
  .h1{
    font-size: calc(var(--fontSize) * 5);
  }
}
h2,
.h2{
  font-family: Dream Orphans, Georgia, sans-serif;
  font-size: calc(var(--fontSize) * 2.5);
}
h3,
.h3{
  font-family: Dream Orphans, Georgia, sans-serif;
  font-size: calc(var(--fontSize) * 2);
}
h4,
.h4{
  font-family: Dream Orphans, Georgia, sans-serif;
  font-size: calc(var(--fontSize) * 1.3);
}

p{
  font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  line-height: 2em;
}
small{
  font-size: 0.8em;
  color: var(--cDarkGray);
}
a{
  color: inherit;
  text-decoration: none;
  cursor: pointer;

  position: relative;
}
a:after{
  content: '';

  position: absolute;
  bottom: calc(-1px - 0.2em);
  left: 50%;

  width: 0;
  height: 1px;

  background: var(--cLightGray);

  display: block;

  transition: left 0.1s ease, width 0.1s ease;
}
a:hover:after,
a:focus:after{
  left: -0.5em;

  width: calc(100% + 1em);
}

a.iconLink{
  display: block;
  transition: transform 0.2s ease;
}
a.iconLink:hover,
a.iconLink:focus{
  transform: scale(1.1);
}
a.iconLink:after{
  content: none;
}





figure{
  margin: calc(var(--pagePadding) * 2) 0;

  display: flex;
  flex-direction: column;
}
.figure-img{
  max-width: 100%;
  max-height: 80vh;
  height: 80vh;
  align-self: center;
}
.figure-img .img-blurup-final{
  max-height: 80vh;
}
figcaption{
  margin-top: var(--spacingM);
  align-self: center;
}


figure.folder{
  filter: grayscale(0) contrast(1);
  transition: filter 0.8s ease;
}
figure.folder figcaption{
  display: flex;
  align-items: center;
}
figure.folder figcaption svg{
  height: 2em;

  transform: rotate(180deg);

  margin-left: var(--spacingM);

  transition: transform 0.8s ease;
}

figure.folder:hover figcaption svg,
figure.folder:focus figcaption svg{
  transform: rotate(180deg) translateX(-1em);

  transition: transform 0.2s ease;
}

figure.folder:hover,
figure.folder:focus{
  filter: grayscale(1) contrast(1.15);

  transition: filter 0.2s ease;
}






.img-blurup{
  position: relative;
  width: fit-content;
  height: fit-content;
  overflow: hidden;
  background: var(--cOffWhite);
}
.img-blurup-preview{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px);
  transform: scale(1.5);
  opacity: 1;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.img-blurup:after{
  content: '';

  display: block;
  width: calc(var(--fontSize) * 2);
  height: calc(var(--fontSize) * 2);

  position: absolute;
  top: calc(50% - var(--fontSize));
  left: calc(50% - var(--fontSize));

  background-image: url('/img/spinner.svg');

  animation: loadSpin 4s linear infinite;
  transform-origin: center center;
}
@keyframes loadSpin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.img-blurup-final{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.img-blurup-complete .img-blurup-preview{
  opacity: 0;
}
.img-blurup-complete:after{
  content: none;
}




i{
  font-style: italic;
}

button{
  display: flex;
  align-items: center;

  margin:  var(--spacingM) var(--spacingM) var(--spacingM) 0;

  padding: var(--spacingS) var(--spacingM);

  background: none;

  border: 1px solid var(--cLightGray);

  cursor: pointer;

  font-size: inherit;
  font-family: inherit;

  transition: border-color 0.8s ease;
}

button svg{
  height: 1.5em;
  margin-right: var(--spacingS);
}

button:hover,
button:active{
  border-color: var(--cBlack);
  transition: border-color 0.2s ease;
}




.contact-reveal{
  max-width: var(--pageWithoutPadding);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-reveal-icon{
  display: block;
}
.contact-reveal-spinner{
  display: none;
}

.contact-reveal.loading .contact-reveal-icon{
  display: none;
}
.contact-reveal.loading .contact-reveal-spinner{
  display: block;

  
}
.contact-reveal.loading .contact-reveal-spinner svg{
  animation: spin 2s infinite linear;
}
@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}


.article p {
    margin: var(--spacingS) 0 var(--spacingS) 0;
    max-width: 30em;
}

.article p{margin:var(--spacingS) 0 var(--spacingS) 0; max-width:30em;}.article h3{margin:var(--spacingXxl) 0 var(--spacingS) 0}.article b,.article b *,.article strong,.article strong *{font-weight:900!important}.article em,.article em *,.article i,.article i *{font-style:italic!important}.article u,.article u *{text-decoration:underline!important}.article del,.article del *{text-decoration:line-through!important}.article a{font-style:italic}

.article h3 {
    margin: var(--spacingXxl) 0 var(--spacingS) 0
}

.article b,.article b *,.article strong,.article strong * {
    font-weight: 900!important
}

.article em,.article em *,.article i,.article i * {
    font-style: italic!important
}

.article u,.article u * {
    text-decoration: underline!important
}

.article del,.article del * {
    text-decoration: line-through!important
}

.article a {
    font-style: italic
}
.wp-block-button__link{
    display: flex;
    align-items: center;
    margin: var(--spacingM) var(--spacingM) var(--spacingM) 0;
    padding: var(--spacingS) var(--spacingM);
    background: none;
    border: 1px solid var(--cLightGray);
    cursor: pointer;
    font-size: inherit;
    color: var(--cBlack);
    font-style: normal !important;
    border-radius: 0;
    font-family: inherit;
    transition: border-color 0.8s ease;
}
.wp-block-button__link::after{
  content: none !important;
}
.wp-block-button__link:hover, .wp-block-button__link:active {
    border-color: var(--cBlack);
    color: var(--cblack);
}