@font-face {
          font-family: "Avenir-Book";
          src: url("../font/Avenir-Book.woff") format("woff"); 
        }


        html {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box; }

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

        * {margin: 0; padding: 0;}

        body{
            font-family: "Avenir-Book", Helvetica, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            font-size: 15px;
        }

        a { color: black; }

        h3  {
            font-size: 2em;
            line-height: 140%;
            font-weight: normal;
        }

        main{
            padding-top: 6em;
        }

        nav{
            position: fixed;
            width: 100%;
            height: 6em;
            height: 100%;
            top: 0;
            background-color:rgba(255,255,255,1);
        }

        nav > div {
            float: left;
            text-align: center;
            height: 100%;
        }

        nav > div:nth-child(odd){
            width: calc(50% - 3em);
            text-align: center;
            display: none;
        }

        nav > div:nth-child(2){
            width: 6em;
            width: 100%;
            text-align: center;
            background-color: white;
            position: relative;
            z-index: 9;
        }

        nav > div > a {
            color: black;
            text-decoration: none;
            font-size: 1.2em;
            line-height: 4.8em;
            padding: 1.4em;

        }

        nav img{
            height: 6em;
            height: 50vh;
            margin-top: 0.4em;
            padding-right: 3.5vh;
        }


        section{
            padding: 2em 2.8em;
        }

        section img{
            margin-top: 0.5em;
        }

        .image{ 
            width: 100%;
            height: calc(100vw / 3 * 2);
            background: no-repeat center center;
            background-image: url(../img/Banner_1.png);
            background-size: cover;
        }

        .image-2{ 
            width: 100%;
            height: calc(100vw / 3 * 2);
            background: no-repeat center center;
            background-image: url(../img/Banner_2.png);
            background-size: cover;
        }

        section p{
            font-size: 2em;
            line-height: 140%;
            hyphens: auto;
            -webkit-hyphens: auto;
        }

        section div.right{
            padding-right: 1em;
        }

        section div > p, section div > a {
            font-size: 2em;
            line-height: 140%;
            color: black;
        }

        section div > h2 {
            font-weight: normal;
            font-size: 1.4em;
            line-height: 140%;
        }

        button, .paypal_btn {
            margin-top: 0.7em;
            font-size: 2em;
            line-height: normal;
            border: 2px solid black;
            color: black;
            background-color: white;
            padding: 0.35em 0.55em;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            cursor: pointer;    
        }

        button:active, .paypal_btn:active {
            color: white;
            background-color: black;
        }

        section > h1{
            font-size: 3.4em;
            line-height: normal;
            margin-bottom: 0.7em;
            width: 100%;
            display: inline-block;
        }

        section article{
            margin-bottom: 3.6em;
        }

        section .float{
            width: 50%;
            float: left;
        }

        .clearfix:after {
          content: ".";
          display: block;
          clear: both;
          visibility: hidden;
          line-height: 0;
          height: 0;
        }

        #impressum a {
            color: black;
        }

        #impressum p {
            margin-bottom: 1.4em;
        }

        article:nth-child(odd) .object{

            text-align: center;
        }
        article:nth-child(even) .object{

            text-align: center;
        }

        .object img{
            width: 70%;
        }

        #kontakt a{
            color: black;
            font-size: 2em;
            line-height: 140%;
            margin-bottom: 1em;
            display: inline-block;
        }

        #eightteen{
            padding-top: 10vh;
        }

        #eightteen p{
            font-size: 5vh;
        }

        #eightteen button{
            width: 25vh;
            height: 7vh;
            font-size: 5vh;
            padding: 0;
            margin: .5vh;
        }

        #menuToggle
        {
          display: none;
          position: relative;
          top: 1.85em;
          left: 2.75em;
          
          z-index: 1;
          
          -webkit-user-select: none;
          user-select: none;
        }

        #menuToggle input
        {
          display: block;
          width: 40px;
          height: 32px;
          position: absolute;
          top: -7px;
          left: -5px;
          
          cursor: pointer;
          
          opacity: 0;
          z-index: 2;
          
          -webkit-touch-callout: none;
        }


        #menuToggle span
        {
          display: block;
          width: 33px;
          height: 2px;
          margin-bottom: 7px;
          position: relative;
          
          background: black;
          border-radius: 3px;
          
          z-index: 1;
          
          transform-origin: 4px 0px;
          
          transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                      opacity 0.55s ease;
        }

        #menuToggle span:first-child
        {
          transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2)
        {
          transform-origin: 0% 100%;
        }

        #menuToggle input:checked ~ span
        {
          opacity: 1;
          transform: rotate(45deg) translate(-2px, -1px);
          background: white;
        }

        #menuToggle input:checked ~ span:nth-last-child(3)
        {
          opacity: 0;
          transform: rotate(0deg) scale(0.2, 0.2);
        }

        #menuToggle input:checked ~ span:nth-last-child(2)
        {
          transform: rotate(-45deg) translate(0, -1px);
        }

        #menu
        {
          position: absolute;
          width: 75%;
          margin: -100px 0 0 -50px;
          padding: 50px;
          padding-top: 125px;
          
          background: black;
          list-style-type: none;
          -webkit-font-smoothing: antialiased;
          
          transform-origin: 0% 0%;
          transform: translate(-100%, 0);
          
          transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        }

        #menu a{
            color: white;
        }

        #menu li
        {
          padding: 0.1em 0;
          font-size: 2em;
        }

        #menuToggle input:checked ~ ul
        {
          transform: none;
        }

        .snip-layout .snip-footer{
            display: none;
        }

        @media only screen and (max-width: 768px) {

            body{
                font-size: 10px;
            }

            nav{
                -moz-box-shadow:    1px 1px 2px 0px rgba(0,0,0,0.5);
                -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
                box-shadow:         1px 1px 2px 0px rgba(0,0,0,0.5);
            }

            nav > div:nth-child(odd){
                display: none !important;
            }
            nav > div:nth-child(2){
                width: 100% !important;
            }

            #menuToggle{
                display: block;
            }

            .object img{
            width: 100%;
            }

            #shop .float{
                width: 100%;
            }

            #shop img.float{
                margin-top: 2em;
            }

            #rezepte .float{
                width: 100%;
                float: none;
            }

            #rezepte article{
                display: flex;
                flex-direction: column;
            }

            article:nth-child(odd) .object{
                order: 1;
            }
            article:nth-child(even) .object{
                order: 1;
            }


        }