#mainheader
{
	background:#fff;
    float:left;
    height:115px;
    position:fixed;
    width:100%;
    z-index:500;
}

#mainheader:after
{
	background:#e9ebec;
    /*background:url("../Images/headergrafik.png") top left repeat;*/
    bottom:0;
    content:'';
    opacity:0.5;
    position:absolute;
    right:0;
    top:0;
    width:100%;
    z-index:-1;
}

#mainheader #mainheaderfixed
{
    display:flex;
    height:85px;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
}

#mainheader #mainheaderfixed #logo
{
    align-items:center;
    display:flex;
    flex-basis:20%;
    padding:30px;
    width:20%;
    max-width:20%;
}

#mainheader #mainheaderfixed #logo img
{
    width:100%;
    max-width:180px;
}

#mainheader #mainheaderfixed .spacer
{
    display:none;
}

#mainheader #mainheaderfixed #carticon
{
    align-items:center;
    background:#EA002F;
    color:#fff;
    display:flex;
    flex-grow:0;
    flex-shrink:0;
    font-size:20px;
    justify-content:center;
    line-height:20px;
}

#mainheader #mainheaderfixed #carticon:hover
{
    color:#000;
    text-decoration:none;
}

#mainheader #mainheaderfixed #carticon .nr
{
    display:block;
    font-weight:700;
    margin:0 0 0 5px;
}

#mainheader #mainheaderfixed #menusearch
{
    align-items:center;
    background:#A30082;
    color:#fff;
    display:flex;
    flex-grow:0;
    flex-shrink:0;
    font-size:20px;
    height:85px;
    justify-content:center;
    line-height:20px;
    position:absolute;
    right:0;
    top:85px;
    width:80px;
}

#mainheader #mainheaderfixed #menusearch:hover
{
    color:#000;
    text-decoration:none;
}

@media (min-width:1024px)
{
    #mainheader #mainheaderfixed #mobilmenubutton
    {
        display:none;
    }
    
    #mainheader #mainheaderfixed #logo
    {
    	flex-basis:20%;
    	width:20%;
    	max-width:20%;
    }
    
    #mainheader #mainheaderfixed #mainmenu
    {
        background:#1D1E22;
        display:flex;
        flex-basis:80%;
        margin-left:auto;
        padding:20px 15px;
        width:80%;
        max-width:80%;
    }
    
    #mainheader #mainheaderfixed #mainmenu h2
    {
        display:none;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel
    {
        display:block;
        flex:1 0 auto;
        text-align:center;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .arrow
    {
        display:none;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel.logout a,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .firstlink,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .secondlink,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel .thirdlink
    {
        color:#fff;
        display:inline-block;
        font-size:18px;
        font-weight:500;
        padding:10px;
        position:relative;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel.logout a:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .firstlink:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .secondlink:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel .thirdlink:after
    {
        background-color:#EA002F;
        bottom:0;
        content:"";
        display:inline-block;
        left:0;
        position:absolute;
        top:calc(100% - 3px);
        transition:width 0.4s cubic-bezier(0.19, 1, 0.22, 1), top 0.4s cubic-bezier(1, 0, 0, 1);
        width:0%;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel.active .firstlink,
    #mainheader #mainheaderfixed #mainmenu .firstlevel:hover .firstlink,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel.active .secondlink,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel:hover .secondlink,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel.active .thirdlink,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel .thirdlink:hover
    {
        color:#EA002F;
        text-decoration:none;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel.logout:hover a:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel.active .firstlink:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .firstlink:hover:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel.active .secondlink:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .secondlink:hover:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel.active .thirdlink:after,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel .thirdlink:hover:after
    {
        transition:width 0.4s cubic-bezier(0.19, 1, 0.22, 1), top 0.4s cubic-bezier(1, 0, 0, 1);
        width:100%;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu
    {
        background:#1D1E22;
        max-height:0px;
        left:3%;
        overflow:hidden;
        position:absolute;
        right:3%;
        text-align:left;
        top:100%;
        transition:all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        visibility:hidden;
        width:94%;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel:hover .submenu
    {
        max-height:calc(100vh - 105px);
        visibility:visible;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .leftwrapper
    {
        float:left;
        padding:20px 0;
        position:relative;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .leftwrapper .secondlevel
    {
        display:block;
        float:left;
        width:100%;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .leftwrapper .secondlevel .secondlink
    {
        font-size:16px;
        margin:0 0 10px;
        text-transform:uppercase;
        max-width:300px;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .leftwrapper .secondlevel .submenu2
    {
        bottom:0;
        left:330px;
        opacity:0;
        position:absolute;
        top:20px;
        transition:all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
        visibility:hidden;
        width:calc(100% - 330px);
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .leftwrapper .secondlevel:hover .submenu2,
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .leftwrapper .secondlevel.active .submenu2
    {
        opacity:1;
        visibility:visible;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .leftwrapper .secondlevel .submenu2 .thirdlevel
    {
        float:left;
        width:100%;
    }
    
    #mainheader #mainheaderfixed #mainmenu .firstlevel .submenu .leftwrapper .secondlevel .submenu2 .thirdlevel .thirdlink
    {
        font-size:18px;
        font-weight:300;
        line-height:25px;
    }
    
    #mainheader #mainheaderfixed #carticon
    {
        width:80px;
    }
    
    #mainheader #mainheaderfixed #menusearch
    {
    	width:80px;
    }
}

@media (min-width:1024px) and (max-width:1220px)
{
    #mainheader #mainheaderfixed #mainmenu .firstlevel .firstlink
    {
        font-size:15px;
    }
    
    #mainheader #mainheaderfixed #carticon
    {
        width:80px;
    }
    
    #mainheader #mainheaderfixed #menusearch
    {
    	width:80px;
    }
}

/*@media (min-width:768px) and (max-width:1023px)
{
	#mainheader #mainheaderfixed #logo
	{
		flex-basis:10%;
        width:10%;
        max-width:10%;
	}
	
    #mainheader #mainheaderfixed .spacer
    {
        width:5%;
    }
    
    #mainheader #mainheaderfixed #mainmenu
    {
        flex-basis:85%;
        width:85%;
        max-width:85%;
    }
}*/

@media (max-width:1023px)
{
    #mainheader
    {
        height:100px;
    }
    
    #mainheader #mainheaderfixed
    {
        height:75px;
    }
    
    #mainheader #mainheaderfixed #logo
    {
        flex-basis: 50%;
        padding:0 15px;
        width: 50%;
        max-width: 50%;
    }
    
    #mainheader #mainheaderfixed .spacer
    {
    	display:block;
    	flex-grow:1;
    	flex-shrink:1;
        width:15%;
    }
    
    #mainheader #mainheaderfixed #mobilmenubutton
    {
        background:#1D1E22;
        position:relative;
        width:85px;
    }
    
    #mainheader #mainheaderfixed #mobilmenubutton span
    {
        background:#fff;
        display:block;
        height:6px;
        left:calc(50% - 17px);
        position:absolute;
        width:34px;
    }
    
    #mainheader #mainheaderfixed #mobilmenubutton .topline
    {
        top:20px;
    }
    
    #mainheader #mainheaderfixed #mobilmenubutton .midline
    {
        top:35px;
    }
    
    #mainheader #mainheaderfixed #mobilmenubutton .botline
    {
        top:50px;
    }
    
    #mainmenu
    {
        background:#1D1E22;
        bottom:0;
        left:0;
        overflow-x:hidden;
        overflow-y:auto;
        position:absolute;
        top:0;
        transform:translate3d(-100%, 0, 0);
        transition:all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        visibility:hidden;
        width:90%;
    }
    
    .menuopen #mainmenu
    {
        transform:translate3d(0%, 0, 0);
        visibility:visible;
    }
    
    .menuopen #website
    {
        transform:translate3d(90%, 0px, 0px);
    }
    
    #mainmenu h2
    {
        color:#fff;
        font-size:26px;
        font-weight:700;
        margin:25px 0 50px;
        padding:15px;
    }
    
    #mainmenu h2:after
    {
        display:none;
    }
    
    #mainmenu .firstlevel,
    #mainmenu .firstlevel .submenu .secondlevel,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel
    {
        border-top:1px solid #fff;
        float:left;
        font-size:20px;
        font-weight:300;
        line-height:40px;
        padding:5px 5px 5px 15px;
        width:100%;
    }
    
    #mainmenu .firstlevel .submenu .secondlevel.back,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel.back
    {
        border-top:0;
        font-size:16px;
        line-height:32px;
    }
    
    #mainmenu .firstlevel.last,
    #mainmenu .firstlevel .submenu .secondlevel.last,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel.last
    {
        border-bottom:1px solid #fff;
    }
    
    #mainmenu .firstlevel.active,
    #mainmenu .firstlevel .submenu .secondlevel.active,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel.active
    {
        background:#fff;
    }
    
    #mainmenu .firstlevel.logout a,
    #mainmenu .firstlevel .firstlink,
    #mainmenu .firstlevel .submenu .secondlevel .secondlink,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel .thirdlink
    {
        color:#fff;
        display:inline-block;
        max-width:calc(100% - 35px);
    }
    
    #mainmenu .firstlevel.active .firstlink,
    #mainmenu .firstlevel .submenu .secondlevel.active .secondlink,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel.active .thirdlink
    {
        color:#EA002F;
    }
    
    #mainmenu .firstlevel .firstlink:hover,
    #mainmenu .firstlevel .submenu .secondlevel .secondlink:hover,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel .thirdlink:hover
    {
        text-decoration:none;
    }
    
    #mainmenu .firstlevel .arrow,
    #mainmenu .firstlevel .submenu .secondlevel .arrow,
    #mainmenu .firstlevel .submenu .secondlevel .backarrow,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel .arrow,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel .backarrow
    {
        color:#fff;
        cursor:pointer;
        display:inline-block;
        float:right;
        text-align:center;
        width:30px;
    }
    
    #mainmenu .firstlevel.active .arrow,
    #mainmenu .firstlevel .submenu .secondlevel.active .arrow,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2 .thirdlevel.active .arrow
    {
        color:#EA002F;
    }
    
    #mainmenu .firstlevel .submenu,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2
    {
        background:#1D1E22;
        bottom:0;
        left:0;
        overflow-x:hidden;
        overflow-y:auto;
        position:absolute;
        top:0;
        transform:translate3d(-100%, 0, 0);
        transition:all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        visibility:hidden;
        width:100%;
    }
    
    #mainmenu .firstlevel .submenu.show,
    #mainmenu .firstlevel .submenu .secondlevel .submenu2.show
    {
        display:block;
        transform:translate3d(0%, 0, 0);
        visibility:visible;
    }
    
    #mainmenu .firstlevel .submenu .container
    {
        width:100%;
        max-width:none;
    }
    
    #mainheader #mainheaderfixed #carticon
    {
        width:85px;
    }
    
    #mainheader #mainheaderfixed #menusearch
    {
    	height:75px;
    	top:75px;
    	width:85px;
    }
}