/*============================
 mobile-nav animation
 ============================*/
.slide-in { animation: slide-in 0.25s forwards; -webkit-animation: slide-in 0.25s forwards; }
.slide-out { animation: slide-out 0.25s forwards; -webkit-animation: slide-out 0.25s forwards; }

@keyframes slide-in { 100% { transform: translateX(0%); } }
@-webkit-keyframes slide-in { 100% { -webkit-transform: translateX(0%); } }
@keyframes slide-out { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
@-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); } }

/*body.mobile-nav-open {*/
    /*overflow:hidden;*/
/*}*/

/*============================
 breadcrumbs
 ============================*/
body.mobile ul.main-breadcrumbs { display:flex; }

ul.main-breadcrumbs { display:none; background-color:#fff; width:100%; }
ul.main-breadcrumbs > li { padding: 1em 0; }
ul.main-breadcrumbs > li:first-child { padding: 1em 1em 1em 2em; text-transform: uppercase; }
ul.main-breadcrumbs > li.active > a {
    color:#8bbbd3;
}
ul.main-breadcrumbs > li > a {
    text-decoration:none;
    color: #454545;
    font-size: 0.750em;
    font-weight: bold;
    padding:10px 0;
}
ul.main-breadcrumbs > li:not(:first-child)::before {
    content: " / ";
    margin-right: 10px;
}
/* Remove the > from before the first breadcrumb */
ul.main-breadcrumbs > ul > li:first-child::before {
    content: "";
    margin-left: 0px;
}

div.menu-mobile {
    top:0;
    left:-325px;
    position:fixed;
    width:325px;
    background-color:#555555;
    height:100vh;
    overflow-y:hidden;
    overflow-x:hidden;
    z-index:1050;
    display:none;
}
body.mobile-nav-open div.menu-mobile {
    display:block;
}
div.menu-mobile-header {
    width:100%;
    height:100px;
    position:relative;
}
body.mobile-nav-open .wrapper {
    -webkit-transform: translateX(325px);
    transform: translateX(325px);
    -webkit-transform: translate3d(325px, 0, 0);
    transform: translate3d(325px, 0, 0);
}
body.mobile-nav-open div.menu-mobile,
body.mobile-nav-open div.menu-mobile.menu-mobile-right-fill {
    display:block;
}
div.menu-mobile-scroller {
    position:absolute;
    left:16px;
    left:0;
    right:0;
    bottom:0;
    top:0;
    padding-right:16px;
    overflow-x: hidden;
    overflow-y: scroll;
    height:100vh;
}
div.menu-mobile ul,
div.menu-mobile ul li {
    padding:0px;
    margin:0px;
    list-style:none;
    position:relative;
}

div.header div.menu-mobile ul.mobile-root li.active > div:first-child a,
div.header div.menu-mobile ul.mobile-root li.active > div:first-child i {
    color:#91d5f7;
}

/* mobile subs */
ul.mobile-root ul.mobile-submenu li div {
    padding-left:40px;
    background-color:rgba(0,0,0,0.08);
    border-bottom:1px solid rgba(0,0,0,0.1);
    font-size:14px;
    line-height:22px;
}

ul.mobile-root li.active > div,
ul.mobile-root ul.mobile-submenu li.active div {
    font-weight:bold;
    color: red;
}


/*ul.mobile-root ul.mobile-submenu li.active div,*/
/*ul.mobile-root ul.mobile-submenu li.active div a {*/
    /*background-color:#fff;*/
    /*color:rgba(120,165,187,1);*/
/*}*/

ul.mobile-root li div {
    padding:10px 10px 10px 25px;
    font-size:18px;
}
ul.mobile-root li i,
ul.mobile-root li div a:first-child {
    text-decoration:none;
    color:#fff;
}
ul.mobile-root li i {
    position:absolute;
    right:15px;
    display:none;
}
ul.mobile-root li.has-submenu i.inactive,
ul.mobile-root li.has-submenu div i {
    display:inline-block;
}
ul.mobile-root li.has-submenu i.active {
    display:none;
}
ul.mobile-root li.active.has-submenu i.inactive {
    display:none;
}
ul.mobile-root li.active.has-submenu i.active {
    display:inline-block;
}


/* mobile touch trigger */
div.menu-mobile-button {
    display:none;
    border:1px solid #fff;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    background-color:rgba(139,187,211,0.5);
}
.menu-mobile-button span {
    font-size:40px;
    color:#fff;
    cursor:pointer;
}
div.menu-mobile-button.open {
    position:absolute;
    top:30px;
}
.menu-mobile-button.close {
    border:1px solid #c24003;
    background-color:rgba(255,255,255,0.5);
    top:30px;
    right:8px;
    position:absolute;
}
.menu-mobile-button.close span {
    color:#c24003;
}
.menu-mobile-icon-open,
.menu-mobile-icon-close {
    vertical-align:middle;
}

/**
 * css for min widths
 */
@media only screen and (max-width: 1050px) {
    .menu-mobile-button.close { display:none; }
    .menu-mobile-button.open { display:block; }

    body.mobile-nav-open .menu-mobile-button.close { display:block; }
    body.mobile-nav-open .menu-mobile-button.open { display:none; }

    div.content .content-wrap { font-size:1em; }
    div.header div.menu { display:none; }
    div.header { max-height:180px; }
    div.header div.top img.logo { right:15px; }
    div.wrapper div.wrap-center { width:100%; margin:0px; padding:0px 8px; }
    div.wrapper div.wrap-center div.content div.banner-container div.image-container { background-size:cover; }

    div.content .banner-container.banner-container-medium,
    div.content .banner-container.banner-container-medium .image-container { max-height:250px; min-height:250px; height:250px; }

    div.footer.hamburg { background-position:bottom; }
}

@media only screen and (max-width: 768px) {
    html                                                                { background-image:url('images/background/background-t768.jpg'); }

    div.wrapper div.wrap-center                                         { width:100%; margin:0px; padding:0px; }
    div.wrapper div.wrap-center div.header                              { padding: 0 8px; }
    .box-content                                                        { padding:0 .75em 0 0; }

    .box-quote .quote-wrapper                                           { padding-left: 0.5em; }
    .box-quote .quote-sign                                              { font-size: 3.5em; }

    body.effects div.box-corners,
    body.effects div.box-top-corners,
    body.effects div.box-bottom-corners
        { border-radius:0px; }
    body.effects .box-innerspace                                        { padding: 20px 10px; }

    div.footer div.footer-menu-split ul.footer-menu-split-25 li         { display:block; width:100%; }

    .scrollup { height:50px; width:50px; bottom:35px; right:25px; }
}

@media only screen and (max-width: 800px) {

    div.box-split div.box-split-left div.box-split-inner,
    div.box-split div.box-split-right div.box-split-inner
        { padding-left:0px; padding-right:0px; }

    div.box-split div.box-split-left { display:none; }
    div.box-split div.box-split-right ul.menu-list-sub { margin-top:40px; }

    a.scrollup { bottom:35px; right:25px; }

}

@media only screen
and (min-device-width : 1px)
and (max-device-width : 319px) {
    a.scrollup { bottom:35px; right:25px; }
}

/**
 * iphone 5 / 5s
 */
@media only screen
and (min-width : 320px)
and (max-width : 568px) {
    html { background-image:url('images/background/background-t440.jpg'); }

    body.mobile-nav-open div.menu-mobile{ width:100%; }

    div.footer-wrap ul.footer-menu-split.footer-menu-split-33 > li  {width:100%;}

    div.content ul.impressum li,
    div.content.content-team ul.team-list li
        { width:48%;  }

    div.header { height:160px; }
    div.header div.top { height:85px; }
    div.header div.top img.logo { width:200px; right:2px; top:23px; }

    div.footer ul.footer-menu-split.footer-menu-split-25 li { display:block; width:100%; text-align:center; }
    div.footer ul.footer-menu-split.footer-menu-split-25 li h3 { margin-top:50px; }
    div.footer ul.footer-menu-split.footer-menu-split-25 li h3:first-child { margin-top:0px; }
    div.footer ul.footer-menu-split li.sitemap, div.footer li.rechtliches { display:none; }
    div.footer.hamburg { background-size:150%; }

    a.scrollup { bottom:35px; right:25px; }
}

/**
 * iphone 6 / 6s
 */
@media only screen
and (min-width: 375px)
and (max-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
    html { background-image:url('images/background/background-t580.jpg'); }
    div.menu-mobile.menu-mobile-right-fill { display:none; }
    div.footer.hamburg { background-size:140%; }
    .scrollup { height:50px; width:50px; bottom:25px; right:25px; }
}

@media only screen and (max-width: 480px) {
    div.wrap-center > div { margin:0px; }

    body.effects .box-corners,
    body.effects .box-top-corners
        { border-radius:0px; }
}

@media only screen and (max-width:400px) {

    div.content ul.impressum li,
    div.content.content-team ul.team-list li { width:100%; }
}