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

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

         h1 { font-size: 2.0em; }
         h2 { font-size: 1.8em; }
         h3 { font-size: 1.6em; }
         h4 { font-size: 1.4em; }

         #header { display: block; height: auto; min-height: auto; }
         #header .logo { width: 500px; padding: 30px 0px 0px 0px; }
         #header.full { background-position: center -70px; }

         #hero { font-size: 0.9em; }
         #hero h1 { font-size: 2.6em; }
         #hero ul { padding-bottom: 50px; }
         #hero ul li { background-size: 24px; padding: 5px 0px 5px 35px; }

         #kontakt .links { width: 420px; }
         #kontakt form { width: calc(100% - 420px - 50px); }
         #kontakt_button .top { right: 20px; top: 480px; }

         #startseite #video { cursor: pointer; width: 50%; height: auto; }

}

@media (max-width: 1020px) {
         #header .navi a { font-size: 1.2em; }

         #hero { width: 65%; font-size: 0.8em; }
         #hero h1 { font-size: 2.2em; }

         #kontakt { padding: 20px 50px; }
         #kontakt .links { float: none; width: calc(100% - 0px); border: 0px rgba(255,255,255,1.1) solid; padding: 0px; }
         #kontakt .links ul { padding: 0px; margin: 0px; }
         #kontakt .links li { width: calc(50% - 60px - 4px - 10px); display: inline-block; border: 2px rgba(255,255,255,0.1) solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
         #kontakt .links li:nth-child(odd) { margin: 0px 10px 15px 0px; }
         #kontakt .links li:nth-child(evan) { margin: 0px 0px 15px 10px; }
         #kontakt .links li:last-child { width: calc(100% - 60px - 4px - 4px); margin: 0px 0px 15px 0px; }
         #kontakt form { float: none; width: calc(100% - 45px); }
         #kontakt_button .top { right: 20px; top: 450px; }

         #startseite #vorteile .item { width: calc(100% / 3 - 30px - 5px); }
}

@media (max-width: 800px) {
         #header.full { background-image: url(../images/hero_mobile.jpg); background-size: 100%; background-position: left -50px; }
         #header.small { height: 220px; background-size: 120%; background-position: left -50px; }
         #header .logo { width: 400px; padding-top: 30px; }
         #header .navi { display: block; float: none; width: calc(100% - 40px); padding: 10px; margin: 10px; text-align: center; }
         #header .navi a { font-size: 1.4em; background-color:#FFFFFF; }

         #hero { width: 100%; font-size: 0.9em; margin-top: 20px; }
         #hero h1 { font-size: 2.2em; text-align: center; }

         #kontakt { padding: 10px 20px; }
         #kontakt_button .top { right: 20px; top: 460px; }
         #kontakt_button .top img { width: 240px; height: auto; }

         #footer .in a { line-height: 2.2em; }

         #startseite img.start_1, #startseite img.start_2 { width: calc(100% - 40px); float: none; max-width: 100%; margin: 0px 20px 10px 20px; }
         #startseite #video {  width: calc(100% - 40px); float: none; max-width: 100%; margin: 0px 20px 10px 20px; }
         #startseite #kampagnen img { width: calc(100% / 2); }
         #startseite #vorteile .item { width: calc(100% / 2 - 30px - 5px); }

         #blog .item { display: block; float: left; width: calc(100% / 2 - 20px - 30px); margin: 10px; padding: 10px 15px; }

}

@media (max-width: 720px) {
         #kontakt .links { font-size: 0.9em; }
         #kontakt_button .top { display: none; }
         #kontakt_button .site { display: block; }
}

@media (max-width: 660px) {
         img.img_l, img.img_r { width: 100%; max-width: 100%; height: auto; float: none; margin: 0px 0px 20px 0px; }
         #header .logo { width: 340px; padding-top: 30px; }
         #header.small { height: 180px; background-size: 130%; background-position: left -10px; }

         #blog h3, #blog h4 { text-align: center; }
         #blog .item { display: block; float: none; width: calc(100% / 1 - 20px - 30px); margin: 10px; padding: 10px 15px; }

         #kontakt form .check { font-size: 0.9em; }
         #kontakt form .white, #kontakt form input[type="submit"] { display: block; width: 100%; text-align: center; }
         #kontakt .links li { width: calc(100% - 60px - 4px - 0px); margin: 0px 0px 10px 0px !important;  }
         #kontakt .links li:nth-child(odd), #kontakt .links li:nth-child(evan) { margin: 0px 0px 10px 0px !important; }
         form .block { display: block; width: calc(100% - 0px); float: none; }
}

@media (max-width: 520px) {
         #header .logo { float: none; width: 96%; padding: 2% 2%; }
         #header.full, #header.small { height: auto; background-image: none; }

         #header .navi { width: calc(100% - 20px); padding: 10px 0px; margin: 10px; }
         #header .navi a:first-child { display: none; }

         #hero ul { padding-bottom: 20px; }
         #hero ul li { background-size: 24px; padding: 6px 0px 6px 35px; }

         #startseite #kampagnen img { width: calc(100% / 1); float: none; max-width: 414px; }
         #startseite #vorteile .item { width: calc(100% / 1 - 30px - 5px); }
         #startseite #vorteile .item b { height: auto; }
         #startseite #vorteile .item .box { min-height: auto; padding-bottom: 20px; }

         #kontakt { padding: 20px 10px; }
}

@media (max-width: 420px) {
         #header .navi a { font-size: 1.1em; }

         #hero { background-size: auto 220px; background-position: right 5px; font-size: 0.6em; }
         #hero .info { width: 170px; padding: 10px 0px; }

}