/*
######################################
        Media-Queries
###################################### */

@media (max-width: 1200px) {
         .in { width: calc(100% - 60px) !important; }

         #wrapper.startseite { background-size: 2200px; }

         #design_header .in { width: calc(100% - 60px) !important; }
         #design_site .no_pad { padding: 0px 20px !important; width: calc(100% - 40px) !important; }

         #design_header, #design_header .in { height: 75px; }
         #design_header .design_logo { width: 285px; height: 75px; }
         #design_header .design_header_end { width: 15px; height: 75px; background-size: auto 75px; }
         #design_header .design_menu { width: calc(100% - 285px - 15px - 65px); height: 75px; background-size: auto 75px; }
         #design_header .design_menu a { background-size: 40px, auto; line-height: 32px; margin: 22px 3px 0px 3px; padding: 0px 10px 0px 25px; font-size: 1.1em; }
         #design_header .design_login { width: 60px; height: 75px; }
         #design_header .design_login a { background-size: 40px; width: 32px; height: 32px; margin: 12px 0px 24px 0px; padding: 10px; }

         #splash_hero .splash_hero_text { width: 440px; vertical-align: top; font-size: 1.1em; padding-top: 50px !important; }
         #splash_hero .splash_hero_spacer { display: table-cell; width: 60px; }
         #splash_hero .splash_hero_image {  width: calc(100% - 60px - 440px); }

         #design_startseite .box4er .item { width: calc((100% / 4) - 50px); padding: 15px; margin: 20px 10px; }
         #design_startseite .box4er .item .wave { width: calc(100% + 30px); top: -15px; left: -15px; }
         #design_startseite .box4er .item b { font-size: 1.4em; line-height: 1.0em; margin-bottom: 10px; }

         #design_startseite .in .w50 img { width: 90%; height: auto; }
}

@media (max-width: 980px) {
         #design_header .design_menu a { background-size: 32px, auto; line-height: 32px; margin: 22px 3px 0px 3px; padding: 0px 8px 0px 20px; font-size: 1.0em; }

         #splash_hero .splash_hero_text h1 { font-size: 2.0em; }
         #splash_hero .splash_hero_text { width: 400px; vertical-align: top; font-size: 1.1em; padding-top: 20px !important; }
         #splash_hero .splash_hero_spacer { display: table-cell; width: 50px; }
         #splash_hero .splash_hero_image {  width: calc(100% - 50px - 400px); }

         #startseite .box4er .item b { font-size: 1.7em; }

         #design_site { font-size: 0.9em; }
         #design_site .design_sidebar_left, #design_site .design_sidebar_right { width: 180px; }
         #design_site .design_content { width: calc(100% - 180px - 180px - 20px); margin: 0px 10px; }

         .box { width: calc(100% - 12px); padding: 8px 6px; }
         .box_head { width: calc(100% + 0px); margin: -8px 0px 5px -6px; padding: 5px 6px 4px 6px; }

}


@media (max-width: 880px) {
         #design_header .design_logo { width: 98px; height: 75px; }
         #design_header .design_logo img.a { display: none; }
         #design_header .design_logo img.b { display: inline-block; }

         #design_header .design_menu { width: calc(100% - 98px - 15px - 65px);  }

         h1 { font-size: 1.6em; }
         h2 { font-size: 1.3em; }
         h3 { font-size: 1.2em; }
         h4 { font-size: 1.1em; }

         #design_startseite .box4er .item img { width: 100px; height: 100px; }
         #design_startseite .box4er .item { width: calc((100% / 4) - 40px); padding: 10px; margin: 20px 10px; font-size: 0.8em; }
         #design_startseite .box4er .item .wave { width: calc(100% + 20px); top: -10px; left: -10px; }

         #design_startseite .in .w50 img { width: 90%; max-width: 400px; height: auto; }
         #design_startseite .in .w50 { width: 100%; float: none; text-align: center; }
         #design_startseite .w50.f_r { padding-top: 0px; }

         #design_footer .in .f_l, #design_footer .in .f_r { display: block; width: 100%; float: none; text-align: center; }
         #design_footer .in .f_l b { margin-bottom: 20px; }

         #design_startseite .features h3 { font-size: 1.8em; }

         #design_site { font-size: 0.8em; }
}

@media (max-width: 800px) {

}