@media screen 
{
	body
	{
		font:400 10px/18px Arial, sans-serif;
		color:#3f3f3f;
		background:url(../images/bg-body.jpg) top left repeat
	}

	::selection {background:#ccc}
	::-moz-selection {background:#ccc}
	
	 a {
    color:#254795}
a:hover {
    text-decoration:none}

	.container
	{
		width:960px;
		margin:0 auto;
		position:relative
	}
	
	/* ALL NAVIGATIONS */
	nav ul,	.navi
	{
		list-style:none}
	.navi a
	{
		display:block}
	
	h1, h2, h3, h4, h5, h6 
	{
		margin-bottom:1em;
		text-rendering:optimizeLegibility;/* optimize text kerning */
		font-weight:normal;
		font-style:normal
	}
	h1 {font-size:4.2em; font-family:'robotolight'; text-align:center; border-bottom:1px solid #efefef; position:relative; line-height:100%; display:block; padding:0 0 0.85em}
	h1 span {font-family:'robotoregular'}
	h1:after {content:''; position:absolute; width:82px; height:5px; background-color:#254795; bottom:0; left:50%; margin-left:-41px}
	h2 {font-size:4.2em; font-family:'robotolight'; line-height:100%;
    margin-bottom:26px}
	h2 span {font-family:'robotoregular'}
	h3 {font-size:4.2em; font-family:'robotolight'; line-height:100%;
    margin-bottom:16px}
	h3 span {font-family:'robotoregular'}
	h4 {font-size:2.1em; font-family:'robotoregular'}
	h5 {font-size:1.6em; font-family:'robotoregular'; color:white}
	h6 {font-size:1em}
	
/* =======================================================================
	LANGUAGE NAV
========================================================================== */

	ul.languages {display:block; float:right; list-style:none outside none; margin:4.4em 0 0; position:relative}
	ul.languages a.de, ul.languages a.en  {width:33px; height:20px; position:absolute; right:0;text-decoration:none; top:0; z-index:10; text-indent:-9999px}
	ul.languages a.de {background:url(../images/german-flag.gif) 0 0 no-repeat}
	ul.languages a.en {background:url(../images/british-flag.gif) 0 0 no-repeat}
	ul.languages a.de {right:40px}
	body.lang-de ul.languages a.de,
	body.lang-en ul.languages a.en,
	ul.languages a.de:hover,
	ul.languages a.en:hover {}

	
/* =======================================================================
	MAIN NAV
========================================================================== */
	
	nav#mainNav {background-color:#FFFFFF; height:110px; position:fixed; top:0; width:100%; z-index:20; left:0}
	#navi {float:left; margin:4.5em 0 0 15em}
	#navi > li {float:left; height:27px; list-style:none outside none; margin:0 0.35em; position:relative}
	#navi > li:hover > a,
	#navi > li.active > a {border-bottom:1px solid #254896; color:#254896; padding-bottom:0.6em}
	#navi > li > a {color:#3f3f3f; font-family:'robotolight'; font-size:1.8em; list-style:none outside none; padding:0 0.45em; text-decoration:none}
	#navi > li.kontakt > a {font-family:'robotobold'; color:#204393}

/* =======================================================================
	FIRST SECTION
========================================================================== */

	#first {background:url(../images/oelplattform-und-tanker-im-meer.jpg) 50% 0 no-repeat fixed; padding:80px 0 0; margin-top:110px}
	
	#first #claim {height:600px; font-family:'robotolight_italic'; color:white; font-size:4.5em; padding:20px0 0}
	#first #claim span {display:block; padding:10px 19px; background:rgba(50,125,175,0.8); line-height:100%}
	#first #claim span.firstRow {width:297px}
	#first #claim span.secondRow {margin:5px 0 0 36px; width:434px}	
	
	body.en #first #claim span.firstRow {width:289px}
	body.en #first #claim span.secondRow {width:413px}	


/* =======================================================================
	SECOND SECTION
========================================================================== */

	#second {margin-top:10em}
	#second ul li {list-style:none}
	#second ul li span {display:inline-block; background:white; padding:10px 10px 10px 20px; font-size:1.6em; font-family:'robotolight_italic'; border-left:6px solid #254795; margin:0 0 8px 0; font-weight:bold}
	#second .content {background:white; margin-top:45px}
	#second .content p.special {font-family:'robotolight_italic'; font-size:1.6em; text-align:center; font-weight:bold; margin-bottom:2em}
	#second img {float:left}
	#second .boxLeft {padding:40px 20px 0 40px; float:left; width:358px}
	#second .boxRight {width:358px; float:left; padding:40px 40px 0 20px}
	#second p {font-size:1.4em; line-height:160%; font-family:'robotolight'; margin-bottom:12px}
	#second p.headline {font-family:'robotolight'; color:#3f3f3f; font-size:4.2em;
    margin-bottom:0}
	#second a.bigPdf {background:url("../images/pdf-icon.png") no-repeat scroll 24px 22px #FFFFFF; color:#3F3F3F; display:block; float:right; font-family:'robotolight'; font-size:2.2em; margin:1px 0 100px 0; padding:1.9em 2em 1.9em 4em; text-decoration:none; transition:background 0.4s ease-in-out}	
	#second a.bigPdf span {font-family:'robotoregular'}
	#second a.bigPdf:hover {background-color:#254795; color:white; transition:all 0.4s ease-in-out}
	
	#second .content.neu .boxLeft {padding:40px 20px 0 40px; float:left; width:371px}
	#second .content.neu .boxRight {padding:40px 40px 0 20px; float:left; width:560px}
	
/* =======================================================================
	THIRD SECTION
========================================================================== */

	#third {background:url(../images/coastlink-netzwerk-schiff.jpg) 50% 0 no-repeat fixed; margin-top:110px; height:1000px}
	#third .content {height:700px; color:white; padding:154px 0 0; display:block}
	#third .content .box {background:rgba(255,255,255,0.8); color:#3f3f3f; padding:40px 40px 0 40px; width:392px}
	#third .content .box p {margin-bottom:2em; font-size:1.4em;line-height:160%}
	
/* =======================================================================
	FOURTH SECTION
========================================================================== */	
	
	#fourth .bluebox {background:none repeat scroll 0 0 #254795; color:#FFFFFF; float:left; margin:100px 38px 100px 0; min-height:378px; padding:31px 21px 0; width:285px}
	#fourth  .bluebox h2 {border-bottom:1px solid #FFFFFF; color:#FFFFFF; display:block; font-size:3em; padding:0 0 0.6em; text-align:center}
	#fourth .bluebox ul li {font-family:'titilliumlight_italic'; font-size:1.6em; line-height:150%; padding:0 0 0 25px !important; list-style:none outside none; position:relative}
	#fourth .bluebox ul li:before {content:"»"; left:11px; position:absolute; top:-2px}
	#fourth .bluebox.bg_zielmaerkte {background:url("../images/bg-zielmaerkte-box.png") no-repeat scroll right bottom #254795}
	#fourth .bluebox.bg_zielgebiete {background:url("../images/bg-zielgebiete-box.png") no-repeat scroll right bottom #254795}
	#fourth .bluebox.bg_anwendungen {background:url("../images/bg-anwendungen-box.png") no-repeat scroll right bottom #254795}
	#fourth .bluebox.last {margin-right:0 !important}
	#fourth #gebiet p.headline {font-family:'robotolight'; color:#3f3f3f; font-size:4.2em; line-height:100%;
    margin-bottom:0.5em}

	span#hoverContentOpen {bottom:364px; color:#FFFFFF; display:block; font-size:1.2em; font-weight:bold; position:absolute; right:227px; text-transform:uppercase}
	span#hoverContentOpen:hover {cursor:pointer}
	#hoverContentContainer {background:rgba(32,67,147,1); bottom:367px; left:103px; padding:25px 37px 13px 25px; position:absolute; width:450px}
	
	#hoverContentContainer p {font-size:1.4em; line-height:160%; font-family:'robotolight'; margin-bottom:12px; color:white}
	
	span#hoverContentClose {border:2px solid #FFFFFF; border-radius:50%; color:#FFFFFF; font-size:1.3em; font-weight:bold; height:29px; padding:3px 0 0 8px; position:absolute; right:6px; top:6px; width:29px;transition:all 0.3s ease-in-out}
	span#hoverContentClose:hover {cursor:pointer; background:#ff8a00; transition:background 0.3s ease-in-out}

/* =======================================================================
	FIFTH SECTION
========================================================================== */	

	#fifth {background:url(../images/windpark-im-meer.jpg) 50% 0 no-repeat fixed; padding:80px 0 0; margin-top:110px}
	#fifth .outerContainer {height:1000px}
	#fifth .alternative .content {height:352px; background:rgba(255,255,255,0.8)}
	#fifth .alternative h2 {float:left}
	#fifth .alternative img {float:right; display:block; margin-left:40px}
	#fifth .alternative p {margin-bottom:2em; font-size:1.4em; line-height:160%; font-family:'robotolight'}
	#fifth .alternative .boxLeft {padding:40px 40px 0 40px; float:left; width:728px}
	#fifth .alternative .boxRight {padding:0; float:right; width:203px}
	
	#fifth .products {height:424px; overflow:hidden; margin-top:127px}
	#fifth .products .box1 {width:481px; background:rgba(255,255,255,0.8); margin-bottom:1px; height:191px; padding:40px 40px 0 40px}
	#fifth .products .box2 {width:481px; background:rgba(255,255,255,0.8); height:232px; padding:40px 40px 0 40px; position:relative}
	#fifth .products .box2 img {bottom:20px; position:absolute; right:27px}
	#fifth .products .box3 {width:449px; background:rgba(255,255,255,0.8); float:right; height:424px; padding:40px 40px 0 40px}
	#fifth .products .box3 img {margin-top:50px}
	
	#fifth .products p {margin-bottom:2em; font-size:1.4em; line-height:160%; font-family:'robotolight'}
	
	#fifth .products ul li {font-family:'robotolight'; font-size:1.6em; line-height:150%; padding:0 0 0 17px; list-style:none outside none; position:relative}
	#fifth .products ul li:before {content:"»"; left:0; position:absolute; top:-2px}
	

/* =======================================================================
	REFERENZEN
========================================================================== */	

#sectionReferenzen,
#sectionreferences {margin-top:80px}



.view {
   width:309px;
   height:274px;
   margin:1px 1px 0 0;
   float:left;
   overflow:hidden;
   position:relative;
   text-align:center;
   cursor:default}
.view.last {
   margin:1px 0 0 0}
.view .mask, .view .content {
   width:309px;
   height:274px;
   position:absolute;
   overflow:hidden;
   top:0;
   left:0}
.view img {
   display:block;
   position:relative}
.view h5 {
   text-transform:uppercase;
   color:#fff;
   text-align:center;
   position:relative;
   font-size:14px;
   padding:10px;
   background:rgba(0, 0, 0, 0.8);
   margin:20px 0 0 0;
   letter-spacing:0.1em}
.view p {
   font-size:1.3em; line-height:150%; font-family:'robotolight';
   position:relative;
   color:#fff;
   padding:10px 20px 20px;
   text-align:left}

.view-second img {
   transition:all 0.2s ease-in}
.view-second .mask {
   background-color:rgba(37,71,149, 0.9);
   width:473px;
   padding:60px;
   height:500px;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   -webkit-transform:translate(265px, 145px) rotate(45deg);
   -moz-transform:translate(265px, 145px) rotate(45deg);
   -o-transform:translate(265px, 145px) rotate(45deg);
   -ms-transform:translate(265px, 145px) rotate(45deg);
   transform:translate(265px, 145px) rotate(45deg);
   transition:all 0.2s ease-in-out}
.view-second h5  {
   border-bottom:1px solid rgba(255, 255, 255, 0.3);
   background:transparent;
   margin:20px 40px 0px 40px;
   -webkit-transform:translate(200px, -200px);
   -moz-transform:translate(200px, -200px);
   -o-transform:translate(200px, -200px);
   -ms-transform:translate(200px, -200px);
   transform:translate(200px, -200px);
   transition:all 0.2s ease-in-out}
.view-second p {
   -webkit-transform:translate(-200px, 200px);
   -moz-transform:translate(-200px, 200px);
   -o-transform:translate(-200px, 200px);
   -ms-transform:translate(-200px, 200px);
   transform:translate(-200px, 200px);
   transition:all 0.2s ease-in-out}
.view-second:hover .mask {
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter:alpha(opacity=100);
   opacity:1;
   -webkit-transform:translate(-80px, -125px) rotate(45deg);
   -moz-transform:translate(-80px, -125px) rotate(45deg);
   -o-transform:translate(-80px, -125px) rotate(45deg);
   -ms-transform:translate(-80px, -125px) rotate(45deg);
   transform:translate(-80px, -125px) rotate(45deg)}
.view-second:hover h5  {
   -webkit-transform:translate(0px,0px);
   -moz-transform:translate(0px,0px);
   -o-transform:translate(0px,0px);
   -ms-transform:translate(0px,0px);
   transform:translate(0px,0px);
   transition-delay:0.3s}
.view-second:hover p {
   -webkit-transform:translate(0px,0px);
   -moz-transform:translate(0px,0px);
   -o-transform:translate(0px,0px);
   -ms-transform:translate(0px,0px);
   transform:translate(0px,0px);
   transition-delay:0.4s}

/* =======================================================================
	colorBoxContainer
========================================================================== */

	.colorBoxContainer {width:800px; margin:30px auto}
	.colorBoxContainer p,
	.colorBoxContainer dl.floatList {margin-bottom:2em; font-size:1.4em; line-height:160%; font-family:'robotolight'}
	.colorBoxContainer h2 {font-size:2.2em}
	.colorBoxContainer h3 {font-size:2.2em}
	.colorBoxContainer .lowMargin {margin-bottom:0.5em}
	
/* =======================================================================
	NEWSLETTER KONTAKT 
========================================================================== */	
	
	.subpages {margin-top:80px}
	.subpages p,
	.subpages dl.floatList {margin-bottom:2em; font-size:1.4em; line-height:160%; font-family:'robotolight'}
	.subPage {background:white; padding:40px 40px 0 40px; width:700px; float:left}
	.infoBox {background:none repeat scroll 0 0 #254795;
    color:#FFFFFF; width:220px;
    font-family:'titilliumlight';
    line-height:150%;
    padding:31px 13px 0; float:right}
	.infoBox span.headline {
    border-bottom:1px solid #FFFFFF;
    display:block;
    font-family:'titilliumregular';
    font-size:1.35em;
    margin:0 0 -0.4em;
    padding:0 0 0.5em;
    text-align:center}
	.infoBox a {color:white; text-decoration: none;}
	.infoBox a:hover {text-decoration:underline;}
	.fb-icon:before {background: url("../images/fb-icon-white_29.png") no-repeat; height: 16px; width: 16px; background-size: 16px; position: absolute; top: 2.5px; left: -20px; content: "";}
	.fb-icon {position: relative; left: 20px;}
	.fb-icon.fb-anpassung {left: 25px;}

/* =======================================================================
	FOOTER
========================================================================== */

	footer {width:100%;margin:10em 0 0; background-color:#254795}
	footer .container {height:204px}
	footer nav {background-color:white; height:103px; width:100%; padding:4.2em 0 0}
	footer .conentBox {font-size:1.6em; font-family:'titilliumregular'; color:white; float:left; width:265px; margin:52px 45px 0 0}
	footer .conentBox img.logoSmall {display:block; margin:-13px 0 12px}
	footer .conentBox a {color:white; text-decoration:none}
	footer .conentBox a:hover {text-decoration:underline}
	footer .conentBox span.headline {font-size:1.313em; font-family:'robotoregular'; margin:0 0 0.9em; display:block}
	footer .conentBox p {line-height:143%}
	footer .conentBox .floatList > span {width:72%; display:inline-block; line-height:143%}
	footer .conentBox .floatList > span.first {width:28%}

	iframe#googleMapsFooter {width:100%; height:400px; border:none}

	#naviAdd {width:266px; margin:0 auto}
		#naviAdd > li {float:left}
			#naviAdd > li > span,
			#naviAdd > li > a {font-size:1.6em; font-family:'robotoregular'; color:#64676d; text-decoration:none}
			#naviAdd > li:hover > span,
			#naviAdd > li:hover > a,
			#naviAdd > li.active > span,
			#naviAdd > li.active > a {color:#254795}
			#naviAdd > li:hover > span:after,
			#naviAdd > li:hover > a:after {color:#64676d}
			#naviAdd > li a:after {content:'.'; padding:0 0.5em }
			#naviAdd > li:last-child a:after {content:''; padding:0 0 0 0.5em }

	#formNotice p {
		text-align: center;
		font-size: 1.9em;
	}
}