/* CSS Document */
/* *****************
Hintergrund grau 
*********************/
.section-state1 { 
  padding-top:1%;
padding-bottom:2%;
background:#e6e6e6
}
.section-state1 h2 a,
.section-state1 h3 a,
.section-state1 h4a {
text-transform:uppercase;
text-decoration:none;
}      
.section-state1 .frame-textbutton a,
.section-state1 p a.frame-textbutton,
.section-state1 input.powermail_submit {
background-color:none;
}
.section-state1 .frame-textbutton a:hover,
.section-state1 .frame-textbutton a:active,
.section-state1 p a.frame-textbutton:hover,
.section-state1 p a.frame-textbutton:active,
.section-state1 input.powermail_submit:hover {
}

/* TEXTLINK */
.section-state1 a{
color:#B5152B;
}
.section-state1 a:hover,
.section-state1 a:active {
color:#535353;
}

/* *****************
Banner Vollbild 
*********************/
.section-state2{ 
color:transparent;
background-color:#B5152B;
padding:0px;
margin:0px;
}
.section-state2 .section-content {
max-width:2000px;
padding:0px;
}
.section-state2 .ce-gallery  {
margin:0px !important;
padding:0px !important;
}
.section-state2 .section-content {
}

/* *****************
Galerie Highlights
*********************/
.section-state3 {
color:#fff;
padding-top:0%;
padding-bottom:0%;
  }
.section-state3 .section-content {
max-width:2000px;
padding:0px;
}
.section-state3 .frame-type-textpic {
position:relative;
float:left;
clear:none;
overflow:hidden;
padding:0px !important;
margin:0px !important;
max-width:33.33%;
width:auto !important;
overflow:hidden;
background-color:#000;
}
.section-state3 .ce-textpic .ce-gallery,
.section-state3 .ce-textpic .ce-row,
.section-state3 .ce-textpic .ce-column,
.section-state3 .ce-textpic figure,
.section-state3 .ce-textpic img,
.section-state3 .ce-gallery img{
margin:0px !important;
padding:0px !important;
border-collapse: collapse;
}
.section-state3 .ce-gallery .ce-column  {
height:315px !important;
width:100% !important;
overflow:hidden;
}
.section-state3 .ce-bodytext{
position:absolute;
height:1px;
width:90%;
top:35%;
padding-left:5%;
text-align:center;
}

.section-state3 header h1 {
position:absolute;
display:inline-block;
width:90%;
height:1px !important;
z-index:1;
top:15%; 
padding-left:5%;
text-align:center;
text-transform:uppercase;
font-size:1.2em;
line-height:1em;
cursor:pointer;
}

.section-state3 .ce-bodytext p a,
.section-state3 .ce-bodytext p a:visited {
color:#fff !important;
text-transform:uppercase;
text-decoration:none;
display:inline-block;
min-width:100px;
cursor: pointer;
padding: 0.8em 10px 0.8em 10px;
border:2px solid;
border-color:#fff;
}
.section-state3 .ce-bodytext p a:hover,
.section-state3 .ce-bodytext p a:active {
border-color:#B5152B;
color:#B5152B !important;
}
.section-state3 .frame-type-textpic a img{
opacity: 1;
transition: opacity 0.8s;
}
.section-state3 .frame-type-textpic:hover img,
.section-state3 .frame-type-textpic:active img{
opacity: 0.4;
transition: opacity 0.8s;
}
.section-state3 .frame-type-textpic a:before {
content: '';
position: absolute;
display:block;
width:100%;
height:100%;
top:0px;
left:0px;
right:0px;
background-color:transparent;
   background-image: url(/fileadmin/kulti/template/images/Touch-Icon-Border.png);
  background-repeat: no-repeat;
  background-position: center 95%;
  background-attachment: scroll;
  background-size: 30px auto;
opacity:1;
transition: opacity 0.8s;
}
.section-state3 .frame-type-textpic:hover a:before {
content: '';
position: absolute;
display:block;
z-index:1;
width:100%;
height:100%;
top:0px;
left:0px;
right:0px;
background-image: url(/fileadmin/kulti/template/images/Touch-Icon-Border.png);
background-color:transparent;
opacity:0;
transition: opacity 0.8s;
}
.section-state3 .frame-type-textpic header,
.section-state3 .frame-type-textpic .ce-bodytext {
opacity:0;
transition: opacity 0.8s;
}
.section-state3 .frame-type-textpic:hover header,
.section-state3 .frame-type-textpic:hover .ce-bodytext,
.section-state3 .frame-type-textpic:active header,
.section-state3 .frame-type-textpic:active .ce-bodytext {
opacity:1;
transition: opacity 0.8s;
}

/* ***************** 
standard - Hintergrund weiß, Schrift anthrazit
*********************/
.section-state10{
color:#000;
background:#fff;
padding-top:2%;
padding-bottom:3%;
}
.section-state10 h2 a,
.section-state10 h3 a{
text-transform:uppercase;
text-decoration:none;
}

.section-state10 h3,
.section-state10 h4 { 
}

.section-state10 .frame-textbutton a,
.section-state10 p a.frame-textbutton,
.section-state10 input.powermail_submit {

}
.section-state10 .frame-textbutton a:hover,
.section-state10 .frame-textbutton a:active,
.section-state10 p a.frame-textbutton:hover,
.section-state10 p a.frame-textbutton:active,
.section-state10 input.powermail_submit:hover{

}
 .section-state10 .frame-ruler-after,
.section-state10 .frame-ruler-before {
border-color:#A7A7A7;
  }  
.section-state10 .frame-hinweisbox p{
color:#A7A7A7;
}

/* TEXTLINK */
.section-state10 a
color:#B5152B;
}
.section-state10 a:hover,
.section-state10 a:active{
color:#535353 !important;
}
/* *****************
Footer
*********************/
#footer { 
  padding-top:1%;
padding-bottom:0%;
background:#e6e6e6;
}
#footer h2 a,
#footer h3 a,
#footer h4a {
text-transform:uppercase;
text-decoration:none;
}      
#footer .frame-textbutton a,
#footer p a.frame-textbutton,
#footer input.powermail_submit {
background-color:none;
font-size:0.9em;
padding: 0.8em 10px 0.7em 10px;
}
#footer .frame-textbutton a:hover,
#footer .frame-textbutton a:active,
#footer p a.frame-textbutton:hover,
#footer p a.frame-textbutton:active,
#footer input.powermail_submit:hover {
}

/* TEXTLINK */
#footer a{
color:#535353;
}
#footer a:hover,
#footer a:active {
color:#B5152B;
}
#footer #c231 {
width:300% !important;
padding-top:0.5%;
padding-left:150%;
margin-left:-150%;
background-color:#fff;
}
#footer #c228 {
max-width:1000px;
color:#a7a7a7;
}
#footer #c228 a {
color:#a7a7a7;
text-decoration:none;
}
#footer #c230{
text-align:right;
}
/* *****************
 gemeinsame styles Erscheinungsbilder 
*********************/
/************ 
Erscheinungsbild Box mit Rahmen rot / grau
************/
.frame-boxrot,
.frame-boxgrau {
position:relative;
float:left;
clear:left;
width:96%;
padding: 0.8em 2% 0% 2%;
text-align:center;
border:4px solid;
    }
.frame-boxrot h1,
.frame-boxgrau h1 {
font-size:1.4em;
line-height:1.1em;
margin-bottom:0.3em;
font-weight:bold;
text-transform:uppercase;
}
.frame-boxrot p a,
.frame-boxgrau p a,
.frame-boxrot p a:visited,
.frame-boxgrau p a:visited {
color:#fff !important;
text-transform:uppercase;
text-decoration:none;
display:inline-block;
min-width:100px;
cursor: pointer;
padding: 0.8em 10px 0.8em 10px;
}
.frame-boxrot p a:before,
.frame-boxgrau p a:before {
content:'';
position:absolute;
display:block;
width:100%;
height:100%;
top:0px;
left:0px;
overflow:hidden;
}
.frame-boxrot p a:hover,
.frame-boxgrau p a:hover,
.frame-boxrot p a:active,
.frame-boxgrau p a:active {
background-color:#000;
}
.frame-boxrot:hover,
.frame-boxgrau:hover {
border-color:#000;
color:#000;
}
.frame-boxrot:hover img,
.frame-boxgrau:hover img {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}
.frame-boxrot {
color:#B5152B;
border-color:#B5152B;
}
.frame-boxrot p a {
background-color:#B5152B;
}
.frame-boxgrau {
color:#535353;
border-color:#535353;
}
.frame-boxgrau p a {
background-color:#535353;
}
/***********
Kleiner Textbutton Details
*************/
.news .multicolumnContainer .column1 p:last-of-type a,
.frame-smallbutton,
.frame-smallbutton:visited {
 display:inline-block;
background-color:#B5152B;
color:#fff;
text-decoration:none;
padding:3px 10px 3px 10px;
}
.news .multicolumnContainer .column1 p:last-of-type a:hover,
.frame-smallbutton:hover {
background-color:#535353;
color:#fff;
}
/***************
Hinweisbox
****************/
.frame-hinweisbox {
float:left;
clear:left;
width:100%;
text-align:center;
}
.frame-hinweisbox h1 {
font-size:1.8em;
font-weight:bold;
}
.frame-hinweisbox p {
font-size:1.2em;
line-height:1.3em;
font-weight:bold;
}
.frame-hinweisbox p a {
margin-top:8%;
font-size:1.1em;
color:#000;
}
.frame-hinweisbox p a:hover {
color:#B5152B !important;
}

/****************
Infobox Spielplan 
*****************/
.frame-eventbox {
float:left;
clear:none;
max-width:300px;
height:500px;
margin-left:1.66%;
margin-right:1.66%;
margin-bottom:3%;
}
/***************
Kopfbild
***************/
.frame-kopfbild {
position:relative;
float:left;
clear:left;
width:100%;
background-color:#B5152B;
overflow:hidden;
}
.frame-kopfbild .ce-textpic,
.frame-kopfbild .ce-gallery,
.frame-kopfbild .ce-outer,
.frame-kopfbild .ce-inner,
.frame-kopfbild .ce-gallery .ce-column,
.frame-kopfbild .ce-gallery .ce-row {
width:100% !important;
margin:0px !important;
}
.frame-kopfbild .ce-gallery figure,
.frame-kopfbild .ce-gallery figure img {
width:100% !important;
height:auto !important;
margin:0px !important;
-webkit-transform: translateX(-0%) !important;
-ms-transform: translateX(-0%) !important;
transform: translateX(-0%) !important;
}
.frame-kopfbild .ce-bodytext {
position:absolute;
z-index:1000;
font-size:1.2em;
width:95%;
padding:1% 2% 1% 3%;
left:0px;
height:auto;
bottom:0px;
background-color: rgba(181,28,43,0.8);
}
.frame-kopfbild .ce-bodytext header h1 {
font-size:1.1em;
text-transform:uppercase;
font-weight:bold;
color:#A7A7A7;
margin:0px;
}
.frame-kopfbild .ce-bodytext h1 {
text-transform:uppercase;
color:#fff;
font-size:2em;
line-height:1.1em;
margin-bottom:0.2em;
}
.frame-kopfbild .ce-bodytext p {
float:left;
color:#fff;
width:80%;
font-weight:bold;
line-height:1.1em;
margin:0px;
}
.frame-kopfbild .ce-bodytext p:last-of-type a {
position:absolute;
right:2%;
bottom:20px;
font-size:0.9em;
color:#fff;
font-weight:bold;
margin-bottom:0px;
background-color: rgba(255,255,255,0.4)
}
.frame-kopfbild .ce-bodytext p:last-of-type a:hover,
.frame-kopfbild .ce-bodytext .frame-textbutton:hover {
background-color: rgba(167,167,167,0.4)
}
/*********
spaltenelement Veranstaltung
**********/
.multicolumnLayout8 .column {
float:left;
width:100%;
}
.multicolumnLayout8 {
float:left;
  width:100%;
padding-bottom:2%;
margin-bottom:2%;
border-bottom:2px solid #000;
}
.multicolumnLayout8 header h1 {
font-size:1.8em;
margin-bottom:0.3em;
}
.multicolumnLayout8 header h2 {
font-size:1em;
font-weight:normal;
font-style: italic;
}
.multicolumnLayout8 header h2:before {
content: 'Kategorie:';
}
.multicolumnLayout8 .column1 p:nth-of-type(1) {
font-size: 1.4em;
font-weight:bold !important;
margin-top:2em;
}
.multicolumnLayout8 p a.frame-textbutton {
float:left;
width:auto;
margin-top:-4em !important;
margin-left:420px;
}
/**********
Menu Übersicht als Buttons 
***********/
.frame-monatsuebersicht {
float:left;
width:100%;
}
.frame-monatsuebersicht ul {
float:left;
  margin: 0 auto;
  list-style-type: none; 
text-transform:uppercase;
}
.frame-monatsuebersicht a {
text-decoration:none;
}
.frame-monatsuebersicht li {
min-width:200px;
  display: inline-block;
  text-decoration: none !important;
  font-weight: bold;
font-size:1.2em;
  line-height: 1em;
  text-align: center;
  text-transform: uppercase;
  padding: 0.9em 10px 0.8em 10px;
  text-shadow: none;
text-decoration:none;
  margin-top: 0.2%;
  margin-bottom: 2%;
margin-left:4px;
margin-right:4px;
  border: none;
  cursor: pointer;
border:2px solid #B5152B;
}
.frame-monatsuebersicht li:hover{
text-decoration:none;
border-color: #000;
}
/****************
Animationen 
******************/
a, a:hover, a:visited, a:active,
.frame-boxrot,
.frame-boxgrau,
.frame-boxrot:hover,
.frame-boxgrau:hover,
.frame-boxrot img,
.frame-boxrot img:hover,

.frame-boxgrau img,
.frame-boxgrau img:hover,
.section-state3 figure a:before,
.section-state3 figure a:hover:before {
transition: background-color 0.8s, border-color 0.8s, color 0.8s, text-decoration 0.8s, filter 0.8s, margin 0.8s;
-o-transition: background-color 0.8s, border-color 0.8s, color 0.8s, text-decoration 0.8s, filter 0.8s, margin 0.8s;
-moz-transition: background-color 0.8s, border-color 0.8s, color 0.8s, text-decoration 0.8s, filter 0.8s, margin 0.8s;
-webkit-transition: background-color 0.8s, border-color 0.8s, color 0.8s, text-decoration 0.8s, filter 0.8s, margin 0.8s;
}