#mainheader
{
    background:#fff;
    background:rgba(255,255,255,0.9);
    -webkit-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.31);
    -moz-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.31);
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.31);
    height:85px;
    left:0;
    position:fixed;
    right:0;
    top:0;
    width:100%;
    z-index:99;
}

#mainheader.open
{
    position:absolute;
}

#mainheader .container
{
    position:relative;
}

#mainheader #logo
{
    color:#62646c;
    float:left;
    position:relative;
    width:414px;
}

#mainheader #logo:hover
{
    color:#b91b1f;
    text-decoration:none;
}

#mainheader #logo img
{
    left:0;
    position:absolute;
    top:0;
}

#mainheader #logo .logotext
{
    float:left;
    font-family: 'Teko', sans-serif;
    margin:35px 0 0 87px
}

#mainheader #logo .logotext .hannedarboven
{
    float:left;
    font-size:39px;
    font-weight:600;
    line-height:39px;
}

#mainheader #logo .logotext .year
{
    float:left;
    font-size:31px;
    font-weight:300;
    line-height:31px;
    margin:5px 0 0 10px;
}

#mainheader #breadcrumb
{
    left:127px;
    position:absolute;
    top:100px;
}

#mainheader #breadcrumb a
{
    color:#87888c;
    float:left;
    font-size:16px;
    line-height:16px;
}

#mainheader #breadcrumb span
{
    color:#87888c;
    display:block;
    float:left;
    font-size:16px;
    line-height:16px;
    margin:0 7px;
}

#mainheader #mainmenuwrapper
{
    float:right;
    margin:0px; /* margin:45px 5% 0 30px;
    max-width:calc(100% - 5% - 59px - 412px - 30px);*/
}

#mainheader #mainmenuwrapper #mainmenu
{
    float:left;
    width:100%;
}

#mainheader #mainmenuwrapper #mainmenu div
{
    float:left;
    padding:0 20px 13px;
    position:relative;
}

#mainheader #mainmenuwrapper #mainmenu div .firstlevel,
.navbar-default .navbar-nav>li>a
{
    color:#62646c;
    font-family: 'Teko', sans-serif;
    font-size:24px;
    font-weight:600;
    line-height:24px;
    padding:0 3px;
    position:relative;
    text-transform:uppercase;
}

#mainheader #mainmenuwrapper #mainmenu div:hover .firstlevel,
#mainheader #mainmenuwrapper #mainmenu div.active .firstlevel
{
    text-decoration:none;
}

#mainheader #mainmenuwrapper #mainmenu div .firstlevel:before,
.navbar-default .navbar-nav>li>a:before 
{
    background:#d51e23;
    bottom:-2px;
    content:' ';
    height:3px;
    left:-3px;
    position:absolute;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
    width:calc(100% + 6px);
}

#mainheader #mainmenuwrapper #mainmenu div:hover .firstlevel:before,
#mainheader #mainmenuwrapper #mainmenu div.active .firstlevel:before,
.navbar-default .navbar-nav > li:hover > a:before,
.navbar-default .navbar-nav > li.active > a:before  
{
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#mainheader #mainmenuwrapper #mainmenu div .submenu
{
    background:#fff;
    left:50%;
    opacity:0;
    padding:0;
    position:absolute;
    top:35px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    visibility:hidden;
    width:auto;
}

#mainheader #mainmenuwrapper #mainmenu div:hover .submenu
{
    opacity:1;
    top:40px;
    visibility:visible;
}

#mainheader #mainmenuwrapper #mainmenu div .submenu div
{
    border-bottom:1px solid #e9e9e9;
    padding:10px 30px;
    width:calc(100% - 60px);
}

#mainheader #mainmenuwrapper #mainmenu div .submenu div:last-child
{
    border-bottom:0;
}

#mainheader #mainmenuwrapper #mainmenu div .submenu div .secondlevel
{
    color:#62646c;
    font-family: 'Source Sans Pro', sans-serif;
}

#mainheader #mainmenuwrapper #mainmenu div .submenu div:hover .secondlevel,
#mainheader #mainmenuwrapper #mainmenu div .submenu div.active .secondlevel
{
    color:#b91b1f;
    text-decoration:none;
}

#mainheader #mainmenuwrapper .close
{
    display:none;
}

#mainheader #languagemenu
{
    display:none;
    float:right;
    font-family: 'Teko', sans-serif;
    margin:45px 0 0;
    width:59px
}

#mainheader #languagemenu a
{
    color:#62646c;
    float:left;
}

#mainheader #languagemenu a:hover,
#mainheader #languagemenu a.active
{
    color:#b91b1f;
    text-decoration:none;
}

#mainheader #languagemenu a:first-child:before
{
    color:#62646c;
    content:'|';
    float:right;
    margin:0 5px;
}

#mainheader #mobilmenubutton
{
    display:none;
}

#mainheader #menubackground
{
    opacity:0;
    visibility:hidden;
}


@media (min-width:1252px) and (max-width:1357px)
{
    #mainheader #mainmenuwrapper #mainmenu div
    {
        padding-left:10px;
        padding-right:10px;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div .submenu div
    {
        padding-left:20px;
        padding-right:20px;
        width:calc(100% - 40px);
    }
}

@media (max-width:1251px)
{
  #mainheader #logo {width:35%;}
#mainheader #logo .logotext .hannedarboven
{
    font-size:29px;
    line-height:39px;
}

#mainheader #logo .logotext .year
{
    font-size:21px;
    line-height:31px;
}
}


@media (max-width:1170px)
{
  .navbar-default .navbar-nav li {
    padding: 0 10px 13px !important;
  }
  #mainheader #mainmenuwrapper #mainmenu div {
    padding: 0 0px 13px;
  }
}

@media (max-width:951px)
{
  .navbar-default .navbar-nav > li > a {
  font-size: 20px;
}
  
}

@media (max-width:751px)
{
    #mainheader #mainmenuwrapper
    {
   /*   display:none;  */
        left:0;
        position:absolute;
        right:0;
        top:10px;
        z-index:10;
        max-width:none;
    }
    
    #mainheader.open #mainmenuwrapper
    {
        display:block;
    }
    
    #mainheader #mainmenuwrapper #mainmenu
    {
        float:right;
     /*   margin:0 auto; */
        width:70%;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div
    {
        padding:0 0 25px;
        width:100%;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div .firstlevel:before
    {
        display:none;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div.active .firstlevel,
    #mainheader #mainmenuwrapper #mainmenu div .firstlevel:hover
    {
        color:#b91b1f;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div .submenu,
    #mainheader #mainmenuwrapper #mainmenu div:hover .submenu
    {
        background:none;
        float:left;
        height:0;
        left:auto;
        opacity:0;
        padding:0;
        position:relative;
        top:auto;
        visibility:hidden;
        width:calc(100% - 30px);
    }
    
    #mainheader #mainmenuwrapper #mainmenu div.open .submenu
    {
        opacity:1;
        visibility:visible;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div .submenu div
    {
        border:0px;
        padding:0 15px 10px;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div .submenu div.first
    {
        padding-top:15px;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div .arrow
    {
        color:#b91b1f;
        cursor:pointer;
        display:block;
        font-family:monospace;
        font-size:28px;
        line-height:20px;
        position:absolute;
        right:0;
        top:-1px;
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    
    #mainheader #mainmenuwrapper #mainmenu div.open .arrow
    {
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
    }
    
    #mainheader #mainmenuwrapper .close
    {
        cursor:pointer;
        display:block;
        height:30px;
        margin:33px 0 0 30px;
        position:absolute;
        right:16px;
        top:-120px;
        width:40px;
    }
    
    #mainheader #mainmenuwrapper .close span
    {
        background:#62646c;
        height:3px;
        left:0;
        position:absolute;
        width:100%;
    }
    
    #mainheader #mainmenuwrapper .close .leftline
    {
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    
    #mainheader #mainmenuwrapper .close .rightline
    {
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    
    #mainheader #languagemenu
    {
        float:left;
        margin-left:calc(100% - 412px - 30px - 59px - 40px);
    }
    
    #mainheader #mobilmenubutton 
    {
        cursor:pointer;
        float:right;
        display:block;
        height:30px;
        margin:33px 0 0 30px;
        position:relative;
        width:40px;
    }
    
    #mainheader #mobilmenubutton span
    {
        background:#62646c;
        height:3px;
        left:0;
        position:absolute;
        width:100%;
    }
    
    #mainheader #mobilmenubutton .midline
    {
        top:12px;
    }
    
    #mainheader #mobilmenubutton .botline
    {
        top:25px;
    }
    
    #mainheader #menubackground
    {
        background:#fff;
        background:rgba(255,255,255,0.9);
        bottom:0;
        left:0;
        position:fixed;
        right:0;
        top:0;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        z-index:9;
    }
    
    #mainheader.open #menubackground
    {
        opacity:1;
        visibility:visible;
    }


}

@media (max-width:767px)
{
    #mainheader #logo
    {
        margin-left:-20px;
        width:74px;
    }
    
    #mainheader #logo .logotext
    {
        display:none;
    }
    
    #mainheader #breadcrumb
    {
        display:none;
    }
    
    #mainheader #languagemenu
    {
        margin-left:calc(100% - 94px);
        margin-top:33px;
        width:23px;
    }
    
    #mainheader #languagemenu a.active,
    #mainheader #languagemenu a:first-child:before
    {
        display:none;
    }
    
    #mainheader #mobilmenubutton
    {
        margin-top:28px;
    }
  .navbar-nav {
  margin: 7.5px 15px;
}
}