/* 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; }

body {
  /* Adapt dimensions of Background Video to aspect-ratio of device */
  /* Adapt dimensions of Background image to aspect-ratio of device */ }
  @media (min-aspect-ratio: 16 / 9) {
    body .background-video {
      position: absolute;
      width: 100%;
      height: auto; } }
  @media (max-aspect-ratio: 16 / 9) {
    body .background-video {
      position: absolute;
      width: auto;
      height: 100%; } }
  @media (min-aspect-ratio: 16 / 9) {
    body .background img.background-image {
      position: fixed;
      width: 100vw;
      height: auto;
      z-index: -1; }
    body .background img.background-image-static {
      position: relative;
      width: 100vw;
      height: auto;
      z-index: -1; } }
  @media (max-aspect-ratio: 16 / 9) {
    body .background img.background-image {
      position: fixed;
      width: auto;
      height: 100vh;
      z-index: -1; }
    body .background img.background-image-static {
      position: relative;
      width: auto;
      height: 100vh;
      z-index: -1; } }
  @media (min-width: 1025px) {
    body {
      /* Slideshow container */
      /* On hover, add a black background color with a little bit see-through */
      /* Caption text */
      /* Fading animation */
      /* Show Play/Pause Icon only on large devices */
      /* Show Sound ON/OFF Icon only on large devices */
      /* Show Video on large devices NOT with 100% width */
      /* Position Logo and Nav Items NOT in the corners on large devices*/
      /* Narrow the width for the middle text in front of background video*/
      /* Position Footer Text NOT in the corners on large devices (not pretty)*/ }
      body iframe {
        width: 60vw;
        height: 33.75vw;
        margin: auto;
        z-index: 0; }
        body iframe::after {
          content: '';
          position: absolute;
          width: 98%;
          height: 100%;
          top: 0;
          left: 0;
          background-color: rgba(255, 255, 255, 0.8); }
      body .intro {
        min-height: 100vh; }
      body .background::after {
        height: 100vh; }
      body div.background video {
        display: flex; }
      body h4 {
        font-size: 1.2vw;
        text-align: left;
        color: #333; }
        body h4:after {
          content: "";
          display: block;
          width: 7rem;
          margin: 1rem 0 0 0;
          border-bottom: 1.5px solid rgba(230, 230, 230, 0.5); }
      body .text-wrapper {
        margin: auto;
        width: 40%;
        /*Increase font-size for larger devices*/ }
        body .text-wrapper h1 {
          font-size: 1.875rem;
          padding-bottom: 1%; }
        body .text-wrapper p {
          font-size: 1.25rem;
          line-height: 1.2; }
      body content #play {
        height: 3.75rem;
        width: 3.75rem;
        line-height: 3.4375rem; }
        body content #play::after {
          font-size: 1.625rem; }
      body .main-play-button {
        height: 3.75rem;
        width: 3.75rem;
        line-height: 3.4375rem; }
        body .main-play-button:before {
          border-width: 0.625rem 0 0.625rem 1rem; }
      body .flex-container-text-slideshow {
        min-height: 100vh; }
      body .text-slideshow-wrapper {
        margin: auto 0;
        flex-direction: row;
        justify-content: center;
        height: 36.5625vw;
        width: auto; }
      body .slideshow-text {
        padding: 3vw;
        width: 20vw;
        height: 36.5625vw; }
        body .slideshow-text p {
          font-size: .8vw;
          color: white;
          line-height: 1.2;
          text-align: left;
          margin-left: 2rem; }
      body .my-slides {
        display: none; }
        body .my-slides img, body .my-slides video {
          width: 65vw; }
      body .dark-sides:after {
        content: "";
        height: 36.5625vw;
        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(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(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)); }
      body .prev, body .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 1.125rem;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none; }
      body .next {
        right: 0;
        border-radius: 3px 0 0 3px; }
      body .prev {
        left: 0;
        border-radius: 3px 0 0 3px; }
      body .prev:hover, body .next:hover {
        background-color: rgba(0, 0, 0, 0.8); }
      body .text {
        font-size: 0.9375rem;
        padding: .75rem; }
      body .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s; }
    @keyframes fade {
      from {
        opacity: .4; }
      to {
        opacity: 1; } }
      body #background-video-paused-toggle {
        position: absolute;
        display: inline-block;
        right: 100px;
        bottom: 20px;
        height: 70px;
        width: 70px;
        line-height: 70px; }
        body #background-video-paused-toggle::after {
          font-family: 'fontello';
          font-style: normal;
          font-size: 1.5625rem;
          line-height: 1.5625rem;
          content: "\e803";
          /*Play Icon*/
          vertical-align: middle;
          text-align: center;
          -webkit-font-smoothing: antialiased;
          color: rgba(255, 255, 255, 0.3); }
        body #background-video-paused-toggle.paused::after {
          content: "\e804";
          /*Pause Icon*/ }
        body #background-video-paused-toggle:hover::after {
          color: white;
          transition: color .5s ease; }
      body #background-video-sound-toggle {
        position: absolute;
        display: inline-block;
        right: 25px;
        bottom: 20px;
        height: 70px;
        width: 70px;
        line-height: 70px; }
        body #background-video-sound-toggle::after {
          display: inline-block;
          font-family: 'fontello';
          font-style: normal;
          font-size: 1.5625rem;
          line-height: 1.5625rem;
          content: "\e805";
          vertical-align: middle;
          text-align: center;
          -webkit-font-smoothing: antialiased;
          color: rgba(255, 255, 255, 0.3); }
        body #background-video-sound-toggle.muted::after {
          content: "\e806"; }
        body #background-video-sound-toggle:hover::after {
          color: white;
          transition: color .5s ease; }
      body .video-wrapper {
        width: 80%;
        left: 10%;
        top: 50%;
        transform: translate(0%, -50%); }
      body header div.header-items {
        width: 80%;
        left: 10%; }
        body header div.header-items nav {
          text-align: right; }
          body header div.header-items nav #menu-toggle {
            position: relative;
            top: 0;
            right: 0; }
            body header div.header-items nav #menu-toggle input {
              display: none; }
            body header div.header-items nav #menu-toggle span {
              display: none; }
            body header div.header-items nav #menu-toggle ul#menu-items {
              /* remove dark background box */
              display: flex;
              flex-direction: row;
              justify-content: flex-end;
              min-height: 0;
              list-style-type: none;
              right: 0;
              top: 0;
              margin: 0;
              padding: 0;
              width: 100%;
              height: 0;
              background-color: rgba(0, 0, 0, 0);
              transform: none; }
              body header div.header-items nav #menu-toggle ul#menu-items li {
                padding: 0; }
                body header div.header-items nav #menu-toggle ul#menu-items li a {
                  position: relative;
                  display: inline-block;
                  margin-left: 2em;
                  font-size: 1rem; }
                  body header div.header-items nav #menu-toggle ul#menu-items li a:hover {
                    color: rgba(255, 255, 255, 0.7);
                    transition: color .3s ease; }
                  body header div.header-items nav #menu-toggle ul#menu-items li a:hover::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    left: 0;
                    margin: 1.25rem auto;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
                    transition: border-bottom .3s ease; }
                  body header div.header-items nav #menu-toggle ul#menu-items li a:after {
                    border-bottom: none; }
      body .excerpt {
        width: 40%;
        /*Increase font-size for larger devices*/ }
        body .excerpt img {
          width: 150px; }
        body .excerpt h1 {
          font-size: 1.875rem;
          padding-bottom: 1%; }
        body .excerpt h2 {
          line-height: 1.4; }
        body .excerpt h3 {
          font-size: 1.5rem;
          /*Show Border-Line only for larger devices*/ }
          body .excerpt h3:after {
            content: "";
            display: block;
            width: 120px;
            margin: 40px auto 0;
            border-bottom: 1.5px solid rgba(230, 230, 230, 0.5); }
      body footer {
        height: 25rem;
        padding: 0; }
        body footer div.footer-items {
          width: 80%;
          left: 10%; } }
  @media (min-width: 960px) {
    body .e1 {
      order: 3; }
    body .e2 {
      order: 2; }
    body .e3 {
      order: 11; }
    body .e4 {
      order: 4; }
    body .e5 {
      order: 6; }
    body .e6 {
      order: 7; }
    body .e7 {
      order: 8; }
    body .e8 {
      order: 10; }
    body .e9 {
      order: 9; }
    body .e10 {
      order: 5; }
    body .e11 {
      order: 1; }
    body #produktanalyse {
      max-width: 62.5rem; }
      body #produktanalyse .header-image {
        padding-bottom: 5rem; }
    body .article-title-exception {
      padding: 5rem; }
    body #mirror {
      padding-top: 5rem;
      padding-bottom: 7rem; }
      body #mirror p {
        line-height: 1.8rem;
        padding: 0 0 .8rem 0;
        text-align: justify;
        font-size: 1.125rem; }
      body #mirror h3 {
        font-size: 1.125rem; }
    body .article-inset {
      padding: 2rem; }
    body h1 {
      padding-bottom: 1rem;
      font-size: 1.875rem; }
    body section#portfolio div.flex-container-portfolio {
      background-color: rgba(30, 30, 30, 0.98); }
      body section#portfolio div.flex-container-portfolio div.portfolio div.gallery {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 2rem;
        padding-bottom: 3rem; }
        body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element {
          margin: 5px; }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.overlay {
            height: 100%;
            background-color: rgba(20, 20, 20, 0.15); }
            body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.overlay h3 {
              font-size: 1.125rem;
              line-height: 2;
              background: none; }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.underlay video {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            margin: 0;
            width: 100%;
            z-index: 0; }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.underlay img {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            margin: 0;
            width: 100%;
            z-index: 0; }
          body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.color-image {
            filter: opacity(100%);
            align-items: flex-start;
            /* chrome flexbug (not honering img ratio) */ }
            body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.color-image:hover {
              filter: opacity(0%);
              transition: all 1.2s ease; }
            body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.color-image img {
              height: auto;
              flex: auto;
              max-width: 22vw; }
    body section#about-intro div.flex-container-about-intro {
      justify-content: center;
      align-items: center;
      display: flex;
      flex-direction: column; }
      body section#about-intro div.flex-container-about-intro content.text-wrapper {
        max-width: 600px; }
        body section#about-intro div.flex-container-about-intro content.text-wrapper h1 {
          font-size: 1.875rem;
          padding-bottom: 1%;
          /*Show Border-Line only for larger devices*/ }
          body section#about-intro div.flex-container-about-intro content.text-wrapper h1:after {
            content: "";
            display: block;
            width: 20%;
            margin: 1rem auto 0;
            border-bottom: 1.5px solid rgba(230, 230, 230, 0.5); }
    body section#contact-form div.contact-form-wrapper {
      max-width: 37.5rem; }
      body section#contact-form div.contact-form-wrapper div.contact-form-items input[type=text]#first-name {
        flex-basis: 18.4375rem; }
      body section#contact-form div.contact-form-wrapper div.contact-form-items input[type=text]#last-name {
        flex-basis: 18.4375rem; }
      body section#contact-form div.contact-form-wrapper div.contact-form-items textarea {
        flex-basis: 100%;
        max-width: 37.5rem;
        margin-bottom: 0.625rem;
        font-family: "Libre Franklin", sans-serif;
        text-align: center;
        padding: 0.625rem;
        font-size: 0.9375rem;
        color: white;
        border-color: white;
        border-width: 0;
        background-color: rgba(0, 0, 0, 0.2);
        filter: contrast(200%); } }
  @media (min-width: 1700px) {
    body section#portfolio div.flex-container-portfolio div.portfolio div.gallery a.clickable-flex-element div.overlay h3 {
      font-size: 1.375rem;
      line-height: 2.5; } }
  @media (min-width: 732px) {
    body section#contact-form div.flex-container-contact div.contact-form-wrapper div.contact-form-items div.flex-container-name {
      flex-direction: row;
      justify-content: stretch; }
      body section#contact-form div.flex-container-contact div.contact-form-wrapper div.contact-form-items div.flex-container-name input {
        max-width: 290px; }
    body section#contact-form div.flex-container-contact div.contact-form-wrapper div.contact-form-items p input {
      max-width: 600px; }
    body section#contact-form div.flex-container-contact div.contact-form-wrapper div.contact-form-items p textarea {
      max-width: 600px; } }

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