@media (min-width:1130px)
{
    #mainheader
    {
        background:#fff;
        font-family:"din-condensed";
        height:124px;
        left:0;
        position:fixed;
        top:25px;
         transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        width:100%;
        z-index:100;
    }
    
    .scrolled #mainheader,
    #website.standard #mainheader
    {
        top:0;
    }
    
    #mainheader #logo
    {
        float:left;
        margin:20px 0;
    }
    
    #mainheader #mainmenubutton
    {
        display:none;
    }
    
    #mainheader #mainmenu
    {
        float:right;
        margin:60px 0 0;
        position:relative;
        width:810px;
    }
    
    #mainheader #mainmenu div
    {
        float:left;
    }
    
    #mainheader #mainmenu div a
    {
        color:#3d2711;
        display:block;
        font-size:24px;
        font-weight:300;
        letter-spacing:-1px;
        line-height:24px;
        padding:20px 10px;
        text-transform:uppercase;
    }
    
    #mainheader #mainmenu div a:hover
    {
        text-decoration:none;
    }
    
    #mainheader #mainmenu .menuline
    {
        background:#8a3516;
        bottom:0;
        display:block;
        height:5px;
        left:0;
        opacity:0;
        position:absolute;
        transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
    }
    
    #mainheader #mainmenu .menuline.menulinehover
    {
        background:rgba(138, 53, 22, 0.5);
    }
    
    #mainheader .contactinfo
    {
        opacity:0;
        visibility:hidden;
    }
}

@media (min-width:1780px)
{
    #mainheader .contactinfo
    {
        bottom:20px;
        opacity:1;
        position:absolute;
        right:35px;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        visibility:visible;
        width:241px;
    }
    
    #mainheader .contactinfo a
    {
        float:left;
        width:100%;
    }
}

@media (max-width:1129px)
{
    #mainheader
    {
        background:#fff;
        font-family:"din-condensed";
        height:61px;
        left:0;
        padding:20px 0;
        position:fixed;
        top:0;
        width:100%;
        z-index:100;
    }
    
    #mainheader #logo
    {
        display:block;
        float:left;
        width:150px;
    }
    
    #mainheader #mainmenubutton
    {
        cursor:pointer;
        display:block;
        float:right;
        height:22px;
        margin:20px 0 0;
        position:relative;
        width:33px;
    }
    
    #mainheader #mainmenubutton .brezel
    {
        background:url('../Images/brezel.png');
        background-size:38px;
        background-repeat:no-repeat;
        display:block;
        height:22px;
        left:-2px;
        opacity:0;
        position:absolute;
        top:-22px;
        width:38px;
        z-index:5;
    }
    
    .menuopened #mainheader #mainmenubutton .brezel
    {
        -webkit-animation: animatebrezel 0.4s;
        -moz-animation:    animatebrezel 0.4s;
        -o-animation:      animatebrezel 0.4s;
        animation:         animatebrezel 0.4s;
    }
    
    #mainheader #mainmenubutton .top,
    #mainheader #mainmenubutton .mid,
    #mainheader #mainmenubutton .bot
    {
        background:#3d2711;
        display:block;
        height:4px;
        left:0;
        position:absolute;
        width:100%;
    }
    
    #mainheader #mainmenubutton .top
    {
        top:0;
    }
    
    .menuopened #mainheader #mainmenubutton .top
    {
        -webkit-animation: animatetop 0.2s forwards;
        -moz-animation:    animatetop 0.2s forwards;
        -o-animation:      animatetop 0.2s forwards;
        animation:         animatetop 0.2s forwards;
    }
    
    #mainheader #mainmenubutton .mid
    {
        top:9px;
    }
    
    .menuopened #mainheader #mainmenubutton .mid
    {
        -webkit-animation: animatemid 1s forwards;
        -moz-animation:    animatemid 1s forwards;
        -o-animation:      animatemid 1s forwards;
        animation:         animatemid 1s forwards;
    }
    
    #mainheader #mainmenubutton .bot
    {
        top:18px;
    }
    
    .menuopened #mainheader #mainmenubutton .bot
    {
        -webkit-animation: animatebot 1s forwards;
        -moz-animation:    animatebot 1s forwards;
        -o-animation:      animatebot 1s forwards;
        animation:         animatebot 1s forwards;
    }
    
    #mainheader #mainmenu
    {
        background:#fff;
        height:calc(100vh - 181px);
        overflow-x:hidden;
        overflow-y:auto;
        padding:40px 0;
        position:fixed;
        right:-100vw;
        top:101px;
        transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -webkit-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        width:100%;
        z-index:5;
    }
    
    .menuopened #mainheader #mainmenu
    {
        right:0;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }
    
    #mainheader #mainmenu div
    {
        display:block;
        margin:0 auto;
        width:170px;
    }
    
    #mainheader #mainmenu div a
    {
        color:#3d2711;
        display:block;
        font-size:24px;
        font-weight:300;
        letter-spacing:-1px;
        line-height:24px;
        margin:0 0 20px -40px;
        opacity:0;
        padding:0 0 10px;
        position:relative;
        text-transform:uppercase;
        transition: all 0.6s ease-in-out;
        -moz-transition: all 0.6s ease-in-out;
        -webkit-transition: all 0.6s ease-in-out;
        -o-transition: all 0.6s ease-in-out;
    }
    
    #mainheader #mainmenu div:nth-child(2) a
    {
        transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -webkit-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
    }
    
    #mainheader #mainmenu div:nth-child(3) a
    {
        transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        -webkit-transition: all 0.8s ease-in-out;
        -o-transition: all 0.8s ease-in-out;
    }
    
    #mainheader #mainmenu div:nth-child(4) a
    {
        transition: all 0.9s ease-in-out;
        -moz-transition: all 0.9s ease-in-out;
        -webkit-transition: all 0.9s ease-in-out;
        -o-transition: all 0.9s ease-in-out;
    }
    
    #mainheader #mainmenu div:nth-child(5) a
    {
        transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
    }
    
    .menuopened #mainheader #mainmenu div a
    {
        margin-left:0;
        opacity:1;
    }
    
    #mainheader #mainmenu div a:after
    {
        background:#8a3516;
        bottom:0;
        content:' ';
        height:5px;
        left:0;
        position:absolute;
        transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        width:0;
    }
    
    #mainheader #mainmenu div.active a:after
    {
        width:100%;
    }
    
    #mainheader #mainmenu div a:hover
    {
        text-decoration:none;
    }
    
    #mainheader .menuline
    {
        display:none;
    }
    
    #mainheader .contactinfo
    {
        display:none;
    }
}


@-webkit-keyframes animatebrezel 
{
    0%   
    { 
        opacity:0;
        top:-22px;
    }
    50%   
    { 
        opacity:1;
        top:0;
    }
    100%   
    { 
        opacity:0;
        top:22px;
    }
}

@-moz-keyframes animatebrezel 
{
    0%   
    { 
        opacity:0;
        top:-22px;
    }
    50%   
    { 
        opacity:1;
        top:0;
    }
    100%   
    { 
        opacity:0;
        top:22px;
    }
}

@-o-keyframes animatebrezel 
{
    0%   
    { 
        opacity:0;
        top:-22px;
    }
    50%   
    { 
        opacity:1;
        top:0;
    }
    100%   
    { 
        opacity:0;
        top:22px;
    }
}

@keyframes animatebrezel 
{
    0%   
    { 
        opacity:0;
        top:-22px;
    }
    50%   
    { 
        opacity:1;
        top:0;
    }
    100%   
    { 
        opacity:0;
        top:22px;
    }
}

@-webkit-keyframes animatetop 
{
    0%   
    { 
        top:0;
    }
    100%   
    { 
        opacity:0;
        top:18px;
    }
}

@-moz-keyframes animatetop 
{
    0%   
    { 
        top:0;
    }
    100%   
    { 
        opacity:0;
        top:18px;
    }
}

@-o-keyframes animatetop 
{
    0%   
    { 
        top:0;
    }
    100%   
    { 
        opacity:0;
        top:18px;
    }
}

@keyframes animatetop 
{
    0%   
    { 
        top:0;
    }
    100%   
    { 
        opacity:0;
        top:18px;
    }
}

@-webkit-keyframes animatemid 
{
    0%   
    { 
        top:9px;
    }
    20%   
    { 
        top:18px;
    }
    50%   
    { 
        top:18px;
    }
    100%   
    { 
        top:9px;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}

@-moz-keyframes animatemid 
{
    0%   
    { 
        top:9px;
    }
    20%   
    { 
        top:18px;
    }
    50%   
    { 
        top:18px;
    }
    100%   
    { 
        top:9px;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}

@-o-keyframes animatemid 
{
    0%   
    { 
        top:9px;
    }
    20%   
    { 
        top:18px;
    }
    50%   
    { 
        top:18px;
    }
    100%   
    { 
        top:9px;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}

@keyframes animatemid 
{
    0%   
    { 
        top:9px;
    }
    20%   
    { 
        top:18px;
    }
    50%   
    { 
        top:18px;
    }
    100%   
    { 
        top:9px;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}

@-webkit-keyframes animatebot
{
    0%   
    { 
        top:18px;
    }
    20%   
    { 
        top:18px;
    }
    50%   
    { 
        top:18px;
    }
    100%   
    { 
        top:9px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
}

@-moz-keyframes animatebot 
{
    0%   
    { 
        top:18px;
    }
    20%   
    { 
        top:18px;
    }
    50%   
    { 
        top:18px;
    }
    100%   
    { 
        top:9px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
}

@-o-keyframes animatebot 
{
    0%   
    { 
        top:18px;
    }
    20%   
    { 
        top:18px;
    }
    50%   
    { 
        top:18px;
    }
    100%   
    { 
        top:9px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
}

@keyframes animatebot 
{
    0%   
    { 
        top:18px;
    }
    20%   
    { 
        top:18px;
    }
    50%   
    { 
        top:18px;
    }
    100%   
    { 
        top:9px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
}