@font-face { 
	font-family: "litera-regular";
    src: url("../fonts/literan.eot?#iefix") format("embedded-opentype"), url("../fonts/literan.ttf") format("truetype"); 
}
@font-face { 
	font-family: "litera-light";
    src: url("../fonts/literali.ttf") format("truetype"); 
}
@font-face { 
	font-family: "CenturyGothic";
    src: url("../fonts/gothic.ttf") format("truetype"); 
}
@font-face { 
	font-family: "menuFont";
    src: url("../fonts/tt0855m_.ttf") format("truetype"); 
}
@font-face { 
	font-family: "menuFontBold";
    src: url("../fonts/tt0857m_.ttf") format("truetype"); 
}
@font-face { 
	font-family: "swissLT";
    src: url("../fonts/tt0001m_.ttf") format("truetype"); 
}


html, body {	
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	background-image: url(../images/bglogo.png);
	background-size: 256px auto;
	background-attachment: fixed;
	background-color: #e7e7e7;
	font-family : CenturyGothic, arial;
	font-size: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}


a {	font-family: Helvetica; 
	text-decoration: none; 
	color: #4F5FCF; 
}
a:hover { color: #E78002; }



.hyphenate {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	
	hyphenate-limit-chars: auto;
	-webkit-hyphenate-limit-chars: auto;
	-ms-hyphenate-limit-chars: auto;
	-moz-hyphenate-limit-chars: auto;
}
 

sup {
	font-family: arial;
	font-size: 70%;
	line-height: 1em;
	position: relative;
	left: 1px;
	top: -1px;
}

#topBalken {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 88px;
	background: #0C75A5;
	z-index: 9999;	
}
#topBalken span.logo {
	position: absolute;
	left: 10px;
	bottom: 8px;
	/*
	font-family: litera-light, arial;
	font-size: 30px;
	line-height: 36px;
	color: #D0D7DF;
	word-spacing: -3px;
	*/
}

#topBalken span.logo a {
	font-family: litera-light, arial;
	font-size: 30px;
	line-height: 36px;
	color: #DEFAFE;
	word-spacing: -3px;
}
#topBalken span.logo a FONT {
	font-family: litera-regular, arial;
	font-size: 1.35em;
	word-spacing: 0px;
}
#topBalken span.logo a:hover{
	color: #FFFFFF;
}

#menuIcon{
	display: none;
	position: absolute;
	bottom: -8px;
	right: 6px;
	width: 50px;
	height: 48px;	
	background: url(../images/symbols/menu_symbol.png) no-repeat right top;
	cursor: pointer;
}
	
#menuH {
	display: block;
	position: absolute;
	bottom: 10px;
	right: 50px;
	cursor: default;
}
#menuH span.menuitem {
	display: inline-block;
	font-family: menuFont, arial; 
	font-size: 21px;
	text-align: center;
	vertical-align: middle;
	color: #D0D7DF;
	margin: 0px 15px;
}
#menuH span.menuitem:hover {
	color: #FFD;
	cursor: pointer;
}
#menuH span.menuitem.selected {
	color: #BDE9FF;
	cursor: default;
	font-family: menuFontBold, arial; 
	text-shadow: 2px 2px 3px rgba(50,50,50, 0.7);
}

#menuH span.trenner {
	vertical-align: middle;
	display: inline-block;
	width: 1px;
	height: 18px;
	border-right: 1px solid #D0D7DF;
}

#menuV {
	display: none;
	position: absolute;
	cursor: default;
	padding: 2px 12px 2px 12px;	
	width: 255px;
	top: 87px;
	right: -283px;
	background: rgba(240, 240, 200, 0.95);
	border-left: 1px solid #DADAD7;
	border-bottom: 1px solid #DADAD7;
	border-top: 1px solid #CBAB4B;
	-moz-box-shadow: 0px 1px 2px #6f6f6f; /* Firefox */
	-webkit-box-shadow: 0px 1px 2px #6f6f6f; /* Chrome, Safari */
	-khtml-box-shadow: 0px 1px 2px #6f6f6f; /* Konqueror */
	box-shadow: 0px 1px 2px #6f6f6f;/* CSS3 */	
	/*max-height: 220px;*/
	/*overflow-y: scroll;*/
}
#menuV span.menuitem {
	display: block;
	text-align: left;
	font-size: 20px;
	max-width: 100%;
	margin: 6px 0px;
	padding: 5px;
	color: #888;
}
#menuV span.menuitem:hover {
	color: #1392DB;
	cursor: pointer;
}
#menuV span.menuitem.selected {
	color: #0D79AB;
	cursor: default;
	font-family: menuFontBold, arial;
	font-size: 22px;
}

#pageImageBG {
	min-height: 155px;
	width: 100%;
	vertical-align: middle;
	text-align: center;
	border: 0;
}

#pageImageDiv {
	position: relative;
	width: 100%;
	top: 88px;
	min-height: 5px;
}
#pageImageDiv>div {
	position: absolute;
	top: 0px;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 90;
	background: no-repeat top right; 
	background-size: 65% auto;
	border-style: solid;
	border-width: 3px 0px 2px 0px;	
}
#pageImageDiv>div>div{
	position: absolute;
	top: 0px;
	width: 35%;
	height: 100%;
	min-width: 249px;
	text-align: center;
}
#pageImageDiv>div>div span{
	display: inline-block;
	padding-top: 1.5vh;
	color: #f0f0f0;
}
#pageImageDiv>div>div span h1, h3 { display:none; }
#pageImageDiv>div>div span h1{
	font-size: 3vw;
	text-shadow: 3px 3px 3px #303030; 
	
}

#pageImageDiv>div>div span h3{ 
	font-size: 1.2vw; 
	font-family: CenturyGothic, Helvetica;
	line-height: 1.4em;
}


#pageContent { 
	position:relative;
	width: 100%;
	min-height: 100px;
	color: #666;
	padding-top: 120px;
}

#pageContent>div.content {
	width: 70%;
	margin: 0 auto;
	line-height: 150%;
	word-spacing: 1px;	
}

#pageFooter {
	position: relative;
	width: 100%-10px;
	font-family: Helvetica;
	background: #777777;
	color: #F7F7F7;
	border-top: 1px solid #c0c0c0;
	margin-top: 100px;
	padding-left: 15px;
	padding-top: 5px;
	min-height: 140px;
	font-size: 15px;
}

#pageFooter span {
	display: inline-block;
	margin-right: 6px;
	margin-top: 30px;
}
#pageFooter a { color: #FFFFFF; }
#pageFooter a:hover{ color:#303030; cursor:pointer;}

#pageFooter .socmed {	
	display: inline-block;
	position: absolute;
	right: 3vw;
	top: -20px;
	font-size: 12px;
}

#pageFooter .socmed span{ display:block; padding:0px 0px 5px 2px; color:#C9C9C9;}
#pageFooter .socmed a { display:inline-block; width:32px; height:32px;  margin-right:12px; background-size:auto;}
#pageFooter .socmed a:first-of-type { background: url(../images/symbols/facebook_logo2.png) no-repeat left bottom; }
#pageFooter .socmed a:nth-of-type(2) { background: url(../images/symbols/linkedin_logo2.png) no-repeat right bottom; }

#pageFooter .socmed a:first-of-type:hover{  background-image: url(../images/symbols/facebook_logo2_hvr.png); }
#pageFooter .socmed a:nth-of-type(2):hover{  background-image: url(../images/symbols/linkedin_logo2_hvr.png); }


#pageFooter .copyright { 
	display: inline-block;
	position: absolute;
	width: 440px;
	padding: 0px;
	text-align: center;
	margin: 0px 0px 0px -220px;
	left: 50%;
	bottom: 10px;
	color: #373737;
	font-size: 12px;
}


#cookieMsg {
	display: none;
	position: fixed;
	z-index: 99999;
	background: #ECF5F7;
	color: #777;
	border-top: 1px solid #ccc;
	padding: 20px 40px 20px 10px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	box-shadow: 0 -5px 15px -7px rgba(50,50,50,0.5);
	text-align: center;
	font-size: 15px;
	
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	
	hyphenate-limit-chars: auto;
	-webkit-hyphenate-limit-chars: auto;
	-ms-hyphenate-limit-chars: auto;
	-moz-hyphenate-limit-chars: auto;
}

#cookieMsg .closeX {
	position: absolute;
	width: 30px;	
	height: 30px;
	right: 5px;
	top: 5px;
	cursor: pointer;
	background: url(../images/symbols/close_x.png) no-repeat top right;
	background-size: 28px;
}
#cookieMsg .closeX:hover {
	background-image: url(../images/symbols/close_x_hvr.png);
	background-size: 30px;
}

#overlay {
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: url(../images/loadcircle.gif) no-repeat center center;
	background-color: rgba(50, 50, 50, 0.6);
	z-index: 99999;	
}


/************************************************************************************************************************/
/***********  Mobile-Devices CSS  ***************************************************************************************/

@media screen and (max-width: 1680px) {	
	#pageContent>div.content{ width:75%; }
}


@media screen and (max-width: 1540px) {	
  #pageContent>div.content{ width:80% }
}


/*** start of large tablet styles */
@media screen and (max-width: 1400px) {
	#menuH span.menuitem { 
		max-width: 135px;
		font-size: 20px;
		margin: 0px 10px;
	}
	#menuH span.trenner {
		height: 40px;
	}
	#pageFooter .copyright { 
		width: 400px; 
		margin-left: -200px; 
		font-size: 11px; 
	}
	#pageContent>div.content{ width:85%; font-size:14px;}
}

@media screen and (max-width: 1280px) {
	#pageContent>div.content{ width:90% }
	#cookieMsg { font-size: 14px; }
}

@media screen and (max-width: 1166px) {
	#menuH{ display: none; }
	#menuV { display: block; }
	#menuIcon{ display: block; }
}

/*** start of medium tablet styles */
@media screen and (max-width: 768px) {
	#menuV span.menuitem { font-size: 18px; }
	#pageImageDiv>div{ background-size: auto 100%;}
	#pageImageDiv>div>div span h1{ font-size: 26px; }
	#pageImageDiv>div>div span h3{ font-size: 9px; }
	#pageContent>div.content{ width:93%; font-size:13px; }
	#cookieMsg { font-size: 13px; }
	#cookieMsg a { font-size: 11px; }
	#cookieMsg .closeX { background-size: 24px;}
	#cookieMsg .closeX:hover { background-size: 26px;}
}

@media screen and (max-width: 640px) {
	#topBalken span.logo {
		font-size: 24px;
		line-height: 30px;
	}
	#topBalken span.logo FONT {
		display: block;
		font-size: 140%;
	}
	#pageFooter .copyright { width:360px; margin-left:-180px; font-size:10px; }
	#cookieMsg { font-size: 12px; }
}


/*** start of phone styles */
@media screen and (max-width: 480px) {
	#pageFooter .copyright { width:320px; margin-left:-160px; font-size:9px; }
}