/*
Author: Oliver Stühn, IDEENpool GmbH
Author eMail: stuehn@ideenpool.de
*/


* {margin: 0; padding: 0;}


@font-face {
	font-family: 'SansumiDemiBoldRegular';
	src: url('../font/sansumi-demibold.eot');
	src: url('../font/sansumi-demibold.eot') format('embedded-opentype'),
	url('../font/sansumi-demibold.woff') format('woff'),
	url('../font/sansumi-demibold.ttf') format('truetype'),
	url('../font/sansumi-demibold.svg#SansumiDemiBoldRegular') format('svg');
}


body 					{font-family: "Roboto", Arial, sans-serif; font-size:95%; line-height: 140%; font-weight:400; }
h1 						{font-family: 'SansumiDemiBoldRegular'; font-size:480%; line-height: 120%; color: #157DC1}
h2 						{font-family: 'SansumiDemiBoldRegular'; font-size:280%;  line-height: 120%; color: #E3000B}
h3 						{font-size:110%; font-weight:400; line-height: 140%}
h4 						{font-size:110%; font-weight:500; color: black}
h5 						{font-size:140%; font-weight:300; color: #e2001a;}
h6 						{font-size:100%; font-weight:500; color: #E3000B}
p						{margin-bottom: 10px; }
h1, h2, h3, h4, h5, h6  {margin-bottom: 20px; margin-top: 20px;}

strong {font-weight:500}
h6 {margin-top: 0}
nav a 						{color: white; text-decoration: none; }
a 						{color: #E3000B; text-decoration: none; }
a:hover					{color: black; text-decoration: none; }


hr {display: block; height: 1px; border: 0; border-top: 4px solid black; margin: 30px 0; padding: 0;}






@viewport {width: 768px;  zoom: 1;}

#PAGE .WRAP{min-width: 748px; max-width: 1600px}
#PAGE .WRAP{background:#FFF;height:auto!important;margin:0 auto;min-height:100%;overflow:hidden;position:relative;text-align:left;}
#PAGE .WRAP	header{background-image:url(../images/header.neu-01.svg);background-position:center bottom;background-repeat:no-repeat;display:block;height:510px;/*overflow:hidden*/;position:relative;width:100%;z-index:9999;}
#PAGE .WRAP	nav{float:right;margin-top:25px;width:60%;z-index:999;}
#PAGE .WRAP	nav	ul li a{-moz-border-radius:5px;-webkit-border-radius:5px;background:#1169a3;border-radius:5px;color:#FFF;float:left;font-weight:500;margin-right:3%;padding:10px 20px;}
#PAGE .WRAP	nav	ul li a:hover,#PAGE .WRAP	nav	ul li a.current{background:#FFF;color:#157DC1;}
#PAGE .WRAP	nav .ham{cursor:pointer;display:none;}
#PAGE .WRAP	nav .ham.active{-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);}
#PAGE .WRAP div.logotype{float:left;min-width:420px;width:30%;}
#PAGE .WRAP div.logotype img{width:100%;}
#PAGE .WRAP header div.inner{padding:25px 25px 0 50px}
#PAGE .WRAP section{display:block;padding-top:0;position:relative;}
#PAGE .WRAP section div.inner{padding:50px;}
#PAGE .WRAP section:nth-child(2){padding-top:200px;}


body.sticky #PAGE .WRAP	nav{position:fixed;width:300px;z-index: 99999;/* width: 500px; height: 500px; */opacity: 1;}
body.sticky #PAGE .WRAP	nav .burger{-moz-border-radius:5px;-webkit-border-radius:5px;background:#157DC1;border-radius:5px;display:none;float:left;padding:25px;}
body.sticky #PAGE .WRAP	nav .burger a{clear:both!important;margin-bottom:20px!important;padding:7px 14px!important;}
body.sticky #PAGE .WRAP	nav .burger ul li:last-child a{margin-bottom:0!important;}
body.sticky #PAGE .WRAP	nav .ham{background:#157DC1;display:block;float:left;margin:0 25px 0 0;width:40px; height:40px;}
body.sticky #PAGE .WRAP	nav .ham > div{background:#FFF;clear:both;height:10%;line-height:0;margin:17% 15%;width:69%;}
body.sticky.IN #PAGE .WRAP	nav .burger{display:block;}

/*language*/
#PAGE .WRAP > header > div.language ul {float:right;}
#PAGE .WRAP > header > div.language ul li {float: left}
#PAGE .WRAP > header > div.language ul li a {-moz-border-radius:0;-webkit-border-radius:0;background:none; border-radius:0; color: white; float:left; font-weight:400; margin-right: 25px; padding:0; font-size: 80%; margin-top: -10px; margin-bottom: 10px}

/*language + flag*/
#PAGE .WRAP > header > div.language.flags {position: absolute !important; right: 0; top: 20px}
#PAGE .WRAP > header > div.language.flags ul li a {text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../images/Flag_of_Germany.svg.png) no-repeat; background-size: 100% 100%; width: 25px; height: 15px; margin-right: 15px;}
#PAGE .WRAP > header > div.language.flags ul li + li a {text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../images/Flag_of_the_United_Kingdom.svg.png) no-repeat; background-size: 100% 100%; width: 25px; height: 15px; margin-right: 15px;}


div.cols{clear:both;display:block;position:relative;width:100%;}
div.cols .two{display:block;float:left;margin-right:2.5%;position:relative;width:48.75%;}
div.cols .two + .two{margin-right:0;}
div.responsive{margin-left:-2.5%;overflow:hidden;width:105%;}
div.responsive .five{float:left;margin:2.5%;position:relative;width:15%;}
div.responsive .four{float:left;margin:2.5%;position:relative;width:20%;}
div.responsive .three{float:left;margin:2.5%;position:relative;width:28.333333333333%;}
div.responsive .two{float:left;margin:2.5%;position:relative;width:45%;}
footer{background-image:url(../images/footer.jpg);background-position:center bottom;background-repeat:no-repeat;height:670px;width:100%;}


#Downloads{background-color:#eaeaea;background-image:url(../images/erde.png);background-position:bottom right;background-repeat:no-repeat;background-size:contain;min-height:500px;}
#Downloads ul{list-style:disc;}
#Downloads ul li{margin-bottom:10px;margin-left:1.2em;}
#Downloads ul.two{display:block;float:left;margin-right:10%;position:relative;width:40%;}

#Veranstaltungen{background-color:rgba(0,141,229,0.3);}
#WeiteWirkt{background-image:url(../images/map.jpg);background-repeat:no-repeat;background-size:100%;margin-top:-410px;padding-top:20%;}
.footer-fix{padding-bottom:auto;position:relative;}


.portrait {width:140px; height:140px; background:gray; margin: 0 10px 10px 0}








/*GFX*/

a {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}

.animated{-moz-animation-duration:1s;-moz-animation-fill-mode:both;-o-animation-duration:1s;-o-animation-fill-mode:both;-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;animation-duration:1s;animation-fill-mode:both;}
.center{margin:0 auto;}
.pulse{-moz-animation-name:pulse;-o-animation-name:pulse;-webkit-animation-name:pulse;animation-name:pulse;}
.something-special{background:none;display:block;height:1px;line-height:0;position:relative;width:1px;}
.styled{-moz-border-radius:1px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.1);-ms-box-shadow:0 2px 4px rgba(0,0,0,0.1);-webkit-border-radius:1px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.1);border-radius:1px;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
button.pulse{-moz-transition:all .3s;-webkit-transition:all .3s;background:#157DC1;border:2px solid #157DC1;color:#FFF;cursor:pointer;display:inline-block;font-family:inherit;font-size:inherit;font-weight:700;letter-spacing:1px;margin:20px 40px;outline:none;padding:20px 40px;position:relative;text-transform:uppercase;transition:all .3s;}
button.pulse:hover{-moz-transition:all .3s;-webkit-transition:all .3s;background:none;color:#157DC1;transition:all .3s;}


/*
	Anpassungen für Kalender VDB
	Autor: Christoph Roth
*/
div.responsive .one {
	margin: 2.5%;
}

.responsive article.one ul li {
	margin: 0 0 1% 0;
}

#etOptions {
	margin: 0 0 1% 0;
}

.etPager {
	margin-left: 1em;
}

.etButton {
    background: #157dc1 none repeat scroll 0 0;
    color: #fff !important;
    letter-spacing: 1px;
    margin-left: 10px;
    padding: 0.2em 0.6em;
    transition: initial;
}


div.responsive .one {width: 75%;}

/*RESPONSIVE*/

@media only screen and (max-width: 1100px) {
	/*nav*/	
	#PAGE .WRAP div.logotype 	{width: 30%; float: left; min-width: 455px;}
	#PAGE .WRAP	header 			{height: 690px;}

	#PAGE .WRAP	nav 			{width: 250px; float: left; margin-top: 32px; margin-left: 25px}
	#PAGE .WRAP	nav ul li a 	{clear: both; margin-bottom: 20px; padding: 7px 14px}
        
}



@media only screen and (max-width: 960px) {
	/*container*/	
	#Veranstaltungen div.responsive .four			{width:28.33333333333333%; float: left; position: relative; margin: 2.5%;}
	#Veranstaltungen div.responsive .four + .four + .four + .four			{display: none}
	div.responsive 	.four			{width:45%; float: left; position: relative; margin: 2.5%;}
	div.responsive 	.two			{width:95%; float: left; position: relative; margin: 2.5%;}
	#Downloads {background-size: 55% !important}

	body.sticky #PAGE .WRAP	nav .ham{background:#157DC1;display:block;float:left;margin:0 25px 0 0;width:50px; height:50px; margin-left: -25px}
}



@media only screen and (max-width: 768px) {
	/*container*/
	#Veranstaltungen div.responsive .four			{width:45%; float: left; position: relative; margin: 2.5%;}
	#Veranstaltungen div.responsive .four + .four + .four + .four			{display: block}
	div.responsive 	.four			{width:45%; float: left; position: relative; margin: 2.5%;}

	footer div.responsive 	.two			{width:95%; float: left; position: relative; margin: 2.5%;}
	div.responsive 	.two			{width:45%; float: left; position: relative; margin: 2.5%;}

	#Downloads > div > div.cols > article > div > ul.two {width: 90%}

}

/* Hacks (cr) */
#Downloads ul{display:block;float:left;margin-right:10%;position:relative;width:40%;}
#Veranstaltungen a 						{color: black; text-decoration: none; }
#Veranstaltungen a:hover					{color: black; text-decoration: none; }
#etDisplay ul li a, #etDisplay a {color: #E3000B;}