/*
 * Navigation Container
 */
#header-nav{
    background-color: rgba(0,51,102,0.85);
    padding: 25px;
    height: 80px;
    position: absolute;
    left: 0;top: 0;right: 0;
    z-index: 999;
    
}

#header-nav .logo{
    text-align: center;
    overflow: visible;
    height: 0;
    margin: 0 -25px;
}
#header-nav .logo a,
#header-nav .logo img{
    display: inline-block;
    margin: 0 auto;
}


#header-nav  .oc-wrapper .logo{
    padding: 25px 0 0;
    margin: 0;
}
#header-nav .logo img{
    width:auto; height: auto;
    max-height: 30px;
}
#header-nav .logo img.porsche_holding_logo {
    max-height: 40px;
}

#header-nav.top-bar ul,
#header-nav .top-bar,
#header-nav .top-bar ul{
    background-color: transparent;
}
#header-nav a,
#header-nav a:active,
#header-nav a:visited,
#header-nav a:hover{color: #FFFFFF;}

#header-nav .oc-wrapper {
    position: fixed;
    top: 0; left: 0;
    height: 100%; width: 100%;
    background: transparent;
    z-index: 900;
}

/*
 * Navigation Toggle
 */
#header-nav .oc-toggle {
    background: transparent;
    position: relative;
    right: 0; top: 0;
    margin: 0;
    z-index: 20;
}
#header-nav .oc-wrapper .oc-toggle-wrapper {
    max-width: 1280px;
    position: relative;
    left: 0; right: 0;
    top: 0;
    height: 0;
    margin: 0 auto;
}
#header-nav .oc-wrapper .oc-toggle-wrapper .oc-toggle.menu {
    position: absolute;
    top:0px; right: 25px;
    margin: 0;
}

#header-nav .oc-wrapper .oc-toggle-wrapper .oc-toggle.menu > li{
    margin-top: 25px;
}

#header-nav .oc-toggle li {
    margin-bottom: 0;
}

#header-nav .oc-toggle li a {
    padding: 0;
    margin: 0;
    position: relative;
    right: 10px;
    top: 5px;
    right: auto;
    width: 25px;
    height: 18px;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    color: #FFFFFF;
    background-image: url("../../../assets/images/toggle-sprite.png");
    background-size: 18px 36px, contain;
    background-position: top;
    background-repeat: repeat-x;
    pointer-events: all;
    
}
#header-nav .oc-wrapper.opened .oc-toggle a {
    background-position: bottom center;
    background-repeat: no-repeat;
}

/*
 * Navigation menu
 */
#header-nav .oc-wrapper .menu-wrapper{
    position: absolute;
    left: 0; right: 0;
    width: 100%; height: 100%;
    opacity: 0; visibility: hidden;
    z-index: 10;
    overflow-y: auto;
    overflow-x: visible;
    background: #003366;
    padding-bottom: 50px;
    pointer-events: none;
}
#header-nav .oc-wrapper,
#header-nav .oc-wrapper *{
    pointer-events: none;
}
#header-nav .oc-wrapper.opened .menu-wrapper{
    opacity: 1; visibility: visible;
}
#header-nav .oc-wrapper.opened,
#header-nav .oc-wrapper.opened *{
    pointer-events: all;
}

#header-nav .oc-wrapper .menu-wrapper ul.menu {
    margin: 50px 0;
}

#header-nav .oc-wrapper .menu-wrapper ul.menu  > li{
    display: block;
    text-align: center;
    margin-top: 25px;
}
#header-nav .oc-wrapper .menu-wrapper ul.menu  li{
    margin-bottom: 0;
    display: block;
}
#header-nav .oc-wrapper .menu-wrapper ul.menu  li a{
    margin-bottom: 15px;
    display: block;
}

#header-nav .oc-wrapper .menu-wrapper ul.menu  > li > a{
    color: #FFFFFF;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 300;
}

#header-nav .oc-wrapper .menu-wrapper ul.menu  > li > ul a{
    font-size: 0.8rem;
    text-transform: none;
    font-family: 'Merriweather', sans-serif;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 1px;
}

#header-nav .oc-wrapper .menu-wrapper ul.menu  ul{
    margin:0;
}

#header-nav .oc-wrapper .menu-wrapper .menu-wrapper{
    position: relative;
    overflow-x: visible;
    overflow-y: visible;
    height: auto; width: auto;
    left: 0; top: 0; right: 0; bottom: 0;
    background: transparent;
}

/*
 * Social Navigation
 */
#header-nav .menu-social-nav-container li,
#header-nav .menu-social-nav-en-container li {
    display: inline-block;
    height: 26px;
}
#header-nav .menu-social-nav-container a,
#header-nav .menu-social-nav-en-container a {
    text-indent: -999px;
    display: block; height: 26px; width: 26px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    padding: 0;
    margin-right: 2px;
    margin-left: 2px;
    overflow: hidden;
    background-color: #FFFFFF; border-radius: 50%;
    position: relative;
    letter-spacing: 0 !important;
}
#header-nav .menu-social-nav-container li a:after,
#header-nav .menu-social-nav-en-container li a:after{
    color: #003366; font-family: FontAwesome; font-size: 1rem; height: 26px; line-height: 26px; text-indent: 0;
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; text-align: center;
}

#header-nav .menu-social-nav-container .xing a:after,
#header-nav .menu-social-nav-en-container .xing a:after { content: '\f168';  padding-left: .1em; }
#header-nav .menu-social-nav-container .youtube a:after,
#header-nav .menu-social-nav-en-container .youtube a:after { content: '\f167';  padding-left: .15em; }
#header-nav .menu-social-nav-container .linkedin a:after,
#header-nav .menu-social-nav-en-container .linkedin a:after { content: '\f0e1'; padding-left: .2em; }
#header-nav .menu-social-nav-container .facebook a:after,
#header-nav .menu-social-nav-en-container .facebook a:after { content: '\f09a';}
#header-nav .menu-social-nav-container .instagram a:after,
#header-nav .menu-social-nav-en-container .instagram a:after { content: '\f16d';}
#header-nav .menu-social-nav-container .twitter a:after,
#header-nav .menu-social-nav-en-container .twitter a:after { content: '\f099';}

#header-nav .oc-wrapper .menu-wrapper .menu-wrapper .menu-social-nav-container,
#header-nav .oc-wrapper .menu-wrapper .menu-wrapper .menu-social-nav-en-container {text-align: center;}
#header-nav .oc-wrapper .menu-wrapper .menu-wrapper .menu-social-nav-container .menu,
#header-nav .oc-wrapper .menu-wrapper .menu-wrapper .menu-social-nav-en-container .menu {margin-bottom: 0;}
#header-nav .oc-wrapper .menu-wrapper .menu-wrapper .menu-social-nav-container li,
#header-nav .oc-wrapper .menu-wrapper .menu-wrapper .menu-social-nav-en-container li {display: inline-block;}
#header-nav .oc-wrapper .menu-wrapper .menu-wrapper .menu-social-nav-container li a,
#header-nav .oc-wrapper .menu-wrapper .menu-wrapper .menu-social-nav-en-container li a{
    position: relative; background-color: #FFFFFF; border-radius: 50%;
}


/*
 * Search-Form
 */
#header-nav .search{padding:25px 0; display: block; width: 235px; margin:0 auto; left: 0; right: 0; height: 33px;}
#header-nav .search .screen-reader-text{display: none;}
#header-nav .search input{float: left; display: block; margin: 0; height: 30px; padding: 5px;}
#header-nav .search input#s,
#header-nav .search input#s-oc{width: 200px;background:transparent; border: 1px solid rgba(255,255,255,0.6); border-right: none; color: #FFFFFF;}
#header-nav .search input#searchsubmit,
#header-nav .search input#searchsubmit-oc{
    background-color:transparent;background-image: url("../../../assets/images/icon-search.png");
    background-size: 20px 20px,contain;background-position: center center;background-repeat: no-repeat;
    text-indent: -999px; width: 35px; border: 1px solid rgba(255,255,255,0.6); border-left: none;color: #FFFFFF;
}

#header-nav .top-bar-right > .search{
    padding: 0; margin-right: 20px; width: 185px;
}
#header-nav .top-bar-right > .search input#s{ width: 150px; }
/*
 * Language switch
 */
#header-nav .oc-wrapper .menu-wrapper .language-switch .menu{
    text-align: center;
    padding: 25px 0;
}
#header-nav .top-bar-right > .language-switch{
    padding: 0; margin-right: 20px;
    margin-top: 3px;
}

#header-nav .language-switch ul.menu > li,
#header-nav .oc-wrapper .menu-wrapper .language-switch ul.menu > li{
    display: inline-block; margin: 0;
    border-right: 1px solid #FFFFFF;
}
#header-nav  .language-switch ul.menu > li:last-child,
#header-nav .oc-wrapper .menu-wrapper .language-switch ul.menu > li:last-child{
    border-right: none;
}
#header-nav .language-switch ul.menu > li > a,
#header-nav .oc-wrapper .menu-wrapper .language-switch ul.menu > li > a{
    margin-bottom: 0;
    padding: 1px 0.7em 1px 0.6em;
    font-size: 1.1rem;
    font-family: 'Merriweather Sans', sans-serif;
    font-weight: 300;
}

/*
 * Footer-Info
 */
#header-nav #footerinfo a{
    text-transform: none; font-family:  'Merriweather', sans-serif; font-size: inherit; letter-spacing: 0;
}
#header-nav #footerinfo ul.menu{
    margin: 0;
}
#header-nav #footerinfo .menu-wrapper{
    position: relative; width: auto; height: auto;
    overflow-y:visible; overflow-x: visible;
    padding-bottom: 0;
    background: transparent;
}



@media screen and (min-width: 64em) {
    #header-nav .logo img{
        width:auto; height: auto;
        max-height: 40px;
        margin-top: -5px;
    }
    #header-nav .logo img.porsche_holding_logo {
        max-height: 50px;
    }
    #header-nav .oc-wrapper .oc-toggle-wrapper .oc-toggle.menu > li{
        margin-top: 20px;
    }
}