
/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {


}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {


}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {


}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {


}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {


}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

/* @media (min-width: 320px) and (max-width: 480px) { */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}

@media (max-width: 767px) {
    body { 
        font-size: 1.2em; 
        line-height: 1.4em;
    }
    h1 { 
        font-size: 2.86em; 
        line-height: 1.4em;
    } 
    h2 { 
        font-size: 2.00em; 
        line-height: 1.4em;
    } 
    h3 { 
        font-size: 1.71em; 
        line-height: 1.4em;
    } 
    h4 { 
        font-size: 1.71em; 
        line-height: 1.4em;
    } 
    h5 { 
        font-size: 1.29em; 
        line-height: 1.4em;
    } 
    h6 { 
        font-size: 1.14em; 
        line-height: 1.4em;
    } 

    .btn-nl { font-size: 1em; } 

    .separator {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .logo {
        margin: 5px 10px 5px 5px;;
        float: none;
    }

    .slogan {
        margin-top: 6px;
        margin-bottom: 4px;
    }

    .slogantext {
        font-size: 19px;
    }

    .actioncont {
        position: absolute; 
        top: 60px; 
        right: 3px; 
    }

    .siegel {
        margin-top: 20px;
        margin-right: 30px;
        position: absolute; top: 0; right: 0; 
    }

    .h1, .h2, .h3, h1, h2, h3 {
        margin-top: 10px;
        margin-bottom: 5px;
    }

    div.circleBlue { 
        font-size: 11pt; 
    }

    .logotext { 
        position: absolute;
        margin-top: 13px;
        font-size: 11px;
        color: #FFFFFF;
        z-index: 10;
        width: 200px;
    }
    .introcontainer { 
        min-height: 1px; 
    }
    .home-otw-info .nopadding img,
    .home-main-info .nopadding img { 
        position: relative; width: 100%; height: auto; left: 0; transform: none; 
    }
    .introtitel, .introfoot { position: relative; top: auto; bottom: auto; margin: 10px auto; }
    .introtitel { font-size: 16pt; }
    .introfoot { font-size: 14px; }
    .teaser { flex-direction: row; align-items: stretch;  }
    .teaser > a { flex-shrink: 0; }
    .teaser .content { flex: min-content; flex: 1; }
    footer { padding: 50px 15px 50px 15px; font-size: 14px; }
    footer img { margin-left: auto; margin-right: auto; margin-bottom: 20px; }
    .impr { text-align: center; }
    .footmnu { float: none; text-align: center; margin: 20px 0 0 0; }
    .rightCol { padding-right: 15px; }
    p.heldenp { font-size: 14pt; }

    .table-responsive > .table > thead > tr > th { white-space: normal; }
    .references { font-size: 15px; }
    .otwBanner h2, .privateBanner h2, .newsBanner h2 { line-height: 1.2em; padding-bottom: 5px; }
    .references .item a.plus span { top: 4px; }
    
    .row-flex { -webkit-flex-wrap: wrap; }

    .navcont {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .helden-home > .container { flex-direction: column; }
    .helden-home { height: auto; padding: 15px 0 0 0; }
    .melden { transform: none; }
    
    .home-row-first-middle .teasers .home-latest-news { order: 2; }
    .home-row-first-middle .teasers .rightTeaserWrap { order: 1; padding-left: 0; margin: 0 0 15px 0; height: auto; }
    .home-row-first-middle .teasers .rightTeaser { min-height: 1px; }
    .home-row-first-middle .teasers .rightTeaserWrap .photo { width: 50%; float: left; margin: 0 15px 0 0; }
    .home-row-first-middle .teasers .rightTeaserWrap .photo img { width: 100%; }
    .rightTeaser .content { left: 50%; }
}
@media (max-width: 991px) {
    .home-main-info { margin-left: 0; margin-right: 0; }
    .teasers .row { margin-left: 0; margin-right: 0; }
    .rightCol { padding-right: 15px; }
    .moreNewsContainer { margin-left: 0; margin-right: 0; }
}
@media (min-width: 768px) and (max-width: 800px) {
    .navbar-nav > li > a { padding-left: 13px; padding-right: 13px; }
}
@media (min-width: 768px) and (max-width: 919px) {
    div.circleBlue { 
        font-size: 13pt; 
    }
    .slogan { max-width: 300px; }
    .siegel { margin-top: 45px; }
    .goforzero-nav .navbar-nav>li>a { letter-spacing: 1px; }
    .imgaction { bottom: 55px; right: 50px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
    .slogantext { font-size: 22px; }
    .actioncont {
        position: absolute; 
        top: 67px; 
        right: 23px; 
    }
    div.circleBlue { font-size: 13px; }
    .siegel {
        margin-top: 20px;
        margin-right: 30px;
        position: absolute; top: 0; right: 0; 
    }
    .goforzero-nav { margin-left: -15px; margin-right: -15px; }
    .goforzero-nav + div > hr { margin-left: -15px; margin-right: -15px; }

}
@media (min-width: 990px) and (max-width: 1120px) {
    .imgaction { bottom: 55px; right: 50px; }
    .goforzero-nav .navbar-nav > li > a { letter-spacing: 1px; padding-right: 13px; padding-left: 13px; }
}
@media (min-width: 1680px) {
    .home-main-info .nopadding img { position: relative; width: 100%; height: auto; left: auto; transform: none; right: 0; }
}
@media (min-width: 768px) and (max-width: 1560px) {
    .teaser { font-size: 14px; }
    .teaser .teasertitel { font-size: 18px; line-height: 1.1em; }
}

.navbar-inverse .navbar-toggle { border: 0; }
.navbar-toggle .icon-bar { width: 25px; height: 3px; }

@media (min-width: 768px) and (max-width: 1299px) {
    .btn-nl { font-size: 12px; padding-left: 10px; }
    .btn-nl { white-space: normal; line-height: 1em; display: flex; align-items: center; }
}
@media (min-width: 1300px) and (max-width: 1499px) {
    .btn-nl { font-size: 13px; padding-left: 10px; }
}
@media (min-width: 768px) and (max-width: 1499px) {
    h1 { 
        font-size: 2.46em; 
        line-height: 1.4em;
    } 
    h2 { 
        font-size: 1.89em; 
        line-height: 1.4em;
    } 
    h3 { 
        font-size: 1.31em; 
        line-height: 1.4em;
    } 
    h4 { 
        font-size: 1.31em; 
        line-height: 1.4em;
    } 
    h5 { 
        font-size: 1.1em; 
        line-height: 1.4em;
    } 
    h6 { 
        font-size: 1em; 
        line-height: 1.4em;
    } 
    .boxTeilnahme { padding: 10px; }
    #newsletterBox { padding: 10px; }
}

@media (max-width: 991px) {
    .newsletter-top #newsletterBox { margin: 0 0 15px 0; display: flex; padding: 10px; }
    .newsletter-top #newsletterBox h2 { margin: 0 auto 0 0; padding: 0 10px 0 0; line-height: 1.1em; }
    .newsletter-top #newsletterBox h6 { display: none; }
    .newsletter-top #newsletterBox .btn-nl { margin: 0 0 0 0; flex-basis: content; max-width: 150px; }
    .home-row-first-left { display: none; }
    .berater-categ-list { display: flex; }
    .berater-categ-list .item { flex: 1; }
    .berater-categ-list .item + .item { margin-left: 15px; }
    .boxTeilnahme-right { display: flex; }
    .boxTeilnahme-right .boxTeilnahme { margin-top: 15px; padding: 10px; flex: 1; }
    .boxTeilnahme-right .boxTeilnahme + .boxTeilnahme { margin-left: 15px; }
}
@media (max-width: 359px) {
    .boxTeilnahme-right { font-size: 0.7em; }
    .boxTeilnahme-right h2 { font-size: 1.5em; }
    .btn-nl { white-space: normal; line-height: 1em; display: flex; align-items: center; }
}
@media (max-width: 419px) {
    .boxTeilnahme-right { font-size: 0.8em; }
    .otwHeaderRow h2 { font-size: 1.71em; }
}
@media (max-width: 511px) {
    .inhalt #fahnenGartnerBox img {
        max-width: 100%;
    }
    .teaser {
        word-break: break-word;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .mobilitat-news-box { display: flex; }
    .mobilitat-news-box .img img { width: 166px; max-width: 166px; }
    .mobilitat-news-box-list { flex: 1; padding: 20px; }
}
