/* Inhaltsverzeichniss


    1. Default css in index.html (Inline)
    2. Preloader css in index.html (Inline)
    3. Mouse Animation css in index.html
    4. Nav Bereich css
    5. Banner Bereich css
    6. About Bereich css
    7. Services Bereich css
    8. Number Bereich css
    9. Portfolio Bereich css
    10. Testimonial Bereich css
    11. Contact Bereich css
    12. Brand Bereich css
    13. Footer Bereich css

*/

.fixed-news {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 10px;
	right: 10px;
	background-color: #f59d00e6;
	height: 165px;
	width: 165px;
	padding: 20px;
	-webkit-clip-path: circle(50% at 50% 50%);
	clip-path: circle(50% at 50% 50%);
	z-index: 100;
}

.fixed-news a {
	font-family: "Helvetica Neue";
	color: #fff;
	text-align: center;
	font-weight: 500;
	letter-spacing: .4px;
}

.fixed-news a:hover {
	text-decoration: none;
}

.fixed-news img {
	width: 24px;
	height: auto;
}

#neuigkeiten {
	background: white;
	padding: 20px 30px;
	text-align: left;
	max-width: 400px;
	margin: 40px auto;
	position: relative;
}

#neuigkeiten h3 {
	color: #f5a91f;
	padding-bottom: 15px;
}


/*---------- 4. Nav Bereich css beginnt  -------------*/
.nav-area {
	height: 100px;
	width: 100%;
	background: #fff;
	z-index: 1111;
	top: 35px;
}

.navbar-nav {
	height: 100%;
	margin-right: 50px;
}


.navbar {
  border: 0;
  margin-bottom: 0;
}

.nav-area.sticky_navigation {
	background: rgb(255, 255, 255);
	height: 90px;
}

.sticky_navigation {
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.sticky_navigation .main-menu {
  margin-top: 0px;
}

.sticky_navigation span {
  color: #000;
}

.sticky_navigation .nav li a {
	color: #f5a91f;
}

.sticky_navigation .nav li.active a {
	color: #fff;
	background-color: #f5a91f;
}

.sticky_navigation .nav li.active::after {
  border-bottom: 0;
  content: "";
  display: block;
  margin: 0 auto;
  width: 50%;
}

.sticky_navigation .navbar-brand:hover {
  color: #000;
}


.main-menu {
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.navbar-brand {
	display: block;
	vertical-align: middle;
	height: auto;
	max-width: 400px;
	padding: 5px 0;
}

.logo-anim {
  transition: all 0.2s ease;
}

.navbar-brand:focus, .navbar-brand:hover {
  text-decoration: none;
}

.navbar-right li {
  display: inline-block;
  float: none;
  cursor: pointer;
}

.navbar-right li a {
	color: #f49c00;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	padding: 55px 20px 15px 20px;
}

.nav>li>a:hover,
.nav>li>a:active,
.nav>li>a:focus {

}

.navbar-toggle {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.navbar-toggle .icon-bar {
  background: #033D75;
}

/*---------- Nav Bereich css endet -------------*/

/*--------------topbar Bereich beginnt  -------------*/
.topbar-area {
  background: #232323;
  color: #999999;
  padding: 10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 1012;
  font-size: 12px;
}
.topbar-area ul {
    text-align: right;
}

.topbar-area li {
  display: inline-block;
  text-decoration: none;
  list-style: none;
}
.topbar-area li:after {
    content: "| ";
    padding: 0 5px;
}
.topbar-area li:last-child:after {
    content: "";
}

.topbar-area a {
  color: #999999;
  text-decoration: underline;
}

/*--------------- topbar Bereich endet -------------*/
/*----------- 5. Banner Bereich css beginnt --------------*/
.banner-area {
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url(../images/startseite.jpg);
    background-position: top center;
    background-size: cover;
    position: relative;
    height: 85vh;
    width: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;

}


.banner-table {
	display: table;
	margin: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
}

.banner-table-cell {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}

.banner-area h2 {
	font-family: 'Roboto';
	font-weight: 500;
	color: #fff;
	font-size: 48px;
	text-transform: uppercase;
  margin: 0;
  margin-bottom: 5px;
}

.banner-area h3 {
	font-family: 'Roboto';
	font-size: 30px;
	font-weight: 300;
	color: #fff;
	text-transform: uppercase;
}

.banner-btn {
	border-radius: 1px;
	padding: 10px 30px;
	box-shadow: inset 0 0 0 5px transparent;
	background-color: #931914;
	border-color: transparent;
	font-family: 'Roboto' !important;
	font-weight: 500 !important;
	font-size: 16px;
	text-align: center;
	text-transform: uppercase;
	/* margin: 0 auto; */
	margin-top: 30px;
	display: table;
	transition: all 0.2s;
}

.banner-btn:hover {
	background-color: #6c1310;
	border-color: transparent;
}

.banner-btn:active, .banner-btn:focus {
	background-color: #4e1f1e;
	border-color: transparent;
}

.banner-area .red-block {
	position: absolute;
	content: '';
	background-color: #931914;
	height: 270px;
	width: 1100px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	top: 75%;
}

.banner-area .text-overlay {
	position: relative;
	text-align: center;
	color: #fff;
	margin-left: auto;
	margin-right: auto;
	top: 30%;
	left: 0;
	right: 0;
}

.banner-area .text-overlay h3 {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.15em;
}

.banner-area .text-overlay p {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.15em;
}


/*---------Banner Bereich css endet--------------*/


/*---------------7. Leistung Bereich beginnt --------------*/

.ueber-uns {
  background-color: #fafafa;
    position: relative;
    padding: 90px 0 0 0;
}

.ueber-uns-block {
	background-color: #fff;
	padding: 60px 75px;
	position: relative;
    z-index: 2;
    width: 90%;

}
#ueber-uns .pattern {
    position: absolute;
    background: url(../images/pattern.svg);
	width: 700px;
	height: 500px;
	right: 100px;
	z-index: 2;
	margin-top: -200px;
}
#ueber-uns .orange-flaeche {
    background: #feefd4;
    width: 80%;
    padding: 80px;
    position: absolute;
    left: 5%;
    right: 5%;
    margin: auto;
    height: 400px;
    top: 180px;
}
.container-2 {
    width: 1330px;
    padding: 0 80px 80px 80px;
    background: #feefd4;
    margin: auto;
    position: relative;
}
.container-2::before {
	border-top: 80px solid #fafafa;
	width: 100%;
	content: "";
	top: 0;
	position: absolute;
	z-index: 2;
	left: 0;
}

.ueber-uns-heading {
  text-transform: uppercase;
  color: #907975;
  font-weight: 300;
}

.ueber-uns-heading strong {
  font-weight: bold;
}

.ueber-uns-kontakt {
  color: #907975;
  font-size: 18px;
  font-weight: 500;
}

.ueber-uns-tel:hover, .ueber-uns-tel:active,
.ueber-uns-email:hover, .ueber-uns-email:active {
  color: inherit;
}

.ueber-uns-tel img,
.ueber-uns-email img {
  margin-right: 10px;
}

.ueber-uns-tel {
	color: #383838;
  font-size: 16px;
	margin: 15px 0;
	display: inline-block;
}

.ueber-uns-email {
  color: #907975;
  font-size: 16px;
}

/* Block 2 */

.ueber-uns-block2 {
  display: flex;
  position: relative;
  margin-top: 100px;
}

.ueber-uns-block2-img {
	width: 30%;
	height: 500px;
	object-fit: cover;
}

.block-entrys {
	width: 70%;
	display: flex;
	flex-wrap: wrap;
}

.block-entry {
	flex-basis: 50%;
	padding: 30px;
}

/*--------------- Leistung Bereich endet --------------*/

/*---------- leistungen Bereich css beginnt ---------------*/

.leistungen {
  background-color: #907975;
}

.leistungen-block {
	background-color: #fff;
	padding: 60px 75px;
	position: relative;
	z-index: 5;
}

.leistungen-heading {
  text-transform: uppercase;
  color: #907975;
  font-weight: 300;
}

.leistungen-heading strong {
	font-weight: bold;
}

.grid-item {
	text-align: center;
	margin: 35px 0;
}

.grid-item * {
  margin-top: 15px;
}

.grid-item a {
  display: inline-block;
  position: relative;
  color: #383838;
  font-weight: 600;
}

.grid-item p {
	width: 70%;
	margin: 0 auto;
	position: relative;
}

.grid-item h3 {
  color: #f49c00;
  font-weight: bold;
  text-transform: uppercase;
}

.grid-item img {
	background-color: #f49c00;
	height: auto;
	width: 90px;
	-webkit-clip-path: circle(45% at 50% 50%);
	clip-path: circle(45% at 50% 50%);
	padding: 20px;
}


/*------- leistungen Bereich css endet--------------*/

/*------- foto stoerer Bereich css startet--------------*/

.foto-stoerer {
  position: relative;
}

.foto-stoerer img {
	width: 100%;
	height: 70vh;
	object-fit: cover;

}

.foto-stoerer::before {
	content: '';
	position: absolute;
	background-color: #fff;
	height: 200px;
	width: 100vw;
	right: 0;
	top: -200px;
	/* margin-left: -203px; */
	z-index: 0;
}

/*------- foto stoerer Bereich css endet--------------*/

/*------- das Team Bereich css startet--------------*/

.das-team {
  background-color: #fafafc;
}

.subline {
  width: 45%;
}

.team-block {
  padding: 60px 75px;
  position: relative;
  border-bottom: 3px solid #f49c00;
}

.team-heading {
  text-transform: uppercase;
  color: #907975;
  font-weight: 300;
}

.team-heading strong {
  font-weight: bold;
}

.team-grid-item > h3,
.team-grid-item > p:nth-of-type(n+1),
.team-grid-item > img  {
  margin-top: 30px;
}

.team-grid-item img {
  height: auto;
  width: 224px;
  object-fit: contain;
}

.team-grid-item h3 {
  color: #f49c00;
  font-weight: bold;
  text-transform: uppercase;
}

/*------- das Team Bereich css endet--------------*/

.kontakt {
  background-color: #fafafa;
}

.kontakt-block {
  background-color: #feefd4;
  padding: 60px 75px;
  position: relative;
}

.kontakt-heading {
  text-transform: uppercase;
  color: #907975;
  font-weight: 300;
}

.kontakt-heading strong {
  font-weight: bold;
}

.kontakt-block h3 {
  text-transform: uppercase;
  color: #f49c00;
  font-weight: 600;
  font-size: 22px;
  width: 40%;
}

.kontakt-block img {
  height: auto;
  width: 28px;
  margin-right: 10px;
  margin-bottom: 5px;
}

.kontakt-block a {
  color: #907975;
}

.kontakt-block p {
	font-size: 14px;
}

.maps-block {
	width: 100%;
	height: 400px;
	position: absolute;
}

/* Impressum Bereich */

.impressum {
	background-color: #907975;
	padding: 60px 75px;
	color: #fff;
	font-weight: 300;
}

.impressum p a {
	color: #fff;
	font-weight: 500;
}

.impressum h2 {
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 500;
}

.impressum h3 {
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 500;
	margin: 20px 0;
}

@media screen and (max-width: 1330px) {
    .container-2 {
        width: 100%;
        padding: 0 5%;
    }
}

@media only screen and (max-width: 1199px) and (min-width: 991px) {
	.resp-fix {
		margin-left: 30px;
	}
}

/* Medium Layout: 1280px. */

@media only screen and (max-width: 1199px) {

  .banner-area .red-block {
  	width: 767px;
  }
  .banner-area .text-overlay h3 {
  	font-size: 14px;
  }
  .banner-area .text-overlay p {
  	font-size: 12px;
  }
	.maps-block {
		margin-top: 10px;
		position: relative;
	}
	.leistungen-block {
		padding: 60px 15px;
	}
}

/* Tablet Layout: 768px. */
@media only screen and (max-width: 991px) {

	.banner-area {
		height: 70vh;
	}

  .main-menu {
    margin-top: 0;
  }

  .navbar-nav {
    margin: 10px 0;
  }

	.navbar-brand {
		padding: 20px 0px 10px 0px;
	}

	.navbar-brand {
		max-width: 330px;
	}

  .navbar-brand>img {}

	.navbar-nav > li > a {
		font-size: 14px;
		padding: 35px 10px 15px 10px;
	}

  .sticky_navigation .nav li.active::before {
    margin: 1px auto;
  }

  .sticky_navigation .nav li.active::after {
    margin: 1px auto;
  }

  .sticky_navigation .navbar-brand {
  	max-width: 330px;
  }
	.banner-area::before {
		width: 500px;
		height: 350px;
		right: 95px;
	}
	.banner-area::after {
		width: 90vw;
		height: 350px;
		left: 5vw;
		margin-top: 275px;
	}
	.leistungen-block {
		padding: 60px 75px;
	}
	.impressum {
		padding: 60px 15px;
	}

}

  /* Mobile Layout: 320px. */
  @media only screen and (max-width: 767px) {
    .banner-content {
      position: absolute;
      top: -330px;
      left: 50px;
      width: 300px;
      height: 300px;
    }

    h1.banner-headline {
    	padding-top: 90px;
    }

    .nav-area {
      height: 115px;
    }

    .navbar-toggle {
      margin-top: -10px;
    }

    .navbar-toggle .icon-bar {
    	background: #000;

    }
    .pattern {
        display: none;
    }
      .ueber-uns-block {
          width: 100%;
      }

		.navbar-nav {
			/* float: right; */
			/* margin-right: 32%; */
			display: inherit;
			width: 200px;
			background-color: transparent;
			margin: 0 auto;
			position: relative;
			display: block;
		}

		.navbar-nav li {
			display: inherit;
			width: 100%;
			margin: 10px 0;
		}

    .navbar-fixed-top .navbar-collapse {
    	background-color: rgb(54, 56, 54, 0.95);
    	z-index: 1000;
    }

		.navbar-fixed-top .navbar-collapse {
			width: 100%;
			margin: 35px 0;
			text-align: center;
		}

		.navbar-right li a {
			color: #fff;
			text-transform: uppercase;
			font-weight: 400;
			font-size: 16px;
			padding: 25px 0px;
		}

    .navbar-nav {
      text-align: center;
    }

    .sticky_navigation .navbar-toggle {
      margin-top: -20px;
    }

		.sticky_navigation .nav li.active a {
			color: #fff;
		}

		.sticky_navigation .nav li a:hover {
			color: #fff;
			font-weight: 600;
			background-color: #f5a91f;
		}
    .sticky_navigation .nav li a {
    	color: #fff;
    }
    .banner-area .text-overlay h3 {
    	font-size: 14px;
    	width: 70%;
    	margin: 0 auto;
    }
    .banner-area .text-overlay p {
    	font-size: 14px;
    	width: 90%;
      margin: 0 auto;
    }
    .ueber-uns .margin-resp {
      margin-left: 0 !important;
    }
		.banner-area::after {
			display: none;
		}
		.banner-area::before {
			display: none;
		}
		.ueber-uns-block2 {
			flex-wrap: wrap;
			flex-direction: column;
		}
		.ueber-uns-block2-img {
			width: 100%;
		}
		.block-entrys {
			width: 100%;
		}
		.block-entry {
			flex-basis: 100%;
			margin: 15px 0;
		}
		.ueber-uns-block, .leistungen-block, .team-block, .kontakt-block, .impressum {
			padding: 40px 45px;
		}
		.grid-item p {
			width: 100%;
		}
		.team-grid-item p {
			width: 80%;
		}
		.subline {
			width: 85%;
		}

  }

  @media only screen and (max-width: 479px) {
    .navbar-toggle {
      margin-top: 35px;
    }

    .sticky_navigation .navbar-toggle {
      margin-top: 25px;
    }

    .banner-area h1 {
    	padding-top: 80px;
    }

    .banner-area .red-block {
    	top: 85%;
    }
		.navbar-brand {
			max-width: 250px;
			padding-top: 25px;
		}
		.sticky_navigation .navbar-brand {
			max-width: 270px;
			padding-top: 15px;
		}
		.fixed-news span, .fixed-news hr{
			display: none;
		}
		.fixed-news {
			height: 50px;
			width: 50px;
			padding: 10px;
		}


  }

  /* Wide Mobile Layout: 480px. */
  @media only screen and (min-width: 480px) and (max-width: 767px) {

    .navbar-toggle .icon-bar {
    	background: #000;
    	margin-top: 45px;
    }
  }

  @media only screen and (min-width: 600px) and (max-width: 767px) {
    .navbar-nav li {
      margin: 9px 0;
    }
  }

  @media only screen and (max-width: 338px) {
    .navbar-brand {
      max-width: 180px;
    }
  }