/*
///////////////////////////////////
        Media-Querys
///////////////////////////////////
*/
@media (max-width: 1200px) {
         #header { width: calc(100% - 0px); }
         #header .in { width: calc(100% - 0px); padding: 0px 0px; }
         #eyecatcher { background-size: 140%; }

         #suche_studium { width: calc(100% - 100px); margin: -50px 50px 0px 50px; }

         #go2top { opacity: 0.5; filter: alpha(opacity=50); }
         #go2top:hover { opacity: 1.0; filter: alpha(opacity=100); }

         /* Startseite */
         #startseite #stats .item { width: calc(25% - 120px); background-size: 80px !important; height: 100px; margin: 10px; padding-left: 100px; padding-top: 20px; font-size: 2.0em; }
         #startseite h1 { font-size: 2.0em; }
         #startseite h2 { font-size: 1.5em; }

         #startseite #lists { float:left; width: calc(100% - 300px); }
         #startseite #right { float:right; width: 280px; }
         #startseite #right #studienkatalog form { width: calc(100% - 40px); }
         #startseite #right #studienkatalog form input { width: calc(100% - 0px); margin: 5px 0px; padding: 8px 10px 8px 40px; }


}

@media (max-width: 1030px) {
         .in { width: calc(100% - 40px); padding: 0px 20px; }

         #sidebar { width: 200px; background-image: none; background-color: rgba(0,0,0,0.05); padding: 10px 20px 10px 20px; overflow:hidden; }
         #content { width: calc(100% - 260px); }
         #sidebar .abreak { display: none; overflow:hidden; }
         #sidebar .abreak-small { display: block; width: 100%; text-align: center; overflow:hidden; }

         #suche_studium { padding: 15px 25px; width: calc(100% - 150px); height: auto; }
         #suche_studium form { width: calc(100% - 0px); margin: 0px auto; }
         #suche_studium form input[type="text"], #suche_studium form select { width: calc(50% - 35px); }
         #suche_studium form input[type="submit"] { width: 44px; background-position: 10px center; font-size: 0px; color: transparent; }

         #startseite #anbieter .item { width: calc(33.3333% - 20px); }
         #startseite #anbieter .item_info { width: calc(33.3333% - 20px); margin-left: calc(-33.3333% + 10px); }
         #startseite #anbieter .item:nth-child(8) { display: none; }
         #startseite h1 { font-size: 1.8em; }
         #startseite h2 { font-size: 1.4em; }
}

@media (max-width: 960px) {
         nav { display: block; }
         #logo { margin: 0px 0px 0px 0px; }
         #suche_form { left: 10%;width: 80%; }
         #headermenu { display: none; }
         #header_cats a { font-size: 0.8em !important; }
         #eyecatcher { background-image: url(../images/header_eyecatcher_mobile.jpg); height: 28vw; background-size: 100%; }

         #startseite h1 { font-size: 1.6em; }
         #startseite h2 { font-size: 1.2em; }
         #startseite h3 { font-size: 1.4em; }

         #startseite #stats { display: table; margin-top: 20px; }
         #startseite #stats .item { display: table-cell; background-position: top center !important; background-size: 80px !important; height: auto; padding-left: 0px; padding-top: 100px; text-align: center; font-size: 2.2em; }
         #startseite #stats .item span { display: block; font-size: 0.6em; margin-top: 10px; }

         #startseite #lists { float:left; width: calc(100% - 260px); }
         #startseite #right { float:right; width: 240px; }
}

/*
#####################################
         Break zu Tablet
#####################################
*/

@media (max-width: 800px) {
         .in.kill { width: 100%; padding: 0px; }

         #top_bar .rechts { float:none; width: 100%; text-align: center; }
         #top_bar #socialmedia { display: none; }
         #top_bar .rechts a:link, #top_bar .rechts  a:visited { display: inline-block; font-size: 0.8em; padding: 5px 10px !important; margin: 8px 5px !important; background: rgba(0,0,0,0.1); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
         #top_bar .rechts  a:hover { color: #179660; background: rgba(255,255,255,0.8); }

         nav { margin-top: 10px; }
         #logo { font-size: 2.8em; }
         #logo a { padding: 10px 0px 10px 80px; background-size: 80px; height: 60px; }
         #header_icons { margin-top: 20px; }
         #header_cats a { font-size: 0.7em !important; }

         #suche_studium form input[type="text"], #suche_studium form select { padding: 0px 10px 0px 10px; margin: 0px 0px 0px 0px; width: calc(100% - 100px); height: 35px; }
         #suche_studium form input[type="text"]  { margin: 0px 0px 10px 0px; }
         #suche_studium form input[type="submit"] { background-position: center center; width: 80px; height: 80px; }

         #sidebar, #content, #content_big { float: none; width: calc(100% - 40px); padding: 20px 20px 20px 20px; }
         #sidebar { width: calc(100% - 40px); margin-left: -20px; padding: 20px 40px 20px 40px; background: #eeeeee; background: -moz-linear-gradient(top,  #eeeeee 0%, #FFFFFF 100%); background: -webkit-linear-gradient(top,  #eeeeee 0%,#FFFFFF 100%); background: linear-gradient(to bottom,  #eeeeee 0%,#FFFFFF 100%); -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.3); box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.3); }
         #sidebar .abreak { display: block; }
         #sidebar .abreak-small { display: none; }
         #sidebar #anbieter .item { float: left; width: calc(33.33334% - 10px); margin: 5px 5px; }

         /* Footer */
         #footer { width: calc(100% - 5px); margin: 0px 0px 0px 0px; padding: 0px 5px 0px 0px; background: #0ac570; font-size: 1.0em; text-align: center; color:#FFFFFF !important; line-height: 1.3em; }
         #footer .logo { font-size: 2.2em; text-align: right; width: 260px; height: 70px; margin: 10px auto 0px auto; padding: 20px 0px 0px 60px; background-size: 80px; }
         #footer .logo span { display: block; float: right; width: 220px; margin-top: 8px; text-align: right; font-size: 0.37em; color: #FFFFFF; text-transform: none; letter-spacing: 0.03em; }
         #footer .lbox { width: calc(100% - 20px); font-size: 0.8em; color:#FFFFFF; padding: 10px; }
         #footer .lbox.bigger { display: none; }
         #footer .lbox b { display: block; font-size: 1.3em; margin-bottom: 10px; font-weight: normal; color:#000000; text-shadow: rgba(0,0,0,0.2) 1px 1px 0px; }
         #footer .lbox a, #footer .lbox a:link, #footer .lbox a:visited { display: inline-block; background: rgba(0,0,0,0.1); text-shadow: #05a45b 1px 1px 1px; color: #FFFFFF; font-size: 1.0em; text-decoration: none; overflow: hidden; font-weight: normal; padding: 5px 10px; margin: 5px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
         #footer .lbox a:hover { font-weight: normal; color: #370000; background: rgba(0,0,0,0.2); text-shadow: #05a45b 1px 1px 0px; }
         #footer .lbox a::before { content: ""; }

         #footer .copyline .links { width: calc(100% - 0px); float: none; text-align: center; }
         #footer .copyline .rechts { display: none; float: none; }

         #go2top { position:fixed; width: 48px; height: 48px; right: 20px; bottom: 30px; }


         /* Startseite */
         #startseite #blog { padding: 40px 20px; width: calc(100% - 40px); height: auto; }
         #startseite #blog h3 { color: #FFFFFF; font-size: 1.4em; text-transform: uppercase; padding: 0px 0px 20px 0px; margin: 0px; }
         #startseite #blog #slider_blog  { display: none; }

         #startseite #blog .items { display: block; }
         #startseite #blog .items .item { display: block; margin: 5px 0px; width: calc(100% - 0px); height: auto; background: none; }
         #startseite #blog .items .item span { float: left; display: block; padding: 5px 10px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: rgba(255,255,255,0.5); color: #FFFFFF; font-weight: bold; }
         #startseite #blog .items .item a { float: right; display: block; width: calc(100% - 150px); overflow: hidden; padding: 5px 15px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: rgba(23,150,93,0.3); color: #FFFFFF; text-decoration: none; }
         #startseite #blog .items .item a:hover { background: rgba(23,150,93,1.0);}

         #startseite #stats .item { float: left; display: block; width: calc(50% - 20px); background-size: 60px !important; height: auto; margin: 10px; padding-top: 70px; color: #3b926f; text-align: center; font-size: 2.2em; }
         #startseite #stats .item span { display: block; font-size: 0.6em; }

         #startseite #anbieter { width: calc(100% - 50px) !important; padding: 0px 25px !important; margin: 0px !important; }
         #startseite #anbieter .item { width: calc(50% - 40px); height: auto; margin: 10px 20px 10px 20px; padding: 0px 0px 0px 0px; }
         #startseite #anbieter .item_info { width: calc(50% - 40px); height: auto; margin: 10px 20px 10px 20px; margin-left: calc(-50% + 20px); padding-top: 20px; padding-bottom: 10px; }
         #startseite #anbieter .item:nth-child(8) { display: block; }

         #startseite #lists { float: none; width: calc(100% - 40px); margin: 0px auto; border: 0px solid #000; }
         #startseite #right { float: none; width: calc(100% + 16px); margin: 0px auto; padding: 0px; border: 0px solid #000; }
         #startseite #right #studienkatalog { float: none; width: calc(100% - 40px + 16px); margin-left: -15px; padding: 20px 20px !important; border: 0px; }
         #startseite #right #studienkatalog form { width: calc(100% - 40px); }
         #startseite #right #studienkatalog form input { width: calc(100% - 0px); margin: 5px 0px; padding: 8px 10px 8px 40px; }

         /* Slider */
         #slider_fernschulen { padding: 20px 0px; height: auto; }
         #slider_fernschulen .slider_fernschulen_header { display: block; }
         #slider_fernschulen .in .slider_fernschulen_left, #slider_fernschulen .in .slider_fernschulen_right { display: none; }
         #slider_fernschulen .in .slider_fernschulen_content { width: calc(100% - 0px) !important; margin: 0px; height: 120px; }

         /* Inhalte */
         #lexikon ul li { height: auto; }

         /* Kurse + Anbieter */
         #site.bg { background-image: none; }
         #kurs_anbieter { height: auto; max-width: calc(1200px - 40px); background: #62DAA4 url(../images/bg.png) bottom center no-repeat; background-size: 100%; padding: 15px 20px 45px 20px; margin-bottom: 20px; }
         #kurs_anbieter .image { float:left; width: 45%; margin-top: 10px; }
         #kurs_anbieter .image img { width: 95%; height: auto; -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25); }
         #kurs_anbieter .info { float:right; width: calc(55% - 20px); font-size: 1.1em; margin-left: 20px; margin-top: 10px; color: #292929; }
         #kurs_anbieter .info_big { float:none; width: calc(100% - 20px); }
         #kurs_anbieter .info h1, #kurs_anbieter .info_big h1 { margin-top: 10px; font-size: 1.8em; }
         #kurs_anbieter .info hr, #kurs_anbieter .info_big hr { height: 2px; background: #44d392; border-top: 1px #292929 solid; border-bottom: 0px #FFFFFF solid; border-left: 0px #FFFFFF solid; border-right: 0px #FFFFFF solid; margin: 10px 0px; }


}

@media (max-width: 740px) {
         .in { width: calc(100% - 35px - 0px - 0px); padding: 0px 15px; margin: 0px 0px !important; }

         #logo { font-size: 2.6em; padding: 10px 0px; }
         #logo a { padding: 10px 0px 10px 80px; background-size: 70px; height: 50px; }
         #suche_studium { width: calc(100% - 40px - 40px); margin: -40px 20px 0px 20px; padding: 15px 20px; }

         /* Kurse + Anbieter */
         #kurs_anbieter .image { width: 40%; }
         #kurs_anbieter .info { width: calc(60% - 20px); font-size: 1.0em; }
         #kurs_anbieter .info h1, #kurs_anbieter .info_big h1 { font-size: 1.6em; }

         #go2top { bottom: 90px; }
         #as_footer { display: none; }
         #as_footer_mobile { display: block; }
}

@media (max-width: 640px) {
         #top_bar .rechts  a:first-child { display: none; }
         #header_cats a span { display: none; }
         #sidebar #anbieter .item { float: left; width: calc(50% - 20px); margin: 5px 10px; }
         #sidebar #anbieter .item:nth-child(even) { float:right; }

         #suche_page input[type="text"] { width: calc(100% - 20px); margin: 2px 0px; }
         #suche_page input[type="submit"] { width: calc(100% - 0px); margin: 2px 0px; }


         /* Startseite */
         #startseite #blog .items .item { font-size: 0.9em; }
         #startseite #blog .items .item span b { display: none; }
         #startseite #blog .items .item a { float: right; display: block; width: calc(100% - 110px); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
         #startseite #lists .stars { width: 100px; }

         #startseite #anbieter { width: calc(100% - 40px) !important; padding: 0px 20px !important; margin: 0px !important; }
         #startseite #anbieter .item { width: calc(50% - 30px); height: auto; margin: 10px 15px 10px 15px; padding: 0px 0px 0px 0px; }
         #startseite #anbieter .item_info { width: calc(50% - 30px); height: auto; margin: 10px 15px 10px 15px; margin-left: calc(-50% + 15px); }

         #tabbar .tab_top .tab_button { font-size: 1.1em; }

         /* Inhalte */
         #lexikon a h3 { display: block; width: calc(100% - 20px) !important; }
         #lexikon a span { display: none; }
         #lexikon ul li { text-align: center; height: auto; }
         #lexikon ul li a, #lexikon ul li i { display: block; float: none; text-align: left; width: calc(100% - 30px); line-height: 1.2em; }
         #lexikon ul li a.kurs { float: none; display: inline-block; height: 65px; width: 100px; padding: 0px 0px; }
         #lexikon .l, #lexikon .keywords { display: block; float: none; width: 100%; }

         /* Kurse + Anbieter */
         #kurs_anbieter .info { font-size: 1.0em; }
         #content .item_kurs a { float: none; width: calc(100% - 0px); }
         #content .item_kurs a.button { float: none; width: calc(100% - 30px); }

         #kurs_anbieter .image { float:none; width: 100%; text-align: center; }
         #kurs_anbieter .image img { width: 90%; height: auto; margin-bottom: 20px; }
         #kurs_anbieter .info { float:none; width: 100%; text-align: justify; margin-left: 0px; color: #292929; }
}

@media (max-width: 520px) {
         #logo { font-size: 2.0em; margin-top: 5px; }
         #logo a { padding: 10px 0px 10px 55px; background-size: 50px; height: 40px; }

         #header_cats a { padding: 10px 5px 5px 5px; }

         /* Startseite */
         #startseite #anbieter .item_info, #startseite #anbieter .item { float: none; width: calc(100% - 40px); height: auto; margin-bottom: 20px; }
         #startseite #anbieter .item_info span { height: auto; }
         #startseite #anbieter .item_info { display: none !important; }

         #startseite #lists .w50 { display: none; }
         #startseite #lists .wall { display: block; }
}

/*
#####################################
         Break zu Mobile
#####################################
*/

@media (max-width: 420px) {
         #top_bar .rechts  a:last-child { display: none; }

         /* Startseite */
         #startseite #blog .items .item { font-size: 0.8em; }

         #as_footer_mobile { width: calc(100% - 20px); -webkit-border-radius: 0px; -moz-border-radius: 0px; -border-radius: 0px; }
}

/*
@media (max-width: 740px) {
        #startseite #lists .kurse .item { display: block; float: none; width: calc(100% - 6px); margin: 3px; }

         #ads_footer .big, .big .adbreak { display: none; }
         #ads_footer .small, .small .adbreak { display: block; }

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

}

@media (max-width: 640px) {
        #eyecatcher { background-size: auto 70%; padding-top: 120px; }
         #header { height: 75px;}
         #header_icons { margin-top: 5px; }
         nav  { margin-top: 5px; }
        #logo { height: 65px; margin-top: 10px; padding: 0px; }
        #logo a { font-size: 2.2em; padding: 10px 0px 5px 70px; margin-top: 0px; background-position: -5px -5px; background-size: 70px; }
        #logo span { display: block; text-align: right; font-size: 0.26em; }

         #startseite #anbieter .item .logo { height: 100px; }

         #kurs_anbieter .info { font-size: 1.0em; }
         #anbieter .item { width: calc(50% - 40px); }

         #content .item_kurs a { float: none; width: calc(100% - 0px); }
         #content .item_kurs a.button { float: none; width: calc(100% - 30px); }

         #lexikon ul li { text-align: right; height: auto; }
         #lexikon ul li a, #lexikon ul li i { display: block; text-align: left; width: calc(100% - 30px); float: none; }
        #lexikon ul li a.kurs { float: none; display: inline-block; height: 65px; width: 100px; padding: 0px 0px; }
}

@media (max-width: 560px) {
         #eyecatcher { background-size: auto 60%; padding-top: 110px; margin-bottom: 20px; }

         #eyecatcher #suche_studium input[type="text"], #eyecatcher #suche_studium select { padding: 0px 10px 0px 10px; margin: 5px 2px; width: calc(100% - 85px); height: 37px; }
         #eyecatcher #suche_studium select { padding: 0px 10px 0px 10px; margin: 2px; width: calc(100% - 65px); }
         #eyecatcher #suche_studium input[type="submit"] { padding: 0px 20px 0px 0px; width: 50px; height: 80px; }


         #startseite #anbieter .item_info, #startseite #anbieter .item { float: none; width: calc(100% - 20px); }
         #startseite #anbieter .item_info span { height: auto; }

         #startseite #anbieter .item_info { z-index: 10; position: relative; width: calc(100% - 20px); margin-left: 10px; margin-bottom: 0px;  }

         #startseite #blog { padding: 20px 0px; width: calc(100% - 0px); }
         #startseite #stats .item { font-size: 1.6em; }

         #kurs_anbieter .image { float:none; width: 100%; text-align: center; }
         #kurs_anbieter .image img { width: 90%; height: auto; margin-bottom: 20px; }
         #kurs_anbieter .info { float:none; width: 100%; text-align: justify; font-size: 1.1em; margin-left: 0px; color: #292929; }



         #tabs .top { height: 42px; }
         #tabs .top .button { font-size: 1.0em; min-width: 100px; }
}

@media (max-width: 480px) {
         #header { height: 55px; }

         #logo {  width: calc(100% - 160px); height: 55px; margin-top: 0px; }
         #logo a { padding: 10px 0px 10px 0px; background: none;  }

         #header_icons { width: 100px; height: 50px; margin-top: 5px; }
         #header_icons #favos, #header_icons .suche { width: 50px; height: 55px; }
         #header_icons #favos{ line-height: 52px; }

         nav { height: 50px; width: 60px; margin-top: 5px; }
         #menuToggle { top: 15px; left: 15px; }
         #menu { width: calc(100vw - 25px); padding: 130px 15px 50px 15px; }

         #copyline .links, #copyline .rechts { width: 100%; display: block; float: none; text-align: center; font-size: 1.2em; }

         #anbieter h4 { font-size: 1.2em; }
         #anbieter .item { width: calc(50% - 20px); margin: 5px 5px; padding: 5px; }

         #content .table .item .links, #content .table .item .rechts { display: block; width: calc(100% - 10px); }
         #content .table .item .links { margin: 0px; border: 0px; }
         #content .table .item .rechts { text-align: right; }

         #content .artikel img.inline { display: block; width: 100%; height: auto; }
         .moreartikel img { max-width: 35% !important; height: inherit !important; }

         #tabs .top { height: 40px; }
         #tabs .top .button { font-size: 0.9em; min-width: 80px; margin: 0px 3px; }
         #slider_fernschulen h3 { font-size: 1.1em; margin-top: 10px; }
}


@media (max-width: 420px) {
         #header { height: 55px; }

         #logo {  width: calc(100% - 160px); height: 55px; font-size: 0.9em; }
         #logo a { padding: 10px 0px 10px 0px; background: none;  }
}  */