html {
	box-sizing: border-box;
	/* set root font-size-base to 10 rather than 16 */
	font-size: 62.5%;
	/* height: 100%; */
	overflow-x: hidden;
	overflow-y: scroll;
}
*, *:before, *:after {box-sizing: inherit;}
body {
	font-family: 'Roboto', sans-serif;
	/* set body font-size-base back to 16 */
	font-size: 1.6rem;
	font-weight: 100;
	text-transform: uppercase;
	/* height: 100%; */
	background: #f8f8f8;
}
h3 {display: none;font-weight: 300;}
#sec5 h3, #sec6 h3 {display: block;}
p { /* font-size: 1.125em; */ line-height: 1.5;margin-bottom: 27px;font-weight: 300;letter-spacing: 0.02em;}
@media (max-width: 1279px) {p {font-size: .875em;}}
@media (min-width: 1280px) {p {font-size: 1em;}}
@media (min-width: 1440px) {p {font-size: 1.125em;}}
em {text-transform: none;}
a {
  color: #000;
  text-decoration: none;
  outline: none;
}
.logo {
	position: fixed;
	left: 50px;
	top:60px;
	display: block;
	width: auto;
	height: 166px;
	z-index: 110;
}
.logo img {display: block;height: 100%;width: auto;}
@media (max-width: 1279px) {.logo {top: 10px;}}											   
@media (max-width: 767px) {
	.logo {
		top: 20px;
		left: 71px;
		height: 50px;
		width: 87px;
		background: url('../images/PureDeluxe_87x50.png') left top no-repeat;
	}
	.logo img {display: none;}
}
@media (min-width: 1025px) {.logo {left: 120px;}}


.nav a,
.nav-lang a {text-transform: uppercase;}

/* left side navigation */
.nav-side {
	position: fixed;
	left:0;
	top:0;
	height: 51px;
	width:100vh;
	border: 1px solid #d9d9d9;
	border-width: 0 0 1px 0;
	-webkit-transform-origin: left top;
	-webkit-transform: rotate(-90deg) translateX(-100%);
	transform-origin: left top;
	transform: rotate(-90deg) translateX(-100%);
	z-index: 110;
	background: #f8f8f8;
}
	.nav-side ul {text-align: center;padding-top: 0px;}
		.nav-side li {
			display: inline-block;
			margin: 0 10px;
			padding: 20px 0 0;
			vertical-align: top;
		}		
		.nav-side li:not(.active):hover {}
		.nav-side li:last-child {border-width: 0;}
			.nav-side a {
				display: block;
				padding: 0 10px;
				height: 30px;
				line-height: 30px;
				color: #b3b3b3;
				font-size: 10px;
				font-weight: 400;
				letter-spacing: 0.1em;
				text-align: center;				
			}
			.nav-side li:not(.active):hover a {}
			.nav-side li:last-child a {}
			.nav-side li.active a,
			.nav-side a:hover {color: #000;}
			.nav-side a.animated{}
@media (max-width: 1023px) {.nav-side {display: none;}}
@media (min-width: 1024px) {.nav-side {display: block;}}
/* @media (max-height: 679px) {.nav-side {display: none;}} */
@media (max-height: 639px) {.nav-side {display: none;}}
			
/* hamburger icon */
.hamburger {
	position: fixed;
	top:20px;
	right: 20px;
	z-index: 999;
	font-size: 40px;
	display: inline-block;
	width: 1em;
	height: 1em;
	padding: 0;
	cursor: pointer;
	-webkit-transition: -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out;
	vertical-align: middle;
	border: 0 none;
	background: transparent;
}
.hamburger:before,
.hamburger:after {content: "";}
.hamburger:before,
.hamburger .icon,
.hamburger:after {
  display: block;
  width: 100%;
  height: .075em;
  margin: 0 0 .2em;
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  border-radius: 1px;
  background: #d3d3d3;
}
.hamburger.oddham:before,
.hamburger.oddham .icon,
.hamburger.oddham:after {
  background: #999;
}
.hamburger.active:before,
.hamburger.active .icon,
.hamburger.active:after {background: #000;}
/* transform to 'X'-shape */
.hamburger.hamburger-cancel.active .icon {
	-webkit-transform: scale(0);
		-ms-transform: scale(0);
			transform: scale(0);
}
.hamburger.hamburger-cancel.active:before {
	-webkit-transform: translateY(.275em) rotate(135deg);
		-ms-transform: translateY(.275em) rotate(135deg);
			transform: translateY(.275em) rotate(135deg);
}
.hamburger.hamburger-cancel.active:after {
	-webkit-transform: translateY(-.275em) rotate(-135deg);
		-ms-transform: translateY(-.275em) rotate(-135deg);
			transform: translateY(-.275em) rotate(-135deg);
}

/* drop-down navigation */
.nav-modal {
	position: fixed;
	top: -100%;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #fff;
	z-index: 200;
	-webkit-transition: -webkit-transform  .3s ease-in-out;
    transition: transform .3s ease-in-out;
}
.nav-modal.active {
	-webkit-transform: translate3d(0px, 100%, 0px);
		-ms-transform: translate3d(0px, 100%, 0px);
			transform: translate3d(0px, 100%, 0px);
}
	.nav-modal ul {
		display: none;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
				transform: translateY(-50%);
	}
	.nav-modal.active ul {display: block;}
		.nav-modal li {margin-bottom: .5em;}
		.nav-modal li.active {}
			.nav-modal a {
				font-size: 32px;
				font-weight: 900;
				color: #000;
				line-height: 1;
			}
			.nav-modal li.active a,
			.nav-modal a:hover {text-decoration: line-through;}
			
@media (min-width: 480px) and (max-width: 579px){.nav-modal a {font-size: calc( 32px + (88 - 32) * ( (100vw - 320px) / ( 580 - 320) ));}}
@media (min-width: 580px) {.nav-modal a {font-size: 5.5em;}}
@media (max-height: 479px) {.nav-modal a {font-size: 32px;}}

/* language menu */
.nav-lang {position: fixed;bottom: 20px;z-index: 120;padding: 0 10px 0;width: 50px;}
@media (min-width: 768px) {.nav-lang {padding: 0 0 0 20px;}}		
.nav-lang ul {}
	.nav-lang li {margin-bottom: 4px;}
	@media (min-width: 768px) {.nav-lang li {margin: 0;border-bottom: 1px solid #ccc;}}
	.nav-lang li:last-child {border-width: 0;}
	.nav-lang li.nav-lang-cur {}
		.nav-lang li a {
			display: block;
			padding: 6px 0;
			text-align: center;
			color: #b3b3b3;
			font-size: 0.625em;
			font-weight: 400;
			line-height: 1;
		}
		.nav-lang li.nav-lang-cur a,
		.nav-lang li a:hover {color: #333;}

/* ##### CONTENT START ##### */		
main {}
/* cover-and-reveal-slide on section-change */
main::after {
	content: '';
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;	
	width: 100vw;
	height: 100vh;
	background-color: #ccc;
	z-index: 100;
	-webkit-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
	-webkit-transition: -webkit-transform 0.4s ease .05s;
	transition: transform 0.4s ease .05s;
}
main::after {}
main.page-is-changing::after {
	-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 0.4s ease 0s;
	transition: transform 0.4s ease 0s;
}

section.cd-section {display: none;}
/* section.cd-section {display: block;}
@media (min-width: 768px) {section.cd-section {display: none;}} */
section.cd-section.iscur {display: block;}

	.cd-block {
		width: 100%;
		height: 100%;
		width: 100vw;
		height: 100vh;
		position: relative;
	}
		.cd-half-block {
			width: 50%;
			height: 100%;
			width: 50vw;
			height: 100vh;
		}
		/* cd-half-block global styles */
		.cd-block .cd-half-block:first-child {
			position: relative;
			padding-top: 250px;
			/* padding-left: 150px;
			padding-left: 7vw; */
		}
		@media (max-width: 1279px) {
			.cd-block .cd-half-block:first-child {
				padding-top: 205px;
			}
		}
		@media (max-width: 767px) {
			.cd-block .cd-half-block:first-child {
				padding-top: 90px;
				width: 100%;
				width: 100vw;
			}
			
		}
		/* upper scroll-cut */
		.cd-block .cd-half-block:first-child::before {
			content:'';
			position: fixed;
			top: 0;
			left: 0;
			display: block;
			width: 50%;
			width: 50vw;
			height: 225px;
			background: #f8f8f8;
			z-index: 20;
			box-shadow: 0px 15px 20px 0px #f8f8f8;
		}
		@media (max-width: 1279px) {
			.cd-block .cd-half-block:first-child::before {height: 180px;}
		}
		@media (max-width: 767px) {
			.cd-block .cd-half-block:first-child::before {
				width: 100%;
				width: 100vw;
				height: 90px;
				box-shadow: none;
			}
		}
		.cd-block .cd-half-block:last-child {
			position: fixed;
			top: 0;
			right: 0;
			height: 100%;
			height: 100vh;
			z-index: 30;
		}
		@media (max-width: 767px) {.cd-block .cd-half-block:last-child {display: none;}}

		/* cd-half-block local styles */
		/* left block */
		#sec1 .cd-half-block:first-child {}
		#sec2 .cd-half-block:first-child {}
		#sec3 .cd-half-block:first-child {}
		#sec4 .cd-half-block:first-child {}
		@media (min-width: 768px) {#sec4 .cd-half-block:first-child {width: 40%;}}
		#sec5 .cd-half-block:first-child {}
		
		/* right block */
		#sec1 .cd-half-block:last-child {background: #000;}
		#sec1 .slideshow {width: 100%;height:100%}
		#sec1 .slidecontrol {
			position: absolute;
			z-index: 100;
			bottom: 20px;
			right: 0;
			width: 100%;
			text-align: center;
		}
			#sec1 .slidecontrol a {
				display: inline-block;
				margin: 0 4px;
				width: 12px;
				height: 12px;
				border-radius: 100%;
				background: rgba(255,255,255,.35);
			}
			#sec1 .slidecontrol a.activeSlide {background: rgba(255,255,255,.85);}
		
		#sec2 .cd-half-block:last-child {}
		#sec4 .cd-half-block:last-child {width: 60%;z-index: 25;}
		
		/* #sec3 coverslide onStart & onPause */
		#sec3 #coverslide::after {
			content: '';
			position: fixed;
			top: 0;
			width: 50%;
			height: 100%;	
			width: 50vw;
			height: 100vh;
			background: #000 url('../images/visual_300.jpg') center center no-repeat;
			background-size: 100% 100%;
			z-index: 20;
			opacity: 0;
			transform: translate3d(100%,0,0);
			transition: opacity .6s linear, transform 0.5s ease-in-out .1s;
		}
		#sec3 #coverslide.doit::after {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition: opacity .6s linear, transform 0.6s ease 0s;
		}
		#sec3 #coverslide.nobg::after {
			background: #000;
			opacity: .8;
		}

			#sec3 .wrapper {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: none;
			}
			#sec3 .wrapper.istop {display: block;}

			/* right block imgholder-styles */
			.imgholder, .nrc {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.nrc {background-image: url('../images/nrc.png');}
			#sec1 .imgholder {/* background-position: center top; */}
			#sec1 .imgholder img {display: none;}			
			#sec4 .imgholder {
				background-position: left center;
				background-size: cover;
			}
			#sec4 .imgholder:nth-of-type(2),
			#sec5 .imgholder {display: none;}

			#sec2 .imgholder.animated,
			#sec4 .imgholder.animated,
			#sec5 .imgholder.animated {display: block;}
			
			#sec4 .imgholder.animated {animation-duration: 2s;animation-delay: .8s;}
			
			#sec5 .imgholder {
				border: 1px solid #d9d9d9;
				border-width: 0 0 0 1px;
			}
			#sec5 .imgholder:first-child {background-size: 100% 100%;}
			#sec5 .imgholder:last-child {
				left: auto;
				right: 7%;
				height: 100%;
				width: 142px;
			}
			
			/* imgholder background images */
			/* #sec1 */
			#img-101 {background-image: url('../images/visual_101.jpg');}
			#img-102 {background-image: url('../images/visual_102.jpg');}
			#img-103 {background-image: url('../images/visual_103.jpg');}
			#img-104 {background-image: url('../images/visual_104.jpg');}
			#img-105 {background-image: url('../images/visual_105.jpg');}
			#img-106 {background-image: url('../images/visual_106.jpg');}
			#img-107 {background-image: url('../images/visual_107.jpg');}
			#img-108 {background-image: url('../images/visual_108.jpg');}
			#img-109 {background-image: url('../images/visual_109.jpg');}
			#img-110 {background-image: url('../images/visual_110.jpg');}
			#img-111 {background-image: url('../images/visual_111.jpg');}
			#img-112 {background-image: url('../images/visual_112.jpg');}
			/* #sec2 */
			#img-21 {background-image: url('../images/visual_21.jpg');}
			/* #sec4 */
			#img-41 {background-image: url('../images/visual_41.png');/* background-position: right 10px center; */}
			#img-42 {background-image: url('../images/visual_42.png');/* background-position: right 10px center; */}
			/* #sec5 */
			#img-51 {background-image: url('../images/visual_51.png');}
			#img-52 .smallbg {background-image: url('../images/visual_52.jpg');
				position: absolute;
				top: 55%;
				left: 0;
				height: 188px;
				width: 142px;
			}

#sec2 p {margin-bottom: 32px;}
#sec2 p {line-height: 1;font-weight: 300;letter-spacing: 0.15em;}
@media (max-width: 1279px) {#sec2 p {font-size: 1.2em;}}
@media (min-width: 1280px) {#sec2 p {font-size: 1.375em;}}
@media (min-width: 1440px) {#sec2 p {font-size: 1.562em;}}
#sec2 p span {display: block;padding-top: 10px;font-size: 73%;font-style: italic;color: #999;text-transform: none;letter-spacing: 0.1em;}
/* deaktiviert am 27.07.2017 
#sec2 p.active a,
#sec2 p a:hover {font-weight: 900;color: #999;}
#sec2 p a:hover span {font-weight: 300;}
*/

#sec4 .lang {padding-bottom: 200px;}
#sec4 p {margin: 0;}
#sec4 p,
#sec5 p,
#sec5 h3 {line-height: 1.7;text-transform: none;}
@media (max-width: 1024px) {#sec4 p,#sec5 p, #sec5 h3  {font-size: .875em;}}
@media (min-width: 1025px) {#sec4 p,#sec5 p, #sec5 h3  {font-size: 1em;}}


#sec1 .animated {animation-duration: .6s;}
#sec1 .cd-block .cd-half-block:first-child p.animated:nth-of-type(1){}
#sec1 .cd-block .cd-half-block:first-child p.animated:nth-of-type(2){animation-delay: .1s}
#sec1 .cd-block .cd-half-block:first-child p.animated:nth-of-type(3){animation-delay: .25s}
#sec1 .cd-block .cd-half-block:first-child p.animated:nth-of-type(4){animation-delay: .45s}
#sec1 .cd-block .cd-half-block:first-child p.animated:nth-of-type(5){animation-delay: .7s}

#sec2 .cd-half-block:first-child .multi-lang .animated {animation-duration: 1s;}
#sec2 .cd-block .cd-half-block:first-child p.animated:nth-of-type(1){}
#sec2 .cd-block .cd-half-block:first-child p.animated:nth-of-type(2){animation-delay: .2s}
#sec2 .cd-block .cd-half-block:first-child p.animated:nth-of-type(3){animation-delay: .4s}
#sec2 .cd-block .cd-half-block:first-child p.animated:nth-of-type(4){animation-delay: .6s}
#sec2 .cd-block .cd-half-block:first-child p.animated:nth-of-type(5){animation-delay: .8s}
#sec2 .cd-half-block:first-child .lang .animated {animation-duration: 1s;}
#sec2 .cd-block .cd-half-block:first-child .lang p.animated{animation-delay: 1.4s}

#sec5 .cd-half-block:first-child .animated {animation-duration: .6s;}
#sec5 .cd-block .cd-half-block:first-child p.animated:nth-of-type(1){}
#sec5 .cd-block .cd-half-block:first-child p.animated:nth-of-type(2){animation-delay: .25s}
#sec5 .cd-block .cd-half-block:first-child p.animated:nth-of-type(3){animation-delay: .35s}
#sec5 .cd-block .cd-half-block:first-child p.animated:nth-of-type(4){animation-delay: .45s}
#sec5 .cd-block .cd-half-block:first-child p.animated:nth-of-type(5){animation-delay: .7s}

#sec1 .cd-block .cd-half-block:first-child .animato p.animated,
#sec2 .cd-block .cd-half-block:first-child .animato p.animated,
.animato .animated {animation-delay: 0s;animation-duration: .6s;} 
.iscur .lang {display: none;}
@media (max-width: 1023px) {.iscur .lang, .iscur .multi-lang {padding-left: 80px;}}
@media (max-width: 767px) {.iscur .lang, .iscur .multi-lang {padding-right: 20px;}}
@media (min-width: 1024px) {.iscur .lang, .iscur .multi-lang {padding-left: 150px;}}
#sec1.iscur .lang,
#sec2.iscur .lang {position: absolute;width: 100%;}
.iscur .animato,
.iscur .lang-active {display: block;}
.iscur .multi-lang p,
.iscur .lang-active p {display: none;}
.iscur .multi-lang p.animated,
.iscur .lang-active p.animated {display: block;}

@media (max-width: 767px) {#sec5 .cd-block .cd-half-block:first-child p#bildnachweis {display: none;}}

/* ### inner #sec3 styles ### */
#t01,
#t02,
#t04,
#t05,
#t06,
#t07 {overflow: hidden;}
/* #sec3 imgholder bg-images */
#img-321 {background-image: url('../images/visual_321.jpg');}
#img-331 {background-image: url('../images/visual_331.jpg');}
#img-332 {background-image: url('../images/visual_332.jpg');}
#img-341 {background-image: url('../images/visual_3101.jpg');}
#img-351 {background-image: url('../images/visual_351.jpg');}
#img-352 {background-image: url('../images/visual_352.jpg');}
#img-361 {background-image: url('../images/visual_361.jpg');}
#img-371 {background-image: url('../images/visual_371d.jpg');}
#img-372 {background-image: url('../images/visual_371c.jpg');}
#img-381 {background-image: url('../images/visual_381.jpg');}
#img-3101 {background-image: url('../images/flower-blau.png');}
/* bubble animation styles */
.aniholder {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	
}
#ani-1,
#ani-5 {overflow: visible;}
#ani-2,
#ani-3,
#ani-4 {overflow: hidden;}
.thing {
	position: absolute;
	transition-property: transform;
	transition-timing-function: ease-in-out;	
}
/* ###### sec3 wrapper inner styles ###### */
/* ### t01 ### */
#t01 .txtholder {
	position: absolute;
	left: 100%;
	font-weight: 900;
	color: #000;
	font-size: 144vh;
	line-height: 1;
	-webkit-transform: translate3d(0, -14%, 0px);
	transform: translate3d(0, -14%, 0px);
}
#t01 .txtholder.animating {
	-webkit-animation: scrolling 204s linear infinite;
			animation: scrolling 204s linear infinite;
}
@-webkit-keyframes scrolling { 100% {-webkit-transform: translate3d(-100%, -14%, 0px);} }
@keyframes scrolling { 100% {transform: translate3d(-100%, -14%, 0px);} }
/* ### t02 ### */
#ani-4 .thing:nth-child(odd)  {background-color: #2290c1;}
#ani-4 .thing:nth-child(even) {background-color: #b1b4e1;}
#img-321 {
	-webkit-transform: scale(1.0);
			transform: scale(1.0);
}
#img-321.animating {
	-webkit-animation: scaleit2 30s linear infinite alternate;
			animation: scaleit2 30s linear infinite alternate;
}
@-webkit-keyframes scaleit2 { 100% { -webkit-transform: scale(1.5); } }
@keyframes scaleit2 { 100% { transform: scale(1.5);} }
/* ### t03 ### */
#ani-2 .thing  {background-color: #fff;box-shadow: 0 0 8px 0px #ffffff;}
/* ### t04 ### */
#img-341 {
	width: 200%;
	height: 200%;
	margin-left: -50%;
	margin-top: -50%;	
}
#img-341.animating {
	-webkit-animation:spin 4s linear infinite;
			animation:spin 4s linear infinite;
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);} }
/* ### t05 ### */
#img-351.animating {
	-webkit-animation: fadeouty 9s linear 10s;
			animation: fadeouty 9s linear 10s;
}
@-webkit-keyframes fadeouty {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeouty {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
#img-352.animating {
	-webkit-transform: scale(1.0);
			transform: scale(1.0);	
	-webkit-animation: scaleit3 30s linear 4s infinite alternate;
			animation: scaleit3 30s linear 4s infinite alternate;
	opacity: 0;
}
@-webkit-keyframes scaleit3 {
	0% {opacity: 0;}
    30% {opacity: 1;}
	100% {-webkit-transform: scale(1.5);opacity: 1;}
}
@keyframes scaleit3 {
	0% {opacity: 0;}
    30% {opacity: 1;}
	100% {transform: scale(1.5);opacity: 1;}
}
/* ### t06 ### */
#img-361 {
	-webkit-transform: scale(4.0);
			transform: scale(4.0);	
}
#img-361.animating {
	-webkit-animation: scaleit 60s linear infinite alternate;
			animation: scaleit 60s linear infinite alternate;
}
@-webkit-keyframes scaleit { 100% { -webkit-transform: scale(1.0); } }
@keyframes scaleit { 100% { transform: scale(1.0);} }
/* ### t07 ### */
#img-371.animating {}

#sec3 #img-372.imgholder {
	/* transform: scale(2.0, 2.0); */	
}
#img-372.animating {
	-webkit-animation: fadegone 20s linear infinite 4s alternate;
			animation: fadegone 20s linear infinite 4s alternate;
}
@keyframes fadegone {
	from { opacity: 1 }
	to   { opacity: 0 }
}
/* ### t08 ### */
#ani-3 .thing  {
	width: 200%;
	height: 200%;	
	background-size: 100% auto;
	background-position: center center;
	background-image: url('../images/mask.png');
							  
}
/* ### t09 ### */
#ani-1 .thing  {background-color: pink;}
#t09 .txtholder {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
	font-weight: 100;
	color: yellow;
	font-size: 30vh;
}
/* ### t10 ### */
#coverslide #t10 .imgholder {opacity: 0;transition: opacity 1.2s;}
#coverslide.nobg.doit #t10 .imgholder {opacity: 1;transition: opacity 1s ease .4s;}
#ani-5 .thing {
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;

}
#ani-5 .thing:nth-child(3n+1) {background-image: url('../images/flower-gruen.png');}
#ani-5 .thing:nth-child(3n+2) {background-image: url('../images/flower-blau.png');}
#ani-5 .thing:nth-child(3n+3) {background-image: url('../images/flower-lila.png');}
/* ### sec3 wrapper inner styles END ### */
#sec3 .cd-block .cd-half-block .wrapper .animating.paused {
-webkit-animation-play-state: paused; 
		animation-play-state: paused;
}



/* ##### video section styles ##### */
#sec6 {}
	#sec6 p {margin-bottom: 10px;}
	#sec6 .cd-block p.animated:nth-of-type(2) {
		animation-delay: .15s;
	}
	#sec6 .cd-block {}
		#sec6 .cd-half-block-single {padding-top: 250px;}
		/* upper scroll-cut */
		#sec6 .cd-half-block-single::before {
			content:'';
			position: fixed;
			top: 0;
			left: 0;
			display: block;
			width: 50%;
			width: 50vw;
			height: 225px;
			background: #f8f8f8;
			z-index: 20;
			box-shadow: 0px 15px 20px 0px #f8f8f8;
		}
		#sec6 .multi-lang {padding-right: 20px;width: 50%;}
		#sec6 .multi-lang.bibi p {}
		#sec6 .multi-lang.bibi a.yt-link {display: block;}
		
/* ### youtube iframe ### */
.embed-outer {
	position: fixed;
	top: 0;
	right: 0;
	padding: 250px 40px 0 0;
	width: 50%;
	height: 100%;
	height: 100vh;
	border: 1px solid #d9d9d9;
	border-width: 0 0 0 1px;
	z-index: 21;
}
.embed-inner {
	width: 100%;
	max-width: 800px;
	margin-left: -1px;
}
.embed-container {
	position: relative; 
	padding-bottom: 56.25%; /* ratio 16x9 */
	height: 0; 
	overflow: hidden; 
	width: 100%;
	height: auto;
}
.embed-container-overlay {
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.embed-container-overlay .play-cur {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff url('../images/ytv-overlay2.png') center center no-repeat;
	background-size: cover;
}
.embed-container.hasOverlay .embed-container-overlay {display: block;}
.embed-container iframe {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	z-index: 1;
}
@media (max-width: 1279px) {
	#sec6 .cd-half-block-single {padding-top: 205px;}
	#sec6 .cd-half-block-single::before {height: 180px;}
	.embed-outer {padding-top: 205px;}
}
@media (max-width: 767px) {
	#sec6 .cd-half-block-single {
		padding-top: 90px;
	}
	#sec6 .cd-half-block-single::before {
		width: 100%;
		width: 100vw;
		height: 90px;
		box-shadow: none;
	}
	.embed-outer {top: 90px;}
}
@media screen and (orientation: portrait) and (max-width: 767px) {
	#sec6 .cd-block .cd-half-block-single {}
	#sec6 .multi-lang {width: 100%;}	
	.embed-outer {
	padding: 0 20px 0 80px;
	width: 100%;
	height: auto;
	border-width: 0;
	}
}
@media screen and (orientation: landscape) and (max-width: 767px) {    
	#sec6 .multi-lang {width: 50%;}
	#sec6 .multi-lang.bibi[style] {padding-top: 0 !important;}
	.embed-outer {padding: 0 20px 0 0;}
}



/* ###### audio player ###### */
#audioplayer {}
	#audio0 {display: none;}
	#plwrap {}
		#plUL {padding-right: 20px;}
			#plUL li {position: relative;margin-bottom: 10px; width: 100%;color: #b3b3b3;}
			#plUL li.plSel {color: #000;}
			
				#plUL li.playing a {background: url('../images/icon_pause.png') left top no-repeat;}
				#plUL li:not(.plSel):hover a,
				#plUL li.plSel:not(.playing) a {background: url('../images/icon_play.png') left top no-repeat;}
				#plUL li a {
					display: block;
					padding-left: 42px;
					color: #b3b3b3;
				}
				#plUL li.plSel a {color: #000;}
				
					#plUL li a div {line-height: 1;margin-bottom: 4px;}
					.plNum,
					.plTitle {text-transform: capitalize;font-size: 1.125em;font-weight: 300;}
					.plNum {position: absolute;top:0;left:0;display: block;}
					#plUL li:not(.plSel):hover .plNum,
					#plUL li.plSel:not(.playing) .plNum,
					#plUL li.playing .plNum {display: none;}
					.plLength {font-size: .75em;font-weight: 900;letter-spacing: .1em;}
				/* timeline styles */
				.plProgress {
					position: relative;
					height: 10px;
				}
				@media (min-width: 768px) {
					#plUL li a, .plProgress {width: 40%;min-width: 260px;}
				}
				
					#outerseek {display: block;padding: 2px 0;width: 100%;height: 100%;border: 1px solid #ccc;border-radius: 10px;}
						#innerseek {display: block;height: 100%;width: 0;background: #666;border-radius: 6px;}
					#duration {
						position: absolute;
						top: -16px;
						right: 2px;
						display: block;
						font-size: .75em;
						font-weight: 300;
						letter-spacing: .1em;
						text-align: right;
						color: #666;
						width: 30px;
					}

/* pulse animated elements */
#audiopause {
	position: fixed;	
	display: none;
	top: 12px;
	left: 14px;
	width: 41px;
	height: 41px;
	z-index: 500;
}
@media (min-width: 768px) {
	#audiopause {
		top: 14px;
		left: 30px;
}
}
#audiopause.hasinit {display: block;}
#sec3.iscur ~ #audiopause.hasinit {display: none;}
#pulsar {
	position: absolute;	
	width: 80px;
	height: 80px;
	z-index: 10;
	transition: left .35s cubic-bezier(0.68, -0.55, 0.265, 1.55), top .35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media (max-width: 767px) {
	#pulsar {
		display: none;
	}
}
.defpos {top: 100%;left: 100%; /* top: calc(50% - 50px); */ }
.pos-ak {top: 50%;left: 70%;}
.pos-sh {top: 35%;left:  5%; }
.pos-fi {top: 35%;left: 30%;}
.pos-vs {top: 40%;left: calc(99% - 80px);}

.shape {
		position: absolute;  
		margin: auto; 
		top: 0; left: 0;bottom: 0; right: 0;
		box-sizing: border-box;
	}
.pulse {
		position: absolute;  
		margin: auto;
		opacity: 0;
		-webkit-animation: pulse 2s linear infinite;
		animation: pulse 2s linear infinite;
		box-sizing: border-box;
	}

#audiopause .shape {
		width: 29px;
		height: 29px;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 20px;
		opacity: 1;
		z-index: 503;
	}
#audiopause .shape::before,
#audiopause .shape::after {
	content: "";
	position: absolute;
	top: 6px;
	display: block;
	width: 4px;
	height: 15px;
	background: #fff;
	border: 1px solid #b3b3b3;
	border-radius: 2px
}
#audiopause .shape::before {left: 8px;}
#audiopause .shape::after {left: 15px;}
#audiopause:hover .shape::before,
#audiopause:hover .shape::after {background: #b3b3b3;}	
#audiopause .pulse {
		top: -10px; left: -10px;
		width: 61px;
		height: 61px;
		border: 2px solid rgba(0,0,255,.6);
		box-shadow: 
		        0 0 8px 8px rgba(0,0,255,.4),
		inset	0 0 8px 8px rgba(0,0,255,.6);
		border-radius: 32px;
		z-index: 501;
}
#audiopause.hasinit .pulse {display: block;}
#audiopause.hasinit.ispaused .pulse {display: none;}
#audiopause.ispaused .shape::before,
#audiopause.ispaused .shape::after {display: none;}
#audiopause.ispaused .shape {background: #fff url('../images/icon_extern-play.png') left top no-repeat;}
#audiopause.ispaused:hover .shape {background-image: url('../images/icon_extern-play-omo.png');}
		
#pulsar .shape {
		width: 19px;
		height: 19px;
		background: #fff;
		border: 1px solid #fff;
		border-radius: 25px;
		opacity: .7;
		box-shadow: 0 0 2px 1px #fff;
		z-index: 2;
	}
#pulsar .pulse {
		top: 0; left: 0;bottom: 0; right: 0;
		width: 80px;
		height: 80px;
		border: 4px solid rgba(255,255,255,.6);
		box-shadow: 
		        0 0 12px 12px rgba(255,255,255,.2),
		inset	0 0 12px 12px rgba(255,255,255,.4);
		border-radius: 80px;
		z-index: 1;
	}
@-webkit-keyframes pulse {
	0%   {-webkit-transform: scale(0); 		opacity: 0;}
	8%   {-webkit-transform: scale(0); 		opacity: 0;}
	15%  {-webkit-transform: scale(0.3); 	opacity: .2;}
	30%  {-webkit-transform: scale(0.75); 	opacity: .3;}
	100% {-webkit-transform: scale(1);		opacity: 0;}
}
@keyframes pulse {
	0%   {transform: scale(0); 		opacity: 0;}
	8%   {transform: scale(0); 		opacity: 0;}
	15%  {transform: scale(0.3); 	opacity: .2;}
	30%  {transform: scale(0.75); 	opacity: .3;}
	100% {transform: scale(1);		opacity: 0;}
}

/* DEV: Viewport-Dimensions Echo */
.dimensions {position: fixed;right:0px;bottom:0;z-index: 9999;height: 14px;}
.dimensions p {padding: 2px;font-size: 10px;font-family: sans-serif;line-height: 1;color: #999;text-transform: none;letter-spacing: 0;background: #f8f8f8;}
.dimensions span {}

/* ##### MEDIA QUERIES ##### */
/* ### max-width-styles ### */
@media (max-width: 2000px) {}
@media (max-width: 1000px) {}
/* ### min-width-styles ### */
@media (min-width: 480px) {}
@media (min-width: 768px) {}

.ds-link {
	position: fixed;
	z-index: 100;
	top: auto;
	right: auto;
	bottom: 10px;
	left: 0;
	background: purple;
}
.ds-link a {
	display: inline-block;
	padding: 0 10px;
	color: #ccc;
	text-decoration: none;
	font-size: 80%;
	line-height: 30px;
}
.ds-link a:hover {color: #fff;text-decoration: underline;}


/* EOF */