@import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900");

/* Reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Grid */

	.row {
		border-bottom: solid 1px transparent;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row > * {
		float: left;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row:after, .row:before {
		content: '';
		display: block;
		clear: both;
		height: 0;
	}

/* fonts */
	.tk-rift-soft-light {
		font-family: rift-soft, sans-serif;
		font-style: normal;
		font-weight: 300;
	}

	.tk-univia-pro-light {
		font-family: univia-pro, sans-serif;
		font-style: normal;
		font-weight: 300;
	}

/* Real stuff */

/* basics */
	body {
		background: #000;
	}

/* Header */
	header {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
        background-color: rgba(0,0,0,0.6);
        background-blend-mode: darken;
		width: 100%;
		height: 100%;
		display: block;
		text-align: center;
		-webkit-transform-style: preserve-3d;
		-webkit-transform: translateZ(0);
		-webkit-backface-visibility: hidden; 
		-webkit-transform: perspective(1000px);
	}
	
	@-webkit-keyframes changeBckg {
  0% {  background-image: url("../../images/backgrounds/3.jpg"); }
	15% {  background-image: url("../../images/backgrounds/3.jpg"); }
  20% {  background-image: url("../../images/backgrounds/2.jpg"); }
    35% {  background-image: url("../../images/backgrounds/2.jpg"); }
  40% { background-image: url("../../images/backgrounds/5.jpg"); }
    55% { background-image: url("../../images/backgrounds/5.jpg"); }
  60% {background-image: url("../../images/backgrounds/8.jpg"); }
    75% {background-image: url("../../images/backgrounds/8.jpg"); }
  80% {background-image: url("../../images/backgrounds/9.jpg"); }
    95% {background-image: url("../../images/backgrounds/9.jpg"); }
  100% {background-image: url("../../images/backgrounds/3.jpg"); }
}

@keyframes changeBckg {
  0% {  background-image: url("../../images/backgrounds/3.jpg"); }
	15% {  background-image: url("../../images/backgrounds/3.jpg"); }
  20% {  background-image: url("../../images/backgrounds/2.jpg"); }
    35% {  background-image: url("../../images/backgrounds/2.jpg"); }
  40% { background-image: url("../../images/backgrounds/5.jpg"); }
    55% { background-image: url("../../images/backgrounds/5.jpg"); }
  60% {background-image: url("../../images/backgrounds/8.jpg"); }
    75% {background-image: url("../../images/backgrounds/8.jpg"); }
  80% {background-image: url("../../images/backgrounds/9.jpg"); }
    95% {background-image: url("../../images/backgrounds/9.jpg"); }
  100% {background-image: url("../../images/backgrounds/3.jpg"); }
}
	
	.letterAnimation {
		-webkit-transform-style: preserve-3d;
		-webkit-transform: translateZ(0);
  		-webkit-animation: changeBckg 50s ease infinite;
  		animation: changeBckg 50s ease infinite;
		  -webkit-backface-visibility: hidden; 
		  -webkit-transform: perspective(1000px);
	}

	header span {
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	header .logo {
		margin: auto;
		vertical-align: middle;
		width: 270px;
	}

	.scrollhint {
		margin: -80px auto 0 auto;
		display: block;
		width: 61px;
		-webkit-transform-style: preserve-3d;
		-webkit-transform: translateZ(0);
		-webkit-backface-visibility: hidden; 
		-webkit-transform: perspective(1000px);
	}

	.fixedheader {
		display: none;
		position: fixed;
		top: 0px;
		width: 100%;
		background: #000;
		height: 120px;
		text-align: center;
		z-index: 1000;
	}

	.fixedheader img {
		margin: 10px auto 0 auto;
		width: 100px;
		vertical-align: middle;
	}

/* Icons */
	ul.icons {
		display: flex;
		flex-flow: row wrap;
		width: 900px;
		margin: 120px auto;
	}

	ul.icons li {
		flex: 1 1 33%;
		border: 10px solid #000;
		background: #fff;
		border-radius: 15px;
	}

	ul.icons li img {
		margin: 10px auto;
		display: block;
		width: 50px;
		height: 50px;
	}

	ul.icons li.media {
		background: transparent;
	}

	ul.icons li.media img {
		width: 100%;
		border-radius: 5px;
		height: 183px;
		margin: 0;
	}

	ul.icons li h3 {
		margin: 15px 10px;
		text-align: center;
	}

	ul.icons li p {
		margin: 10px 10px;
		text-align: center;
		font-size: 0.7rem;
		line-height: 0.9rem;
	}

	/* Icons on smaller */
		@media screen and (min-width : 600px) and (max-width : 899px)  {
			ul.icons {
				width: 600px;
			}

			ul.icons li.media img {
				height: 122px;
			}
		}

	/* Icons on smartphone */
		@media screen and (min-width : 320px) and (max-width : 599px)  {
			ul.icons {
				width: 100%;
			}

			ul.icons li {
				flex: 1 1 50%;
			}

			ul.icons li.media img {
				height: 100px;
			}
		}

/* paragraph */
	div.paragraph div.headline {
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
        background-color: rgba(0,0,0,0.6);
        background-blend-mode: darken;
		display: block;
		width: 100%;
		height: 300px;
		text-align: center;
		margin: 60px auto;
	}

	div.paragraph div.nobg {
		height: 70px;
	}

	div.paragraph div.headline div.container {
		margin: auto;
		padding-top: 0px;
		width: 900px;
		color: #fff;
		display: block;
		height: 100%;
		text-align: center;
	}

	div.paragraph div.nobg div.container {
		padding-top: 40px;
	}

	div.paragraph div.headline div.container h2 {
		font-size: 3.5rem;
		text-transform: uppercase;
	}

	div.paragraph div.headline div.container span {
		display: block;
		padding-top: 10px;
		font-size: 1.5rem;
		text-transform: uppercase;
	}

	div.paragraph p {
		margin: auto;
		padding-top: 0px;
		display: block;
		width: 900px;
		color: #fff;
		font-size: 1.2rem;
		line-height: 1.4rem;
	}

	.button {
		margin: 80px auto 20px auto;
		padding: 0.4rem;
		display: block;
		width: 200px;
		height: 32px;
		background: #fff;
		border-radius: 16px;
		color: #000;
		font-size: 1.2rem;
		text-align: center;
	}

	div.paragraph .buttondetails {
		margin: 20px auto 80px auto;
		width: 900px;
		color: #fff;
		font-size: 1.2rem;
		line-height: 1.4rem;
	}

	div.paragraph .buttondetails ul {
		text-align: center;
	}

	div.paragraph .buttondetails ul li {
		padding: 0.2rem;
	}

	/* paragraph on smaller */
		@media screen and (min-width: 600px) and (max-width: 899px) {
			div.paragraph div.headline div.container {
				width: 600px;
			}

			div.paragraph p {
				width: 600px;
			}

			div.paragraph .buttondetails {
				width: 600px;
			}
		}

	/* scrolling on mobile */
		@media screen and (max-device-width: 1024px) {
			div.paragraph div.headline {
				background-attachment: scroll;
			}
		}

	/* paragraph on smartphone */
		@media screen and (min-width: 320px) and (max-width: 599px) {

			div.paragraph div.headline div.container {
				width: 100%;
			}

			div.paragraph div.headline div.container h2 {
				font-size: 3.5rem;
			}

			div.paragraph p {
				width: 100%;
				/* padding: 30px 15px; */
			}

			div.paragraph .buttondetails {
				width: 100%;
				/* padding: 30px 15px; */
			}
		}

/* rule */
	div.rule {
		margin: 20 auto 60px auto;
		width: 900px;
		height: 12px;
		color: #fff;
		border-bottom: 1px solid #fff;
		text-align: center;
		font-size: 1.2rem;
		line-height: 1.4rem;
	}

	div.vis {
		border: 0;
	}

	div.rule span {
		padding: 0 20px;
		background: #000;
		display: inline-block;
	}

	div.rule .disturber {
		display: block;
		margin: -120px 0 0 640px;
		padding: 25px 0 0 0;
		width: 140px;
		height: 140px;
		background-size: 140px 140px;
		background-image: url(../../images/stoerer.png);
		transform: rotate(12deg);
	}

	div.rule .disturber span {
		background: transparent;
	}

	div.rule .disturber span.head {
		font-size: 0.7rem;
		line-height: 0.9rem;
		padding-bottom: 5px;
	}

	div.rule .disturber span.value {
		font-size: 2.5rem;
		padding-bottom: 5px;
	}

	div.rule .disturber span.sub {
		font-size: 0.7rem;

	}

	/* rule on smaller */
		@media screen and (min-width: 600px) and (max-width: 899px) {
			div.rule {
				width: 600px;
			}

			div.rule .disturber {
				margin: -120px 0 0 440px;
			}
		}

	/* rule on smartphone */
		@media screen and (min-width: 450px) and (max-width: 599px) {
			div.rule {
				width: 100%;
			}

			div.rule .disturber {
				margin: -120px 0 0 300px;
			}
		}

		@media screen and (max-width: 449px) {
			div.rule {
				width: 100%;
			}

			div.rule .disturber {
				margin: -120px 0 0 10px;
			}
		}

/* price list */
	ul.priceboxes {
		display: flex;
		width: 900px;
		margin: 60px auto;
	}

	ul.priceboxes li {
		flex-grow: 1;
		flex-shrink: 1;
		border: 10px solid #000;
		background: #fff;
		border-radius: 15px;
		text-align: center;
	}

	ul.priceboxes li.box300 {
		width: 300px;
	}

	ul.priceboxes li.box200 {
		width: 200px;
	}

	ul.priceboxes li.box150 {
		width: 150px;
	}

	ul.priceboxes li .headline {
		display: block;
		margin: 20px;
	}

	ul.priceboxes li .price {
		display: block;
		margin: 10px;
	}

	ul.priceboxes li .price strong {
		font-size: 2.5rem;
	}

	ul.priceboxes li .description {
		display: block;
		margin: 5px 5px 10px 5px;
		font-size: 0.7rem;
		line-height: 0.9rem;
	}

	/* priceboxes on mobile */
		@media screen and (min-width: 600px) and (max-width: 899px) {
			ul.priceboxes {
				width: 600px;
			}
		}

	/* priceboxes on mobile */
		@media screen and (min-width: 320px) and (max-width: 599px) {
			ul.priceboxes {
				width: 100%;
				flex-flow: row wrap;
			}

			ul.priceboxes li.box200 {
				flex: 1 1 50%;
			}

			ul.priceboxes li.box150 {
				flex: 1 1 50%;
			}
		}

/* form */
	.z2form {
		margin: 0 auto 60px auto;
		width: 900px;
		color: #fff;
	}

	.z2form h4 {
		display: block;
		margin-bottom: 20px;
	}

	.clickable {
		background-color: #c80000;
		cursor: pointer;
		color: #fff;
	}

	/* form on smaller */
		@media screen and (min-width: 600px) and (max-width: 899px) {
			.z2form {
				width: 600px;
			}
		}

	/* form on smartphone */
		@media screen and (min-width: 320px) and (max-width: 599px) {
			.z2form {
				width: 100%;
			}
		}

/* slider */
  .swipe {
		margin: 0 auto 60px auto;
		width: 900px;
		color: #666;
		font-size: 1.2rem;
		line-height: 1.4rem;
	}

	.swipe .slider span {
		color: #c80000;
		display: inline-block;
		width: 25px;
		margin-left: -25px;
	}

	.swipe .slider p {
		margin-left: 35px;
		margin-right: 10px;
	}

	.swipe .slider .author {
		text-align: right;
		display: block;
		margin: 20px 10px 20px 10px;
		padding-right: 20px;
		width: inherit;
	}

	/* slider on smaller */
		@media screen and (min-width: 600px) and (max-width: 899px) {
			.swipe {
				width: 600px;
			}
		}

	/* slider on smartphone */
		@media screen and (min-width: 320px) and (max-width: 599px) {
			.swipe {
				width: 100%;
			}
			.swipe .slider .author {
				font-size: 0.9rem;
			}
		}

/* footer */
	.page-footer {
		background: #fff;
		color: #000;
		
	}

    footer .container {
		width: 900px;
		margin: 0 auto;
		text-align: center;
	}

/* 	footer .container span a {
		display: block;
		color: #000;
		text-decoration: underline;
	}

	footer .container ul {
		display: block;
		margin: 20px 0 0 0;
		padding: 0;
	}

	footer .container ul li {
		display: inline-block;
		margin: 20px 5px 40px 0;
	}

	footer .container ul li a {
		display: block;
		width: 32px;
		height: 32px;
		font-size: 0;
		background-size: 32px 32px;
	}

	footer .container ul li .xing {
		background-image: url(../../images/social-xing.png);
	}
	footer .container ul li .linkedin {
		background-image: url(../../images/social-linkedin.png);
	}
	footer .container ul li .facebook {
		background-image: url(../../images/social-facebook.png);
	}
	footer .container ul li .instagram {
		background-image: url(../../images/social-instagram.png);
	}
	footer .container ul li .twitter {
		background-image: url(../../images/social-twitter.png);
	}

	footer .container ul.address {
		margin: 0;
		display: blocK;
	}

	footer .container ul.address li {
		margin: 0;
		display: block;
		clear: both;
	}

	footer .container ul.address li a {
		display: inherit;
		width: inherit;
		height: inherit;
		font-size: inherit;
	}  */

	footer .container div {
		width: 900px;
		margin: 40px 40px 0 0;
		padding: 0 0 80px 0;
		font-size: 0.8rem;
		line-height: 1.2rem;
	}

	/* footer on smaller */
		@media screen and (min-width: 600px) and (max-width: 899px) {
			footer .container {
				width: 600px;
			}

			footer .container div {
				width: 100%;
			}
		}

	/* footer on smartphone */
		@media screen and (min-width: 320px) and (max-width: 599px) {
			footer .container {
				width: 100%;
			}

			/*footer .container ul li {
				margin: 80px 80px 0 0;
			} */

			footer .container div {
				width: 100%;
				/* margin: 40px 40px 0 0;
				padding: 0 0 80px 0; */
			}
		}