@charset "UTF-8";
/* CSS Document */

/*
Theme Name: Gute Botschaften.sgp Basistheme.
Theme URI: 
Author: Ingo Stephan
Author URI: https://www.sgp.de
Description: Das Basistheme von Gute Botschaften.sgp.
Version: 1.0
Tags: SGP, Gute Botschaften, Agentur, Remscheid, Werbung, Marketing, Internet, Facebook
Text Domain: Gute Botschaften.sgp
*/

/* -----------------------------  CSS Reset  -------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

.grecaptcha-badge { display: none; }
body { line-height: 1; margin:0; padding:0; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a, a:active, a:visited { text-decoration: underline; color: #000000; }
a:hover { color: #707173; }
.clear { clear:both; }

.row { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; flex-flow: row wrap; }
.row.left { justify-content: flex-start; }
.row.right { justify-content: flex-end; }

.mittig { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center;	-ms-flex-align: center; align-items: center; justify-content: space-between; }

/* ----------------------------- CSS allgemein -------------------------------- */

/* titillium-web-300 - latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: local(''),
        url('fonts/titillium-web-v15-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('fonts/titillium-web-v15-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* titillium-web-600 - latin */
  @font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: local(''),
        url('fonts/titillium-web-v15-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('fonts/titillium-web-v15-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
    font-family: 'Titillium Web', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.4em;
    color: #000000;
}
.welcomemobile { display: none; }

p { padding-bottom: 1em; }

h1 { font-size: 45px; font-weight: 600; line-height: 1.2em; margin-bottom: 0.75em; }
h2 { font-size: 30px; font-weight: 300; padding-bottom: 1em; line-height: 1.2em; }
h3 { font-size: 24px; font-weight: 300; padding-bottom: 1em; line-height: 1.3em; }
h4 { font-size: 18px; font-weight: 300; padding-bottom: 1em; line-height: 1.2em; }
h5 { font-size: 14px; font-weight: 600; padding-bottom: 1em; line-height: 1.2em; }
h6 { font-size: 12px; font-weight: 300; padding-bottom: 1em; line-height: 1.2em; }

h3 i { font-size: 0.8em; padding-right: 5px; }
h3 a, h4 a { color: #0069b3; text-decoration: none !important; }
h3 a:hover, h4 a:hover { color: #b62625; }

ul, li { margin:0; padding:0; list-style: none; }
#spenden ul { padding-bottom: 1em; }
b, strong { font-weight: 600; }
hr { border: 0; border-top: 3px solid #ffffff; height: 0; margin: 20px 90% 30px 0; }
hr.blau { border-top: 3px solid #0069b3; }
hr.rot { border-top: 3px solid #b62625; }

.pagecontent .eltern hr { width: 10%; border-top: 3px solid #b62625; }
.pagecontent .kinder hr { width: 10%; border-top: 3px solid #0069b4; }

.textklein { font-size: 0.85em; padding-bottom: 3px; }

.zweispaltig {
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
    -moz-column-gap: 50px;
    -webkit-column-gap: 50px;
    column-gap: 50px;
}

.dreispaltig {
    -moz-columns: 3;
    -webkit-columns: 3;
    columns: 3;
    -moz-column-gap: 50px;
    -webkit-column-gap: 50px;
    column-gap: 50px;
}

.nobreak { white-space: nowrap; }

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

i { font-size: .9em; margin-right: 0.4em; }
a.btn, a.btn:active, a.btn:visited { display: inline-block; font-size: 14px; font-weight: 600; line-height: 1em; text-decoration: none; color: #ffffff !important; padding: 8px 10px; background: #0069b3; cursor: pointer; }
a.btn:hover { color: #ffffff; background: #b62625; }
.bottom { position: relative; padding-bottom: 55px !important; }
.bottom a.btn { position: absolute; bottom: 20px; left: 20px; }

article, footer, header {
    position: relative;
    width: 100%;
    height: auto;
}

article, footer {
    position: relative;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    opacity: 0.85;
}

.overlay.bg-gelbgruen {
    display: none;
}

.nivo-caption {
    background: transparent !important;
    color: #0069b4 !important;
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pagecontent .col_l_sp_4.bottom { margin-bottom: 50px; }
#sidebar .news { margin-bottom: 30px; }
.pagecontent .news { padding: 20px; }

.pagecontent img.alignright, 
.pagecontent .alignright img {
    margin: 0 0 1em 30px;
    width: 45%;
}

.pagecontent img.alignleft,
.pagecontent .alignleft img {
    margin: 0 30px 1em 0;
    width: 33.33%;
}

.pagecontent .alignnone img,
.pagecontent .aligncenter img,
.pagecontent img.alignnone,
.pagecontent img.aligncenter {
    margin: 0 0 1em 0;
    width: 100%;
}

/* -----------------------------  Weiten und Abstände einrichten -------------------------------- */

/* 
Außenabstände = margin
Innenabstände = padding
*/

header#top {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    background: #fff;
    z-index: 9900;
    transition: top 0.4s ease-in-out; 
}

/* --- Maximale Weite ohne Boxen -- */
.header {
    position: relative;
    margin: 0 auto;
    max-width: 1400px;
    height: auto;
    background: rgba(255,255,255, 1);
}

/* --- Maximale Weite mit Boxen -- */
section, .footer, .copyright {
    position: relative;
    margin: 0 auto;
    max-width: 1400px;
    height: auto;
}

/* --- Abstände ohne Boxen -- */
.header { padding: 0 50px; }

/* --- Abstände mit Boxen -- */
.content, .slider { padding: 100px 50px; }

/* --- Abstand Footer mit Boxen -- */
.footer { padding: 20px 50px }

/* --- Abstände der Boxen -- */
.contentSlider, .boxcontent {
    margin: 0 10px;
    padding: 15px;
}

/* --- Abstände der Copyrightzeile -- */
.copyright {
    padding: 0px;
    text-align: right;
}

/* --- Innenabstand (Padding) bei Slider auf 0 setzen -- */
.contentSlider {
    padding: 0 !important;
}

/* --- Icongrößen -- */

i.icon_small {
    font-size: 2em;
    line-height: 1.5em;
}

i.icon_medium {
    font-size: 3.5em;
    line-height: 1.5em;
}

i.icon_big {
    font-size: 5em;
    line-height: 1.5em;
}

/* --- Zeilenabstände -- */

.zeile_normal {
    line-height: 1em;
}

.zeile_mittel {
    line-height: 1.5em;
}

.zeile_viel {
    line-height: 1.8em;
}

.pagecontent .content {
    padding: 190px 50px 80px; 
}

.pagespenden .content {
    padding: 10px 30px;
    font-size: 22px;
    line-height: 1.3em;
}

img.contentlogo {
    box-shadow: none !important;
    width: 25% !important;
    height: auto !important;
    -moz-transform: none !important;
    -webkit-transform: none !important;
    -o-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    padding: 0 20px 0 0 !important;
    margin:0 !important;
    border: 0 !important;
}

.attachment-post-thumbnail {
    margin-top: 20px;
}

/* -----------------------------  Farben -------------------------------- */

.bg-schwarz { background: #000; }
.bg-weiss { background: #fff; }
.bg-dunkelgrau { background: #707173; }
.bg-hellgrau { background: #f2f2f2; }
.bg-dunkelblau { background: rgba(0,105,180,1); }
.bg-rot { background: rgba(182,38,37,1); }
.bg-gelbgruen { background: rgba(174,204,83,1); }
.bg-dunkelgruen { background: rgba(123,162,45,0.9); display: none; }
.bg-hellblau { background: #eaf6fe; }

.font-schwarz { color: #000; }
.font-weiss a, .font-weiss a:active, .font-weiss a:visited, .font-weiss { color: #fff; }
.font-dunkelgrau { color: #707173; }
.font-hellgrau { color: #f2f2f2; }
.font-dunkelblau { color: rgba(0,105,180,1); }
.font-weiss a:hover, .font-rot { color: #b62625; }
.font-hellblau { color: #c8d9f1; }

.has-white-color { color: #ffffff; }
.has-black-color { color: #000000; }
.has-blue-color { color: #0069b4; }
.has-red-color { color: #b62625; }
.has-green-color { color: #aecc53; }

.has-white-background-color { background-color: #ffffff; }
.has-black-background-color { background-color: #000000; }
.has-blue-background-color { background-color: #0069b4; }
.has-red-background-color { background-color: #b62625; }
.has-green-background-color { background-color: #aecc53; }

/* -----------------------------  Weiten und Abstände einrichten ENDE -------------------------------- */


.content img {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
    border-bottom: 5px solid #aecc53;
}

.content.kinder img { border-bottom: 5px solid #0069b4; }
.content.eltern img { border-bottom: 5px solid #b62625; }

.content .alignleft img,
.content img.alignleft {
    width: 45%;
    float: left;
    height: auto;
    margin: 0 30px 1em 0;
    clear:both;
}

.content .alignright img,
.content img.alignright {
    width: 45%;
    float: right;
    height: auto;
    margin: 0 0 1em 30px;
    clear:both;
}

#blog .content img { border: 0; margin-bottom: 0; }

.wp-block-image {
	display: inline-block;
}

.pagecontent .content .col_l_sp_8 ul {
    padding-bottom: 1em;
}

.content .col_l_8 ul li,
.content .col_l_sp_8 ul li,
.content .col_l_12 ul li,
#spenden .content ul li {
    list-style-type: square;
    margin-left: 22px;
}

.pagecontent .content .col_l_12 ul { padding-bottom: 1em; }

/* ------------------------------ Videobackground ------------------------------ */

img.logo50 { position: absolute; top: 11vw; left: 50%; margin-left: -11vw; width: 22vw; height: 22vw; opacity: 0; z-index: 1000; }

section.video {
    position:relative;
	width: 100%;
    max-width: 100% !important;
	margin: auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	overflow: hidden !important;
}

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
    z-index: -4;
}
.video-container .poster img {
    background-size: cover;
    width: 100%;
    bottom: 0;
    position: absolute;
    z-index:-3;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: transparent;
    width: 100%;
    z-index:-1;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
    z-index: -2;
}
.video-container video.fillWidth {
    width: 100%;
}

.video-mobile { display: none; }

/* -----------------------------  Header -------------------------------- */

.logo { width: 260px; height: auto; }
.logo img { width: 100%; height: auto; }

.headerline { height: 5px !important; }
.pagecontenthead { padding: 0 50px; }
.pagecontenthead h4 { margin: 0 auto; padding: 8px 0; max-width: 1400px; }


/* -----------------------------  Ausrichtung -------------------------------- */

.rechts {
    text-align: right;
}

.links {
    text-align: left;
}

.zentriert {
    text-align: center;
}


/* -----------------------------  Start -------------------------------- */

.stoerer { 
	position: absolute; 
	top: 150px; 
	right:0;
	text-align: center;
	z-index: 8000;
}

.stoerer a h3 { 
	margin: 0; 
	padding: 10px 30px 10px 20px;
	background: rgba(182,38,37,0.75);
}

.stoerer a:hover h3 { 
	background: rgba(182,38,37,0.90);
}

.stoerer a { 
	color: #ffffff;
	text-decoration: none;
}

.stoerer50 { 
	position: absolute; 
	top: 150px; 
	left:0;
    width: 25vw;
    max-width: 250px;
    min-width: 180px;
	text-align: center;
	z-index: 8000; 
}

.stoerer50 img { width: 100%; height: auto; }

.auswahl_start {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.boxstart {
    position: absolute;
    text-align: center;
    color: rgba(255,255,255,0.75);
    font-size: 20px;
    width: 33.33%;
    z-index: 5000;
}

.boxstart.bg-dunkelblau-light {
    background: rgba(0,105,180,0.70);
    left: 0;
    padding: 80px 0;
}

.boxstart.bg-rot-light {
    background: rgba(182,38,37,0.70);
    left: 33.33%;
    padding: 80px 0;
}

.boxstart.bg-gelbgruen-light {
    background: rgba(174,204,83,0.75);
    right: 0;
    bottom: -7.5em;
    padding: 80px 0;
    color: #fff !important;
}

.boxstart h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    font-size: 40px;
    padding-bottom: 0;
}

.auswahl_start a {
    cursor: pointer;
}

.boxstart {
    -webkit-transition: all 0.3s ease;  
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}

.boxstart:hover {
    padding: 60px 0;
    bottom: 0 !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.bg-dunkelblau-light:hover {
    background: rgba(0,105,180,0.9);
}

.bg-rot-light:hover  {
    background: rgba(182,38,37,0.9);
}

.bg-gelbgruen-light:hover  {
    background: rgba(174,204,83,0.9);
}

.submenu {
    line-height: 1.5em;
    opacity: 0;
    -webkit-transition: all 0.3s ease;  
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.bg-dunkelblau-light:hover .submenu,
.bg-rot-light:hover .submenu,
.bg-gelbgruen-light:hover .submenu {
    opacity: 1;
    -webkit-transition: all 0.3s ease;  
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}

.bg-dunkelblau-light:hover img,
.bg-rot-light:hover img,
.bg-gelbgruen-light:hover img {
    opacity: 0;
    -webkit-transition: all 0.3s ease;  
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}

.boxstart a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
}

.boxstart a:hover {
    color: rgba(255,255,255,1);
}
#bu_blaettern { font-size: .9em; }
#bu_blaettern a { text-decoration: none; text-transform: uppercase; color: #0069b4; }
#bu_blaettern a:hover { color: #b62625; }
#bu_blaettern .left i { margin: 0 10px 0 0; color: #0069b4; }
#bu_blaettern .right i { margin: 0 0 0 10px; color: #0069b4; }

/* -----------------------------  Sponsor -------------------------------- */

.sponsor .content {
    padding:0;
}
.gallery { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; flex-flow: row wrap; margin: 30px 0; }
.gallery-item { width: 20%; }
.gallery-icon { width: 100%; text-align: center; }
.gallery-icon img { width: 80%; height: auto; margin: 0; }
.gallery-caption { display: none; }

/* -----------------------------  Kontakt -------------------------------- */

#kontakt { border-top: 5px solid #ffffff; }

.kontakt .content { font-size: 14px; }
.kontakt img { width: auto; }
.kontakt hr { border-top: 3px solid #0069b4 ; }

form {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 600;
}

textarea {
    width: 96%;
    height: 100px;
    padding: 2%;
    resize: none;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #0069b4;
    font-size: 14px;
    font-family: 'Lato', sans-serif, Verdana, serif;
    -webkit-appearance: none;
    border-radius: 0;
}

input {
    width: 96%;
    padding: 8px 2%;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #0069b4;
    font-size: 14px;
    font-family: 'Lato', sans-serif, Verdana, serif;
    -webkit-appearance: none;
    border-radius: 0;
}

.hellblau textarea, .hellblau input { background: #eaf6fe; }

.wpcf7-submit {
    background: #0069b4 !important;
    color: #fff !important;
    width: auto;
    margin-top:20px;
    padding: 8px 20px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    border-radius: 0;
}

.wpcf7-submit:hover {
    background: #b62625 !important;
}

.exggmap-mask-content { color: #0069b4; }
.exggmap-mask-content button { border: none !important; text-transform: none !important; font-size: 14px !important; } 
.exggmap-mask-content button:hover { background-color: #b62625 !important; } 


/* -----------------------------  Cookie -------------------------------- */

.cookie-notice-container { max-width: 1000px; margin: 0 auto; }
.cookie-notice-container a { color: #009fe3; }
.cookie-notice-container a:hover { color: #b62625; }
.cookie-notice-container a::before { content:'»'; }



/* -----------------------------  Footer -------------------------------- */

.footer a, .footer a:active, .footer a:visited {
    color: #c8d9f1;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85em;
}

.footer a:hover {
    color: #fff;
}

.menu-hauptnavigation-container { float:left; }

.footer ul li {
    float:left;
    padding-right: 15px;
}

.footer .copycontent {
    display: inline-block;
}

.footer .textwidget {
    display: inline-block;
}