@font-face{
    font-family:"Futura"; /*BT W01 Book*/
		src:url("fonts/FS-WebFonts-459692923/Fonts/1119939/17fe4ab4-6e45-4ea2-bb53-2123063911c3.eot?#iefix");
		src:url("fonts/FS-WebFonts-459692923/Fonts/1119939/17fe4ab4-6e45-4ea2-bb53-2123063911c3.eot?#iefix") format("eot"),
				url("fonts/FS-WebFonts-459692923/Fonts/1119939/46ce09db-0ca6-4e0c-acea-3ee8c8867f10.woff2") format("woff2"),
				url("fonts/FS-WebFonts-459692923/Fonts/1119939/142b09e6-c245-4ff7-b01c-325fa824c99e.woff") format("woff"),
				url("fonts/FS-WebFonts-459692923/Fonts/1119939/e4509cd4-7aa0-4068-89bd-95ffd0bfb6d4.ttf") format("truetype");
} 


body{
	width: 100%;
	font-family: sans-serif;
	text-align: center;
}

#materialien:before {
	content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("bilder/materialien/holz-hintergrund-materialien.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#materialien {
	margin-top: 56px;
}

#messergriffe:before {
	content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("bilder/messergriffe/messergriffe-vorlagen-rohlinge.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
}

#messergriffe {
	margin-top: 56px;
}

#hippekniep:before {
	content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("bilder/hippekniep/carbonstahl-holz-hochwertig.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#hippekniep {
	margin-top: 56px;
}

#über-uns:before {
	content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("bilder/über-uns/handarbeit-messergriff-hintergrund.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#über-uns {
	margin-top: 56px;
}

.futuraFont{
	font-family: 'Futura', sans-serif;
}

h1 {
	font-family: 'Futura', sans-serif;
	letter-spacing: 4px;
}

.alignleft{
	text-align: left;
}

.navbar {
	background-color:  rgba(89, 55, 41, 1);
	color: black;
}

.navbar-brand{
	letter-spacing: 3px;
	font-weight: bold;
}

.landing-hero{
	width: 100%;
	height: 580px;
	margin-top: 56px;
	background: url("bilder/hippekniep-landing.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.header{
	margin-top: 0;
	padding: 0;
	height: auto /*400px*/;
}

.statement{
	padding: 40px 0;
	text-align: center;
	height: auto;
	background-color: rgba(119, 85, 71, 0.9);
	color: white;
	font-size: 0.9em;
}

.solid-statement{
	background-color: rgba(119, 85, 71, 1);
}

#brandHeader{
	font-weight: bold;
	text-align: center;
	color: white;
	padding-top: 240px;
	letter-spacing: 15px;
}

#brandSubHeader{
	text-align: center;
	color: white;
}

.section{
	background-color: 	#ffffff;
	padding: 10vh 15%;
	height: auto;
}

.section h1{
	text-align: center;
}

.blank{
	height: 300px;
}

.übergang{
	height: 65px;
	background-image: linear-gradient(rgba(119, 85, 71, 1), rgba(119, 85, 71, 0.9), rgba(119, 85, 71, 0.8), rgba(119, 85, 71, 0.7), rgba(119, 85, 71, 0.6));
}
.nav-pills > .nav-item {
	margin: 15px 5px;
}

ul.nav.nav-pills{
	justify-content: space-around;
	color: #ccc;
}

a.nav-link{
	color: white;
}

.nav-pills .nav-item{
	background-color: rgba(119, 85, 71, 0.6);
	border-radius: .25rem;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
	background-color: rgba(119, 85, 71, 0.9);
}

.media{
	margin: 15px 0 30px 0;
}

.footer{
	padding: 40px 0 25px 0;
	text-align: center;
	height: auto;
	background-color: rgba(79, 45, 31, 0.9);
	color: white;
	font-size: 0.9em;
}

.zeroMargin{
	margin: 0 0 0 0;
}

.storyPic{
	height: 350px;
}

.row{
	margin-left: 0;
	margin-right: 0;
}

/* Seitenspezifisch: Landing Page */

.media-content{
	width: 50%;
	text-align: center;
	padding: 5px;
	margin: 5px;
	border: 2px solid rgb(79, 45, 31);
	border-radius: 1%;
}

/* Seitenspezifisch: Materialien Seite */

.nav{
	margin: 45px auto;
}

/* Seitenspezifisch: Über uns; 
	 Inspiration von Codepen */
	 
.timeline {
  list-style: none;
	position: relative;
	padding: 20px 0;
}
.timeline:before {
	background-color: #eeeeee;
	bottom: 0;
	content: " ";
	left: 50%;
	margin-left: -2.5px;
	position: absolute;
	top: 0;
	width: 5px;
}
.timeline > li {
  margin-bottom: 20px;
  position: relative;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li > .timeline-panel {
  width: 46%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}
.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.timeline > li > .timeline-badge {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 26px;
  left: 50%;
  margin-left: -17px;
  background-color: rgb(79, 45, 31);
  z-index: 100;
  border-radius: 100%;
}
.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline-title {
  margin-top: 0;
  color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}
.timeline-body > p + p {
  margin-top: 5px;
}

.timeline img{
	width: 100%;
	max-width: 250px;
}


/*  Seitenspezifisch: Kontakt  */

#maps{
	margin-bottom: -7px;
}

.placeholder{
	height: 5vh;
}

.card{
	width: 100%;
	margin: auto;
}

#cardContent{
	float: left;
	margin: 15px;
}

@media only screen and (max-width: 750px) {
	.media:not(.zeroMargin) {
		display: flex;
		flex-direction: column;
	}

	.media-body:not(.zeroMargin > .media-body) {
		padding: 25px 0;
	}

	.storyPic {
		height: auto;
		width: 100%;
		margin: 5% 0 !important;
	}

	#materialien {
		background-repeat: repeat;
	}

	#certBig {
		height: auto;
		width: 35%;
		align-self: center !important;
	}
 
	.timeline > li > .timeline-panel {
		/* width: 65%; */
		padding: 5px 0 0 0%;
	}

	.section {
		padding: 10vh 7%;
	}
} 

@media only screen and (min-width: 1600px) {
	.img-fluid {
		width: 100%;
	} 
}