/*
    HEADER
*/
@media only screen and (min-width: 1025px) {
    .cd-nav{
        display: none!important;
    }
}
@media only screen and (max-width: 1024px) {
    /* logo */
    #header .logo {
        float: none!important;
        margin: 11px auto;
    }
    /* default menu */
    #header .menu {
        display: none;
    }
}
@media only screen and (max-width: 420px) {
    #header .logo {
        float: right !important;
        margin: 11px;
    }
}
/*
    MOBILE MENU
*/
/*
    ipad fix
    wenn "overflow-y: auto;" & NICHT sichtbar (navigation-is-open NICHT gesetzt)
    dann rafft das der ipad nicht, und man kann auf der seite nicht mehr richtig scrollen.
    Das setzt dann immer mal aus, und man kann nicht mehr scrollen. Dann geht es mal wieder und
    dann wieder nicht. ganz strange.

    Lösung: nur "scrollbar" wenn menü eingeblendet ist
*/

.navigation-is-open .cd-nav .cd-navigation-wrapper {
    overflow-y: auto;
}

.cd-nav-trigger {
    display: none;
    position: fixed;
    z-index: 3;
    left: 15px;
    top: 15px;
    height: 54px;
    width: 54px;
    background-color: #243040;
    border-radius: 50%;
    /* image replacement */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
}
.cd-nav-trigger .cd-nav-icon {
    /* icon created in CSS */
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 22px;
    height: 2px;
    background-color: #ffffff;
}
.cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after {
    /* upper and lower lines of the menu icon */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
    -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
    transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::after {
    top: 2px;
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before {
    top: -2px;
}
.cd-nav-trigger svg {
    position: absolute;
    top: 0;
    left: 0;
}
.cd-nav-trigger circle {
    /* circle border animation */
    -webkit-transition: stroke-dashoffset 0.4s 0s;
    -moz-transition: stroke-dashoffset 0.4s 0s;
    transition: stroke-dashoffset 0.4s 0s;
}
.navigation-is-open .cd-nav-trigger {
    /* rotate trigger when navigation becomes visible */
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
    /* animate arrow --> from hamburger to arrow */
    width: 50%;
    -webkit-transition: -webkit-transform 0.5s, width 0.5s;
    -moz-transition: -moz-transform 0.5s, width 0.5s;
    transition: transform 0.5s, width 0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before {
    top: 0;
}
.navigation-is-open .cd-nav-trigger circle {
    stroke-dashoffset: 0;
    -webkit-transition: stroke-dashoffset 0.4s 0.3s;
    -moz-transition: stroke-dashoffset 0.4s 0.3s;
    transition: stroke-dashoffset 0.4s 0.3s;
}
@media only screen and (max-width: 1024px) {
    .cd-nav-trigger {
        display: block;
    }
}

.cd-nav {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4f4f4f+0,f0dea9+30,f0dea9+80,ada07a+100 */


    -webkit-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.7s, visibility 0.7s;
    -moz-transition: opacity 0.7s, visibility 0.7s;
    transition: opacity 0.7s, visibility 0.7s;


}
.cd-nav .cd-navigation-wrapper {
    box-sizing: border-box;
    /* all navigation content */
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    /*padding: 40px 5% 40px calc(5% + 80px);*/
    padding: 40px 5px 40px 80px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    transition: transform 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
    -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
    transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}
.navigation-is-open .cd-nav {
    visibility: visible;
    -webkit-opacity: 1;
    -o-opacity: 1;
    opacity: 1;


    /*
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    -moz-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
    */
}
/*
.navigation-is-open .cd-nav .cd-navigation-wrapper {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
    -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
    transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}
*/
.cd-nav h2 {
    position: relative;
    margin-bottom: 1.7em;
    font-size: 1.3rem;
    font-weight: 800;
    color: #080b0f;
    text-transform: uppercase;
}
.cd-nav h2::after {
    /* bottom separation line */
    content: '';
    position: absolute;
    left: 0;
    bottom: -20px;
    height: 1px;
    width: 60px;
    background-color: currentColor;
}
.cd-nav .cd-primary-nav {
    margin-top: 60px;
    list-style: none;
}
.cd-nav .cd-primary-nav li {
    margin: 1.6em 0;
}
.cd-nav .cd-primary-nav a {
    font-size: 2.4rem;
    color: #090909;
    text-decoration: none;
    display: inline-block;
}
.cd-nav .cd-primary-nav a:hover {
    text-decoration: underline;
}
.cd-nav .cd-primary-nav li.selected > a {
    color: #090909;
    text-decoration: underline;
}
.no-touch .cd-nav .cd-primary-nav a:hover {
    color: #090909;
}
.cd-nav .cd-contact-info {
    margin-top: 80px;
    list-style: none;
}
.cd-nav .cd-contact-info li,
.cd-nav .cd-contact-info li a{
    margin-bottom: 5px;
    line-height: 1.2;
    font-size: 14px!important;
    color: #090909;
}
.cd-nav .cd-primary-nav li ul{
	padding-bottom: 1px;
}
.cd-nav .cd-primary-nav li ul li{
	display: block;
	margin-left: 20px;
}
.cd-nav .cd-primary-nav li ul li a{
	font-size: 2rem;
}

@media only screen and (max-width: 500px) {
    .cd-half-block:nth-child(2){
        margin-left: -75px;
    }
    .cd-nav .cd-contact-info li {
        text-align: center;
    }
}
.cd-nav .cd-contact-info a {
    color: #090909;
}
.cd-nav .cd-contact-info span {
    display: block;
}
.cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
    font-size: 1.6rem;
}
/*
@media only screen and (min-width: 1170px) {
    .cd-nav .cd-navigation-wrapper {
        padding: 62px 20%;
    }
    /*
    .cd-nav .cd-navigation-wrapper::after {
        clear: both;
        content: "";
        display: table;
    }
    */
/*
    .cd-nav .cd-half-block {
        width: 50%;
        float: left;
    }
    .cd-nav .cd-primary-nav {
        margin-top: 0;
    }
    .cd-nav h2 {
        font-size: 1.5rem;
        margin-bottom: 5.6em;
    }
    .cd-nav .cd-primary-nav li {
        margin: 2em 0;
    }
    .cd-nav .cd-primary-nav a {
        font-size: 4.4rem;
    }
    .cd-nav .cd-contact-info {
        margin-top: 120px;
        text-align: right;
        list-style: none;
    }
    .cd-nav .cd-contact-info li {
        margin-bottom: 10px;
    }
    .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span {
        font-size: 2rem;
        color: #090909;
    }
}
*/
.no-js main {
    height: auto;
    overflow: visible;
}

.no-js .cd-nav {
    position: static;
    visibility: visible;
}
/*
.no-js .cd-nav .cd-navigation-wrapper {
    height: auto;
    overflow: visible;
    padding: 100px 5%;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
*/

@media (max-height: 320px) {
    .cd-nav-trigger,
    #header{
        position: absolute;
    }
    #page-content.bg_dark_light {

    }
}