@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.haarhaus-augsburg.de/webfonts/mulish-v1-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.haarhaus-augsburg.de/webfonts/mulish-v1-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.haarhaus-augsburg.de/webfonts/mulish-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.haarhaus-augsburg.de/webfonts/mulish-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.haarhaus-augsburg.de/webfonts/mulish-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.haarhaus-augsburg.de/webfonts/mulish-v1-latin-regular.svg#Mulish') format('svg'); /* Legacy iOS */
}

html {
}

body {
margin: 0;
padding: 0;
font-family: 'Mulish', sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.5em;
text-align: center;
color: #000000;
background: #CDCBBD; /* Old browsers */
background: -moz-linear-gradient(left,  #CDCBBD 0%, #ffffff 50%, #CDCBBD 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #CDCBBD 0%,#ffffff 50%,#CDCBBD 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #CDCBBD 0%,#ffffff 50%,#CDCBBD 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CDCBBD', endColorstr='#CDCBBD',GradientType=1 ); /* IE6-9 */
overflow-x: hidden;
}

h1, h2, h3 {
color: #E60004;
font-size: 175%;
line-height: 1.3em;
font-weight: normal;
margin: 0;
padding: 0;
text-transform: uppercase;
margin-bottom: 25px;
}

h1.start {
display: none;
}

h2.black {
color: #000000;
margin-bottom: 5px;
}

h2.blackcenter {
color: #000000;
margin-top: 50px;
margin-bottom: 0;
text-align: center;
}

h2.produktlinks {
font-size: 125%;
line-height: 1.3em;
margin-bottom: 10px;
}

h2.weitere {
margin-top: 50px;
}

h2.footer {
font-size: 100%;
line-height: 1.5em;
color: #FFFFFF;
display: inline;
margin-right: 30px;
}

h3.leistungen {
color: #000000;
font-size: 100%;
line-height: 1.0em;
font-weight: normal;
margin: 0;
padding: 15px 0;
text-align: center;
text-transform: none;
transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
}

h3.produktlinks {
color: #000000;
font-size: 100%;
line-height: 1.5em;
font-weight: normal;
margin: 0;
padding: 0;
text-transform: none;
}

a {
color: #E60004;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

img {
border:none;
}

.imgsize {
max-width: 100%;
height: auto;
}

ul.liste {
list-style-type: disc;
list-style-position: outside;
padding: 0;
margin-left: 20px;
}

ul.liste li {
padding-left: 10px;
}

#clear {
clear: both;
}

.wehinweis {
display: none;
}

/**************************************************************************************/

#edittrenner {
margin-top: 70px;
margin-bottom: 30px;
background: #FF0000;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}

#edittrenner2 {
margin-top: 20px;
margin-bottom: 10px;
background: #595959;
padding: 2px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}

/**************************************************************************************/

#container {
margin: 0em auto;
width: 1280px;
text-align: left;
}

#containercenter {
margin: 0em auto;
width: 1280px;
text-align: center;
}

/**************************************************************************************/

header {
position: fixed;
top: 0;
width: 100%;
height: 85px;
color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #E60004;
z-index: 5;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

header:hover {
background-color: rgba(0, 0, 0, 0.7);
}

#logo {
float: left;
z-index: 6;
}

/**************************************************************************************/

nav {
float: right;
z-index: 10;
}

.toggleMenu {
display: none;
display: block;
top: 30px;
right: 5%;
height: 34px;
width: 34px;
padding: 8px 0 7px 8px;
position: fixed;
}

.menuline {
position: absolute;
}

.topline {
top: 5px;
width: 32px;
height: 2px;
border-radius: 10px;
background-color: #E60004;
}

.midline {
top: 13px;
width: 32px;
height: 2px;
border-radius: 10px;
background-color: #E60004;
}

.bottomline {
top: 21px;
width: 32px;
height: 2px;
border-radius: 10px;
background-color: #E60004;
}

.nav {
list-style: none;
*zoom: 1;
margin: 0;
padding: 0;
}

.nav ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

.nav li {
position: relative;
}

.nav > li {
display: inline-block;
padding: 0 20px;
transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
}

.nav a {
font-size: 115%;
line-height: 1.4em;
display: block;
line-height: 85px;
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
}

.nav li:hover, #peruecken #navi01, #service #navi02, #ueber #navi03, #kontakt #navi04, #corona #navi05, #navi05:hover {
background-color: rgba(230, 0, 4, 1.0);
}

#navi05 {
background-color: rgba(230, 0, 4, 0.8);
}

.nav li ul {
position: absolute;
left: -9999px;
}

.nav > li.hover > ul {
left: 0;
width: 220px;
padding-top: 5px;
}

.nav li li.hover ul {
left: 100%;
top: 0;
}

.nav li li, #peruecken #navi01 li, #service #navi02 li {
background-color: rgba(0, 0, 0, 0.7);
}

#peruecken #navi01 li:hover, #service #navi02 li:hover {
background-color: rgba(230, 0, 4, 1.0);
}

.nav li li a {
font-size: 100%;
line-height: 1.3em;
color: #FFFFFF;
text-align: left;
padding: 9px 20px;
display: block;
position: relative;
z-index: 100;
text-transform: none;
}

/**************************************************************************************/

#slider {
margin-bottom: 50px;
}

#headerbild {
margin-bottom: 50px;
}

.margtop {
margin-top: 50px;
}

#tableft {
float: left;
width: 48.5%;
}

#tabright {
float: right;
width: 48.5%;
}

#startzertifikate {
margin-top: 20px;
}

#startleistungen {
background-color: #B2B3B1;
margin: 50px 0;
padding: 50px 0;
}

#startleistungen a, #startleistungen a:hover {
text-decoration: none;
}

#startleistungenalle {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
justify-content: center;
}

.animBlock {
display: inline-block;
opacity: 0;
filter: alpha(opacity=0);
position: relative;
-webkit-transition: all .55s ease-in;
-moz-transition: all .55s ease-in;
-ms-transition: all .55s ease-in;
-o-transition: all .55s ease-in;
transition: all .55s ease-in;
}

.animBlock[data-position="left"] { left: -20%; }
.animBlock[data-position="right"] { right: -20%; }

.animBlock[data-position="left"].viewed {
left: 0%;
opacity: 1;
filter: alpha(opacity=100);
}
.animBlock[data-position="right"].viewed {
right: 0%;
opacity: 1;
filter: alpha(opacity=100);
}

#startleistungeinzel {
width: 13%;
margin-right: 1.25%;
margin-top: 20px;
line-height: 0;
transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
}

#startleistungeinzel:hover {
background-color: #E60004;
}

#startleistungeinzel:hover h3 {
color: #FFFFFF;
}

#startnewseinzel {
margin-top: 20px;
}

#newslink {
font-size: 80%;
line-height: 1.7em;
margin-top: 50px;
}

#startlogos {
background-color: #C5C6C3;
margin: 10px 0 50px 0;
padding: 50px 0;
}

#maps {
width: 100%;
height: 400px;
}

.google-maps {
position: relative;
0height: 0;
overflow: hidden;
height: 400px;
}

.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.produktvorschaueinzel {
float: left;
width: 142px;
height: 202px;
margin-right: 10px;
margin-bottom: 10px;
opacity: 1.0;
transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
border: 1px solid #DAD9D0;
box-sizing: border-box;
}

.produktvorschaueinzel:hover {
opacity: 0.7;
}

#produktlinks {
background-color: #C5C6C3;
margin-top: 50px;
padding: 25px 35px 10px 35px;
}

#produktlinksmobile {
display: none;
background-color: #C5C6C3;
margin-top: 50px;
padding: 25px 35px 10px 35px;
}

#produktlinks a, #produktlinksmobile a {
color: #000000;
}

/**************************************************************************************/

footer {
background-color: #000000;
text-transform: uppercase;
font-size: 70%;
line-height: 1.5em;
padding: 8px 0;
margin-top: 50px;
}

footer a {
color: #FFFFFF;
}

/****************************************************************************************************************************************************************************/

@media (max-width : 1320px) {
/**************************************************************************************/

#container, #containercenter {
width: 90%;
margin-left: 5%;
}

/**************************************************************************************/
}

@media (max-width : 1200px) {
/**************************************************************************************/

nav {
width: 100%;
position: absolute;
margin-top: 90px;
}

.nav {
margin-top: 0;
margin-left: -0;
}

.nav > li {
float: none;
width: 90%;
height: auto;
padding: 0;
}

.nav a {
color: #FFFFFF;
width: 100%;
line-height: 1.5em;
padding: 12px 0;
margin: 0;
background-color: rgba(0, 0, 0, 0.7);
text-align: center;
border-bottom: 1px solid #FFFFFF;
}

.nav a:hover, #peruecken #navi01 a, #service #navi02 a, #ueber #navi03 a, #kontakt #navi04 a, #corona #navi05 a {
background-color: rgba(230, 0, 4, 1.0);
}

.nav ul {
display: block;
width: 100%;
}

.nav li ul {
z-index: 10;
overflow: auto;
display: block;
}
   
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}

.nav li li {
width: 100%;
}

.nav li li a, #peruecken #navi01 li a, #service #navi02 li a {
padding: 12px 5%;
line-height: 1.5em;
background-color: rgba(0, 0, 0, 0.6);
width: 90%;
}

.nav li li a:hover, #peruecken #navi01 li a:hover, #service #navi02 li a:hover {
background-color: rgba(230, 0, 4, 1.0);
}

.nav > li.hover > ul {
left: 0;
width: 100%;
padding-top: 0;
}

/**************************************************************************************/
}

@media (max-width : 1000px) {
/**************************************************************************************/

#startleistungeinzel {
width: 23%;
margin-right: 2%;
}

/**************************************************************************************/
}

@media (max-width : 700px) {
/**************************************************************************************/

#slider, #headerbild {
margin-top: 85px;
}

/**************************************************************************************/
}

@media (max-width : 600px) {
/**************************************************************************************/

h2.footer {
display: block;
margin-right: 30px;
margin-bottom: 0;
}

#startleistungeinzel {
width: 31%;
margin-right: 2%;
}

#tableft {
float: none;
width: 100%;
}

#tabright {
float: none;
width: 100%;
margin-top: 30px;
}

#produktlinks {
display: none;
}

#produktlinksmobile {
display: block;
padding: 25px 5% 10px 5%;
}

#maps, .google-maps {
height: 250px;
}

/**************************************************************************************/
}

@media (max-width : 500px) {
/**************************************************************************************/

#logo {
width: 75%;
margin-top: 5%;
}

/**************************************************************************************/
}

@media (max-width : 400px) {
/**************************************************************************************/

h1, h2, h3 {
font-size: 140%;
line-height: 1.3em;
}

#startleistungeinzel {
width: 100%;
margin-right: 0;
}

#startleistungeinzel img {
width: 100%;
height: auto;
}

/**************************************************************************************/
}