/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-model: border-box;
}

/* end reset */

/* used media queries

@media (max-width: 468px)  {}
@media (max-width: 768px)  {}
@media (max-width: 1024px) {}
@media (max-width: 1400px) {}
@media (max-width: 1600px) {}
*/

/* layout variables */

:root {
  /* Row Width Flex Layout */
  --horizontal-menu-width: 300px;
}

/* grid variables */

:root {
  /* Row Width Flex Layout */
  --row-width-extra-small: 530px;
  --row-width-small: 768px;
  --row-width: 1024px;
  --row-width-large: 1200px;
  --row-width-extra-large: 1440px;
  /* Row Spacing (vertical) */
  --row-spacing: 0px;
  /* Row outer Gutter (horizontal) */
  --row-outer-gutter: 40px;
  --row-outer-gutter-mobile: 20px;
}

/* horizontal header/menu layout */

/* only time we use min-width, to make sure this only works on desktop */

@media (min-width: 1024px) {
  body.horizontal-layout {
    display: flex;
    flex-wrap: wrap;
  }
  body.horizontal-layout header {
    width: var(--horizontal-menu-width);
  }
  body.horizontal-layout header .row {
    position: fixed;
    flex-direction: column;
  }
  body.horizontal-layout main {
    width: calc(100% - var(--horizontal-menu-width));
  }
  body.horizontal-layout nav,
  body.horizontal-layout nav a {
    display: block;
  }
}

/* horizontal header/menu layout end  */

/* every content element has a margin top*/

/*.col h1,
.col h2,
.col h3,
.col h4,
.col h5,
.col h6,
.col p,
.col figure,
footer nav,
.col > img {
    margin-top:20px;
}*/

.col h1,
.col h2,
.col h3,
.col h4,
.col h5,
.col h6,
.col p,
.col figure,
.col > img,
footer nav {
  margin-top: 20px;
}

.col h4 + p {
  margin-top: 0px;
}

.col figure figcaption {
  margin-top: 5px;
}

.col figure.no-bottom-space + * {
  margin-top: 5px !important;
}

h1 {
  vertical-align: top;
}

.col h2 {
  margin-bottom: 35px;
}

h3 {
}

h4 {
}

h5 {
}

h6 {
}

p {
}

figure {
}

/*margins and paddings for elements */

@media (max-width: 768px) {
  section {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  /* when a colored background follows  */
  section:not(.colored-background) + section.colored-background {
    margin-top: 15px;
    padding-top: 25px;
  }
  section.colored-background + section.colored-background {
    margin-top: 0px;
  }
  section.colored-background + section:not(.colored-background) {
    margin-top: 15px;
  }
  section.hero {
    /* margin-bottom: 15px; */
    margin: 0 !important;
  }
  .col h1,
  .col h2,
  .col h3,
  .col h4,
  .col h5,
  .col h6,
  .col p,
  .col figure,
  .col > img {
    margin-top: 20px;
  }
  .col h2 {
    margin-bottom: 20px;
  }
  main .col.col_as_section {
    margin-bottom: 45px;
  }
}

@media screen and (max-width: 468px) {
}

/* margins and paddings for content elements */

/*section.colored-background {
    padding:80px 0;
}

section.colored-background + section.colored-background {
    padding:0px 0;
}*/

.row {
  margin: 0 auto;
  max-width: var(--row-width);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 var(--row-outer-gutter);
}

main .row {
  margin: var(--row-spacing) auto 0 auto;
}

@media (max-width: 468px) {
  .row {
    padding: 0 var(--row-outer-gutter-mobile);
  }
}

/* row modifiers */

.row-small {
  max-width: var(--row-width-small);
}

.row-extra-small {
  max-width: var(--row-width-extra-small);
}

.row-large {
  max-width: var(--row-width-large);
}

.row-extra-large {
  max-width: var(--row-width-extra-large);
}

.row-full {
  max-width: 100%;
}

.row-centered {
  justify-content: space-around;
}

/* center the row content vertically */

.row-justified > .col {
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.col {
  flex: 1;
}

@media (min-width: 769px) {
  .col {
    margin-right: 20px;
  }
}

.col:last-child {
  margin-right: 0px;
}

/*.col > *:last-child {
    margin-bottom:0px;
}
*/

.col-centered {
  border: 0px solid red;
}

@media (max-width: 468px) {
  .col {
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
  }
}

/* .col modifiers */

.col-half {
  flex: 0.5;
}

.col-double {
  flex: 2;
}

@media (max-width: 468px) {
  /* all .cols are full-width on mobile */
  .col-double,
  .col-half {
    flex: 1;
  }
}

@media screen and (max-width: 768px) {
  /* what is the difference to the line above? */
  main .col {
    flex-basis: 100%;
    padding-top: 0px !important;
  }
  .col:last-child {
    margin-bottom: 0px;
  }
}

/* used media queries

@media (max-width: 468px)  {}
@media (max-width: 768px)  {}
@media (max-width: 1024px) {}
@media (max-width: 1400px) {}
@media (max-width: 1600px) {}
*/

/* Define the "system" font family */

@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"),
    local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"),
    local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

@font-face {
  font-family: "value-serif-bold";
  src: url("/assets/fonts/value-serif-bold.eot");
  src: url("/assets/fonts/value-serif-bold.eot?#iefix")
      format("embedded-opentype"),
    url("/assets/fonts/value-serif-bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Mixed Size-Value Approach by Chris Coyier */

/* source: https://css-tricks.com/rems-ems/ */

/* Document level adjustments (pixel values) */

html {
  font-size: 17px;
  font-family: system;
}

@media (max-width: 1024px) {
  html {
    font-size: 15px;
  }
}

/* @media (max-width: 468px) {
    html { font-size: 15px; }
} */

/* Modules will scale with document (rem values) */

header {
  font-size: 1rem;
  top: 0;
}

footer {
  font-size: 0.75rem;
}

main {
  font-size: 1rem;
  margin-top: 55px;
}

/* Type will scale with modules (em values) */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "value-serif-bold";
  font-weight: normal;
  font-style: normal;
  line-height: 1.2;
  margin-top: 0px;
}

h1 {
  margin-top: 0px;
  font-size: 2.35em;
}

h2 {
  font-size: 1.55em;
  text-align: center;
}

h3 {
  font-size: 1.23em;
  margin-bottom: 0px;
}

h4 {
  font-size: 1em;
  margin-bottom: 0px;
}

@media (max-width: 468px) {
  h1 {
    font-size: 1.9em;
  }
  h2 {
  }
}

p.h4 {
  font-family: "value-serif-bold";
  font-weight: normal;
  font-style: normal;
  line-height: 1.2;
  font-size: 1em;
  margin-bottom: 0px;
  margin-top: 20px;
  padding-bottom: 0px;
}

p.h4 + p {
  margin-top: 0px;
}

code {
  background: #eee;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.8em;
  color: #666;
  border: 1px solid #666;
}

p,
address {
  font-family: helvetica;
  font-size: 1em;
  line-height: 1.3em;
}

/* buttons */

/**
     * Reset button styles
     * It takes some work to achieve a “blank slate” look.
     */

button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  font-size: 12px;
  background-color: transparent;
  /* show a hand cursor on hover; some argue that we
      should keep the default arrow cursor for buttons */
  cursor: pointer;
}

/**
     * Button component
     */

.btn {
  /* default for <button>, but needed for <a> */
  display: inline-block;
  text-align: center;
  text-decoration: none;
  width: 250px;
  /* create a small space when buttons wrap on 2 lines */
  margin: 0px 0px 6px 0px;
  /* invisible border (will be colored on hover/focus) */
  border: solid 1px;
  border-radius: 0px;
  /* button size comes from text + padding, avoid height */
  padding: 0.8em 1em;
  /* make sure colors have enough contrast! */
  color: #000000;
  background-color: transparent;
}

/* old-school "down" effect on clic + color tweak */

.btn:active {
  transform: translateY(1px);
  filter: saturate(150%);
}

/* inverse colors on hover */

.btn:hover {
  color: #fff;
  background-color: black;
  border: solid 1px black;
}

/* Firefox: remove the inner border shown on focus */

.btn::-moz-focus-inner {
  border: none;
}

/* make sure we have a visible focus ring */

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px #111111, 0 0 0 1.5px #111111;
}

/* hide focus style if not from keyboard navigation */

.js-focus-visible .btn:focus:not(.focus-visible) {
  box-shadow: none;
}

.btn.centered {
  display: block;
  margin: 0 auto;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: helvetica;
  font-weight: normal;
  font-style: normal;
  position: relative;
}

header {
  background: #ffffff;
  position: fixed;
  border-bottom: 1px solid black;
  width: 100%;
  z-index: 999;
  height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

header > .row {
  width: 100%;
}

/*
h1 {
    font-family: 'value-serif-bold';
    font-weight: normal;
    font-style: normal;
    margin-top: 0;
    font-size: 40px;
    line-height: 1.2em;
}

h2 {
    font-family: 'value-serif-bold';
    font-weight: normal;
    font-style: normal;
    margin-top: 10px;
    margin-bottom: 35px;
    font-size: 26px;
    line-height: 1.2em;
    text-align: center;
}

h3 {
    font-family: 'value-serif-bold';
    font-weight: normal;
    font-style: normal;
    margin-bottom: 0px;
    font-size: 21px;
    line-height: 1.2em;
} */

/* h4 {
    font-family: 'value-serif-bold';
    font-weight: normal;
    font-style: normal;
    margin-bottom: 0px;
    font-size: 17px;
    line-height: 1.2em;
} */

p-small {
  font-family: helvetica;
  font-size: 13px;
  line-height: 1.2em;
  font-style: normal;
}

ul {
  margin-top: 0px;
  list-style-type: none;
  padding-left: 0px;
}

li {
  font-family: helvetica;
  font-size: 17px;
  line-height: 1.3em;
}

footer {
  width: 100%;
  min-height: 250px;
  padding-bottom: 40px;
  font-size: 17px;
  border-top: 1px solid black;
}

footer nav {
  font-size: 17px;
}

footer h4 {
  margin-top: 0;
}

.col picture img {
  width: 100%;
}

.logo {
  font-family: "value-serif-bold";
  text-decoration: none;
  font-size: 21px;
  line-height: 1.2;
  display: block;
  height: 100%;
}

a.logo:link {
  text-decoration: none;
}

/* mobile menu */

label[for="toggle"],
#toggle {
  display: none;
}

@media (max-width: 768px) {
  header .col {
    flex-basis: inherit;
  }
  header nav {
    display: none;
  }
  label[for="toggle"] {
    display: inline-block;
    font-size: 18px;
    float: right;
    padding-top: 5px;
    cursor: pointer;
  }
  header #toggle:checked ~ nav {
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    top: 54px;
    left: 0;
    background: white;
    border-top: 1px solid black;
  }
  header #toggle:checked ~ nav a {
    display: block;
    width: 100%;
    height: 48px;
    line-height: 2.7;
    border-bottom: 1px solid black;
    padding-left: var(--row-outer-gutter-mobile);
  }
}

nav {
  height: 100%;
  display: flex;
  font-size: 18px;
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  footer nav {
    justify-content: flex-start;
    margin-top: 40px;
  }
}

a:link {
  color: #000;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a:visited {
  color: #000;
}

/*  centers the nav links vertically in header bar */

nav a {
  line-height: 1.6;
}

nav a:link {
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

nav a:not(:last-child) {
  margin-right: 30px;
}

section.project_preview picture {
  height: 100%;
}

section.project_preview picture img {
  object-fit: cover;
  height: 350px;
}

section.project_preview picture:first-child {
  padding-right: 25px;
}

section.project_preview .col {
  display: flex;
  justify-content: space-around;
}

.rellax_illus {
  position: absolute;
  /* min-height:100%; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  /* width: 100vw; */
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 768px) {
  .rellax_illus {
    display: none;
  }
}

.hero {
  overflow-x: scroll;
  overflow-y: hidden;
  /* height: 100vmin; */
  height: calc(100vmin - 55px);
  width: 100%;
  /*    position:relative;
*/
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .hero {
    height: 100vmin;
  }
}

@media screen and (max-width: 768px) {
  /* section:first-child {
    padding-top: 55px;
  } */
}

/* slideshow */

section.hero {
  position: relative;
}

.slide {
  height: 100vmin;
  /* height: calc(100vmin - 55px); */
  width: 100%;
  /* float: left; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  position: absolute;
  background-position: top center;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

/* .slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;

  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
*/

.showing {
  opacity: 1;
  z-index: 2;
}

/* lazyloaded images */

figure {
  margin: 0;
  width: 100%;
}

img[data-sizes="auto"] {
  color: transparent;
  display: block;
  width: 100%;
}

figcaption {
  font-family: Helvetica;
  font-size: 13px;
  line-height: 1.2em;
  font-style: normal;
}

/* make the image links shrink a bit on hover like laytheme did */

figure a img {
  transition: all 0.4s ease-in-out;
}

figure:hover a img {
  transform: scale(0.97);
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

figure img.not("no-background") {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 1000px 104px;
  position: relative;
  overflow: hidden;
}

/* class name must matches the value of `ratio` setting. */

.lazysrcset-ratio {
  position: relative;
}

.lazysrcset-ratio img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.lazysrcset-ratio img:after {
  display: block;
  width: 100%;
  height: 0;
  content: "";
}

p.big-text {
  font-size: 2.35em;
  margin-top: 20px;
  font-family: "value-serif-bold";
  font-weight: normal;
  font-style: normal;
  line-height: 1.2;
}

.tabs label {
  order: 1;
  display: block;
  cursor: pointer;
  /* background: #3cc0f8; */
  font-weight: bold;
  transition: background ease 0.2s;

  font-family: "value-serif-bold";
  font-size: 1.5em;
  /* margin-right: 70%; */
}

.tabs {
  padding: var(--row-outer-gutter-mobile);
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  /* float: left; */
  display: block;
  margin-bottom: var(--row-outer-gutter-mobile);
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked + label {
  text-decoration: underline;
}
.tabs input[type="radio"]:checked + label:before {
  text-decoration: none;
}

.accordion_text h3 {
  margin-bottom: 20px;
}

.accordion_image {
  float: left;
  max-width: 30%;
  display: none;
}

.accordion_image img {
  width: 100%;
  height: auto;
}

.arrow {
  display: none;
}

@media screen and (min-width: 768px) {
  section.accordion {
    /* height: 80vh; */
  }

  section.accordion h2 {
    padding-top: 20px;
    height: 80px;
    padding-bottom: 20px;
  }

  .tabs input[type="radio"]:checked + label + .tab {
    display: flex;
  }

  .tabs input[type="radio"]:checked + label + .tab .arrow {
    display: block;
    position: absolute;

    height: 0px;
  }

  .arrow svg {
    position: relative;
  }
  .tabs {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    max-width: 1024px;
    margin: 0 auto;
    height: 100%;
    height: 80vmin;
  }

  .tabs .tab {
    width: 75%;
    margin-left: 25%;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    /* min-height: 60vh; */
    height: 100%;
    display: none;
  }

  .tab .accordion_image {
    width: 65%;
    max-width: 65%;
    padding-right: 50px;

    float: none;
    display: block;
  }

  .tab .accordion_text {
    width: 35%;
  }
  .tabs label {
    width: 25%;
    float: left;
    margin: 0;
    position: relative;
    margin-right: 75%;
    padding: 20px 0;
  }
  .tabs label:before {
    content: "→";
    padding: 0px;
    margin: 0;
    margin-left: -45px;
    display: inline-block;
    width: 45px;
  }
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }

  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

/*
   ▄████████ ███▄▄▄▄    ▄█     ▄███████▄  ▄████████    ▄████████    ▄████████     ███     
  ███    ███ ███▀▀▀██▄ ███    ███    ███ ███    ███   ███    ███   ███    ███ ▀█████████▄ 
  ███    █▀  ███   ███ ███▌   ███    ███ ███    █▀    ███    ███   ███    ███    ▀███▀▀██ 
  ███        ███   ███ ███▌   ███    ███ ███          ███    ███  ▄███▄▄▄▄██▀     ███   ▀ 
▀███████████ ███   ███ ███▌ ▀█████████▀  ███        ▀███████████ ▀▀███▀▀▀▀▀       ███     
         ███ ███   ███ ███    ███        ███    █▄    ███    ███ ▀███████████     ███     
   ▄█    ███ ███   ███ ███    ███        ███    ███   ███    ███   ███    ███     ███     
 ▄████████▀   ▀█   █▀  █▀    ▄████▀      ████████▀    ███    █▀    ███    ███    ▄████▀   
                                                                   ███    ███             
*/

body.page-shop nav .nav-item-shop {
  display:none;
}
.snipcart-modal__container{
    border-left: 1px solid black;
}

.snipcart-checkout {
  display:none;
}

body.page-shop .snipcart-checkout{
display:inline-block;
}