:root {
--mainsize: .9rem;
--lineheight: calc(var(--mainsize) * 1.666);
--br: calc(var(--mainsize) / 2);


}

/* ####################################################### default ####################################################### */



html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust:100%
}

html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding:0
  text-rendering: optimizeSpeed;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--mainsize);
  line-height: var(--lineheight);
}

body {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .005rem;
  font-display: swap;
  background-color: var(--colorbg);
  color: var(--colorfont);
}

main {
  background-color: var(--colorbg);
  color: var(--colorfont);
}
.im-fell-english-regular {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: normal;
}

.im-fell-english-regular-italic {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: italic;
}


.colorfont { color: var(--colorfont);}
.colorbg { color: var(--colorbg);}
.color1 { color: var(--color1);}
.color2 { color: var(--color2);}


.colorfont0 { color: var(--colorfont0);}
.colorbg0 { color: var(--colorbg0);}
.color10 { color: var(--color10);}
.color20 { color: var(--color20);}


.colorfont25 { color: var(--colorfont25);}
.colorbg25 { color: var(--colorbg25);}
.color125{ color: var(--color125);}
.color225 { color: var(--color225);}


.colorfont50 { color: var(--colorfont50);}
.colorbg50 { color: var(--colorbg50);}
.color150{ color: var(--color150);}
.color250 { color: var(--color250);}


.colorfont75 { color: var(--colorfont75);}
.colorbg75{ color: var(--colorbg75);}
.color175{ color: var(--color175);}
.color275 { color: var(--color275);}


.colorfontbg { background: var(--colorfont);}
.colorbgbg { background: var(--colorbg);}
.color1bg { background: var(--color1);}
.color2bg { background: var(--color2);}


.colorfontbg0 { background: var(--colorfont0);}
.colorbgbg0 { background: var(--colorbg0);}
.color1bg0 { background: var(--color10);}
.color2bg0 { background: var(--color20);}


.colorfontbg25 { background: var(--colorfont25);}
.colorbgbg25 { background: var(--colorbg25);}
.color1bg25{ background: var(--color125);}
.color2bg25 { background: var(--color225);}


.colorfontbg50 { background: var(--colorfont50);}
.colorbgbg50 { background: var(--colorbg50);}
.color1bg50{ background: var(--color150);}
.color2bg50 { background: var(--color250);}


.colorfontbg75 { background: var(--colorfont75);}
.colorbgbg75{ background: var(--colorbg75);}
.color1bg75{ background: var(--color175);}
.color2bg75 { background: var(--color275);}



.btn {
  outline: none!important;
  box-shadow: none!important;
  border-radius: var(--br);
  font-weight: 700;
}


.btn-primary,
.btn-primary:link,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:visited  {
  color: var(--colorbg)!important;
  border: 2px solid var(--color1)!important;
  background-color: var(--color1)!important;
}

.uc {
  text-transform: uppercase;
}

.ls {
  letter-spacing: .25rem;
}

.ls50 {
  letter-spacing: .125rem;
}

.ls25 {
  letter-spacing: .00625rem;
}

.no_btn {
  background: unset;
  border: unset;
  border-radius: unset;
  padding: unset;
  margin: unset;
  color: unset;
  font-family:inherit;
  font-style: normal;
  font-display: swap;
  padding-bottom: 0;
}

figure {
  margin: 0;
  padding: 0;
  border: 0;
}

.page_header {
  padding-top: calc(var(--lineheight) * 3);
}


h1.page_title {
  margin-bottom: calc(var(--lineheight) * 2);
}

.text p {
  margin-bottom: var(--lineheight);
}

.text h1, .text h2, .text h3 {
  font-size: calc(var(--mainsize) * 1.333);
  text-transform: uppercase;
  letter-spacing: .00625rem;
  line-height: var(--lineheight);
  margin-bottom: calc(var(--lineheight) * .5);
}

.text p + h1, .text p + h2, .text p + h3 {
  margin-top: calc(var(--lineheight) * 2);
}

.text p:last-of-type {
  margin-bottom: 0;
}

.text strong {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: normal;
}

.text_sm {
  font-size: calc(var(--mainsize) * .666);
}

.text a,
.text a:link,
.text a:hover,
.text a:focus,
.text a:active,
.text a:active:focus,
.text a:active:hover,
.text a:visited  {
  color: var(--colorfont);
  border-bottom: 2px solid var(--colorfont50);
  text-decoration: none;
}


.page_cover {
  position: relative;
}

.page_cover .wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: calc(var(--mainsize) * 2);
  background: var(--color10);
}


.page_cover .wrapper img {
  width: 10vw;
  height: auto;
  display: block;
}


/* ####################################################### soon ####################################################### */


section.soon, section.soon figure {
  position: relative;
  margin: 0;
  padding: 0;
}

section.soon .wrapper {
  position: absolute;
  top: calc(var(--mainsize) * 3);
  left: calc(var(--mainsize) * 3);
  right: calc(var(--mainsize) * 3);
  bottom: calc(var(--mainsize) * 3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 calc(var(--mainsize) * 3);
}



section.soon .teaser::before, section.soon .teaser::after {
  content: ' • '
}


/* ####################################################### footer ####################################################### */

footer {
  background: var(--colorbg);
  color: var(--color2);
  font-variant-numeric: lining-nums;

}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer ul li {
  display: inline-block;
}

footer ul.legals li:not(:last-child)::after {
  content:' • ';
  padding-left: 3px;
  padding-right: 3px;
}

footer .text a,
footer .text a:link,
footer .text a:hover,
footer .text a:focus,
footer .text a:active,
footer .text a:active:focus,
footer .text a:active:hover,
footer .text a:visited,
footer .text .no_btn  {
  color: var(--color2);
  border-bottom: 2px solid var(--color250);
  text-decoration: none;
}

footer ul.links {
  display: flex;
  align-items: center;
}

footer ul.links li:not(:last-child) {
  padding-right: calc(var(--mainsize) * .75);
}

footer ul.links img {
  width: auto;
  display: block;
  filter: brightness(0) saturate(100%) invert(38%) sepia(0%) saturate(1442%) hue-rotate(203deg) brightness(92%) contrast(85%);
}


footer ul.links img.bc_logo {height: 15px;}
footer ul.links img.i_logo {height: 20px;}
footer ul.links img.s_logo {height: 22px;}
footer ul.links img.a_logo {height: 15px;}
footer ul.links img.f_logo {height: 13px;}


footer hr {
margin: calc(var(--mainsize) * 2) 0;
color: var(--color125);
border: 0;
border-top: var(--bs-border-width) solid;
opacity: 1;
}

footer hr:first-of-type {margin-top: 0;}

/* ####################################################### figure ####################################################### */



picture.image {
  position: relative;
  display: block;
  --w: 4;
  --h: 5;
  margin: 0;
  padding: 0;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background-size: 125px auto!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 17px 12px -12px rgba(0,0,0,.5);
  box-shadow: 0px 17px 12px -12px rgba(0,0,0,.5);
  background: url("../images/loading.gif") var(--color1);
  overflow: hidden;

}


picture.image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 0;
  opacity: 0;
  transform: scale(1.05);
  -webkit-transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

picture.image.hero {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background-size: 125px auto!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  margin-bottom: 0;
  background: url("../images/loading.gif") var(--color1);
  overflow: hidden;
  margin: 0;
  padding: 0;
}


picture.image.hero img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center center;
  border: 0;
  opacity: 0;
  transform: scale(1.05);
  -webkit-transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

picture.image.[data-contain] img {
  object-fit:contain;
}

picture.image img.img_loaded {
  opacity: 1;
  transform: scale(1);
}
/* ####################################################### hover ####################################################### */

@media (hover: hover) {

  .btn-primary,
  .btn-primary:link,
  .btn-primary:active,
  .btn-primary:visited  {
    color: var(--colorbg)!important;
    border: 2px solid var(--color10)!important;
    background-color: var(--color175)!important;
  }

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active:focus,
  .btn-primary:active:hover {
    color: var(--colorbg)!important;
    border: 2px solid var(--color1)!important;
    background-color: var(--color1)!important;
  }

}



/* ####################################################### responsive ####################################################### */

@media (min-width: 576px) {
  :root {--mainsize: .9rem;}
  picture.image {--w: 1;--h: 1;}
  .page_cover .wrapper img {width: 9vw;}
}


@media (min-width: 768px) {
  :root {--mainsize: .95rem;}
  picture.image {--w: 5;--h: 4;}
  .page_cover .wrapper img {width: 8vw;}
}


@media (min-width: 992px) {
  :root {--mainsize: 1rem;}
  picture.image {--w: 5;--h: 3;}
  .page_cover .wrapper img {width: 7vw;}
}


@media (min-width: 1200px) {
  :root {--mainsize: 1.05rem;}
  .container-xxl {max-width: 960px;}
  picture.image {--w: 5;--h: 2;}
  .page_cover .wrapper img {width: 6vw;}

}


@media (min-width: 1400px) {
  :root {--mainsize: 1.1rem;}
  .container-xxl {max-width: 960px;}
  .page_cover .wrapper img {width: 5vw;}

}