/**
 * CBB Default Responsive Style
 *
 * 0.1.0        2014-07-15  Christian Haseloff
 *              - Implementierung
 *
 */

/*********************************************************************************************************************/

/* For Big Screen */
@media screen and (min-width: 641px) {
    #topnavi #hauptnavigation #topnav.first-level li {
        position: relative;
    }

    #topnavi #hauptnavigation #topnav.first-level li ul.second-level{
        display: none;
        position: absolute;
        left: 0;
        width: 150px;
        border: 1px solid #555;
    }

    #topnavi #hauptnavigation #topnav.first-level li:hover ul.second-level{
        display: block !important;
    }

    #topnavi #hauptnavigation #topnav.first-level li ul.second-level li{
        width: 100%;
    }
}
/* For Smartphone */

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


    #topnavi,
    #hauptnavigation ul,
    #hauptnavigation li,
    #hauptnavigation a,
    #hauptnavigation {
        margin:0 ;
        padding:0;
        float:none;
        background:grey;
        color:#000;
    }
    
    #topnavi .smartphone li {
        border-top: 1px solid #ffffff;
        width: 100%;
    }
    #topnavi .smartphone ul li.farbschema-orange {
        background-color: #d2720b;
    }
    #topnavi .smartphone ul li.farbschema-gruen {
        background-color: #7d8f07;
    }
    #topnavi .smartphone ul li.farbschema-lila {
        background-color: #7a46af;
    }
    #topnavi .smartphone ul li.farbschema-braun {
        background-color: #845305;
    }
    #topnavi .smartphone ul li.farbschema-blau {
        background-color: #364f81;
    }
    #topnavi .smartphone a, .smartphone a.active {
        color: #000000;
        display: block;
        text-decoration: none;
    }
    #topnavi .smartphone ul.first-level > li > a {
        font-weight: 600;
        margin-left: 2.5%;
        padding-bottom: 18px;
        padding-top: 23px;
        text-transform: uppercase;
        width: 75% !important;
    }
    #topnavi .smartphone ul.second-level > li {
        background: none repeat scroll 0 0 #c3cbd6;
        display: block;
        position: relative;
        z-index: 98;
    }
    #topnavi .smartphone ul.second-level > li > a {
        color: #364f81;
        margin-left: 5%;
        padding-bottom: 18px;
        padding-top: 23px;
        text-transform: uppercase;
        width: 72.5% !important;
    }
    #topnavi .smartphone ul.third-level > li {
        display: block;
        position: relative;
        z-index: 99;
    }
    #topnavi .smartphone ul.third-level > li > a {
        color: #364f81;
        margin-left: 7.5%;
        padding-bottom: 18px;
        padding-top: 23px;
        text-transform: uppercase;
        width: 70% !important;
    }
    #topnavi .smartphone ul.first-level > li > a {
        color: #ffffff;
    }
    #topnavi .smartphone ul li ul {
        display: none;
    }
    #topnavi .smartphone-script ul.first-level > li > a {
        display: block;
        margin-left: 2.5%;
    }
    #topnavi .smartphone-script ul.second-level > li > a {
        display: block;
        margin-left: 5%;
    }
    #topnavi .smartphone-script ul.third-level > li > a {
        display: block;
        margin-left: 7.5%;
    }
    #topnavi .smartphone-script span.smartphone-plus {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
        color: white;
        /*content: "+";*/
        cursor: pointer;
        display: block;
        float: right;
        font-size: 20px;
        height: 43px;
        margin-top: -66px;
        max-height: 100%;
        padding-top: 23px;
        text-align: center;
        width: 20%;
    }
    #topnavi .smartphone-script span.smartphone-minus {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
        color: white;
        /*content: "-";*/
        cursor: pointer;
        display: block;
        float: right;
        font-size: 24px;
        height: 43px;
        margin-top: -66px;
        max-height: 100%;
        padding-top: 23px;
        text-align: center;
        width: 20%;
    }
}

@media screen and (max-width: 980px) {
    body {
        overflow-x: auto;
    }
    #wrapper-content-right-left img {
        height: auto;
        max-width: 100% !important;
    }
    #container {
        max-width: 100%;
        min-width: 240px !important;
        overflow: hidden !important;
    }
}

@media screen and (max-width: 768px) {
    #container{
        background: #fff;
    }
    
    #topnavi,
    #footer,
    #wrapper-content-right-left{
        width: auto !important;
    }
    
    #wrapper-content-right-left{
        float: none;
    }
    
    #container > div {
        margin: 0 10px;
    }
    
    #content,
    #right-outer,
    #content-cleaner {
        margin: 0;
        padding: 0;
        border: 0 none;
    }
    
    #right-outer,
    #right,
    #content-cleaner,
    #content-cleaner > div {
        float: none;
        width: 100%;
    }
    
    #topnavi,
    #header {
        padding-left: 0;
        padding-right: 0;
    }
    
    .bild{

    }
}

@media screen and (max-width: 640px) {
    #container {
        background:#ffffff;
    }
    #wrapper-content-right-left {
        border: medium none !important;
        margin-top: 0;
        margin-left: 15px;
        margin-right: 15px;
    }
    #content {
        margin: 0;
        padding: 0;
    }
    #content-cleaner {
        margin: 0;
        padding: 0;
    }
    #right-outer {
        margin: 0;
        padding: 0;
    }
    #right {
        margin: 0;
        padding: 0;
    }
    #left {
        display: none;
    }
    .bild.bild-left,
    .bild.bild-right,
    .bild.bild-center{
        float: none;
        max-width: 100%;
        margin-left: 0px;
        margin-right: 10px;
    }
    
    .bild.bild-left img,
    .bild.bild-right img,
    .bild.bild-center img{
        width: 100%;
        height: auto;
    }
}

@media screen and (min-width: 981px) {
    .responsive-hide.desktop {
        display: none;
    }
}

@media screen and (max-width: 980px) {
    .responsive-hide.all-mobile {
        display: none;
    }
}

@media screen and (min-width: 769px) and (max-width: 980px) {
    .responsive-hide.tablet-wide {
        display: none;
    }
}

@media screen and (min-width: 641px) and (max-width: 768px) {
    .responsive-hide.tablet-high {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .responsive-hide.smartphone {
        display: none;
    }
}