/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.3;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

a {outline : none;}
a img {outline : none;}
/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}



/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
	font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif;
	letter-spacing: 0.2px;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1em;
}

a {
	text-decoration: none;
	color: #000;
}
p.bodytext > a {
	text-decoration: underline;
}
ul {
	padding: 0px;
	margin: 0;
	margin-bottom: 10px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

#page {}

.pageWrapper {
	margin: 0 auto;
	width: 996px;
        max-width: 95vw;
/*	position: relative;*/
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

header.pageHeader {
	background-color: #282829;
	height: 42px;
	color: #fff;
	z-index: 1000;
	position: relative;
}

header.pageHeader a {
	color: #fff;
	font-size: 12px;
	line-height: 42px;
}
header .fixer { /* wegen fixer 20.11.2013 */
	background-color: #282829;
	
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
/* anchor tag mit margin versheen, damit der click auf einen anchor die hoehe des Headers rausrechnet */
a.anchorTag {
	padding-top: 42px;
	margin-top: -42px;
	display: inline-block;
}
.headerWrapper {
	margin: 0 auto;
        max-width: 996px;
}

#headerLogo {
	width: 34px;
	float: left;
	margin-left: 12px;
}
#headerLogo img {
	margin-top: 13px;
	display: block;
}
#headerMenu .logoportal {
	float: left;
}
#headerMenu {
	width: 930px;
	float: left;
}	
#headerMenu	div.portals {
	float: left;
	margin-left: 15px;
}		
#headerMenu	div.portals div {
	float: left;
	margin-right: 15px;
}
#headerMenu	div.claim {
	float: left;
	margin-top: 6px;
	margin-left: 5px;
}		
#headerMenu div.additionals {
	float: right;
}
#headerMenu div.additionals div {
	float: left;
	margin-left: 15px;
}
#headerMenu a.menuKlapper {
	display: none;

	background-position: 0 0;
	background-repeat: no-repeat;
	width: 58px;
	height: 42px;
	display: none;
	float: left;
	margin-left: 80px;
	cursor: pointer;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.mobilePortals {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 40px 0 0 0;
	width: 100%;
	font-size: 12px;
	padding:10px 10px 10px 10px;
	z-index: 1000;
}
.mobilePortals a {
	padding: 4px 0;
	display: block;
	width: 100%;
	float: left;
	min-height: 26px;
	text-align: center;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.menuMobile {
	display: none;

	background-position: center center;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
	float: left;
	margin: 10px 10px 0;
	cursor: pointer;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.navCol {
/*	float: left;*/
}

#mainNav {
	width: 136px;
	font-size: 13px;
	margin-top: 0px;
	line-height: 1em;
}
#mainNav .fixerXX { /* wegen fixer 20.11.2013 */
	position: fixed;
	width: 136px;
}

#mainNav a {
}
#mainNav ul {
	margin: 0;
}
#mainNav ul li {
	margin-left: 1px;
}
#mainNav ul li.active {
	list-style-type: square;
}
#mainNav li {
	padding-top: 5px;
	padding-bottom: 5px;
}
#mainNav ul#mainMenu li.active>a {
}
/* +++++++ */
#mainNav ul#mainMenu>li ul.submenu {
	margin-left: 13px;
}
#mainNav ul#mainMenu>li ul.submenu>li>a {
}
#mainNav ul#mainMenu>li ul.submenu>li.active>a {
}
/* +++++++ */
#mainNav ul#mainMenu>li ul.submenu>li ul.submenu2 {
}
#mainNav ul#mainMenu>li ul.submenu>li ul.submenu2 li {
}
#mainNav ul#mainMenu>li ul.submenu>li ul.submenu2 li a {
}
#mainNav ul#mainMenu>li ul.submenu>li ul.submenu2 li.active a {
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.menuMobile {
    background-image: url("../../webcontent/img/menuMobile.png");
}
#mobileMainNav {
	display: none;
	/*background-color: white;
	/*position: absolute;
	border: 1px solid #dddddd;
	box-shadow: 10px 10px 10px #444444;*/
	z-index: 1000;
	padding-left: 20px;
	margin-bottom: 30px;
	width: 80%;
}

#mobileMainNav ul#mobileMenu {
	margin: 0 0 30px 0;
	font-size: 16px;
}
#mobileMainNav ul#mobileMenu li {
	padding: 5px;
	text-align: left;
}
#mobileMainNav ul#mobileMenu li.active {
	list-style-type: square;
}
#mobileMainNav ul#mobileMenu li.active a {
	background-position: left 10px;
	background-repeat: no-repeat;
}
#mobileMainNav ul#mobileMenu ul.submenu {
	margin-top: 5px;
	margin-left: 13px;
	margin-bottom: 0;
	font-size: 14px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.circleContainer {
	position: relative;
	margin-top: 40px;
}

.circleContainer .circle.big {
	width: 120px;
	min-height: 85px;
	border-radius: 120px;
	text-align: center;
	padding-top: 35px;
        margin-bottom: 60px;
}
.circleContainer .circle.small {
	position: absolute;
	top: 90px;
	left: -10px;
	
	width: 80px;
	height: 80px;
	border-radius: 80px;
	text-align: center;
	line-height: 80px;
}

.circleContainer .circle.additional {
/*	position: absolute;
	top: 90px;
	left: -10px;*/
	display: none;
	width: 80px;
	height: 80px;
	border-radius: 80px;
	text-align: center;
	line-height: 80px;        
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
#containerContentArea {
    display: flex;
    margin-bottom: 20px;
}
#content {
	width: 832px;
	/*float: left;*/
	/*margin-left: 136px;*/ /* wegen fixer 20.11.2013 */
}
@media screen and (max-width: 480px) {
    #content {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        position: relative;
    }
    #content > * {
        position: relative;
        left: 50%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: translateX(-50%);
    }
}

#page.intropageKPH #content {
	width: 968px;
    margin-left: 0;
}
.left {
	float: left;	
}
.right {
	float: right;	
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

#contentColLeft {
	margin-bottom: 20px;
}
#page.two-col-1-3.homeKPH #contentColLeft {
}
#contentColRight {
}
#page div.contentCol {
	margin-right: 20px;
}
#page.two-col div.contentCol {
	width: 396px;
	/*display: inline-block;*/
	float: left;
	vertical-align: top;
}
#page.two-col-3-1 div.contentCol.colLeft {
	width: 604px;
	/*display: inline-block;*/
	float: left;
	vertical-align: top;
}
#page.two-col-3-1 div.contentCol.colRight {
	width: 188px;
	/*display: inline-block;*/
	float: left;
	vertical-align: top;
}
#page.two-col-1-3 div.contentCol.colLeft {
	width: 188px;
	/*display: inline-block;*/
	float: left;
	vertical-align: top;
}
#page.two-col-1-3 div.contentCol.colRight {
	width: 604px;
	/*display: inline-block;*/
	float: left;
	vertical-align: top;
}
#page.two-col-4-0 div.contentCol.colLeft {
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
#page.three-col-1-2-1 div.contentCol.colLeft {
	width: 188px;
	float: left;
}
#page.three-col-1-2-1 div.contentCol.colMiddle {
	width: 396px;
	float: left;
}
#page.three-col-1-2-1 div.contentCol.colRight {
	width: 188px;
	float: left;
}

#contentColLeft > img {
	width: 100%;
	height: auto;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.csc-default .teaser {
}

.padding {
	padding: 10px;
}

.teaser h1 {
	font-size: 1.3em;
}
.teaser h2 {
	font-size: 1.1em;
}

.teaserTitle .padding {
	padding: 7px 10px 0;
}

.typoContentElement.type-header,
.typoContentElement.type-text,
.typoContentElement.type-textpic,
.typoContentElement.type-bullets,
.typoContentElement.type-table,
.typoContentElement.type-uploads,
.typoContentElement.type-image,
.typoContentElement.type-list,
.typoContentElement.type-gridelements_pi1 {
	background-color: white;
	padding: 10px;
}
.typoContentElement.layout-1001 {
    font-size: 0.75rem;
}
.typoContentElement.type-media {
    padding: 0;
}
.typoContentElement.type-media .video-js-box,
.typoContentElement.type-media .video-js-box video {
    width: 100% !important;
    height: auto !important;
}

#page.two-col-1-3.homeKPH .typoContentElement.type-image {
	padding: 0;
	height: 100%;
}
#page.two-col-1-3.homeKPH .typoContentElement.type-image img {
	width: 100%;
}
#page.two-col-1-3.homeKPH .typoContentElement.type-image .csc-textpic-imagewrap .csc-textpic-image {
    margin-bottom: 0px;
	width: 100%;
	overflow: hidden;
}

.typoContentElement.type-image .csc-textpic-center-outer,
.typoContentElement.type-image .csc-textpic-center-inner{
	float: none;
    position: inherit;
    right: 0%;
}
.typoContentElement.type-image .csc-textpic-imagerow,
.typoContentElement.type-image .csc-textpic-imagerow .csc-textpic-imagecolumn {
	float: left;
	margin: 0;
	margin-right: 4px;
}

.typoContentElement.type-kulturpalast_imagerow{
	background-color: white;
	padding: 0 10px;
}
.typoContentElement ul {
	list-style-type: square;
	list-style-position: outside;
	padding-left: 16px;
}
.typoContentElement object {
	width: 100%;
}
.typoContentElement embed {
    width: 396px;
    height: 297px;
}
@media screen and (max-width: 480px) {
    .typoContentElement embed {
        width: 188px;
        height: 141px;
    }
}


.two-col-3-1 #contentColLeft .typoContentElement,
.two-col-4-0 #contentColLeft .typoContentElement {
	padding: 0 20px;
}
.courseplan .contentCol .typoContentElement {
	padding:0;
}
#contentColLeft .typoContentElement.type-dce_dceuid6 {
    padding: 0;
}
#contentColLeft .typoContentElement.type-dce_buttonline {
    padding-left: 0;
    padding-right: 0;
}
.typoContentElement.type-dce_buttonline {
    display: block;
    text-align: center;
}
.typoContentElement.type-dce_buttonline .button-line {
    display: inline-block;
    background-color: #c5b015;
}
.typoContentElement.type-dce_buttonline .button-line.fullwidth {
    display: block;
}
.typoContentElement.type-dce_buttonline a {
    padding: 10px 15px 10px 15px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
}
.typoContentElement.type-dce_buttonline .fullwidth a {
    display: block;
}
.typoContentElement.type-dce_buttonline .text-left a {
    text-align: left;
}
.typoContentElement.type-dce_buttonline .text-right a {
    text-align: right;
}


DIV.csc-textpic-intext-right .csc-textpic-imagewrap, DIV.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
	margin-left: 0;
}
FIGCAPTION.csc-textpic-caption {
	font-size: 80%;
	margin-bottom: 10px;
}

.typoContentElement .moreLink {
	display: none;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
div.contentCol {
	letter-spacing: 0.4px;
}

div.contentCol div.teaser.image div.teaserTitle h2 {
	color: white;
	font-size: 1.1em;
	margin-bottom: 7px;
}
div.contentCol div.teaser.image div.teaserTitle p.bodytext {
	margin-bottom: 7px;
}

div.contentCol div.teaser.linked {
	cursor: pointer;
}
div.contentCol div.teaser {
	height: 188px;
	position: relative;
} 


div.contentCol div.teaser.single {
	width: 188px;
}
div.contentCol div.teaser.single_high {
	width: 188px;
	height: 396px;
}
div.contentCol div.teaser.single.left {
	margin-right: 20px;
}

div.contentCol div.teaser.double {
	width: 100%;
}
div.contentCol div.teaser.quad {
	width: 100%;
	height: 396px;
}
div.contentCol div.teaser.single_two_images {
	background-color: transparent;
}
div.contentCol div.teaser.image.single_two_images img {
	height: 84px;
	width: 188px;
}
div.contentCol div.teaser.image.single_two_images img:first-child {
	margin-bottom: 20px;
}
div.contentCol div.teaser.triple {
	width: 100%;
	height: auto;
}

div.contentCol div.teaser.image {
	border: none;
}
div.contentCol div.teaser.image.responsive {
    height: auto;
}
div.contentCol div.teaser.image.responsive .cycleImage {
    width: 100%;
}
div.contentCol div.teaser.image img {
	width: 100%;
	height: 100%;
}
div.typoContentElement.type-textpic div.csc-textpic-imagewrap img {
	max-width: 250px;
	max-height: 250px;
	height: auto;
}
div.contentCol div.teaser.image .cycle-slideshow {
	position: relative;
	height: 100%;
}
div.contentCol div.teaser.image .cycle-slideshow .cycle-prev,
div.contentCol div.teaser.image .cycle-slideshow .cycle-next{
	position: absolute;
	z-index: 200;
	top: 50%;
	background: white;
	cursor: pointer;
	width: 32px;
	height: 35px;
	opacity: 0.7;
	margin-top: -17px;
}
div.contentCol div.teaser.image .cycle-slideshow .cycle-prev:hover,
div.contentCol div.teaser.image .cycle-slideshow .cycle-next:hover {
	opacity: 1;
}
div.contentCol div.teaser.image .cycle-slideshow .cycle-prev{
	left: 0;
	background-image: url(../img/arrow_left_small.png);
}
div.contentCol div.teaser.image .cycle-slideshow .cycle-next{
	right: 0;
	background-image: url(../img/arrow_right_small.png);
}
div.contentCol div.teaser.image .cycle-slideshow .cycle-pager {
	position: absolute;
	bottom: 5px;
	color: transparent;
	text-align: center;
	width: 100%;
	z-index: 200;
}
div.contentCol div.teaser.image .cycle-slideshow .cycle-pager span {
	display: inline-block;
	height: 12px;
	width: 12px;
	/*border: 1px solid #dddddd;*/
	background-color: black;
	border-radius: 6px;
	margin-left: 2px;
	margin-right: 2px;
	opacity: 0.3;
}
div.contentCol div.teaser.image .cycle-slideshow .cycle-pager .cycle-pager-active  {
	/*background-color: black;*/
	opacity: 0.9;
}
div.contentCol div.teaser div.teaserTitle {
	width: 100%;
	padding: 0;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	position: absolute;
	bottom: 0;
        z-index: 200;
}
div.contentCol div.teaser .cycle-slideshow .cycleImage {
    min-height: 100%;
    min-width: 100%;
    
}
div.contentCol div.teaser .cycle-slideshow img {
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
}
div.contentCol div.teaser .cycle-slideshow div.teaserTitle {
    z-index: 300;
}
div.contentCol div.teaser div.teaserTitle h2 {
    color: white;
}
div.contentCol div.teaser div.teaserTitle a {
	display: block;
	color: #fff;
	line-height: 24px;
}

div.contentCol div.teaser div.teaserTitle a span {
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 30px;
	line-height: 30px;
}

div.contentCol div.teaser div.teaserTitle.oneLine {
	height: 30px;
	padding: 0;
}
div.contentCol div.teaser div.teaserTitle.oneLine a {
	line-height: 30px;
	
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}


div.contentCol div.teaser.video img {
    height: 100%;
    width: 100%;
}


div.contentCol div.typoContentElement {
	margin-bottom: 20px;
}
#page.two-col-3-1 div.contentCol.colLeft div.typoContentElement,
#page.two-col-4-0 div.contentCol.colLeft div.typoContentElement
{
	padding-bottom: 10px;
	margin-bottom: 0;
}
div.contentCol div.csc-default h1,
div.contentCol div.csc-default h2,
div.contentCol div.csc-default h3,
div.contentCol div.csc-default p {
	margin: 0px;
	margin-bottom: 10px;
}
#page.two-col-3-1 div.contentCol.colRight div.csc-default .csc-header {
	padding-top : 0px;
}
div.contentCol.colLeft div.csc-default .csc-header {
	padding-top : 20px;
	position: relative;
}
#page.two-col-3-1 div.contentCol.colLeft div.csc-default h1,
#page.two-col-3-1 div.contentCol.colLeft div.csc-default h2,
#page.two-col-3-1 div.contentCol.colLeft div.csc-default h3,
#page.two-col-3-1 div.contentCol.colLeft div.csc-default p {
	margin: 0px;
	margin-bottom: 10px;
}

div.contentCol h2 .backto {
	float: right;
	font-size: 12px;
	line-height: 34px;
}


div.two-col-1-3.homeKPH .teaser,
div.two-col-1-3.homeKPH .contentCol .typoContentElement {
	 box-shadow: 4px 4px 4px #000000;
}

div.homeFullContent {
	margin-bottom: 20px;
}


div.eightTeaserRow {
	width: auto;
	margin-bottom: 0;
	margin-left: -20px;
	margin-right: -40px;
	padding-left: 20px;
	height: auto;
	background-color: transparent !important;
}
div.fourTeaserRow {
	width: auto;
	margin-bottom: 0;
	margin-left: -20px;
	margin-right: -40px;
	padding-left: 20px;
	height: auto;
	background-color: transparent !important;
}

.two-col-3-1 #contentColLeft .typoContentElement.type-dce_dceuid7,
.two-col-4-0 #contentColLeft .typoContentElement.type-dce_dceuid7 {
	padding-top: 20px;
}
.two-col-3-1 #contentColLeft .typoContentElement.type-dce_dceuid7:first-child ,
.two-col-4-0 #contentColLeft .typoContentElement.type-dce_dceuid7:first-child  {
	padding-top: 0px;
}
.typoContentElement.type-dce_dceuid10 {
    background-color: transparent !important;
    margin-bottom: 0 !important;
}

.typoContentElement .introContent .imageField {
    position: relative;
    width: 100%;
}
.typoContentElement .introContent  .imageField img {
    width: 100%;
    height: auto;
    box-shadow: 4px 4px 4px #000000;
}
.typoContentElement .introContent .title {
    position: absolute;
    top: 0;
    background-color: white;
    width: 100%;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.typoContentElement .introContent .title h1 {
    font-size: 3rem;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}
.typoContentElement .introContent .subtext {
    font-size: 2.8rem;
    background-color: rgba(255,255,255,0.75);
    font-weight: bold;
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.typoContentElement .introContent .layertext {
    font-size: 1.2rem;
    /*background-color: #37abb8;*/
    background-color: rgba(255,255,255,0.75);
    font-weight: bold;
    
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
.typoContentElement .introContent .layertext p {
    padding: 0;
    margin: 0;
}
.typoContentElement .introContent .overlayText {
    position: absolute;
    bottom: 20%;
    right: 0;
    width: 50%;
}
.typoContentElement .introContent .teaserList {
    margin-top: 20px;
    margin-bottom: 20px;
}
.typoContentElement .introContent .teaserList .teaser {
    width: 25%;
    float: left;
}
.typoContentElement .introContent .teaserList .teaser img {
    width: 100%;
    height: auto;
}
.typoContentElement .introContent .teaserList .teaser.left {
    box-shadow: 4px 4px 4px #000000;
}
.typoContentElement .introContent .teaserList .teaser.center {
    width: 40%;
    margin-left: 5%;
    margin-right: 5%;
}
.typoContentElement .introContent .teaserList .teaser.right {
    box-shadow: 4px 4px 4px #000000;
    float: right;
}
/* ### two-col ###*/

.two-col div.eightTeaserRow {
	width: auto;
	padding: 0px 20px 0px 20px;
	margin-left: -20px;
	margin-right: -40px;
	margin-bottom: -9px;
}
.two-col div.eightTeaserRow .teaserBlock {
    float: left;
    margin-bottom: 10px;
    margin-right: 20px;
    width: 188px;
}

/* ### two-col-3-1 ###*/
.two-col-3-1 .type-dce_dceuid7 {
	background-color: transparent !important;
	padding: 0px 0px 20px 0px;
}

.two-col-3-1 div.eightTeaserRow {
	width: auto;
	padding: 0px;
	margin-left: -20px;
	margin-right: -40px;
}

.two-col-3-1 div.eightTeaserRow .teaserBlock {
    float: left;
    margin-bottom: 10px;
    margin-right: 20px;
    width: 188px;
}


/* ### two-col-4-0 ###*/

.two-col-4-0 .type-dce_dceuid7 {
	background-color: transparent !important;
	padding: 20px 0px 20px 20px !important;
}

.two-col-4-0 div.eightTeaserRow {
	width: auto;
	padding: 0px;
}

.two-col-4-0 div.eightTeaserRow  .teaserBlock {
    float: left;
    margin-bottom: 10px;
	margin-right: 17px;
	width: 193px;
}

div.contentCol div.teaser.eightTeaserRow {
	height: auto;
}
div.homeFullContent div.eightTeaserRow {
	padding-top: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	box-shadow: none;
}
div.two-col-1-3.homeKPH .teaser.eightTeaserRow {
	box-shadow: none;
        display: flex;
        flex-wrap: wrap;
}
div.eightTeaserRow .teaserBlock {
	margin-bottom: 10px;
	margin-right: 10px;
	display: flex;
        justify-content: space-between;
	width: 188px;
}
div.eightTeaserRow .teaserBlock:last-child {
	margin-right: 0;
}
div.homeFullContent div.eightTeaserRow .teaserBlock {
	margin-right: 20px;
}
@media screen and (max-width: 1023px) {
    div.homeFullContent div.eightTeaserRow .teaserBlock:nth-child(2) {    
        margin-right: 0;
    }
}
@media screen and (max-width: 479px) {
    div.homeFullContent {
        width: 188px;
    }
    div.two-col-1-3.homeKPH .teaser.eightTeaserRow {
        flex-direction: column;
    }
    div.homeFullContent div.eightTeaserRow .teaserBlock {    
        margin-right: 0;
    }
}
div.eightTeaserRow .teaserBlock:last-child,
div.homeFullContent div.eightTeaserRow .teaserBlock:last-child{
	margin-right: 0;
}
div.eightTeaserRow .teaserBlock .teaser {
	background-color: white;
	width: 88px;
	height: 88px;
        overflow:unset;
}
div.eightTeaserRow .teaserBlock .teaser img {
	width: 100%;
	height: 100%;
}
div.eightTeaserRow .teaserBlock .teaser .padding {
	padding: 3px;
}
div.eightTeaserRow .teaserBlock .teaser .padding h2 {
	font-size: 1.0em;
	padding: 0;
	margin: 0;
}
div.eightTeaserRow .teaserBlock .teaser .padding p {
	font-size: 0.8em;
	line-height: 1em;
	padding: 0;
	margin: 0;
}


.two-col-4-0 div.fourTeaserRow {
	width: auto;
	padding: 0px;
}

.two-col-4-0 div.fourTeaserRow  .teaserBlock {
    float: left;
    margin-bottom: 0;
	margin-right: 17px;
	width: 396px;
}
div.contentCol div.teaser.eightTeaserRow {
	height: auto;
}
div.contentCol div.teaser.fourTeaserRow {
	height: auto;
}
div.homeFullContent div.fourTeaserRow {
	padding-top: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	box-shadow: none;
}
div.two-col-1-3.homeKPH .teaser.fourTeaserRow {
	box-shadow: none;
}
div.fourTeaserRow .teaserBlock {
	margin-bottom: 10px;
	margin-right: 10px;
	float: left;
	width: 396px;
}
div.fourTeaserRow .teaserBlock:last-child {
	margin-right: 0;
}
div.homeFullContent div.fourTeaserRow .teaserBlock {
	margin-right: 20px;
}
div.fourTeaserRow .teaserBlock:last-child,
div.homeFullContent div.fourTeaserRow .teaserBlock:last-child{
	margin-right: 0;
}
div.fourTeaserRow .teaserBlock .teaser {
	background-color: white;
	width: 188px;
	height: 188px;
        margin-bottom: 20px;
}
div.fourTeaserRow .teaserBlock .teaser img {
	width: 100%;
	height: 100%;
}
div.fourTeaserRow .teaserBlock .teaser .padding {
	padding: 3px;
}
div.fourTeaserRow .teaserBlock .teaser .padding h2 {
	font-size: 1.0em;
	padding: 0;
	margin: 0;
}
div.fourTeaserRow .teaserBlock .teaser .padding p {
	font-size: 0.8em;
	line-height: 1em;
	padding: 0;
	margin: 0;
}

/* teaser kulturpalast */
div.contentCol div.csc-default.kulturpalast div.teaser {
    background-color: #FFFFFF;
    color: black;
}
div.contentCol .kulturpalast h1,
div.contentCol .kulturpalast h2 {
	color: black;
}
div.contentCol .kulturpalast div.teaser.image h1,
div.contentCol .kulturpalast div.teaser.image h2,
div.contentCol .kulturpalast.kulturpalast-spezial div.teaser h1,
div.contentCol .kulturpalast.kulturpalast-spezial div.teaser h2,
div.contentCol div.teaser.kulturpalast h1,
div.contentCol div.teaser.kulturpalast h2
div.contentCol div.teaser.kulturpalast-spezial h1,
div.contentCol div.teaser.kulturpalast-spezial h2 {
	color: white;
}
div.contentCol div.csc-default.kulturpalast.kulturpalast-spezial div.teaser,
div.contentCol div.csc-default div.teaser.kulturpalast-spezial{
	background-color: #c1b13a;
	color: #fff;
}
div.contentCol div.csc-default.kulturpalast.kulturpalast-spezial div.teaser.text a {
	color: #fff;
}
div.contentCol .kulturpalast-spezial h2{
	color: #fff;
}
div.contentCol div.csc-default.kulturpalast.kulturpalast-spezial div.teaser.image div.teaserTitle,
div.contentCol div.csc-default div.teaser.kulturpalast-spezial.image div.teaserTitle{
	background-color: #c1b13a;
	color: #fff;
}

/* teaser hiphop academy */

div.contentCol div.csc-default.hiphopacademy div.teaser {
    background-color: #FFFFFF;
    color: black;
}
#page div.contentCol .hiphopacademy h1,
#page div.contentCol .hiphopacademy h2 {
	color: #009fe3;
}
#page div.contentCol div.hiphopacademy.hiphopacademy-standard-spezial h2,
#page div.contentCol div.hiphopacademy.hiphopacademy-ensemble-spezial h1 {
	color: white;
}
#page div.contentCol div.hiphopacademy.hiphopacademy-ensemble h1 {
	color: black;
}
div.contentCol div.hiphopacademy-standard,
div.contentCol div.csc-default.hiphopacademy-standard div.teaser,
div.contentCol div.csc-default.hiphopacademy-standard {
	background-color: white;
	color: black;
}
div.contentCol div.hiphopacademy-standard-spezial,
div.contentCol div.teaser.hiphopacademy-standard-spezial,
div.contentCol div.csc-default.hiphopacademy-standard-spezial div.teaser,
div.contentCol div.csc-default.hiphopacademy-standard-spezial {
	background-color: rgba(0,0,0,0.95);
	color: #fff;
}
div.contentCol div.hiphopacademy-standard-spezial a {
	color: #fff;
}
div.contentCol .hiphopacademy-standard-spezial h1 {
	color: #009fe3;
}
div.contentCol div.hiphopacademy-standard-spezial div.teaser.image div.teaserTitle {
	background-color: black;
	color: #fff;
}

div.contentCol div.csc-default.hiphopacademy-ensemble div.teaser,
div.contentCol div.teaser.hiphopacademy-ensemble {
	background-color: white;
	color: black;
}
div.contentCol div.hiphopacademy-ensemble div.teaser.text a,
div.contentCol div.teaser.hiphopacademy-ensemble.text a{
	color: black;
}
#page div.contentCol div.hiphopacademy-ensemble div.teaser h1,
#page div.contentCol div.teaser.hiphopacademy-ensemble h1,
#page div.contentCol div.hiphopacademy-ensemble h2 {
	color: #e6007e;
}

div.contentCol div.csc-default.hiphopacademy-ensemble-spezial div.teaser,
div.contentCol div.csc-default div.teaser.hiphopacademy-ensemble-spezial,
div.contentCol div.csc-default.hiphopacademy-ensemble-spezial,
div.contentCol div.hiphopacademy-ensemble-spezial div.teaser.image div.teaserTitle {
	background-color: rgba(0,0,0,0.95);
	color: #fff;
}
div.contentCol div.hiphopacademy-ensemble-spezial div.teaser.text a {
	color: #fff;
}
#page div.contentCol div.csc-default.hiphopacademy-ensemble-spezial .teaser h1,
#page div.contentCol div.csc-default .teaser.hiphopacademy-ensemble-spezial h1,
#page div.contentCol div.csc-default.hiphopacademy-ensemble-spezial h2 {
	color: #e6007e;
}


/* teaser klangstrolche */
div.typoContentElement.type-kulturpalast_teasersingle.csc-default.klangstrolche, 
div.typoContentElement.type-kulturpalast_teaserdouble.csc-default.klangstrolche, 
div.typoContentElement.type-kulturpalast_teaserquad.csc-default.klangstrolche, 
div.typoContentElement.csc-default.klangstrolche .teaser, 
div.typoContentElement.csc-default .teaser.klangstrolche, 
div.contentCol .csc-default.klangstrolche div.teaser.image img,
div.contentCol .csc-default div.teaser.klangstrolche.image img{
    border-radius: 10px;
}


div.contentCol div.csc-default.klangstrolche div.teaser.image {
	background-color: transparent;
}
div.contentCol div.csc-default.klangstrolche div.teaser {
    background-color: #FFFFFF;
    color: black;
}
div.contentCol div.csc-default.klangstrolche h1,
div.contentCol div.csc-default.klangstrolche h2,
div.contentCol div.teaser.klangstrolche h1,
div.contentCol div.teaser.klangstrolche h2{
	color: #ec7405;
}

div.contentCol div.csc-default.klangstrolche.klangstrolche-standard-blau h1,
div.contentCol div.csc-default.klangstrolche.klangstrolche-standard-blau h2,
div.contentCol div.teaser.klangstrolche.klangstrolche-standard-blau h1,
div.contentCol div.teaser.klangstrolche.klangstrolche-standard-blau h2{
	color: #37beea;
}
div.contentCol div.csc-default.klangstrolche.klangstrolche-standard-lila h1,
div.contentCol div.csc-default.klangstrolche.klangstrolche-standard-lila h2,
div.contentCol div.teaser.klangstrolche.klangstrolche-standard-lila h1,
div.contentCol div.teaser.klangstrolche.klangstrolche-standard-lila h2{
	color: #c6168d;
}



div.contentCol div.csc-default.klangstrolche div.teaser.image div.teaserTitle,
div.contentCol div.csc-default div.teaser.klangstrolche.image div.teaserTitle {
	background-color: #ec7405;
	color: #fff;
}
div.contentCol div.csc-default div.teaser.klangstrolche.image div.teaserTitle h1,
div.contentCol div.csc-default div.teaser.klangstrolche.image div.teaserTitle h2{
	color: #fff;
}

div.contentCol div.klangstrolche.klangstrolche-standard-rot div.teaser,
div.contentCol div.teaser.klangstrolche-standard-rot {
	background-color: white;
	color: black;
}
div.contentCol div.klangstrolche.klangstrolche-standard-rot div.teaser.text a,
div.contentCol div.teaser.klangstrolche-standard-rot.text a {
	color: black;
}
div.contentCol div.klangstrolche-standard-rot h1,
div.contentCol div.teaser.klangstrolche-standard-rot h1 {
	color: #e2001a;
}
div.contentCol div.klangstrolche-standard-rot h2 {
	color: #ec7405;
}
div.contentCol div.klangstrolche.klangstrolche-standard-rot div.teaser.image div.teaserTitle,
div.contentCol div.csc-default div.teaser.image.klangstrolche-standard-rot div.teaserTitle {
	background-color: #e2001a;
	color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}


div.contentCol div.klangstrolche.klangstrolche-standard-orange div.teaser,
div.contentCol div.teaser.klangstrolche-standard-orange {
	background-color: white;
	color: black;
}
div.contentCol div.klangstrolche.klangstrolche-standard-orange div.teaser.text a,
div.contentCol div.teaser.klangstrolche-standard-orange.text a {
	color: black;
}
div.contentCol div.klangstrolche-standard-orange h1,
div.contentCol div.teaser.klangstrolche-standard-orange h1 {
	color: #ec7405;
}
div.contentCol div.klangstrolche-standard-orange h2 {
	color: #e2001a;
}
div.contentCol div.klangstrolche.klangstrolche-standard-orange div.teaser.image div.teaserTitle,
div.contentCol div.csc-default div.teaser.image.klangstrolche-standard-orange div.teaserTitle {
	background-color: #ec7405;
	color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

div.contentCol div.klangstrolche.klangstrolche-standard-blau div.teaser,
div.contentCol div.teaser.klangstrolche-standard-blau {
	background-color: white;
	color: black;
}
div.contentCol div.klangstrolche.klangstrolche-standard-blau div.teaser.text a,
div.contentCol div.teaser.klangstrolche-standard-blau.text a {
	color: black;
}
div.contentCol div.klangstrolche-standard-blau h1,
div.contentCol div.teaser.klangstrolche-standard-blau h1 {
	color: #37beea;
}
div.contentCol div.klangstrolche-standard-blau h2 {
	color: #97be0d;
}
div.contentCol div.klangstrolche.klangstrolche-standard-blau div.teaser.image div.teaserTitle,
div.contentCol div.csc-default div.teaser.image.klangstrolche-standard-blau div.teaserTitle {
	background-color: #37beea;
	color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

div.contentCol div.klangstrolche.klangstrolche-standard-braun div.teaser,
div.contentCol div.teaser.klangstrolche-standard-braun {
	background-color: white;
	color: black;
}
div.contentCol div.klangstrolche.klangstrolche-standard-braun div.teaser.text a,
div.contentCol div.teaser.klangstrolche-standard-braun.text a {
	color: black;
}
div.contentCol div.klangstrolche-standard-braun h1,
div.contentCol div.teaser.klangstrolche-standard-braun h1 {
	color: #a1612c;
}
div.contentCol div.klangstrolche-standard-braun h2 {
	color: #e2001a;
}
div.contentCol div.klangstrolche.klangstrolche-standard-braun div.teaser.image div.teaserTitle,
div.contentCol div.csc-default div.teaser.image.klangstrolche-standard-braun div.teaserTitle {
	background-color: #a1612c;
	color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

div.contentCol div.klangstrolche.klangstrolche-standard-gruen div.teaser,
div.contentCol div.teaser.klangstrolche-standard-gruen {
	background-color: white;
	color: black;
}
div.contentCol div.klangstrolche.klangstrolche-standard-gruen div.teaser.text a,
div.contentCol div.teaser.klangstrolche-standard-gruen.text a {
	color: black;
}
div.contentCol div.klangstrolche-standard-gruen h1,
div.contentCol div.teaser.klangstrolche-standard-gruen h1 {
	color: #d4d600;
}
div.contentCol div.klangstrolche-standard-gruen h2 {
	color: #37beea;
}
div.contentCol div.klangstrolche.klangstrolche-standard-gruen div.teaser.image div.teaserTitle,
div.contentCol div.csc-default div.teaser.image.klangstrolche-standard-gruen div.teaserTitle {
	background-color: #d4d600;
	color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

div.contentCol div.klangstrolche.klangstrolche-standard-lila div.teaser,
div.contentCol div.teaser.klangstrolche-standard-lila {
	background-color: white;
	color: black;
}
div.contentCol div.klangstrolche.klangstrolche-standard-lila div.teaser.text a,
div.contentCol div.teaser.klangstrolche-standard-lila.text a {
	color: black;
}
div.contentCol div.klangstrolche-standard-lila h1,
div.contentCol div.teaser.klangstrolche-standard-lila h1 {
	color: #c6168d;
}
div.contentCol div.klangstrolche-standard-lila h2 {
	color: #ec7405;
}
div.contentCol div.klangstrolche.klangstrolche-standard-lila div.teaser.image div.teaserTitle,
div.contentCol div.csc-default div.teaser.image.klangstrolche-standard-lila div.teaserTitle {
	background-color: #c6168d;
	color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}


div.contentCol div.csc-default.klangstrolche div.teaser.image div.teaserTitle h1 {
	color: white;
}

div.contentCol div.csc-default.klangstrolche div.teaser.calendar {
	background-color: white;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.picTextList {
	margin: 20px;
}

.picTextList .picTextBox {}

.picTextList .picTextBox .picTextElement {
	margin-bottom: 20px;
}

.picTextList .picTextBox .picTextElement .pic {
	float: left;
	margin-right: 10px;
	width: 100px;
	height: 100px;
}
.picTextList .picTextBox .picTextElement .text {}
.picTextList .picTextBox .picTextElement .text p {
	margin-top: 0;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.calContainer {
	background-color: #282829;
}
.calContainer .calTabs a {
	background-color: #fff;
}
.calContainer .calTabs a.typ0,
div.calContainer div.calNav.typ0, 
.calContainer .calList .calBox .calElement.typ0{
	background-color: white;
}
.calContainer .calTabs a.typ1,
div.calContainer div.calNav.typ1,
.calContainer .calList .calBox .calElement.typ1 {
	background-color: #e9e3d8;
}
.calContainer .calTabs a.typ2,
div.calContainer div.calNav.typ2,
.calContainer .calList .calBox .calElement.typ2 {
	background-color: #d0ebfc;
}
.calContainer .calTabs a.typ3,
div.calContainer div.calNav.typ3,
.calContainer .calList .calBox .calElement.typ3 {
	background-color: #fcd6dc;
}
.calContainer .calTabs a.typ4,
div.calContainer div.calNav.typ4,
.calContainer .calList .calBox .calElement.typ4 {
	background-color: #f2f6ca;
}
.calContainer .calTabs a.typ5,
div.calContainer div.calNav.typ5,
.calContainer .calList .calBox .calElement.typ5 {
	background-color: #b2cbe4;
}
.calContainer .calTabs a.typ6,
div.calContainer div.calNav.typ6,
.calContainer .calList .calBox .calElement.typ6 {
	background-color: #fa7f06;
}
.calContainer .calTabs a.typ7,
div.calContainer div.calNav.typ7,
.calContainer .calList .calBox .calElement.typ7 {
	background-color: #cff8cc;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

#contentColLeft div.typoContentElement.type-kulturpalast_eventlist  {
	margin: 0;
	padding: 0;
}
#contentColLeft div.typoContentElement.type-kulturpalast_eventlist div.eventDetails  {
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
}
div.eventDetails div.date {
	font-size: 1.1em;
	font-weight: bold;
}
div.eventDetails div.text {
	margin-top: 20px;
}
div.eventDetails div.backToList {
	font-size: 0.8em;
	font-weight: bold;
	position: absolute;
	z-index: 1000;
	right: 20px;
}

#contentColLeft div.typoContentElement.type-kulturpalast_newslist  {
}
#contentColLeft div.typoContentElement.type-kulturpalast_newslist div.newsDetails  {
	padding-top: 10px;
	position: relative;
}
div.newsDetails div.image {
	margin-top: 20px;
}
div.newsDetails div.date {
	font-size: 1.1em;
	font-weight: bold;
}
div.newsDetails div.text {
	margin-top: 20px;
}
div.newsDetails div.backToList {
	font-size: 0.8em;
	margin-bottom: 10px;
	font-weight: bold;
	position: absolute;
	z-index: 1000;
	right: 0;
}
.eventList #content .contentHeader {
	position: relative;
	margin-bottom: 20px;
    margin-right: 20px;
}
#introMainContent {
    margin-right: 20px;
}
#content .contentMainHeader img {
	width: 100%;
	height: auto;
}
.eventList #content .contentHeader .eventListHeader {
	width: 100%;
}
.eventList #content .contentHeader .eventListHeader h1 {
	color: white;
	margin:0;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 10px;
	padding-top: 10px;
}
.eventList #content .contentHeader .eventListHeader .eventListHeaderLinks {
	text-align: left;
	padding-top: 0px;
}

.eventList #content .contentHeader .eventListHeader h1 {
	color: #b5a17d;
}

/* KPH */
.eventList.orgid-3ef81548598fe977004 #content .contentHeader .eventListHeader h1,
.eventList.orgid-3ef81548598fe977004 #content .contentHeader .eventListHeader .eventListHeaderLinks a.active {
	color: #17428b;
}
.eventList.orgid-3ef81548598fe977004 #content div.calendar table th,
.eventList.orgid-3ef81548598fe977004 #content div.calendar table td.active.hasEvent,
.eventList.orgid-3ef81548598fe977004 #content div.calendar table td.active.hasEvent a,
.eventList.orgid-3ef81548598fe977004 #content div.calendar table td a:hover {
	background-color: #17428c;
	color: white;
}
/* Hip-Hop Academy */
.eventList.orgid-16790916af6fb5e608 #content .contentHeader .eventListHeader h1,
.eventList.orgid-16790916af6fb5e608 #content .contentHeader .eventListHeader .eventListHeaderLinks a.active {
	color: #009fe3;
}
.eventList.orgid-16790916af6fb5e608 #content div.calendar table th,
.eventList.orgid-16790916af6fb5e608 #content div.calendar table td.active.hasEvent,
.eventList.orgid-16790916af6fb5e608 #content div.calendar table td.active.hasEvent a,
.eventList.orgid-16790916af6fb5e608 #content div.calendar table td a:hover {
	background-color: #009fe3;
	color: white;
}
/* Klangstrolche */
.eventList.orgid-e4da3b7545d7772b06 #content .contentHeader .eventListHeader h1,
.eventList.orgid-e4da3b7545d7772b06 #content .contentHeader .eventListHeader .eventListHeaderLinks a.active {
	color: #d9001a;
}
.eventList.orgid-e4da3b7545d7772b06 #content div.calendar table th,
.eventList.orgid-e4da3b7545d7772b06 #content div.calendar table td.active.hasEvent,
.eventList.orgid-e4da3b7545d7772b06 #content div.calendar table td.active.hasEvent a,
.eventList.orgid-e4da3b7545d7772b06 #content div.calendar table td a:hover {
	background-color: #d9001a;
	color: white;
}
/* Bambi Galore */
.eventList.orgid-68d30a984c39aa24be9 #content .contentHeader .eventListHeader h1,
.eventList.orgid-68d30a984c39aa24be9 #content .contentHeader .eventListHeader .eventListHeaderLinks a.active {
	color: #5a7034;
}
.eventList.orgid-68d30a984c39aa24be9 #content div.calendar table th,
.eventList.orgid-68d30a984c39aa24be9 #content div.calendar table td.active.hasEvent,
.eventList.orgid-68d30a984c39aa24be9 #content div.calendar table td.active.hasEvent a,
.eventList.orgid-68d30a984c39aa24be9 #content div.calendar table td a:hover {
	background-color: #4e6430;
	color: white;
}
/* Region Billstedt */
.eventList.orgid-e165421233099a1c0393 #content .contentHeader .eventListHeader h1,
.eventList.orgid-e165421233099a1c0393 #content .contentHeader .eventListHeader .eventListHeaderLinks a.active {
	color: #75b152;
}
.eventList.orgid-e165421233099a1c0393 #content div.calendar table th,
.eventList.orgid-e165421233099a1c0393 #content div.calendar table td.active.hasEvent,
.eventList.orgid-e165421233099a1c0393 #content div.calendar table td a:hover {
	background-color: #75b152;
	color: white;
}


.eventListHeader .eventListHeaderLinks {
	
	text-align: right;
	font-size: 87.5%;
	padding: 30px 20px 10px;
}
.eventListHeader .eventListHeaderLinks a {
	font-weight: bold;
}
.eventListList {
	margin: 20px;
}

.eventListList .eventListBox {}

.eventListList .eventListBox .eventListElement {
	margin-bottom: 20px;
	cursor: pointer;
}


.eventListList .eventListBox .eventListElement .text .time,
.eventListList .eventListBox .eventListElement .text .location,
.eventListList .eventListBox .eventListElement .text .project{
	font-weight: bold;
}

.eventListList .eventListBox .eventListElement .pic {
	float: left;
	margin-right: 10px;
	width: 100px;
	height: auto;
	min-height: 20px;
}
.eventListList .eventListBox .eventListElement .text {
	margin-top: 0;
	font-size: 87.5%;	
	margin-left: 110px;
}

#page div.contentCol .eventListList .eventListBox .eventListElement .text h2 {
	margin-bottom: 5px;
	font-size: 110%;	
}

.eventListList .eventListBox .eventListElement.dateHeadline {
	margin-bottom: 10px;
}
.eventListList .eventListBox .eventListElement.dateHeadline .date {
	float: left;
	margin-right: 10px;
	width: 110px;
	font-weight: bold;
	font-size: 110%;
}
.eventListList .eventListBox .eventListElement.dateHeadline .line {
	border-bottom: 1px solid #000;
	margin-left: 110px;
	height: 18px;
}

div.eventDetails div.image {
	width: 250px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}

.newsListList {

    
}
.newsListList .newsListBox .newsListElement {
	border-top: 1px solid #000000;
	padding-top: 25px;
	margin-bottom: 20px;
	cursor: pointer;
	position: relative;
}
.newsListList .newsListBox .newsListElement .date {
	position: absolute;
	right: 10px;
	top: 5px;
}
.newsListList .newsListBox .newsListElement .pic {
}
.imageRow .imageRowElement {
	display: flex;
}
.imageRow .imageRowElement .pic {
    margin-right: 10px;
    width: 100px;
    min-width: 100px;
}
.imageRow .imageRowElement .text {
}
.imageRow.image-orient18 .imageRowElement .text {
}

#page.two-col-3-1 div.contentCol.colLeft div.csc-default .imageRow .imageRowElement .text h2 {
	margin-bottom: 0px;
	font-size: 1.1em;
}
.imageRow .imageRowElement .text p {
	margin-top: 0;
	font-size: 87.5%;
}

.newsListList .newsListBox .newsListElement .text p {
	font-size: 100%;
}
.newsListList .newsListBox .newsListElement .text .typeOfNews {
/*	font-weight: bold;
	font-size: 87.5%;*/
}

.newsListList .newsListBox .newsListElement .text .description .linkMore {
	font-weight: bold; 
	margin-left: 10px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.typoContentElement .fourCols {
	width: 100%;
}
.typoContentElement .fourCols .column {
	margin-bottom: 10px;
	float: left;
	margin-right: 10px;
	width: 23.5%;
	overflow: hidden;
}
.typoContentElement .fourCols .column.col4 {
	margin-right: 0;
}
.typoContentElement .fourCols .column .image,
.typoContentElement .fourCols .column .logo {
	height: 75px;
	text-align: center;
	overflow: hidden;
	margin-bottom: 5px;
}
.typoContentElement .fourCols .column .image {
	height: 100px;
}

.typoContentElement .fourCols .column .image img {
	height: auto;
	width: 100%;
}
.typoContentElement .fourCols .column .logo img {
	height: auto;
	width: 80%;
}
.typoContentElement .fourCols .column .text {
	min-height: 150px;
	height: auto;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.typoContentElement .threeCols {
	width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        padding-top: 30px;
        padding-bottom: 30px;
}
.homeFullContent .typoContentElement .threeCols {    
    padding-top: 0;
}
.typoContentElement .threeCols .column {
    margin-right: 20px;
    /*background-color: #eceae0;*/
    background-color: white;
    flex-grow: 1;
    flex-basis: 0;
    position: relative;
}
.typoContentElement .threeCols .column .column-content {
    height: 100%;
    /*padding-bottom: 60px;*/
}
.typoContentElement .threeCols .column .column-content > div {
    margin-top: 15px;
}
.typoContentElement .threeCols .column .column-content > div:first-of-type {
    margin-top: 0;
}

.typoContentElement .threeCols .column:last-of-type {
    margin-right: 0;
}
.typoContentElement .threeCols .column .title {
    text-align: center;
/*    padding-top: 15px;
    padding-bottom: 15px;*/
}
.typoContentElement .threeCols .column .title h2 {
    margin-bottom: 0;
}

.typoContentElement .threeCols .column .image {
    /*margin-bottom: 15px;*/
    /*max-height: 100px;*/
    overflow: hidden;
}
.typoContentElement .threeCols .column .image img {
    width: 100%;
}
.typoContentElement .threeCols .column .text {
    padding: 0 15px 15px 15px;    
}
.typoContentElement .threeCols .column .buttons {
    padding: 0 15px 15px 15px;    
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
.typoContentElement .threeCols .column .button {
    background-color: #c1b13a;
}

.typoContentElement .threeCols .column .button a {
    display: block;
    padding: 15px 0 15px 0;
    text-align: center;
    font-size: 22px;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

div.bigLogo .logo {
	float: left;
	margin: 27px 10px 10px 136px;
}
#page.intropageKPH div.bigLogo .logo {
    margin-left: 0;
}
div.bigLogo .text {
	float: left;
	
	font-weight: bold;
	font-size: 38px;
	text-transform: uppercase;
	line-height: 120px;
}

div.bigLogo .claim {
	float: right;
	
	font-weight: normal;
	font-size: 15px;
	line-height: 120px;
}
div.bigLogo .langSocial {
    position: absolute;
    right: 0;
    top: 80px;
    padding-right: 15px;
}
div.bigLogo .langSocial div {
    float: left;
    margin-left: 10px;
}
div.bigLogo .langSocial .settings_info {
    display: none;
}               
div.bigLogo .langSocial .social_share_privacy_area {
    margin: 0 !important;
    margin-top: 5px !important;
}
div.bigLogo .langSocial .social_share_privacy_area .facebook {
    width: auto;
}
div.bigLogo .langSocial .social_share_privacy_area li.help_info .info, 
div.bigLogo .langSocial .social_share_privacy_area li .help_info.icon {
    top: 40px;
    bottom: unset;
    right: 0;
    left: unset;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

div.calendar {
}

div.calendar .cal_btn {
	cursor: pointer;
	float: left;
	width: 46px;
	text-align: center;
	line-height: 34px;
}

div.calendar .cal_btn_left {}

div.calendar .cal_month {
	float: left;
	width: 96px;
	text-align: center;
	line-height: 34px;
	font-size: 14px;
	font-weight: bold;
}
div.calendar .cal_btn_right {}

div.calendar table {
	width: 100%;
	height: 154px;
	float: left;
}

div.calendar table th {
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 12px;
}

div.calendar table td {
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
}

div.calendar table td a {
	cursor: pointer;
	padding: 0 5px;
}
div.calendar table td a.hi,
div.calendar table td a:hover {
	padding: 0 5px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.calContainer {
	padding: 5px;
}

.calContainer .calTabs {
	margin: 5px 0px 0;
}
.calContainer .calTabs a {
	padding: 6px 10px 3px;
	margin-right: 1px;
	font-weight: bold;
	display: block;
	float: left;
	cursor: pointer;

}


.calContainer .calNav {
	height: 40px;
	padding-top: 10px;
}

.calContainer .calNav .btn {
	background-position: center center;
	background-repeat: no-repeat;
	
	width: 32px;
	height: 32px;
	display: block;
	float: left;
	cursor: pointer;
}
.calContainer .calNav .btnPrevWeek,
.calContainer .calNav .btnNextWeek {
	line-height: 32px;
	text-align: center;
}
.calContainer .calNav .btn {
	background-position: center center;
	background-repeat: no-repeat;
	width: 46px;
	height: 36px;
	display: block;
	float: left;
}
.calContainer .calNav .btn.btnKw {
	background-image: url(../../webcontent/img/cal_kw.png);
}
.calContainer .calNav .btn.btnDate {
	background-image: url(../../webcontent/img/cal_date.png);
}
.calContainer .calNav .btn.btnList {
	background-image: url(../../webcontent/img/cal_list.png);
}
.calContainer .calNav .btnNextWeek,
.calContainer .calNav form {
	float: right;
}

.calContainer .calList {}

.calContainer .calList .calBox {
	width: 14.2857142857%;
	float: left;
}

.calContainer .calList .calBox .calElementHeader {
	background-color: #282829;
	padding: 3px 10px;
	margin-right: 3px;
	font-weight: bold;
	font-size: 110%;
	line-height: 30px;
}
.calContainer .calList .calBox .calElementHeader .day {}
.calContainer .calList .calBox .calElementHeader .date {}

.calContainer .calList .calBox .calElement {
	border-radius: 10px;
	margin: 10px 5px;
	padding: 5px;
	height: 100px;
	overflow: hidden;
	font-size: 75%;
	cursor: pointer;
}

.calContainer .calList .calBox .calElement .headline {
	font-weight: bold;
}

.calContainer div.calElementDetails {
	width: 60%;
	max-width: 650px;
	padding: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: white;
/*	opacity: 0.97; 
	filter: Alpha(Opacity=97);*/
	border-radius: 30px;
	display: none;
	z-index: 10;
	box-shadow: 10px 10px 15px grey;
	border: 1px solid #dddddd;
}
.calContainer div.calElementDetails div.close {
	float: right;
}
.calContainer div.calElementDetails div.time {
	font-size: 1.5em;
}
.calContainer div.calElementDetails div.headline {
	font-size: 3em;
	font-weight: bold;
	padding-bottom: 10px;
}
.calContainer div.calElementDetails div.profile {
	font-size: 1em;
	padding-top: 10px;
	font-weight: bold;
}
.calContainer div.calElementDetails div.teacher {
	font-size: 1em;

}
.calContainer div.calElementDetails div.image {
	float: right;
	margin-left: 20px;
	margin-right: 30px;
	max-width: 250px;
}
.calContainer div.calElementDetails div.description {
	font-size: 1em;
	padding-bottom: 10px;
}
.calContainer div.calElementDetails div.location {
	font-size: 2.5em;
}

/* kalender listenanzeige */
.calContainer.weekList .calList .calBox {
    float: none;
    width: 100%;
}

.calContainer.weekList .calList .calBox .calElementHeader {
	margin-right: 0px;	
}

.calContainer.weekList .calList .calBox .calElementHeader .day,
.calContainer.weekList .calList .calBox .calElementHeader .date {
	display: inline-block;
}
.calContainer.weekList .calList .calBox .calElement {
  border-radius: 0px;
  font-size: 100%;
  padding: 5px;
  height: auto;
  margin: 2px 0px;
}
.calContainer.weekList .calList .calBox .calElement .time,
.calContainer.weekList .calList .calBox .calElement .profile,
.calContainer.weekList .calList .calBox .calElement .headline,
.calContainer.weekList .calList .calBox .calElement .location{
	display: inline-block;
	padding-right: 10px;
}
.calContainer.weekList .calList .calBox .calElement .description_short{
	display: none;
}

#courseDatepicker {
	position: absolute;
	background-color: white;
	padding: 10px;
	border: 1px solid #DDDDDD;
    border-radius: 10px;
    box-shadow: 10px 10px 15px #808080;	
	font-size: 0.7em;
	margin-left: 10px;
}
#courseDatepicker div.close {
	text-align: right;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

.footerWrapper {
	margin: 0 auto 20px;
	max-width: 996px;
}
.footerWrapper .content {
	font-size: 85%;
}


.overlay {
	width: 60%;
	max-width: 650px;
	padding: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: white;
/*	opacity: 0.97; 
	filter: Alpha(Opacity=97);*/
	border-radius: 30px;
	display: none;
	z-index: 300;
	box-shadow: 10px 10px 15px grey;
	border: 1px solid #dddddd;
}
.overlay div.close {
	float: right;
}
.overlay.video {
	margin: 0px;
}
.overlay.video .jp-jplayer {
	max-height: 100%;
	height: 100%;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
div.paging.page {
	right: 10px;
	top: 30px;
	float: right;
}
header div.paging.page {
	position: absolute;
}
div.paging.page a.current {
	font-weight: bold;
}
div.paging.month {
	padding-top: 10px;
	position: relative;
}
div.paging.month div.prev {
	position: relative;
	float: left;
	z-index: 2;
    font-weight: bold;
    font-size: 1.2rem;
}
div.paging.month div.prev a {
	padding-left: 20px;
}
div.paging.month div.next {
	position: relative;
	float: right;
	text-align: right;
	z-index: 2;
    font-weight: bold;
    font-size: 1.2rem;
}
div.paging.month div.next a {
	padding-right: 20px;
}
div.paging.month div.current {
	text-align: center;
	width: 100%;
	position: absolute;
	z-index: 1;
	font-weight: bold;
}

.csc-textpic-imagewrap img,
.csc-default img {
	width: 100%;
	height: auto;
	max-width: 100%;
}
.csc-default.type-html img {
    width: auto;
}

.accordeon .accordeonElement.closed > * {
    height: 0;
    opacity: 0;
    margin: 0 !important;
    overflow: hidden; 
}
.accordeon .accordeonElement.opened > * {
    transition: opacity 1s ease-in;
    opacity: 1;
    height: auto;
    overflow: hidden; 
}
.accordeon .accordeonElement > .csc-header {
    height: auto;
    opacity: 1;
    display: block;   
    cursor: pointer;
    position: relative;
}
.accordeon .accordeonElement > .csc-header::after {
      content: "\276F";
      width: 1em;
      height: 1em;
      text-align: center;
      transition: all .35s;    
      position: absolute;
      top: 20px;
      right: 0;
}
.accordeon .accordeonElement.opened > .csc-header::after {
    transform: rotate(90deg);
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media screen and (max-width: 1023px) {	/* iPad hoch */
	
	.headerWrapper, 
	.footerWrapper, 
	.pageWrapper {
		width: 532px;
	}
	
	#content {
		width: 416px;
	}
	#page.intropageKPH #content {
		width: 500px;
	}
	
	div.bigLogo {
		margin-right: 0;
	}
	div.bigLogo .text {
		font-size: 20px;
	}
	
	#headerMenu {
		width: 486px;
	}
	
	#headerMenu a.menuKlapper {
		display: block;
	}
	
	#headerMenu div.claim {
		float: right;
	}
	
	#headerMenu	div.portals,
	#headerMenu	div.additionals,
	div.bigLogo .claim {
		display: none;
	}
	
	#page.two-col div.contentCol {
		float: none;
	}
	
	#page.two-col-3-1 div.contentCol.colLeft {
		width: auto;
	}
	#page.two-col-1-3 div.contentCol.colLeft {
		width: 188px;
		height: auto;
	}
	#page.two-col-1-3 div.contentCol.colRight {
		width: 188px;
		height: auto;
                margin-right: 0;
	}

	#page.two-col-1-3.homeKPH div.contentCol.colRight .typoContentElement.type-image img {
		height: auto;
	}

	.calContainer .calList .calBox {
		width: 33.3333%;
	}
	
	div.eventDetails div.image {
		width: 180px;
	}
	.calContainer .calTabs a {
		padding: 6px 10px 3px;
		margin-right: 1px;
		font-weight: bold;
		display: block;
		float: none;
		cursor: pointer;

	}
	.typoContentElement .fourCols .column {
		width: 45%;
	}
	.typoContentElement .threeCols {
            display: block;
        }
        .typoContentElement .threeCols .column {
            margin-right: 0;
            margin-bottom: 15px;
        }
    .typoContentElement .introContent .title h1 {
        font-size: 2.5rem;
    }
    .typoContentElement .introContent .overlayText {
        width: 90%;
        bottom: 10%;
    }
    .typoContentElement .introContent .subtext {
        font-size: 1.5rem;
    }
    
	/* ### two-col-3-1 ###*/

	.two-col-3-1 div.eightTeaserRow {
		width: auto;
		padding: 10px 0px 0px 0px;
		margin-left: -20px;
		margin-right: -40px;
	}	
	
	/* ### two-col-4-0 ###*/
	
	.two-col-4-0 div.eightTeaserRow {
		padding: 0px;
	}	
	
	.two-col-4-0 div.eightTeaserRow {
		width: auto;
		padding: 0px;
	}	
	.two-col-4-0 div.eightTeaserRow .teaserBlock {
	    float: left;
	    margin-bottom: 10px;
		margin-right: 17px;
		width: 193px;
	}

}

@media screen and (max-width: 730px) {	/* schmaler als iPad quer */



}

@media screen and (max-width: 531px) {
	
	.fixer {
		position: static !important;
	}
	
	.headerWrapper, 
	.footerWrapper, 
	.pageWrapper {
		width: 436px;
	}
	
	div.bigLogo .logo {
		margin: 27px 10px 0 0;
	}
	div.bigLogo .text {
		font-size: 18px;
	}
	#headerMenu {
		width: 390px;
	}
	
	#headerMenu a.menuKlapper {
		margin-left: 30px;
	}
	
	.menuMobile {
		display: block;
	}
	
	.navcol,
	#mainNav {
		display: none;
	}
	.navCol {
		float: none;
	}
	div.circleContainer {
		display: none;
	}
	
	
	#content {
		margin-left: 20px;
	}
	#page.intropageKPH #content {
		width: 90%;
        margin-left: 20px;
	}
    .typoContentElement .introContent .title h1 {
        font-size: 2rem;
    }	
    .typoContentElement .introContent .subtext {
        font-size: 1.2rem;
    }
    .typoContentElement .introContent .layertext {
        font-size: 0.8rem;
    }
    
    
	.footerWrapper .content {
		margin: 0 20px;
	}
	
	
#mobileMainNav #mainMenu a {
    color: #000000;
    font-style: normal;
    font-weight: bold;
    text-shadow: 1px 1px 9px #FFFFFF;
}


	#page.two-col-1-3.homeKPH div.contentCol.colLeft .typoContentElement.type-image img {
		 height: 396px;
	}


}

@media screen and (max-width: 435px) {

	/* ### two-col-3-1 ###*/
	
	.two-col-3-1 div.eightTeaserRow {
		width: auto;
		padding: 10px 0px 0px 0px;
	}	
	
	/* ### two-col-4-0 ###*/

	.two-col-4-0 div.eightTeaserRow {
		width: auto;
		padding: 0px;
		margin-bottom: -10px;
	}	
	
	.headerWrapper, 
	.footerWrapper, 
	.pageWrapper {
		width: 320px;
	}
	
	#headerMenu {
		width: 274px;
	}
	
	#headerMenu .logoportal {
		display: none;
	}
	
	div.bigLogo {
		height: 72px;
	}
	div.bigLogo .logo {
		margin: 23px 10px 0 0;
	}
	
	div.bigLogo .logo img {
		width: 42px;
		height: 30px;
	}
	div.bigLogo .text {
		font-size: 12px;
		line-height: 72px;
	}
	
	#content {
		margin: 0 auto;
		/*width: 188px;*/
                max-width: 100%;
		float: none;
	}
#page.two-col div.contentCol  {
    
}
#contentColLeft {
    
}
	.typoContentElement.type-header,
.typoContentElement.type-text,
.typoContentElement.type-textpic,
.typoContentElement.type-bullets,
.typoContentElement.type-table,
.typoContentElement.type-uploads,
.typoContentElement.type-image,
.typoContentElement{
	
}	
div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
    float: none;
}
.type-textpic .csc-textpic .csc-textpic-text {
    margin-left: 0;
}
div.csc-textpic-imagewrap img,
div.csc-default img{
	/*width: 100%;*/
	height: auto;
	max-width: 100%;
}
	.teaser.left,
	.teaser.right {
		float: none;
	}
	div.eightTeaserRow .teaser.left {
		float: left;
	}
	div.eightTeaserRow .teaser.right {
		float: right;
	}
		
	.calContainer .calList .calBox {
		width: 100%;
	}
	.eventListList .eventListBox .eventListElement .pic {
		margin-bottom: 10px;
	}
	.eventListList .eventListBox .eventListElement.dateHeadline .line {
		display: none;
	}
	
	div.eventDetails div.image {
		width: 150px;
	}
	
	.eventListList .eventListBox .eventListElement .text {
		margin-left: 0px;
	}
	
	.newsListList .newsListBox .newsListElement {
		padding-top: 10px;
	}
	.newsListList .newsListBox .newsListElement .date {	
		position: static;
		margin-bottom: 5px;
	}
	
	
	.imageRow .imageRowElement .pic {
		float: none;
		margin-bottom: 10px;
	}
	.imageRow .imageRowElement .text {
		margin-left: 0;
	}
	
.calContainer .calTabs {
    display: none;
}

.calContainer .calNav {
    display: none;
}

.calContainer div.calElementDetails div.headline {
    font-size: 1.8em;
    font-weight: bold;
    padding-bottom: 10px;
}

.calContainer div.calElementDetails div.time {
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 10px;
}

.calContainer div.calElementDetails div.location {
    font-size: 1.8em;
    font-weight: normal;
    padding-bottom: 10px;
}

.calContainer div.calElementDetails div.close {
    float: right;
	padding: 0 10px 10px;
}

#page div.contentCol {
	margin-right: 0;
}

.eventListList .eventListBox .eventListElement.dateHeadline .date {
    float: left;
    font-size: 110%;
    font-weight: bold;
    margin-right: 10px;
    width: 137px;
	border-top: 1px solid #000;
	padding-top: 10px;
} 
.eventListBox .text .time {
	text-align: left;
	float: left;
	width: 100%;
	}
	
.eventListBox .text h2 {
	text-align: left;
	float: left;
	width: 100%;
	}
	
.eventListBox .text .description {
	text-align: left;
	float: left;
	width: 100%;
	padding: 0 0 10px 0;
	}
.eventListBox .text .location {
	text-align: left;
	float: left;
	width: 100%;
	padding: 0 0 10px 0;
	}
.eventListBox .pic {
	float: left;
	width: 100%;
	}
.calContainer .calList .calBox .calElementHeader {
    margin-right: 0px;
}


/*.calContainer .calNav .btn {
    background-position: center center;
	background-size: 80%;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 26px;
    width: 26px;
}


.calContainer .calNav .left .btn btnPrevWeek {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80% auto;
    display: block;
    float: left;
    height: 26px;
    width: 26px;
}

.calContainer .calNav .right .btn btnNextWeek {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80% auto;
    display: block;
    float: right;
    height: 26px;
    width: 26px;
}*/

	div.paging.month div.current {
		display: none;
	}
	.typoContentElement .fourCols .column {
		width: 100%;
		margin-right: 0;
	}
    .typoContentElement .introContent .title h1 {
        font-size: 1.5rem;
    }	
    .typoContentElement .introContent .overlayText {
        bottom: 5%;
    }    
.eventList #content .contentHeader {
    margin-right: 0;
}
#page.three-col-1-2-1 div.contentCol.colMiddle {
    width: auto;
}
    div.bigLogo {
        padding-top: 20px;
    }
    div.bigLogo .langSocial {
        top: 5px;
        z-index: 1000;
    }
}

@media screen and (max-width: 480px) {	/* iPhone quer */
body {
	font-size: 0.8em;
    line-height: 1.1;
}
#page.two-col div.contentCol {
	width: 188px;
	/*display: inline-block;*/
	float: left;
	vertical-align: top;
}

h2 {
    font-size: 1.2em;
}
.teaser h1 {
/*    font-size: 1.1em;*/
}
div.contentCol div.csc-default h1, div.contentCol div.csc-default h2, div.contentCol div.csc-default h3, div.contentCol div.csc-default p,
div.contentCol div.teaser.image div.teaserTitle p.bodytext {
  margin: 0 0 4px;
}
.calContainer div.calElementDetails div.image {
    float: right;
    margin-left: 0px;
    margin-right: 0px;
    max-width: 100%;
}
	div.contentCol div.teaser.double,
	div.contentCol div.teaser.quad {
		width: 100%;
		height: auto;
	}
	div.contentCol div.teaser.double.image img,
	div.contentCol div.teaser.quad.image img {
		width: 100%;
		height: auto;
	}
div.contentCol div.teaser.double div.teaserTitle {
	position: static;
	padding-bottom: 5px;
}
	div.contentCol div.teaser.single.left	{
		margin-bottom: 20px;
	}

}

@media screen and (max-width: 320px) {	/* iPhone hoch */



}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


.donation-barometer {
    margin-bottom: 50px;
}
.donation-barometer .barometer-status {
    background-color: #eeeeee;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.donation-barometer .barometer-status .barometer-image {
    position: relative;    
    margin-left: 50px;
}
.donation-barometer .barometer-status .barometer-image .image {
    position: relative;
    z-index: 1;
}
.donation-barometer .barometer-status .barometer-image .barometer-level {
    position: absolute;
    background-color: #e42734;
    width: 40px;
    height: 0;
    bottom: 76px;
    left: 23px;
}
@media screen and (max-width: 1023px) {	/* iPad hoch */
    .donation-barometer .barometer-status .barometer-image {
        margin-left: 0;
    }
    .donation-barometer .barometer-status .barometer-image .barometer-level {    
        width: 34px;
        left: 20px;
        bottom: 66px;
    }
}
@media screen and (max-width: 435px) {
    .donation-barometer .barometer-status .barometer-image {
        display: none;
    }
}

.donation-barometer .barometer-status .barometer-data {
}
.donation-barometer .barometer-status .barometer-data .title-amount {
    font-weight: bold;
    font-size: 1.5rem;
}
.donation-barometer .barometer-status .barometer-data .amount-value {
    color: #c1b13a;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
}
.donation-barometer .barometer-status .barometer-data .title-user {
    font-weight: bold;
    font-size: 1.5rem;
}
.donation-barometer .barometer-status .barometer-data .user-list {
    width: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 20px;
}
.donation-barometer .barometer-status .barometer-data .user-list .user {
    display: flex;
    justify-content: space-between;
}
.donation-barometer .barometer-status .barometer-data .user-list .user .name {
}
.donation-barometer .barometer-status .barometer-data .user-list .user .amount {
    text-align: right;
}
.donation-barometer .donate-button {
    display: block;
    background-color: #c1b13a;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5rem;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}
.donation-barometer .donate-user-sliderX {
    max-width: 100vw; /* iOS braucht das */
    white-space: nowrap;
    overflow: hidden;
    background-color: #eeeeee;
    font-size: 1.5rem;
    padding: 10px;

}
.donation-barometer .donate-user-sliderX .user {
    display: inline-block;
    animation: marquee 5s linear infinite;    
}
.donation-barometer .donate-user-sliderX:hover .user {
    animation-play-state: paused
}
    
@keyframes marquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-100%); }
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.donate-user-slider {
 display: none;
 margin: auto;
 padding: 2px;
 overflow: hidden;
 white-space: nowrap;
    background-color: #eeeeee;
    font-size: 1.5rem;
    padding: 10px;
}
.donate-user-slider .user {
    display: inline;
}
.donate-user-sliderY:hover {
 animation-play-state: paused;
}




#formDonateBFS {
    background-color: #dcdacd;
    margin: 0 -20px 0 -20px;
    padding: 20px;
}

#formDonateBFS * {
    box-sizing: border-box;
}
#formDonateBFS .autoImage {
    width: auto;
    height: auto;
}
#formDonateBFS .button-submit {
    border: 0;
    width: 100%;
    background-color: #c1b13a;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5rem;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

#formDonateBFS .text-center {
    text-align: center;
}
#formDonateBFS label {
    display: block;
    font-weight: bold;
}
#formDonateBFS label.form-check-label {
    display: inline-block;
    font-weight: normal;
    margin-bottom: 0.75rem;
}
#formDonateBFS .input-group {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: stretch;
	align-items: stretch;
	width: 100%;
}
#formDonateBFS .input-group-append, #formDonateBFS .input-group-prepend {
	display: -ms-flexbox;
	display: flex;
}
#formDonateBFS .input-group-text {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding: .375rem .75rem;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: white;
	text-align: center;
	white-space: nowrap;
	background-color: #c1b13a;
	border: 1px solid #c1b13a;
	border-radius: .25rem;
}
#formDonateBFS .input-group > .form-control {
	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	margin-bottom: 0;
}
#formDonateBFS .input-group > .custom-select:not(:first-child), #formDonateBFS .input-group > .form-control:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#formDonateBFS .input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#formDonateBFS .form-check {
    display: inline-block;
    padding-right: 15px;
}
#formDonateBFS input.form-control, #formDonateBFS select.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;    
    margin-bottom: 0.75rem;
}
#formDonateBFS .form-control.big,
#formDonateBFS .input-group .input-group-prepend .input-group-text.big {
    font-size: 1.5rem;
}
.teaser.donateBfsTeaser-barometer {
    background-color: #c1b13a !important;
    cursor: pointer;
    padding: 10px;
    box-sizing: border-box;
    overflow: visible;
}
.teaser.donateBfsTeaser-barometer .donate-content {
    display: flex;
    justify-content: space-between;
}
.teaser.donateBfsTeaser-barometer .donate-content .muetze {
    position: absolute;
    top: -18px;
    right: -19px;
    z-index: 10;
    transform: rotate(25deg);
}
.teaser.donateBfsTeaser-barometer .donate-content .barometer-image {
    
}
.teaser.donateBfsTeaser-barometer .donate-content .barometer-image img {
    height: 168px;
    width: auto;
}
.teaser.donateBfsTeaser-barometer .donate-content .text-list {
    text-align: center;
    font-size: 0.9em;
}
.teaser.donateBfsTeaser-barometer .donate-content .text-list .text-action {
    margin-top: 0;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.teaser.donateBfsTeaser-barometer .donate-content .text-list .text-action small {
  font-size: 140%;
  color: #e42734;
  line-height: 1.5rem;
  padding-top: 10px;
  display: block;
}
.teaser.donateBfsTeaser-barometer .donate-content .text-list .normal {
    font-size: 0.75rem;
}
.teaser.donateBfsTeaser-barometer .donate-content .text-list .text-donation {
    color: white;
    font-size: 2rem;
    font-weight: bold;
}
.teaser.donateBfsTeaser-barometer .donate-content .barometer-image {
    position: relative;
}
.teaser.donateBfsTeaser-barometer .donate-content .barometer-image .image {
    position: relative;
    z-index: 1;
}
.teaser.donateBfsTeaser-barometer .donate-content .barometer-image .barometer-level {
    position: absolute;
    background-color: #e42734;
    width: 13px;
    height: 0;
    bottom: 25px;
    left: 7px;
}

.errors {
    margin-bottom: 15px;
    color: red;
}
.errors .error {
}
.row {
    display: flex;
    justify-content: space-between;
    margin-right: -15px;
    margin-left: -15px;    
}

.row .col-1, .row .col-2, .row .col-3, .row .col-4, .row .col-5, .row .col-6, .row .col-7, .row .col-8, .row .col-9, .row .col-10, .row .col-11, .row .col-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}    
.row .col-8 {
    width: 67%;
}
.row .col-6 {
    width: 50%;
}
.row .col-4 {
    width: 33%;
}
.row .col-3 {
    width: 25%;
}



.cycle-slideshow .cycle-prev,
.cycle-slideshow .cycle-next{
	position: absolute;
	z-index: 200;
	top: 50%;
	background: white;
	cursor: pointer;
	width: 32px;
	height: 35px;
	opacity: 0.7;
	margin-top: -17px;
}
.cycle-slideshow .cycle-prev:hover,
.cycle-slideshow .cycle-next:hover {
	opacity: 1;
}
.cycle-slideshow .cycle-prev{
	left: 0;
	background-image: url(../img/arrow_left_small.png);
}
.cycle-slideshow .cycle-next{
	right: 0;
	background-image: url(../img/arrow_right_small.png);
}
.cycle-slideshow .cycle-pager {
	position: absolute;
	bottom: 5px;
	color: transparent;
	text-align: center;
	width: 100%;
	z-index: 200;
}
.cycle-slideshow .cycle-pager span {
	display: inline-block;
	height: 12px;
	width: 12px;
	/*border: 1px solid #dddddd;*/
	background-color: black;
	border-radius: 6px;
	margin-left: 2px;
	margin-right: 2px;
	opacity: 0.3;
}
.cycle-slideshow .cycle-pager .cycle-pager-active  {
	/*background-color: black;*/
	opacity: 0.9;
}



/* MARQUEE */
.marqueeContainer {
    background-color: white;
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
}
.homeKPH .marqueeContainer {
    max-width: 80vW;
    box-shadow: 4px 4px 4px #000000;
}
.marqueeContainer .marquee-fade {
    position: absolute;
    height: 100%;
    width: 20px;
    top: 0;
    z-index: 1;
}
.marqueeContainer .marquee-fade-left {
    left: 0;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);    
}
.marqueeContainer .marquee-fade-right {
    right: 0;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);    
}
    
.marqueeContainer .marquee {
    max-width: 100vw; 
    white-space: nowrap;
    overflow: hidden;
    color: red;
    font-size: 22px;
    display: block;
}

.marqueeContainer .marquee span {
    display: inline-block;
    padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
    animation: marquee 15s linear infinite;
}

/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
.marqueeContainer .marquee span:hover {
    animation-play-state: paused 
}

/* Make it move */
@keyframes marquee {
    0%   {transform: translate3d(0,0,0);}
    100% {transform: translate3d(-100%,0,0);}
}