@charset "utf-8";
*, ::before, ::after { 
	box-sizing: border-box; 
  	margin: 0;
	padding: 0;
	border: 0;
}
body {
	font: 120%/1.6 'Source Sans 3', sans-serif;
	background-color: #FFF;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Element-/Tag-Selektoren ~~ */
.ccm-page h1, .ccm-page h2, .ccm-page h3, .ccm-page h4, .ccm-page h5, .ccm-page h6 {	
	font-family: 'Instrument Serif', serif;
	font-weight: 400;
	line-height: 1.0;
}
.contentbox h2, .contentbox h3, .contentbox h4, .contentbox h5, .contentbox h6 {	
	color: #00A0E3;	
}
h1 {
	font-size: 200%;
	text-align: center;
	padding: 10px;
	color: #FFF;
	background-color: #00A0E3;
	margin-bottom: 40px;	
}
h2 {
	font-size: 180%;
	margin-bottom: 15px;	
}
h3 {		
	font-size: 140%;
	margin-bottom: 10px;	
}
h4, h5, h6 {	
	font-size: 140%;
	margin-bottom: 7px;
}
p {
	margin-bottom: 25px;	
}
p + h2, p + h3, p + h4, p + h5 {
	padding-top: 10px;	
}
.footer p {
	margin-bottom: 15px;	
}
.contentbox ul, .contentbox ol, .contentbox img {
	margin-bottom: 25px;
}
.contentbox li {
	margin-left: 18px;
}
img { 
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a img { 
	border: none;
}
.contentbox a {
	color: #00A0E3;
}
.contentbox a:hover, .contentbox a:active, .contentbox a:focus {
	color: #000;
}
.footer a {
	color: #FF9;
}
.footer a:hover, .footer a:active, .footer a:focus {
	color: #FFF;
}

/* ~~ Layout ~~ */
.container {
	width: 90%;
	max-width: 1260px;
	margin: 0 auto;
}
.header {
	position: relative;
	display: block;
	padding: 10px 0;
	z-index: 99;
}
.flex {
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;			
}
.header .flex, .footer .flex {
	justify-content: space-between;		
}
.contentbox .flex {
	justify-content: flex-start;		
}
.logo {
	width: 125px;
	
}
.desktop {
	display: none;
}
.slider {
	margin-bottom: 40px;
	z-index: 90;
}
.slider .banner {
	position: relative;
	overflow: hidden;
	height: 50vh;
}
.slider .banner img {
	height: 100%;
  	width: 100%;
	object-fit: cover;
}
.contentbox {
	background-color: #FFF;	
	margin-bottom: 20px;
}
.contentbox .flex .box {
    width: 100%;
}
.footer {
	padding-top: 30px;
	background-color: #00A0E3;
	color: #FFF;
}
.footer .flex .box {
    width: 100%;
	margin-bottom: 25px;
}
/* ~~ Navigation ~~ */
nav {
	text-transform: uppercase;
	display: block;
}
nav ul.nav {
	position: relative;
	list-style: none;	
}
.navigation nav ul.nav li {
	display: block;
	margin-top: 10px;
}
.navigation nav ul.nav li a {
	display: block;
	border: #00A0E3 1px solid;
	color: #00A0E3;
	text-decoration: none;	
	padding: 1px 15px;
}
.navigation nav ul.nav li a:hover, .navigation nav ul.nav li a:active, .navigation nav ul.nav li a:focus {
	border: #000 1px solid;
	color: #000;
	background-color: #ccc;	
}
.navigation nav ul.nav li a.nav-path-selected {
	border: #000 1px solid;
	color: #000;
}
/* ~~ Formular ~~ */
.contentbox .formidable {
	display: block;
	background-color: #bad6e1;
	padding: 30px 30px 15px;
	margin-bottom: 50px;
}
.formidable .form-group {
	margin-bottom: 15px;
}
.formidable input, .formidable  textarea {
    display: block;
    padding: 5px 10px;
	width: 100%;
	max-width: 600px;
	margin: 2px 0 25px;
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 400;
	font-size: 100%;
}
.footer .formidable input, .formidable  textarea {
	margin: 2px 0 10px;
}
::-webkit-input-placeholder {
  font-style: normal !important;
}

::-moz-placeholder {
  font-style: normal !important;
}
::placeholder {
  font-style: normal !important;
}
.formidable input.form-check-input {
	display: inline-block !important;
	width: auto;
	margin: 0 10px 0 0;	
}
.formidable label {
	font-weight: 700;
}
.formidable label.form-check-label {
	font-weight: 400;
}
.contentbox .formidable h1, .contentbox .formidable h2, .contentbox .formidable h3, .contentbox .formidable h4 {
	background-color: none;
	font-size: 200%;
	margin-bottom: 25px;
}
.formidable .alert.alert-danger {
	color:#cc0000;
} 
.formidable .alert.alert-success {
	background-color:#009900;
	color: #FFF;
	font-size: 140%;
	padding: 10px;
	text-align: center;
	margin-bottom: 25px;
} 
textarea {
	height: 150px;
	color: #000;
}
.text-muted {
	display: inline-block;
	color: transparent;
}
.text-muted:before {
	content: "*";
	color: #000;
	font-weight: 400;
}
.help-block.small.text-muted {
	display: block;
	color: #000;
	font-size: 90%;
	margin: -25px 0 30px;
}
.help-block.small.text-muted:before {
	content: "";
}
.footer .text-muted:before {
	color: #FFF !important;
}
.formidable .btn.btn-primary {
	color: #FFF;
	background-color: #00A0E3;
    text-decoration: none;
    text-align: center;
    display: block;
	padding: 10px;
	margin-top: 20px;
	border: none;
	font-size: 100%;
	cursor: pointer;
	font-weight: bold;
}
.formidable .btn.btn-primary:hover, .formidable .btn.btn-primary:active, .formidable .btn.btn-primary:focus {
	background-color: #000;
}
.footer .formidable .btn.btn-primary {
	color: #00A0E3;
	background-color: #FFF;
}
.formidable .btn.btn-primary:hover, .formidable .btn.btn-primary:active, .formidable .btn.btn-primary:focus {
	color: #FFF;
	background-color: #000;
}

/* ~~ Featured Link ~~ */
.ccm-block-feature-link a.btn {
	display: inline-flex;
	align-items: center;
  	justify-content: center;	
	color: #FFF;
	background-color: #00A0E3;
    text-decoration: none;
    text-align: center;
	padding: 10px 20px;
	margin: 20px 0;
	border: none;
	font-size: 100%;
	cursor: pointer;
	font-weight: bold;
}
.ccm-block-feature-link a.btn:hover, 
.ccm-block-feature-link a.btn:active, 
.ccm-block-feature-link a.btn:focus {
	background-color: #000;
}
.fas {
	font-size: 150%;
	line-height: 0.5;
	padding: 5px 20px 0 0;
}

/* ~~ Seitenliste ~~ */
.ccm-block-page-list-page-entry a {
	display: block;
	border: #00A0E3 1px solid;
	padding: 10px 25px;
	text-decoration: none;
}
.ccm-block-page-list-page-entry a:hover, .ccm-block-page-list-page-entry a:active, .ccm-block-page-list-page-entry a:focus {
	border: #000 1px solid;
	background-color: #ccc;
}
.ccm-block-page-list-page-entry a .ccm-block-page-list-date, .ccm-block-page-list-page-entry a .ccm-block-page-list-description {
	color: #000;
}
.ccm-block-page-list-title {
	font-size: 120%;
}
.rechts .ccm-block-page-list-title {
	font-size: 100%;
}
ul.pagination {
	list-style: none;
	text-transform: uppercase;
}
ul.pagination li.page-item {
	display: none;
	margin: 0 15px 0 0;
}
ul.pagination li.page-item.prev, ul.pagination li.page-item.next {
	display: inline-block;
}
ul.pagination a.page-link {
	border: #00A0E3 1px solid;
	color: #00A0E3;
	text-decoration: none;	
	padding: 1px 15px;
}
ul.pagination a.page-link:hover, ul.pagination a.page-link:active, ul.pagination a.page-link:focus {
	border: #000 1px solid;
	color: #000;	
	padding: 1px 15px;
	background-color: #ccc;		
}
ul.pagination span.page-link {
	border: #000 1px solid;
	color: #000;	
	padding: 1px 15px;
}
/* ~~ Eventdetails ~~ */
.datum {
	font-weight: bold;
	padding: 5px 0;
	border-bottom: #999 1px solid;
}
.table {
	margin-bottom: 35px;
}
.table .cell p {
	margin: 0;
}
.table .row {
	padding: 5px 0;
	border-bottom: #999 1px solid;
}
/* ~~ Vorstand ~~ */
.flex.vorstand {
	margin: 0 -20px 30px;
}
.flex.vorstand .item {
	margin: 0 20px;
}
.flex.vorstand .item .bild, .flex.vorstand .item .text {
	width: 50%;
}
.flex.vorstand .item .text {
	padding-left: 20px;
}

@media (min-width: 600px) {
.desktop {
	display: block;
}
.mobile {
	display: none;
}
.logo {
	width: 250px;
}
/* ~~ Vorstand ~~ */
.flex.vorstand .item {
	width: calc(50% - 40px);
}
.flex.vorstand .item.flex {
	display: block;
}	
.flex.vorstand .item .bild {
	width: 100%;
}	
.flex.vorstand .bild img {
	margin-bottom: 15px;
}	
.flex.vorstand .item .text {
	width: 100%;
	text-align: center;
	padding: 0;
}		
}
@media (min-width: 800px) {
.footer .flex .box {
    width: 45%;
}
h1 {
	font-size: 240%;
}	
.slider .banner {
	margin-top: -100px;
}
	/* ~~ Eventdetails ~~ */
.datum {
	padding: 0 0 10px;
	border-bottom: none;
}	
.table {
	display: table;		
	}
.table .row {
	display: table-row;
}
.table .cell {
	display: table-cell;
	padding-bottom: 5px;
}
.table .cell.zwei {
	padding-left: 15px;
}	
/* ~~ Vorstand ~~ */	
.flex.vorstand .item {
	width: calc(33.333% - 40px);
}	
}
@media (min-width: 1024px) {
.logo {
	width: 300px;	
}
.navigation {
	padding-top: 25px;
}	
.navigation nav ul.nav li {
	display: inline-block;
	padding-left: 15px;
}
.flex .links {
    width: 65%;
	margin-right: 10%;
}
.flex .rechts {
    width: 25%;
}
}