@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700|Work+Sans');

body {
	font-family: 'Work Sans', sans-serif;
	font-style: normal;
	font-weight: 100;
}

h1{
	font-family: 'Playfair Display', serif;
}

.navbar{
	padding: 16px 16px;
}

.box-shadow{
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.absatz{
	padding-top:16px;
	padding-bottom:16px;
}

.wrapper{
	padding-top:32px;
}

.fixed-top{
	z-index:1;
}

.ratio{
	position:relative;
	width: 100%;
	height: 512px;
	padding-bottom: 10% ; /* % of width, defines aspect ratio*/
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

html {
  position: relative;
  min-height: 100%;
}

body {
	margin-top: 72px; /* Margin top by nav height */
	margin-bottom: 136px; /* Margin bottom by footer height */
}

.footer-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
}

.footer-bottom .container{
	padding-top: 44px;
	padding-bottom: 44px;
}

.footer-bottom  ul{
	margin-bottom:0px !important;
}

.footer-bottom p{
	margin-bottom: 0 !important;
}

/* Carousel base class */
.carousel {
	margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
	bottom: 3rem;
	z-index: 10;
}

/* Declare heights because of positioning of img element */
	.carousel-item {
	height: 32rem;
	background-color: #777;
}
.carousel-item > img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 32rem;
}

.img-abstand{
	padding-bottom:30px;
}

h2.absatz{
	font-family: 'Playfair Display', serif;
	font-size:38px;
}

p.absatz{
	font-family: 'Work Sans', sans-serif;
	font-size:16px;
}


.featurette-divider {
	margin: 5rem 0; /* Space out the Bootstrap hr more */
}

.row{
	padding-bottom:40px;
}

@media (min-width: 40em) {
	/* Bump up size of carousel content */
	.carousel-caption p {
		margin-bottom: 1.25rem;
		font-size: 1.25rem;
		line-height: 1.4;
	}
	
	h2.absatz{
		font-size:64px;
	}
	
	p.absatz{
		font-size:18px;
	}
}