/** fonts **/

	/*@font-face { 
		font-family: 'museo-slab-500';
		font-weight: 500;
	    src: url('http://www.marco-spaderna.de/asstes/fonts/2E44C2_0_0.ttf') format('truetype')
	    url('http://www.marco-spaderna.de/asstes/fonts/2E44C2_0_0.eot?#iefix') format('embedded-opentype'), 
	    url('http://www.marco-spaderna.de/asstes/fonts/2E44C2_0_0.woff2') format('woff2'),
	    url('http://www.marco-spaderna.de/asstes/fonts/2E44C2_0_0.woff') format('woff');
	}*/
	@font-face { 
		font-family: 'aller-300';
		font-weight: 300;
	    src: url('http://www.marco-spaderna.de/asstes/fonts/aller/Aller_Rg.ttf') format('truetype');
	}
	body {
		font-family: aller-300, sans-serif;
	}
/** ***** **/

/** sections backgrounds **/

	#section0, #section4, #section5, #section6, #section7, #section8, #section9, #section11,
	#section13 {
	/* Safari 4-5, Chrome 1-9 */
	  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ffffff), to(#808080)) !important;
	/* Safari 5.1+, Chrome 10+ */
	  background: -webkit-radial-gradient(circle, #ffffff, #808080) !important;
	/* Firefox 3.6+ */
	  background: -moz-radial-gradient(circle, #ffffff, #808080);
	/* IE 10 */
	  background: -ms-radial-gradient(circle, #ffffff, #808080);
	}
/** ***** **/


/** kranich **/

	#section10 {
	  background: -webkit-gradient(radial, center center, 0, center center, 460, from(rgb(250,250,250)), to(rgb(220,220,220))) !important;
	  background: -webkit-radial-gradient(circle, rgb(250,250,250), rgb(220,220,220)) !important;
	  background: -moz-radial-gradient(circle, rgb(250,250,250), rgb(220,220,220));
	  background: -ms-radial-gradient(circle, rgb(250,250,250), rgb(220,220,220));
	}
/** ***** **/


/** eco **/

	#slide4_8 #bg-image {
		background-size: cover !important;
		background-position-x: 100%; 
	}
/** ***** **/


/** qharz **/

	#slide12_3, #slide12_4 {
		background: black;
	}
	#slide12_3 #bg-image, #slide12_4 #bg-image{
		background-size: contain !important;
	}
/** ***** **/


/** slider nav **/

	.fp-slidesNav ul li a span,
	.fp-slidesNav ul li a.active span {
		border-radius: 0;
		background: rgb(60,60,60);
	}
	.fp-slidesNav ul li a.active span {
		border-radius: 18px;
	}

	.fp-slidesNav ul li a.active span,
	.fp-slidesNav ul li a.active span:hover,
	.fp-slidesNav ul li a span:hover {
		background: rgb(220,220,220);
		height: 18px;
	  	width: 18px;
	  	margin: -9px -4px -4px -9px;
	  	border-radius: 18px;
	}
	.fp-slidesNav ul li a span {
		width: 8px;
		height: 8px;
		margin: -4px 0 0 -4px;
	}


	
	.fp-controlArrow {
		height: 42px;
		width: 42px !important;
		border-radius: 42px !important;
		top: calc(50% + 24px)!important;
		background-color: rgb(50,50,50) !important;
		border: none;
		background-size: contain !important;
		background-position: center !important;
		transition: all ease-out 0.1s;
		z-index: 1;
	}
	.fp-controlArrow:hover {
		background-color: rgb(60,60,60) !important;
		transition: all ease-out 0.1s;
	}
	.fp-controlArrow.fp-prev {
		background: url('/assets/images/ms_arrows1-prev.png') no-repeat;
		left: 14px;
	}
	.fp-controlArrow.fp-next {
		background: url('/assets/images/ms_arrows1-next.png') no-repeat;
		right: 14px;
	}
	.fp-controlArrow.fp-prev:hover {
		left: 12px;
		transition: all ease-out 0.1s;
	}
	.fp-controlArrow.fp-next:hover {
		right: 12px;
		transition: all ease-out 0.1s;
	}
/** ***** **/


/** vimeo player **/

	.player-wrapper {
		height: 80vh;
		margin-top: 10vh;
	}
	.player-wrapper > iframe {
		width: 100%;
		height: 100%;
	}
/** ***** **/

/** spinner iframe **/
	iframe#bg-image {
		width: 100vw;
		height: 100vh;
		cursor: pointer !important;
	}
/** ******* ****** **/


/** infobar **/

	.infobar-container {
		position: absolute;
		display: none; /* hide on default */
		margin: 14px 28px 0px 14px;
		cursor: pointer;
		z-index: 200;
	}

	.infobar-field-wrapper {
		display: block;
		position: relative;
	}

	.infobar {
		position: relative;
		display: block;
		width: 100%;
		min-width: 292px; /* max-width: 292px; @mobile*/
		max-width: calc(100vw - 28px);
		height: auto;
		transition: background-color .400s ease;
		background-color: rgb(50,50,50);
		z-index: 101;
	}
	.infobar:hover {
		transition: background-color .200s ease;
		background-color: rgb(60,60,60);
	}
	.infobar > h2 {
		font-size: 21px;
		text-transform: uppercase;
		letter-spacing: 0.075em;
		transition: color .200s ease;
		color: rgb(235,235,235);
		padding: 10px 16px 7px 25px;
		margin: 0;
	}
	.infobar > h2:hover {
		transition: color .400s ease;
		color: rgb(245,245,245);
	}

	.infobar-field {
		position: absolute;
		display: none; /* hide on default */
		left: 14px;
		width: calc(100% - 14px); /* 306px = containerwidth - bar height/decowidth */
		height: auto;
		background-color: rgb(220,220,220);
		z-index: 100;
	}
	.infobar-field > span {
		display: block;
		font-size: 14px;
		letter-spacing: 0.04em;
		color: rgb(40,40,40);
		padding: 12px 14px 0px 12px;
		margin: 0;
	}
	.infobar-field > span:last-child {
		padding: 12px 14px 14px 12px;
	}

	.infobar-decoquad {
		display: block;
		position: absolute;
		width: 20px;
		height: 20px;
		background-color: rgba(40,40,40,1);
		margin-left: 4px;
		z-index: 99;
		opacity: 1;
		transition: all ease .3s;
	}
	.rotated {
	    transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
 		-ms-transform: rotate(45deg);
 		-o-transform: rotate(45deg);
 		-webkit-transform: rotate(45deg);

 		margin-top: -10px;

	    -webkit-transition: all .300s; /* only one arg for Safari
	    -moz-transition: transform .280s,
	    				margin .320s;
	    -ms-transition: transform .280s,
	    				margin .320s;
	    -o-transition: transform .280s,
	    				margin .320s;
	    -o-transition: transform .280s,
	    				margin .320s;*/
	    transition: all ease .3s;
	}
	.hidden {
		opacity: 0;
	    transform: rotate(0deg);
	    -moz-transform: rotate(0deg);
 		-ms-transform: rotate(0deg);
 		-o-transform: rotate(0deg);
 		-webkit-transform: rotate(0deg);

	    margin-top: -20px;

    	-webkit-transition: all .300s;	/*
	    -moz-transition: transform .280s,
	    				margin .320s;
	    -ms-transition: transform .280s,
	    				margin .320s;
	    -o-transition: transform .280s,
	    				margin .320s;
	    -o-transition: transform .280s,
	    				margin .320s;	*/
	    transition: all ease .3s;
	}

	.slide .infobar-container {
		opacity: 0;
		transition: opacity .400s ease;
	}
	.slide.active .infobar-container {
		opacity: 1;
		transition: opacity .400s ease;
	}
/** ******* **/


/** button styles **/

	.menu-btn,
	.ln-btn {
		position: fixed;
		display: none; /* hide on default */
		width: 42px;
		height: 42px;
		bottom: 14px;
		margin-top: -28px;
		right: 14px;
		z-index: 120;
		background-color: rgb(50,50,50);
		cursor: pointer;
		border-radius: 0;
		transition: all .220s ease;
	}
	.menu-btn:hover,
	.ln-btn:hover {
		background-color: rgb(60,60,60);
		transition: all .220s ease;
	}
	.menu-btn.active:hover {
		border-radius: 42px;
		transition: all .220s ease;
	}
	.menu-btn > span,
	.menu-btn > span:before,
	.menu-btn > span:after,
	.ln-btn > span,
	.ln-btn > span:before,
	.ln-btn > span:after {
		display: block;
		position: absolute;
		top: 19px;
		left: 6px;
		background-color: rgb(245,245,245);
		height: 4px;
		width: 30px;
		transition: all .220s ease;
		-webkit-transition: all .220s;
	}
	.menu-btn > span:before,
	.ln-btn > span:before {
		top: -9px;
		left: 0;
		content: '';
		transition: all .220s ease;
		-webkit-transition: all .220s;
	}
	.menu-btn > span:after,
	.ln-btn > span:after {
		top: 9px;
		content: '';
		left: 0;
		transition: all .220s ease;
		-webkit-transition: all .220s;
	}
	.menu-btn.active > span,
	.ln-btn > span {
		background-color: transparent;
		transition: all .200s ease;
		-webkit-transition: background-color .200s ease;

	}
	.menu-btn.active > span:before,
	.ln-btn > span:before {
		top: 0px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transition: all .220s ease;
		-webkit-transition: all .220s ease;
	}
	.menu-btn.active > span:after,
	.ln-btn > span:after {
		top: 0px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transition: all .220s ease;
		-webkit-transition: all .220s ease;
	}
/** ***** **/


/** menu styles **/

	.menu-field {
		display: block;
		position: fixed;
		height: 100%;
		width: 320px;
		right: -320px;
		background-color: rgb(50,50,50);
		transition: all .300s ease;
		-webkit-transition: all .300s ease;
		z-index: 110;
	}

	.menu-field > a {
		display: block;
		margin: 4% 20px 2% 0;
		text-align: right;
		text-decoration: none;
		cursor: pointer;
	}
	.menu-field > a:first-child {
		margin-top: 20px;
	}
	.menu-field > a > h1 {
		display: inline-block;
		margin-top: 2%;
		margin-bottom: 0;
		font-size: 21px;
		text-transform: uppercase;
		letter-spacing: 0.075em;
		color: rgb(245,245,245);
		border-bottom: dotted 2px transparent;
		transition: all .220s ease;
	}
	/*.menu-field > a.active > h1,*/
	.menu-field > a:hover > h1 {
		border-bottom: dotted 2px rgb(240,240,240);
		transition: all .220s ease;
	}
	.menu-field > a > h2 {
		display: inline-block;
		margin-top: 0;
		margin-bottom: 0;
		width: auto;
		font-size: 16px;
		letter-spacing: 0.1em;
		color: rgb(65,65,65);
		/**border-bottom: dotted 2px transparent;**/
		transition: all .220s ease;
	}
	.menu-field > a:hover > h2,
	.menu-field > a.active > h2 {
		color: rgb(220,220,220);
		transition: all .220s ease;
	}
	/*
	.menu-field > a.active > h2 {
		border-bottom: dotted 2px rgb(220,220,220);
		transition: all .220s ease;
	}
	*/
	.menu-field.active {
		right: 0;
		/*background-color: rgb(220,220,220);*/
		transition: all .300s ease;
		-webkit-transition: all .300s;
	}
/** *********** **/


/** impressum styles **/
	.impressum-container {
		display: block;
		position: absolute;
		top: 0;
		right: -100vw;
		z-index: 160;
		width: 0;
		overflow: hidden;
		transition: all .300s ease;
		-webkit-transition: all .300s;
	}
	.impressum-container.active {
		right: 0;
		width: 100vw;
		transition: all .300s ease;
		-webkit-transition: all .300s;

	}

	.impressum-container .impressum-wrapper {
		width: 100vw;
		height: 100vh;
		background-color: rgb(50,50,50);
	}
	.impressum-container .ln-btn {
		z-index: 150;
		border-radius: 42px;
		display: block;
		right: calc(14px - 100vw);
		transition: all .300s ease;
		-webkit-transition: all .300s;
	}
	.impressum-container.active .ln-btn {
		right: 14px;
		transition: all .300s ease;
		-webkit-transition: all .300s;
	}
	.ln-field {
		display: block;
		padding: 14px 14px 14px 28px;
		max-width: 640px;
		overflow: hidden;
	}
	.ln-field > h2 {
		font-size: 21px;
		text-transform: uppercase;
		letter-spacing: 0.075em;
		transition: color .200s ease;
		color: rgb(235,235,235) !important;
		border-bottom: dotted 2px rgb(240,240,240);
	}
	.ln-field > span,
	.ln-field > span > a,
	.ln-field > div > span {
		font-size: 14px;
		color: rgb(235,235,235) !important;
		letter-spacing: 0.075em;
		text-decoration: none;
		transition: color .200s ease;
	}
	.ln-field > span > a:hover {
		color: rgb(80,80,80) !important;
		transition: color .200s ease;
	}
	.ln-field > span.head {
		display: inline-block;
	
		margin-bottom: 3px;
	}
	.ln-field .haft {
		height: 120px;
		overflow: auto;
	}
	.ln-field .haft::-webkit-scrollbar {
		display: none;
	}
/** ***** **/


/** top logo styles **/

	.logo-container {
		position: absolute;
		display: block;
		width: 100%;
		top: 50%;
		margin-top: -160px;
		cursor: default;
	}
	.logo-field {
		width: 320px;
		height: 320px;
		margin: 0 auto;
		cursor: pointer;
	}
	.logo-field > img {
		display: block;
		width: 100%;
		opacity: 1;
		transition: all .300s ease;
	}
	.logo-field > img:hover {
		opacity: 0.95;
		transition: all .300s ease;
	}
/** ***** **/


/** images styles **/

	.img-wrapper {
		display: block;
		width: 100%;
		height: 100%;
	}
	#bg-image {
		display: block;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		/*min-width: 600px;*/
		max-width: 2048px;
		height: 100%;
		margin: 0 auto;
	}
/** ***** **/


/** about styles **/

	.about-container {
		display:-webkit-flex;
    	/*display:-webkit-box;*/
    	display:-moz-flex;
    	display:-moz-box;
    	display:-ms-flexbox;
    	display:flex;
		align-items: center;
		height: 100vh;
	}
	.about-container > div {
		display: block;
		float: left;
		/*height: 60vh;
		margin: 10vw 0;*/
	}
	.about-image-container {
		max-height: 60vh;
		width: 30vw;
		margin-left: 5vw !important;
		display: block;
	}
	.about-image-container > img {
		display: block;
		width: 100%;
		border-radius: 100%;
		opacity: 0.9;
	}
	.about-content-container {
		display: block;
		margin-left: 5vw !important;
		margin-right: 5vw !important;
	}

	.about-content-container > .about-header {
		margin-bottom: 1em;
	}
	.about-content-container > .about-header > h2 {
		font-size: 21px;
		letter-spacing: 0.075em;
		color: rgb(60,60,60);
		width: 95%;
		border-bottom: dotted 2px rgb(100,100,100);
		margin: 0;
	}
	.about-content-container > .about-data {
		display: block;
		max-height: 60vh;
		width: 55vw;
		list-style: none;
	}
	.about-content-container > .about-data > div {
		float: left;
		width: 50%;
		margin-top: 2em;
		min-width: 296px;
	}
	.about-content-container > .about-data > div > span,
	.about-content-container > .about-data > div > span > a {
		display: block;
		font-size: 14px;
		line-height: 1.2em;
		letter-spacing: 0.04em;
		color: rgb(60,60,60);
		text-decoration: none;
		max-width: 75%;
		transition: color .300s ease;
	}
	.about-content-container > .about-data > div > span > a:hover {
		color: rgb(245,245,245);
		transition: color .300s ease;
	}
	.about-content-container > .about-data > div > span {
		margin-top: 1%;
	}
	.about-content-container > .about-data > div > span,
	.about-content-container > .about-data > div > img {
		float: left; 											/** >>> media queries action <<< **/
	}
	.about-content-container > .about-data > div > img {
		display: block;
		height: 60px;
		width: 60px;
		border-radius: 60px;
		margin-right: 1em;
		margin-bottom: 1em;
		opacity: 0.9;
	}
/** ***** **/
/** MEDIA QUERIES **/
@media all and (max-width: 480px) {
	.logo-container {
		margin-top: -100px;
	}
	.logo-field {
		width: 200px;
		height: 200px;
	}
	.infobar > h2,
	.menu-field > a > h1,
	.ln-field > h2,
	.about-content-container > .about-header > h2 {
		font-size: 18px;
	}
	.menu-field > a {
		text-align: left;
		margin-left: 20px;
	}
	.menu-field > a > h2 {
		font-size: 14px;
	}
	.infobar-field > span, 
	.ln-field > span,
	.ln-field > span > a,
	.ln-field > div > span,
	.about-content-container > .about-data > div > span,
	.about-content-container > .about-data > div > span > a {
		font-size: 12px;
	}
	.about-image-container {
		display: none !important;
	}
}
@media all and (max-width: 1079px) {
	.about-content-container > .about-data > div > img {
		height: 40px;
		width: 40px;
		border-radius: 40px;
	}
	.about-content-container > .about-data > div > span {
		margin-top: 0;
	}
	.about-content-container > .about-data > div {
		width: 50%;
		margin-top: 1em;
	}
}
/** ***** ****** **/
/** ANIMATION **/
@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
.animate-roll {
	animation-name: roll;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
	animation-direction: normal;
	animation-play-state: paused;
}
.animate-roll:hover {
	animation-play-state: running;
}