/*
Theme Name: FGR Basic Theme Menu
Theme URI: http://fgr.design/
Description: Das FGR Basic-Theme wurde eigens für FGR Kunden entwickelt. Es bedarf keinerlei zusätzliche Lizenz, jedoch darf die Gestaltung die durch die FGR vorgegeben wurde nicht verändert werden - es erlischt umgehend das Nutzungsrecht. Inhaltliche Änderungen dürfen selbstverständlich getätigt werden. Im Zweifelsfall steht die <a href="http://fgrepublik.com/">Freie Gestalterische Republik</a> jederzeit bereit, um Fragen zu beantworten.
Author: der Freien Gestalterischen Republik
Author URI: http://fgr.design/
Version: 1.3.4
License: Keine Nutzung ohne vorherige Absprache erlaubt.
License URI: license.txt
Tags: FGR, basic, Widgetfähig, Menü, Responsive
*/

/* #####################################################

1. Header 
2. Main Menu
3. Logo
4. Mobile
5. Footer Nav

################## 1. Header ##################*/

header.container-fluid {
    position: fixed;
    z-index: 111;
    left: 0;
    right: 0;
    background-color: var(--lightColor);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    box-shadow: 0px 3px 10px rgba(0,0,0,0.16);
}

header.container-fluid.nav-up {
    transform: translateY(-100px);
    pointer-events: none;
}

@media screen and (max-width:1406px) {
    header{
        right:auto;
        left:20px;
        width: calc(100% - 40px) !important;
    }
}

@media screen and (max-width:991px) {
    header.container-fluid.nav-up {
        transform: translateY(-65px);
        pointer-events: none;
    }
}

@media screen and (max-width:767px) {
    header.container-fluid{
        left:0px;
        width: calc(100% - 20px) !important;
    }
    header.container-fluid.nav-up {
        transform: translateY(-60px);
        pointer-events: none;
    }
}


header.container-fluid .row>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header.container-fluid .row {
    position: relative;
}

header .btn{
    margin-top: 0;
}

@media screen and (min-width:1200px) {
    .nav-wrap {
        flex: 0 0 calc(100% - 155px);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header.container-fluid .btn{
       min-height: 60px;
       max-height: 60px;
   }
}


@media screen and (max-width:1199px) {
    .nav-wrap {
        transform: translateY(120%);
        pointer-events: none;
        position: absolute;
        width: calc(100vw - 40px);
        top: 75px;
        left: 0px;
        height: calc(var(--unit-100vh) - 75px);
        min-height: calc(var(--unit-100vh) - 75px);
        background-image: linear-gradient(to right, var(--primaryColor), var(--secondaryColor));
        transition: 0.85s all;
        z-index: -1;
        flex-wrap: wrap;
        overflow: scroll;
        padding-bottom: 0px !important;
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }

    .nav-wrap::-webkit-scrollbar {
        display: none;
    }

    #contentwrap::after{
        transition: 1s all;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        left:0;
        top:0;
        z-index: 11;
        width: 100vw;
        height: var(--unit-100vh);
        content:"";
        background-color: var(--lightColor);
    }
    #contentwrap.menu-opened::after{
        opacity: 1;
    }

    header.container-fluid .row>div {
        min-height: 60px;
    }

    .nav-wrap.opened {
        opacity: 1;
        transform: translateY(0%);
        pointer-events: all;
    }

    header.container-fluid.nav-up {
        transform: translateY(-80px);
        pointer-events: none;
    }

    .mobile-additionals p {
        margin-bottom: 15px;
        color: var(--lightColor) !important;
    }

    .mobile-additionals a {
        color: var(--lightColor);
    }

    .mobile-additionals a:hover {
       opacity: 0.5;
    }

    .mobile-additionals {
        margin-top: 20px;
        padding: 0 20px;
    }

    .mobile-additionals li {
        display: inline-block;
        margin-right: 5px;
        margin-top: 5px;
        list-style-type: none;
    }

    .mobile-additionals li img,
    .mobile-additionals li svg{
        height: 22.5px;
        width: 22.5px;
        object-fit: contain;
    }

    .mobile-additionals li svg path{
        fill: var(--lightColor);
    }
}

@media screen and (max-width:767px) {
    .nav-wrap {
        width: calc(100vw - 20px);
        top: 70px;
        left: 10px;
        height: calc(var(--unit-100vh) - 70px);
        min-height: calc(var(--unit-100vh) - 70x);
    }
}

/*################## 2. Main Menu ##################*/

header .menu-hauptnavigation-container .menu li {
    display: inline-flex;
}

header .menu-hauptnavigation-container .menu>li {
    align-items: center;
    position: relative;
}

header .menu-hauptnavigation-container .menu a {
    font: normal 700 var(--menuFS) 'calibri', sans-serif;
    color: var(--primaryColor);
    position: relative;
}

header .menu-hauptnavigation-container .menu a:after{
    content:".";
    color: var(--ctaColor);
    transition: 0.35s all;
}

@media screen and (min-width:1200px) {
    header .menu-hauptnavigation-container .menu > li:hover > a{
        color: var(--ctaColor) !important;
    }

    header .menu-hauptnavigation-container .menu>li:after {
        content: "";
        width: 100%;
        height: calc(100% + 10px);
        position: absolute;
        left: 0;
        top: 0;
    }

    header .menu-hauptnavigation-container .menu li {
        padding: 0 8.5px;
        position: relative;
    }

    header .menu-hauptnavigation-container .menu > li:first-child{
        padding-left: 5px;
    }

    header .menu-hauptnavigation-container .menu li:last-of-type {
        padding-right: 0;
    }

    header .menu-hauptnavigation-container .menu>li {
        height: 35px;
    }

    /*Submenu*/
    header .menu-hauptnavigation-container .menu > li > ul {
        display: none;
        position: absolute;
        width: auto;
        left: 7.5px;
        background-image: linear-gradient(to right, var(--primaryColor) 0px, var(--primaryColor) 30px, var(--secondaryColor) 100%);
        padding: 5px 30px 20px 30px;
        top: 69px;
        z-index: 111;
        border-radius: var(--radius);
        border-top-left-radius: 0;
        transform: translate3d(0, 0, 0);
    }

    header .menu-hauptnavigation-container .menu > li > ul:before {
        background-image: url(../_img/speech-nav.png);
        background-size: 20px 20px;
        background-position: center center;
        content: "";
        display: block;
        height: 20px;
        left: -30px;
        position: relative;
        top: -24.5px;
        width: 20px;
    }

    header .menu-hauptnavigation-container .menu li ul li {
        padding: 0;
       width: 100%;
        border: none;
        pointer-events: none;
        margin: 5px 0 5px 0;
    }
    
    header .menu-hauptnavigation-container .menu > li:after{
        position: absolute;
        left: 0;
        content:"";
        width: 100%;
        height: 70px;
        bottom: -70px;
    }

    header .menu-hauptnavigation-container .menu li ul li a{
       color: var(--lightColor);
       white-space: nowrap;
    }

    header .menu-hauptnavigation-container .menu li ul li a:hover{
        opacity: 0.5;
    }

    header .menu-hauptnavigation-container > .menu > li:hover > a{
        color: var(--primaryColor);
    }

    header .menu-hauptnavigation-container .menu li ul li:first-of-type {
        margin-top: 0;
    }

    header .menu-hauptnavigation-container .menu li ul li::before {
        display: none;
    }

    .toggle {
        display: none;
    }
}

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

    header .menu-hauptnavigation-container .menu>li {
        height: 40px;
    }
}

@media screen and (max-width:1199px) {
    header .menu-hauptnavigation-container .menu li {
        display: flex;
        justify-content: space-between;
        margin: 12.5px 7.5px;
        padding: 0px;
        height: auto;
        position: relative;
        margin: 12.5px 0;
        flex-wrap: wrap;
    }

    header .menu-hauptnavigation-container .menu > li { 
           border-bottom: 1px solid rgba(255,255,255,0.25);
           padding: 10px 0 12.5px 0;
           margin: 0;
}

    header .menu-hauptnavigation-container .menu > li:hover > a,
    header .menu-hauptnavigation-container .menu > li:hover > a:after,
    header .menu-hauptnavigation-container .menu > li.active-partent > a,
    header .menu-hauptnavigation-container .menu > li.active-partent > a:after{
        color:rgba(255,255,255,0.5) !important;
    }

    header .menu-hauptnavigation-container .menu > li > a{
        color: var(--lightColor);
    }

    header .menu-hauptnavigation-container .menu > li > ul {
        display: none;
        padding: 5px 0;
        transition: none;
    }

    header .menu-hauptnavigation-container .menu li ul li a {
        color: var(--darkColor);
        display: inline-block;
    }

    header .menu-hauptnavigation-container .menu li ul li {
        margin: 8.5px 0;
        position: relative;
    }

    header .menu-hauptnavigation-container .menu li.btn {
        display: none;
    }

    header .menu-hauptnavigation-container .menu {
        padding: 7.5px 20px 0 20px;
    }

    .toggle {
        width: 30px;
        height: 30px;
        border-radius: 2px;
        background-color: var(--primaryColor);
        display: inline-flex;
        margin-right: 0px;
        transform: translateY(1px);
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-left: 12.5px;
    }

    .toggle:after{
        display: none;
    }

    .toggle svg {
        width: 7.5px;
        height: 7.5px;
    }

    .toggle.active svg .v-line {
        opacity: 0;
    }

    header .menu-hauptnavigation-container .menu li a:after{
        color:var(--lightColor)
    }

    header .menu-hauptnavigation-container .menu li ul {
        padding-top: 0;
        flex: 100%;
    }

    header .menu-hauptnavigation-container .menu li ul li {
        margin: 15px 0;
    }

    header .menu-hauptnavigation-container .menu > li > ul  > li {
        margin-left: 15px;
    }

    header .menu-hauptnavigation-container .menu > li > ul  > li > a:hover,
    header .menu-hauptnavigation-container .menu > li > ul  > li > ul > li > a:hover{
        color:rgba(255,255,255,0.5) !important;
    }
   
    header .menu-hauptnavigation-container .menu li ul li:last-of-type {
        margin-bottom: 0;
    }

    header .menu-hauptnavigation-container .menu li ul li a {
        color: var(--lightColor);
        font-size: 1.125rem;
    }
}

header .menu-hauptnavigation-container .menu ul li a::after{
    display: none;
}

/*third Level*/

header .menu-hauptnavigation-container .menu ul ul{
    display: block !important;
    margin-top: 2.5px;
}
header .menu-hauptnavigation-container .menu ul li{
    display: block;
    left:0;
    padding-left: 0;
}

header .menu-hauptnavigation-container .menu ul ul li a{
    color: var(--lightColor);
}

header .menu-hauptnavigation-container .menu ul ul li a{
    font-weight: 300;
}

header .menu-hauptnavigation-container .menu ul ul li a:before{
   content:"· ";}
/*################## 3. Logo ##################*/

.logo {
    height: 100px;
    margin-top: -2.5px;
    width: auto !important;
    line-height: 0;
    /*margin-left: 10px;*/
}


.logo-wrap {
    position: relative;
}

@media screen and (max-width:1199px) {
    .logo {
        height: 67.5px;
        margin-left: 10px;
    }
}

@media screen and (max-width:767px) {
    .logo {
        height: 60px;
        margin-top: 0px;
    }
}

/*################## 4. Mobile ##################*/

@media screen and (max-width:1199px) {
    body .nav-mobile-wrap {
        display: flex !important;
        align-items: center;
    }

    #navbtn {
        padding: 9.5px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primaryColor);
        border-radius: 50%;
        width: 40px;
    }

    body .nav-mobile-wrap span {
        display: none;
    }

    body .nav-mobile-wrap {
        flex-direction: row-reverse;
        margin-right: 10px;
    }
}

/*Hamburger*/

#hamburger-icon {
    width: 20px;
    height: 21px;
    position: relative;
    display: block;
    transform: translateY(3px);
    transition: 0.25s all;
}

#hamburger-icon.active{
    transform: translateY(4px);
}

@media screen and (max-width:767px) {
    #hamburger-icon {
        transform: translateY(2px);
    }
    
    #hamburger-icon.active{
        transform: translateY(3px);
    } 
}

#hamburger-icon .line {
    display: block;
    background: var(--lightColor);
    width: 20px;
    height: 2px;
    position: absolute;
    left: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

#hamburger-icon .line.line-1 {
    top: 0;
}

#hamburger-icon .line.line-2 {
    top: 6px;
}

#hamburger-icon .line.line-2:after{
    display: block;
    content:"MENÜ";
    font: normal 700 8px 'calibri', sans-serif !important;
    color:var(--lightColor);
    margin-top: 3px;
}

#hamburger-icon .line.line-3 {
    top: 12px;
}

#hamburger-icon.active .line-1 {
    transform: translateY(6px) translateX(0) rotate(45deg);
}

#hamburger-icon.active .line-2,
#hamburger-icon:not(.active) .line-3  {
    opacity: 0;
}

#hamburger-icon.active .line-3 {
    transform: translateY(-6px) translateX(0) rotate(-45deg);
}

/*################## 5. Footer Nav ##################*/

.menu-footernavigation-container {
    display: inline-block;
}
.menu-footernavigation-container .menu li {
    list-style-type: none;
    display: inline-block;
    margin-left: 20px;
}

.menu-footernavigation-container .menu>li>a {
    color: var(--lightColor);
    font: normal 300 var(--smallFS) 'calibri', sans-serif;
}

.menu-footernavigation-container .menu>li>a:hover{
    opacity: 0.5;
}

.menu-footernavigation-container .menu>li>a:after{
    content: ".";
}

#copy {
    font: normal 400 var(--smallFS) 'calibri', sans-serif;
    color: var(--lightGray);
    margin: 0 0 15px 0;
    padding: 15px 0 0 0;
    display: inline-block;
}
@media screen and (max-width:991px) {
    #copy {
margin: 0 0 10px 0;
padding: 12.5px 0 0 0;}
}

@media screen and (max-width:767px) {
    .menu-footernavigation-container .menu li {
        margin-left: 15px;
    }  
}

@media screen and (max-width:576px) {
    .menu-footernavigation-container .menu li {
        margin-left: 7.5px;
    }  
}

/*Breadcrumbs*/
.breadcrumps{
    position: absolute;
    left:0;
    right: 0;
    margin: auto;
    top:115px;
}

.admin-bar-visible.breadcrumps{
    top:147px;
}

.breadcrumps,
.breadcrumps span,
.breadcrumps a{
    font: 300 normal var(--smallFS) 'calibri', sans-serif;
    color: var(--darkGray);
    transition: 0.35s all;
}

.breadcrumps a:hover{
    color: rgb(226, 226, 226);
}

    .breadcrumps .row {
        margin-left: 0px;
        margin-right: 0px;
    }


    @media screen and (max-width:1406px) and (min-width:1087px) {
        .breadcrumps .row {
            margin-left: -10px;
            margin-right: -10px;
        }
    }
    

    @media screen and (max-width:1086px) and (min-width:768px) {
        .breadcrumps .row {
            margin-left: 0px;
            margin-right: 0px;
        }
    }

@media screen and (max-width:1199px) {
    .breadcrumps{
        top:75px;
    } 
    .admin-bar-visible.breadcrumps{
        top:110px;
    }
}

@media screen and (max-width:767px) {
    .breadcrumps{
        top:70px;
    } 
    .admin-bar-visible.breadcrumps{
        top:115px;
    }
    .breadcrumps{
        display: none;
    }
}

.home .breadcrumps{
    opacity: 0;
    pointer-events: none;
}