/* GLOBAL STYLES
 ===================================================================*/

@import url('reset.css');
@import url('farben_paddings_margins.css');

body {
	font-size: 13px;
	line-height: 19px;
	color: #fff;
	/*font-family: 'Lato', Thonburri, Calibri, Arial, Helvetica, sans-serif;*/ /* Logo v2 */
	font-family: 'Ubuntu', Thonburri, Calibri, Arial, Helvetica, sans-serif; /* Logo v3 */
	font-weight: 300;
	background-color: #fff;
	/*-webkit-font-smoothing:antialiased;  Safari: manche Schriften werden dünner, siehe reset.css */
	/*text-rendering: optimizeLegibility !important; z.B. für Ligaturen Fonts < 20px */
}
p { margin:0 0 10px 0; padding:0; } /* default ist margin: 1em 0px */

hr { color:#678181; background-color:#678181; height:1px; margin-bottom:10px; margin-top:10px; border:0; width:550px; text-align:left; }

a { color:#00a8e2; text-decoration:none; outline: none; }
a:hover { color:#008bbb; text-decoration:none; }

h1 {
	/*font-family: 'Sansita One', cursive;*/
    font-family: 'Ubuntu', sans-serif;
    font-style: italic;
    opacity: 0.85;
	color:#fff;
	padding-top:0px;
	margin-bottom:4px;
	font-size:72px;
	line-height:72px;
	/*font-weight:normal;*/
    font-weight:700;
	/*letter-spacing:1px;*/
    letter-spacing:-1px;
}
h2 {
	/*font-family: 'Lato', Thonburri, Calibri, Arial, Helvetica, sans-serif;*/
    font-family: 'Ubuntu', sans-serif;
	font-size:30px;
	/*font-family: 'Sansita One', cursive;
	font-size:38px;
	letter-spacing:1px;*/
	color:#fff;
	padding-top:0px;
	margin-bottom:42px;
	line-height:30px;
	font-weight:300;
	/*letter-spacing:1px;*/
}


#container { width: 100%; z-index:1; }

#header {
	margin: auto;
	height:130px; /* auch mq */
	width:756px;
}
#logo {
	margin-top:67px; /* auch mq */
	float:right;
}

#chart {
	height: 518px; /* auch mq */
	width:100%;
	background-color:#002337;
	/*background-image:url(../images/film-still.jpg);*/
	/*background-image:url(images/bg-platzhalter-aus-layout.jpg);*/
	background-position: 50% 0px;
	position:relative;
	overflow:hidden;
}

#wasserContainer { width:2232px; }
#film {
	position:absolute;
	top:0px;
	left:500px;
}
#fullscreen_video { visibility:hidden; }


#textOverFilm {
	position:absolute;
	top:234px;
	left:736px;
}
#fishNpearl { 
	margin-left:12px; 
	font-size:20px; 
	line-height:20px;
	color:#e5f6fc;
}
#theBlackPearl {
	position:absolute;
	top:403px;
	left:995px;
	/*-webkit-mix-blend-mode: hard-light;
	mix-blend-mode: screen;*/
}


#infoInhalt {
	position:absolute;
	top:114px; /* alt: top:134px; */
	left:736px;
	width:756px;
	min-height:333px;
	font-size: 13px;
	letter-spacing:1px;
	font-weight:400;
}


#portfolioContainer {
	width:100%;
	/*min-height:518px; alt*/
	position:relative; 
	background-color: rgba(255, 255, 255, 0.95);
	/*background-color: rgba(10, 37, 69, 0.5);*/ /* dunkelblau */
	z-index:2;
}
#portfolioInhalt {
	width:1122px; /* alt 756px */
	padding-top:15px;
	font-size: 13px;
	letter-spacing:1px;
	font-weight:400;
	color:#008bbb;
	margin:auto;
	/*alt background-image:url(../images/bgPortfolioChart756px.jpg);
	background-repeat:no-repeat;
	background-position: 50% 60px;*/
}
#portfolioInhalt h2 { color:#008bbb; }
#portfolioIframe { 
	width:1122px; /* alt 756px */
	height:520px;
}


#pngVerlaufLinks {
	position:absolute;
	top:0px;
	left:500px;
}
#pngVerlaufRechts {
	position:absolute;
	top:0px;
	left:1703px;
}
#bgLinks {
	position:absolute;
	top:0px;
	left:0px;
}
#bgRechts {
	position:absolute;
	top:0px;
	left:1732px;
}

#copyright {
	margin-top:2px; 
	line-height:9px;
	float:left;
	font-size:11px;
	color:#00a8e2;
}

#navigation {
	margin:auto;
	width:756px;
	margin-top:19px;
	font-size:30px;
}
#navigationPhone {
	margin-top:72px; 
	font-size:38px;
	line-height: 38px;
	float:right;
}

/* iPhone und iPad. #chart von iPad in Landscape siehe unten */
@media only screen and (max-width: 980px) and (orientation:landscape) {
	#header { height:86px; }
	#logo { margin-top:22px; }
	#textOverFilm { top:139px; }
	#navigationPhone { margin-top:26px; }
	#infoInhalt { top:70px; }
	#portfolioInhalt { padding-top:0px; background-position: 50% 30px; }
}



/* ANFANG Layout */
.visible { visibility:visible; }
.hidden { visibility:hidden; }

.inline { display:inline-block; }
.none { display:none; }

.left { float:left; }
.right { float:right; }
.clear { clear: both; margin: 0; padding: 0; font-size: 0; height: 0; line-height: 0; }

.inhaltFussbuendig { display: table-cell; vertical-align: bottom; }/* ACHTUNG: funzt nur ohne float */

.eckenRunden {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius:4px;
	border-radius: 4px;
}

/* Text-Pfeil. Alternativ mit css-before oder -after mit Zeichen ‹› bzw. "<span class="pfeil">›</span>" oder mit FA fa-angle-right bzw. &#xf105; siehe unten «.icon::before» */
.pfeilKlein { font-size:31px; line-height:1px; vertical-align:-3px; font-family:'Lato', 'Courier', sans-serif; font-weight: 300; text-decoration:none; display:inline-block; }
.pfeil { font-size:1.9em; line-height:1px; vertical-align:calc(-0.1em + 0.5px); font-family:'Lato', 'Courier', sans-serif; font-weight: 300; text-decoration:none; display:inline-block; }
.pfeilGross, .pfeilH1 { font-size:42px; line-height:1px; vertical-align:-5px; font-family:'Lato', 'Courier', sans-serif; font-weight: 300; font-style: normal!important; text-decoration:none; display:inline-block; }

.pfeilNachUnten {
	font-size: 189px;
	font-weight: 300;
	font-family: 'Lato', Courier, sans-serif; 
	line-height:1px;

	transform: rotate(90deg);

	padding-bottom: 46px; /* ca. 1/4 font-size */
	display: inline-block;
	margin: 0;
}
/* ENDE Layout */



/* Retina Images (High Resolution)
====================================================================== */
/*@media (-Webkit-min-device-pixel-ratio: 1.5),
 (-moz-min-device-pixel-ratio: 1.5),
 (-o-min-device-pixel-ratio: 3/2),
 (min-device-pixel-ratio: 1.5),
 (min-resolution: 1.5dppx) {
	#back-top a {
		background-image: url(../images/goTopOff_2x.png);
	}
	#back-top a:hover {
		background-image: url(../images/goTop_2x.png);
	}
 }
 
@media only screen and (max-width: 959px) {

}
*/