/****************************************************************************
 * Row
 ****************************************************************************/
.single_beer_section {
    overflow: hidden;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
}
.single_beer_section > .row {
    position: relative;
}


/****************************************************************************
 * Content Column
 ****************************************************************************/
.single_beer_section .content_column {
    padding-left: 6.9375rem; opacity: 0;
    -webkit-transform: translate(0,2rem);
    -moz-transform: translate(0,2rem);
    -ms-transform: translate(0,2rem);
    -o-transform: translate(0,2rem);
    transform: translate(0,2rem);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}


.show_the_content.single_beer_section .content_column {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.single_beer_section .overlay_column {
    padding-left: 6.9375rem;
}

/****************************************************************************
 * Image Column
 ****************************************************************************/
.single_beer_section .beer_image_wrapper {
    position: absolute; right: 0.9375rem; left: 0.9375rem;
    bottom: 0; width: auto; z-index: 50; pointer-events: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:start;
    -webkit-justify-content:flex-start;
    -ms-flex-pack:start;
    justify-content:flex-start;
}


.single_beer_section .beer_image_wrapper.is_fixed {
    position: fixed; left: 0.9375rem; right: 0.9375rem; width: auto; 
    max-width: 78.125rem; margin: 0 auto;
}

.single_beer_section .beer_image_wrapper .beer_image {
    left: 50%; opacity: 0; top: 50%; position: absolute;
    width: 28%;
    max-width: 28%;
    -webkit-transform: translate(-50%,-50%) scale(0.75);
    -moz-transform: translate(-50%,-50%) scale(0.75);
    -ms-transform: translate(-50%,-50%) scale(0.75);
    -o-transform: translate(-50%,-50%) scale(0.75);
    transform: translate(-50%,-50%) scale(0.75);
    -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_beer.single_beer_section .beer_image_wrapper .beer_image {
    opacity: 1;
    -webkit-transform: translate(-50%,-50%) scale(1);
    -moz-transform: translate(-50%,-50%) scale(1);
    -ms-transform: translate(-50%,-50%) scale(1);
    -o-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1);
    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -ms-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}
.show_the_content.single_beer_section .beer_image_wrapper .beer_image {
    left: 0;
    width: 11rem;
    max-width: 11rem;
    -webkit-transform: translate(-40%,-50%);
    -moz-transform: translate(-40%,-50%);
    -ms-transform: translate(-40%,-50%);
    -o-transform: translate(-40%,-50%);
    transform: translate(-40%,-50%);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}


/****************************************************************************
 * Button Group
 ****************************************************************************/
.single_beer_section .content_column .button {
    color: #997514;
}
.single_beer_section .content_column .button:hover {
    background-color: #997514; color: #FFFFFF;
    border-color: #997514;
}

/****************************************************************************
 * Go Back
 ****************************************************************************/
.single_beer_section .content_column .go_back {
    font-style: italic; font-weight: 700;
    color: #997514;
}

/****************************************************************************
 * Mobile Etiketten Headline
 ****************************************************************************/
.mobile_headline.content_title {
    padding-top: 3rem;
}
.mobile_headline.content_title > *:not(p){
    margin: 0;
}

/****************************************************************************
 * Etikett Wrapper
 *
 * Mobile Illustrations you can find here: /BEER-single-illustrations.css
 ****************************************************************************/
.single_beer_section .content_column .etikett_wrapper {
    padding-top: 2rem; padding-left: 3rem; position: relative;
}
.single_beer_section .content_column .etikett_wrapper:after {
    content: ''; position: absolute; top: 2rem; bottom: 0;
    left: -2rem; width: 4.5rem; height: auto; 
    background-repeat: no-repeat; background-size: contain;
    background-position: right top;
}

.single_beer_section .content_column .etikett_wrapper h2 {
    font-family: fleisch-wolf, sans-serif; font-weight: 400;
    font-style: normal; font-size:2rem;
}

/****************************************************************************
 * Post Pagination Wrapper
 ****************************************************************************/
.single_beer_section .post_pagination_wrapper.row {
    padding-top: 2rem; margin-top: 0;
}





@media screen and (min-width:25em){
    /****************************************************************************
     * Content Section
     ****************************************************************************/
    .single_beer_section .beer_image_wrapper.is_fixed {
        left: 1.4375rem; right: 1.4375rem; 
    }
    
    .show_the_content.single_beer_section .beer_image_wrapper .beer_image {
        -webkit-box-flex:0;
        -webkit-flex:0 0 12rem;
        -ms-flex:0 0 12rem;
        flex:0 0 12rem;
        max-width: 12rem;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    
    /****************************************************************************
     * Content Column
     ****************************************************************************/
    .single_beer_section .content_column,
    .single_beer_section .overlay_column {
        padding-left: 7.9375rem;
    }

    /****************************************************************************
    * Etikett Wrapper
    *
    * Mobile Illustrations you can find here: /BEER-single-illustrations.css
    ****************************************************************************/
    .single_beer_section .content_column .etikett_wrapper {padding-left: 4rem;}
    .single_beer_section .content_column .etikett_wrapper:after { width: 5rem;}
    
}



@media screen and (min-width:40em){
    /****************************************************************************
     * Content Section
     ****************************************************************************/
    .single_beer_section .beer_image_wrapper.is_fixed {
        left: 1.9375rem; right: 1.9375rem; 
    }

    /****************************************************************************
     * Etikett Wrapper
     ****************************************************************************/
    .single_beer_section .content_column .etikett_wrapper h2 { font-size: 2.375rem;}
}


@media screen and (min-width:50em){
    /****************************************************************************
     * Beer Image Wrapper
     ****************************************************************************/
    .single_beer_section .beer_image_wrapper.is_fixed {
        left: 2.9375rem; right: 2.9375rem; 
    }
    
    .single_beer_section .beer_image_wrapper .beer_image {
        width: 20%;
        max-width: 20%;
    }
    
    .show_the_content.single_beer_section .beer_image_wrapper .beer_image {
        -webkit-transform: translate(-20%,-50%);
        -moz-transform: translate(-20%,-50%);
        -ms-transform: translate(-20%,-50%);
        -o-transform: translate(-20%,-50%);
        transform: translate(-20%,-50%);
    }
    
    /****************************************************************************
     * Content Column
     ****************************************************************************/
    .single_beer_section .content_column,
    .single_beer_section .overlay_column {
        padding-left: 10.9375rem;
    }
    
}


@media screen and (min-width:64em){
    /****************************************************************************
     * Beer Image Wrapper
     ****************************************************************************/
    .single_beer_section .beer_image_wrapper.is_fixed {
        left: 3.9375rem; right: 3.9375rem; 
    }

    .show_the_beer.single_beer_section.fade_in {opacity: 0;}
    .show_the_beer.single_beer_section.fade_in.start_fade_in {
        opacity: 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;
        -webkit-transition-delay: 0.25s;
        -moz-transition-delay: 0.25s;
        -ms-transition-delay: 0.25s;
        -o-transition-delay: 0.25s;
        transition-delay: 0.25s;
    }

    /****************************************************************************
     * Arrows
     ****************************************************************************/
    .single_beer_section .beer_image_wrapper .arrow {
        position: absolute; top: 50%; left: 0; font-size: 0;
        width: 1rem; height: 1rem; border: 0.125rem solid currentColor;
        border-left: none; border-bottom: 0; opacity: 0;
        z-index: 2000; pointer-events: none;
        -webkit-transition: opacity .25s ease;
        -moz-transition: opacity .25s ease;
        -ms-transition: opacity .25s ease;
        -o-transition: opacity .25s ease;
        transition: opacity .25s ease;
        -webkit-transition-delay: .5s;
        -moz-transition-delay: .5s;
        -ms-transition-delay: .5s;
        -o-transition-delay: .5s;
        transition-delay: .5s;
    }
    .show_the_content.single_beer_section .beer_image_wrapper .arrow {
        opacity: 1; pointer-events: all;
    }
    .has_active_overlay.single_beer_section .beer_image_wrapper .arrow {
        border-color: rgba(255,255,255,0.7);
    }
    .single_beer_section .beer_image_wrapper .arrow.arrow_prev {
        -webkit-transform: translate(-100%,-50%) rotate(225deg);
        -moz-transform: translate(-100%,-50%) rotate(225deg);
        -ms-transform: translate(-100%,-50%) rotate(225deg);
        -o-transform: translate(-100%,-50%) rotate(225deg);
        transform: translate(-100%,-50%) rotate(225deg);
    } 
    .single_beer_section .beer_image_wrapper .arrow.arrow_next {
        left: 40%;
        -webkit-transform: translate(0,-50%) rotate(45deg);
        -moz-transform: translate(0,-50%) rotate(45deg);
        -ms-transform: translate(0,-50%) rotate(45deg);
        -o-transform: translate(0,-50%) rotate(45deg);
        transform: translate(0,-50%) rotate(45deg);
    } 
    .single_beer_section .beer_image_wrapper form.arrow {
        cursor: pointer;
    }
    .single_beer_section .beer_image_wrapper form.arrow > * {
        opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
        width: auto; height: auto; cursor: pointer;
    }
    
    /****************************************************************************
     * Beer Image
     ****************************************************************************/
    .show_the_content.single_beer_section .beer_image_wrapper .beer_image {
        position: absolute; left: 20%; top: 50%;
        width: 11.5%;
        max-width: 11.5%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    
    .single_beer_section .beer_image_wrapper .beer_image {
        width: 13.5%;
        max-width: 13.5%;
    }
    
    /****************************************************************************
     * Illustration Wrapper
     ****************************************************************************/
    .single_beer_section .beer_image_wrapper .illustration_wrapper {
        width: 50%; pointer-events: all;
        -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.single_beer_section .beer_image_wrapper .illustration_wrapper {
        left: 20%; width: 40%;
    }

    

    /****************************************************************************
     * Content Column
     ****************************************************************************/
    .single_beer_section .content_column,
    .single_beer_section .overlay_column {
        padding-left: 2.9375rem;
        -webkit-box-flex:0;
        -webkit-flex:0 0 60%;
        -ms-flex:0 0 60%;
        flex:0 0 60%;
        max-width:60%;
    }


    /****************************************************************************
     * Etikett Wrapper
     ****************************************************************************/
    .single_beer_section .content_column .etikett_wrapper {display: none;}
    .single_beer_section .content_column .etikett_wrapper h2 { font-size: 2.5rem;}


    /****************************************************************************
     * Overlay Column
     *
     * The Overlay Colors you can find in /illustrationen.css
     ****************************************************************************/
    .single_beer_section:after {
        content: ''; position: absolute; top: 0; left: 0;
        right: 0; bottom: 0; width: auto; height: auto;
        background-color: #997514; z-index: 1;
        opacity: 0; pointer-events: none;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }
    .single_beer_section.has_active_overlay:after  {
        opacity: 1;
    }

    .single_beer_section .overlay_column {
        position: absolute; top: 50%; right: 0; z-index: 10;
        opacity: 0; pointer-events: none; visibility: hidden;
        color: #FFFFFF; height: 100%;
        -webkit-transform: translate(0,-50%);
        -moz-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
        -o-transform: translate(0,-50%);
        transform: translate(0,-50%);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

    .single_beer_section .overlay_column > * {
        position: relative; z-index: 20;;
    }

    .single_beer_section .overlay_column.overlay_active {
        opacity: 1; visibility: visible; pointer-events: all;
    }

    .single_beer_section .overlay_column .content_title > *:not(p) {
        color: inherit;
    }

    .single_beer_section .overlay_column .close {
        position: absolute; top: 0; right: 0;
        width: 1.5rem; height: 1.5rem; cursor: pointer;
    }
    .single_beer_section .overlay_column .close:after,
    .single_beer_section .overlay_column .close:before {
        content: ''; position: absolute; top: 50%; left: 50%;
        width: 100%; height: 0.125rem; background-color: #FFFFFF;
    }
    .single_beer_section .overlay_column .close:after {
        -webkit-transform: translate(-50%,-50%) rotate(45deg);
        -moz-transform: translate(-50%,-50%) rotate(45deg);
        -ms-transform: translate(-50%,-50%) rotate(45deg);
        -o-transform: translate(-50%,-50%) rotate(45deg);
        transform: translate(-50%,-50%) rotate(45deg);
    }
    .single_beer_section .overlay_column .close:before {
        -webkit-transform: translate(-50%,-50%) rotate(-45deg);
        -moz-transform: translate(-50%,-50%) rotate(-45deg);
        -ms-transform: translate(-50%,-50%) rotate(-45deg);
        -o-transform: translate(-50%,-50%) rotate(-45deg);
        transform: translate(-50%,-50%) rotate(-45deg);
    }
    
}


@media screen and (min-width:75em){
    /****************************************************************************
     * Beer Image Wrapper
     ****************************************************************************/
    .single_beer_section .beer_image_wrapper.is_fixed {
        left: 4.9375rem; right: 4.9375rem;
        
    }

    /****************************************************************************
     * Arrows
     ****************************************************************************/
    .single_beer_section .beer_image_wrapper .arrow.arrow_prev {
        left: -2%;
    } 
    .single_beer_section .beer_image_wrapper .arrow.arrow_next {
        left: 48%;
    } 
    
    /****************************************************************************
     * Beer Image 
     ****************************************************************************/
    .show_the_content.single_beer_section .beer_image_wrapper .beer_image {
        width: 13.5%;
        max-width: 13.5%;
        left: 23%;
    }
    
    /****************************************************************************
     * Illustration Wrapper
     ****************************************************************************/
    .show_the_content.single_beer_section .beer_image_wrapper .illustration_wrapper {
        left: 23%; width: 46%;
    }
    
    /****************************************************************************
     * Content Column
     ****************************************************************************/
    .single_beer_section .content_column,
    .single_beer_section .overlay_column {
        padding-left: 2.9375rem;
        -webkit-box-flex:0;
        -webkit-flex:0 0 50%;
        -ms-flex:0 0 50%;
        flex:0 0 50%;
        max-width:50%;
    }

    /****************************************************************************
     * Etikett Wrapper
     ****************************************************************************/
    .single_beer_section .content_column .etikett_wrapper h2 { font-size: 2.75rem;}
}