*,
::after,
::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: 0 0;
  text-decoration: none;
  outline: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* inter-200 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('../assets/fonts/inter-v12-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../assets/fonts/inter-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/inter-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/inter-v12-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/inter-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/inter-v12-latin-200.svg#Inter') format('svg'); /* Legacy iOS */
}

/* inter-300 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../assets/fonts/inter-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../assets/fonts/inter-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/inter-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/inter-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/inter-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/inter-v12-latin-300.svg#Inter') format('svg'); /* Legacy iOS */
}

/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../assets/fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}

:root {
  --c-bg: hsl(0, 0%, 100%);
  --c-text: hsl(0, 0%, 0%);
  --f-family: Inter, sans-serif;
  --f-size: 20px;
  --f-height: 28px;
  --f-weight: 200;
  --f-scale-s: 0.7;
  --l-padding: 1rem;
  font-size: var(--f-height);
  font-family: var(--f-family);
  font-weight: var(--f-weight);
  background: var(--c-bg);
  color: var(--c-text);
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: hsl(0, 0%, 0%);
    --c-text: hsl(0, 0%, 100%);
  }
}
@media (min-width: 650px) {
  :root {
    --l-padding: 1.5rem;
  }
}
body,
html {
  overflow-x: hidden;
}
body {
  font-size: var(--f-size);
  line-height: var(--f-height);
  position: relative;
  z-index: 98;
}
html {
  transition: color 150ms, background 150ms;
}
html.inverted {
  --c-bg: hsl(0, 0%, 0%);
  --c-text: hsl(0, 0%, 100%);
}
@media (prefers-color-scheme: dark) {
  html.inverted {
    --c-bg: hsl(0, 0%, 100%);
    --c-text: hsl(0, 0%, 0%);
  }
}
body::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 16px,
      rgba(0, 0, 255, 0.1) 16px,
      rgba(0, 0, 255, 0.1) 17px,
      transparent 17px,
      transparent 33px,
      rgba(0, 0, 255, 0.25) 33px,
      rgba(0, 0, 255, 0.25) 34px
    ),
    repeating-linear-gradient(
      to right,
      transparent,
      transparent 16px,
      rgba(0, 0, 255, 0.1) 16px,
      rgba(0, 0, 255, 0.1) 17px,
      transparent 17px,
      transparent 33px,
      rgba(0, 0, 255, 0.25) 33px,
      rgba(0, 0, 255, 0.25) 34px
    );
  background-position: 0 0;
}

body:active::after {
  display: none;
}
.gallery-item,
.thumbnail {
  transition: transform 200ms ease-out, opacity 200ms ease-out;
  transform: translateY(1.5rem);
  opacity: 0;
}
.gallery-item.faded-in,
.thumbnail.faded-in {
  opacity: 1;
  transform: initial;
}
.header {
  padding: var(--l-padding);
  display: grid;
  grid-template-columns: 1fr 1fr 0.5rem;
  grid-template-areas: "title location toggle" "tagline location .";
}
@media (min-width: 500px) {
  .header {
    grid-template-columns: 1fr 1fr 1fr 0.5rem;
    grid-template-areas: "title tagline location toggle";
  }
}
@media (min-width: 840px) {
  .header {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0 1rem;
  }
}
.header-home {
  justify-self: start;
  grid-area: title;
}
.header-location {
  grid-area: location;
}
@media (max-width: 499px) {
  .header-location {
    justify-self: center;
  }
  .header-location span {
    display: none;
  }
}
@media (min-width: 500px) {
  .header-location br {
    display: none;
  }
}
.header-tagline {
  grid-area: tagline;
}
.header-toggle {
  grid-area: toggle;
  margin-top: 0 !important;
}
.home-opening-container {
  padding: var(--l-padding);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "intro intro intro intro";
  grid-gap: 0 1rem;
}
@media (min-width: 840px) {
  .home-opening-container {
    grid-template-areas: ". . intro intro";
  }
}
.home-opening {
  grid-area: intro;
  max-width: 80ch;
}
.project-opening-container {
  padding: var(--l-padding);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr ;
  grid-template-areas: "intro intro intro intro";
  grid-gap: 0 1rem;
}
@media (min-width: 840px) {
  .project-opening-container {
    grid-template-areas: ". . intro intro";
  }
}
.project-opening {
  grid-area: intro;
  max-width: auto;
}
.project-city,
.project-title {
  margin-bottom: 0.25rem;
}
.projects {
  padding: var(--l-padding) 0.5rem;
}
@media (min-width: 650px) {
  .projects {
    padding: var(--l-padding) 1rem;
  }
}
.thumbnail,
.thumbnail-sizer {
  width: 100%;
}
@media (min-width: 650px) {
  .thumbnail,
  .thumbnail-sizer {
    width: 100%;
  }
}
@media (min-width: 900px) {
  .thumbnail,
  .thumbnail-sizer {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .thumbnail,
  .thumbnail-sizer {
    width: 50%;
  }
}
@media (min-width: 1700px) {
  .thumbnail,
  .thumbnail-sizer {
    width: 25%;
  }
}
@media (min-width: 2400px) {
  .thumbnail,
  .thumbnail-sizer {
    width: 25%;
  }
}
.gallery {
  padding: var(--l-padding);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}
.gallery-item {
  grid-column: span 4;
}
@media (min-width: 840px) {
  .gallery-item[data-orientation="portrait"],
  .gallery-item[data-orientation="square"] {
    grid-column: 3/5;
  }
  .gallery-item[data-orientation="landscape"] {
    grid-column: 2/5;
  }
}
.gallery-img {
  display: block;
  width: 100%;
  height: auto;
}
.outro-container {
  padding: var(--l-padding);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "outro outro outro outro";
  grid-gap: 0 1rem;
}
@media (min-width: 840px) {
  .outro-container {
    grid-template-areas: ". . outro outro";
  }
}
.footer {
  padding: var(--l-padding);
  display: grid;
  grid-template-columns: 1fr 1rem;
  grid-template-areas: "copy copy" "contact contact" "credits toggle";
  grid-gap: 0.25rem 1rem;
}
@media (min-width: 550px) {
  .footer {
    grid-gap: 0 1rem;
    grid-template-areas: "copy contact credits toggle";
    grid-template-columns: auto auto auto 0.5rem;
  }
}
@media (min-width: 840px) {
  .footer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.outro {
  grid-area: outro;
}
.footer a,
.outro a {
  text-decoration: underline;
  text-decoration-color: var(--c-bg);
  transition: text-decoration-color 150ms;
}
.outro a {
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.footer a:hover,
.outro a:hover {
  text-decoration-color: var(--c-text);
}
.footer-contact,
.footer-copy,
.footer-credits {
  grid-area: copy;
  font-size: calc(var(--f-size) * var(--f-scale-s));
  line-height: 0.71rem;
}
.footer-contact,
.footer-credits {
  grid-area: contact;
  justify-self: start;
}
.footer-credits {
  grid-area: credits;
}
.footer-toggle {
  grid-area: toggle;
  margin-top: 0 !important;
}
.footer a {
  text-underline-offset: 4px;
}
.toggle {
  appearance: none;
  border: 0;
  padding: 0;
  box-shadow: inset 0 0 0 1px var(--c-text);
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 150ms ease-out;
  justify-self: end;
  width: 0.5rem;
  height: 0.5rem;
  align-self: center;
}
.toggle:hover {
  box-shadow: inset 0 0 0 10px var(--c-text);
}
.thumbnail {
  padding: 0.5rem;
}
.thumb-img-holder {
  position: relative;
}

.thumb-img-holder::after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background: var(--c-text);
}
.thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: filter 300ms, opacity 300ms;
  z-index: 20;
  /* SCALE */
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	/* VERZÖGERUNG */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

.text
{ top:0;
  left:0;
  z-index: 100;
  position: absolute;
}

@media (max-width: 1200px) {
  .text
{ top: 5px;
  left:5px;
  z-index: 100;
  position: absolute;
}
}


.thumb-img:hover {
  filter: grayscale(0.0);
  opacity: 1.00;
  -webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
	transform: scale(1.3);
}
.thumb-caption {
  margin-top: 0.25rem;
  font-size: calc(var(--f-size) * var(--f-scale-s));
  line-height: 0.71rem;
}


.responsive-video {
	position: relative;
	padding-bottom: 56%;
	height:100%;
	overflow: hidden;
}

.responsive-video iframe,  
.responsive-video object,  
.responsive-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #666666;
}

th {
  text-align: center;
  padding: 1px;
  background-color: #666666;
  border: 1px solid #666666;

}

td {
  text-align: left;
  padding: 1px;
  border-bottom: 1px solid #666666;
}