/* josefin-sans-regular - latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Josefin Sans Regular"), local("JosefinSans-Regular"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff2") format("woff2"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 200;
  src: local("Libre Franklin ExtraLight"), local("LibreFranklin-ExtraLight"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff2") format("woff2"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local("Montserrat Light"), local("Montserrat-Light"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local("Montserrat Medium"), local("Montserrat-Medium"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
h1 {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  padding-bottom: 0;
  z-index: 1; }

h2 {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  text-shadow: 0.125rem 0.125rem 0.3125rem #000;
  z-index: 1; }

h3 {
  color: #e6e6e6;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  z-index: 1; }

h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  padding-bottom: 0;
  z-index: 1; }

p {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.2rem;
  text-align: justify;
  z-index: 1; }

a {
  list-style: none;
  outline: none;
  text-decoration: none;
  text-shadow: none;
  z-index: 1;
  transition: color .3s ease; }

html {
  box-sizing: border-box; }

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

.article-title-exception {
  padding: 1.5rem; }

#mirror {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  min-height: 70vh;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 4rem;
  z-index: 1; }
  #mirror p {
    line-height: 1.4rem;
    color: #000;
    font-size: 0.875rem;
    padding: 0 0 .8rem 0;
    text-align: left; }
  #mirror h1 {
    color: #000;
    font-size: 1.375rem;
    padding: 1rem 0 0 0;
    text-align: left;
    font-weight: 600; }
  #mirror h2 {
    color: #000;
    font-size: 1.25rem;
    padding: 1rem 0 0 0;
    text-align: left;
    font-weight: 400;
    text-shadow: none; }
  #mirror h3 {
    color: #000;
    font-size: 0.875rem;
    padding: 0;
    text-align: center;
    text-shadow: none; }

#produktanalyse {
  max-width: 95vw; }
  #produktanalyse img {
    max-width: 100%;
    height: auto; }
  #produktanalyse .header-image {
    padding-bottom: 1rem; }

.article-border {
  border-color: #e6e6e6;
  border-style: solid;
  border-width: 1px; }

.article-inset {
  padding: 1rem; }

.noSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none; }

.background {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  z-index: 0; }
  .background::after {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100vh - 56px);
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); }

.darker::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5); }

.brighter::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8); }

.iframe-section {
  display: flex;
  flex-direction: column;
  justify-content: center; }

iframe {
  width: 100vw;
  height: 80vh;
  margin: auto;
  z-index: 0; }
  iframe::after {
    content: '';
    position: absolute;
    width: 98%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8); }

.kuula-iframe {
  width: 100vw;
  height: 80vh; }

.iframe-overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  width: inherit;
  height: inherit; }

.scroll-in-iframe {
  cursor: pointer;
  height: 1.5rem;
  width: 3.75rem;
  overflow: hidden;
  opacity: .5;
  z-index: 0;
  animation: pulse 2s infinite linear; }
@keyframes pulse {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  .scroll-in-iframe::before {
    content: '';
    position: absolute;
    left: .9375rem;
    bottom: .625rem;
    height: 1.875rem;
    width: 1.875rem;
    border: 0.0625rem solid #fff;
    transform: rotate(45deg); }

.arrow-iframe-container {
  width: 100%;
  margin-top: .2rem; }

.text-wrapper {
  flex: 1;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 3rem; }

.flex-container-text-slideshow {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

.text-slideshow-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  height: auto;
  width: 100vw; }

.slideshow-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 3rem;
  height: auto;
  width: 100vw; }

.slideshow-container {
  position: relative;
  margin: auto; }

.my-slides {
  display: none; }
  .my-slides img,
  .my-slides video {
    height: auto;
    width: 100vw; }

.dark-sides {
  pointer-events: none; }
  .dark-sides:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 56.25vw;
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(20, 20, 20, 0.2), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(20, 20, 20, 0.2)); }

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -1.375rem;
  padding: 1rem;
  color: #fff;
  font-weight: bold;
  font-size: 1.125rem;
  transition: .6s ease;
  border-radius: 0 .2rem .2rem 0;
  user-select: none; }

.next {
  right: 0;
  border-radius: .2rem 0 0 .2rem; }
  .next :hover {
    background-color: rgba(0, 0, 0, 0.8); }

.prev {
  left: 0;
  border-radius: .2rem 0 0 .2rem; }
  .prev :hover {
    background-color: rgba(0, 0, 0, 0.8); }

.text {
  pointer-events: none;
  color: #f2f2f2;
  font-size: 0.9375rem;
  padding: .25rem;
  position: absolute;
  bottom: .25rem;
  width: 100%;
  text-align: center;
  background: rgba(20, 20, 20, 0.5); }

.fade {
  animation-name: fade;
  animation-duration: 1.5s; }

@keyframes fade {
  from {
    opacity: .4; }
  to {
    opacity: 1; } }
.scroll2content {
  display: block;
  margin: 0.9375rem auto;
  position: relative;
  cursor: pointer;
  height: 1.5rem;
  width: 3.75rem;
  overflow: hidden;
  opacity: .5;
  z-index: 0;
  align-self: flex-end;
  animation: pulse 2s infinite linear; }
@keyframes pulse {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  .scroll2content::before {
    content: '';
    position: absolute;
    left: .9375rem;
    bottom: .625rem;
    height: 1.875rem;
    width: 1.875rem;
    border: 0.0625rem solid #fff;
    transform: rotate(45deg); }

.arrow-container {
  width: 100%;
  margin-top: .2rem; }

body {
  scroll-behavior: smooth;
  background-color: #141414;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  /* josefin-sans-regular - latin */
  /* montserrat-300 - latin */
  /* montserrat-regular - latin */
  /* montserrat-500 - latin */
  /* josefin-sans-regular - latin */
  /* montserrat-300 - latin */
  /* montserrat-regular - latin */
  /* montserrat-500 - latin */
  /* josefin-sans-regular - latin */
  /* montserrat-300 - latin */
  /* montserrat-regular - latin */
  /* montserrat-500 - latin */
  /* josefin-sans-regular - latin */
  /* montserrat-300 - latin */
  /* montserrat-regular - latin */
  /* montserrat-500 - latin */ }
@font-face {
  body {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: local("Josefin Sans Regular"), local("JosefinSans-Regular"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff2") format("woff2"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 200;
    src: local("Libre Franklin ExtraLight"), local("LibreFranklin-ExtraLight"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff2") format("woff2"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local("Montserrat Light"), local("Montserrat-Light"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local("Montserrat Medium"), local("Montserrat-Medium"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
  body h1 {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 0;
    z-index: 1; }
  body h2 {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.2;
    text-shadow: 0.125rem 0.125rem 0.3125rem #000;
    z-index: 1; }
  body h3 {
    color: #e6e6e6;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    z-index: 1; }
  body h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 0;
    z-index: 1; }
  body p {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.2rem;
    text-align: justify;
    z-index: 1; }
  body a {
    list-style: none;
    outline: none;
    text-decoration: none;
    text-shadow: none;
    z-index: 1;
    transition: color .3s ease; }
  body header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4rem;
    background: linear-gradient(rgba(20, 20, 20, 0.3), rgba(10, 10, 10, 0));
    text-align: left;
    color: white; }
    body header div.header-items {
      display: block;
      position: relative; }
      body header div.header-items nav {
        display: block;
        position: absolute;
        top: 1rem;
        right: 0;
        left: 0;
        bottom: 0;
        text-align: center; }
        body header div.header-items nav div.logo a {
          position: absolute;
          display: block;
          text-align: left;
          margin-left: 0.625rem;
          font-family: 'Josefin Sans', sans-serif;
          color: white;
          font-size: 150%;
          z-index: 1; }
        body header div.header-items nav #menu-toggle {
          display: block;
          position: absolute;
          top: .9rem;
          right: 1rem;
          transform: translate(0%, -50%);
          z-index: 1;
          user-select: none;
          /* checkbox for hamburger */
          /*
           * Transform all the slices of hamburger
           * into a crossmark.
           */ }
          body header div.header-items nav #menu-toggle input {
            display: block;
            width: 3.125rem;
            height: 2.5rem;
            position: absolute;
            top: -1rem;
            left: -1rem;
            cursor: pointer;
            opacity: 0;
            /* hide this */
            z-index: 2;
            /* and place it over the hamburger */ }
          body header div.header-items nav #menu-toggle span {
            display: block;
            width: 2.0625rem;
            height: 0.1875rem;
            margin-bottom: 0.3125rem;
            position: relative;
            background: white;
            border-radius: 0.0625rem;
            z-index: 1;
            transform-origin: 0.25rem 0.625rem;
            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
          body header div.header-items nav #menu-toggle span:first-child {
            transform-origin: 0% 0%; }
          body header div.header-items nav #menu-toggle span:nth-last-child(2) {
            transform-origin: 0% 100%; }
          body header div.header-items nav #menu-toggle input:checked ~ span {
            opacity: 1;
            transform: rotate(45deg) translate(-0.1875rem, -0.0625rem);
            background: white; }
          body header div.header-items nav #menu-toggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2); }
          body header div.header-items nav #menu-toggle input:checked ~ span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0.125rem, 0.4375rem); }
          body header div.header-items nav #menu-toggle input:checked ~ ul#menu-items {
            transform: none; }
          body header div.header-items nav #menu-toggle ul#menu-items {
            /* add dark background box */
            display: flex;
            flex-direction: column;
            align-content: center;
            position: absolute;
            width: 100vw;
            min-height: calc(100vh - 56px);
            justify-content: center;
            right: -1rem;
            top: -2.2rem;
            padding-top: -6rem;
            background: rgba(0, 0, 0, 0.8);
            list-style-type: none;
            /* dark background box animation*/
            transform-origin: 0% 0%;
            transform: translate(0%, -100%);
            transition: transform 1.2s ease; }
            body header div.header-items nav #menu-toggle ul#menu-items li {
              padding: 1rem;
              flex-basis: 1; }
              body header div.header-items nav #menu-toggle ul#menu-items li a {
                font-family: 'Montserrat', sans-serif;
                font-weight: 500;
                color: white;
                text-decoration: none;
                font-size: 1.5rem;
                margin-right: 2.5rem; }
                body header div.header-items nav #menu-toggle ul#menu-items li a:after {
                  display: block;
                  content: '';
                  position: absolute;
                  width: 100%;
                  left: 0;
                  margin: 1.25rem auto;
                  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.7); }
@font-face {
  body {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: local("Josefin Sans Regular"), local("JosefinSans-Regular"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff2") format("woff2"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 200;
    src: local("Libre Franklin ExtraLight"), local("LibreFranklin-ExtraLight"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff2") format("woff2"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local("Montserrat Light"), local("Montserrat-Light"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local("Montserrat Medium"), local("Montserrat-Medium"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
  body h1 {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 0;
    z-index: 1; }
  body h2 {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.2;
    text-shadow: 0.125rem 0.125rem 0.3125rem #000;
    z-index: 1; }
  body h3 {
    color: #e6e6e6;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    z-index: 1; }
  body h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 0;
    z-index: 1; }
  body p {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.2rem;
    text-align: justify;
    z-index: 1; }
  body a {
    list-style: none;
    outline: none;
    text-decoration: none;
    text-shadow: none;
    z-index: 1;
    transition: color .3s ease; }
  body .intro {
    min-height: calc(100vh - 56px); }
  body div.background {
    position: absolute;
    display: flex;
    justify-content: center; }
    body div.background video {
      display: none; }
  body .excerpt {
    display: block;
    margin: auto;
    padding-top: 4rem;
    text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.6);
    width: 94%;
    z-index: 0;
    animation: 2s ease 0s 1 slideInFromTop; }
    body .excerpt img {
      display: inline-flex;
      width: 7.5rem;
      height: auto; }
@keyframes slideInFromTop {
  0% {
    transform: translateY(-20%);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
  body .main-play-button {
    position: relative;
    display: inline-block;
    height: 3.125rem;
    width: 3.125rem;
    margin: 1% 0 0;
    border-radius: 50%;
    border: 0.0625rem solid white;
    padding-left: .5rem;
    line-height: 2.8125rem;
    animation: scale 2s infinite ease; }
@keyframes scale {
  0% {
    transform: scale(0.95); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(0.95); } }
    body .main-play-button:before {
      content: "";
      border-style: solid;
      border-width: 0.5rem 0 0.5rem 0.875rem;
      border-color: transparent transparent transparent #fff;
      display: inline-block;
      vertical-align: middle; }
  body .dark-box {
    visibility: hidden;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2; }
    body .dark-box.show {
      visibility: visible;
      background-color: rgba(0, 0, 0, 0.9);
      transition: all 1.2s ease; }
  body .video-wrapper {
    display: none;
    position: absolute;
    width: 100%;
    margin: auto 0;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: 2; }
    body .video-wrapper.show {
      display: block; }
    body .video-wrapper div.x-button {
      display: none;
      position: absolute;
      right: .5rem;
      top: 1.25rem;
      font-size: 3.75rem;
      line-height: 1.25rem; }
      body .video-wrapper div.x-button.show {
        display: block; }
      body .video-wrapper div.x-button a {
        color: #fff;
        opacity: 0; }
      body .video-wrapper div.x-button span {
        display: block;
        width: 2.0625rem;
        height: 0.25rem;
        position: absolute;
        background: gainsboro;
        border-radius: .1875rem; }
        body .video-wrapper div.x-button span:first-child {
          transform: rotate(45deg); }
        body .video-wrapper div.x-button span:nth-child(2) {
          transform: rotate(-45deg); }
@font-face {
  body {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: local("Josefin Sans Regular"), local("JosefinSans-Regular"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff2") format("woff2"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 200;
    src: local("Libre Franklin ExtraLight"), local("LibreFranklin-ExtraLight"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff2") format("woff2"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local("Montserrat Light"), local("Montserrat-Light"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local("Montserrat Medium"), local("Montserrat-Medium"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
  body h1 {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 0;
    z-index: 1; }
  body h2 {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.2;
    text-shadow: 0.125rem 0.125rem 0.3125rem #000;
    z-index: 1; }
  body h3 {
    color: #e6e6e6;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    z-index: 1; }
  body h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 0;
    z-index: 1; }
  body p {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.2rem;
    text-align: justify;
    z-index: 1; }
  body a {
    list-style: none;
    outline: none;
    text-decoration: none;
    text-shadow: none;
    z-index: 1;
    transition: color .3s ease; }
  body .input-field-error {
    border: 0.1em solid #dc0032 !important;
    z-index: 10; }
  body .error {
    color: #dc0032;
    z-index: 10; }
  body .success {
    font-size: 1.375rem;
    z-index: 10; }
  body .button {
    background-color: rgba(10, 10, 10, 0.9);
    border-width: 0;
    color: #fff;
    cursor: pointer;
    flex-basis: 100%;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 0.9375rem;
    font-weight: bold;
    margin-bottom: .625rem;
    padding: 2.5rem;
    text-align: center;
    filter: contrast(200%);
    transition: .8s ease; }
    body .button:hover {
      background-color: rgba(20, 20, 20, 0.5);
      border-width: thin;
      border-radius: .625rem;
      border-style: solid; }
  body section {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    text-align: center; }
    body section.contact-form div.contact-form-wrapper {
      display: flex;
      flex-direction: column;
      margin: auto;
      width: 90vw;
      animation: 2s ease 0s 1 slideInFromTop; }
@keyframes slideInFromTop {
  0% {
    transform: translateY(-20%);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
      body section.contact-form div.contact-form-wrapper div.contact-form-items {
        display: flex;
        justify-content: space-between;
        margin: auto;
        flex-wrap: wrap;
        color: #fff;
        max-width: 90vw;
        text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.6); }
        body section.contact-form div.contact-form-wrapper div.contact-form-items input[type=text] {
          margin-bottom: .625rem;
          font-family: 'Libre Franklin', sans-serif;
          text-align: center;
          padding: .625rem;
          font-size: 0.9375rem;
          color: #fff;
          border-width: 0;
          background-color: rgba(0, 0, 0, 0.2);
          filter: contrast(200%); }
          body section.contact-form div.contact-form-wrapper div.contact-form-items input[type=text]#first-name {
            flex-basis: 100%; }
          body section.contact-form div.contact-form-wrapper div.contact-form-items input[type=text]#last-name {
            flex-basis: 100%; }
          body section.contact-form div.contact-form-wrapper div.contact-form-items input[type=text]#e-mail-address {
            flex-basis: 100%; }
          body section.contact-form div.contact-form-wrapper div.contact-form-items input[type=text]#subject {
            flex-basis: 100%; }
        body section.contact-form div.contact-form-wrapper div.contact-form-items textarea {
          flex-basis: 100%;
          min-width: 6.25rem;
          margin-bottom: .625rem;
          font-family: 'Libre Franklin', sans-serif;
          text-align: center;
          padding: .625rem;
          font-size: 0.9375rem;
          color: #fff;
          border-color: #fff;
          border-width: 0;
          background-color: rgba(0, 0, 0, 0.2);
          filter: contrast(200%); }
@font-face {
  body {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: local("Josefin Sans Regular"), local("JosefinSans-Regular"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff2") format("woff2"), url("../fonts/josefin-sans-v13-latin/josefin-sans-v13-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 200;
    src: local("Libre Franklin ExtraLight"), local("LibreFranklin-ExtraLight"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff2") format("woff2"), url("../fonts/libre-franklin-v3-latin/libre-franklin-v3-latin-200.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local("Montserrat Light"), local("Montserrat-Light"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-300.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
@font-face {
  body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local("Montserrat Medium"), local("Montserrat-Medium"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff2") format("woff2"), url("../fonts/montserrat-v13-latin/montserrat-v13-latin-500.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } }
  body h1 {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 0;
    z-index: 1; }
  body h2 {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.2;
    text-shadow: 0.125rem 0.125rem 0.3125rem #000;
    z-index: 1; }
  body h3 {
    color: #e6e6e6;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    z-index: 1; }
  body h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    padding-bottom: 0;
    z-index: 1; }
  body p {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.2rem;
    text-align: justify;
    z-index: 1; }
  body a {
    list-style: none;
    outline: none;
    text-decoration: none;
    text-shadow: none;
    z-index: 1;
    transition: color .3s ease; }
  body section#portfolio div.flex-container-portfolio {
    background-color: #cdcdcd;
    display: flex;
    position: relative;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    body section#portfolio div.flex-container-portfolio div.portfolio {
      display: block;
      margin: auto 0; }
      body section#portfolio div.flex-container-portfolio div.portfolio div.gallery {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff; }
        body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element {
          position: relative;
          margin-bottom: 3vw;
          overflow: hidden;
          flex-basis: 1; }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element:before {
            content: 'COMING SOON';
            color: #fff;
            position: absolute;
            left: 0;
            top: 45%;
            width: 100%; }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.overlay {
            position: absolute;
            bottom: 0;
            margin: 0;
            width: 100%; }
            body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.overlay h3 {
              margin: 0;
              font-family: "Montserrat", sans-serif;
              font-weight: 300;
              font-size: 1.125rem;
              color: #fff;
              text-shadow: 0.125rem 0.125rem 0.3125rem #000;
              line-height: 2;
              background: linear-gradient(rgba(10, 10, 10, 0), rgba(20, 20, 20, 0.5)); }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.underlay video {
            display: none; }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.underlay img {
            display: none; }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.color-image {
            display: flex;
            align-items: flex-start;
            /* chrome flexbug (not honering img ratio) */
            /*filter: grayscale(100%);*/
            filter: opacity(100%);
            transform: scale(1);
            transition: all 1.2s ease; }
            body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.color-image img {
              width: 100vw;
              height: 56.25vw;
              /* 16:9 */ }
  body section#slideshow-what-is-industrial-design {
    background-color: #282828;
    min-height: 0; }
    body section#slideshow-what-is-industrial-design div.flex-container-text-slideshow div.text-slideshow-wrapper div.slideshow-text {
      background-color: dimgrey; }
  body section#slideshow-window-to-another-world {
    background-color: #282828;
    min-height: 0; }
    body section#slideshow-window-to-another-world div.flex-container-text-slideshow div.text-slideshow-wrapper div.slideshow-text {
      background-color: dimgrey; }
  body section#slideshow-wasting-reality {
    background-color: #282828;
    min-height: 0; }
    body section#slideshow-wasting-reality div.flex-container-text-slideshow div.text-slideshow-wrapper div.slideshow-text {
      background-color: dimgrey; }
  body section#slideshow-connexion {
    background-color: #282828;
    min-height: 0; }
    body section#slideshow-connexion div.flex-container-text-slideshow div.text-slideshow-wrapper div.slideshow-text {
      background-color: dimgrey; }
  body section#slideshow-2d-sketches {
    background-color: #282828;
    min-height: 0; }
    body section#slideshow-2d-sketches div.flex-container-text-slideshow div.text-slideshow-wrapper div.slideshow-text {
      background-color: dimgrey; }
  body section#slideshow-armortec {
    background-color: #282828;
    min-height: 0; }
    body section#slideshow-armortec div.flex-container-text-slideshow div.text-slideshow-wrapper div.slideshow-text {
      background-color: #968034; }
  body section#slideshow-oglass {
    background-color: #282828;
    min-height: 0; }
    body section#slideshow-oglass div.flex-container-text-slideshow div.text-slideshow-wrapper div.slideshow-text {
      background-color: #968034; }
  body section#slideshow-density-monitor {
    background-color: #282828;
    min-height: 0; }
    body section#slideshow-density-monitor div.flex-container-text-slideshow div.text-slideshow-wrapper div.slideshow-text {
      background-color: dimgrey; }
  body address {
    font-size: 1rem;
    font-style: normal;
    color: #a0a0a0; }
  body footer {
    display: flex;
    position: relative;
    width: 100%;
    height: 20rem;
    overflow: hidden;
    text-align: left;
    background-color: rgba(15, 15, 15, 0.9);
    margin: 0; }
    body footer div.footer-items {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      width: 96%;
      left: 2%;
      padding: 1rem; }
      body footer div.footer-items h2 {
        position: relative;
        font-size: 1rem;
        font-style: normal;
        font-weight: 200;
        color: #a0a0a0;
        margin-top: 3.25rem; }
        body footer div.footer-items h2::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          margin-top: -1.875rem;
          border-top: 0.5px solid #a0a0a0; }

/*# sourceMappingURL=main.css.map */