*{
  scroll-behavior: smooth;
}
:root{
    --dark-gray--: rgb(22, 22, 22);
    --background--:rgb(0, 0, 0);
    --background-image-: url("images/brewery-print-shoppe-background-keg-beer.jpg");
    --background-image-1: url("images/background-wood-v2.png");
    --bier--melon--: url("images/melon-beer.png");
    --bier--tripel--: url("images/tesla-tripel.png");
    --bier--nettle--: url("images/nettle-beer.png");
    --bier--pils--: url("images/pils.png");
    --wblogo--:url("images/logo-wakkerbier-v3.1.png");
    --wblogo-2--:url("images/logo wakkerbier v2.4.png");
    --landingpage-img--: url("images/bottle-caps-4890369_1920.jpg");
}

@media only screen and (min-width: 300px) {


    /* .navigation{
        display: flex;
        flex-direction: column;
    } */
}






@media all and (max-width: 1168px) {
    header{
      z-index: 2;
    }

    .mobile-logo{
      margin-left: 5rem;
      height: 200px;
      width: 200px;
      display: flex;
      align-content: flex-start;
      background-image: var(--wblogo-2--);
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      /* z-index: 2; */
      box-shadow: 0px 0px 20px black;
      border-radius: 50%;
    }

    #navlogo{
        /* width: 250px; */
        height: 200px;
        position: absolute;
        left: 10%;
        /* right: 100%; */
        /* z-index: 1; */
        /* margin-left: -350px; */
        text-align: center;
        top: 0;
    }

    .nav-logo{
      justify-content: center;
      display: flex;
      height: unset;
      width: unset;
    }

    .nav-logo img{
      justify-content: center;
      height: 150px;

    }

    .nav-item{
      padding: 50px 0;
    }

    .nav-item a{
      font-size: 4rem;
      text-shadow: 5px 5px 15px black;
    }

    nav{
        display: inline-block;
        position: fixed;
        /* background: var(--background--); */
        width: 100%;
        height: 200px;
    }

    .navigation {
        all: unset;
        position: fixed;
        top: -1000px;
        gap: 0;
        flex-direction:column;
        background-color: var(--background);
        backdrop-filter: blur(1rem);
        width: 100%;
        text-align: center;
        transition: 0.3s;
    }

    .navigation.active {
        top: 0;
        height: 100vh;
      }





     .navigation  {
       /* background-color: black;
        all: unset;
        text-align: center;
        font-size: 60px;
       display: flex;
       flex-direction: column;  */
    }

    .navigation li{
      font-size: 3rem;
    }


    .hamburger {
        position:fixed;
        right: 0;
        float: right;
        display: block;
        margin-top: -10rem;
        margin-right: 10rem;
        border: solid white 3px;
        padding: 30px;
        border-radius: 50%;
        box-shadow: 0px 0px 15px black;
      }
      .hamburger.active .bar:nth-child(2) {
        opacity: 0;
      }
      .hamburger.active .bar:nth-child(1) {
        transform: translateY(15px) rotate(45deg);
      }
      .hamburger.active .bar:nth-child(3) {
        transform: translateY(-20px) rotate(-45deg);
      }
      /* .element-1{
        height: 10vh;
        align-items: left;
        text-align: left;
        padding: top 40px; ;
        margin: 40px 100px ;
        /* background-color: rgb(0, 0, 0);
      } */

      .titelText{
        font-size: 4rem;
      }




      /* .element {
        background-image: var(--background-image-1);
        background-size: cover;
        background-position: center;
        height: 10vh;
    } */

    .items{
      display: flex;
      text-align: center;
      align-items: center;
      flex-direction: row;
      margin: 0 100px;
      align-content: center;
    }

    .form-container{
        margin:0;
    }

    .content{
      /* top: 100px; */
      height: 40vh;
      /* background-position: center;
      background-size:cover;
      background-repeat: no-repeat;
      background-position-y: 100px; */
    }

    .socials{
        height: 46vh;
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        width: 100%;
        justify-content: unset;
    }

    .item1{
        align-items: center;
        justify-content: center;
        margin-top: 0px;
        text-align: center;
        /* border: solid white 3px; */
        /* display: block; */
        /* margin-left: 50%;
        margin-right: 50%;
        width: 50%; */
        /* background-image: var(--bier--melon--); */
        /* background-size:cover;
        background-position: center;
         */
    }

    .item1 a{
      font-size: 3rem;
      text-transform: uppercase;
      opacity: 1;
  }

    .item1 img{
      z-index: 1;
      height: 800px;
      margin-top: -15vh;
    }



    .assortiment-header{

    }

    .assortiment{
      background-color: var(--background);
      position: relative;
      top: unset;
      display: flex;
      flex-direction: column;
      margin-top: 150px;
      margin-left: auto;
      margin-right: auto;
      /* justify-content:space-evenly; */
    }

    .assortiment-knop-1{
      font-size: 3rem;
    }

    .assortiment-1 img{
      height: 900px;
    }

    .assortiment-1-h1{
      font-size: 3rem;
    }

    .element-1{
      margin: 50px 0;
      /* background-color: rgb(29, 29, 29); */
    }

    .landingpage{
      height: 80vh;
      padding: unset;
  }

  .landingpage-intro{
    text-transform: uppercase;
    text-align: center;
    font-size: 3rem;
    padding: unset;
  }

  .landingpage-img{
    background-image: var(--landingpage-img--);
    /* background-size: contain; */
    background-position: right;
    height: 45vh;
    width: -moz-available;
    background-repeat: no-repeat;
  }


  .landingpage-content{
    display: flex;
    flex-direction: column;
    justify-content:center ;
    align-items: center;
}



/* //////////////////////////////////////////////product////////////////////////// */

.ingredient{
  padding-right: unset;

}

.ingredient h1{
  font-size: 2rem;
}

.product-pg-1-{
  padding: unset;
  flex-direction: column;
  max-width: 100%;
}

.product-pg-1-item- {
  justify-content: center;
}

.product-pg-1-item- img{
  height: 45vh;
}

.product-pg-1-txt{
  width: 80%;
  font-size: 2rem;
}

.product-pg-L{
  background-color: var(--dark-gray--);
  height: 50px;
  border-radius: 15px;
  border: solid 2px white;
  text-align: center;
  margin-top: 2vh;
}

.product-pg-2-{
  padding: 0 100px;
  height:30vh;
}

.product-pg-2-content{
  display: flex;
  flex-direction: row;
  max-width: 100%;
}

.product-pg-2-img{
  padding: unset;
  justify-content: center;

}

.product-pg-2-img img{
  width: 20vh;
  height: 20vh;
}

.product-pg-2-txt{
  padding: 0 50px;
  font-size: 1.5rem;
}

/* //////////////////////////////////////////////link-content////////////// */

.link-content{
  padding: unset;
  margin-top: 100px;
  position: relative;
  background-color: var(--dark-gray--);
  /* top: 40vh; */
}

.link-content a{
  font-size: 2rem;
}


/* //////////////////////////////////////////////cart/////////////////////////////////////////////////// */

.cart-item-space {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-img{
  display: block;
  width: 300px;
}

.cart-item-img img{
  height: 200px;
  width: 300px;
}

  }