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


@media (max-width: 1000px) {
         #hero { margin-top: -320px; }
         #hero img { width: 80%; }
         .dot { background-size: 32px; padding: 0px 10px 0px 40px; }
}


@media (max-width: 900px) {
         #header { height: 500px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px)); }
         #hero { margin-top: -250px; }
         #site { padding: 100px 0px 10px 0px; }

         #apps { clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%); }
         #apps .in { height: 500px; overflow: hidden; width: calc(100% - 40px); }

         #footer .logo, #footer .info { float: none; width: 100%; padding-bottom: 20px; }
         /*#footer .item { float: right; width: calc(50% - 0px - 20px); margin: 10px 10px; } */
}

@media (max-width: 800px) {
         #header { height: 75vw; }
         #header .logo img { width: 65%; height: auto; }
         #hero { margin-top: -35vw; }
         #site { padding: 70px 0px 10px 0px; }

         #header .menu a.button:link, #header .menu a.button:visited {  float: left; }
         #header .menu a:first-child, #header .menu a:last-child {
                 float: right;
                 font-weight: normal;
                 text-shadow: rgba(0,0,0,0.0) 1px 1px 1px;
                 color: #6aa207;
                 padding: 8px 12px;
                 margin: 0px 2px 5px 2px;
                 background: #FFFFFF;
                 text-decoration:none;
                 text-transform: none;

                 -webkit-border-radius: 3px;
                 -webkit-border-top-left-radius: 0px;
                 -webkit-border-top-right-radius: 0px;
                 -moz-border-radius: 3px;
                 -moz-border-radius-topleft: 0px;
                 -moz-border-radius-topright: 0px;
                 border-radius: 3px;
                 border-top-left-radius: 0px;
                 border-top-right-radius: 0px;
         }

         #header .menu a:first-child:hover, #header .menu a:last-child:hover {
                 color: #FFFFFF;
                 background: #416304;
                 text-decoration:none;
         }

         #imprint .item { font-size: 0.8em; }
         #imprint .item .l { width: 120px;  }
         #imprint .item .r { width: calc(100% - 120px); }

         h1 { font-size: 1.8em; }
         h2 { font-size: 1.6em; }
         .dot { background-size: 32px; padding: 0px 10px 0px 40px; }
         .start { width: calc((100% / 1) - 20px) !important; background-color: rgba(0,0,0,0.05); }
         .start:nth-child(odd) { background-color: rgba(0,0,0,0.02); }
         #layerbox { left: 5%; top: 10%; width: calc(90% - 10px); }
         #layerbox .pad { padding: 10px 10px 10px 10px; font-size:0.9em; }

         .vorteile .item { float:none; width: calc(100% - 20px); text-align: center; }
         .vorteile .item:nth-child(2) { margin: 10px 10px; }
         .vorteile .item img { margin-left: auto; }

         .app_item .logo, .app_item .info { float: none; width: 100%; margin: 5px 0px 10px 0px; }
         .app_item .logo img {max-width: 150px; }
         .app_item .info { text-align: center; }
         .app_item .info .btn { text-align: center; height: auto; }
         .app_item .info .btn a { float: none; }
         .app_item .info .btn .block { width: calc(100% - 0px); height: 5px; display: block; }


@media (max-width: 680px) {
         #header { background-size: 80% auto; }
         #wrapper.content #header { height: auto; padding-bottom: 30px; }

         #imprint .item { font-size: 1.0em; text-align: left; }
         #imprint .item .l { width: 180px;  }
         #imprint .item .r { width: calc(100% - 180px); }
         #imprint .item b { display: block; text-align: center !important; margin-bottom: 0px; }

         #footer .item, #imprint .item { float: none; width: calc(100% - 40px); text-align: center; }

         #footer .item .l { float: none; display: inline; padding: 2px 5px; background-color: rgba(0,0,0,0.05); }
         #footer .item .r { float: none; display: inline; padding: 2px 5px; background-color: rgba(0,0,0,0.02); }
         #footer .item b { margin-bottom: 10px; }
         #footer .a_c     { text-align: center !important; }

         #apps { background-image: url(../images/phone2.png); }
         #apps .in { height: auto; overflow: none; width: calc(100% - 40px); }
         #apps .item { display: block; float: none; width: calc(100% - 0px); margin: 0px 0px 20px 0px; }
         #apps .item span,
         #apps .item:nth-child(odd) span,
         #apps .item:nth-child(even) span { display: block; padding: 10px 0px 0px 0px; text-align: left; }
         #apps .item:nth-child(odd) { float: none; text-align: left; }
         #apps .item:nth-child(even) { float: none; }
         #apps .item:nth-child(odd) b:after { right: auto; left: 20px; }
}

@media (max-width: 480px) {
         .in { width: calc(100% - 20px); padding: 0px 10px; }
         #header .menu a.button:link, #header .menu a.button:visited,
         #header .menu a:first-child, #header .menu a:last-child { padding: 8px 5px; }
}