/* ============================================================
  Mobil Navigation
============================================================ */

.main-navigation-mobile-open {
    text-decoration: none;
    position: absolute;
    top: 8rem;
    right: 6%;
    width: 40px;
    height: 36px;
    margin: -40px 0 0 -11px;
    padding: 5px;
    display: none;
    z-index: 200;
    text-indent: -9em;
    line-height: 0;
    border: solid 1px #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.main-navigation-mobile-open:after {
    content: "";
    display: block;
    height: 3px;
    margin-top: 3px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #999;
    -webkit-box-shadow: 0 7px #999, 0 15px #999;
    -moz-box-shadow: 0 7px #999, 0 15px #999;
    box-shadow: 0 7px #999, 0 15px #999
}


@media screen and (max-width: 959px) {
    .main-navigation-mobile-open {
        display: block
    }
    .main-navigation {
        display: none;
    }
    .logo .name a {
      margin: 0;
      color: #666;
      font-size: 1rem;
      font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    }
}

.main-navigation-mobile-close {
    position: absolute;
    top: 0;
    right: -17.64706%;
    display: none;
    width: 17.64706%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0 !important;
    text-indent: -99em;
    background: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
}

.is-active>.main-navigation-mobile-close {
    display: block
}

.main-navigation-mobile {
    font-family: 'OpenSans-SemiBold', Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 0.8666rem;
    letter-spacing: 0.07666rem;
    display: none;
    /*padding: 1.333rem 0 1.111rem 1.8rem;*/
    border-bottom: solid 2px #ccc;
    color: #666;
    background: #fff;
}

.navigation a.invisible,
.main-navigation-mobile a.invisible {
    display: none;
}

@media screen and (max-width: 959px) {
/*    .main-navigation-mobile {
        display: block
    }*/
}

.js .main-navigation-mobile {
    display: none
}

.main-navigation-mobile.is-enabled {
    position: absolute;
    top: 0;
    left: -85%;
    z-index: 201;
    width: 85%;
    min-height: 100%;
    -webkit-transition: left 0.2s ease-out;
    -moz-transition: left 0.2s ease-out;
    -o-transition: left 0.2s ease-out;
    transition: left 0.2s ease-out
}

@media screen and (max-width: 959px) {
    .main-navigation-mobile.is-enabled {
        display: block
    }
}

.modernizr-csstransforms3d .main-navigation-mobile.is-enabled {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition: -webkit-transform 0.2s ease-out;
    -moz-transition: -moz-transform 0.2s ease-out;
    -o-transition: -o-transform 0.2s ease-out;
    transition: transform 0.2s ease-out
}

.main-navigation-mobile.is-active {
    left: 0;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
}

.modernizr-csstransforms3d .main-navigation-mobile.is-active {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}
.main-navigation-mobile .logo {
    float: none;
    /*height: 90px;*/
    margin: 1rem 0 1rem 1.6669rem;
    /*background-image: url('../../stadtdetektive/images/Stadtdetektive-Logo-01.png');*/
    /*background-repeat: no-repeat;*/
    /*background-size: 82px 82px;*/
    /*background-position: 0 4px;*/
}
.main-navigation-mobile ul {
    display: block;
    margin: 0;
    padding: 0
}

.main-navigation-mobile ul ul {
    /*font-size: 1rem;*/
    text-transform: none;
}

.main-navigation-mobile .is-collapsed>ul {
    display: none
}

.main-navigation-mobile li {
    position: relative;
    display: block;
    /*padding: 1.1rem 0 1rem 1.666rem;*/
    border-top: solid 1px #ccc;
}
.main-navigation-mobile li.first {

}
.main-navigation-mobile li:last-child {
    border-bottom: solid 1px #ccc;
}
.main-navigation-mobile li.tour {
    /*padding: 1.1rem 0 1rem 1.666rem;*/
    background-color: #ccc;
}
.main-navigation-mobile ul li  a {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: 1.1rem 0 1rem 1.666rem;
}
/*.main-navigation-mobile span.active,*/
/*.main-navigation-mobile span.trail */
.main-navigation-mobile li.active
{
    display: block;
    border-top: 1px solid #ccc;
    border-bottom: 1px #ccc;
    /*background-color: #efefef;*/
/*    -webkit-transition: background-color 0.6s ease-out;
    -moz-transition: background-color 0.6s ease-out;
    -o-transition: background-color 0.6s ease-out;
    transition: background-color 0.6s ease-out*/
}
/*.main-navigation-mobile li:hover
.main-navigation-mobile a:hover,
.main-navigation-mobile a:focus,
.main-navigation-mobile span.active:hover,
.main-navigation-mobile span.active:focus,
.main-navigation-mobile span.trail:hover,
.main-navigation-mobile span.trail:focus 
{
    outline: none;
    color: #ccc;
    text-decoration: none;
    background-color: #efefef;
    -webkit-transition: background-color 0.2s ease-out;
    -moz-transition: background-color 0.2s ease-out;
    -o-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out
}*/

.main-navigation-mobile a.active,
.main-navigation-mobile a.trail,
.main-navigation-mobile span.active,
.main-navigation-mobile span.trail {
    /*font-weight:bold*/
}

.main-navigation-mobile a.active,
.main-navigation-mobile li.active,
.main-navigation-mobile li.active a,
.main-navigation-mobile span.active {
    /*background-color: #efefef;*/
    font-weight: 800;
    color: #000;
}

.main-navigation-mobile li li a,
.main-navigation-mobile li li span.active,
.main-navigation-mobile li li span.trail {
    padding-left: 4.333em
}

.main-navigation-mobile li li li a,
.main-navigation-mobile li li li span.active,
.main-navigation-mobile li li li span.trail {
    padding-left: 3em
}

.main-navigation-mobile li li li li a,
.main-navigation-mobile li li li li span.active,
.main-navigation-mobile li li li li span.trail {
    padding-left: 4em
}

.main-navigation-mobile li li li li li a,
.main-navigation-mobile li li li li li span.active,
.main-navigation-mobile li li li li li span.trail {
    padding-left: 5em
}

.main-navigation-mobile .main-navigation-mobile-expand {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    margin: 0;
    padding: 0.61538em 1em;
    border: solid transparent;
    /*border-width:0.23077em 0;*/
    border-width: 0;
    -webkit-box-shadow: inset 1px 0 #fff;
    -moz-box-shadow: inset 1px 0 #fff;
    box-shadow: inset 1px 0 #fff;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    outline: none;
    line-height: 0;
    color: inherit;
    text-indent: -99em;
    text-shadow: none;
    background: #eaeaea;
}

.main-navigation-mobile .main-navigation-mobile-expand:after {
    content: ">";
    font-size: 1em;
    font-weight: 800;
    padding: 1.2rem;
    text-indent: 0;
    display: inline-block;
    position: relative;
    display: block
}

/*.main-navigation-mobile .is-expanded>.main-navigation-mobile-expand:after {
    content: "\e009";
}

.main-navigation-mobile a:before {
    font: 1em/1 "Icons";
    content: "\e00b";
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    text-indent: 0;
    display: inline-block;
    position: relative;
    left: -0.44444rem;
}*/

.main-navigation-mobile .agb,
.main-navigation-mobile .datenschutz,
.main-navigation-mobile .impressum {
    font-family:  Arial, Helvetica, sans-serif;
    color: #666;
    float: left;
}

.main-navigation-mobile .datenschutz a
.main-navigation-mobile .impressum a {
    border-right: solid 1px #fff;
}

.main-navigation-mobile a.recht {
    display: block;
    padding: 0;
    margin: 1rem 0 3rem 1.6666rem;
    border-bottom: 0;
    color: inherit;
    text-decoration: underline;
    font-size: 0.8666rem;
}

.main-navigation-mobile a.recht:before {
    font: 1em/1 "Icons";
    content: "";
}

/* ============================================================
  Main Navigation
============================================================ */

#footer .navigation ul.level_1 {
    width: 100%;
    padding: 0;
    margin: 0;
}

#footer .navigation ul.level_1 li {
    margin: 1rem 0;
    text-align: center;
    width: 100%;
    float: left;
    list-style: none;
}
#footer .navigation ul.level_1 li a {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    /*text-transform: uppercase;*/
    font-size: 1rem;
    text-decoration: none;
    color: #666;
}

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


    #top.mod_navigation {
        background-color: #fff;
        height: 2.1rem;
        width: 100%;
        z-index: 200;
        display: flex;
        align-items: center;
    }

    #footer .navigation {
        background-color: transparent;
        margin: 0 auto;
        border: none;
        width: 100%;
        height: auto;
        max-width: 1200px;
    }

    #footer .navigation ul.level_1 li {
        margin: 0 auto;
    }

    .mod_navigation ul.level_1 {
        width: 100%;
        float: right;
        margin-top: 0.5rem;
    }
    #footer .navigation ul.level_1 {
        width: 39%;
        float: right;
        z-index: 10;
        position: relative;
        margin: 0;
    }
    .mod_navigation.stick a,
    .navigation ul.level_1 a {
        font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
        line-height: 1rem;
        font-size: 1rem;
        border-left: solid 1px #333;
    }
    .mod_navigation.stick li.kontakt a,
    .navigation ul.level_1 li.kontakt a {
        border-right: solid 1px #333;
    }
    .mod_navigation ul.level_1 li {
        width: auto;
        float: right;
        margin-left: 0.4666rem;
        padding: 2rem 0;
        list-style-type: none;
        position: relative;
    }
    #footer .navigation ul.level_1 li {
        width: auto;
        float: right;
        padding: 33px 0;
        list-style-type: none;
        position: relative;
    }
    .mod_navigation ul.level_1 li>a,
    .navigation ul.level_1 li>a,
    .mod_navigation ul.level_1 li>span {
        padding: 0 3.666rem 0 3.666rem;
        margin-left: 0;
    }

    .mod_navigation ul.level_1 li.last>a {
        /*padding-right: 1px;*/
    }

/*    .mod_navigation ul li a:hover {
        color: #000;
    }*/

/*    #footer .mod_navigation ul li a:hover {
        color: #000;
    }*/

    .mod_navigation a,
    .navigation a,
    .mod_navigation span {
        display: block;
        text-decoration: none;
        color: #333;
    }

    .mod_navigation a.invisible {
        display: none;
    }

    .mod_navigation .active,
    .mod_navigation .trail {
        color: #000;
        float: left;
        list-style-type: none;
        /*margin-left: 17px;*/
        position: relative;
        width: auto;
        /*padding: 11px 0;*/
    }

    .mod_navigation ul li.active a {
        color: #000;
    }

    #footer .navigation ul li.active a {
        color: #000;
    }
    
    /*### SECOND LEVEL ###*/

    .mod_navigation ul li ul.level_2 {
        margin: 0;
        padding: 0;
        width: 100%;
        min-width: 192px;
        line-height: 34px;
        top: 32px;
        /*left: -18px;*/
        z-index: 100;
        opacity: 0;
        font-size: 0.8666rem;
        visibility: hidden;
        position: absolute;
        border-top: 1px solid #fff;
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
    }

    .mod_navigation.stick ul li ul.level_2 {
        top: 4.666rem;
    }
    .mod_navigation.stick ul li ul.level_2 li.first {
        border-radius: 6px 6px 0 0;
    }
    .mod_navigation.stick ul li ul.level_2 li.last {
        border-radius: 0 0 6px 6px;
    }
    .mod_navigation ul li ul.level_2 li {
        background-color: #efefef;
        color: #000;
        display: block;
        margin: 0 0 1px 0;
        padding: 0.666rem 1rem;
        float: none;
    }
/*    .mod_navigation ul li ul.level_2 li:hover {
        background-color: #efefef;
    }*/
    .mod_navigation ul li ul.level_2 li a {
        color: #000;
        font-size: 1.123rem;
        padding: 0;
        border: 0;
    }

/*    .mod_navigation ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }*/

    .mod_navigation ul li ul li.active a {
        color: #000;
    }

/*    .mod_navigation ul li ul li:hover a {
        color: #666;
    }*/
}