/* ---------- FONTS ---------- */

@font-face {
	font-family: 'MyriadWebPro';
		src: url('../fonts/myriadwebpro.eot');
		src: url('../fonts/myriadwebpro.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/myriadwebpro.woff') format('woff'),
			 url('../fonts/myriadwebpro.ttf') format('truetype'),
			 url('../fonts/myriadwebpro.svg#myriadwebpro') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'Aller-Bold';
    src: url('../fonts/aller_bd-webfont.eot');
    src: url('../fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aller_bd-webfont.woff') format('woff'),
         url('../fonts/aller_bd-webfont.ttf') format('truetype'),
         url('../fonts/aller_bd-webfont.svg#allerbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/latolightitalic.eot');
    src: url('../fonts/latolightitalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/latolightitalic.woff') format('woff'),
         url('../fonts/latolightitalic.ttf') format('truetype'),
         url('../fonts/latolightitalic.svg#allerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: "iconvault";
		src: url("../fonts/iconvault_cd95eed3ede593ae54227da72f2ee7ec.eot");
		src: url("../fonts/iconvault_cd95eed3ede593ae54227da72f2ee7ec.eot?#iefix") format("embedded-opentype"),
			 url("../fonts/iconvault_cd95eed3ede593ae54227da72f2ee7ec.woff") format("woff"),
			 url("../fonts/iconvault_cd95eed3ede593ae54227da72f2ee7ec.ttf") format("truetype"),
			 url("../fonts/iconvault_cd95eed3ede593ae54227da72f2ee7ec.svg#iconvault") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadWebPro';
		src: url('../fonts/myriadwebpro.eot');
		src: url('../fonts/myriadwebpro.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/myriadwebpro.woff') format('woff'),
			 url('../fonts/myriadwebpro.ttf') format('truetype'),
			 url('../fonts/myriadwebpro.svg#myriadwebpro') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-home:before,
.icon-totop:before,
.icon-tobottom:before,
.icon-legal:before,
.icon-datenschutz:before,
.icon-contact:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.icon-home:before { content: "\f100"; }
.icon-totop:before { content: "\f101"; }
.icon-tobottom:before { content: "\f102"; }
.icon-legal:before { content: "\f103"; }
.icon-datenschutz:before { }

#facebook_li { height:39px;}
#facebook_li a { 
	background: url(../images/layout/facebook-icon.png);
	background-position:top center;
	height:30px;
	width:14px;
	margin:5px auto;
}
#facebook_li a:hover { 
	background-position:bottom center;
}

#datenschutz_li { height:39px;}
#datenschutz_li a { 
	background: url(../images/layout/datenschutz-icon.png);
	background-position:top center;
	height:35px;
	width:35px;
	margin:0 0 0 10px;
}
#datenschutz_li a:hover { 
	background: url(../images/layout/datenschutz-icon_hover.png);}
	height:35px;
	width:35px;
}


#kontakt_li{
	height: 30px;
	margin-right: -6px;
}
#kontakt_li a { 
	background: url(../images/layout/kontakt-icon.png);
	background-position:top center;
	height:21px;
	width:30px;
	margin:0 auto;
}
#kontakt_li a:hover { 
	background-position:bottom center;
}

/* ---------- ALLGEMEIN ---------- */

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

.clearfix:after {	content: '';	display: table;	clear: both;}

p {	margin: 0 auto 15px;}
a {	color: #dc0d15;	text-decoration: none;}
a:focus,a:hover {	outline: 0;	text-decoration: none;	color:#77b3d4;}

img {	max-width: 100%;	height: auto;}

h1, h2, h4, h5, h6 {
	font-family: Aller-Bold, 'Lucida Sans', 'Lucida Sans Unicode', Arial, sans-serif;
	font-weight: normal;
	color:#dc0d15;
	text-align:center;
	text-transform:uppercase;
	position:relative;
	z-index:10;
	-webkit-text-stroke: 3px #fff;
	 -webkit-text-fill-color: #dc0d15;
	text-indent:-9999999px;
	margin:0px;
	padding:0px;
	font-size:14px;
	line-height:1px;
}
h3 {	font-family: 'MyriadWebPro', Arial, sans-serif;	font-weight: normal;	color:#dc0d15;	position:relative;	z-index:10;	margin:0px 0 15px;	padding:0px;	font-size:20px;	line-height:26px;}


/* ---------- LAYOUT ---------- */

body {
	margin: 0;
	color: #333333;
	font-family: 'MyriadWebPro', Arial, sans-serif;
	font-size: 14px;
	line-height: 18px;
	background: url(../images/layout/skyline.png) center bottom repeat-x, url(../images/layout/bg.jpg);
	word-wrap: break-word;
	position:relative;
}

body>.container {
	position: relative;
	padding: 0 0 60px 0;
	margin: 0 auto;
	min-height: 100%;
	max-width: 1240px;
	background: #fff;
	-moz-box-shadow: 0 0 35px rgba(0,0,0,0.08);
	-webkit-box-shadow: 0 0 35px rgba(0,0,0,0.08);
	box-shadow: 0 0 35px rgba(0,0,0,0.08);
	overflow-x: hidden;
}

#header {background: #fff;padding: 15px 5%;}

#logo {	display: block;	max-width: 542px;	width: 100%;	margin: 0 auto;}

#logo img {	display: block;	width: 100%;	max-width: 340px;	height: auto;	margin:0 auto;}

#logo span { display: none; }


/* ---------- NAVIGATION ---------- */

#main_navi {	padding: 0;	margin: 15px 0 0;	list-style: none;	text-align: center;}

#main_navi li {	display: inline-block;	overflow: hidden;	margin: 0 5px;}

a#totop,
#main_navi li a {	color: #132c34;	font-size: 40px;	line-height: 40px;	text-decoration: none;	display: block;}

a#totop { color:#fff; width: 30px;float: right; margin-top: -3px; font-size:40px!important; line-height:10px;}

a#totop:focus,a#totop:hover,#main_navi li a:focus,#main_navi li a:hover,#main_navi li.active a {color: #77b3d4;}

.absolute-block{display:none;}

a#totop span,
#main_navi li a span {
	display: none;
}

.overlay {	background: rgba(0,0,0,0.8);	position: fixed;	top: 0;	bottom: 0;	left: 0;	right: 0;	z-index: 1000;	overflow: auto;	color: #454545;	text-align: left;	display: none; z-index:100;}
.overlay-open .overlay {	display: block;}
.overlay-table {	display: table;	height: 100%;	width: 1000px;	max-width: 100%;	margin: 0 auto;	padding: 15px;}
.overlay-row {	display: table-cell;	width: 100%;vertical-align: middle;}
.overlay-content {	background: #fff;	position: relative;	padding: 50px; font-size: 15px; line-height: 22px;}

.btn-close {	text-indent: -999em;	display: block;	height: 30px;	width: 30px;	-moz-border-radius: 999em;	-webkit-border-radius: 999em;	border-radius: 999em;	background: #dc0d14;	color: #fff;	cursor: pointer;	position: absolute;	top: 20px;	right: 20px; transition:0.3s}
.btn-close:after {	content:"";    left: 6px;    position: absolute;    top: 6px;  background:url(../images/layout/close.png) top center no-repeat; width:18px; height:18px; background-size:contain; transition:0.3s}
.btn-close:hover,.btn-close:focus {	background: #77b3d4;	color: #fff;}
.btn-close:hover:after,.btn-close:focus:after {	-moz-transform: rotate(90deg);	-webkit-transform: rotate(90deg);	transform: rotate(90deg);}

/* ---------- CONTENT ---------- */

section {	text-align: center;	padding-left:15px;	padding-right:15px;	position:relative;}
#section-1{	border-bottom:6px solid #5b8ca8;	background: url(../images/layout/bg-header.jpg) top center no-repeat;	height: 400px;	background-size: cover; padding-left:15px;	padding-right:15px;}

	.flexslider{	margin:0px auto;border:0px;	background:transparent;	padding-top:128px;	max-width:550px;}
	.flex-control-paging li{	margin:0 9px;}
	.flexslider .flex-direction-nav a {display: none;	opacity:0;	}
		.flexslider:hover .flex-direction-nav .flex-next, .flex-direction-nav .flex-next{	right:-80px;	}
		.flexslider:hover .flex-direction-nav .flex-prev, .flex-direction-nav .flex-prev {left: -80px;}
	.flex-control-paging li a {width: 12px;height: 12px;background: #333;
		-webkit-box-shadow: 0px 0px 0px 5px rgba(255,255,255,1);
		-moz-box-shadow: 0px 0px 0px 5px rgba(255,255,255,1);
		box-shadow: 0px 0px 0px 5px rgba(255,255,255,1);
	}
	.flex-control-paging li a.flex-active {	background: #dc0d15;	cursor: default;}
		.flexslider .slides img{		width:auto;			margin:0 auto;		}
		.flex-direction-nav a,.flex-direction-nav a::before{			width: 54px;			height: 71px;		}
		.flex-direction-nav a.flex-next::before {	content: "";	background: url(../images/layout/flex-arrow-right.png) top center no-repeat;	}
		.flex-direction-nav a.flex-prev::before {	content: "";	background: url(../images/layout/flex-arrow-left.png) top center no-repeat;		}
		
	#section-2{	margin-top:-109px;	padding:109px 5px 0px;	background: url(../images/layout/bg-section2.png) top center no-repeat;	height: 790px;	background-size: cover;}
		#section-2::after{	content:""; background: url(../images/layout/arrow-red-down.png); position: absolute; width:66px; height: 78px; margin-left: -33px; left:50%; top:30px;}
		#section-2 #info-icon{	background: url(../images/layout/info-thumb.png) no-repeat ; position: absolute; width:76px; height: 31px; margin-left: -38px; left:50%; top: 354px; background-size: contain;}
	#section-2-head1{	max-width: 320px;	width:100%;}
	#section-2-head2{	max-width: 335px;	width:100%;}
	#section-2 .sub-headline{	font-size:20px;		font-family: 'Lato', sans-serif;	margin-bottom:13px;	}
	#section-2 .sub-info{	max-width:240px;	}
	.section-2-fragen{ padding: 125px 0 15px;}
	
	#fragen{ max-width:335px; margin:0 auto; position:relative; z-index:10;}
	#fragen p{margin-bottom:15px;}
	.frage > a {color:#333333; position:relative;}
	.frage > a:hover, #fragen a:focus{color:#dc0d14}
	.frage {margin-bottom:20px;position:relative;}
	
	#section-3 { 	background:#f8dfe0;	margin-top:20px; padding-top:15px; padding-bottom:35px;}
	#city-row{ background:#fff; padding:20px 7px 10px; margin-bottom:20px;font-size: 14px;}
		#city-row .col-xs-6{padding:0 7px 0px;}
	.city-click-wrapper{background: #fff;padding: 5px;display: inline-block;border-radius: 10px; margin-bottom:8px; transition:0.3s;
		-webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.08);
		-moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.08);
		box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.08);}
	.city-click {	width:93px; height:85px;position:relative;display:block;margin:0px auto 8px;	}
	#city-luebeck>div{ background: url(../images/layout/luebeck-cam.png) top center no-repeat}
	#city-berlin>div{ background: url(../images/layout/berlin-cam.png) top center no-repeat}
		#city-luebeck:hover>div{ background: url(../images/layout/luebeck-cam.png) bottom center no-repeat;}
		#city-berlin:hover>div{ background: url(../images/layout/berlin-cam.png) bottom center no-repeat;}
		.city-click-wrapper:hover{
			-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.18);
			-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.18);
			box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.18);}
	
	.important-too{		background: #333;	position:relative;	margin:0 auto;	color:#fff;	padding: 15px;	text-align:center;	font-family: 'Lato', sans-serif; font-size:16px;	}
		.important-too a{ color:#77b3d4; transition: 0.3s;}
			.important-too a:hover, .important-too a:focus{ color:#dc0d15}
	#section-3-head-small{	max-width: 285px;	width:100%; margin: 0 auto 15px; text-align:center;}
	.important-too h3{	display:block; font-family: 'Lato', sans-serif; font-size:20px;	line-height: 22px; border-bottom: 1px solid #fff; text-indent:0px; padding: 0 0 7px; margin:0px 0px 10px;z-index: 0; color:#fff;}
	
	#section-4{padding:0px}
	#section-4-text{	background: url(../images/layout/bg.jpg);	padding:20px 15px 15px;}
	#section-4-head{	max-width: 240px;	width:100%; margin: 0 auto;}
	#section-4-video video {		width: 100%;		height: auto;	}
	
	#section-5-head{ max-width: 310px;	width:100%; margin: 0 auto 30px; text-align:center;}
	#section-5{ padding: 20px 0px;background: url(../images/layout/bg-section5-2.png) center 81px no-repeat;height: 290px;background-size: cover;}
	
	
	#section-6 {	background: url(../images/layout/bg-section6.png) center center no-repeat, #fff; height:100px; background-size: contain; max-width: 320px; margin:0 auto 40px}
	
	#footer {	background: url(../images/layout/footer.png);	width: 100%;	height: 135px;	padding-top: 95px;	margin-top: -95px;	position: relative;	color:#fff;	z-index:11;}
		.overlay-opened #footer {	z-index:8;}
	#footer-innen a{	font-family: "Aller-Bold",Impact,Charcoal,sans-serif;	font-size: 20px;	}
	#footer-innen span.visible-xs{	display: inline-block !important;}
	#footer-innen a.kununu {		background: url(../images/layout/kununu.png) left top no-repeat;	height: 25px;	width: 108px;	text-indent: -999em;	display: inline-block;		margin: 0 5px;	}
	#footer-innen a.kununu:hover {	background-position: left bottom;	}