@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/red-hat-display-v3-latin-regular.eot);
  src: local('Red Hat Display'), local('RedHatDisplay-Regular'), url(../fonts/red-hat-display-v3-latin-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/red-hat-display-v3-latin-regular.woff2) format('woff2'), url(../fonts/red-hat-display-v3-latin-regular.woff) format('woff'), url(../fonts/red-hat-display-v3-latin-regular.ttf) format('truetype'), url(../fonts/red-hat-display-v3-latin-regular.svg#RedHatDisplay) format('svg')
}

@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/red-hat-display-v3-latin-700.eot);
  src: local('Red Hat Display Bold'), local('RedHatDisplay-Bold'), url(../fonts/red-hat-display-v3-latin-700.eot?#iefix) format('embedded-opentype'), url(../fonts/red-hat-display-v3-latin-700.woff2) format('woff2'), url(../fonts/red-hat-display-v3-latin-700.woff) format('woff'), url(../fonts/red-hat-display-v3-latin-700.ttf) format('truetype'), url(../fonts/red-hat-display-v3-latin-700.svg#RedHatDisplay) format('svg')
}

.clear{clear:both}
body{font:300 12px/20px arial,helvetica}
h1{color:#ea6c06;font-family:'Red Hat Display',sans-serif;font-size:46px;margin:0 0 40px 0;font-weight:700;letter-spacing:1px;word-spacing:1px;line-height:1.4}
h2{color:#ea6c06;font-family:'Red Hat Display',sans-serif;font-size:38px;margin:20px 0 40px 0;font-weight:700;letter-spacing:1px;word-spacing:1px;line-height:1.4}
a,li,p{font-family:'Red Hat Display',sans-serif;font-size:16px;line-height:1.6;max-width:800px}
a{color:#ea6c06; text-decoration: underline;}
a:hover{text-decoration:none}
p,ul{margin:0 0 20px 0}
.bold{font-weight:700}
.over-headline-wrapper{width:100%}
.over-headline{width:200px;border-bottom:2px solid #f2a580}
.over-headline p{color:#f2a580;text-transform:uppercase;font-size:20px;font-weight:700;letter-spacing:1px;word-spacing:1px;line-height:1.2;margin:0}ul{list-style:disc;margin:0 0 20px 50px}

#beispiele,#flyer,#ueber-uns,.header{margin-bottom: 100px;}
header{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:100vh;padding:70px 0 0 0}
.logo{position:fixed;top:0;left:0;z-index:100; height: 195px;}
.logo-scrolled{height: 120px;}
.main-nav{min-width:50%;position:fixed;right:5%;top:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:10px 0 0 0;z-index: 100;}
.main-nav a{color:#2b2b2b;font-size:18px;font-family:'Red Hat Display',sans-serif;text-decoration:none;font-weight:700;text-decoration:none;padding:8px 15px;border-radius:30px;background:#fff;margin: 0 0 5px 0;}
.main-nav a:hover{background:#ea6c06;color:#fff;transition: .5s;}
.main-nav a:active{background:#f2a580;color:#fff; }
.header-l,.header-r{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.header-button{text-decoration:none}
.mehr-erfahren{border:none;background:#91ac3b;border-radius:30px;cursor:pointer;margin:50px 0 0 0;min-width:64px;min-height:42px}
.mehr-erfahren p{padding:8px 25px;color:#fff;text-align:center;font-size:20px}
.mehr-erfahren:hover{background:#ea6c06}
.mehr-erfahren:focus{background:#ea6c06}
.mehr-erfahren:active{background:#f2a580}
.drucker-img,.flyer-img,.ueber-uns-img,.kontakt-img{max-width:50vw}



/*Burger Button*/
.burger{position:fixed;right:20px;top:15px;display:none}
.burger-line{width:35px;height:5px;background-color:#000;margin:6px 6px}
/*Burger Button Ende*/

/* The side navigation menu */
.sidenav{height:100%;width:0;position:fixed;z-index:1;top:0;right:0;background-color:#fff; overflow-x:hidden;padding-top:60px;transition:.5s;z-index: 105;}
.sidenav a{padding:8px 32px 8px 8px;text-decoration:none;font-size:25px;color:#ea6c06;display:block;transition:.3s; text-align: right;}
.sidenav a:hover{color:#91ac3b}
.sidenav.closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px}
#main{transition:margin-left.5s;padding:20px}
/* The side navigation menu Ende*/

#kontakt,#ueber-uns{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
#kontakt{background:url(../images/google-maps-kreise.png) top left/415px 567px no-repeat;margin: 0 0 100px 0;}
.kontakt-l,.ueber-uns-l{width:48%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
.ueber-uns-r{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:0 5% 0 0;width:43%}
.kontakt-l{overflow-y:hidden;width:663px;height:663px;margin:134px 40px 134px 134px;display:flex;justify-content:center;align-items:center}
.kontakt-r{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:0 5% 0 0;width:43%}
.kontakt-r h2{width:100%}
.kontakt-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;width: 100%;}
.kontakt-wrapper .p1 {margin: 0 50px 20px 0;}
.kontakt-button{text-decoration:none}
.kontaktformular-oeffnen{border:none;background:#91ac3b;cursor:pointer;margin:50px 0 0 0;min-width:64px;min-height:42px}
.kontaktformular-oeffnen p{padding:8px 25px;color:#fff;text-align:center;font-size:16px;}
.kontaktformular-oeffnen:hover{background:#ea6c06}
.kontaktformular-oeffnen:focus{background:#ea6c06}
.kontaktformular-oeffnen:active{background:#f2a580}

.website-button{border:none;background:#ea6c06;cursor:pointer;margin:20px 0 0 0;min-width:64px;min-height:42px}
.website-button p{padding:8px 25px;color:#fff;text-align:center;font-size:16px;}
.website-button:hover{background:#91ac3b}
.website-button:focus{background:#91ac3b}
.website-button:active{background:#BCD470}
.button-wrapper-kontakt {width: 100%; display: flex;}



#beispiele{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center;margin:100px 0}
.flyer-beispiele{max-width:800px;width:90%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:center}#beispiele h2{padding:0 5%;text-align:center}
.grauer-kreis{width:300px;height:300px;border-radius:100%;background:#d6d6d6;display:flex;justify-content:center;align-items:center}
.musterflyer {cursor:zoom-in;}

#flyer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
.flyer-l{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:0 0 0 5%;width:43%}
.flyer-r{width:48%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.daten-impress-nav{position:fixed;bottom: -5px;right:2%;margin-bottom:10px; z-index: 1000;}
.daten-impress-nav a{color:#fff;background:#f2a580;min-width:42px;min-height:64px;padding: 5px 15px 7px 15px;text-decoration:none;margin-left:10px; font-size: 16px;}
.daten-impress-nav a:hover {color:#fff;background:#ea6c06;}
.daten-impress-nav a:focus {color:#fff;background:#ea6c06;}
.daten-impress-nav a:active {color:#fff;background:#f2a580;}
.impressum-ueu-r {margin-top: 100px;flex-direction: column;align-content: flex-start;align-items: flex-start;}
.activity_rounded{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-khtml-border-radius:50%;behavior:url(css/PIE.htc)}


/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/
@media screen and (max-width: 1610px) {
.kontakt-r{width:31%}
}

@media screen and (max-width: 1336px) {
  .kontakt-l{width:520px;height:520px;}
  .kontakt-r{padding-left: 5%;}
}

@media screen and (max-width: 1180px) {
.kontakt-r{width:29%}
}

@media screen and (max-width: 1150px) {
  header{margin:300px 0 0 0;min-height:unset;padding:0}
  .header-l{width:90%;padding:0 0 0 5vw}
  .header-r{align-content:flex-end;width:100%;flex-grow:1;margin: 0 0 100px 0;}
  .drucker-img,.ueber-uns-img, .flyer-img{max-width:70vw}
  header{flex-direction:column;margin:250px 0 0 0}
  #ueber-uns{flex-direction:column-reverse;}
  .flyer-l,.ueber-uns-r{padding:0 0 0 5vw;width:90%;margin: 157px 0 100px 0;}
  .flyer-r,.ueber-uns-l{width:100%}
  #kontakt{background:url(../images/google-maps-kreise.png) top left/380px no-repeat;align-content:flex-start}
  .kontakt-l{width:663px;height:663px;margin:82px 40px 50px 134px}
  .kontakt-r{width:95%;padding:0 0 0 5%}
  .impressum-ueu-l {display: none;}
}

@media screen and (max-width: 950px) {
 .main-nav{width:40vw;flex-direction:column;align-items:flex-end}
 .main-nav a:hover {box-shadow: 2px 2px 5px #4b4b4b}
}

@media screen and (max-width: 900px) {
  .kontakt-l {width: 570px; height: 570px;margin: 82px auto 50px auto;}
}

@media screen and (max-width: 768px) {
  .burger{display:block}
  .main-nav{display:none}
  h1{font-size:30px;margin:0 0 20px 0}
  header{margin: 240px 0 0 0;}
  .header-l{width:90%;margin:0 0 40px 0}
  .drucker-img,.flyer-img,.ueber-uns-img{max-width:90vw}
  .mehr-erfahren{font-size:16px;margin:20px 0 0 0}
  .kontaktformular-oeffnen, .website-button{font-size:16px;margin:20px 0 0 0}
  .grauer-kreis{width:200px;height:200px;margin:0 0 40px 0}
  #kontakt{background:url(../images/google-maps-kreise.png) top left/300px no-repeat}
  .kontakt-l {width: 470px; height: 470px;margin: 82px auto 50px auto;}
  .musterflyer {width: 130px;}
}

@media screen and (max-width: 600px) {
  #kontakt{background:url(../images/google-maps-kreise.png) top left/265px no-repeat}
  .logo{height:130px}
  .kontakt-l{z-index: 80;}
  .flyer-l, .ueber-uns-r {margin: 170px 0 100px 0;}

}

@media screen and (max-width: 480px) {
  .burger{top:0;right:0;height:50px;width:50px;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index: 99;}
  .burger-line{width:27px;height:4px;background-color:#000;margin:3px 6px}
  .sidenav{padding-top:15px}
  .sidenav a{font-size:18px}header{margin:140px 0 0 0}
  #kontakt{background:0 0;flex-direction: column-reverse;}
  .kontakt-l{height: 300px;margin: 0 0 50px 0;overflow: unset;margin-bottom: 100px;width: 100%;}
  .kontakt-r {margin-bottom: 50px;}
}

@media screen and (max-width: 320px) {
 a,li,p{font-size:14px;hyphens:auto;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto}
  h1, h2 {font-size: 24px; hyphens: auto;}
  ul {margin: 0 0 20px 20px;font-size: 14px;}
  li {margin: 0 0 10px 0;}
  .logo {height: 100px;}
  .logo-scrolled{height: 50px;-webkit-height: 50px;}
  .header-r{align-items: flex-end;}
  .mehr-erfahren {border-radius: 20px;height: 42px;}
  .mehr-erfahren p {font-size: 16px;padding: 8px 25px;}
  .flyer-l, .ueber-uns-r, .header-l {padding: 0;}
  .flyer-l, .ueber-uns-r, .kontakt-r {margin: 60px 0 0 0;}
  #flyer {justify-content: center;}
  #kontakt {align-content: center;}
  .daten-impress-nav a{font-size:14px}
  .kontakt-l{margin-bottom: 0;}
}