/****************************************************************************
 * Illustration
 ****************************************************************************/
.single_beer_section .beer_image_wrapper .illustration_wrapper {
    position: absolute; left: 50%; width: 100%;
    opacity:1; max-width: 40rem; pointer-events: none;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.illustration_wrapper svg[class*="illustration_"] {
    overflow: visible;
}
.illustration_wrapper svg[class*="illustration_"] > [data-illustration-part] {
    opacity: 0;
    -webkit-transform: translateY(2rem) scale(1.25);
    -moz-transform: translateY(2rem) scale(1.25);
    -ms-transform: translateY(2rem) scale(1.25);
    -o-transform: translateY(2rem) scale(1.25);
    transform: translateY(2rem) scale(1.25);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    transform-origin: center center;
}
.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part] {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    -o-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
}
.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part="1"] {
    -webkit-transition-delay: 0.25s;
    -moz-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    -o-transition-delay: 0.25s;
    transition-delay: 0.25s;
}
.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part="2"] {
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part="3"] {
    -webkit-transition-delay: 0.75s;
    -moz-transition-delay: 0.75s;
    -ms-transition-delay: 0.75s;
    -o-transition-delay: 0.75s;
    transition-delay: 0.75s;
}
.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part="4"] {
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}
.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part="5"] {
    -webkit-transition-delay: 1.25s;
    -moz-transition-delay: 1.25s;
    -ms-transition-delay: 1.25s;
    -o-transition-delay: 1.25s;
    transition-delay: 1.25s;
}
.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part="6"] {
    -webkit-transition-delay: 1.5s;
    -moz-transition-delay: 1.5s;
    -ms-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    transition-delay: 1.5s;
}


.show_the_content.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part] {
    opacity: 0.125;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}


/****************************************************************************
 * Illustration Hover Effekt
 ****************************************************************************/
 .single_beer_section .etikett_wrapper {
    color: inherit;
    -webkit-transition: color .25s ease;
    -moz-transition: color .25s ease;
    -ms-transition: color .25s ease;
    -o-transition: color .25s ease;
    transition: color .25s ease;
}
.single_beer_section .etikett_wrapper.active {
    color: #997514;
}



/****************************************************************************
 * Illustration Touch Buttons
 ****************************************************************************/
/*@keyframes touch {
    0%   { opacity: 0.75; }
    40%  { opacity: 0.75;}
    50% { opacity: 0;}
    90% { opacity: 0;}
    100% { opacity: 1;}
}*/


.illustration_wrapper [class*="touch_button"] {
    position: absolute; left: 20%; top: 20%; 
    width: 1rem; height: 1rem; border-radius: 50%; 
    background-color: #997514; opacity: 0;
    box-shadow: 0 0 0 0.0625rem #FFFFFF, 0 0 0 0.125rem #997514;
    -webkit-transform: scale(1.25) translate(-50%,-50%);
    -moz-transform: scale(1.25) translate(-50%,-50%);
    -ms-transform: scale(1.25) translate(-50%,-50%);
    -o-transform: scale(1.25) translate(-50%,-50%);
    transform: scale(1.25) translate(-50%,-50%);
}

/****************************************************************************
* Helles
*****************************************************************************/
#helles .illustration_wrapper [data-touch-number="2"] {left: 30%; top: 17%; }
#helles .illustration_wrapper [data-touch-number="3"] {left: 51%; top: 9%; }
#helles .illustration_wrapper [data-touch-number="1"] {left: 83%; top: 73%; }

#helles .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Helles_Malz.png);}
#helles .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Helles_Loewe.png);}
#helles .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/Helles_Sonne.png);}

/****************************************************************************
* Dunkel
*****************************************************************************/
#dunkel .illustration_wrapper [data-touch-number="1"] {left: 88%; top: 43%; }
#dunkel .illustration_wrapper [data-touch-number="2"] {left: 20%; top: 20%; }

#dunkel .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Dunkel_Herbstlaub.png);}
#dunkel .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Dunkel_Malz.png);}


/****************************************************************************
* Fürstendrunk
*****************************************************************************/
#fuerstentrunk .illustration_wrapper [data-touch-number="2"] {left: 34%; top: 13%; }
#fuerstentrunk .illustration_wrapper [data-touch-number="3"] {left: 51%; top: 12%; }
#fuerstentrunk .illustration_wrapper [data-touch-number="1"] {left: 86%; top: 57%; }

#fuerstentrunk .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/Fuerstentrunk_Breze.png);}
#fuerstentrunk .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Fuerstentrunk_Pferd.png);}
#fuerstentrunk .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Fuerstentrunk_Ritter.png);}


/****************************************************************************
* Helles Alkoholfrei
*****************************************************************************/
#helles-alkoholfrei .illustration_wrapper [data-touch-number="2"] {left: 32%; top: 15%; }
#helles-alkoholfrei .illustration_wrapper [data-touch-number="3"] {left: 51%; top: 8%; }
#helles-alkoholfrei .illustration_wrapper [data-touch-number="1"] {left: 82%; top: 71%; }

#helles-alkoholfrei  .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/AF_Helles_Sonne.png);}
#helles-alkoholfrei  .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/AF_Helles_Loewe.png);}
#helles-alkoholfrei  .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/AF_Helles_Malz.png);}


/****************************************************************************
* Helles Leicht
*****************************************************************************/
#helles-leicht .illustration_wrapper [data-touch-number="3"] {left: 88%; top: 48%; }

#helles-leicht  .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/Helles_leicht_Hopfen.png);}

/****************************************************************************
* Josef
*****************************************************************************/
#heller-bock-josef .illustration_wrapper [data-touch-number="1"] {left: 50%; top: 94%; }
#heller-bock-josef .illustration_wrapper [data-touch-number="2"] {left: 26%; top: 85%; }
#heller-bock-josef .illustration_wrapper [data-touch-number="3"] {left: 90%; top: 54%; }
#heller-bock-josef .illustration_wrapper [data-touch-number="4"] {left: 51%; top: 9%; }

#heller-bock-josef  .content_column .etikett_wrapper[data-etiketten-part="4"]:after { background-image: url(../img/illustrations/Josef_Sonne.png);}
#heller-bock-josef  .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/Josef_Moench.png);}
#heller-bock-josef  .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Josef_Bock.png);}
#heller-bock-josef  .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Josef_Josef.png);}


/****************************************************************************
* Maximilian
*****************************************************************************/
#dunkler-bock-maximilian .illustration_wrapper [data-touch-number="1"] {left: 51%; top: 94%; }
#dunkler-bock-maximilian .illustration_wrapper [data-touch-number="2"] {left: 89%; top: 54%; }
#dunkler-bock-maximilian .illustration_wrapper [data-touch-number="3"] {left: 51%; top: 8%; }

#dunkler-bock-maximilian  .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/Maximilian_Mond.png);}
#dunkler-bock-maximilian  .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Maximilian_Moench.png);}
#dunkler-bock-maximilian  .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Maximilian_Maximilian.png);}

/****************************************************************************
* Pils
*****************************************************************************/
#bayerisches-pils .illustration_wrapper [data-touch-number="1"] {left: 25%; top: 87%; }
#bayerisches-pils .illustration_wrapper [data-touch-number="2"] {left: 93%; top: 40%; }
#bayerisches-pils .illustration_wrapper [data-touch-number="3"] {left: 50.5%; top: 8%; }
#bayerisches-pils .illustration_wrapper [data-touch-number="4"] {left: 86%; top: 66%; }


#bayerisches-pils  .content_column .etikett_wrapper[data-etiketten-part="4"]:after { background-image: url(../img/illustrations/Pils_Hopfen.png);}
#bayerisches-pils  .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/Pils_Kompass.png);}
#bayerisches-pils  .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Pils_Schluessel.png);}
#bayerisches-pils  .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Pils_SeilerWinde.png);}


/****************************************************************************
* Radler
*****************************************************************************/
#traunsteiner-radler .illustration_wrapper [data-touch-number="1"] {left: 13%; top: 68%; }
#traunsteiner-radler .illustration_wrapper [data-touch-number="2"] {left: 87%; top: 33%; }
#traunsteiner-radler .illustration_wrapper [data-touch-number="3"] {left: 51%; top: 8%; }

#traunsteiner-radler .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/Radler_Rad.png);}
#traunsteiner-radler .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Radler_Zitrone.png);}
#traunsteiner-radler .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Radler_Malz.png);}


/****************************************************************************
* Weißbier Alkoholfrei
*****************************************************************************/
#weissbier-alkoholfrei .illustration_wrapper [data-touch-number="1"] {left: 87%; top: 74%; }
#weissbier-alkoholfrei .illustration_wrapper [data-touch-number="2"] {left: 50.7%; top: 9.5%; }

#weissbier-alkoholfrei .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/AF_Weissbier_Sonne.png);}
#weissbier-alkoholfrei .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/AF_Weizen.png);}


/****************************************************************************
* Weißbier Dunkel
*****************************************************************************/
#weissbier-dunkel .illustration_wrapper [data-touch-number="1"] {left: 87%; top: 74%; }
#weissbier-dunkel .illustration_wrapper [data-touch-number="2"] {left: 14%; top: 22%; }

#weissbier-dunkel .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Weissbier_dunkel_Wildblumen.png);}
#weissbier-dunkel .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Weissbier_dunkel_Malz.png);}


/****************************************************************************
* Weißbier Leicht
*****************************************************************************/
#weissbier-leicht .illustration_wrapper [data-touch-number="4"] {left: 10%; top: 35%; }

#weissbier-leicht .content_column .etikett_wrapper[data-etiketten-part="4"]:after { background-image: url(../img/illustrations/Weissbier_leicht_Bierschaum.png);}

/****************************************************************************
* Weißbier
*****************************************************************************/
#weissbier .illustration_wrapper [data-touch-number="1"] {left: 51%; top: 93%; }
#weissbier .illustration_wrapper [data-touch-number="2"] {left: 86%; top: 73%; }
#weissbier .illustration_wrapper [data-touch-number="4"] {left: 51%; top: 9.5%; }

#weissbier .content_column .etikett_wrapper[data-etiketten-part="4"]:after { background-image: url(../img/illustrations/Weissbier_Sonne.png);}
#weissbier .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Weissbier_Weizen.png);}
#weissbier .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Weissbier_Traunstein.png);}


/****************************************************************************
* Zwickl Alkoholfrei
*****************************************************************************/
#zwickl-alkoholfrei .illustration_wrapper [data-touch-number="1"] {left: 93%; top: 41%; }
#zwickl-alkoholfrei .illustration_wrapper [data-touch-number="2"] {left: 86%; top: 73%; }
#zwickl-alkoholfrei .illustration_wrapper [data-touch-number="3"] {left: 20%; top: 22%; }
#zwickl-alkoholfrei .illustration_wrapper [data-touch-number="4"] {left: 51%; top: 7%; }

#zwickl-alkoholfrei .content_column .etikett_wrapper[data-etiketten-part="4"]:after { background-image: url(../img/illustrations/AF_Zwickl_Muenze.png);}
#zwickl-alkoholfrei .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/AF_Zwickl_Malz.png);}
#zwickl-alkoholfrei .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/AF_Zwickl_Zapfhahn.png);}
#zwickl-alkoholfrei .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/AF_Zwickl_Flasche.png);}


/****************************************************************************
* Zwickl
*****************************************************************************/
#zwickl .illustration_wrapper [data-touch-number="1"] {left: 93%; top: 41%; }
#zwickl .illustration_wrapper [data-touch-number="2"] {left: 86%; top: 73%; }
#zwickl .illustration_wrapper [data-touch-number="3"] {left: 20%; top: 22%; }
#zwickl .illustration_wrapper [data-touch-number="4"] {left: 51%; top: 7%; }

#zwickl .content_column .etikett_wrapper[data-etiketten-part="4"]:after { background-image: url(../img/illustrations/Zwickl_Muenze.png);}
#zwickl .content_column .etikett_wrapper[data-etiketten-part="1"]:after { background-image: url(../img/illustrations/Zwickl_Malz.png);}
#zwickl .content_column .etikett_wrapper[data-etiketten-part="3"]:after { background-image: url(../img/illustrations/Zwickl_Zapfhahn.png);}
#zwickl .content_column .etikett_wrapper[data-etiketten-part="2"]:after { background-image: url(../img/illustrations/Zwickl_Flasche.png);}




@media screen and (min-width:64em){
    /****************************************************************************
     * SVG
     ****************************************************************************/
    .show_the_content .illustration_wrapper svg[class*="illustration_"] > [data-overlay-part] {
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }
    .illustration_wrapper svg[class*="illustration_"] > [data-overlay-part] {
        pointer-events: none;
    }
    .illustration_wrapper svg[class*="illustration_"] > [data-overlay-part].available {
        pointer-events: all;
    }
    

    .show_the_content.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-illustration-part] {
        opacity: 1;
    }
    .show_the_content.show_the_beer .illustration_wrapper svg[class*="illustration_"] > [data-overlay-part] {
        opacity: 1;
    }

    .illustration_wrapper svg [data-overlay-part] .st0 {
        -webkit-transition: opacity .25s ease;
        -moz-transition: opacity .25s ease;
        -ms-transition: opacity .25s ease;
        -o-transition: opacity .25s ease;
        transition: opacity .25s ease;
    }
    

    .show_the_content.has_active_overlay .illustration_wrapper svg.has_active_element [data-illustration-part] .st0 {
        opacity: 0.3; fill: #FFFFFF;
    }
    .show_the_content.has_active_overlay .illustration_wrapper svg.has_active_element [data-overlay-part].active .st0 {
        opacity: 0.7;
    }

    .illustration_wrapper svg [data-overlay-part] {
        cursor: pointer;
    }


    /****************************************************************************
    * Illustration Touch Buttons
    ****************************************************************************/
    .illustration_wrapper [class*="touch_button"] {
        background-color: rgba(0,175,234,1);
        box-shadow: 0 0 0 0.125rem #FFFFFF, 0 0 0 0.25rem rgba(0,175,234,1);
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }
    .show_the_content .illustration_wrapper:hover [class*="touch_button"] {
        opacity: 0.75; cursor: pointer;
        /*animation-name: touch;
        animation-iteration-count: infinite;
        animation-duration: 10s;*/
    }

    .show_the_content .illustration_wrapper [class*="touch_button"]:hover {
        background-color: rgba(0,175,234,0.5);
        box-shadow: 0 0 0 0.125rem rgba(255,255,255,0.5), 0 0 0 0.25rem rgba(0,175,234,0.5);
    }

}