/*
#############################
         Media-Querys
#############################
*/

@media (max-width: 1800px) {
         #wwd .item b { font-size: 1.2em; }
         #referenzen .info { font-size: 1.8em; }
         .key_points .item .text .icon { width: 100px; height: 100px; margin: -70px auto 10px auto; background-size: 80px 80px !important; }
         .key_points .item .text { width: calc(90% - 40px); font-size: 1.1em; }
}
@media (max-width: 1600px) {
         .in { width: calc(100% - 120px); padding: 0px 60px; }
         .key_points { margin: 10px 10px; padding: 80px 30px 50px 30px; }

}
@media (max-width: 1460px) {
         #referenzen .info { font-size: 1.6em; }
         #startseite #wwd .list .item { width: calc(25% - 50px); margin: 25px 15px; padding: 10px; }
         #kundenbereich .stats { width: 100%; text-align: center; }
         #kundenbereich .stats .item { width: calc(33.3333% - 34px); margin: 5px; font-size: 0.9em; }
}

@media (max-width: 1280px) {
         h1 { font-size: 1.5em; }
         h2 { font-size: 1.3em; }
         h3 { font-size: 1.2em; }
         h4 { font-size: 1.1em; }
         h5 { font-size: 0.9em; }

         #top_bar .in { width: calc(100% - 120px); padding: 0px 60px; }
         #top_bar #navigation a:nth-child(3) { display: none; }
         #top_bar #navigation a { padding: 5px 5px; }

         #hero_banner { height: auto; background-size: 100%;  }
         #hero_banner .text { width: calc(45% - 60px); height: auto;  padding: 0px 0px 0px 30px; margin: 30px 0px 50px 30px; }
         #hero_banner h1 { font-size: 1.0em; }
         #hero_banner h2 { font-size: 1.8em; margin: 10px 0px; }

         #startseite #referenzen { margin: 0px auto 20px auto !important; }
         #startseite #referenzen .info { font-size: 1.2em; }
         #startseite #referenzen .bb .info, #startseite #referenzen .lb .info, #startseite #referenzen .mr .info { display: none; }
         #startseite #referenzen .bb .block .text, #startseite #referenzen .lb .block .text, #startseite #referenzen .mr .block .text { font-size: 2.2em; }

         #startseite #referenzen .bb .block .text { width: 100%; padding: 320px 20px 0px 20px; }
         #startseite #referenzen .bb .block { display: table-cell; width: 500px; height: 360px; }
         #startseite #referenzen #slider-referenzen-bb { margin: -320px 0px 0px 20px; }

         #referenzen_all .in a.button.big { font-size: 1.1em !important; }
         #referenzen_all h3 { margin-top: -60px; }

         .key_points .item .text .icon { width: 70px; height: 70px; margin: -60px auto 10px auto; background-size: 50px 50px !important; }
         .key_points .item .text { font-size: 1.0em; }

         #rabattsystem { background:#FFFFFF url(../images/bg_rabatt.png) center -80px no-repeat; }
         #rabattsystem .info {  width: 300px; }
         #rabattsystem .button_color.bigger { font-size: 1.0em; padding: 5px 10px 5px 10px; }
         #rabattsystem .item_box { width: calc(33.3333% - 100px); }
         #rabattsystem .item_box .item { width: calc(100% - 50px); padding: 15px; margin: 0px 10px; }
         #rabattsystem .item_box .image { background-size: 100px 100px !important; height: 100px; width: 100px; }

         #startseite .welcome h1 { font-size: 1.5em; }

         #rechner { width: 300px; }
         #rechner .h3 { font-size: 1.4em; width: calc(100% - 20px); height: 40px; padding: 20px 10px; }
         #rechner .h3 .pad { font-size: 0.4em; }
         #rechner #tabs_rechner .top .button { font-size: 0.8em; }
         #rechner #preis_kampagne { font-size: 1.2em; }

         #startseite #wwd .in .list ul { width: calc(33.33333% - 20px); margin: 20px 0px 20px 20px; }
         #startseite #wwd ul li { font-size: 0.8em; }
         #startseite #wwd .list .item { width: calc(25% - 40px); margin: 25px 10px; padding: 10px; }

         #feedback .gesamt .item { font-size: 1.6em; }
         #feedback .gesamt .item img { width: 30px; height: 30px; }

         #preise td span { font-size: 0.8em; }
         #preise td > form input[type="submit"]{ font-size: 1.0em; padding: 5px 10px; }

         #footer .box { width: calc(25% - 30px); padding: 15px; }

         /* Referenzen  */
         #referenzen_sp .item .info { float: right; width: calc(100% - 50px); margin: 50px 48px 0px 48px; }
         #referenzen_sp_items iframe {}
         #referenzen_sp_items .bg_dooh { height: 700px; background: #DFDFDF url(../../../uploads/bg_dooh_h.jpg) -100px center no-repeat; }
         #referenzen_sp_items .bg_dooh .ad_preview { width: 400px; height: 700px; }
         #referenzen_sp_items .bg_dooh iframe, #referenzen_sp_items .bg_dooh video { margin-top: 84px; }

}

@media (max-width: 1080px) {
         .in { width: calc(100% - 80px); padding: 0px 40px; }
         #top_bar .in { width: calc(100% - 60px); padding: 0px 30px; }
         .key_points { margin: 10px 10px; padding: 80px 10px 50px 10px; }

         #startseite h1 { font-size: 2.0em; margin-bottom: 25px; }
         #startseite h2 { font-size: 1.8em; margin-bottom: 25px; }
         #startseite h3 { font-size: 1.6em; margin-bottom: 25px; font-weight: 600; color: #000000; background: transparent; text-transform: none; text-align: center; }
         #startseite h4 { font-size: 1.4em; font-weight: bold; }
         #startseite .welcome h3 { display: block; font-size: 1.6em; margin-bottom: 35px; text-align: center; }
         #startseite .welcome .l { display: inline-block; width: calc(50% - 0px); }
         #startseite .welcome .r { float: none; display: inline; }
         #startseite #referenzen .bb, #slider-referenzen-bb { display: none !important; }

         #hero_banner { background-size: 90%; }
         #hero_banner .text { width: calc(50% - 40px); font-size: 0.9em; padding: 0px 0px 0px 20px; margin: 30px 0px 50px 20px; }
         #hero_banner h1 { font-size: 1.0em; }
         #hero_banner h2 { font-size: 1.7em; margin: 2px 0px; }

         .head { font-size: 1.0em; }
         .head_sub { background: #eb8a56; color: #FFFFFF; font-weight: bold; font-size: 0.8em; }
         .head2 { background: #000000; color: #FFFFFF; font-weight: bold; font-size: 1.0em; }
         .foot { font-size: 1.0em; }

         #kundenbereich .stats .item { width: calc(50% - 34px); margin: 5px; }

         #steps .item { font-size: 0.9em; width: calc(33.3333% - 36px - 25px); padding: 0px 0px 0px 15px; }
         #steps .item .count { width: 25px; padding: 5px; margin: 5px 10px 0px 5px; }
         #steps .item:nth-child(1) { width: 130px; }

         #tabs_preise .top .button { padding: 8px 5px 8px 5px; min-width: 50px; font-size: 1.0em; }
         #tabs_preise .top .button.kill { display: none; }
}

@media (max-width: 1024px) {
         #wrapper { width: 100%; }
         #top_bar.sticky { left: auto; right: auto; width: calc(100% - 0px); }
         #top_bar .in { width: calc(100% - 60px); padding: 0px 30px; }

         #top_bar #logo { width: 200px; }
         #top_bar #navigation { width: calc(100% - 350px); }
         #top_bar #header_contact [class^="button_"] { padding: 4px 8px 8px 8px; }
         #top_bar #header_contact [class^="button_"] b { display: none; }

         .key_points .item:nth-child(4) { display: none; }
         .key_points .item { width: calc(33.333333% - 1px); margin-bottom: 10px; }
         .key_points .item .text { font-size: 1.3em; }

         #startseite #wwd ul li { font-size: 1.0em; }
         #startseite #wwd .in .list ul { width: calc(50% - 40px); margin: 20px 20px 20px 20px; }
         #startseite #wwd .in .list ul:first-child { margin-left: 20px; }
         #startseite #wwd .in .list ul:last-child {  width: calc(100% - 40px);}
         #startseite #wwd .item b { font-size: 1.1em; }
         #startseite #wwd .list .item { width: calc(50% - 50px); margin: 10px 10px; padding: 10px; }
         #startseite #wwd .list .item:first-child { margin-left: 10px; }
         #startseite #wwd .list .item:last-child { margin-right: 10px; }

         #rabattsystem { background:#FFFFFF url(../images/bg_rabatt.png) left -100px no-repeat; }
         #rabattsystem .info { float:none; display: block; width: 100%; text-align: center; }
         #rabattsystem .info img { float: left; width: 80%; max-width: 270px; height: auto; margin-right: 30px; margin-top: 10px; }
         #rabattsystem .item_box { width: calc(33.3333% - 1px); }
         #rabattsystem .button_color.bigger { font-size: 1.2em; padding: 15px 20px 15px 20px; margin-bottom: 30px; margin-top: 30px; }

         #feedback .gesamt { width: calc(100% - 50px); }
         #feedback .gesamt .item img { width: 22px; height: 22px; }

         #pp_top { background-size: auto 80%; height: 400px; }
         #pp_top .text { width: 500px; font-size: 1.1em; padding-top: 20px; }

         #footer .box { float: none; width: calc(100% - 30px); padding: 15px; text-align: center; }
         #footer .box a { display: inline-block; max-width: none; width: auto; background-color: #f5f5f5; color: #7c7c7c; text-decoration: none; padding: 6px 10px; margin-right: 10px; border-top: 0px #9F9F9F dotted; }
         #socialmedia { width: 100%; height: 48px; text-align: center; }
         #socialmedia a { background-color: transparent !important; }

         #bestellvorgang .optionen a { float: left; display: block; width: calc(33.333% - 52px); padding: 20px; margin: 9px; }
         #bestellvorgang .optionen a span { font-size: 0.9em; }
         #bestellvorgang .item_block { display: block; padding: 20px 0px 20px 0px; }
         #bestellvorgang .item_block .l, #bestellvorgang .item_block .r { float: none; width: calc(100% - 20px); }
         #bestellvorgang .splash, #bestellvorgang .splash2, #bestellvorgang .splash3 { background-position: center center; background-size: 70%; }
}

@media (max-width: 860px) {
         #startseite .welcome { font-size: 0.9em; }

         .key_points { margin: 10px 10px; padding: 80px 10px 0px 10px; }
         .key_points .item { width: calc(50.0% - 1px); margin-bottom: 10px; height: 190px; }
         .key_points .item:nth-child(4) { display: block; }

         #startseite #referenzen #slider-referenzen-lb, #startseite #referenzen #slider-referenzen-lb img { width: 647px; height: 80px; }
         #preise td > form input[type="submit"]{ font-size: 0.9em; padding: 3px 6px; }
}