@import url("reset.css");
*{box-sizing: border-box;}
.clear {
    clear: both;
}

body {font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 23px; color: #1e1e1e; }
header {background: url(../images/header.jpg) no-repeat top center fixed; background-size: cover; height: 850px; position: relative; z-index: 99;}
.logo {position: fixed; z-index: 106; left: 7%; top: 37px;}
nav {font-size: 14px; text-transform: uppercase;  position: fixed; top:0; z-index: 105; width: 100%; padding: 0 5%; background: #fff;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);}
nav ul {text-align: right; padding: 80px 0 30px 0;}
nav ul li {display: inline-block; }
nav ul li a {color: #222222; text-decoration: none; margin-left: 15px;transition: ease-out .3s;-webkit-transition: ease-out .3s;-moz-transition: ease-out .3s;-o-transition: ease-out .3s;}
nav ul li a:hover {color: #ee2b03; transition: ease-out .3s;-webkit-transition: ease-out .3s; -moz-transition: ease-out .3s;-o-transition: ease-out .3s;}
.slogan {position: absolute; z-index: 100; top: 50%; text-align: center; font-size: 27px; left: calc(50% - 208px);}
.slogan .big {font-size: 60px; text-transform: uppercase; margin-bottom: 35px;}
.slogan p {margin-bottom: 25px;}
.stoerer {position: absolute; right: 5%; bottom: -50px; z-index: 100;}

h1,h2, h3 {text-transform: uppercase; color: #222222; font-size: 24px; font-weight: 800;-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;}

#start hr, #brandschutz hr, #kontakt hr{margin-bottom: 35px;}
#start, #kontakt {width: 100%; padding: 100px 7%;}
#start strong {font-weight: 600;}
#start ul { margin: 20px 0 35px 0;}
#start ul li {list-style-image: url(../images/list.jpg); list-style-position: inside; line-height: 35px;}
.links {width: 40%;margin-right: 15%;}
#start a {text-decoration: none; color:  #1e1e1e}
.rauchmelderpflicht {width: 480px; color:#ee2b03; padding: 10px 0 10px 10px; border: 2px solid  #ee2b03;transition: ease-out .5s;-webkit-transition: ease-out .5s; -moz-transition: ease-out .5s;-o-transition: ease-out .5s;}
.rauchmelderpflicht:hover {background: #ee2b03; color: #fff;transition: ease-out .5s;-webkit-transition: ease-out .5s; -moz-transition: ease-out .5s;-o-transition: ease-out .5s;}
.links, .rechts {display: inline-block; vertical-align: top;}

#brandschutz {width: 100%; padding: 100px 7%; background: #e5e5e5;}
#brandschutz ul li {list-style-image: url(../images/list_black.png); list-style-position: inside;}
#brandschutz strong {font-weight: 700;}
.contact {width: 100%; padding: 35px 5%; background: #dfddde; text-align: right; font-weight: 300; }
.contact a {padding: 13px 35px; background: #0072ff; color:#fff;transition: ease-out .5s;-webkit-transition: ease-out .5s; -moz-transition: ease-out .5s;-o-transition: ease-out .5s;}
.contact a:hover {background: #ee2b03;}

.kontaktdaten, .rechts {display: inline-block; vertical-align: top;}
.kontaktdaten {width: 60%; margin-right: 5%;}
#kontakt strong {font-weight: 600;}
#kontakt a:hover {color: #ee2b03}
.impress {text-decoration: underline; color: #1e1e1e}
.kontaktformular {width: 100%; min-height: 820px;}

#infos {background: #2e2e2e; color: #fff; width: 100%; padding: 65px 7% 115px 7%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center space-between; align-items: center;}

.landing a{padding: 10px; color: #fff; background: #545454; line-height: 43px; text-decoration: none;transition: ease-out .5s;-webkit-transition: ease-out .5s; -moz-transition: ease-out .5s;-o-transition: ease-out .5s;}
.landing a:hover {background: #2e2e2e;transition: ease-out .5s;-webkit-transition: ease-out .5s; -moz-transition: ease-out .5s;-o-transition: ease-out .5s;}

.daten strong {font-weight: 700;}
.landing p{font-size: 18px;}

footer {background: #202020; color: #fff; width: 100%; padding: 20px 7%; position: fixed; z-index: 101; bottom: 0;}
footer a {text-align: right; position: fixed; right: 7%; bottom: 15px; background: #ffba00; padding: 5px 40px;transition: ease-out .5s;-webkit-transition: ease-out .5s; -moz-transition: ease-out .5s;-o-transition: ease-out .5s;}
footer a:hover {color: #202020;transition: ease-out .5s;-webkit-transition: ease-out .5s; -moz-transition: ease-out .5s;-o-transition: ease-out .5s;}
.navi {display: none;}

a.anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}


/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/

@media screen and (max-width: 1450px) {
  /*CSS*/
	#start .links {margin-right: 5%;}
	.links {margin-right: 10%; width: 45%;}
	#brandschutz .rechts {width: 35%;}
}

@media screen and (max-width: 1010px) {
   /*CSS*/
	.links, .rechts {display: block; width: 100%!important;}
	.kontaktdaten {width: 100%; margin: 0;}
	#start, #kontakt, #brandschutz {padding: 100px 5%;}
	footer {padding: 20px 5%;}
	nav {padding: 0 5%;}
	.logo {left: 5%;}
	#infos {padding: 65px 5% 115px 5%;}
}

@media screen and (max-width: 820px) {
   /*CSS*/
	header {height: 550px;}
	#infos {display: block;}
	.daten, .landing {display: inline-block; vertical-align: top;}
	.daten {margin-right: 3%;}
	.ubs {margin-bottom: 10px;}
}

@media screen and (max-width: 660px) {
   /*CSS*/
	.daten, .landing {display: block;}
	header nav {display: none;}
	.logo {left: calc(50% - 63px); top: 10px; }
	.firmenlogo {width: 100%;background: #fff;  height: 85px; position: fixed; z-index: 105;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);}
	footer p{display: none;}
	footer {padding: 32px 0;}
	.rauchmelderpflicht {width: 100%;}
	#start ul li, #brandschutz ul li {list-style-position: outside;}

/*responsive navi*/
	.navi {display: block;}
.navi ul li{height: 50px;}
.b-a, .bar, .bar:before, .bar:after {
  transition: all .25s;
  content: "";
  position: absolute;
  left: 0;
  height: 6px;
  width: 30px;
  border-radius: 15px;
  background-color: rgba(238, 43, 3, 0.95);
}

.menu-collapsed {
  transition: all .25s;
  position: fixed;
  top: 10px;
  left: 9px;
  height: 36px;
  width: 36px;
  z-index: 105;
  cursor: pointer;
}
.menu-collapsed ul {
  transition: all 0s;
  position: fixed;
  left: -9000px;
}

.bar {
  position: fixed;
  left: 12px;
  top: 24px;
}
.bar:before {
  top: -8px;
}
.bar:after {
  top: 8px;
}

.b-a-expanded, .menu-expanded .bar:before, .menu-expanded .bar:after {
  transition: all .25s;
  top: -0px;
}

.menu-expanded {
  transition: all .25s;
  text-align: center;
  line-height: 200px;
  height: 100%;
  width: 100%;
  border-radius: 0px;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.85);
}
.menu-expanded ul {
  transition: all 0s;
  position: relative;
  left: 0;
  z-index: 2;
}
.menu-expanded a {
  transition: all .15s;
  text-decoration: none;
  font-size: 2em;
  padding: 5px;
  color: #fff; width: 100%;
}
.navi ul li a:hover {color: rgba(255,255,255,.3)}
	
.menu-expanded .bar {
  background-color: transparent;
  transition: all .25s;
}
.menu-expanded .bar:before {
  transform: rotate(45deg);
}
.menu-expanded .bar:after {
  transform: rotate(-45deg);
}

.row {
  padding-top: 150px;
}
}

/*responsive navi*/

@media screen and (max-width: 460px) {
   /*CSS*/
	.rechts img {width: 100%;}
	.kontaktformular {min-height: 680px;}
	footer {padding: 16.5px 0;}
	footer a {
    background: #ffba00 none repeat scroll 0 0;
    bottom: 0;
    font-size: 10px;
    padding: 5px 15px;
    position: fixed;
    right: 0;
    text-align: right;
    transition: all 0.5s ease-out 0s;
}
	.rauchmelderpflicht {padding: 10px;}
}

@media screen and (max-width: 430px) {
   /*CSS*/
	.slogan{left: calc(50% - 142px);font-size: 18px;}
	.slogan .big {font-size: 41px; margin-bottom: 18px;}
	.slogan p {margin-bottom: 15px;}
	.stoerer {display: none;}
}
@media screen and (max-width: 320px) {
   /*CSS*/
	header {height: 450px;}
	footer a {right: 15%;}
}