body {
    font-family: "Roboto",Helvetica Neue,Helvetica,Arial,sans-serif;
    background: #ffffff;
  	margin: 0;
  	padding-top: 0px;
	padding-bottom: 80px;
	font-weight: 300;
	font-size: 1.4em;
}

@media screen and (min-width:768px) {
body {
  margin: 0;
  padding-top: 120px;
	font-size: 1.6em;
}
}

@media screen and (min-width:992px) {
body {
  margin: 0;
  padding-top: 140px;
	font-size: 1.8em;
}
}

@media screen and (min-width:1200px) {
body {
  margin: 0;
  padding-top: 140px;
}
}

* {
  box-sizing: border-box;
}


/*  Kopfbild  */

#kopfbild {
	height: 200px;
	position: relative;
	background-repeat: no-repeat; 
	background-position:  center center;
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
	margin-bottom: 20px;
}

@media screen and (min-width:768px) {
	#kopfbild {
		height: 300px;
		margin-bottom: 50px;
	}
}

@media screen and (min-width:992px) {
	#kopfbild {
		height: 350px;
	}
}

@media screen and (min-width:1200px) {
	#kopfbild {
		height: 400px;
	}
}




.farbig { background-color: #e9b400; padding-top: 15px; padding-bottom: 5px; }
.farbig p { color: #ffffff; }
.farbig a { color: #ffffff; }

.colored { color: #83256a !important; font-weight: 500; }





	
.brand { display: none; }
.vierundzwanzig { display: none; }
.claim { display: none; }

.claim-trenner { display: block; }

@media(min-width:768px) {
	
	.brand {
	display: block;
	margin: 0 auto;
	margin-top: 20px;
	text-align: center;
	width: 240px;
	height: 80px;
	background: url(../images/design/helfende-haende.svg);
	background-size: cover;
	background-repeat: no-repeat;
}

	.svg .brand {
		background: url(../images/design/helfende-haende.svg);
		background-repeat: no-repeat;
	}
	
	.vierundzwanzig { text-align: left; display: block; position: absolute; left: 40px; top: 40px; font-size: 20px; color: #83256a; line-height: 120%; font-style: italic; text-transform: uppercase; }
	.claim { display: block; position: absolute; right: 40px; top: 40px; font-size: 20px; color: #83256a; line-height: 120%; font-style: italic; text-transform: uppercase; }
}

@media(min-width:992px) {
	.brand {
	margin-top: 20px;
	width: 300px;
	height: 100px;
		}
	.vierundzwanzig { left: 50px; top: 45px; font-size: 25px; }
	.claim { right: 50px; top: 45px; font-size: 25px; }
}

@media(min-width:1200px) {
	.brand {
	margin-top: 20px;
	width: 300px;
	height: 100px;
		}
	.vierundzwanzig { left: 50px; top: 60px; font-size: 25px; }
	.claim { right: 50px; top: 60px; font-size: 25px; }
	
	.claim-trenner { display: none; }
}

.navbar {
    position: relative;
    min-height: 60px;
    margin-bottom: 0px;
    border: 1px solid transparent;
}

.navbar-nav { min-height:60px; }

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #555555;
    text-decoration: none;
    background-color: #eeeeee;
    outline: 0
}


.kontakt a,
.kontakt a, 
.kontakt a:hover {
    text-decoration: none;
    color: #333;
}

header {
  height: 0px;
}

header {
  position: relative;
  width: 100%;
  top: 0;
}

.main-nav-scrolled {
  position: relative;
  width: 100%;
  top: 0;
}

@media(min-width:768px) {
header {
  height: 150px;
  background: #ffffff;
  color: #e9b400;
  text-align: center;
}

header {
  position: fixed !important;
  width: 100%;
  top: 0;
}

.main-nav-scrolled {
  position: fixed !important;
  width: 100%;
  top: 0;
}

}

.main {
  background: #ffffff;
  padding: 60px 0px 0px 0px;
}

.main-nav,
.main {
  position: relative; 
  width: 100%;
}
.main-nav {
  background: #fff;
  z-index: 150;
  margin-bottom: -60px;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
  width: 100%;
}

.team { margin-bottom: 50px; }

.team h3 { margin-top: 15px !important; }

.team .col-sm-4 { margin-bottom: 40px; }

.team .panel { margin-bottom: 10px !important; }

@media(min-width:576px) {
	.team .col-sm-4 { width: 33.33333333%; float: left; }
	.team .col-sm-8 { width: 66.66666667%; float: left; }
}

.warum { margin-bottom: 50px; }

@media(min-width:576px) {
	.warum .col-sm-4 { width: 33.33333333%; float: left; }
	.warum .col-sm-8 { width: 66.66666667%; float: left; }
}

a {
    color: #e9b400;
    text-decoration: none
}

a:focus, a:hover {
    color: #555555;
    text-decoration: underline
}

.margin-top-0 { margin-top: 0px !important; }

.margin-bottom-50 { margin-bottom: 50px !important; }


h1,
h2,
h3,
h5,
h6 {
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
	color: #83256a;
	margin-bottom: 20px;
}

h1 { 
	font-size: 24px; 
	color: #e9b400 !important;
}

h2 { 
	font-size: 24px; 
	margin-top: 40px !important;
	color: #e9b400; 
	}

@media(min-width:768px) {
	h2 { 
		font-size: 30px; 
	}
	
	
	h1 { font-size: 30px; margin-bottom: 25px; }
}
	
h3 { 
	font-size: 20px;
margin-top: 5px !important;
text-transform: inherit !important;
font-weight: 700;
letter-spacing: 0px;
color: #83256a;
margin-bottom: 10px !important;
line-height: 120% !important;
}

h1.start { margin-bottom: 0px; color: #83256a !important; }
h3.start { margin-bottom: 20px; color: #83256a !important; }

p.start { margin-bottom: 20px; color: #83256a !important; }


.servicelinks h3 { margin-top: 25px !important; }


.servicelinks a {
    color: #83256a;
    text-decoration: none;
}

.servicelinks a:focus, a:hover {
    color: #555555;
    text-decoration: none;
}

.servicelinks a:before {
    content: "\f08e";
    font-family: FontAwesome;
	margin-right: 10px;
}

.servicelinks a.servicedownloads:before {
    content: "\f019";
    font-family: FontAwesome;
	margin-right: 10px;	
}



.module h3 { padding: 15px 20px; background-color: #ddd; margin-bottom: 15px !important; }
.module h3 span { color: #000; }


hr {
    max-width: 400px;
    border-color: #999999;
}



.navbar-nav {
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 2px;
}

.img-full {
    min-width: 100%;
}

.brand-before,
.brand-name {
    text-transform: capitalize;
}

.brand-before {
    margin: 15px 0;
}

.brand-name {
    margin: 0;
    font-size: 4em;
}

.tagline-divider {
    margin: 15px auto 3px;
    max-width: 250px;
    border-color: #999999;
}


.intro-text {
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 300;
    letter-spacing: 1px;
}

.img-border {
    float: none;
    margin: 0 auto 0;
    border: #999999 solid 1px;
}

.img-left {
    float: none;
    margin: 0 auto 0;
}


footer	{ position: inherit; margin-top: 30px; text-align: center; padding: 10px; background-color: #83256a; font-size: 11px; }
footer a { color: #ffffff; }
footer a:hover { color: #ffffff; }


@media(min-width:768px) {
	footer { position: fixed; bottom: 0; width: 100%; z-index: 1000; }
}

footer p {
    margin: 0;
    padding: 10px 0;
	font-size: 12px !important;
	color: #ffffff;
}

.navbar {
        border-radius: 0;
		border-bottom: none;
    border: 0px solid transparent;
    }

.navbar .container { 
        background: #ffffff; }
		
.navbar-default {
    background-color: none;
    border-color: none
}

.navbar-brand {
	margin-top: 15px; margin-left: 15px;
		width: 150px;
		height: 50px;
		background: url(../images/design/helfende-haende.png);
		background-size: cover;
		background-repeat: no-repeat;
		}
		
.svg .navbar-brand {
		background: url(../images/design/helfende-haende.svg);
		background-repeat: no-repeat;
}

.navbar-collapse {
	margin-top: 0px;
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 0px solid transparent;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
	background: #e9b400;
}

.navbar-default {
    background-color: #ffffff; 
	}
	
	.navbar-header { height: 80px; }


.nav>li>a {
        padding: 10px 5px 10px 5px;
		letter-spacing: 1px;
		font-size: 1.2em;
    }
	
@media screen and (min-width:768px) {
	
	.navbar-header {
        display: none;
    }

    .top-divider {
        margin-top: 0;
    }

    .img-left {
        float: left;
        margin-right: 25px;
    }
	
	.navbar .container { 
        background: #eeeeee; }

    .navbar-default {
        border: none;
        background: none;
    }

    .nav>li>a {
        padding: 20px 5px 20px 5px;
		letter-spacing: 0px;
		font-size: 0.8em;
    }

    .navbar-nav>li>a {
        line-height: normal;
    }

    .navbar-nav {
        display: table;
        float: none;
        margin: 0 auto;
        table-layout: fixed;
        font-size: 1.0em;
    }
}



@media screen and (min-width:992px) {
	
    .nav>li>a {
        padding: 20px 7px 20px 7px;
		letter-spacing: 0px;
		font-size: 0.9em;
    }
}

@media screen and (min-width:1200px) {
	.nav>li>a {
        padding: 20px 10px 20px 10px;
		letter-spacing: 1px;
		font-size: 1.0em;
    }
}

@media screen and (min-width:1500px) {
    .nav>li>a {
        padding: 20px 15px 20px 15px;
		letter-spacing: 1px;
		font-size: 1.2em;
    }
}







/*  Navigation  */


.navbar-default .navbar-nav>li>a {
    color: #ffffff;
	text-align: center;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #83256a;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #83256a;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #83256a !important;
	font-weight: 700 !important;
    background-color: inherit !important;
}




/* Toggle */

.navbar-toggle {
    position: relative;
    float: right;
	line-height: 15px;
	width: 40px;
	text-align: center;
    margin-top: 20px;
    margin-right: 25px;
    margin-bottom: 0px;
    background-color: #e9b400;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0px;
	color: #ffffff;
	font-size: 24px;
}

.navbar-toggle.active { background-color: none; }
	
	.navbar-toggle:before { 
	content: "\f0c9";
	font-family: FontAwesome;
	font-size: inherit; }
	
	.navbar-toggle:focus:before { 
	content: "\f0c9";
	font-family: FontAwesome;
	font-size: inherit; }
	
	.navbar-toggle:focus:hover:before { 
	content: "\f0c9";
	font-family: FontAwesome;
	font-size: inherit; }
	
	.navbar-toggle.collapsed:before { 
	content: "\f0c9";
	font-family: FontAwesome;
	font-size: inherit; }
	
	.navbar-toggle.collapsed:focus:before { 
	content: "\f0c9";
	font-family: FontAwesome;
	font-size: inherit; }
	
	.navbar-toggle.collapsed:hover:before { 
	content: "\f078";
	font-family: FontAwesome;
	font-size: inherit; }
	
	.navbar-toggle:hover:before { 
	content: "\f078";
	font-family: FontAwesome;
	font-size: inherit; }
	
	.navbar-toggle.active:before { 
	content: "\f00d";
	font-family: FontAwesome;
	font-size: inherit; }

.navbar-toggle:focus {
    outline: 0;
}

.navbar-default .navbar-toggle {
    border-color: inherit;
	border: none !important;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #83256a;
}

.toggle-text { position: absolute; right: 80px; top: 28px; color:#83256a; }



@media screen and (min-width:768px) {
.show-on-hover:hover > ul.dropdown-menu {
    display: block;    
}
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: #83256a;
    background-color: #e9b400 !important;
}

.navbar-nav > li > .dropdown-menu {
	background-color: #ffffff !important; text-align: center; 
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 300;
    line-height: 1.42857143;
    color: #333;
    white-space: normal;
}

@media screen and (min-width:768px) {
	.dropdown-menu > li > a { white-space: nowrap; }
}

	    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #333;
        background-color: #eeeeee
    }
	
	
	.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 90%;
}


span.trenner { display: none; }
span.break { display: block; }

@media screen and (min-width:480px) {
	span.trenner { display: inline-block; }
	span.break { display: none; }
}



.listen { 
    display: block;
    list-style-type: none;
    margin: 0px 0px 20px 0px;
    padding: 0;
}

.listen li {
    display: block;
    padding-left: 0px;
    position: relative;
	margin-left: 30px;
	margin-bottom: 10px
}

.listen li:before {
    color: #e9b400;
    content: "\f00c";
    font-family: FontAwesome;
	margin-right: 10px;
	margin-left: -25px;
}

.startlisten { font-weight: 300; }

@media screen and (min-width:768px) {
.startlisten {  }

}


.warum li:before {
    color: #e9b400;
    content: "\f0e5";
    font-family: FontAwesome;
	margin-right: 10px;
	margin-left: -25px;
}



/* Map */

.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
  margin-bottom: 30px;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Back to top */

.backtotop { color: #83256a; font-size: 40px !important; margin-right: 10px; margin-bottom: 5px; }
.backtotop:hover { color: #333333; }
#topcontrol { z-index: 10000; }


/* Startseite */

.box {
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 10px 25px;
    text-align: center;
    display: block;
    margin-top: 60px;
	margin-bottom: 30px;
}
.box-icon {
    background-color: #e9b400;
    border-radius: 50%;
    display: table;
    height: 80px;
    margin: 0 auto;
    width: 80px;
    margin-top: -61px;
}
.box-icon span {
    color: #fff;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.info h4 {
    font-size: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
	color: #e9b400;
}
.info > p {
    padding-top: 10px;
    text-align: center;
	padding-bottom: 10px;
}
.info > a {
    background-color: #e9b400;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
    transition: all 0.5s ease 0s;
}
.info > a:hover {
    background-color: #83256a;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
    transition: all 0.5s ease 0s;
}





ol li { font-weight: 700; color: #e9b400; }
ol li span { font-weight: 300; color: #000000; }


.embed-responsive { margin-bottom: 30px; }




.downloadbutton { margin: 0px 10px 10px 0px; }

.downloadbutton .fa { margin-right: 10px; }

.btn-default {
    color: #ffffff;
    background-color: #83256a;
    border-color: #83256a;
	border: 0px;
	padding: 10px 15px 10px 15px;
}

.btn-v2 { 
    background-color: #e9b400;
    border-color: #e9b400;
}

.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus,
.btn-default:hover, .open > .dropdown-toggle.btn-default {
	background: #555;
	color: #ffffff;
	border: 0px;
}

.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
    background-image: none
}

.btn-default.disabled, .btn-default.disabled.active, .btn-default.disabled.focus,
.btn-default.disabled:active, .btn-default.disabled:focus, .btn-default.disabled:hover,
.btn-default[disabled], .btn-default[disabled].active, .btn-default[disabled].focus,
.btn-default[disabled]:active, .btn-default[disabled]:focus, .btn-default[disabled]:hover,
fieldset[disabled] .btn-default, fieldset[disabled] .btn-default.active,
fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
    background-color: #fff;
    border-color: #ccc
}



/* Panel */

.panel { margin-bottom: 25px !important; border: 0px solid #ddd !important; padding: 0 !important; border-radius: 0px !important; }

.panel-default { background-color: #eee; }

.panel-default>.panel-heading {
    color: #666666 !important;
    background-color: #ffffff;
	border: none !important;
}

.panel-heading h4 { font-size: 22px !important; margin-top: 3px !important; }

.zurperson { margin-bottom: 0px; }

.panel a { color: #83256a; }

.panel  a:hover { text-decoration: none !important; color: #83256a !important; }
.panel  a:hover h3 { text-decoration: none !important; color: #83256a !important; }

.panel  a:hover span { text-decoration: underline !important; color: #666666 !important; }

.panel-heading img { margin-top: -5px !important; }
.panel-heading span { padding-left: 0px !important; font-size: 12px !important; color: #666666; }

.panel-body { padding: 0px 15px 5px 15px; }

.panel-heading {
    background-image: url('../images/design/pfeil-unten-grau-klein.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.panel.open .panel-heading {
    background-image: url('../images/design/pfeil-oben-grau-klein.png');
}

.panel.open span.mehrlesen { display: none; }
.panel span.mehrlesen { display: block; }

.panel.open span.wenigerlesen { display: block; }
.panel span.wenigerlesen { display: none; }




/* SIDEBAR */

.sticky-sidebar {
	position: absolute;
	right: 25px;
	top: 25px;
	transition: opacity 1s ease-out;
	opacity: 1; 
}

.sticky-sidebar a {
	background: #fff; 
   background: rgba(255,255,255,0.8);
   color: #83256a;
   font-size: 20px;
   line-height: 30px;
   position: relative;
   text-align: center;
   z-index: 1;
	display: block;
	padding: 0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 10px;
	width: 40px;
	height: 30px;
}

.sticky-sidebar a.flag-de { 
	background: url(../images/design/de.png);
	background-size: cover;
	background-repeat: no-repeat; 
}

.svg .sticky-sidebar a.flag-de {
	background: url(../images/design/de.svg);
	background-size: cover;
	background-repeat: no-repeat; 
}

.sticky-sidebar a.flag-cz { 
	background: url(../images/design/cz.png);
	background-size: cover;
	background-repeat: no-repeat; 
}

.svg .sticky-sidebar a.flag-cz {
	background: url(../images/design/cz.svg);
	background-size: cover;
	background-repeat: no-repeat; 
}

.sticky-sidebar a.flag-ru { 
	background: url(../images/design/ru.png);
	background-size: cover;
	background-repeat: no-repeat; 
}

.svg .sticky-sidebar a.flag-ru {
	background: url(../images/design/ru.svg);
	background-size: cover;
	background-repeat: no-repeat; 
}

.sticky-sidebar a.flag-pl { 
	background: url(../images/design/pl.png);
	background-size: cover;
	background-repeat: no-repeat; 
}

.svg .sticky-sidebar a.flag-pl {
	background: url(../images/design/pl.svg);
	background-size: cover;
	background-repeat: no-repeat; 
}


.sticky-sidebar a:hover {
	background: #83256a;
	background: rgba(131,37,106,0.8);
	text-decoration: none;
   	color: #fff !important;
	opacity: 0.5; transition: opacity 1s; 
}


.sticky-sidebar a span {
   right: 40px;
	width: 30px;
   line-height: 30px;
   position: absolute;
   text-align:center;
   min-width: 0px;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   transition: all .4s ease-in-out;
   z-index: -1;
   opacity: 0;
   overflow: hidden;
   display: inline-block;
   color: #fff !important;
}

.sticky-sidebar a:hover span {
   width: 30px;
   right: 50px;
   opacity: 1 !important;
   color: #fff !important;
}

.sticky-sidebar a.active span {
   right: 50px;
   opacity: 1 !important;
}


@media screen and (min-width:768px) {
	
	.sticky-sidebar {
		right: 35px;
		top: 35px;
	}
	
	.sticky-sidebar a {
		width: 53px;
		height: 40px;
   		line-height: 40px;
	}
	
	.sticky-sidebar a span {
	   right: 50px;
		width: 40px;
	   line-height: 40px;
	}
	
	.sticky-sidebar a:hover span {
	   min-width: 40px;
	   right: 60px;
	   opacity: 1 !important;
	   color: #fff !important;
	}
	
	.sticky-sidebar a.active span {
   right: 60px;
   opacity: 1 !important;
}
	
}