/*========================
GLOBAL
=========================*/
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
font-family: acumin-pro, sans-serif;
font-weight: 300;

	/*font-family: helvetica, serif;*/
	/*font-weight: 300;*/
	font-style: normal;
	font-size : 1em;
	color : #000;
	background: #ffffff;
}

.headline{
	font-size : 1.5em;	
}
/*========================
container styles
=========================*/
header {
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0;
	background-color: none;
	z-index: 10;
}
.page-wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: white;
	overflow: auto;
}

nav {
	width: 100%;
	margin: 0;
	padding: 0;
}
main {
	min-height: 91vh;
	position: relative;
	margin-top: 5em;
	z-index: 6;
	background: #fff;
	opacity: 0;
	transition: opacity 0.5s;
}

.main-loaded{
	  opacity: 1;
}


main.home {
	position: relative;
	margin-top: 100vh;
	z-index: 6;
}
main.single {
	position: relative;
	margin-top: 0;
	z-index: 6;

}



section {
	width: 100%;
	margin: 0 auto 0 auto;
	background-color: none;
	padding: 1em 1em 0em 1em;
	box-sizing: border-box;
	background: none;
}
section.full {
	padding: 0 0 0 0;
	background-color: none;
}
.section_text {
	padding-top: 0.5em;
}
section:after {
	content: "";
	display: table;
	clear: both;
}
.textbox {
	height: 30em;
	background-color: none;
	margin: 0 4em 0 4em;
}
.projekttext {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.projekttext a{
	text-shadow: 0 0 7px rgba(0,0,0,1);
	
}

.projekttext a:hover{
	text-shadow: 0 0 7px rgba(0,0,0,1);
	color: transparent;
}

@media screen and (max-width: 768px) {
.textbox {
	height: auto;
	background-color: none;
	margin: 0 0em 0em 0em;
}
.projekttext {
	position: relative;
	top: 0;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 2em;
	display: block;
	background-color: none;
}
}
article {
/* background-color: white; */
}
footer {
	font-size: 0.7em;
	position: relative;
	top: 0px;
	background-color: #fff;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 1em 0 1em 0;
	z-index: 7;
}

@media screen and (max-width: 768px) {
footer {
	font-size: 0.6em;
}
}
/*========================
classes
=========================*/
.start {
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0 auto 0 auto;
	background-color: none;
	z-index: 2;
}
.open_start {
	text-align: left;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	z-index: 0;
	background: none;
}

@media screen and (max-width: 768px) {
.open_start {
	background: none;
}
}
.scene {
	z-index: 1;
	position: fixed;
	/*width: 100%;*/
	height: 100%;
	background-color: #000;
	margin: 0 auto 0 auto;
	box-sizing: border-box;
	/*-webkit-filter: blur(5px);
	filter: blur(5px);*/
}
.row, .row-big {
	position: relative;
	height: auto;
	padding: 0;
	box-sizing: border-box;
	overflow: auto;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: flex;
	background-color: none;
}
.row {
	/*max-width: 990px;*/
	width: auto;
	margin: 0 auto 2em auto;
}
.row-big {
	width: 100%;
	margin: 0 auto 0 auto;
}
.map {
	position: relative;
	padding-bottom: 56%;
	height: 0;
	overflow: hidden;
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.spread {
	position: relative;
	padding-bottom: 60%;
	margin: 0 5% 0 5%;
	height: 0;
	overflow: hidden;
}
.spread iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.description {
	margin: 0;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
.pull-right {
	background-color: none;
	display: block;
	float: right !important;
	margin: 1em 1em 1em 0;
	padding: 0px;
}
.pull-left {
	background-color: none;
	display: block;
	float: left !important;
	margin: 1em 0em 1em 0em;
	padding: 0px;
}
/*========================
boxen in 2 Breiten
=========================*/
.box_2_l, .box_2_r, .box_1, .box_3_l, .box_3_m, .box_3_r, .box_4, .box_5, .box_6, .box_6l, .box_6r {
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	flex: auto;
	background: none;/*gleiche Höhe siehe row display: flex, float bei mediaqueries allerdings aufgehoben */
	position:relative;
}
.box_1 {
	width: 100%;
	margin: 0;
		overflow:hidden;

}
.box_2_l, .box_2_r {
	width: 50%;
}
.box_2_l {
	margin: 0 0.5em 2em 0;
}
.box_2_r {
	margin: 0 0 2em 0.5em;
}
.box_3_l {
	width: 33.3333333328%;
	margin: 0 0.5em 0 0em;
}

/*.box_2_l a, .box_2_r a, .box_1 a, .box_3_l a, .box_3_m a, .box_3_r a{
color:#fff;
}

.box_2_l a:hover, .box_2_r a:hover, .box_1 a:hover, .box_3_l a:hover, .box_3_m a:hover, .box_3_r a:hover{
color:#000;
}*/


.box_3_m {
	width: 33.3333333328%;
	margin: 0 0.5em 0 0.5em;
}
.box_3_r {
	width: 33.3333333328%;
	margin: 0 0 0 0.5em;
}
.box_4 {
	width: auto;
	margin: 0 2em 4em 4em;
}
.box_5 {
	width: auto;
	margin: 0 20em 4em 20em;
}

.box_6{
	width: auto;
	margin: 0 12em 4em 12em;	
}
.box_6_l, .box_6_r {
	width: 50%;
}
.box_6_l {
	margin: 0 4em 4em 4em;
}
.box_6_r {
	margin: 0 4em 4em 4em;
}

/* medium tablet */
@media screen and (max-width: 768px) {
.box_1, .box_2_l, .box_2_r, .box_3_l, .box_3_m, .box_3_r, .box_4, .box_5, .box_6, .box_6_l, .box_6_r {
	width: 100%;
	margin: 0 0 2em 0;
}
.row, .row-big {
	display: block; /* untereinander */
}
.row, .row-big {
	width: auto;
	margin: 0;
}
}
.imagebox, .imagebox01, .imagebox02 {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
.imagebox {
	margin: 0em;
}
.imagebox01 {
	margin-right: 0.5em;
}
.imagebox02 {
	margin-left: 0.5em;
}
/*========================
Semantik
=========================*/
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #000;
}
h1 {
	display: block;
	position: relative;
	height: auto;
	margin: 0 0 1em 0;
	box-sizing: border-box;
	overflow: auto;
	font-size: 1em;
	font-weight: 300;
	padding: 0;
	color: #000;
}
h1.center {
	margin: 0 auto 1em auto;
	max-width: 990px;
}

@media screen and (max-width: 768px) {
h1.center {
	margin: 0 0 1em 0;
}
}
h1.open-start {
	font-size: 2em;
	text-align: left;
	color: white;
	margin: 40vh auto 0 auto;
}
h2, h3, h4 {
	font-size: 1em;
	font-weight: 300;
	display: block;
	padding: 0;
	margin: 0 0 1em 0;
}
p {
	padding: 0;
	margin: 0 0 0 0;
	color: #000;
	float: left;
	width: 100%;
	background-color: none;
	display: block;
	line-height: 1.4;
}


@media screen and (max-width: 768px) {
	p{
margin-bottom:1em;
	}
}
ul {
	list-style-type: circle;
	display: block;
	padding: 0 0 0 0em;
	margin: 0 0 0 1em;
	background: none;
}
ol {
	display: block;
	padding: 0 0 0 0em;
	margin: 0 0 0 0.5em;
	background: none;
}
img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
img.img_hover {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	filter: blur(0);
	transform: scale(1.2);
}
.box_2_l:hover img.img_hover, .box_2_r:hover img.img_hover, .box_3_l:hover img.img_hover, .box_3_m:hover img.img_hover, .box_3_r:hover img.img_hover {
	filter: blur(1.17rem);
	transform: scale(1.2);
	-webkit-transition: 0.2s ease;
	transition: 0.1s ease-in-out;
	-moz-transition: 0.1s ease-in-out;
}


@media screen and (max-width: 1024px) {
	
img.img_hover {
	filter: none;
	transform: none;
}
.box_2_l:hover img.img_hover, .box_2_r:hover img.img_hover, .box_3_l:hover img.img_hover, .box_3_m:hover img.img_hover, .box_3_r:hover img.img_hover {
	filter: none;
	transform: none;
}
	
}

img.imagebox {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
img.left {
	float: left;
}
img.center {
	max-width: 100%;
	height: auto;
	max-height: 100%;
	display: block;
	margin: 0;
}
img.fullscreen {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
}
img.center-bg {
	width: 100%;
	height: auto;
	height: 100%;
	display: block;
	margin: 0;
}

.uppercase {
	text-transform: uppercase;
}

}
#anfang, #datenschutz {
	display: block;
}
/*========================
Navigation header Startseite anders als Folgeseiten 2 siteheader
=========================*/
.nav-bar {
	position: fixed;
	width: 100%;
	height: auto;
	background-color: none;
	top: 0;
	padding: 0;
	margin: 0 auto 0px auto;
	overflow: auto;
	display: inline-block;
	z-index: 50;
	color: #fff;
	-webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	transition: 0.5s ease;
}
.nav-bar a {
	color: #fff;
	text-decoration: none;
}
.nav-bar a:hover {
	color: transparent;
	text-shadow: 0 0 7px rgba(255,255,255,1);
	;
}

.nav-bar li {
	color: #fff;
}

.nav-bar a.current {
	color: #fff;
	text-shadow: 0 0 7px rgba(255,255,255,0.5);
}

.nav-bar a.current:hover {
	color: transparent;
	text-shadow: 0 0 7px rgba(255,255,255,1);
}

.scrolled {
	position: fixed;
	width: 100%;
	height: auto;
	background-color: #fff;
	top: 0;
	padding: 0;
	margin: 0 auto 0px auto;
	overflow: auto;
	display: inline-block;
	z-index: 50;
	color: #000;
}
.scrolled a {
	color: #000;
	text-decoration: none;
}
.scrolled a:hover {
	color: transparent;
	text-shadow: 0 0 7px rgba(0,0,0,1);
	;
}

.scrolled a.current {
	color: #000;
	text-shadow: 0 0 7px rgba(0,0,0,0.5);
}

.scrolled a.current:hover {
	color: transparent;
	text-shadow: 0 0 7px rgba(0,0,0,1);
}

.menu {
	color: #fff;
	text-decoration: none;
}
.menu:hover {
	color: transparent;
	text-shadow: 0 0 7px rgba(255,255,255,1);
	;
	cursor: pointer;
}
.menuscrolled {
	color: #000;
	text-decoration: none;
}
.menuscrolled:hover {
	color: transparent;
	text-shadow: 0 0 7px rgba(0,0,0,1);
	cursor:pointer;
	;
}
nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	background: none;
}

@media screen and (max-width: 768px) {
nav ul {
	display: none;
}
footer nav ul {
	display: block;
}
}

@media screen and (max-width: 768px) {
nav ul.small {
	display: inline;
	margin: 0;
	padding: 0;
}
}

@media screen and (min-width: 768px) {
nav ul.small {
	display: none;
}
}
/* Menu smartphone and tablet */
/*#smart_nav {
	position: fixed;
	overflow: hidden;
	right: -100%;
	top: 0;
	display: block;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 80px 0 0 0;
	background-color: #000000;
         -webkit-transform: translate(0px,0px);
        -moz-transform: translate(0px,0px);
        -o-transform: translate(0px,0px);
        -ms-transform: translate(0px,0px);
        transform: translate(0px,0px);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
	z-index: 1001;
}
#smart_nav.active {
	-webkit-transform: translate(-100%,0px);
	-moz-transform: translate(-100%,0px);
	-o-transform: translate(-100%,0px);
	-ms-transform: translate(-100%,0px);
	transform: translate(-100%,0px);
}
#smart_nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border-bottom: 2px solid #ff2600;
}
#smart_nav li {
	padding: 0.3em 0.3em 0.3em 1em;
	text-align: left;
	border-top: 2px solid #ff2600;
	background-color: #000000;
}
#smart_nav a {
	text-decoration: none;
	color: #ff2600;
	display: block;
	width: 90%;
}
/* close button */
#close {
	width: 2em; /* 40 */
	height: 2em; /* 40 */
	text-align: left;
	background-color: none;
	position: absolute;
	z-index: 1002;
top: 1em;
	right: 1em;
}

#close:hover {
cursor: pointer;
}

.close{}

.close:hover{
cursor: pointer;	
}
/* Ende Menu smartphone and tablet */
nav ul li {
	display: inline-block;
	text-align: center;
	margin: 0;
	padding: 0 0 0 1em;
}

@media screen and (max-width: 768px) {
nav ul li {
	min-width: auto;
	border: 0;
}
}
nav ul li a {
	position: relative;
	display: block;
	z-index: 1;
}

@media screen and (min-width: 768px) {
nav ul li a:hover {
/*	transition: all 900ms;
		-webkit-transition: all 0,3s;
		-moz-transition: all 0,3s;
		-o-transition: all 0,3s;
		-ms-transition: all 0,3s;*/
}
}


nav ul li.brand a:hover, li.brand2 a:hover {
	background-image: url("../graphics/brand-mo.png");/*-webkit-transition: all 0,3s ease;
	transition: all 2s ease;*/
}
nav ul li.menu a:link {
	position: relative;
	display: block;
	width: 30px;
	height: 28px;
	margin-top: 3px;
	background-image: url("../graphics/menu.svg");
	background-size: contain;
	background-repeat: no-repeat;
	text-decoration: none;
}





footer nav {
	margin: 0 auto 0 auto;
}
.footer_nav-bar {
	/*width: 291px;
	margin: 0 auto;*/ /*mittig*/
	margin: 0 0 0 1em;
	width:auto;
	height: auto;
	background-color: none;
	top: 0;
	padding: 0;
	overflow: auto;
	display: block;
}
footer nav ul {
	list-style-type: none;
	display: inline;
	padding: 0;
	margin: 0 auto;
}
footer nav ul a {
	padding: 0px;
}
footer nav li {
	background-color: none;
	margin-right: 0.5em;
	margin-left: 0.5em;
	padding: 0;
}
/* video startseite */
.fullscreen-bg {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/*overflow: hidden;*/
	background-color:lightgreen;
	z-index: -100;
}
.fullscreen-bg_video, .fullscreen-bg_video_s {
	position: absolute;
	margin-left: 0%;
	margin-top: 0;
	/*min-width: 100%;*/
	min-height: 100%;
	height: 100%;
	width: auto;
}

/* startseite video desktop und video small tablet smartphone */
@media screen and (min-width: 768px) {
.fullscreen-bg_video {
	display: block;
}
.fullscreen-bg_video_s {
	display: none;
}
}

@media screen and (max-width: 768px) {
.fullscreen-bg_video {
	display: none;
}
.fullscreen-bg_video_s {
	display: block;
}
}
.ani_video {
	display: block;
	margin: 0 auto 0 auto;
	max-width: 100%;
	height: auto;
}
.fullscreen-image {
	position: absolute;
	margin: 0 auto 0 auto;
	display: block;
	min-width: 100%;
	min-height: 100%;
	height: auto;
	width: auto;
}
/*========================
Browser Präfixe
=========================*/
body {
	-webkit-box-sizing: border-box; /* ältere Wbkit-Browser */
	-moz-box-sizing: border-box; /* Firefox */
	box-sizing: border-box; /* W3C/Chrome//Opera/IE */
	-webkit-background-size: cover;
}
.smart-nav {
	height: 100%;
	width: 100%;
	/*margin-left:-90%;*/
	margin-left: -105%;
	padding:0;
	position: fixed;
	background-color: #fff;
	z-index: 100;
	/*padding: 1em  1em 1em 1em;*/
	-webkit-box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.1);
	overflow: scroll;
	font-size:1.5em;
}

.smart-nav ul{
list-style-type: none;
margin-top:1em;
}

.smart-nav ul li{
margin-bottom:0.5em;
}

.smart-nav a{
	color: #000;
	text-decoration: none;
}
.smart-nav a:hover {
	color: transparent;
	text-shadow: 0 0 7px rgba(0,0,0,1);
	cursor:pointer;
	;
}

/*#open {
	color: #000;
	text-decoration: none;
}
#open:hover {
color: transparent;
   text-shadow: 0 0 7px rgba(0,0,0,1);;
	cursor:pointer;
}
*/

.img_frame {
	overflow: hidden;
}

.caption {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
    transition: .3s ease;
}


.box_3_l:hover .caption, .box_3_m:hover .caption, .box_3_r:hover .caption{
  opacity: 1;
}

#cookiedingsbums a {	text-shadow: 0 0 7px rgba(0,0,0,0.5);}

#cookiedingsbums a:hover {		text-shadow: 0 0 0px rgba(0,0,0,1);}

#cookiedingsbums div {padding:10px; padding-right:40px;}

#cookiedingsbums { 
   text-align:left; 
   /*border:1px solid #fff;*/
   background: #fff; 
   padding:1em;
	padding-bottom:1em;
   position:fixed;
   bottom:0; 
   z-index:10000; 
   width:100%; 
	height:auto;
}

#cookiedingsbumsCloser {
   text-decoration: none;
   cursor:pointer;
   padding:0 4px 0 5px;
 }

#cookiedingsbumsCloser:hover {
   color: #000000;
}

img.close_x3 {
	width: 10px;
	float: right;
	height: auto;
	padding-top:0.5em;
	padding-right:2em;
}