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

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

}

@media (max-width: 1020px) {
         #willkommen .pad_l { font-size: 0.9em; }
         .box.max-width { display: inline-block; width: calc(33% - 40px - 20px); padding: 10px 20px 10px 20px; margin: 10px 5px; font-size: 0.9em; }
}

@media (max-width: 800px) {
         h1 { font-size: 1.6em; }
         h2 { font-size: 1.4em; }
         h3 { font-size: 1.3em; }
         h4 { font-size: 1.2em; }

         #header { margin-top: 10px; }
         #header .logo img { max-width: 200px; }
         #header ul.menu li { margin: 5px 5px; }
         #header ul.menu a { padding: 6px 12px; margin: 0px; font-size: 1.2em; }
         #header a.icon { top: 10px; }
         #header a.icon.phone { margin-left: calc(100% - 115px); }

         .w50.pad { width: calc(100% - 30px - 0px - 2px); padding: 10px 15px !important; border: 0px #000000 solid; }
         #willkommen .w50.pad, #willkommen .w50.pad h1 { text-align: center; }
         #willkommen .pad_l { padding: 0px; font-size: 1.0em; text-align: left; }
         #willkommen .pad_l .f_big { display: none; }

         #kontakt .w50.pad:nth-child(odd), #uebermich .w50.pad:nth-child(odd) { border-right: 0px rgba(0,0,0,0.2) dotted; padding-bottom: 30px !important; }
         #kontakt .w50.pad:nth-child(even), #uebermich .w50.pad:nth-child(even) { border-top: 2px rgba(0,0,0,0.2) dotted; }

         .box.max-width { display: inline-block; width: calc(50% - 40px - 20px - 4px); padding: 10px 20px 10px 20px; }
          #header.main { background: #FFFFFF url(../images/header2.jpg) center center no-repeat; background-size: cover; }
}

@media (max-width: 720px) {
         .main { max-width: calc(100% - 20px - 10px); width: calc(100% - 30px - 10px); margin: 10px 15px; }
         #header a.icon.phone { margin-left: calc(100% - 105px); }
         .trainerBox { float: left; width: calc(25% - 20px); margin: 10px 10px; }

}

@media (max-width: 660px) {
         .pad     { padding: 10px 10px; }
         .pad_small     { padding: 5px 5px; }
         .pad_top { padding: 20px 0px !important; }
         .pad_l     { padding-left: 10px; }

         #header ul.menu { width: calc(100% - 0px); margin: 0px auto 0px auto; padding: 10px 0px; }
         #header ul.menu li { margin: 5px 2px; }
         #header ul.menu li.k { display: none; }
         #header ul.menu a { padding: 10px 10px; margin: 0px; font-size: 1.2em; }

         ul.kontakt_links li { background-size: 30px; margin: 5px 0px; padding: 6px 0px 6px 45px; line-height: 30px; list-style: none; font-size: 1.1em; }

         #willkommen .r { width: calc(100% - 0px); padding: 0px !important;  }
}

@media (max-width: 620px) {
         .box.max-width { display: inline-block; width: calc(100% - 40px - 20px - 4px); padding: 10px 20px 10px 20px; margin: 10px 10px 20px 10px; }
         #top_button { position: fixed; display: none; z-index: 100; right: 15px; bottom: 15px; }
}

@media (max-width: 420px) {
         #header ul.menu a { padding: 10px 8px; margin: 0px; font-size: 1.0em; }
         #footer { margin-bottom: 40px; }

}