html, body { width: 100%; height: 100%; position: relative; -webkit-overflow-scrolling: touch; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: #fff; font-family: 'Source Sans Pro', sans-serif; color: #333; font-size: 100.01%; font-weight: 400; line-height: 1.3; }
html.open, .open body { overflow-x: hidden; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
a { color: #333; text-decoration: none; }
#content a { color: #469935; font-weight: 600; text-decoration: none; }
#content a:hover { text-decoration: underline; }
img, iframe { border: none; }
a:focus, button:focus { outline: none; }
.clear { clear: both; height: 0; }
.clearfix::after, .widthFix::after { display: block; content: ""; height: 0; clear: both; visibility: hidden; }
h1, h2, h3, h4, p, table { margin: 0 0 15px 0; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 10px 0; }
h1 { font-size: 28px; font-weight: 400; color: #2e8c1b; }
h2 { font-size: 24px; font-weight: 400; color: #2e8c1b; }
h3 { font-size: 16px; font-weight: 600; color: #2e8c1b; border-bottom: 1px dotted #999; padding-top: 15px; margin: 0 0 5px 0; clear: both; }
strong { font-weight: 600; }
#container, #header, #infoBar, #columnRight, #emotion, #content, footer { width: 100%; position: relative; }
.widthFix { max-width: 1440px; margin: 0 auto; }
#heightFix, #logo img, #columnleft .box img, .blog img { display: block; width: 100%; height: auto; }
#mainNav ul, #footerNav ul { list-style-type: none; }
#container { background: #fff; min-height: 100%; }
#header { background: #070b3b; z-index: 100; }
#logo { width: 230px; padding: 15px 15px 25px 15px; }
#infoBar { background: #91c680; background: -moz-linear-gradient(top, #91c680 0%, #469935 100%); background: -webkit-linear-gradient(top, #91c680 0%,#469935 100%); background: linear-gradient(to bottom, #91c680 0%,#469935 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91c680', endColorstr='#469935',GradientType=0 ); }
#infoBar .widthFix { padding: 8px 15px; }
#infoBar h1 { font-size: 18px; color: #333; margin: 0; }
#infoBar .jesus { font-size: 14px; color: #333; }
#fake { display: none; }
#main { background: #eee; width: 100%; }
#columnleft { background: #fff; position: absolute; left: -78%; width: 78%; top: 0; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 100; }
.container.active #columnleft { left: 0; }
/* Navigation */
#mainNav { padding: 0 0 60px 0; }
#mainNav ul { border-bottom: 1px solid #e5e5e5; }
#mainNav ul li { display: block; position: relative; }
#mainNav ul li a { display: block; font-size: 18px; line-height: 48px; font-weight: 400; color: #333; padding: 0 50px 0 15px; border-top: 1px solid #e5e5e5; white-space: nowrap; }
#mainNav ul li:first-child a { border-top: none; }
#mainNav ul li a:hover, #mainNav ul li.active > a, #mainNav ul li.current > a { background: #070b3b; color: #fff; border-top-color: #fff; }
/* Menü-Icons */
#mainNav ul li.parent span.more { display: block; background: transparent; width: 48px; height: 48px; font-size: 28px; line-height: 50px; color: #333; position: absolute; top: 1px; right: 0; cursor: row-resize; text-align: center; }
#mainNav ul li.parent.open span.more, #mainNav ul li.parent.active span.more { line-height: 46px; }
#mainNav ul li.parent.active span.more, #mainNav ul li:hover span.more, #mainNav ul li.parent.active:hover span.more:hover { color: #fff; }
#mainNav ul li:hover span.more:hover { color: #333; }
#mainNav ul li.parent span.more::before { content: '\f107'; }
#mainNav ul li.parent.open span.more::before, #mainNav ul li.parent.active span.more::before { content: '\f106'; }
/* Zweite Ebene */
#mainNav ul.mod-menu__sub { display: block; width: 100%; max-height: 0; margin: 0; padding: 0; position: relative; border: none; overflow: hidden; }
#mainNav ul li.open ul.mod-menu__sub, #mainNav ul li.active ul.mod-menu__sub{ max-height: 500px; }
#mainNav ul.mod-menu__sub li a, #mainNav ul li.active ul.mod-menu__sub li a { color: #333; font-size: 16px; line-height: 130%; padding: 7px 15px 7px 30px; margin-top: 1px; border: none; }
#mainNav ul li ul.mod-menu__subli a:hover, #mainNav ul li.active ul.mod-menu__subli a:hover, #mainNav ul li.active ul.mod-menu__sub li.current a { background: none; color: #070b3b; font-weight: 600; }
#mainNav ul li ul.mod-menu__sub li a:hover::before, #mainNav ul li.active ul.mod-menu__sub li.current a::before { content: '\f105'; font-size: 16px; font-weight: 600; line-height: 36px; position: absolute; top: 0; left: 20px; }
/* Sidebar Boxen */
#columnleft .box { width: 100%; padding: 0 15px 40px 15px; font-size: 16px; color: #333; }
#columnleft .box h3 { font-size: 15px; color: #2e8c1b; border-bottom: 1px dotted #2e8c1b; margin: 0 0 5px 0; }
#columnleft .box strong { color: #000; }
#columnleft .box a { display: block; width: 200px; margin: 0 auto; }
#content { padding: 20px 15px; }
/* BOX + BLOG ÜBERSICHT */
#columnRight .news .nspArts { margin: 0; padding: 0; }
#columnRight .news .nspArt { background: #fff; width: 100%; padding: 15px !important; margin-bottom: 30px !important; border: 1px solid #d7d7d7; position: relative; }
#columnRight .news h4, #columnRight .news h3 { padding: 0; margin: 0 0 10px 0; }
#columnRight .news h4 { font-size: 24px; font-weight: 400; color: #2e8c1b; }
#columnRight .news h4 a { color: #2e8c1b; font-weight: 400; text-decoration: none; }
#columnRight .news img { margin: 0 0 15px 0; }
#columnRight .news p:nth-last-of-type(1) { margin: 0; }
#columnRight .news a { color: #469935; font-weight: 600; text-decoration: none; }
#columnRight .news a:hover { text-decoration: underline; }
footer { background: #070b3b; color: #fff; padding: 25px 15px; }
footer a { color: #fff; }
#footerNav { width: auto; display: table; margin: 0 auto; }
#footerNav ul li a { display: block; width: 160px; background: rgba(255,255,255,.15); font-size: 18px; line-height: 40px; text-align: center; color: #fff; margin: 0 0 10px 0; }
#footerNav a:hover, #footerNav a.current { background: #469935; }
footer .name, footer .address, footer .contact, footer .author { width: 100%; font-size: 18px; text-align: center; padding-top: 15px; }
footer .author { font-size: 14px; color: rgba(255,255,255,.7); padding-top: 25px; }
footer .copyright { display: block; }
footer .author a { color: rgba(255,255,255,.7); }
footer a:hover, footer .author a:hover { color: #2e8c1b; }
/* LISTEN */
#content ul, #content ol { line-height: 130%; padding-left: 35px; margin: 0 0 25px 0; }
#content li { padding: 3px 0; }
/* Bilder */
#content .bildvoll { display: block; width: 100%; height: auto; margin: 0 0 20px 0; }
#content .bild3links { display: block; float: left; width: 33%; height: auto; margin: 0 20px 15px 0; }
#content .bild3rechts { display: block; float: right; width: 33%; height: auto; margin: 0 0 15px 20px; }
/* GOOGLE MAPS */
#content .responsiveContainer { width: 100%; position: relative; padding-bottom: 60%; height: 0; margin: 0 0 25px 0; overflow: hidden; }
.video.responsiveContainer { padding-bottom: 58%; }
#notice { padding: 5px; white-space: nowrap; }
#notice h4 { font-size: 18px; padding: 0; margin: 0; }
#map, .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* EFFEKTE */
#header, #logo, #container::before, #columnleft, #fake, #toggleNavbar, #mainNav > ul > li > a, #mainNav ul.nav-child, #footerNav a { -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; transition: all .4s ease-out; }
/* Responsive Menu */
#toggleNavbar { display: block; width: 58px; height: 40px; padding: 0 15px; position: absolute; top: 50%; right: 0; z-index: 100; margin-top: -20px; }
#toggleNavbar .icon, #toggleNavbar .icon::before, #toggleNavbar .icon::after { background: #fff; width: 28px; height: 3px; position: absolute; transition: 0.6s ease; transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); }
#toggleNavbar .icon { top: 18px; left: 15px; }
#toggleNavbar .icon::before { content: ""; top: -8px; }
#toggleNavbar .icon::after { content: ""; top: 8px; }
/* on activation */
.active #toggleNavbar .icon { background: transparent; }
.active #toggleNavbar .icon::before { background: #fff !important; top: 0 !important; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.active #toggleNavbar .icon::after { background: #fff !important; top: 0 !important; -moz-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); -o-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); }
/* MENÜ FADE OUT */
.open #header { background: #010426; }
.open #container::before { content:''; width: 100%; height: 100%; position: absolute; background: #000; z-index: 100; opacity: .6; }
/* LogoFix
---------------------------- */
@media screen and (min-width: 360px) {
#logo { width: 280px; padding: 15px 15px 25px 15px; }
/* BOX + BLOG ÜBERSICHT */
#columnRight .news .nspArt img { width: 30%; float: right; margin: 0 0 15px 15px; }
}
/* Landscape phone to portrait tablet
---------------------------- */
@media screen and (min-width: 480px) {
#logo { width: 330px; padding: 20px 20px 30px 20px; }
#toggleNavbar { right: 20px; }
#infoBar .widthFix { padding: 0 20px; }
#infoBar h1 { float: left; line-height: 40px; }
#infoBar .jesus { float: right; line-height: 40px; }
/* MENÜ */
#columnleft { left: -65%; width: 65%; }
#mainNav ul li a { padding-left: 20px; }
#mainNav ul.mod-menu__subli a, #mainNav ul li.active ul.mod-menu__subli a { padding-left: 35px; }
#mainNav ul li ul.mod-menu__subli a:hover::before, #mainNav ul li.active ul.mod-menu__subli.current a::before { left: 25px; }
#columnleft .box { padding: 0 20px 40px 20px; }
#content, footer { padding: 25px 20px; }
/* BOX + BLOG ÜBERSICHT */
#columnRight .news .nspArt { padding: 20px; }
#columnRight .news .nspArt img { width: 150px; margin: 0 0 0 15px; }
}
/* Portrait tablet to landscape and desktop
------------------------------------- */
@media screen and (min-width: 768px) {
h2 { font-size: 28px; }
#logo { width: 380px; padding: 25px 25px 35px 25px; }
#toggleNavbar { right: 25px; }
#infoBar .widthFix { padding: 0 25px; }
#infoBar h1 { font-size: 20px; line-height: 44px; }
#infoBar .jesus { font-size: 16px; line-height: 44px; }
/* MENÜ */
#columnleft { left: -45%; width: 45%; }
#content, footer { padding: 30px 25px; }
#footerNav ul li { float: left; }
#footerNav ul li a { width: auto; padding: 0 25px; margin: 0 5px 10px 5px; }
/* BOX + BLOG ÜBERSICHT */
#columnRight .news .nspArt img { width: 180px; }
}
/* desktop small
------------------------------------------- */
@media screen and (min-width: 992px) {
#toggleNavbar { display: none; }
#logo { width: 400px; padding: 25px 0 35px 0; margin: 0 auto; }
#infoBar .widthFix { padding: 0 30px; }
#infoBar h1 { font-size: 22px; line-height: 48px; }
#infoBar .jesus { font-size: 18px; line-height: 48px; }
#header .widthFix, #main .widthFix, footer .widthFix { position: relative; }
#main { position: relative; z-index: 10; }
#columnleft { background: transparent; width: 350px; padding: 40px 40px 40px 30px; float: left; position: relative; left: 0; overflow: hidden; border: none; }
#columnRight { width: auto; padding: 40px 30px 40px 0; overflow: hidden; }
#fake { display: block; background: #fff; width: 280px; height: 100%; position: absolute; top: 0; left: 30px; overflow: hidden; z-index: 1; }
/* Navigation */
#mainNav ul li:first-child a { border-top: 1px solid #fff; }
#mainNav ul li.active a::after, #mainNav ul li.current a::after { content: ''; width: 0; height: 0; position: absolute; left: 100%; top: 0; border-style: solid; border-width: 24px 0 24px 12px; border-color: transparent transparent transparent #070b3b; }
#mainNav ul li a { padding-left: 15px; }
#mainNav ul.mod-menu__subli a, #mainNav ul li.active ul.mod-menu__subli a { padding-left: 30px; }
#mainNav ul li ul.mod-menu__subli a:hover::before, #mainNav ul li.active ul.mod-menu__subli.current a::before { left: 20px; }
#columnleft .box { padding: 0 15px 40px 15px; }
#content { padding: 0; }
footer { padding: 0; box-shadow: inset 0 42px 0 0 rgba(255,255,255,.1); }
footer .widthFix { height: 150px; }
#footerNav { display: block; margin: 0; position: absolute; top: 0; right: 30px; }
#footerNav ul li a { background: rgba(255,255,255,.1); line-height: 42px; margin: 0 0 0 2px; }
#footerNav ul li:last-child a { margin: 0 2px; }
footer .name, footer .address, footer .contact, footer .author { width: auto; font-size: 17px; text-align: left; padding: 0; position: absolute; }
footer .name { bottom: 25px; left: 30px; }
footer .address { bottom: 25px; left: 280px; }
footer .contact { bottom: 25px; left: 450px; }
footer .author { width: auto; font-size: 13px; text-align: right; bottom: 25px; right: 30px; }
}
/* desktop
------------------------------------------- */
@media screen and (min-width: 1200px) {
body, h3 { font-size: 18px; }
h1, h2 { font-size: 30px; }
#logo { width: 500px; padding: 30px 0 40px 0; }
#infoBar .widthFix { padding: 0 40px; }
#infoBar h1 { font-size: 24px; line-height: 50px; }
#infoBar .jesus { font-size: 19px; line-height: 50px; }
#columnleft { width: 430px; padding: 40px 50px 40px 40px; }
#columnRight { padding: 40px 40px 40px 0; }
#fake { width: 340px; left: 40px; }
/* Navigation */
#mainNav ul li a { font-size: 19px; padding-left: 25px; }
#mainNav ul.mod-menu__subli a, #mainNav ul li.active ul.mod-menu__subli a { font-size: 17px; padding-left: 40px; }
#mainNav ul li ul.mod-menu__subli a:hover::before, #mainNav ul li.active ul.mod-menu__subli.current a::before { font-size: 17px; left: 28px; }
#columnleft .box { font-size: 18px; padding: 0 25px 40px 25px; }
#columnleft .box h3 { font-size: 16px; margin: 0 0 10px 0; }
footer { box-shadow: inset 0 44px 0 0 rgba(255,255,255,.1); }
footer .widthFix { height: 165px; }
#footerNav { right: 40px; }
#footerNav ul li a { font-size: 20px; line-height: 44px; }
footer .name, footer .address, footer .contact { font-size: 18px; }
footer .name { bottom: 30px; left: 40px; }
footer .address { bottom: 30px; left: 320px; }
footer .contact { bottom: 30px; left: 510px; }
footer .author { font-size: 14px; bottom: 30px; right: 40px; }
/* BOX + BLOG ÜBERSICHT */
#columnRight .news .nspArt img { width: 200px; }
}
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?62546176');
src: url('../font/fontello.eot?62546176#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?62546176') format('woff2'),
url('../font/fontello.woff?62546176') format('woff'),
url('../font/fontello.ttf?62546176') format('truetype'),
url('../font/fontello.svg?62546176#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before, #columnleft span.more::before, #mainNav ul li ul.mod-menu__subli a::before { font-family: "fontello"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; speak: none; display: inline-block; text-decoration: inherit; text-align: center; }
.icon-phone:before { content: '\e800'; } /* '' */
.icon-location:before { content: '\e801'; } /* '' */
.icon-phone-squared:before { content: '\f098'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-angle-left:before { content: '\f104'; } /* '' */
.icon-angle-right:before { content: '\f105'; } /* '' */
.icon-angle-up:before { content: '\f106'; } /* '' */
.icon-angle-down:before { content: '\f107'; } /* '' */
.icon-direction:before { content: '\f124'; } /* '' */
.icon-mail-squared:before { content: '\f199'; } /* '' */
/* source-sans-pro-300 - latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url('../fonts/source-sans-pro-v21-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/source-sans-pro-v21-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/source-sans-pro-v21-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/source-sans-pro-v21-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/source-sans-pro-v21-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/source-sans-pro-v21-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: url('../fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: url('../fonts/source-sans-pro-v21-latin-600.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/source-sans-pro-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/source-sans-pro-v21-latin-600.woff') format('woff'), /* Modern Browsers */
url('../fonts/source-sans-pro-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-700 - latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: url('../fonts/source-sans-pro-v21-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/source-sans-pro-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/source-sans-pro-v21-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/source-sans-pro-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}