@font-face {
  font-family: 'Zine';
  src: url("../fonts/ZineSerifDisOT.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/ZineSerifDisOT.eot?#iefix") format("embedded-opentype"), url("../fonts/ZineSerifDisOT.woff") format("woff"), url("../fonts/ZineSerifDisOT.ttf") format("truetype"), url("../fonts/ZineSerifDisOT.svg#d2d2c3882322ea30e90784eb4c70ea6e") format("svg");
  /* Legacy iOS */
  font-style: normal;
  font-weight: 400; }
html {
  color: white;
  background-color: RGB(253, 195, 0);
  font-family: "Zine", serif;
  font-size: 1.5em; }

body {
  background-image: url("../img/hintergrund.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  height: 7630px; }

#header-container {
  background-image: url("../img/header.png");
  background-position: top center;
  background-repeat: no-repeat;
  overflow: visible;
  height: 220px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999999; }

nav {
  margin-top: 25px; }
  nav a {
    font-family: "Zine", serif;
    color: #391100;
    text-decoration: none;
    font-size: 1.3em;
    float: left; }
    nav a:hover {
      text-decoration: underline; }
  nav ul {
    margin: 0 auto;
    width: 850px;
    text-align: center; }
    nav ul li {
      list-style-type: none;
      display: inline;
      float: left;
      padding: 25px 10px; }
      nav ul li:first-of-type {
        padding-left: 0; }
      nav ul li:last-of-type {
        padding-right: 0; }
      nav ul li:nth-child(3) {
        padding-left: 25%; }

#mobile_intro {
  display: none; }

.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: " ";
    display: table; }
  .clearfix:after {
    clear: both; }

h1, h2, h3 {
  font-family: "Lobster", cursive;
  font-size: 2em; }

h2 {
  font-size: 2em; }

h3 {
  font-size: 1em; }

#footer_nav nav {
  width: 100%;
  display: inline-block; }
  #footer_nav nav a {
    font-family: "Zine", serif;
    color: #391100;
    text-decoration: none;
    font-size: 2em;
    float: left; }
    #footer_nav nav a:hover {
      text-decoration: underline; }
  #footer_nav nav ul {
    margin: 0 auto;
    width: 180px;
    text-align: center; }
    #footer_nav nav ul li {
      list-style-type: none;
      display: inline;
      float: left;
      padding: 25px 10px; }
      #footer_nav nav ul li:first-of-type {
        padding-left: 0; }
      #footer_nav nav ul li:last-of-type {
        padding-right: 0; }

a {
  color: white;
  text-decoration: none; }

#footer_links {
  width: 100%;
  text-align: center; }
  #footer_links a {
    color: white;
    text-decoration: none; }

#hell {
  position: relative;
  margin: 0 auto;
  width: 75%;
  padding-left: 50px;
  color: #391100;
  top: 1400px; }
  #hell h1, #hell h2, #hell h3 {
    width: 40%; }
  #hell p {
    width: 40%; }
  #hell img {
    position: absolute;
    top: -200px;
    right: 15%;
    width: 20%;
    height: auto; }
  #hell .korken {
    position: absolute;
    width: 10%;
    height: auto;
    z-index: 9000; }
    #hell .korken:nth-of-type(1) {
      top: -100px;
      right: 300px; }
    #hell .korken:nth-of-type(2) {
      top: -180px;
      right: 480px;
      width: 12%; }
    #hell .korken:nth-of-type(3) {
      width: 12%;
      top: -310px;
      right: 120px; }
    #hell .korken:nth-of-type(4) {
      top: -220px;
      right: 90px;
      width: 15%; }

#dunkel {
  position: relative;
  margin: 0 auto;
  width: 75%;
  top: 2100px; }
  #dunkel img {
    position: absolute;
    top: -200px;
    left: 15%;
    width: 20%;
    height: auto; }
  #dunkel .text {
    float: right;
    width: 40%; }
  #dunkel .korken {
    position: absolute;
    width: 10%;
    height: auto;
    z-index: 9000; }
    #dunkel .korken:nth-of-type(1) {
      top: -100px;
      left: 300px; }
    #dunkel .korken:nth-of-type(2) {
      top: -180px;
      left: 480px;
      width: 12%; }
    #dunkel .korken:nth-of-type(3) {
      width: 12%;
      top: -310px;
      left: 120px; }
    #dunkel .korken:nth-of-type(4) {
      top: -220px;
      left: 90px;
      width: 15%; }

#alkoholfrei {
  position: relative;
  margin: 0 auto;
  width: 75%;
  padding-left: 50px;
  top: 3100px; }
  #alkoholfrei h1, #alkoholfrei h2, #alkoholfrei h3 {
    width: 40%; }
  #alkoholfrei p {
    width: 40%; }
  #alkoholfrei img {
    position: absolute;
    top: -200px;
    right: 15%;
    width: 20%;
    height: auto; }
  #alkoholfrei .korken {
    position: absolute;
    width: 10%;
    height: auto;
    z-index: 9000; }
    #alkoholfrei .korken:nth-of-type(1) {
      top: -100px;
      right: 300px; }
    #alkoholfrei .korken:nth-of-type(2) {
      top: -180px;
      right: 480px;
      width: 12%; }
    #alkoholfrei .korken:nth-of-type(3) {
      width: 12%;
      top: -310px;
      right: 120px; }
    #alkoholfrei .korken:nth-of-type(4) {
      top: -220px;
      right: 90px;
      width: 15%; }

#leicht {
  position: relative;
  margin: 0 auto;
  width: 75%;
  top: 3800px; }
  #leicht img {
    position: absolute;
    top: -200px;
    left: 15%;
    width: 20%;
    height: auto; }
  #leicht .text {
    float: right;
    width: 40%; }
  #leicht .korken {
    position: absolute;
    width: 10%;
    height: auto;
    z-index: 9000; }
    #leicht .korken:nth-of-type(1) {
      top: -100px;
      left: 300px; }
    #leicht .korken:nth-of-type(2) {
      top: -180px;
      left: 480px;
      width: 12%; }
    #leicht .korken:nth-of-type(3) {
      width: 12%;
      top: -310px;
      left: 120px; }
    #leicht .korken:nth-of-type(4) {
      top: -220px;
      left: 90px;
      width: 15%; }
  #leicht .text {
    position: absolute;
    right: 0; }

#herstellung, #graf_arco {
  position: absolute;
  width: 40%;
  position: relative;
  margin: 0 auto;
  top: 4550px;
  width: 75%;
  padding: 50px 150px; }
  #herstellung p, #graf_arco p {
    text-align: left; }
  #herstellung p, #graf_arco p {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 5em;
    -moz-column-gap: 5em;
    column-gap: 5em; }
  #herstellung .badges, #graf_arco .badges {
    width: 600px;
    margin: 80px auto 0;
    text-align: center; }
    #herstellung .badges img:first-of-type, #graf_arco .badges img:first-of-type {
      margin-top: 65px;
      margin-right: 150px; }

#graf_arco {
  position: absolute;
  width: 40%;
  position: relative;
  top: 4500px;
  width: 75%;
  text-align: center; }
  #graf_arco p {
    text-align: left; }
  #graf_arco img {
    width: 377px;
    margin: 70px auto 0; }

.footer-container {
  position: relative;
  top: 4470px;
  width: 100%;
  margin: 0 auto;
  background-color: RGB(204, 32, 32); }

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 86%;
    background-image: none;
    background-color: RGB(253, 195, 0);
    height: auto; }

  .parallax {
    display: none; }

  #wrapper {
    width: 100%; }

  #mobile_intro {
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/hg_gelb.png");
    background-position: bottom center;
    background-repeat: no-repeat; }
    #mobile_intro img {
      width: 25%;
      display: block;
      margin-left: auto;
      margin-right: auto; }
      #mobile_intro img:nth-of-type(1) {
        width: 258px;
        margin: 35% auto 10%; }
      #mobile_intro img:nth-of-type(2) {
        float: left; }
      #mobile_intro img:nth-of-type(3) {
        float: left; }
      #mobile_intro img:nth-of-type(4) {
        float: left; }
      #mobile_intro img:nth-of-type(5) {
        float: left; }
      #mobile_intro img:nth-of-type(6) {
        clear: both;
        padding-bottom: 100px; }

  #hell {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-image: url("../img/hg_gelb.png"); }
    #hell .text {
      float: left;
      width: 40%;
      padding: 5%; }
      #hell .text h1, #hell .text h2, #hell .text h3 {
        width: auto; }
      #hell .text p {
        width: auto; }
    #hell img {
      position: static;
      margin-left: 10%;
      margin-top: 10%; }
    #hell h1, #hell h2, #hell h3 {
      padding-top: 30%; }

  #dunkel {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-color: #391100;
    background-image: url("../img/hg_braun.png"); }
    #dunkel .text {
      float: left;
      width: 40%;
      padding: 5%; }
      #dunkel .text h1, #dunkel .text h2, #dunkel .text h3 {
        width: auto; }
      #dunkel .text p {
        width: auto; }
    #dunkel img {
      position: static;
      margin-left: 10%;
      margin-top: 10%; }
    #dunkel h1, #dunkel h2, #dunkel h3 {
      padding-top: 30%; }
    #dunkel .text {
      float: right; }

  #alkoholfrei {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-color: #a5be38;
    background-image: url("../img/hg_gruen.png"); }
    #alkoholfrei .text {
      float: left;
      width: 40%;
      padding: 5%; }
      #alkoholfrei .text h1, #alkoholfrei .text h2, #alkoholfrei .text h3 {
        width: auto; }
      #alkoholfrei .text p {
        width: auto; }
    #alkoholfrei img {
      position: static;
      margin-left: 10%;
      margin-top: 10%; }
    #alkoholfrei h1, #alkoholfrei h2, #alkoholfrei h3 {
      padding-top: 30%; }

  #leicht {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-color: #9dc1ea;
    background-image: url("../img/hg_blau.png"); }
    #leicht .text {
      float: left;
      width: 40%;
      padding: 5%; }
      #leicht .text h1, #leicht .text h2, #leicht .text h3 {
        width: auto; }
      #leicht .text p {
        width: auto; }
    #leicht img {
      position: static;
      margin-left: 10%;
      margin-top: 10%; }
    #leicht h1, #leicht h2, #leicht h3 {
      padding-top: 30%; }

  #herstellung, #graf_arco {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-color: #475c96; }
    #herstellung .text, #graf_arco .text {
      float: left;
      width: 40%;
      padding: 5%; }
      #herstellung .text h1, #graf_arco .text h1, #herstellung .text h2, #graf_arco .text h2, #herstellung .text h3, #graf_arco .text h3 {
        width: auto; }
      #herstellung .text p, #graf_arco .text p {
        width: auto; }
    #herstellung img, #graf_arco img {
      position: static;
      margin-left: 10%;
      margin-top: 10%; }
    #herstellung h1, #graf_arco h1, #herstellung h2, #graf_arco h2, #herstellung h3, #graf_arco h3 {
      padding-top: 30%; }
    #herstellung .text, #graf_arco .text {
      width: 90%; }
    #herstellung h1, #graf_arco h1, #herstellung h2, #graf_arco h2, #herstellung h3, #graf_arco h3 {
      margin: 0;
      padding: 0;
      padding: 10% 5% 0; }
    #herstellung p, #graf_arco p {
      padding: 5%; }
    #herstellung .badges, #graf_arco .badges {
      margin: 0 auto; }
      #herstellung .badges img:first-of-type, #graf_arco .badges img:first-of-type {
        margin-top: 0;
        margin-right: 0; }

  #graf_arco {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-color: #475c96; }
    #graf_arco .text {
      float: left;
      width: 40%;
      padding: 5%; }
      #graf_arco .text h1, #graf_arco .text h2, #graf_arco .text h3 {
        width: auto; }
      #graf_arco .text p {
        width: auto; }
    #graf_arco img {
      position: static;
      margin-left: 10%;
      margin-top: 10%; }
    #graf_arco h1, #graf_arco h2, #graf_arco h3 {
      padding-top: 30%; }
    #graf_arco h1, #graf_arco h2, #graf_arco h3 {
      padding-top: 5%;
      text-align: left; }
    #graf_arco img {
      margin: 0; }

  .footer-container {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-color: #b12b2d; }
    .footer-container .text {
      float: left;
      width: 40%;
      padding: 5%; }
      .footer-container .text h1, .footer-container .text h2, .footer-container .text h3 {
        width: auto; }
      .footer-container .text p {
        width: auto; }
    .footer-container img {
      position: static;
      margin-left: 10%;
      margin-top: 10%; }
    .footer-container h1, .footer-container h2, .footer-container h3 {
      padding-top: 30%; }

  .korken {
    display: none !important; }

  nav ul li:nth-child(3) {
    padding-left: 30%; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  nav a {
    font-size: 1em; } }
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
  body {
    font-size: 80%;
    background-image: none;
    background-color: RGB(253, 195, 0);
    height: auto; }

  #header-container {
    background-image: none;
    overflow: visible;
    height: auto;
    position: fixed;
    background-color: RGB(253, 195, 0);
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999999; }

  nav {
    margin-top: 0; }
    nav a {
      font-family: "Zine", serif;
      color: #391100;
      text-decoration: none;
      font-size: 0.9em;
      float: left; }
      nav a:hover {
        text-decoration: underline; }
    nav ul {
      margin: 0;
      padding: 0;
      width: 100%;
      text-align: left; }
      nav ul li {
        list-style-type: none;
        display: inline;
        float: left;
        padding: 10px !important; }
        nav ul li:first-of-type {
          display: none; }

  .parallax {
    display: none; }

  #wrapper {
    width: 100%; }

  #mobile_intro {
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../img/hg_gelb.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain; }
    #mobile_intro img {
      width: 25%;
      display: block;
      margin-left: auto;
      margin-right: auto; }
      #mobile_intro img:nth-of-type(1) {
        width: 258px;
        margin: 35% auto 10%; }
      #mobile_intro img:nth-of-type(2) {
        float: left; }
      #mobile_intro img:nth-of-type(3) {
        float: left; }
      #mobile_intro img:nth-of-type(4) {
        float: left; }
      #mobile_intro img:nth-of-type(5) {
        float: left; }
      #mobile_intro img:nth-of-type(6) {
        clear: both;
        padding-bottom: 100px; }

  #hell {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url("../img/hg_gelb.png");
    padding-bottom: 40%; }
    #hell .text {
      float: left;
      width: 50%;
      padding: 5%;
      font-size: 1em; }
      #hell .text h1, #hell .text h2, #hell .text h3 {
        width: auto; }
      #hell .text p {
        width: auto; }
    #hell img {
      position: static;
      margin-left: 10%;
      margin-top: 50%;
      margin-bottom: 20%;
      width: 30%; }
    #hell h1, #hell h2, #hell h3 {
      padding-top: 30%; }

  #dunkel {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-color: #391100;
    background-image: url("../img/hg_braun.png");
    padding-bottom: 45%; }
    #dunkel .text {
      float: left;
      width: 50%;
      padding: 5%;
      font-size: 1em; }
      #dunkel .text h1, #dunkel .text h2, #dunkel .text h3 {
        width: auto; }
      #dunkel .text p {
        width: auto; }
    #dunkel img {
      position: static;
      margin-left: 10%;
      margin-top: 50%;
      margin-bottom: 20%;
      width: 30%; }
    #dunkel h1, #dunkel h2, #dunkel h3 {
      padding-top: 30%; }
    #dunkel .text {
      float: right; }

  #alkoholfrei {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-color: #a5be38;
    background-image: url("../img/hg_gruen.png");
    padding-bottom: 10%; }
    #alkoholfrei .text {
      float: left;
      width: 50%;
      padding: 5%;
      font-size: 1em; }
      #alkoholfrei .text h1, #alkoholfrei .text h2, #alkoholfrei .text h3 {
        width: auto; }
      #alkoholfrei .text p {
        width: auto; }
    #alkoholfrei img {
      position: static;
      margin-left: 10%;
      margin-top: 50%;
      margin-bottom: 20%;
      width: 30%; }
    #alkoholfrei h1, #alkoholfrei h2, #alkoholfrei h3 {
      padding-top: 30%; }

  #leicht {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-color: #9dc1ea;
    background-image: url("../img/hg_blau.png");
    padding-bottom: 50%; }
    #leicht .text {
      float: left;
      width: 50%;
      padding: 5%;
      font-size: 1em; }
      #leicht .text h1, #leicht .text h2, #leicht .text h3 {
        width: auto; }
      #leicht .text p {
        width: auto; }
    #leicht img {
      position: static;
      margin-left: 10%;
      margin-top: 50%;
      margin-bottom: 20%;
      width: 30%; }
    #leicht h1, #leicht h2, #leicht h3 {
      padding-top: 30%; }

  #herstellung, #graf_arco {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-color: #475c96; }
    #herstellung .text, #graf_arco .text {
      float: left;
      width: 50%;
      padding: 5%;
      font-size: 1em; }
      #herstellung .text h1, #graf_arco .text h1, #herstellung .text h2, #graf_arco .text h2, #herstellung .text h3, #graf_arco .text h3 {
        width: auto; }
      #herstellung .text p, #graf_arco .text p {
        width: auto; }
    #herstellung img, #graf_arco img {
      position: static;
      margin-left: 10%;
      margin-top: 50%;
      margin-bottom: 20%;
      width: 30%; }
    #herstellung h1, #graf_arco h1, #herstellung h2, #graf_arco h2, #herstellung h3, #graf_arco h3 {
      padding-top: 30%; }
    #herstellung .text, #graf_arco .text {
      width: 90%; }
    #herstellung h1, #graf_arco h1, #herstellung h2, #graf_arco h2, #herstellung h3, #graf_arco h3 {
      margin: 0;
      padding: 0;
      padding: 10% 5% 0; }
    #herstellung p, #graf_arco p {
      padding: 5%;
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1; }
    #herstellung .badges, #graf_arco .badges {
      margin: 0 auto;
      width: 80%; }
      #herstellung .badges img, #graf_arco .badges img {
        width: 40%;
        height: auto; }
        #herstellung .badges img:first-of-type, #graf_arco .badges img:first-of-type {
          margin-top: 0;
          margin-right: 0; }
        #herstellung .badges img:nth-of-type(2), #graf_arco .badges img:nth-of-type(2) {
          margin-top: 0; }

  #graf_arco {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    display: inline-block;
    background-color: #475c96; }
    #graf_arco .text {
      float: left;
      width: 50%;
      padding: 5%;
      font-size: 1em; }
      #graf_arco .text h1, #graf_arco .text h2, #graf_arco .text h3 {
        width: auto; }
      #graf_arco .text p {
        width: auto; }
    #graf_arco img {
      position: static;
      margin-left: 10%;
      margin-top: 50%;
      margin-bottom: 20%;
      width: 30%; }
    #graf_arco h1, #graf_arco h2, #graf_arco h3 {
      padding-top: 30%; }
    #graf_arco h1, #graf_arco h2, #graf_arco h3 {
      padding-top: 5%;
      text-align: left; }
    #graf_arco img {
      margin: 0;
      width: 80%; }
    #graf_arco p {
      -webkit-column-count: 1;
      -moz-column-count: 1;
      column-count: 1; }

  .footer-container {
    display: block;
    position: static;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-color: #b12b2d; }
    .footer-container .text {
      float: left;
      width: 50%;
      padding: 5%;
      font-size: 1em; }
      .footer-container .text h1, .footer-container .text h2, .footer-container .text h3 {
        width: auto; }
      .footer-container .text p {
        width: auto; }
    .footer-container img {
      position: static;
      margin-left: 10%;
      margin-top: 50%;
      margin-bottom: 20%;
      width: 30%; }
    .footer-container h1, .footer-container h2, .footer-container h3 {
      padding-top: 30%; }
    .footer-container img {
      width: auto; }

  .korken {
    display: none !important; }

  nav ul li:nth-child(3) {
    padding-left: 30%; } }