/* =====================
    Main menu + Navbar
======================== */
.bg-navbar {
    background-color: var(--bg-navbar);
}
nav {
    height: 5.429rem;
}
.navbar-brand,
.navbar-toggler-z-index {
    z-index: 1090;
}
nav,
nav .dropdown-menu,
div.mod-languages.advanced-dropdown ul {
    background-color: var(--bg-navbar);
    border: 0;
}
nav .nav-item a {
    color: #ffffff;
    padding: 0 .5rem;
    font-size: 1.25rem;
}
nav .nav-item a:hover,
nav li.nav-item.active > a {
    color: orange;
    text-decoration: none;
    background-color: transparent;
}
nav .dropdown .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 1;
    padding: 1rem;
/*    transition: .1s ease all;*/
}
nav .dropdown .dropdown-menu a {
    font-size: .85rem;
}
nav .dropdown:hover > .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
/*    transition: .1s ease all;*/
}
.navbar-brand {
    margin: 0;
    padding: 0;
}
nav .navbar-nav .dropdown-menu li {
 margin-bottom: 10px;   
}
.navbar-lang {
    padding-bottom: 3px;
    padding-left: 10px;
}
.navbar-lang .lang-block li {
    margin-bottom: 10px;
}
/* FaLang*/

div.advanced-dropdown a.langChoose img {
    border: 0;
}
div.advanced-dropdown span.caret {
    display: none;
}
div.mod-languages.advanced-dropdown ul {
    right: -4px;
}

/* =====================================
    Mobile main menu und X-Animation
======================================== */
.offcanvas {
    background-color: #000;
    background-clip: inherit;
}
.offcanvas-header {
    height: 6.429rem;
}
.offcanvas-end {
    width: 100%;
}

@media (max-width: 991px) {
    .navbar-brand {
        text-align: center;
        width: 100%;
    }
    .offcanvas-body {
        background-color: #000000;
        padding: 1rem 3rem;
    }
    nav .dropdown .dropdown-menu {
        visibility: visible;
    }
    nav .dropdown-menu {
        background-color: transparent;
    }
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

/* Hamburger animation */

.navbar-toggler {
    border: none;
    cursor: pointer;
    background: transparent;
    z-index: 1090;
}
.navbar-toggler:visited,
.navbar-toggler:focus,
.navbar-toggler:focus-within,
.navbar-toggler:active {
    border: none;
    outline: none;
}
.navbar-toggler .icon-bar {
    position: relative;
    display: block;
    background: #fff;
    width: 30px;
    height: 2px;
    margin: 5px 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all 250ms ease-in-out;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
}

/* Hambuger Animation */

.bar1Active {
    transform: translateY(3px) translateX(0) rotate(45deg);
    -webkit-transform: translateY(3px) translateX(0) rotate(45deg);
    -moz-transform: translateY(3px) translateX(0) rotate(45deg);
    -ms-transform: translateY(3px) translateX(0) rotate(45deg);
    -o-transform: translateY(3px) translateX(0) rotate(45deg);
}
.bar2Active {
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
}
.bar3Active {
    transform: translateY(-11px) translateX(0) rotate(-45deg);
    -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
    -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
    -ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
    -o-transform: translateY(-11px) translateX(0) rotate(-45deg);
}

/* =======================================================
    Submenu: Features and Tips and Tricks
========================================================== */
.subnav-menu-icons img {
    max-width: none;
/*    width: 100% !important;*/
    height: 48px !important;
}



.subnav {
    display: block;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='my-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1024 88.4' style='enable-background:new 0 0 1024 88.4;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bclip-path:url(%23SVGID_2_);fill:url(%23SVGID_3_);%7D%0A%3C/style%3E%3Cg%3E%3Cdefs%3E%3Crect id='SVGID_1_' x='0' y='0' transform='matrix(-1 -1.224647e-16 1.224647e-16 -1 1024 88.4459)' width='1024' height='88.4'/%3E%3C/defs%3E%3CclipPath id='SVGID_2_'%3E%3Cuse xlink:href='%23SVGID_1_' style='overflow:visible;'/%3E%3C/clipPath%3E%3ClinearGradient id='SVGID_3_' gradientUnits='userSpaceOnUse' x1='512' y1='348.6133' x2='512' y2='-88.4459'%3E%3Cstop offset='0.3273' style='stop-color:%23FFFFFF'/%3E%3Cstop offset='0.4361' style='stop-color:%23FCFDFE'/%3E%3Cstop offset='0.5238' style='stop-color:%23F2F9FC'/%3E%3Cstop offset='0.6042' style='stop-color:%23E1F1F9'/%3E%3Cstop offset='0.6802' style='stop-color:%23C9E5F4'/%3E%3Cstop offset='0.7531' style='stop-color:%23AAD6EE'/%3E%3Cstop offset='0.8237' style='stop-color:%2384C4E7'/%3E%3Cstop offset='0.8925' style='stop-color:%2357AFDE'/%3E%3Cstop offset='0.9581' style='stop-color:%232496D4'/%3E%3Cstop offset='1' style='stop-color:%230085CD'/%3E%3C/linearGradient%3E%3Cpath class='st0' d='M1024-88.4v437.1V10.2C863.9,47,703.9,83.9,533.2,83.9S181.3,47,0,10.2v-98.7H1024z'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat no-repeat;
/*    width: 100%;*/
    padding-top: 30px;
    padding-bottom: 75px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto    
}
.subnav .subnav-container {
    text-align: center;
}
.subnav .subnav-container ul {
    margin-bottom: 0rem;
    margin: auto;
}
.subnav .subnav-container li {
    padding: 10px;
    margin: 0 10px;
}
.subnav .subnav-btn,
.subnav .nav-item.current.active {
    background-color: rgba(255, 255, 255, .5);
}
.subnav .nav-item.current.active .image-title {
    color: var(--bs-orange);
}
.subnav .image-title {
    margin-top: 5px;
}
.subnav .subnav-btn {
    display: none;
    border-radius: 0px;
}
@media (max-width: 574.99px) {
    .subnav .subnav-container {
        max-width: 574px;
        margin: auto;
        text-align: center;
    }
    .subnav .subnav-btn {
        display: block;
        font-size: 2em;
        padding: 25px 0;
        margin-top: -1px;
        cursor: pointer;
    }
    .subnav .subnav-btn:focus {
        color: var(--bs-blue);
    }
    #subnav-menu {
        overflow: scroll;
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
        /* Firefox */
    }
    #subnav-menu::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }
}