@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text');

a:link{
	text-decoration: none;
	font-weight: 500;
}

* {
	font-family: 'Quicksand', arial; font-size: 12pt; color: #000000; 
}
.font-serif {
	font-family: 'Crimson Text', serif;
}
.clearfix:after { 
   content: ""; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
.clear{
clear:both;
}
* {
	box-sizing: border-box; /* border box ist dafür da, dass Element immer die gew. Höhe behält, egal ob Padding oder marging noch hinzukommt */
}
body{
	margin: 0;
}
.wrapper{ /* alles mit dem Punkt . kann man selber benennen */
		background-color: white;
		margin-right: 30px;
		margin-left: 30px;
		margin-bottom: 30px;
}
.wrapper.nomargin{
	margin-bottom: 0;
}
ul.navigation,
ul.hotlink{ /* gesamte Navigation */
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-left: 30px;
	padding-right: 30px;
	position: fixed;
	z-index: 1000;
	left: 0;
	right: 0;
	background-color: white;
}
ul.navigation {
	top: 0;
}
.navigation li,
.hotlink li{ /* einzelne Kästen von Navigation */
	width: 12%;
	float: left;
	margin-right: 1.6%;
	margin-left: 1.6%;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	height: 20px;
}
.navigation li:first-child,
.hotlink li:first-child{
	margin-left: 0px;
	text-align: left;
	margin-right: 0px;
}
.navigation li:last-child,
.hotlink li:last-child{
	margin-right: 0px;
	text-align: right;
	margin-left: 0px;
}
.navigation li a,
.hotlink li a{ 
	text-transform: uppercase;
}
ul.hotlink{
	background-color: #303030;
	bottom: 0;
	color: white;
}
ul.hotlink a{ /* a steht für link, darum Farbe weiss */
	color: white;
}
.slider {
	position: absolute;
    min-height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 40px 30px 30px 30px;
    overflow: hidden;
}
.slider ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	height: 100%
}
.slider ul li img{
	width: 100%;
	display: block;
}
.slider ul li{
	width: 100%;
	display: inline-block; /* ist nebeneinander aber hat Höhe - Unterschied zwischen Inline und Block element */
	position: relative;
}
.slider ul li div.slogan{
	position: absolute; /* absolute bezieht sich auf das Vorhergegangene relative */ 
	top: 200px;
	left: 80px;
	font-size: 75pt;
	font-weight: 400;
	font-style: italic;
	color: white;
}
.slider ul li div.zitat{
	position: absolute; /* absolute bezieht sich auf das Vorhergegangene relative */ 
	top: 610px;
	left: 1100px;
	font-size: 35pt;
	font-weight: 100;
	font-style: italic;
	color: white;
}
.slider ul li div.arrow{
	position: absolute;
	bottom: 300px;
	width: 200px;
	height: 200px;
	left: 50%;
	margin-left: -100px;
	transform: rotate(90deg);
	text-align: center;
}
.slider ul li div.arrow a{
	font-size: 130px;
	color: white;
}
.content{
	margin-top: 40px;
}
.content .left,
.content .right
{
	float: left;
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative; 
}
.content .right:after, /*leerer Inhalt ¨für Höhe */
.content .left:after 
{
  padding-top: 100%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.content.is-half .right:after, /*leerer Inhalt ¨für Höhe */
.content.is-half .left:after 
{
  padding-top: 66%;
}
.content-inner {
	padding: 50px;
  position: absolute; /* Positionierung im Element right und left */
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow-x: hidden;
  background-color: #f9f9f9;
}
.has-content-image-full {
	overflow: hidden;
}
.content-image-full {
	width: 100%;
}


.content-inner.is-gallery {
	padding: 0;
	overflow: hidden;
}
.content-inner.is-gallery .gallery-image{
  width: 33.33%; /* as @passatgt mentioned in the comment, for the older browsers fallback */
  height: 33.33%; /* as @passatgt mentioned in the comment, for the older browsers fallback */
  width: calc(100% / 3);
  height: calc(100% / 3);
  float: left;
  display: block;
	position: relative;
}
.content-inner.is-gallery .gallery-image:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	opacity: 0;
	-webkit-transition: opacity .3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    transition: opacity .3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.content-inner.is-gallery .gallery-image:hover:after {
	opacity: 0.5;
}
.content-inner.is-gallery .gallery-image img {
	width: 100%;
}
.content-inner.is-gallery.has-more .gallery-image:nth-child(9) {
	cursor: pointer;
}
.content-inner.is-gallery.has-more .gallery-image:nth-child(9):after {
	content: '+';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	opacity: 0.5;
	color: black;
	text-align: center;
	font-size: 9em;
	-webkit-transition: background-color .7s cubic-bezier(0.465, 0.183, 0.153, 0.946), color .3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    transition: background-color .7s cubic-bezier(0.465, 0.183, 0.153, 0.946), color .3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.content-inner.is-gallery.has-more .gallery-image:nth-child(9):hover:after {
	background-color: black;
	color: white;
}
.content-inner.is-gallery.has-more .gallery-image:nth-child(9):hover:after {
	background-color: black;
	color: white;
}
.content-inner.has-image {
	padding: 0;
	overflow-y: hidden;
}
.content-inner.has-image img {
	height: 100%;
}
.content.is-half .content-inner.has-image img  {
	height: auto;
	width: 100%;
}
.content-inner h1 {
	text-align: center;
	font-size: 70px;
	text-transform: uppercase; /* Grossschreibung */
}
.content-inner p,
.content-inner h2,
.content-inner tr {
	margin-left: 80px;
	margin-right: 80px;
}
.content-inner h2 {
	margin-top: 30px;
	text-transform: uppercase;
}
.braker {
	background-color: #303030;
	height: 600px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.braker.has-map iframe,
.braker.has-video iframe {
	width: 100%;
	height: 100%;
}
.fett {
	font-weight: 500;
}
.tight {
	margin-left: 80px;
	margin-right: 80px;
}
.image-overlay {
	position: absolute;
	width: 100%;
	height: 50%;
	top: 25%;
	text-align: center;
}
.textbox {
	position: absolute;
	top: 55%;
	width: 100%;
	text-align: center;
	font-size: 40pt;
	font-weight: 400;
	font-style: normal;
	color: #f9f9f9;
}
.image-overlay.is-gallery .textbox {
	margin-top: -40px;
}
.explore {
	background: #f9f9f9;
	position: absolute;
	margin-top: 10%;
	top: 60%;
	left: 50%;
	width: 20%;
	text-align: center;
	margin-left: -10%;
	display: block;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 18pt;
	color: #505050;
	-webkit-transition: background-color .7s cubic-bezier(0.465, 0.183, 0.153, 0.946), color .3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    transition: background-color .7s cubic-bezier(0.465, 0.183, 0.153, 0.946), color .3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.explore:hover {
	background-color: #bf9797;
	color: white;
}
/*
.textbox {
	position: absolute;
	top: 350px;
	left: 300px;
	font-size: 40pt;
	font-weight: 400;
	font-style: normal;
	color: #f9f9f9;
}
.explore {
	position: absolute; 
	width: 200px; 
	height: 50px;  
	background: #f9f9f9; 
  	top: 450px;
  	bottom: 0;
  	right: 80px;
  	left: 350px;
}
.explore p {
	position: relative;
	font-size: 15pt;
	font-weight: 300;
	font-style: normal;
	top: 0px;
	left: 50px;
}
*/
@media screen and (max-width: 799px) {
    .content .left,
	.content .right
	{
		float: none;
	  width: 100%;
	}
}

.error {
	position: absolute;
    min-height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 200px 30px 30px 30px;
    overflow: hidden;
	text-align: center;
	font-size: 46px;
}