/* Fonts: Fließtext */
@font-face {
    font-family: 'Exo';
    src: url('/webfonts/exo/Exo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Exo';
    src: url('/webfonts/exo/Exo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}

/**********/
/* Common */
/**********/

html {
    width:100%;
}

body {
    width:100%;
    font-family: Exo;
	font-weight: 400;
	color: #000000;
	background-color:#fff;
    background-image:url('../images/bg.jpg');
    background-repeat:repeat-y;
    background-size:100%;
    -webkit-font-smoothing: antialiased;
}

h1, h2 {
    margin:0 0 20px 0;
    font-size:1.5em;
    color:rgb(57, 108, 178)
}

h2 {
	padding-top:50px
}

p {
    font-size:1em;
    /*text-align:justify;*/
    line-height: 1.75;
}

a:link, a:visited, p a:link, p a:visited, a:hover, p a:hover {
	text-decoration: none;
}

a:link, a:visited {
    color:#808080;
}

p a:link, p a:visited, footer a:link {
    color:rgb(57, 108, 178)
}

a:hover, p a:hover, footer a:hover {
    color:#000;
}

strong {
    font-weight: 700;
}

img {
	max-width: 100%;
    border:0;
}

.nowrap {
    white-space:nowrap;
}

.mouseprint {
    font-size:8px;
}

header #submenu-bg, header #wave1, header #wave2, #icons, #contentshadow, header nav#mobilemenu #submenutrigger {
    background-repeat:no-repeat;
}

header #submenu-bg, header #wave2, #contentshadow, header nav#mobilemenu #submenutrigger {
    background-size: 100% 100%;
}

#contentshadow {
    width:100%;
    height:40px;
}

/**********/
/* Header */
/**********/

header #menu-wrapper, header #submenu-bg, header nav#submenu {
    position:absolute;
    width:100%;
}

header #menu-wrapper {
    height:auto;
    z-index:5
}

header #submenu-bg, header nav#submenu {
    height:515px;
    top:-515px;
    opacity:0;
}

header #submenu-bg {
    z-index:-15; 
    background-image:url('../images/wave03.png');
}

header nav#submenu {
    z-index:15;  
}

header #wave1, header #wave2 {
    position:absolute; 
    width:100%; 
    height:auto;
}

header #wave1 {
    z-index:-10;
    height:150px;
    background-image:url('../images/wave01.png');
    background-size:74% 100%  
}

header #wave2 {
    z-index:-20;
    height:231px;
    background-image:url('../images/wave02.png');
}

header #logo img {
    width:170px
}

header .eyecatcher img {
    width:150px; 
    margin-right:10px
}

header .eyecatcher.first {
    padding-top:45px;
}

header #slider .eyecatcher {
    position:absolute; 
    right:35px;
    bottom:8%; 
    z-index:5; 
}

#icons, #reference {
    width:100%;
}

header #slider {
    /*height:900px; Height muß inline definiert sein, da sonst nicht responsiv */
    /*width:100%; Width muß inline definiert sein, da sonst nicht responsiv */
    padding-top:80px; 
    z-index:-5;
}

#icons {
    position:absolute;
    bottom:0;
    z-index:5;
    height:150px;
    background-image:url('../images/icons00.png');
    background-size:contain;
    background-position:bottom center;
}

#references {
	display:none;/*Wir blenden die Leiste per JS ein - Workaround für kaputte Darstellung in Safari*/
    padding:20px 0;
    background-color:#fff;
    height:95px;
}

#references img {
    height:55px;
}

header #contentshadow {
    background-image:url('../images/bg_shadow02.png');
}

/*******/
/* Nav */
/*******/

header nav#fullmenu {
    padding-top:10px;
}

header nav#mobilemenu {
    display:none;
}

header nav#submenu #mobilesubmenu {
    display:none;
}

header nav#mobilemenu #submenutrigger {
    position:absolute;
    z-index:15;
    height:26px;
    width:26px;
    top:62px;
    left:15px; /* 30px ist bündig mit dem Menütext */
    background-image:url('../images/menue1.png');
}

header nav ul {
    position:relative;
    padding-top:30px;
    list-style:none;
    display:block;
    padding-left:0px !important; /* Wir überschreiben hier einen Wert aus normalize.css */    
}

header nav ul li {
    width:220px;
    float:left;
    display:list-item;
    list-style:none; 
}
 
header nav ul li a {
    display:block;
    padding:0 10px 0 0;  
    font-weight:700;
    color:#808080;
    font-size:16px;
}

header nav#submenu #fullsubmenu ul li a {
    padding-top:150px; /* Ein netter Trick, mit dem wir die Hauptnavigation überlappen und somit für den Benutzer einen durchgängigen Block erzeugen. Siehe auch showMenu() */
}
 
header nav .current, header nav .myhover {
    color:#000
}

header nav#submenu ul li a {
    font-weight:400;
}

header nav#submenu #mobilesubmenu ul {
    padding-top:150px;
}

header nav#submenu #mobilesubmenu ul li {
    width:100%;
    padding-top:10px;
}
 
header nav#submenu #mobilesubmenu ul li a {
    font-weight:700;
    font-size:16px;
}

/********/
/* #main */
/********/

#main {
	background-color:transparent;
}

#main .sidebar {
    font-size: 1em /*0.8em*/;
    border-left: 5px solid #CECECE;
}

.prefooter {
    position:absolute;
    right:0;
    top:10px;
    z-index:10;
}

.prefooter img {
    width:240px;
    margin-right:10px
}

/**********/
/* Footer */
/**********/

footer {
    position:relative;
    padding-top:60px;
    text-align:center;
}

footer #contentshadow {
    background-image:url('../images/bg_shadow03.png');
}

footer .contact {    
    padding:10px 0 35px 0;
    width:100%;
    background-color:#fff;
}