/* -------------------------------- 

Primary style

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

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Opensans_B", sans-serif;
  color: #ffffff;
  background-color: #333333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
@media only screen and (min-width: 1050px) {
  body::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

a {
  color: #267481;
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
@media only screen and (min-width: 1050px) {
  body {
    /*overflow: scroll;*/
  }
}

.cd-section {
  height: 100vh;
  display:none;
}

.cd-section:first-of-type > div {
  background-color: #333333;
  height: 100vh !important;
}
.cd-section:first-of-type > div::before {
  /* alert -> all scrolling effects are not visible on small devices */
  content: 'Effects not visible on mobile!';
  position: absolute;
  width: 100%;
  text-align: center;
  top: 20px;
  z-index: 2;
  font-weight: bold;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #6a7083;
}

.cd-section div.bg {
	height:100vh;	
}
.cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#section1 div.bg {
  background-image: url("../media/yacht2.jpg");
}
#section2 div.bg {
  background-image: url("../media/helikopter2.jpg");
}
#section3 div.bg {
  background-image: url("../media/kinderhaende.jpg");
}
#section4 div.bg {
  background-image: url("../media/hochhaeuser.jpg");
}
#section5 div.bg {
  background-image: url("../media/windraeder2.jpg");
}
#section6 div.bg {
  background-image: url("../media/reisterassen2.jpg");
}
#section7 div.bg {
  background-image: url("../media/bienenstock2.jpg");
}
#section8 div.bg {
  background-image: url("../media/bienenstock2.jpg");
}

/* FCG */

/* HEADER */

header {
	position:fixed;
	width:100%;
	z-index:15;
	background:rgba(51,50,50,0.67);
}

.logo {
	padding:1em 1em 1em 2em;
	float:left;
	color:#ffffff;
	font-weight:300;
	letter-spacing: 2px;
}

.logo a {
	text-decoration: none;
	color:#ffffff;
	cursor: pointer;
}

.languages {
	padding:1.2em 2em 1em 1em;
	float: right;
	color:#e0e0e0;
	font-size:0.8em;
}

.languages a {
	text-decoration: none;
	color:#e0e0e0;
	letter-spacing: 2px;
	font-weight:300;
	cursor:pointer;
}

span.obenweg a {
	margin-right:1.2em;	
}

.fett {
	font-weight:800 !important;
}


.headline {
	color:#ffffff;
	font-size:1.5em;
	letter-spacing:3px;
	font-weight: 400;
	padding:0.5em;
	/*background-color:rgba(92,92,92,0.30);*/
	background-color:rgba(0,0,0,0.35);
	text-transform: uppercase;
	display:inline-block;
}
.subheadline {
	color:#ffffff;
	font-size:1.1em;
	font-weight: 400;
	padding:0.5em;
	line-height: 145%;
	width:60%;
	background-color:rgba(92,92,92,0.50);
	/*background-color: rgba(0,0,0,.2);*/
	margin-top:1em;
}

@-webkit-keyframes FADEH {
  0%   { opacity: 0; }
  20%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes FADEH {
  0%   { opacity: 0; }
  20%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes FADEH {
  0%   { opacity: 0; }
  20%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes FADEH {
  0%   { opacity: 0; }
  20%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes FADEV {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes FADEV {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes FADEV {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes FADEV {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes FADEOUT {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes FADEOUT {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes FADEOUT {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes FADEOUT {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.sectionheader {
	position:absolute;
	z-index:99;
	top:6em;
	width:90%;
	padding:0em 5%;
	display:none;
}


.sectionfooter {
	position: absolute;
	z-index:99;
	bottom:60px;
	color:#e0e0e0;
	font-weight:300;
	width:100%;
	text-align:center;
	padding:0px 5%;
	display:none;
}

.animateblock {
	-webkit-animation: FADEH 12s normal; /* Safari 4+ */
	-moz-animation:    FADEH 12s normal; /* Fx 5+ */
	-o-animation:      FADEH 12s normal; /* Opera 12+ */
	animation:         FADEH 12s normal; /* IE 10+, Fx 29+ */
	display:block;
}

.visible, .zeigen {
	-webkit-animation: FADEV 3s normal; /* Safari 4+ */
	-moz-animation:    FADEV 3s normal; /* Fx 5+ */
	-o-animation:      FADEV 3s normal; /* Opera 12+ */
	animation:         FADEV 3s normal; /* IE 10+, Fx 29+ */
}

.invisible {
	-webkit-animation: FADEOUT 3s normal; /* Safari 4+ */
	-moz-animation:    FADEOUT 3s normal; /* Fx 5+ */
	-o-animation:      FADEOUT 3s normal; /* Opera 12+ */
	animation:         FADEOUT 3s normal; /* IE 10+, Fx 29+ */
}

.cd-section.visible > div, .cd-section.zeigen > div {
	opacity:1 !important;
}

section.sectionfooter .inhaltboxen {
	
	/*padding:0em 5%;*/
	/*min-width:1024px;*/
	margin:0px auto;
}

section.sectionfooter .textbox {
	width:28%;
	float:left;
	color:#333333;
}

section.sectionfooter .textbox-l {
	width:46%;
	float:left;
	color:#333333;
}

section.sectionfooter .textbox-xl {
	width:75%;
	margin:0 auto;
	/*max-width:1024px;*/
	color:#333333;
}

section.sectionfooter .textbox2 {
	width:8%;
	float:left;
	color:#333333;
}

section.sectionfooter .textbox h3, section.sectionfooter .textbox-xl h3, section.sectionfooter .textbox-l h3 {
	font-size:1.2em;
	line-height: 1.2em;
	font-weight:400;
	text-transform: uppercase;
	margin-bottom:0.8em;
	text-align: left;
}

section.sectionfooter .textbox p, section.sectionfooter .textbox-xl p, section.sectionfooter .textbox-l p {
	font-size:0.9em;
	line-height:1.2em;
	margin-bottom:0.8em;
	text-align: left;
}

section.sectionfooter .textbox .content, section.sectionfooter .textbox-xl .content, section.sectionfooter .textbox-l .content {
	/*background-color:#ffffff;*/
	background-color: rgba(255,255,255,1.00);
	padding:1.5em;
	height:160px !important;
	overflow-y: scroll;
	overflow-x:hidden;
	text-align: left;
}

section.sectionfooter .textbox .contentlast {
	background-color: rgba(255,255,255,1.00);
	padding:1.5em;
	height:160px !important;
	overflow-y: scroll;
	overflow-x:hidden;
	text-align: left;
}

section.sectionfooter .textbox .contentmiddle {
	background-color: rgba(255,255,255,1.00);
	padding:1.5em;
	height:160px !important;
	/*overflow: scroll;*/
	overflow-y: scroll;
	overflow-x:hidden;
	text-align: left;
}


video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    /*background: url(../media/film-still.jpg) no-repeat;*/
    background-size: cover; 
}

#startslide {
	position: absolute;
	bottom:5em;
	color:#e0e0e0;
	font-weight:300;
	text-align: center;
	width:100%;
}

#sectionA .contentA {
	margin:0px auto;
	width:1000px;
}

#sectionA .contentA h1 {
	font-size:3em;
	text-align:center;
	line-height: 130%;
	margin-bottom:1.2em;
}

.feature {
	width:25%;
	float:left;
	font-size:1em;
	font-weight:300;
	cursor:pointer;
}

/* SLIDE 2 */

#startslide2 {
	position: absolute;
	bottom:60px;
	color:#e0e0e0;
	font-weight:300;
	width:100%;
	text-align:center;
	display: none;
	/*padding:0px 5%;*/
	padding:0px;
}

#startslide2 .inhaltboxen {
	
	/*padding:0em 5%;*/
	/*min-width:1024px;*/
	margin:0px auto;
}

#startslide2 .inhaltboxen {
    padding: 0em 5%;
    min-width: 1024px;
    margin: 0px auto;
}

#startslide2 .textbox {
	width:28%;
	float:left;
	color:#333333;
}
#startslide2 .textbox2 {
	width:8%;
	float:left;
	color:#333333;
}

#startslide2 .textbox h2 {
	font-size:1.2em;
	line-height: 1.2em;
	font-weight:400;
	text-transform: uppercase;
	margin-bottom:0.8em;
	text-align: left;
}

#startslide2 .textbox p {
	font-size:0.9em;
	line-height:1.2em;
	margin-bottom:0.8em;
	text-align: left;
}

#startslide2 .textbox .content {
	/*background-color:#ffffff;*/
	background-color: rgba(255,255,255,1.00);
	padding:1.5em;
	height:210px !important;
	overflow: scroll;
	text-align: left;
}

#startslide2 .textbox .contentlast {
	background-color: rgba(255,255,255,1.00);
	padding:1.5em;
	height:210px !important;
	overflow: scroll;
	text-align: left;
}

#startslide2 .textbox .contentmiddle {
	background-color: rgba(255,255,255,1.00);
	padding:1.5em;
	height:210px !important;
	/*overflow: scroll;*/
	overflow-y: auto;
	overflow-x:hidden;
	text-align: left;
}

#startslide2header {
	position:absolute;
	top:6em;
	width:90%;
	padding:0em 5%;
	display:none;
}

.headline {
	color:#ffffff;
	font-size:1.5em;
	letter-spacing:3px;
	font-weight: 400;
	padding:0.5em;
	/*background-color:rgba(92,92,92,0.30);*/
	background-color:rgba(0,0,0,0.35);
	text-transform: uppercase;
	display:inline-block;
}
.subheadline {
	color:#ffffff;
	font-size:1.1em;
	font-weight: 400;
	padding:0.5em;
	line-height: 145%;
	width:60%;
	background-color:rgba(92,92,92,0.50);
	/*background-color: rgba(0,0,0,.2);*/
	margin-top:1em;
}

.copytext {
	color:#ffffff;
	font-size:0.9em;
	font-weight: 400;
	padding:0.5em;
	line-height: 135%;
	width:50%;
}


#impressum, #kontakt, #disclaimer {
	position:absolute;
	top: 22em;
	width:90%;
	padding:0em 5%;
	display:none;
}

.impressum, .kontakt, .disclaimer {
	display: none;
	
}

.inhalttexte {
	width:95%;
	padding-left:5%;
	position:absolute;
	bottom:60px;
	height: calc(100vh - 480px);
	overflow: hidden;
}

/* Footer */

.languagesbottom {
	/*padding:1em 2em 1em 1em;*/
	/*text-align: right;*/
	color:#e0e0e0;
	font-size:0.8em;
	position:fixed;
	bottom:10px;
	right:10px;
	/*display:none;*/
	width:300px;
	z-index:900;
	/*min-width:1024px !important;*/
}

.languagesbottom a {
	text-decoration: none;
	color:#e0e0e0;
	letter-spacing: 2px;
	font-weight:300;
	cursor: pointer;
}

/* ENDE FCG */


@media only screen and (min-width: 1050px) {
  .cd-section h2 {
    font-size: 4rem;
    font-weight: 300;
  }
  /*
  .cd-section > div {
    opacity: 0;
  }
  */
  .cd-section.visible > div {
    z-index: 1;
  }
}

@media only screen and (min-width: 1050px) {
  .cd-section:first-of-type > div::before {
    display: none;
  }
}
@media only screen and (min-width: 1050px) {
  .cd-section > div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

.cd-vertical-nav {
  /* lateral navigation */
  position: fixed;
  z-index: 1;
  right: 48.2%;
  /*top: 50%;*/
  bottom: 0px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}

.cd-vertical-nav li {
	float:left;	
}
.cd-vertical-nav a {
  display: block;
  height: 20px;
  width: 20px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  /* background: url(../img/cd-icon-arrow.svg) no-repeat center center; */
  background: url(../media/pfeil-small.png) no-repeat center center;
  cursor:pointer;
}
.cd-vertical-nav a.cd-prev {
	/*
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  */
  background: url(../media/pfeil-small-top.png) no-repeat center center;
  margin-right: 10px;
}
.cd-vertical-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 1050px) {
  .cd-vertical-nav {
    display: block;
  }
}




@font-face {
  font-family: 'Opensans_B';
  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Opensans_B';
  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Opensans_B';
  src: url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Opensans_B';
  src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}