/****************************************************************************
 * Topbar
 ****************************************************************************/
.topbar {
    background: url(../img/hb_bg.jpg) repeat;
    border-bottom: 0.0625rem solid #997514;
    box-shadow: 0 0 1rem rgba(0,0,0,0.125);
}

/****************************************************************************
 * Logo Wrapper
 ****************************************************************************/
.topbar .logo_wrapper {
    position: absolute; top: 100%; width: 6rem /*7rem*/; height: 6rem;
    left: 50%; display: block;
    -webkit-transform: translate(-50%,-60%);
    -moz-transform: translate(-50%,-60%);
    -ms-transform: translate(-50%,-60%);
    -o-transform: translate(-50%,-60%);
    transform: translate(-50%,-60%);
}
.topbar .logo_wrapper .logo {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
}



/****************************************************************************
 * Navigation Toggler
 ****************************************************************************/
.navigation_toggle_wrapper .navigation_toggle {
    width: 2em; height: 1.25em; line-height: 1.5em; color: #997514; cursor:pointer;
}
.navigation_toggle_wrapper .navigation_toggle:after,
.navigation_toggle_wrapper .navigation_toggle:before {
    border-radius: 0.35rem; width: 2em; height: 0.1875em;
}
.navigation_toggle_wrapper .navigation_toggle:before {
    box-shadow: 0 0.5em 0 0 currentColor;
}

/****************************************************************************
 * Navigation Wrapper
 ****************************************************************************/
.topbar .navigation_wrapper {
    position: fixed; top: 4rem; left: 0; bottom: 0; right: 0; padding: 0;
    width: 100%; background-color: transparent;
    max-width: 88rem; margin: 0 auto; opacity: 0;
    pointer-events: none; visibility: hidden;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    transform: translate(-5rem, 0);
}


.topbar .navigation_wrapper.opened,
.topbar .navigation_wrapper:focus-within {
    opacity: 1; visibility: visible;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}
.topbar .navigation_wrapper .menu_wrapper {
    margin: 0; width: 90%; z-index: 20;
    padding: 4rem 0; overflow-y: auto;
    pointer-events: all;
    /*border-left: 1px solid #997514;*/
}

.topbar .navigation_wrapper:after {
    content: ''; position: absolute; left: -999rem; right: 10%; bottom: 0; top: 0;
    width: auto; height: auto; background: url(../img/hb_bg.jpg) repeat;
    z-index: 1; box-shadow: 0 2rem 2rem rgba(0,0,0,0.25);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}


.topbar .navigation_wrapper .menu_wrapper > * {
    padding-left: 0.9375rem; padding-right: 0.9375rem;
    position: relative; z-index: 30;
}



/****************************************************************************
 * Menu
 ****************************************************************************/
.navigation_wrapper .menu {
    padding-bottom: 4rem;
}
.navigation_wrapper .menu li a {
    padding: 0.5rem 0; font-size: 1.375rem;
    font-weight: 700; color: #997514;
    display: inline-block;
}

/*.navigation_wrapper .menu li a:after {
    content: ''; position: absolute; top: auto; bottom: 0.375rem;
    left: 0; right: 0; width: auto; height: 0.25rem;
    background: url(../img/footer-border.png) repeat-x;
    background-size: auto 100%; opacity: 0;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    -ms-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
}
.navigation_wrapper .menu li a:hover:after,
.navigation_wrapper .menu li.current_page_item a:after {
    opacity: 0.5;
}*/

.navigation_wrapper .menu li a:hover {
    color: #775b0f;
}

body.single-typo_cpt_beers .navigation_wrapper .menu li.beer_archive a,
.navigation_wrapper .menu li.current_page_item a,
.navigation_wrapper .menu li.current-page-ancestor > a {
    color: #00afea;
}

.navigation_wrapper .menu li.primary + li:not(.primary){
    padding-top: 2rem;
}

.navigation_wrapper .menu li.primary a {
    font-family: fleisch-wolf, sans-serif; font-weight: 400;
    font-style: normal; font-size: 2rem;
}

/****************************************************************************
 * Submenu
 ****************************************************************************/
.navigation_wrapper .menu li ul {
    margin: 0;
}
.navigation_wrapper .menu li ul li {
    list-style: none; position: relative;
}
.navigation_wrapper .menu li ul li a {
    position: relative; padding-left: 1.125em;
}
.navigation_wrapper .menu li ul li a:after {
    content: ''; position: absolute; top: 50%;
    height: 0.125em; width: 0.75em; left: 0;
    background-color: currentColor; opacity: 0.25;
}

/****************************************************************************
 * Footer Nav Wrapper
 ****************************************************************************/
.footer_nav_wrapper {
    padding-top: 2rem; position: relative;
}
.footer_nav_wrapper:after {
    content: ''; position: absolute; top: 0; left: -999rem;
    right: 0; width: auto; height: 1px;
    background-color: #997514;
}

.footer_nav_wrapper:before {
    content: ''; position: absolute; top: 1rem; right: 0;
    width: 15rem; height: 15rem; left: auto;
    background: url(../img/hopfen.svg) no-repeat;
    background-size: contain; 
    background-position: 100% 0;
    z-index: 10; opacity: 0.075;
}

.footer_nav_wrapper .menu li a {
    font-weight: 400; font-size: 1.25rem;
}


/****************************************************************************
 * Intranet
 ****************************************************************************/
.topbar .navigation_wrapper.intranet_nav_wrapper:after {
	right: -999rem;
}
.topbar .navigation_wrapper.intranet_nav_wrapper .menu_wrapper {
	width: 100%;
}
.topbar .navigation_wrapper .menu_wrapper > .listing {
	margin: 0 -0.9375rem;
}
.topbar .navigation_wrapper .menu_wrapper > .listing .columns {
	padding: 0.9375rem;
}


/****************************************************************************
 * Social Nav Wrapper
 ****************************************************************************/
.social_nav_wrapper .menu {
    margin: -0.375rem;
}
.social_nav_wrapper .menu li {
    padding: 0.375rem;
}
.social_nav_wrapper .menu li a {
    font-size: 0; height: 2rem; min-width: 2rem;
    padding: 0 1.5rem 0 0; position: relative;
    line-height: 2rem;
}
.social_nav_wrapper .menu li a:after {
    content: ''; position: absolute; top: 50%; left: auto;
    width: 2rem; height: 2rem; right: 0; bottom: auto; opacity: 1;
    background: url(../img/shopping-cart.svg) no-repeat;
    background-position: center; background-size: contain;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

.social_nav_wrapper.columns .menu li { padding: 0.125rem;}
.social_nav_wrapper.columns .menu li a:after {width: 1.625rem; height: 1.625rem;}

.social_nav_wrapper .menu li.shop a:after { background-image: url(../img/shopping-cart.svg);}
.social_nav_wrapper .menu li.facebook { display: none; }
.social_nav_wrapper .menu li.facebook a:after { background-image: url(../img/facebook.svg);}
.social_nav_wrapper .menu li.instagram { display: none; }
.social_nav_wrapper .menu li.instagram a:after { background-image: url(../img/instagram.svg);}
.social_nav_wrapper .menu li.youtube { display: none; }
.social_nav_wrapper .menu li.youtube a:after { background-image: url(../img/youtube.svg);}

/****************************************************************************
 * Jobs Nav Wrapper
 ****************************************************************************/
.jobs_nav_wrapper .menu {
    margin: -0.375rem;
}
.jobs_nav_wrapper.columns .menu li { padding: 0.125rem 0 0.125rem 0.125rem;}
.jobs_nav_wrapper.columns .menu li a:after {width: 1.625rem; height: 1.625rem;}


.jobs_nav_wrapper .menu li a {
    height: 2rem; min-width: 2rem;
    padding: 0.5rem; position: relative;
    line-height: 1rem;
    border:0.125em solid currentColor
}


.jobs_nav_wrapper .menu li.shop a {
    padding-right: 1.875rem;
    font-size: 0;
    /*font-weight: 700;font-size: 0.75rem;*/
}

.jobs_nav_wrapper .menu li.shop a:after {
    content: ''; position: absolute; top: 50%; left: auto;
    width: 1.5rem; height: 2rem; right: 0.25rem; bottom: auto; opacity: 1;
    background: url(../img/shopping-cart.svg) no-repeat;
    background-position: center; background-size: contain;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}



/****************************************************************************
 * Language-Switch
 ****************************************************************************/
.typo_language_switch_wrapper{
    display: none;
}
.navigation_wrapper  .typo_language_switch_wrapper{
    display: block;
    padding-bottom: 4rem;
}
.typo_language_switch_wrapper >.current{
    display: none;
}
.typo_language_switch_wrapper .typo_language_switch_nav{
    position: relative; opacity: 1; visibility: visible;
    background-color: transparent;
    text-align: left;
    top: auto; left: auto;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}
.typo_language_switch_nav li {
	padding: 0.25rem 0;
}
.typo_language_switch_nav li:not(:last-child):after{
	content: '/'; padding: 0 0.25rem;
	color: #997514;
}
.typo_language_switch_wrapper .typo_language_switch_nav .current > * {
    font-weight: 700;
}


@media screen and (min-width:25em){
    /****************************************************************************
     * Navigation Wrapper
     ****************************************************************************/
    .topbar .navigation_wrapper .menu_wrapper {padding-left: 0.5rem; padding-right: 0.5rem; }
    .footer_nav_wrapper:after {right: -0.5rem;}
}


@media screen and (min-width:31.25em){
    /****************************************************************************
     * Navigation Wrapper
     ****************************************************************************/
    .topbar .navigation_wrapper .menu_wrapper {width: 80%;}
    .topbar .navigation_wrapper:after {right: 20%;}
	
	.social_nav_wrapper .menu li.facebook { display: block; }
	.social_nav_wrapper .menu li.instagram { display: block; }
	.social_nav_wrapper .menu li.youtube { display: block; }

    .jobs_nav_wrapper .menu li { display: block; }
    .jobs_nav_wrapper .menu li.shop a {font-size: 1rem;}
	
	.topbar .logo_wrapper {
    width: 7rem; height: 7rem;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
    
}



@media screen and (min-width:40em){
    
    /****************************************************************************
     * Navigation Wrapper
     ****************************************************************************/
    .topbar .navigation_wrapper .menu_wrapper {
        padding-left: 1rem; padding-right: 1rem;
        width: 66.666%;
    }
    .topbar .navigation_wrapper:after {right: 33.333%;}    
    .footer_nav_wrapper:after {right: -1rem;}
    
}


@media screen and (min-width:50em){
    /****************************************************************************
     * Navigation Wrapper
     ****************************************************************************/
    .topbar .navigation_wrapper .menu_wrapper {
        padding-left: 2rem; padding-right: 2rem;
        width: 60%;
    }
    .topbar .navigation_wrapper:after {right: 40%;}
    
    .footer_nav_wrapper:after {right: -2rem;}
    
    
    .topbar > .row > .social_nav_wrapper,
    .topbar > .row > .jobs_nav_wrapper{
        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;
    }
    .topbar > .row > .social_nav_wrapper > *:not(:first-child):not(:last-child),
    .topbar > .row > .jobs_nav_wrapper > *:not(:first-child):not(:last-child){
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        max-width: 100%;
    }
	


    
	/****************************************************************************
     * Social Nav
     ****************************************************************************/
	.social_nav_wrapper.columns,
    .jobs_nav_wrapper.columns {
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 0px;
		-ms-flex: 1 1 0px;
		flex: 1 1 0px;
		min-width: 0;
		-webkit-box-pack:justify;
		-webkit-justify-content:space-between;
		-ms-flex-pack:justify;
		justify-content:space-between;
	}
	.social_nav_wrapper > .social_menu,
    .jobs_nav_wrapper > .jobs_menu { order: 2;}
	.social_nav_wrapper > .typo_language_switch_wrapper,
    .jobs_nav_wrapper > .typo_language_switch_wrapper { order: 1;}

    
    .jobs_nav_wrapper.columns .menu li {padding-right: 0.5rem;}
    
    /****************************************************************************
     * Language-Switch
     ****************************************************************************/
    .typo_language_switch_wrapper{
        display: inline-block;
    }
    .typo_language_switch_wrapper .typo_language_switch_nav{
        padding-left: 1.875rem
    }
    .navigation_wrapper  .typo_language_switch_wrapper{
        display: none;
    }
    
}



@media screen and (min-width:64em){
    /****************************************************************************
     * Navigation Wrapper
     ****************************************************************************/
    .topbar .navigation_wrapper .menu_wrapper {
        padding-left: 3rem; padding-right: 3rem;
        width: 40%;
    }
    .topbar .navigation_wrapper:after {right: 60%;}
    
    .footer_nav_wrapper:after {right: -3rem;}
    
    .footer_nav_wrapper:after {left: 0.9375rem;}
    
    
    /****************************************************************************
     * Social Nav
     ****************************************************************************/
	.social_nav_wrapper.columns .menu li.shop + li,
    .jobs_nav_wrapper.columns .menu li.shop + li {
        padding-left: 1rem;
    }
    .social_nav_wrapper .menu li.shop a,
    .jobs_nav_wrapper .menu li.shop a {
        padding-right: 1.875rem;
        /*font-weight: 700;font-size: 0.75rem;*/
    }

    
}

@media screen and (min-width:75em){
    /****************************************************************************
     * Navigation Wrapper
     ****************************************************************************/
    .topbar .navigation_wrapper .menu_wrapper {
        padding-left: 4rem; padding-right: 4rem;
    }
    
    .footer_nav_wrapper:after {right: -4rem;}
    .footer_nav_wrapper:before {right: -2rem;}
    
}


@media screen and (min-width:80em){
    /****************************************************************************
     * Navigation Wrapper
     ****************************************************************************/
    .topbar .navigation_wrapper .menu_wrapper {width: 33.333%;}
    
    .topbar .navigation_wrapper:after {right: 66.666%;}

}