/* CSS3 Style with Flexbox design for responsibility */

/* The site Tag is the wrapping div tag */


/* Fonts
========================================================================== */
@font-face {
    src: url("css/fonts/Playfair\ Display\ 700.ttf");
    font-family: PlayfairDisplay;
    font-weight: 700;
}
@font-face {
    src: url("css/fonts/Playfair\ Display\ 700italic.ttf");
    font-family: PlayfairDisplay;
    font-style: italic;
    font-weight: 700;
}
@font-face {
    src: url("css/fonts/Playfair\ Display\ 900.ttf");
    font-family: PlayfairDisplay;
    /* font-style: italic; */
    font-weight: 900;
}
@font-face {
    src: url("css/fonts/Playfair\ Display\ 900italic.ttf");
    font-family: PlayfairDisplay;
    font-style: italic;
    font-weight: 900;
}
@font-face {
    src: url("css/fonts/Playfair\ Display\ regular.ttf");
    font-family: PlayfairDisplay;
    font-style: normal;
    /* font-weight: 900; */
}
@font-face {
    src: url("css/fonts/Playfair\ Display\ italic.ttf");
    font-family: PlayfairDisplay;
    font-style: italic;
}
@font-face {
    src: url("css/fonts/Spinnaker-Regular.ttf");
    font-family: Spinnaker;
}
@font-face {
    src: url("css/fonts/Michroma-Regular.ttf");
    font-family: Michroma;
}
@font-face {
    src: url("css/fonts/RedHatText-Regular.ttf");
    font-family: RedHatText;
}
@font-face {
    src: url("css/fonts/Amiko-Regular.ttf");
    font-family: Amiko;
}
@font-face {
    src: url("css/fonts/JosefinSlab-Regular.ttf");
    font-family: JosefinSlab;
}
@font-face {
    src: url("css/fonts/PoiretOne-Regular.ttf");
    font-family: PoiretOne;
}
@font-face {
    src: url("css/fonts/Gruppo-Regular.ttf");
    font-family: Gruppo;
}
@font-face {
    src: url("css/fonts/LibreBarcode128Text-Regular.ttf");
    font-family: Barcode1;
}
@font-face {
    src: url("css/fonts/LibreBarcode39Text-Regular.ttf");
    font-family: Barcode2;
}
@font-face {
    src: url("css/fonts/Montserrat-Regular.ttf");
    font-family: Montserrat;
}
@font-face {
    src: url("css/fonts/Raleway-Regular.ttf");
    font-family: Raleway;
}
@font-face {
    src: url("fonts/LibreBarcode39Extended-Regular.ttf");
    font-family: Barcode;
}

/*========================================================================== */
/*========================================================================== */
/*=====================     None responsive Design    ====================== */
/*========================================================================== */
/*========================================================================== */
@media all and (min-width: 800px) {
/* Typo
========================================================================== */
  .site-title a {
      text-decoration: none;
      color:#ffffff;
  }

  .main-navigation a {
      text-decoration: none;
      color: black;
  }

  .main-navigation a:hover {
      color: white;
      background-color: black;
      padding: 3vh;
      transition: all 200ms;
  }

  .Logo_2 h1 {
      color: white;
      padding-top: 20vmin !important;
      font-size: 15vmin !important;
  }

  .Logo_2 h2 {
      font-family: Barcode2;
      font-weight: normal;
      color: white;
      text-align: center;
      font-size: 7.5vmin;
      margin-top: -5vh;
      margin-bottom: 30vmin;
  }

  p.left{
    max-width: 100% !important;
  }

  p.right{
    max-width: 100% !important;
  }
  h2.left{
    max-width: 100% !important;
  }

  h2.right{
    max-width: 100% !important;
  }
  h3.left{
    max-width: 100% !important;
  }

  h3.right{
    max-width: 100% !important;
  }
  /* Site Wrapper
       ========================================================================== */
  #page {
      display: flex;
      flex-flow: column;
  }

  .site > * {
      padding: 0;
      flex: 1 100%;
  }

  #page canvas {
      position: fixed;
      z-index: -1;
      width: 100vh;
      height: 100vh;
  }

  /* Header
  ========================================================================== */
  header {

          background-color: lightslategray;
      }

  .head_image {
          height: 74vmin;
          background-position: center;
          background-size: cover;
      }

  h1.site-title {
      font-family: PoiretOne;
      font-size: 14vmin;
      font-weight: inherit;
      text-align: center;
      padding-top: 20vmin;
      margin: 0vmin;
      margin-bottom: 10vmin;
      /* color: #ffffff; */
  }

  header h2 {
          font-family: Barcode2;
          font-weight: inherit;
          font-size: 5vmin;
          text-align: center;
          margin-top: -6vmin;
          margin-bottom: 20vmin;
          color: #ffffff;
      }


  /* Navigation
       ========================================================================== */
   .head-nav .mobile-menu-btn {
          display: none;
    }
   .main-navigation ul {
          background: white;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-flex-flow: row center;
          justify-content: center;
          margin: 0;
          box-shadow: black 0px 0px 30px -20px;
          padding-left:0px !important;
       }

   .main-navigation li {
          font-family: Raleway;
          list-style: none;
          font-size: 3vmin;
          text-align: center;
          font-weight: bold;
          margin: 14vmin 3vmin;
  }

  * > .site-button{
    display: none;
  }

  /* Page Design
  ========================================================================== */

  /* Article Design
  ========================================================================== */

	.galery {
    padding: 0% 10% 0% 10%;
}
  article{
    padding-bottom: 5vmin;

  }

  .wp-block-nk-visual-portfolio {
    max-width: 90% !important;
    padding-left: 10%;
  }

  #post-120 .wp-block-nk-visual-portfolio {
    max-width: 100% !important;
    padding-left: 0%;
  }

  .entry-content h2 {
          margin: 0vmin;
          text-align: center;
          padding-top: 5vmin;
          padding-bottom: 5vmin;
      }

  .page {
          background-color: White;
      }

  .entry-content p {
    margin: 0vmin !important;
    /*! width: 60vmin; */
      /*! text-align: center; */
      /* padding-left: 33%; */
      /* padding-right: 33%; */
    text-align: center;
    font-family: Raleway;
    font-size: 3vmin;
      }

  .blocktext-h2 {
          font-family: PlayFairDisplay;
          font-weight: 900;
          font-style: normal;
          font-size: 10vmin;
      }

  .blocktext-h3 {
      font-family: Raleway;
      text-align: center;
      /* font-weight: 900; */
      font-size: 5vmin;
  }
  /* Kontakt
  ========================================================================== */

  .leaflet-map {
      margin: 2% 0% 2% 10%;
  }

  /* Footer
  ========================================================================== */
  footer{
    background-color: black;
    text-align: center;
  }

  .site-info {
    color: white;
    font-family: Raleway;
    font-size: 2vmin;
  }

  #secondary.widgetarea {
    text-align: center;
  }

  .widget-title {
  }

  #secondary.widget-area {
    background-color: black;
    padding: 1vmin;
  }

  .alignment a {
    margin: 0vmin !important;
  }

  #primary {
    padding: 0;
    margin: 0;
  }

  .alignment {
    /* text-align: left; */
    text-align: center;
    padding: 1vmin 0vmin 1vmin 0vmin;
  }

  footer#colophon a {
    color: white;
    font-family: raleway;
    text-align: ;
  }

  /* Scroll Animations
  ========================================================================== */
  @media all and (min-width: 800px) {
      .fadescroll {
          transition: all 500ms;
          opacity: 0;
      }
      .fade {
          opacity: 1;
      }

      .moveleft {
          max-width: 90%;
          transition: all 500ms;
          opacity: 0;
          transform: translate(100px, 0);
      }

      .left {
          transform: translate(0px, 0) !important;
          opacity: 1; */
      }

      .moveright {
          max-width: 90%;
          transition: all 500ms;
          opacity: 0;
          transform: translate(-100px, 0);
      }

      .right {
          transform: translate(0px, 0) !important;
          opacity: 1;
      }


  }

  /* divisions
  ========================================================================== */


        .site { flex: 2 0px;}
        header {order: 0;}
  }


/*========================================================================== */
/*========================================================================== */
/*=====================        Mobile Devices         ====================== */
/*========================================================================== */
/*========================================================================== */

/*
========================================================================== */

@media all and (min-width: 0px) and (max-width: 800px) {
	.galery {
    padding: 0% 10% 0% 10%;
}

      .site-title a {
          text-decoration: none;
          color:#ffffff;
      }

      .Logo_2 h1 {
          color: white;
          padding-top: 20vmin !important;
          font-size: 10vmin !important;
      }

      .Logo_2 h2 {
          font-family: Barcode2;
          font-weight: normal;
          color: white;
          text-align: center;
          font-size: 2.5vmin;
          margin-top: -5vh;
          margin-bottom: 30vmin;
      }

      p.left{
        max-width: 100% !important;
      }

      p.right{
        max-width: 100% !important;
      }
      h2.left{
        max-width: 100% !important;
      }

      h2.right{
        max-width: 100% !important;
      }
      h3.left{
        max-width: 100% !important;
      }

      h3.right{
        max-width: 100% !important;
      }
/* Site Wrapper
========================================================================== */
      #page {
          display: flex;
          flex-flow: column;
      }

      .site > * {
          padding: 0;
          flex: 1 100%;
      }

      #page canvas {
          position: fixed;
          z-index: -1;
          width: 100vh;
          height: 100vh;
      }

/* Header
========================================================================== */
      header {

              background-color: white;
              height: 100vh;
          }

      .head_image {
              min-height: 100vh;
              background-position: center;
              background-size: cover;
          }

      h1.site-title {
          font-family: PoiretOne;
          font-size: 14vmin;
          font-weight: inherit;
          text-align: center;
          padding-top: 80vmin;
          margin: 0vmin;
          margin-bottom: 10vmin;
          /* color: #ffffff; */
      }

      header h2 {
              font-family: Barcode2;
              font-weight: inherit;
              font-size: 5vmin;
              text-align: center;
              margin-top: -6vmin;
              margin-bottom: 20vmin;
              color: #ffffff;
          }


/* Navigation
========================================================================== */
.head-nav {
  background-color: #ffffff80;
  position: fixed;
  width: 100%;
  z-index: 3;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
}
.head-nav nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    background-color: #ffffff80;
}

.head-nav nav ul a {
    color: #000;
    font-family: Raleway;
    text-decoration: none;
    display: block;
    outline: 1px solid black;
    padding: 20px;
}

.head-nav nav ul a:hover {
    background-color: #bbb;
}

.head-nav .main-menu {
    clear: both;
    max-height: 0;
    transition: max-height .2 ease-out;
}

.head-nav .mobile-menu-icon {
  /* border: 1px solid red; */
  padding: 20px 20px;
  position: relative;
  float: right;
}

.head-nav .mobile-menu-icon .nav-icon {
  background: #333;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2 ease-out;
}

.head-nav .mobile-menu-icon .nav-icon:before {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 5px;
  transition: all .2s ease-out;
}
.head-nav .mobile-menu-icon .nav-icon:after {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: -5px;
  transition: all .2 ease-out;
}

.head-nav .mobile-menu-btn {
  display: none;
}

.head-nav .mobile-menu-btn:checked ~ .main-menu {
  max-height: 100%;
}

/* Page Design
========================================================================== */

/* Article Design
========================================================================== */
	.galery {
    padding: 0% 10% 0% 10%;
}

      article{
        padding-bottom: 5vmin;
      }

      .wp-block-nk-visual-portfolio {
        max-width: 80% !important;
        padding-left: 10%;
      }

      #post-120 .wp-block-nk-visual-portfolio {
        max-width: 100% !important;
        padding-left: 0%;
      }

      .entry-content h2 {
              margin: 0vmin;
              text-align: center;
              padding-top: 5vmin;
              padding-bottom: 5vmin;
          }

      .page {
              background-color: White;
          }

      .entry-content p {
        margin: 0vmin !important;
        /*! width: 60vmin; */
          /*! text-align: center; */
          /* padding-left: 33%; */
          /* padding-right: 33%; */
        text-align: center;
        font-family: Raleway;
        font-size: 3vmin;
          }

      .blocktext-h2 {
              font-family: PlayFairDisplay;
              font-weight: 900;
              font-style: normal;
              font-size: 10vmin;
          }

      .blocktext-h3 {
          font-family: Raleway;
          text-align: center;
          /* font-weight: 900; */
          font-size: 5vmin;
      }
/* Kontakt
========================================================================== */

      .leaflet-map {
          margin: 2% 0% 2% 10%;
      }

/* Footer
========================================================================== */
      footer{
        background-color: black;
        text-align: center;
      }

      .site-info {
        color: white;
        font-family: Raleway;
        font-size: 2vmin;
      }

      #secondary.widgetarea {
        text-align: center;
      }

      .widget-title {
      }

      #secondary.widget-area {
        background-color: black;
        padding: 1vmin;
      }

      .alignment a {
        margin: 0vmin !important;
      }

      #primary {
        padding: 0;
        margin: 0;
      }

      .alignment {
        /* text-align: left; */
        text-align: center;
        padding: 1vmin 0vmin 1vmin 0vmin;
      }

      footer#colophon a {
        color: white;
        font-family: raleway;
        text-align: ;
      }

/* Scroll Animations
========================================================================== */
      @media all and (min-width: 800px) {
          .fadescroll {
              transition: all 500ms;
              opacity: 0;
          }
          .fade {
              opacity: 1;
          }

	  .moveright {
	  max-width: 90%;
          transition: all 500ms;
    	  opacity: 0;
    	  transform: translate(-100px, 0);
          padding: 0% 0% 0% 5%;
	  }
          
	  .left {
              transform: translate(0px, 0) !important;
              opacity: 1; */
          }

          .moverleft {
              max-width: 90%;
              transition: all 500ms;
              opacity: 0;
              transform: translate(-10vh, 0);
	      padding: 0% 5% 0% 0%
          }

          .right {
              transform: translate(0px, 0) !important;
              opacity: 1;
          }


      }

/* divisions
========================================================================== */
      .site { flex: 2 0px;}
            header {order: 0;}
      }
}

@media all and (min-width: 0px) and (max-width: 800px) {

/* Mobile Scroll Animations
    ========================================================================== */
    .fadescroll {
        transition: all 500ms;
        opacity: 0;
    }
    .fade {
        opacity: 1;
    }

    .moveleft {
        max-width: 80%;
        transition: all 500ms;
        opacity: 0;
        transform: translate(10vh, 0);
    }

    .left {
        transform: translate(0px, 0) !important;
        opacity: 1;
    }

    .moveright {
        max-width: 60%;
        transition: all 500ms;
        opacity: 0;
        transform: translate(-10vh, 0);
	padding: 0% 0% 0% 20%;
    }

    .right {
        transform: translate(0px, 0) !important;
        opacity: 1;
    }

}