/* ===================================
1. General
==================================== */
@import url('font.css');
@import url('font-awesome.css');
@import url('jquery.fancybox.css');

body {
	font-family:"EnBWDINWebPro", "Arial", sans-serif; 
	font-size:16px;
	font-weight:normal;
	color:#333;
	background:#fff;
	line-height:24px;
}

a, a:focus, a:hover {
	outline:0;
	text-decoration:none;
	color: #000099;
}

a:hover{
	color: #0278d4;
}

b, strong{
	font-family:'EnBWDINWebPro-Bold';
}

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

.row{
	margin:0;
}

.content{
	max-width:1024px;
	margin:0 auto;
}

p{
	margin: 0;
}

p + p {
	margin-top: 20px;
}

p + ul,  ul + p{
	margin-top: 20px;
}

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6, ul + h2, ul + h3 {
	margin-top: 10px;
}

.h2, h2{
	font-size: 24px; margin-bottom: 20px;
}

.marginBottom50{margin-bottom: 50px;}

video{width: 100% !important; height: auto !important;}

#wrapper{max-width:100%; margin:0 auto;}

header{margin:0 auto; padding: 15px 20px 0; position: relative;}
header .left_header{text-align: left; padding: 15px 25px;}
header .right_header{text-align: right; padding: 15px 25px;}
header .left_header img{max-height: 70px;}
header .right_header img{max-height: 60px;}
header ul{margin: 25px 0 0; padding: 0; list-style: none;}
header ul li{display: inline-block; margin: 0 5% 0 0;}
header ul li a{padding:3px 5px 3px 25px; background: url(../images/bg_menu_02.png) no-repeat 0 4px; color: #000099; font-size: 18px; text-transform: uppercase; display: inline-block;}
header ul li a:hover{background: url(../images/bg_menu_active.png) no-repeat 0 4px; color: #0278d4;}
header .logo_fixed{display: none;}
header .btn_impressum{position: absolute; right: 50px; bottom: 5px; font-size: 15px; text-transform: uppercase;  color: #333;}

header.bg-fixed .logo_fixed{display: block; position: absolute; top: 10px; left: 10px;}
header.bg-fixed .logo_fixed img{max-height: 45px;}
header.bg-fixed .main_logos{display: none;}
header.bg-fixed{width: 100%; position: fixed; top: 0; left: 0; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); z-index: 1; padding-bottom: 15px; text-align: center;}
header.bg-fixed ul{margin: 10px 0 0;}
header.bg-fixed ul li a{font-size: 16px; padding:0 5px 0 15px; background: url(../images/bg_menu_2.png) no-repeat 0 3px;}
header.bg-fixed ul li a:hover{background: url(../images/bg_menu_active_2.png) no-repeat 0 3px; color: #0278d4;}
header.bg-fixed .btn_impressum{font-size: 14px; top: 25px; right: 10px;}


#tabmenu{position: fixed; top: 40px; left: 10px; z-index: 2; cursor: pointer; display: none;}
.btn-menu {display: flex; align-items: center; width: 40px; height: 40px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%);}
.bars,
.bars:before, 
.bars:after {position: relative; width: 30px; height: 3px; margin: 0 auto; background: #283583; border-radius: 2px; transition: top .2s .2s, transform .2s,}
.bars:before,
.bars:after {content: ""; display: block; position: absolute;}
.bars:before {top: -10px;}
.bars:after {top: 10px;}
.active .bars:before,
.active .bars:after {transition: top .2s, transform .2s .2s; top: 0;}
.active .bars {background: transparent;}
.active .bars:before {transform: rotate(45deg);}
.active .bars:after {transform: rotate(-45deg);}

#banner{border-top: 6px solid #a4968a; padding:10px 0; position:relative;}
.bg_section{background: url(../images/bg_section_02.png) no-repeat 50% 0 #a4968a; width: 100%; height: 18px; overflow: hidden; margin-bottom: 50px;}

#banner .main_bubbel{display: block; position: absolute; left: 25%; top: 25%; width: 180px; height: 180px; border-radius: 50%; border: 1px solid white; background-color: #273890;}
#banner .main_bubbel h3{transform: rotate(-10deg); text-align:center; margin:0;}
#banner .main_bubbel h3 a{color: #fff; display: flex; align-items: center; justify-content: center;  width: 180px; height: 180px; padding: 25px; font-size: 30px;}


/* Section Animation */
#Netzausbau .content{max-width: 620px; margin: 0 auto;}
#Netzausbau p{color: #000099; font-size: 17px; margin: 15px 0; text-align: justify;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Section Vorteil */
.l-content{padding: 0 50px 0 25px; text-align: justify;}
.r-content{padding: 0 25px 0 50px; text-align: justify;}
#Vorteil a{text-decoration: underline;}

/* Section Partner */
#Partner .l-content{text-align: justify;}
#Partner .r-content{text-align: justify;}
#Partner .l-content img{max-width:  70%;}
#Partner .r-content img{max-height: 70%;}
#Partner hr{height: 1px; margin: 40px auto; background: #a4968a; display: block; max-width: 70%;}

/* Section News */
#News h2{text-align: center; color: #283583; margin-bottom: 50px;}
#News .l-content{text-align: left;}
#News .r-content{text-align: justify;}
#News .l-content .news{background: url(../images/bg_news.jpg) no-repeat 0 0; padding: 25px; min-height: 291px; color: #fff;}
#News .l-content .news ul{margin: 0; padding: 0; list-style: none;}
#News .l-content .news ul li{padding-left: 24px; background: url(../images/bg_li_02.png) no-repeat 0 4px;}
#News .l-content .news h3{font-size:24px; margin-top:15px; margin-bottom:15px; padding-top:15px; border-top:1px solid rgba(255,255,255,0.2);}
#News .l-content .news a{color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.2);}
#News .l-content .news a.extern-link::before{content:""; width:11px; height:11px; background:url('../images/extern-icon_white.svg') no-repeat; background-size:cover; margin-right:7px; display:inline-block;}
#News .l-content .news a:hover{color: rgba(255,255,255,0.5);}
#News .l-content .news p + p{margin-top:15px;}
#News .l-content .news p strong{font-weight:500; font-size:18px;}

/* Section Kontakt */
#Kontakt .l-content{text-align: center;}
#Kontakt .r-content{text-align: center;}
#Kontakt .l-content img{max-height: 70px; margin-top: 3px;}
#Kontakt .r-content img{max-height: 60px;}

/* Footer */
footer{width:100%; min-height:60px; padding:20px 15px; background:rgba(0,0,0,0.2);}
footer h3{color:#283583; padding-bottom: 10px; border-bottom:1px solid #333; margin-bottom: 25px;}
footer .l-content{padding: 0 120px 0 25px; text-align: left;}
footer .r-content{padding: 0 25px 0 120px; text-align: left;}

.btn_download::before{font-family: 'FontAwesome'; content: "\f054"; font-size: 14px; display: inline-block; margin-right: 5px;}
.btn_download{display: block; color:#283583; text-decoration: underline;}
.btn_download:hover{color:#0278d4; text-decoration: underline;}

#impressum h4{font-weight: 600; padding-top: 30px;}
#datenschutz h4{font-weight: 600; padding-top: 30px;}
#datenschutz ul{list-style: none;}
#datenschutz ul li::before{font-family: 'FontAwesome'; content: "\f054"; font-size: 14px; display: inline-block; margin-right: 8px; color: #283583;}

@media (max-width: 1024px) {
	header.bg-fixed ul{text-align: center;}
}

@media (max-width: 960px) {
	header ul li{text-align: center; margin: 0 2% 0 0;}
	header ul li a{padding: 3px 5px 3px 15px;}
	.l-content, footer .l-content{padding: 0 25px;}
	.r-content, footer .r-content{padding: 0 25px;}
	#News .l-content .news{min-height: 238px;}
}

@media (max-width: 767px) {
	#tabmenu{display: block;}
	.noscroll{height: 100%; overflow: hidden; margin: 0;}
	#overlay{width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; position: fixed; z-index: 1;}
	#overlay.active{display: block;}
	body{font-size:15px;}
	#wrapper{padding-top: 70px;}
	header{position: fixed; width: 100%; background: #fff; top: 0; left: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); z-index: 1;}
	header.bg-fixed{padding-bottom: 0;}
	header.bg-fixed .main_logos{display: block;}
	.btn_impressum,
	header.bg-fixed .logo_fixed{display: none;}
	header .left_header{padding: 10px 15px;}
	header .right_header{padding: 10px 15px;}
	.hide-mobile{display: none;}
	.l-content{margin-bottom: 30px;}
	.main_logos{padding-left: 50px;}
	.l-content, footer .l-content{padding: 0 15px;}
	.r-content, footer .r-content{padding: 0 15px;}
	#Netzausbau .content{padding: 0 15px;}
	#Partner hr{margin:20px auto; height: 1px;}
	footer{padding-bottom: 20px;}
	h1{font-size: 26px;}
	h2{font-size: 20px;}
	h3{font-size: 18px;}
	header nav{width: 300px; height: calc(100% - 60px); top: 60px; left: -300px; overflow:hidden; background-color:#fff; position: fixed; z-index: 5; opacity: 0; transition: all 0.25s; -webkit-transition: all 0.25s; padding: 0 25px 25px;}
	
	header nav.enter{opacity: 1; left: 0;}
	.btn_impressum.active{display: block; position: fixed; left: 30px; bottom: 30px; z-index: 5;}
	header ul li{text-align: left;}
	header ul li{display: block; margin: 0 0 10px;}
	header ul li a,
	header.bg-fixed ul li a{font-size: 16px; padding:0 5px 0 15px; background: url(../images/bg_menu_2.png) no-repeat 0 3px;}
	header ul li a:hover,
	header.bg-fixed ul li a:hover{background: url(../images/bg_menu_active_2.png) no-repeat 0 3px; color: #0278d4;}
	header ul,
	header.bg-fixed ul{margin-top: 30px;}

	#banner .main_bubbel{width: 110px; height: 110px;}
	#banner .main_bubbel h3 a{width: 110px; height: 110px; padding: 20px; font-size: 18px;}
}