* {
	margin: 0;
  	padding: 0;
  	text-decoration: none;
  }

/* Fonts */

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto/Roboto-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

/* Animation */


@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes heart {
  0%   {width: 460px;}
  25%  {width: 466px;}
  50%  {width: 463px;}
  75%  {width: 466px;}
  100% {width: 460px;}
}

@keyframes heartsmall {
  0%   {width: 320px;}
  25%  {width: 326px;}
  50%  {width: 323px;}
  75%  {width: 326px;}
  100% {width: 320px;}
}


/* HTML Elemente */

body {
	background-color: #161616;
	position: relative;
}

p,
li {
	font-size: 16px;
	font-family: 'Roboto';
	color: #fff;
	font-weight: 200;
	line-height: 1.4;
}

ul {list-style-type: none;}

li {margin-left: 20px;}

a {
	font-size: 16px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	transition-duration: 0.2s;
}

a:hover {color: #999;}

h1, h2, h3 {
	font-family: 'Roboto', sans-serif;
	color: #fff;
	font-weight: 800;
}

h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
	color: #fff;
	font-weight: 600;
}

h1 {font-size: 36px;}

h2 {font-size: 30px;}

h3 {font-size: 26px;}

h4 {font-size: 22px;}

h5 {font-size: 18px;}

h6 {font-size: 16px;}

blockquote {color: #fff;
			margin: 15px 0;
			padding-left: 20px;
			font-family: 'Roboto', sans-serif;
			font-weight: 300;
			font-size: 20px;
			line-height: 1.6;
}


/* globale Elemente */

.divider {height: 2px;
			width: 50px;
			background-color: #fff;
			margin: 25px 0;}

.leseprobe-link {margin: 10px 0;
				display: inline-block;}

.leseprobe-link img {width: 52px;
					height: auto;}

.sub-wrapper {padding: 250px 50px;}

.sub-wrapper p,
.sub-wrapper ul {margin-bottom: 20px;
				list-style-type: disc;}


/* Navigation */

nav {
	padding: 15px 25px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
}

nav div {
	text-align: right;
}

nav div a {
	font-size: 18px;
	font-weight: 200;
	margin: 0 25px;
}

nav div a:nth-child(2) {
	margin: 0 20px 0 0;
}

nav div a:hover {
	color: #999;
}

nav div img {
	width: 60px;
	height: 60px;
	margin-bottom: -20px;
}


/* Header */

header {
		position: relative;
		height: 100%;
	}

.header-wrapper div img {
	width: 100%;
	height: auto;
}

.header-wrapper .header-text {
	width: 40%;
	position: absolute;
	top: 33%;
	right: 15%;
}

.header-wrapper .header-text h2 {
	margin-bottom: 30px;
	font-weight: 600;
	font-size: 36px;
}


/* About */

.about-wrapper {
	position: relative;
	height: 100vh;
	text-align: center;

}

.about-wrapper .about-image {
	position: absolute;
	width: 70%;
	top: 20%;
	right: 0;
	overflow-x: hidden;
}

.about-wrapper .about-image img {
	width: 460px;
	height: auto;
	animation-name: heart;
  	animation-duration: 1.5s;
  	animation-iteration-count: infinite;
}

.about-wrapper .about-text {
	text-align: left;
	width: 40%;
	position: absolute;
	top: 33%;
	left: 10%;
}

.about-wrapper .about-text h1 {
	margin-bottom: 30px;
	font-weight: 800;
}

.about-wrapper .about-text h3 {
	font-weight: 300;
}


/* Slider */

* {box-sizing:border-box}

.slider-wrapper {padding-bottom: 30px;}

.slideshow-container {
  width: 100%;	
  /* max-width: 1000px; */
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 50%;
  left: 40%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 33%;
  /* text-align: center; */
}


.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  z-index: 999;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

.slideshow-container div .text h4 {
	margin-bottom: 20px;
}

.slideshow-container div .text p {
	margin-bottom: 10px;
}


/* Footer */

footer {
		background-color: #000;
		display: flex;
		flex-direction: row;
}

footer .footer-block-left,
footer .footer-block-right {
	width: 50%;
	box-sizing: border-box;
	padding: 20px;
}

footer .footer-block-right .icon-nav ul {
	display: flex;
	flex-direction: row-reverse;
	box-sizing: border-box;
	padding-top: 6px;
}

footer .footer-block-right .icon-nav ul li:nth-child(2) {
	margin: 4px 10px 0 0;
}

footer .footer-block-right .icon-nav ul li a img {
	width: 24px;
	height: auto;
	transition-duration: 0.2s;
}

footer .footer-block-right .icon-nav ul li a img:hover {
	opacity: 0.6;
}

/* Für Media Querie flex-direction column oder column-reverse */


/* Media Queries */

@media only screen and (max-width: 1400px) {
 
	.about-wrapper .about-image img {
	width: 260px;
	}

   .about-wrapper .about-text {
	width: 75%;
	top: 35%;
	}

}

@media only screen and (max-width: 1300px) {
 
  .header-wrapper .header-text {
	top: 15%;
	}

}

@media only screen and (max-width: 1200px) {
 
  .text {width: 55%;}

}

@media only screen and (max-width: 1000px) {
 
  body {
  	background-color: #222;
  }

  .header-wrapper div img {
	width: 120%;	
  }

  .header-wrapper .header-text {
  	width: 100%;
  	right: 0;
  	top: 20%;
  	padding: 50px 20px;
  }

  .about-wrapper .about-text {
	width: 100%;
	top: 20%;
	left: 0;
	padding: 50px 20px
	}

	.about-wrapper .about-image img {
	animation-name: heartsmall;
  	animation-duration: 1.5s;
  	animation-iteration-count: infinite;
}

}

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

  	.slideshow-container {margin: 50px 0 100px 0}

}

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

  .text {
  	width: 100%;
  	left: 0;
  	padding: 0 50px;
  	-ms-transform: translate(0, -50%);
  	transform: translate(0, -50%);
  	}

  	.slideshow-container {margin: 50px 0 50px 0}

}

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

  .about-wrapper .about-text {
	padding: 0 20px 0 20px;
	}

	.slideshow-container {margin: 150px 0 100px 0}

}

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

  .header-wrapper {
	width: 100%;

  }	

  .header-wrapper .header-image {
	overflow-x: hidden;
  }

  .header-wrapper div img {
	width: 200%;	
  }	

}

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

	.slideshow-container {margin: 250px 0 150px 0}

}

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

	.about-wrapper {margin-top: 250px;}

	.slideshow-container {margin: 350px 0 200px 0}

}

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

	.slideshow-container {margin: 450px 0 200px 0}

	footer .footer-block-left {
		width: 66%;
	}

	footer .footer-block-right {
		width: 33%;
	}

}

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

	.slideshow-container {margin: 500px 0 250px 0}

}


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

	.about-wrapper {margin-top: 420px;}

	.slideshow-container {margin: 700px 0 350px 0}

	 .about-wrapper .about-text {
	padding: 0 10px 0 10px;
	}

}

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

	.about-wrapper {margin-top: 520px;}

	.slideshow-container {margin: 780px 0 420px 0}

}