.gold {
    color: #BA9240;
}
* {
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

body, html {
    background: #000;
    color: #fff;
    font-family: 'Futura W01', sans-serif;
    line-height: 1;
    width: 100%;
    min-width: 645px;
    height: 100%;
    font-weight: 500;
}
body.skin-vodka {
  background:#fff;
  color:#000;
}
body.skin-weichenseite {
  overflow-x: hidden;
  height: 100vh;
}

svg, img {
    display: block;
}

ul, li {
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Futura W01', sans-serif;
    font-weight: 500;
}

#headline {

    width: auto;
    top: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 32px;
}




header {

    width: 300px;
    position: fixed;
    top: 46px;
    left: 46px;
    bottom: 46px;
    z-index: 1000;
}

footer {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 9999;
}

.footer-content {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    position: relative;
    width: 100%;

}



.footer-wrapper {
    width: 100%;
    height: auto;
    position: relative;
}
.footer-flex a{
    color: #666;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    margin:0 auto;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}

.footer-flex a:hover {
    color: #fff;
}

.footer-flex{
    display: flex;
    justify-content: center;
    position: relative;
    vertical-align: text-bottom;
    margin-top: 70px;
    padding-bottom: 70px;
}


.footer-button {
    display: block;
    cursor: pointer;
    background: none;
    border: none;
    width: 30px;
    margin-left: auto;
    margin-right: auto;
}
.footer-button:hover {
    opacity: 0.5;
    transition: opacity 0.2s ease-out;
}

.footer-button-active {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 30px;
    margin-left: auto;
    margin-right: auto;
}

/* .footer-button #close{
    display:none;
}
.footer-button:target #close{
    display: block;
}
.footer-button:target #open {
    display: none;
} */

button:focus {
    outline: 0;
}

button > span{
    border-color:white !important;
    border: 1px white !important;
}


nav {
    margin-top: 82px;
}

.nav-wrapper {
    position: fixed;
    top: 60px;
    left: 60px;
}

svg *, a {
    color: #fff;
    text-decoration: none;
    transition: all 150ms ease-in-out;
}

.content a {
    color: #666;
}
a {
  outline: 0;
}
a:hover {
    opacity: 1;
    color: #BC769B;
}
.skin-vodka .recipe h3,
.skin-vodka a:hover {
  color: #3B5077;
}
.skin-distiller a:hover {
  color: #42EFE5;
}
.skin-kini a:hover {
  color: #BA9240;
}
.skin-imprint a:hover {
  color: #fff;
}
.skin-datenschutz a:hover {
  color: #fff;
}


.embed > svg *{
    color: #000000;
}






nav a {

    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skin-distiller nav a:hover,
.skin-kini nav a:hover,
.skin-gspusi nav a:hover,
nav a:hover {
    color: #fff;
}
.skin-vodka nav a {
    color: #000;
}
.skin-vodka.not-start nav a.active,
.skin-vodka nav a:hover {
    color: #3B5077;
}
nav ul {
    display: inline-block;
}

nav ul:hover a, .not-start nav a {
    opacity: .4;
}

nav a:hover,
.not-start nav a.active {
    opacity: 1!important;
}
.skin-vodka.not-start nav ul:hover a {
    opacity: .4 !important;
}
.skin-vodka nav ul:hover a:hover,
.skin-vodka.not-start nav ul:hover a.active {
    opacity: 1 !important;
}


nav li {
    margin-bottom: 8px;
}

header .icons {
    display: flex;
    margin-top: 40px;
}
@media screen and (min-height: 700px) {
    header .icons {
        position: absolute;
        bottom:0;left:0;
    }
}

header .icons > a:not(:last-child) {
    margin-right: 20px;
}
header a#fb {
    display: block;
}

header a#burger {
    display: none;
}

a#fb:hover svg polyline,
a#fb:hover svg path {
    fill: #BC769B;
}
a#insta:hover svg #TKV-Lay-Instagram {
    fill: #BC769B;
}
.skin-distiller a#fb:hover svg polyline,
.skin-distiller a#fb:hover svg path {
    fill: #42EFE5;
}
.skin-distiller a#insta:hover svg #TKV-Lay-Instagram {
    fill: #42EFE5;
}
.skin-kini a#fb:hover svg polyline,
.skin-kini a#fb:hover svg path {
    fill: #BA9240;
}
.skin-kini a#insta:hover svg #TKV-Lay-Instagram {
    fill: #BA9240;
}
.skin-vodka a#fb svg polyline,
.skin-vodka a#fb svg path {
    fill: #000;
}
.skin-vodka a#insta svg #TKV-Lay-Instagram {
    fill: #000;
}
.skin-vodka a#fb:hover svg polyline,
.skin-vodka a#fb:hover svg path {
    fill: #3B5077;
}
.skin-vodka a#insta:hover svg #TKV-Lay-Instagram {
    fill: #3B5077;
}

.skin-imprint a#fb:hover svg polyline,
.skin-imprint a#fb:hover svg path,
.skin-imprint a#insta:hover svg #TKV-Lay-Instagram,
.skin-datenschutz a#fb:hover svg polyline,
.skin-datenschutz a#fb:hover svg path,
.skin-datenschutz a#insta:hover svg #TKV-Lay-Instagram {
    fill: #fff;
    opacity: 0.5;
}

section {
    min-height: 100vh;
    padding-top: 94px;
    padding-bottom: 94px;
}

.parallax-background {
    position: fixed;
    transform: translateZ(0) translateY(-100%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    /* will-change: transform; */
}

.parallax-background i {
    display: block;
    background-size: cover;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    /*will-change: transform;*/
}

.parallax-background-start {
    transform: translate3d(0, 0, 0);
}

.parallax-background-start i {
    background-image: url(../img/King-Gin-Kini-Desktop-Background.jpg);
    transform: translate3d(0, 0, 0);
}
.skin-distiller .parallax-background-start i {
    background-image: url(../img/King-Gin-Distillerscut-Desktop-Background.png);
}
.skin-gspusi .parallax-background-start i {
    background-image: url(../img/King-Gin-Gspusi-Desktop-Background.jpg);
}
.skin-vodka .parallax-background-start i {

    background-image: url(../img/King-Gin-Vodka-Desktop-Background.jpg);
  background-size:cover;
}

.parallax-background-facts i {
    background-image: url(../img/the-king-gin-image-02.jpg);
}

.parallax-background-recipes i {
    background-image: url(../img/the-king-gin-image-03.jpg);
}

.parallax-background-dealer i {
    background-image: url(../img/the-king-gin-image-04.jpg);
}

.skin-distiller .parallax-background-recipes i {
    background-image: url(../img/the-king-gin-image-03.jpg);
}
.skin-distiller .parallax-background-facts i {
    background-image: url(../img/King-Gin-Distillerscut-Desktop-Background-Facts.jpg);
}
.skin-distiller .parallax-background-dealer i {
    background-image: url(../img/King-Gin-Distillerscut-Desktop-Background-Dealer.jpg);
}


.skin-vodka .parallax-background-dealer i {
    background-image: url(../img/King-Gin-Vodka-Desktop-Background-Dealer.jpg);
}

.skin-vodka .parallax-background-facts i {
    background-image: url(../img/King-Gin-Vodka-Desktop-Background-Facts.jpg);
}
.skin-vodka .parallax-background-recipes i {
    background-image: url(../img/King-Gin-Vodka-Desktop-Background-Recipes.jpg);
}

.skin-gspusi .parallax-background-recipes i {
    background-image: url(../img/the-king-gin-image-05.jpg);
}
.skin-gspusi .parallax-background-facts i {
    background-image: url(../img/King-Gin-Gspusi-Desktop-Background-Facts.jpg);
}
.skin-gspusi .parallax-background-dealer i {
    background-image: url(../img/King-Gin-Gspusi-Desktop-Background-Dealer.jpg);
}


section#start {
    padding-top: 0;
    padding-bottom: 0;
}

section#facts {
    padding-top: 77px;
    padding-bottom: 0;
}

section#facts:after {
    content: "";
    background: #000;
    height: 30px;
    width: 100%;
    left: 0;
    bottom: -30px;
    position: absolute;
}
.skin-vodka section#facts:after {
    background: transparent;
}
section#recipes {
    padding-top: 124px;
}

/* h1 {
    Futura medium 98,  ZA 100px
    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;

} */

h1 {
    font-size: 98px;
    line-height: 100px;
    text-align: right;
    text-transform: uppercase;
    font-weight: 500;
    position: absolute;
    bottom: 35px;
    right: 46px;
}

a.next {
    display: inline-block;
    padding: 10px 30px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -45px;
    font-size: 38px;
    cursor: pointer;
    z-index: 20;
    -webkit-animation: upAndDown 2.5s linear infinite;
    animation: upAndDown 2.5s linear infinite;
}

@-webkit-keyframes upAndDown {
    0%, 50%, to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    25% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
}

@keyframes upAndDown {
    0%, 50%, to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    25% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
}
a.next svg path {
    /* stroke: #000;*/
    stroke: #fff;
}
.skin-vodka a.next svg path {
    stroke: #000;
}

a.next:hover svg path {
    stroke: #BC769B;
}
.skin-kini a.next:hover svg path {
    stroke: #BA9240;
}
.skin-distiller a.next:hover svg path {
    stroke: #42EFE5;
}
.skin-vodka a.next:hover svg path {
    stroke: #3B5077;
}

.content {
    width: 580px!important;
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    margin-left: auto;
    margin-right: auto;
}

#start .content {
    height: 100vh;
    float: right;
    margin-left: 0;
    margin-right: 0;
}

.cols-3 {
    display: table;
    width: 100%;
}

.cols-3 > * {
    width: 33%;
    display: table-cell;
    word-wrap: break-word;
    padding-right: 57px;
    vertical-align: middle;
}

.cols-3 > :nth-child(3) {
    text-align: right;
    padding-right: 0;
    padding-left: 57px;
}

.cols-3 > * p {
    width: 134px;
    overflow: hidden;
    display: inline-block;
}

.facts {
/* Futura Medium  72,  ZA 94px*/
    font-size: 72px;
    font-weight: 500;
    line-height: 94px;
    color: #BC769B;
}
.skin-vodka .facts {
    color: #3B5077;
}
.skin-kini .facts {
    color: #BA9240;
}
.skin-distiller .fliesstext,
.skin-distiller .facts {
  color: #42EFE5;
}
.pingpong {
    padding-bottom: 70px;
}

.pingpong > *, .pingpong .pad > * {
    width: 50%;
    clear: right;
/*margin-bottom: 100px;*/
}

.pingpong .middle {
    text-align: center;
    width: 100%;
    margin: 0;
}

.pingpong h2.middle, .pingpong h3.middle {
    margin-bottom: 30px;
    margin-top: 70px;
}

.pingpong .right {
    float: right;
    top: -1.3em;
    margin-bottom: -2.6em;
/*    position: absolute;
    right: 0;
    top: 0;*/
    text-align: right;
}

.pingpong h3.right, .pingpong h2.right {
    top: -1em;
    margin-bottom: -2em;
}

.middle-1-col {
    width: 400px;
    margin: 0 auto;
}

.content.fliesstext {
    width: auto!important;
    background: rgba(0, 0, 0, 1);
    padding-bottom: 94px;
}
.skin-vodka .content.fliesstext {
    background: rgba(255, 255, 255, 1);
}
.content.fliesstext:before {
    content: "";
/*  z-index: 10;*/
    display: block;
    width: 100%;
    height: 200px;
    position: absolute;
    top: -200px;
    left: 0;
/* Permalink - use to edit and share this gradient: http: //colorzilla.com/gradient-editor/#000000+0, 000000+100&0+0, 0.7+100, 0.7+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
/* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
/* Chrome10-25, Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
/* W3C,  IE10+,  FF16+,  Chrome26+,  Opera12+,  Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#ff000000', GradientType=0);
/* IE6-9 */
}
.skin-vodka .content.fliesstext:before {
/* Permalink - use to edit and share this gradient: http: //colorzilla.com/gradient-editor/#000000+0, 000000+100&0+0, 0.7+100, 0.7+100 */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
/* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
/* Chrome10-25, Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
/* W3C,  IE10+,  FF16+,  Chrome26+,  Opera12+,  Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffffff', GradientType=0);
/* IE6-9 */
}


.fliesstext {
    color: #BC769B;
}

.skin-kini .fliesstext {
    color: #BA9240;
}
.skin-vodka .fliesstext {
    color: #3B5077;
}
.fliesstext p {
    padding-bottom: 2ex;
}

.recipe {
    padding-bottom: 70px;
}

.pingpong h2, .pingpong h3, .recipe h3 {
/* Futura Medium 72,  ZA 94,  Versal #FFF */
    text-transform: uppercase;
    font-size: 72px;
    line-height: 1;
}

.recipe p, .recipe h3 {
    z-index: 20;
}

.recipe img {
    display: inline-block;
    height: 320px;
    width: auto;
    left: 15px;
    top: -18px;
    margin-top: 10px;
    margin-bottom: 0px;
    z-index: 10;
}

.recipe.right {
    text-align: right;
}

#imprint h2 {
    margin-bottom: 1em;
}

#imprint strong {
    font-weight: 400;
}

#imprint .back {
    display: block;
    font-size: 40px;
    width: 31px;
    height: 31px;
    cursor: pointer;
    margin-bottom: 1em;
    position: relative;
    top: -1em;
}

#imprint .back.bottom {
    margin-bottom: 0;
    top: 1.2em;
}
#imprint .cc-logo {
  display: block;
  width: 200px; height: auto;
  margin: 20px 0 10px 0;
}
.age-verification-needed footer {
  display: none;
}



#altersVerifikation {
  display: none;
}
.age-verification-needed #altersVerifikation {
  display: block;
  position: absolute;
  position: fixed;
  top:0;left:0;bottom:0;right:0;
  z-index:9999999;
  text-align: center;
}
#altersVerifikation div {
  font-size: 20px;
  position: absolute;
  top:50%;
  left: 0; width: 100%;
  transform: translateY(-50%);

}
#altersVerifikation a {
  display: block;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-transform: uppercase;
  color:#fff;
  background: #BA9240;
  margin:0px auto;
  font-size: 24px;
  cursor: pointer;
  transition: transform 300ms ease;
}
#altersVerifikation a:hover {
  transform: scale(1.1);
}
#altersVerifikation a:last-child {
  margin-top: 36px;
}
#altersVerifikation p {
  margin-bottom: 40px;
}
body.age-verification-needed {
  overflow-x:hidden;
}
body.age-verification-needed .parallax-backgrounds i {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
body.age-verification-needed section.gallery-wrapper img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.parallax-backgrounds i {
  transition: filter 300ms ease, -webkit-filter 300ms ease;
  background-position: center center;
}
header,
section {
  transition: opacity 300ms ease;
}
body.age-verification-needed header,
body.age-verification-needed section {
  opacity: 0;
}

body.age-verification-needed section.gallery-wrapper {
  opacity: 100;
}








.mobile section, .mobile section#facts .pad {
    background-size: 100% auto;
    background-position: center top;
    background-attachment: scroll;
}



/* @media screen and (max-height: 1000px) {
    header a#fb {
        margin-top: 0;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}
*/

@media screen and (max-width: 1200px) {
    section#facts .pad, section {
        padding-left: 320px;
    }

    section#facts {
        padding-left: 0;
    }

    section#facts .content, section#facts .pad {
        width: auto!important;
    }

    section#facts .pad {
        padding-right: 48px;
    }
}

@media screen and (max-width: 1000px) {
    body, html {
        min-width: 0;
    }

    header {
        bottom: auto;
        left: 0;
        top: 0;
        width: 100%;
        background: #000;
        background: #000 url(../img/the-king-gin-krone.svg) no-repeat center 10px;
        background-size: 35px auto;
        height: 40px;
        border-bottom: 1px solid #474549;
        overflow: visible;
        max-height: 40px;
        transition: max-height 150ms ease-in-out;
    }


    .skin-vodka.header-open header{
        background: #fff url(../img/the-king-gin-krone-black.svg) no-repeat center 10px !important;
        background-size: 35px auto !important;
    }

    header.weichenseite {
        background: none;
        text-align: center;
    }

    .sticky header {
        transition: max-height 150ms ease-in-out;
        background-size: 35px auto;
    }

    header nav, .header-open header #logo, header .icons {
        display: none;
    }

    .header-open header nav {
        display: block;
    }
    .header-open header .icons {
        display: flex;
    }

    header #logo {
        position: absolute;
        top: 70px;
        left: 50%;
        width: 115px;
        margin-left: -57px;
        overflow: hidden;
        transition: all 150ms ease-in-out;
        display: none;
    }



    .sticky header #logo {
        transition: all 150ms ease-in-out;
        height: 0;
        width: 0;
    }

    header #logo img {
        width: 100%;
        height: auto;
    }

    header a#burger {
        display: block;
        width: 20px;
        height: 14px;
        position: absolute;
        left: 20px;
        top: 12px;
        cursor: pointer;
    }

    #Mobile-Startseite-Copy-2 {
        stroke: #FFF
    }
    .skin-vodka.header-open #Mobile-Startseite-Copy-2{
        stroke: #000 !important;
        fill: #000 !important;
    }


    .header-open header {
        height: auto;
        max-height: 400px;
        background-color: #BC769B;
        border-color: #BC769B;
        padding: 50px 20px 30px;
        overflow: hidden;

    }

    .skin-kini.header-open header {
        background-color: #BA9240;
        border-color: #BA9240;
    }
    .skin-distiller.header-open header {
        background-color: #42EFE5;
        border-color: #42EFE5;
    }
    .skin-vodka.header-open header {
        background-color: #fff;
        border-color: #fff;
        box-shadow: 0px 0px 20px 1px #000000;
    }
    .skin-datenschutz.header-open header,
    .skin-imprint.header-open header {
        background-color: #9b9b9b;
        border-color: #9b9b9b;
    }


    nav a {
        font-size: 20px;
    }

    nav {
        margin-top: 22px;
        margin-bottom: 50px;
    }


    header .icons {
        position: relative;
        height: 20px;
        margin: 0;
    }

    header .icons > a,
    header a#fb {
        position: relative;
        height: 100%;
    }
    header .icons a svg {
        height: 100%;
        width: auto;
    }

    header a#fb svg * {
        fill: #fff;
    }
    body:not(.skin-vodka) header .icons a#fb:hover svg polyline,
    body:not(.skin-vodka) header .icons a#fb:hover svg path,
    body:not(.skin-vodka) header .icons a#insta:hover svg #TKV-Lay-Instagram {
        fill: #fff;
        opacity: 0.5;
    }

    section, section#facts .pad {
        padding-left: 0;
        padding-right: 0;
        background-size: 100% auto;
        background-position: center top;
    }

    section#facts .pad {
        margin: 0 auto;
    }

    section#facts .content, section#facts .pad {
        width: 100%!important;
    }

    section#start {
        background-position: center bottom;
        background-size: 100% auto;
    }

    .content {
        float: none!important;
        width: auto!important;
        padding-left: 20px;
        padding-right: 20px;
    }

    a.next {
        display: none;
    }

    h1 {
        font-size: 28px;
        line-height: 1;
        width: auto;
        left: 20px;
        right: 20px;
        text-align: center;
        bottom: 95px;
    }

    .cols-3 > * {
        padding-right: 0;
    }

    .cols-3 > : nth-child(3) {
        padding-left: 0;
    }

    .cols-3 > * p {
        width: 94px;
        font-size: 52px;
        line-height: 1.3;
    }

    .cols-3 > : nth-child(2) {
        text-align: center;
    }

    .cols-3 > : nth-child(2) p {
        text-align: left;
    }

    .parallax-background i {
        background-size: 100% auto;
        background-position: center center;
        /* background-repeat: no-repeat;*/
    }

    .parallax-background-start i {
        background-image: url(../img/King-Gin-Kini-Mobile-Background.jpg);
    }


    .parallax-background-facts i,
    .skin-gspusi .parallax-background-facts i {
        background-image: url(../img/the-king-gin-image-mobile-02.jpg);
    }

    .skin-kini .parallax-background-dealer i {
        background-image: url(../img/the-king-gin-image-mobile-04.jpg);
    }

    .skin-distiller .parallax-background-facts i{
        background-image: url(../img/King-Gin-Distillerscut-Mobile-Background-Facts.jpg);
    }


    .parallax-background-recipes i,
    .skin-distiller .parallax-background-recipes i,
    .skin-gspusi .parallax-background-recipes i {
        background-image: url(../img/the-king-gin-image-mobile-03.jpg);
    }

    .skin-gspusi .parallax-background-recipes i {
        background-image: url(../img/the-king-gin-image-mobile-07.jpg);
    }



    .skin-gspusi .parallax-background-dealer i {
        background-image: url(../img/the-king-gin-image-mobile-09.jpg);
    }

    .skin-distiller .parallax-background-dealer i {
        background-image: url(../img/King-Gin-Distillerscut-Mobile-Background-Dealer.jpg);
    }
    .skin-distiller .parallax-background-start i {
        background-image: url(../img/King-Gin-Distillerscut-Mobile-Background.jpg);
    }
    .skin-gspusi .parallax-background-start i {
        background-image: url(../img/King-Gin-Gspusi-Mobile-Background.jpg);
    }


    .skin-vodka .parallax-background-start i {
        background-image: url(../img/King-Gin-Vodka-Mobile-Background.jpg);
    }
    .skin-vodka .parallax-background-facts i{
        background-image: url(../img/King-Gin-Vodka-Mobile-Background-Facts.jpg);
    }
    .skin-vodka .parallax-background-recipes i{
        background-image: url(../img/King-Gin-Vodka-Mobile-Background-Recipes.jpg);
    }
    .skin-vodka .parallax-background-dealer i{
        background-image: url(../img/King-Gin-Vodka-Mobile-Background-Dealer.jpg);
    }

    .recipe img {
        width: 280px;
        height: auto;
    }

    .pingpong h2, .pingpong h3, .recipe h3 {
        font-size: 60px;
    }

    .content {
        font-size: 20px;
        line-height: 1.3;
    }

    #imprint {
        padding-top: 294px;
    }

    .middle-1-col {
        width: 80%;
    }
}

@media screen and (max-width: 480px) {
    .cols-3 > * p {
        width: calc(32vw - 50px);
        font-size: 52px;
        line-height: 1.3;
    }

    .middle-1-col {
        width: auto;
    }
}

@media screen and (max-width: 1024px) {
    .gallery > div {
        margin-top: 0 !important;
    }

}




.no-cssfilters body.age-verification-needed {
  overflow:hidden;
}
.no-cssfilters body.age-verification-needed .parallax-backgrounds i {
  -webkit-filter: none;
  filter: none;
}

.no-cssfilters body.age-verification-needed .parallax-background-start i {
    background-image: url(../img/the-king-gin-image-01-blur.jpg);
}
@media screen and (max-width: 1000px) {
    .no-cssfilters body.age-verification-needed .parallax-background-start i {
        background-image: url(../img/the-king-gin-image-mobile-01-blur.jpg);
    }
}




.swiper-container {
    width: 100%;
    height: 100%;
    display: none;
}
.swiper-slide {
    text-align: center;
}

.swiper-slide > a > img {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

section.gallery-wrapper {
    padding: 0px;
    min-height: 0;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 9000;
    height: auto;

}
.gallery {
    min-height: calc( 100vh - 20px - 20px - 32px - 50px );
  margin: 0 auto;
  position: relative;
  align-items: center;
}


.gallery > div {
  max-width: 20%;
  width: 100%;
  height: auto;
  padding: 40px;
  margin-top: 50px;
  z-index: 9900;

}


.gallery > div > a > img  {
  max-width: 100%;
  width: 100%;
  height: auto;
  transition: .1s transform;
  transform: translateZ(0);
  cursor: pointer;
  z-index: 1;
  margin-bottom: 60px;
}

.gallery > div:hover {
  z-index: 1;
}

.gallery > div:hover > a > img {
  transform: scale(1.2,1.2);
  transition: .2s transform;
  z-index: 1;
}

.flex {
    display: flex;
}
.center{
    justify-content: center;
}




#overlay-kini {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0,0,0,0.5); */ /* Black background with opacity */
    z-index: 10000; /* Specify a stack order in case you're using a different order for other elements */
   pointer-events: none;
}

#overlay-gspusi {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0,0,0,0.5); */ /* Black background with opacity */
    z-index: 10000; /* Specify a stack order in case you're using a different order for other elements */
   pointer-events: none;
}

#overlay-distiller {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0,0,0,0.5); */ /* Black background with opacity */
    z-index: 10000; /* Specify a stack order in case you're using a different order for other elements */
   pointer-events: none;
}

#overlay-gspusi:after,
#overlay-distiller:after,
#overlay-kini:after {
  content:"";
  display: block;
  width: 1px;
  bottom: 100px;
  background: #BA9240;
  position: absolute;
  top: 110px;
  left:78px;
}
#overlay-gspusi:after {
  background: #BC769B;
}
#overlay-distiller:after {
  background: #42EFE5;
}
#referer-kini {
    position: absolute;
    bottom: 60px;
    right: 60px;
    font-family: 'Futura W01', sans-serif;
    font-size: 24px;
    color: #BA9240;
    letter-spacing: 1.23px;
    text-align: right;
    z-index: 2000;
}

#referer-kini a {
    color: #BA9240;
}

#referer-gspusi {
    position: absolute;
    bottom: 60px;
    right: 60px;
    font-family: 'Futura W01', sans-serif;
    font-size: 24px;
    color: #BC769B;
    letter-spacing: 1.23px;
    text-align: right;
    z-index: 2000;
}

#referer-gspusi a {
    color: #BC769B;
}

#referer-distiller {
    position: absolute;
    bottom: 60px;
    right: 60px;
    font-family: 'Futura W01', sans-serif;
    font-size: 24px;
    color: #42EFE5;
    letter-spacing: 1.23px;
    text-align: right;
    z-index: 9000;
}

#referer-distiller a {
    color: #42EFE5;
}

#kini {
    position: absolute;
    top: 60px;
    right: 60px;

}


#distiller-raute,
#gspusi-raute,
#kini-raute {
    position: absolute;
    bottom: 60px;
    left: 72px;
}
#kini-krone{
    position: absolute;
    top: 60px;
    left: 60px;
}

#kini-linie {
    border-left: 1px solid #BA9240;
    height: 1100px;
    position: absolute;
    top: 120px;
    left: 75px;
}

#gspusi {
    position: absolute;
    top: 60px;
    right: 60px;

}

#gspusi-krone{
    position: absolute;
    top: 60px;
    left: 60px;
}

#distiller{
    position: absolute;
    top: 60px;
    right: 60px;

}

#distiller-krone{
    position: absolute;
    top: 60px;
    left: 60px;
}


@media screen and (min-width: 2190px){
    .parallax-background-start i{
        background-position: center center;
        background-size: 85%;
        background-repeat: no-repeat;

    }

    .gallery-wrapper {
        width: 90%;
    }
}

@media screen and (max-width: 1024px) and (min-width: 480px) {
    .swiper-container {
        display: flex !important;
        top: 50px;
        width: calc(100% - 120px);
        margin-left:auto;margin-right:auto;
        height: calc(100% - 100px);
        z-index: 9999 !important;
    }

    .gallery-wrapper {
        display: none;
    }
  #overlay-distiller,
  #overlay-gspusi,
  #overlay-kini {
    position: absolute;
    height: calc( 100vh - 50px );
    min-height:0; bottom: auto;
    z-index:1;
  }
 .footer-flex {
    margin-top: 100px;
    padding-bottom: 50px;
  }
}

@media screen and (max-width: 768px) and (min-width: 480px) {
    .swiper-container {
      width: 100%;
    }
    .swiper-slide a.gin {
      display: block;
      margin-top:18vh;
    }

}

@media screen and (max-width: 960px) and (min-width: 480px) {
    .swiper-container{
        width: 80%;
    }

}

@media screen and (max-width: 480px) {
    .swiper-container {
        top: 70px;
        height: auto;
        display: flex !important;
    }
  #overlay-gspusi:after,
  #overlay-distiller:after,
  #overlay-kini:after {
    display: none;
  }
    section.gallery-wrapper {
      display: none;
    }
  .swiper-slide > a > img {
    max-width: none;
    max-height: 56vh;
    width: auto;
  }
  #headline {
    font-size: 26px;
  }

  #referer-gspusi,
  #referer-distiller,
  #referer-kini {
    bottom: auto;
    top:0;
    position: relative;
    left:0;right:0;
    text-align: center;
    font-family: 'Futura W01', sans-serif;
  }
  #kini-krone,
  #distiller-krone,
  #distiller-raute,
  #gspusi-krone,
  #gspusi-raute,
  #kini-raute {
    display: none;
  }
  #overlay-distiller,
  #overlay-gspusi,
  #overlay-kini {
    position: relative;
    width: 100%;
    height: auto;
    top:0;
    margin-top: 100px;
    padding:0;
    left: 0;
    bottom: auto;
    min-height:0;
  }
  #gspusi, #distiller,
  #kini {
    top: calc( 24px + 2vh + 3vh );
    right: auto;left:50%;
    transform: rotate(-90deg) translate(-50%, -50%);
    transform-origin: left top;

  }
  #referer-gspusi:after,
  #referer-distiller:after,
  #referer-kini:after {
    display: block;
    content:"";
    height:1px; width:100%;
    background:#BA9240;
    position: relative;
    width: 75%;
    margin: 2vh auto 8vh auto;
  }
  #referer-gspusi:after {
    background: #BC769B;
  }

  #referer-distiller:after {
    background: #42EFE5;
  }
  .footer-flex {
    display: block;
    margin-top: 30px;
    padding-bottom: 30px;
  }
  .footer-flex a {
    display: block;
    text-align: center;
  }
  footer {
    position: relative;
  }
}

.skin-gspusi nav > a:hover {
    color: #BC769B;
}
.skin-kini nav > a:hover {
    color: #BA9240;
}
.skin-distiller nav > a:hover {
    color: #42EFE5;
}


#switch-teaser {
  display: none;
}

@media screen and (min-width: 1025px) {
    #referer-gspusi,
    #referer-kini,
    #referer-distiller,
    #gspusi,
    #kini,
    #distiller {
      right: 140px;
    }
    #switch-teaser {
      display: block;
      background:#fff;
      width: 220px;
      height:100%;
      position: fixed;
      top:0;right:0;
      z-index:10000;
      transform: translateX(100px);
      transition: transform 500ms ease;
    }
    #switch-teaser:hover {
      transform: translateX(0);
    }
    body.age-verification-needed #switch-teaser {
      transform: translateX(100%);
    }
    #switch-teaser a {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: 1.2px;
      color: #9b9b9b;
      display: block; position: relative;
      height:100%;
    }
    #switch-teaser a span,
    #switch-teaser a img {
        display: block;
    }
    #switch-teaser a span {
      border-bottom: 1px solid #979797;
      position: absolute;
      bottom:60px;
      left:20px;
      white-space: nowrap;
    }
    #switch-teaser a img {
        width:90%;
        height:auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(0,-50%) scale(1.2);
    }
}
/* SWITCH NUR MOBILE NUR AUF DETAILSEITEN */
@media screen and (max-width: 1024px) {
    #switch-teaser-mobile {
        padding-left: 0;
    }
    #switch-teaser-mobile a {
        display: inline-block;
        background:#fff;
        padding: 20px;
        font-size: 30px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 1.2px;
        color: #000000;
    }
    .skin-vodka #switch-teaser-mobile a {
        background:transparent;
        padding-bottom:0;padding-top:0;
        color:#ba9240;
    }
}




.cc-revoke, .cc-window {
    display: block;
    padding: 0 15px 0 21px !important;
    text-align: center;
    text-transform: uppercase;
    width: 1386px !important;
    max-width: 100% !important;
    right: auto !important;
    left: 50% !important;
    bottom: 34px !important;
    transform: translate(-50%, 0);
    background-color: #222120 !important;

    font-family: 'Futura W01', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.9px;
    color: #ffffff;
    z-index:11000;
}
body.age-verification-needed .cc-window {
  opacity:0;
}


.cc-window .buttons {
  display: inline-block;
}
.cc-compliance {
    display: inline-block;
}
.cc-window .cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cc-window .cont > i {
  display: block;
  width: 100px;
  height:88px;
  position: absolute;
  top:50%;left:40px;
  transform: translateY(-50%);
}
.cc-link,
.cc-btn {
    font-family: 'Futura W01', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.9px;

    opacity: 1;
    box-sizing: border-box;

    display: inline-block;
    padding: 10px;
    width: 188px;
    text-align: center;
    border-width: 0;
    min-width: 0 !important;
    background: transparent !important;
    margin: 15px 0 15px 24px !important;
    color:#fff !important;
    border: 1px solid #979797 !important;
  text-decoration: none;
  transition: all 100ms ease;
}
.cc-btn.cc-dismiss {
  background-color: #fff !important;
  border-color: #fff !important;
  color:  #222120 !important;
}

.cc-btn:hover,
.cc-link:hover {
  text-decoration: none;
}
.cc-btn.cc-dismiss:hover {
  background-color: #BA9240 !important;
  border-color: #BA9240 !important;
}
.skin-gspusi .cc-btn.cc-dismiss:hover {
  background-color: #BC769B !important;
  border-color: #BC769B !important;
}
.skin-distiller .cc-btn.cc-dismiss:hover {
  background-color: #42EFE5 !important;
  border-color: #42EFE5 !important;
}
.skin-vodka .cc-btn.cc-dismiss:hover {
  background-color: #3B5077 !important;
  border-color: #3B5077 !important;
  color:#fff !important;
}
.cc-btn.cc-deny:hover,
.cc-link:hover {
  color: #9b9b9b !important;
  border-color: #9b9b9b !important;
}
.cc-message {
  display: inline-block;
  padding: 15px 0;
}
.buttons > :last-child {
  margin-right:0 !important;
}
.cc-revoke {
  display: none !important;
}
@media screen and (max-width: 800px) {
  .cc-btn, .cc-link {
    margin-bottom: 9px !important;
    margin-top: 9px !important;
  }
  .cc-window {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
@media screen and (max-width: 500px) {
  .cc-window {
    bottom: 38px !important;
    left: 38px !important;
    right: 38px !important;
    transform: none !important;
    padding: 23px 30px 16px 30px !important;
    width: auto !important;
  }
  .cc-window .cont {
    padding-left: 0;
    padding-top: 0;
    position: relative;
    flex-direction: column;
  }

  .cc-window .cc-message {
    margin-bottom: 0;
    padding: 0 0 22px 0;
    font-size: 12px;
    line-height: 1.3;
  }
  .cc-btn, .cc-link {
    margin: 0 0 7px 0 !important;
    display: block;
    font-size: 12px;
  }
}