/* laptop */
@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .nav.navbar-nav > li > a {
        font-size: 0.9em;
        padding: 20px 10px;
    }

}

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

    .swiper-image {
        min-height: 440px;
    }

}

/* ipad, tablet */
@media only screen and (min-width: 768px) and (max-width: 992px) {

    .search-box {
        margin-left: 25px;
    }

    .webcam-box a span {
        display: none;
    }

    ul.top-menu {
        font-size: 11px;
    }

    .nav.navbar-nav > li > a {
        font-size: .7em;
        padding: 20px 5px;
    }

    /* CK Hack */
    /*
    .text-image-block > .content-right[class*="col-"],
    .text-image-block > .content-left[class*="col-"] {
        padding-left:0;
        padding-right:0;
    }
    */

}

/* tablet, laptop, desktop */
@media only screen and (min-width: 768px) {

}

/* small devices to tabletst*/
@media only screen and (max-width: 767px) {

    .wasserstandszaehler_formular #yform-formular-gender {
        width: 50%;
    }

    .wasserstandszaehler_formular #yform-formular-readingDate .form-control {
        display: initial;
        width: auto;
    }


/*
    .container > .row > [class*="col-"],
    .container-fluid > .row > [class*="col-"] {
        margin-bottom: 0;
    }
*/

    header {
        padding: 0;
        min-height: auto;
        height: auto;
        background: #FFFFFF;

    }

    header .container.logo {
        padding-top: 0;
        min-height: auto;
    }

    .header-image-slider section.swiper-slider {
        margin-bottom: 0;
    }

    footer {
        margin-top: 35px;
    }



    .swiper-slider.first,
    .slider-single-image.first {
        top: 0;
        padding: 0;
        margin-bottom: 30px;
    }

    .swiper-content {
        position: inherit;
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
        border-left: none;
    }

    .swiper-content-inner p {
        margin-bottom: 2px;
        font-size: 80%;
    }

    .swiper-content .swiper-content-inner {
        margin: 0;
        min-width: 100%;
        max-width: 100%;
        padding: 20px 30px;
    }
    .swiper-content-inner span.spacer {
        display: none;
    }

    /*
    .text-image-block > [class*="col-"].content-right,
    .text-image-block > [class*="col-"].content-left {
        padding-right: 0;
        padding-left: 0;
        margin-bottom: 25px;
    }
    */

    .hsContent {
        max-width: none;
        position: absolute;
        left: 20%;
        top: 45%;
    }

    table.restables-origin {
        display: none;
    }

    table.restables-clone {
        display: table;
    }

    table.restables-clone tr:first-child td {
        background-color: #88b4cd;
        color: #FFF;
        font-weight: 500;

    }

    table.restables-clone tbody::before {
        content: '';
        display: block;
        height: 10px;
    }

    .table > tbody + tbody {
        border-top: none;
    }

    .searchbox {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 15px;
        padding-bottom: 15px;
        border: none;
        background: #283542;
        width: auto;
    }

    .panel img {
        margin-bottom: 15px;
    }

    .panel .panel-body > [class^="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

    .yform button {
        float: none;
        display: table;
        width: 100%;
    }


    section.last, .section.last {
        margin: 0;
    }






    /*-------------------------------*/
    /*           Wrappers            */
    /*-------------------------------*/


    #sidebar-wrapper {
        position: fixed;
        z-index: 20;
        top:0;
        right:0;
        width: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        background: #88b4cd;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    #sidebar-wrapper::-webkit-scrollbar {
        display: none;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 85%;
    }

    #page-content-wrapper {
        width: 100%;
        padding-top: 0;
    }

    #wrapper.toggled #page-content-wrapper {
        position: absolute;
        margin-right: -280px;
    }

    /*-------------------------------*/
    /*     Sidebar nav styles        */
    /*-------------------------------*/

    .sidebar-nav {
        position: absolute;
        top: 50px;
        margin: 20px 0 0 0;
        padding: 0;
        list-style: none;
    }

    .sidebar-nav li {
        position: relative;
        line-height: 20px;
        display: table;
        width: 85%;
        border-bottom: 1px solid #FFFFFF;
        margin-left:20px;
        margin-right:20px;
    }

    .sidebar-nav li:last-child {
        border-bottom: none;
    }

    .sidebar-nav li:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        height: 100%;
        width: 3px;
        -webkit-transition: width .2s ease-in;
        -moz-transition:  width .2s ease-in;
        -ms-transition:  width .2s ease-in;
        transition: width .2s ease-in;

    }
    .sidebar-nav li:first-child a {
    }

    .sidebar-nav li:hover:before,
    .sidebar-nav li.open:hover:before {
        width: 100%;
        -webkit-transition: width .2s ease-in;
        -moz-transition:  width .2s ease-in;
        -ms-transition:  width .2s ease-in;
        transition: width .2s ease-in;

    }

    .sidebar-nav li a {
        display: block;
        color: #575F65;
        text-decoration: none;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .dropdown-menu > li > a {
        background: none;
        font-weight: 400;
        color: #000000;
    }


    .sidebar-nav li a:hover,
    .sidebar-nav li a:active,
    .sidebar-nav li a:focus,
    .sidebar-nav li.open a:hover,
    .sidebar-nav li.open a:active,
    .sidebar-nav li.open a:focus{
        color: #000000;
        text-decoration: none;
        background-color: transparent;
    }

    .sidebar-nav .dropdown-menu {
        position: relative;
        width: 100%;
        padding: 0;
        margin: 0 0 15px 0;
        border-radius: 0;
        border: none;
        background-color: #222;
        box-shadow: none;
    }

    .sidebar-nav .dropdown-menu li {
        border-bottom: 1px solid #FFFFFF;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .sidebar-nav .dropdown-menu li:last-child {
        border-bottom: none;
    }

    .sidebar-nav .dropdown-menu li.active{
       background-color: #FFF;
    }

    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus {
        background: none;
    }


    .sidebar-nav .dropdown-menu li.active a {
        color: #077fc4;
        font-weight: 600;
    }

    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
        padding-left: 15px;
    }

    /*-------------------------------*/
    /*       Hamburger-Cross         */
    /*-------------------------------*/

    .hamburger {
        position: absolute;
        top: 15px;
        right: 30px;
        z-index: 999;
        display: block;
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
    }
    .hamburger:hover,
    .hamburger:focus,
    .hamburger:active {
        outline: none;
    }
    .hamburger.is-closed:before {
        content: '';
        display: block;
        width: 100px;
        font-size: 14px;
        color: #fff;
        line-height: 32px;
        text-align: center;
        opacity: 0;
        -webkit-transform: translate3d(0,0,0);
        -webkit-transition: all .35s ease-in-out;
    }

    /*
    .hamburger.is-closed:hover:before {
        opacity: 1;
        display: block;
        -webkit-transform: translate3d(-100px,0,0);
        -webkit-transition: all .35s ease-in-out;
    }
    */

    .hamburger.is-closed .hamb-top,
    .hamburger.is-closed .hamb-middle,
    .hamburger.is-closed .hamb-bottom,
    .hamburger.is-open .hamb-top,
    .hamburger.is-open .hamb-middle,
    .hamburger.is-open .hamb-bottom {
        position: absolute;
        left: 0;
        height: 2px;
        width: 100%;
    }
    .hamburger.is-closed .hamb-top,
    .hamburger.is-closed .hamb-middle,
    .hamburger.is-closed .hamb-bottom {
        background-color: #1a1a1a;
    }
    .hamburger.is-closed .hamb-top {
        top: 5px;
        -webkit-transition: all .35s ease-in-out;
    }
    .hamburger.is-closed .hamb-middle {
        top: 50%;
        margin-top: -1px;
    }
    .hamburger.is-closed .hamb-bottom {
        bottom: 5px;
        -webkit-transition: all .35s ease-in-out;
    }

    /*
    .hamburger.is-closed:hover .hamb-top {
        top: 0;
        -webkit-transition: all .35s ease-in-out;
    }
    .hamburger.is-closed:hover .hamb-bottom {
        bottom: 0;
        -webkit-transition: all .35s ease-in-out;
    }
    */
    .hamburger.is-open .hamb-top,
    .hamburger.is-open .hamb-middle,
    .hamburger.is-open .hamb-bottom {
        background-color: #FFFFFF;
    }
    .hamburger.is-open .hamb-top,
    .hamburger.is-open .hamb-bottom {
        top: 50%;
        margin-top: -2px;
    }
    .hamburger.is-open .hamb-top {
        -webkit-transform: rotate(45deg);
        -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
    }
    .hamburger.is-open .hamb-middle { display: none; }
    .hamburger.is-open .hamb-bottom {
        -webkit-transform: rotate(-45deg);
        -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
    }

    .hamburger.is-open {
        position: fixed;
        top: 20px;
    }
    .hamburger.is-open:before {
        content: '';
        display: block;
        width: 100px;
        font-size: 14px;
        color: #fff;
        line-height: 32px;
        text-align: center;
        opacity: 0;
        -webkit-transform: translate3d(0,0,0);
        -webkit-transition: all .35s ease-in-out;
    }
    /*
    .hamburger.is-open:hover:before {
        opacity: 1;
        display: block;
        -webkit-transform: translate3d(-100px,0,0);
        -webkit-transition: all .35s ease-in-out;
    }
    */

    /*-------------------------------*/
    /*            Overlay            */
    /*-------------------------------*/

    .overlay {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.75);
        z-index: 11;
    }


    /* CK Hack */
    .no-padding-l {
        padding-left: 0;
        padding-right: 0;

    }

    .public-facility-btn {
        padding: 0;

    }

    .btn.btn-pf {
        font-size: .85em;
    }

    .public-facilities-table > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .public-facility-menu .container {
        padding-left: 0;
        padding-right: 0;
    }

}

/* extra small devices */
@media only screen and (max-width: 640px) {
    .swiper-image {
        height: auto;
        max-height: 300px;
        min-height: 240px;
    }

}

/* extra small devices */
@media only screen and (max-width: 480px) {
    .bcg,
    .parallax {
        background-attachment: scroll !important;
        background-size: cover !important;
    }


    .header-logo,
    .header-logo-sub {
        display: block;
        float: none;
        width: 100%;
        min-width: 100%;
        margin-top: 10px;
    }



    header .header-logo-img,
    header .header-logo-img-sub {
        display: block;
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
        float: none;
    }

    header .header-logo-img {
        margin-bottom: 15px;
    }

}

/* xs */
@media only screen and (max-width: 360px) {

    .swiper-content-inner p {
        font-size: 85%;
        margin-bottom: 0;
    }

    .swiper-content-inner span.day,
    .swiper-content-inner span.spacer {
        width: 25px;
    }

}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
    .bcg,
    .parallax {

        background-attachment: scroll !important;
        background-size: cover !important;
    }
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
    .bcg,
    .parallax {

        background-attachment: scroll !important;
        background-size: cover !important;
    }

}