body {background: url('../images/background.png');}

header {
    background: rgba(0, 0, 0, 0) url("../images/background_header.png") no-repeat fixed center center / cover ;
    height: 35rem;
    max-height: 80%;
    position: relative;
}

#logo_spanferkelbraterei {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, calc(-50% + 80px));
    -webkit-transform: translate(-50%, calc(-50% + 80px));
    -ms-transform: translate(-50%, calc(-50% + 80px));
    -moz-transform: translate(-50%, calc(-50% + 80px));
    filter: drop-shadow(0px 0px 30px rgba(0,0,0,.7))
}

  #logo-res {display: none;}
#logo-res img { width: 100%;}

@-webkit-keyframes chefkoch {
  0%   {transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0); transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
  33%   {transform: translate(-67px, -200px) rotate(7deg) translateZ(0) scale(1.0, 1.0); -webkit-transform: translate(-67px, -200px) rotate(7deg) translateZ(0) scale(1.0, 1.0);}
  66%   {transform: translate(-67px, -200px) rotate(-5deg) translateZ(0) scale(1.0, 1.0); -ms-transform: translate(-67px, -200px) rotate(-5deg) translateZ(0) scale(1.0, 1.0);}
  100% {transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0); -moz-transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
}
@-moz-keyframes chefkoch {
  0%   {transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0); transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
  33%   {transform: translate(-67px, -200px) rotate(7deg) translateZ(0) scale(1.0, 1.0); -webkit-transform: translate(-67px, -200px) rotate(7deg) translateZ(0) scale(1.0, 1.0);}
  66%   {transform: translate(-67px, -200px) rotate(-5deg) translateZ(0) scale(1.0, 1.0); -ms-transform: translate(-67px, -200px) rotate(-5deg) translateZ(0) scale(1.0, 1.0);}
  100% {transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0); -moz-transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
}
@-o-keyframes chefkoch {
  0%   {transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0); transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
  33%   {transform: translate(-67px, -200px) rotate(7deg) translateZ(0) scale(1.0, 1.0); -webkit-transform: translate(-67px, -200px) rotate(7deg) translateZ(0) scale(1.0, 1.0);}
  66%   {transform: translate(-67px, -200px) rotate(-5deg) translateZ(0) scale(1.0, 1.0); -ms-transform: translate(-67px, -200px) rotate(-5deg) translateZ(0) scale(1.0, 1.0);}
  100% {transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0); -moz-transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
}
@keyframes chefkoch {
  0%   {transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0); transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
  33%   {transform: translate(-67px, -200px) rotate(7deg) translateZ(0) scale(1.0, 1.0); -webkit-transform: translate(-67px, -200px) rotate(7deg) translateZ(0) scale(1.0, 1.0);}
  66%   {transform: translate(-67px, -200px) rotate(-5deg) translateZ(0) scale(1.0, 1.0); -ms-transform: translate(-67px, -200px) rotate(-5deg) translateZ(0) scale(1.0, 1.0);}
  100% {transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0); -moz-transform: translate(-67px, -200px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
}



.chefkoch {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 160px 252px 0;
    -webkit-transform-origin: 160px 252px 0;
    -ms-transform-origin: 160px 252px 0;
    -moz-transform-origin: 160px 252px 0;
    width: auto;
    backface-visibility: hidden;
    -webkit-animation: chefkoch 15s infinite ease-in-out; 
  -moz-animation: chefkoch 15s infinite ease-in-out; 
  -o-animation: chefkoch 15s infinite ease-in-out; 
  animation: chefkoch 15s infinite ease-in-out;
}


iframe.karte {width: 100%; height: 400px;}
.content {
    background: 
        url('../images/ornament-01.png') left 30px top 30px no-repeat, 
        url('../images/ornament-02.png') right 30px top 30px no-repeat,  
        url('../images/ornament-04.png') right 30px bottom 30px no-repeat,  
        url('../images/ornament-03.png') left 30px bottom 30px no-repeat;
    min-height: 28rem;
    padding: 7rem 0 14rem;
}

.mainnav {
    text-align: center;
    line-height: 3.5rem;
    background: rgb(30, 40, 50);
    min-width: 300px;
max-width: 400px;}

nav.mainnav {
}

nav.mainnav ul li {
    line-height: 3.5rem;
    display: block;
    width: 100%;
    position: relative;
}

nav.mainnav ul li a {
    color: #fff;
    font-size: 1.5rem;
    width: 100%;
    height: 100%;
    display: block;
    background: rgb(30, 40, 50);
    text-decoration: none;
    text-transform: uppercase;
    transition: all .4s ease;
}

nav.mainnav ul li a:hover {
    color: rgb(100, 110, 120);
}

nav.mainnav ul li::after {
    height: 1px;
    width: 50%;
    left: 25%;
    position: absolute;
    bottom: 0;
    background: #424C56;
    content: "";
    display: block;
}

nav.mainnav ul li.nav_space::after {
    line-height: 3.5rem;
    height: 3.5rem;
    width: 100%;
    background: none;
    content: "";
    display: block;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    position: static;
    background: rgb(50, 60, 70);
}

nav.mainnav ul li.phone a {
    background: rgb(50, 60, 70) url('../images/phone.png') left bottom no-repeat;
    background-size: auto 98%;
    height: 5.25rem;
    line-height: 5.25rem;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

nav.mainnav ul li a.active {font-family: 'Alex Brush', cursive; text-transform: none; font-size: 2rem;}

nav.mainnav ul li.phone::after, nav.mainnav ul li.last-of-type::after {
    display: none;
}

.footertop {background: #14191E}
.footerspacer {
    height: 10px; 
    border-top: 2px solid #14191E;
    border-bottom: 2px solid #14191E;
    background: #E6E6E6;
    position: relative
}

.footerspacer::after {
    content: url('../images/spanferkel.png');
    display: block;
    position: absolute;
    right: 0; top: -78px;
}

.footerbottom {background: #323C46}

.logo_small {max-width: 100%; padding: 0.875rem 0;}


.address p { 
    width: 250px;
    height: 300px;
    padding: 1.75rem 15px;
    position: relative;
    background: #F2F2F2; 
    color: white; 
    margin-bottom: 30px;
    color: #14191E;
} 

.address p:after { 
    content: ""; 
    position: absolute;
    left: 0; 
    bottom: 0; 
    width: 0; 
    height: 0; 
    border-bottom: 50px solid #323C46; 
    border-left: 125px solid transparent; 
    border-right: 125px solid transparent;
}

.subnav {
    vertical-align: bottom; 
    padding-bottom: 1.75rem;}

.subnav ul {
    display: block;
    width: 100%;
    display: block; 
    text-align: right; 
    padding: 0.875rem 0}

.subnav ul:first-child {
    border-bottom: 2px solid #fff
}

.subnav ul li {
    display: inline-block;
}

.subnav ul li a {
    color: #fff; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 0 15px;
    text-decoration: none;
}

.content img {
    width: 100%;
}

.navi_highlight {
    display: block;
    width: 100%;
    padding: 7rem 30px;
    position: relative;
}

.navi_highlight .highlight_img {
    position: relative;
    width: 100%;
    max-width: 380px;
}    


@-webkit-keyframes toungimate {
  0%   {transform: translate(0, 116px) rotate(20deg) translateZ(0) scale(1.0, 1.0);}
  33%   {transform: translate(0, 116px) rotate(-20deg) translateZ(0) scale(1.0, 1.0);}
  66%   {transform: translate(0, 116px) rotate(-20deg) translateZ(0) scale(1.0, 1.0);}
  100% {transform: translate(0, 116px) rotate(20deg) translateZ(0) scale(1.0, 1.0);}
}
@-moz-keyframes toungimate {
  0%   {transform: translate(0, 116px) rotate(20deg) translateZ(0) scale(1.0, 1.0);}
  33%   {transform: translate(0, 116px) rotate(-20deg) translateZ(0) scale(1.0, 1.0);}
  66%   {transform: translate(0, 116px) rotate(-20deg) translateZ(0) scale(1.0, 1.0);}
  100% {transform: translate(0, 116px) rotate(20deg) translateZ(0) scale(1.0, 1.0);}
}
@-o-keyframes toungimate {
  0%   {transform: translate(0, 116px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
  33%   {transform: translate(0, 116px) rotate(20deg) translateZ(0) scale(1.0, 1.0);}
  66%   {transform: translate(0, 116px) rotate(-20deg) translateZ(0) scale(1.0, 1.0);}
  100% {transform: translate(0, 116px) rotate(0deg) translateZ(0) scale(1.0, 1.0);}
}
@keyframes toungimate {
  0%   {transform: translate(0, 116px) rotate(20deg) translateZ(0) scale(1.0, 1.0);}
  33%   {transform: translate(0, 116px) rotate(-20deg) translateZ(0) scale(1.0, 1.0);}
  66%   {transform: translate(0, 116px) rotate(-20deg) translateZ(0) scale(1.0, 1.0);}
  100% {transform: translate(0, 116px) rotate(20deg) translateZ(0) scale(1.0, 1.0);}
}

#navcheck, label[for=navcheck] {display: none;}

.navi_highlight .tounge {
    position: absolute;
    left: calc(50% - 25px);
    top: 50%;
    transform-origin: 50% -60px;
    -webkit-animation: toungimate 5s infinite ease-in-out;
    -moz-animation: toungimate 5s infinite ease-in-out;
    -o-animation: toungimate 5s infinite ease-in-out;
    animation: toungimate 5s infinite ease-in-out;
}    


#accordion h3 {width: 100%; margin-top: 4.625rem; cursor: pointer;}

#accordion strong {padding-top: 1.75rem; display: inline-block;}

.underline div {border-bottom: 3px dotted #999}

#accordion .t_row .t_cell:nth-child(3), #accordion .t_row .t_cell:nth-child(4) {text-align: right;}

#accordion .t_row .t_cell:nth-child(1) {width: calc(100% - 250px); padding-right: 15px;}
#accordion .t_row .t_cell:nth-child(2) {width: 110px;}
#accordion .t_row .t_cell:nth-child(3) {width: 50px;}
#accordion .t_row .t_cell:nth-child(4) {width: 90px;}

#accordion .t_row:nth-child(1) {padding-top: 1.75rem;}

.gallery {
width: 100%;
    
}

.gallery img {
    width: 25%; 
    margin-left:  3%;
    margin-bottom: 30px;
    float: left;
    margin-top: 0px;
}

p + p, img + p, .twocols h3 + p, .headlines div, ul + p {
    padding-top: 0px;
}


.pfeil img {width: 4%; margin-left: 47%; margin-top: 30px;}






p.res-p, p.res-ferien {display: none;}



@media screen and (max-width: 1400px) {

    #logo_spanferkelbraterei {
        transform: translate(-50%, calc(-50% + 80px)) scale(0.8);
    }
}


@media screen and (max-width: 1200px) {

.navi_highlight .tounge {top: 47%;}    
    #logo_spanferkelbraterei {
        transform: translate(-50%, calc(-50% + 80px)) scale(0.7);
    }
    header {height: 28rem;}

}

@media screen and (max-width: 1120px) {.navi_highlight .tounge {top: 45%;}}
@media screen and (max-width: 1050px) {.navi_highlight .tounge {top: 43%;}}
@media screen and (max-width: 980px) {.navi_highlight .tounge {top: 40%;}}
@media screen and (max-width: 900px) {
    .navi_highlight .tounge {top: 45%;}
    .footerspacer::after {
        display: none;
    }
    #logo_spanferkelbraterei {
        transform: translate(-50%, calc(-50% + 80px)) scale(0.5);
    }
    header {height: 21rem;}

}

@media screen and (max-width: 850px) {.navi_highlight .tounge {top: 40%;}}

@media screen and (max-width: 768px) {
	
	

	
    #logo_spanferkelbraterei {display: none;}
    #logo-res {display: block;}
    
    
    p.res-p {display: block;}
    
    .navi_highlight {display: none;}
    .gwrap.table {display: block;}
    .content.t_cell {display: block;}
    #logo_spanferkelbraterei {
        transform: translate(-50%, calc(-50% + 80px)) scale(0.35);
    }
    header {height: 14rem;}
    nav.mainnav {
        display: block;
        position: fixed;
        overflow: hidden;
        height: 0;
        width: 100%;
        top: 0;
        left: 0;
        max-width: none;
        transition: height .5s ease;
        z-index: 6;
    }
    
    nav.mainnav ul li::after, nav.mainnav ul li.nav_space::after  {display: none}
    
    #navcheck:checked ~ nav.mainnav {
        height: 100%;
    }
    
    .phone {opacity: 0}
    
    label[for=navcheck] {
        display: block; 
        width: 30px; 
        height: 30px;
        position: absolute; 
        right: 10px; 
        top: 10px;
        z-index: 5;
    }
    
    label[for=navcheck] span, label[for=navcheck] span::before, label[for=navcheck] span::after {
        display: block; 
        width: 100%; 
        height: 3px; 
        background: #fff;
        content: ""; 
        top: 50%;
        right: 0;
        position: absolute;
        transform: translate(0, -50%);
    }
    
    label[for=navcheck] span::before {top: -6px;}
    
    label[for=navcheck] span::after {top: auto; bottom: -10px;}
    
		p.res-ferien  {display: block;}
}

@media screen and (max-width: 550px) {
	
	
	
    #accordion .t_row .t_cell:nth-child(2) {
    width: 50px;
}
 #accordion .t_row .t_cell:nth-child(1) {
    width: calc(100% - 250px);
    padding-right: 5px;
    line-height: 28px;
}
    #accordion .t_row .t_cell:nth-child(3) {
    width: 20px;
}
    #accordion .t_row .t_cell:nth-child(4) {
    width: 70px;
}
    
    .content {background: none;}
    
    #logo-res img { width: 100%; margin-top: 50px;}
}


@media screen and (max-width: 768px) {
    #logo_spanferkelbraterei {
        transform: translate(-50%, calc(-50% + 80px)) scale(0.25);
        -webkit-transform: translate(-50%, calc(-50% + 80px)) scale(0.25);
        -ms-transform: translate(-50%, calc(-50% + 80px)) scale(0.25);
        -moz-transform: translate(-50%, calc(-50% + 80px)) scale(0.25);
    }
}