*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
   margin: 0px;
    -webkit-text-size-adjust: 100%; 
}

body,* {
   font-family: 'Brandon Text Regular','Trebuchet MS', 'Lucida Sans', Tahoma, sans-serif;
}

h1,h2,h3 {
   font-family: 'Brandon Text Medium','Trebuchet MS', 'Lucida Sans', Tahoma, sans-serif;
   color: #000;
   font-weight: normal;
   /* letter-spacing:0.08em;*/
}

b, strong {
   font-family: 'Brandon Text Medium';
   font-weight: normal;
   color: #000;
}

p {
   color: #777;
}

img { 
   border: 0; 
   image-rendering: auto;
   image-rendering: optimizeQuality;
   -webkit-transform: none;
   /* transform: rotate( .0001deg ); */
   width: 100%;
   height: auto;
}

img.moz-image-scale-hack {
   image-rendering: auto;
   transform: rotate( .0001deg ); 
}

img.align_right {
   float:right;
}

img.icon {
   display:inline-block;
   height:1.5em;
   width:auto;
   vertical-align: -40%;
   margin: 0.2em;
}
img.arrowicon {
   display:inline-block;
   height:1.1em; 
   width:auto;
   vertical-align: -30%;
   margin: 0.2em;
}

ul
{
   list-style-type: none;
   padding:0px;
   margin:0px;
}

a:link, a:visited, a:hover, a:active
{
   font-style: normal;
   font-variant: normal;
   color: #777;
   font-weight: normal;
   text-decoration: underline;
}

a:hover, a:active {
   color: #000;
   text-decoration: underline;
}

.smallitalic {
   font-size:0.8em;
   font-style:italic;
}

button.kaufen {   
   font-style: normal;
   font-variant: normal;
   color: #752429;
   background-color: #FFF; /* ex-green #C2E1A5;  */
   font-weight: bold;
   text-decoration: none;

   padding-left:22px;
   padding-bottom:4px;
   line-height:1.5em;
   background-image: url("./images/arrow.png");
   background-repeat: no-repeat;
   background-position: 0px 3px;   

   border:none;
   cursor:pointer;
   font-size:1.2em;
}

button.kaufen_n {   
   font-style: normal;
   font-variant: normal;
   color: #000;
   background-color: #FFF; 
   font-weight: bold;
   text-decoration: none;

   border:none;
   cursor:pointer;
   font-size:1.2em;
}

.underground {
   font-family: "Underground NF",Helvetica, sans-serif;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   font-size:1.5em;
}

.clearfix:before, .clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

span.myarrow {
   padding-top:0.2em;
   padding-bottom:0.2em;
   line-height:1.5em;
   background-image: url("./icons/arrow.svg");
   background-repeat: no-repeat;
   background-position: left center;   
}

span.mysmall {
   font-size:80%;
}

/*---------------------------------------------------------------------*/
/*----------------------------- Content, Header -------------------------*/

#header {
   position:fixed;
   top:0px;
   left:0px;
   width:100%;
   z-index:100;
   background-color:rgba(255,255,255,0.93);
   border-bottom: solid;
   border-bottom-width: 1px;
   border-bottom-color: rgba(200,200,200,0.93);
}

#header-back {
   position:fixed;
   top:0px;
   left:0px;
   width:100%;
   z-index:10;
   background-color:#FFF;
}

#header li,
#header li a
{
   color: #000;
   font-weight: normal;
}

#fixfoot {
   position:fixed;
   bottom:0px;
   left:0px;
   width:100%;
   z-index:90;
   padding-left:25px;
   background-color: rgba(225,225,225,0.93);
   color: #555;
   /* font-size:100%; */
   font-size:120%;
   /* letter-spacing:0.08em; */
   padding-top:0.6em;
   padding-bottom:0.6em;
   cursor: pointer;
}
 
#background {
   position: fixed;
   top:0px;
   width:100%;
   overflow: hidden;
   z-index:-1;
}
#background .slide a {
   display:block;
   width:100%;
}

/*
#background img {
   position:absolute;
   top:0px;
   width:100%;
   height:auto;
   border:0;
}
    
#background .slide a {
   position:absolute;
   top:0px;
   display:block;
   width:100%;
   padding-top:56.25%;
      background-image:  url("empty.png");
      background-repeat: repeat;
   background: none;
}

#background .s_current a {
   z-index:4;
}
*/
    
#main {
   margin-top: 500px;
   padding-top:20px;
   padding-bottom:20px;
   background-color: #FFF;
   overflow: hidden;
}
 
#mobilemenu {
   position:relative;
   z-index:100;
   display:none;
   padding:10px;
   margin-top: 20px;
   margin-right:20px;
   float: right;
   font-size:150%;
   line-height: 1.0em;
}
#mobilemenu .date {
   display: inline-block;
   font-family: 'Brandon Text Medium';
   /* color: #777;   */
   margin-right: 20px;
   font-size: 50%;
} 

#mobilebottom {    /* mobile-underground-scroll-prevent-spacer */
   display:none;
   height: 300px;
}
 
#smallnavi {
   position: absolute;
   z-index:110;
   top:1px;
   right:20px;
   font-size:80%;
}

#smallnavi .date {
   display: inline-block;
   font-size: 120%;
   font-family: 'Brandon Text Regular';
   /* color: #777;   */
   margin-right: 3em;
} 

#the_heading {
   margin-top:  0.7em;
   margin-bottom: 0.2em;
}
 
.archiveHeading {
   font-size: 40%;
}
 
/*---------------------------------------------------------------------*/
/*------------------- Navi   ------------------------------------------*/
ul.navi {
   position: relative;
   float:right;
   padding-top:25px; 
   padding-right:10px;
   position: relative;
   z-index:100;
   display:block;
   font-size:80%;
   width: 60%;
}

ul.navi>li {
   padding: 10px;
   padding-left: 2.5%;
   padding-right: 2.5%;
   float:left;
}

ul.navi>li a,
ul.navi>li a:link,
ul.navi>li a:visited,
ul.navi>li a:hover,
ul.navi>li a:active
{
   text-decoration:none;
}

ul.navi>li>div {
   width: 20px;
   overflow:visible;
}

ul.navi>li ul{
   font-size: 90%;
   width:450px;  /* width 180px */
   padding-top: 0.4em;
   padding-bottom: 0.4em;
   display:none; 
}

ul.navi>li ul li, ul.navi>li ul li a {
   font-family: 'Brandon Text Light';
}

ul.navi>li ul li{
   padding-top:3px;
   padding-bottom:3px;
}

ul.navi>li ul li a,
ul.navi>li ul li a:link,
ul.navi>li ul li a:visited,
ul.navi>li ul li a:hover,
ul.navi>li ul li a:active
{
   text-decoration:none;
   color: #000; 
   font-weight: normal;
}

ul.navi>li ul li.current a,
ul.navi>li ul li a:hover,
ul.navi>li ul li a:active
{
   font-family: 'Brandon Text Medium';
   color: #000;
}

#header ul.navi>li,
#header ul.navi>li>a,
#header ul.navi>li>a:link,
#header ul.navi>li>a:visited
{
   /* font-family: 'Brandon Text Medium'; */
   font-family: 'Brandon Text Light'; 
}

#header ul.navi li.current,
#header ul.navi>li>a:hover,
#header ul.navi>li>a:active,
#header ul.navi li.navihover {
   color:#000;
   font-family: 'Brandon Text Medium';
}     


#smallnavi a,
#smallnavi a:link,
#smallnavi a:visited,
#smallnavi a:hover,
#smallnavi a:active
{
   text-decoration:none;
   color: #000;  /* #777 */
   font-weight: normal;
}

#smallnavi a:hover,
#smallnavi a:active
{
   color: #000;
   font-family: 'Brandon Text Medium';
}

ul.navi>li ul li {
   opacity: 1.0;
}

/*----              End Navi                                       ----*/
/*---------------------------------------------------------------------*/

#logo {
   position:absolute;
   top:0px;
   padding-left:30px;     
   padding-bottom:0px;     
}

#logo img {
   margin-top:10px;
   margin-bottom:0px;
   height:40px; 
   width:auto;
}

#logo .date {
   position:absolute;
   bottom:3px;
   right:3px;
   z-index:1;
   font-family: 'Brandon Text Light';
   font-size: 110%;
   color:#555;
   letter-spacing:0.15em;
}
 
/*------ min-height image container - adjusted per javascript ------*/
.minheightimg {
   width:100%;
   overflow:hidden;
}   
.minheightimg img{
   margin: 0px;
   width:100%;
   height:auto;
}   
 
/*---------------- columns --------------------*/
.colgroup {
   padding-left:4%;
   padding-right:4%;
}

.colgroup:before, .colgroup:after {   /* clearfix + side padding */
   content: " ";
   display: table;
}

.colgroup:after {
   clear: both;
}
 
.col1 {
   width:100%;
   padding-left:15px;
   padding-right:15px;
   float:left;
}

.col2 {
   width:50%;
   padding-left:15px;
   padding-right:15px;
   float:left;
}

.col2 p {
   margin: 0px;
   padding-top:0.5em;
   padding-bottom:0.5em;
}

.col4 {
   width:25%;
   padding-left:15px;
   padding-right:15px;
   float:left;
}
 
.col2_o {
   width:50%;
   float:left;
}

.col2_4 {
   width:50%;
   padding-left:15px;
   padding-right:15px;
   float:left;
}

/*--------- text-drittel ----------------------------------------------*/
.fullcol_2_3 {
   width:66.67%;
   float:left;
}
.fullcol_1_3 {
   width:33.33%;
   float:left;
}

.fullcol_1_3 div.text{
   padding-left: 20px;
   padding-right:20px;
}

.image_description {
   padding-left: 20px;
   padding-right: 20px;
   font-style:italic;
   font-size:75%;
   color: #777;
}

.dataOutL, .dataOutR {
   width: 66.66%;
   padding: 4px;
}
.dataOutL {
   float:left;
}
.dataOutR {
   float:right;
}

.dataBlock {
   width: 100%;
   padding: 30px;
   padding-top: 0.6em;
   padding-bottom: 10px;

   border: solid;
   border-color: #CCC;
   border-width:1px;

   color: #777;
   font-size:80%;
}
.dataBlock:before, .dataBlock:after {   /* clearfix */
   content: " ";
   display: table;
}
.dataBlock:after {
   clear: both;
}

.dataIn {
   width: 50%;
   float:left;
   padding-left:5px;
   padding-right:5px;
}

@media only screen and (max-width: 549px) {  
   .fullcol_2_3 {
      width:100%;
   }
   .fullcol_1_3 {
      width:100%;
   }
}
@media only screen and (min-width: 550px) {  
   .fullcol_2_3 {
      width:100%;
   }
   .fullcol_1_3 {
      width:100%;
   }
}

@media only screen and (min-width: 700px) {  
   .fullcol_2_3 {
      width:66.67%;
   }
   .fullcol_1_3 {
      width:33.33%;
   }
   .fullcol_1_3 div.text{
      font-size: 65%;
   }
}

@media only screen and (min-width: 850px) {  
   .fullcol_1_3 div.text{
      font-size: 75%;
   }
}

@media only screen and (min-width: 1000px) {  
   .fullcol_1_3 div.text{
      font-size: 85%;
   }
}

@media only screen and (min-width: 1200px) {  
   .fullcol_1_3 div.text{
      font-size: 100%;
   }
}

/*---------------------------------------------------------------------*/
     
/*-------------------------------------------*/
/*--------------------*/
/*--- Sprachwahl -----*/
#header ul.lang_select
{
   display:inline-block;
   list-style-type: none;
   padding: 0px;
   margin: 0px;
}

#header ul.lang_select li
{ 
   display: inline-block; 
   margin-right:0.1em;
   margin-right:0.1em;
}

#header ul.lang_select li,
#header ul.lang_select li a,
#header ul.lang_select li a:link,
#header ul.lang_select li a:visited
{ 
   color: #000; /* #777;  */
   font-weight:normal;
   font-family: 'Brandon Text Light'; 
}

#header ul.lang_select li.current_lang,
#header ul.lang_select li a:hover,
#header ul.lang_select li a:active
{ 
   color: #000; 
   font-family: 'Brandon Text Medium'; 
}

/*---------------------------------------------------------------------*/
/*------------ foot ---------------------------------------------------*/

#foot {
   width: 100%;
   background-color: #FFF;
   padding-top: 50px;
   padding-bottom: 100px;
}

#foot div.share{
   padding-left:4%;
   padding-right:4%;
   font-size:85%;
   width: 100%;
   padding-bottom: 0.3em;
}

#foot>ul {
   padding-top: 20px;
   padding-left:4%;
   padding-right:4%;
   
   border-top: solid;
   border-top-color: #CCC;
   border-top-width:1px;

   font-size:85%;
   width: 100%;
}   

#foot>ul>li
{
   display:block;
   float:left;
   width: 33.33%;
   padding: 5px;
   padding-bottom: 1.2em;
}

#foot>ul li a,
#foot>ul li a:link,
#foot>ul li a:visited,
#foot>ul li a:hover,
#foot>ul li a:active
{
   text-decoration:none;
}

#foot>ul>li,
#foot>ul>li>a:link,
#foot>ul>li>a:visited
#foot>ul>li:first-child a:link,
#foot>ul>li:first-child a:visited
{
   color: #454545;
}

#foot>ul>li>a:hover,
#foot>ul>li>a:active
#foot>ul>li:first-child a:hover,
#foot>ul>li:first-child a:active
{
   color: #000;
}


#foot>ul>li ul{
   font-size:75%;
}   
#foot>ul>li ul li{
   padding-top: 0.2em;
   padding-bottom: 0.2em;
}

#foot>ul>li:first-child ul{
   font-size:100%;
}   

#foot>ul>li:first-child ul li{
   padding-top: 1.0em;
}   

@media only screen and (max-width: 549px) {  
   #foot>ul>li {
      width: 50%;
   }
}

@media only screen and (min-width: 550px) {  
   #foot>ul>li {
      width: 50%;
   }
}

@media only screen and (min-width: 700px) {  
   #foot>ul>li {
      width: 33.33%;
   }
}

@media only screen and (min-width: 850px) {  
   #foot>ul>li {
      width: 25%;
   }
}

@media only screen and (min-width: 1000px) {  
   #foot>ul>li {
      width: 16.66%;
   }
}

/*------------ foot end -----------------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Newslist -----------------------------------------*/

.newsBlock {
  margin-left:-0.7%;   /* trick to remove small side paddings */
  margin-right:-0.7%;  
  width: 101.4%;
  position: relative;
}

.newsDiv {
  width: 100%;
  padding-top:4px;
  border-top: solid;
  border-top-color: #CCC;
  border-top-width:1px;
  margin-bottom:15px;
  padding-right:2%;
}

.newsDiv:first-child {
  border-top-color: #FFF;
}

.newsCol {
  width: 33.33%;
  float:left;
}

.newsCol>a {
   display: block;
   line-height: 0px;
}

.newsCol img.news{
  width: 100%;
  height: auto;
}

.newsText {
  width: 100%;
  padding-left: 3%;
  padding-right: 1%;
  font-size:100%;
}

.newsText h1, .newsText h2,  .newsText h3, .newsText p
{
   margin-top:0.3px;
   margin-bottom:0.3em;
   font-weight: normal;
}
.newsText h1{
  font-size: 200%;
}
.newsText h2{
  font-size: 170%;
}
.newsText h3{
  font-size: 150%;
}

.newsVideo {
   position: relative;
   width:  100%;
   padding: 0px;
   padding-top: 56.25%;  /* fix aspect ratio 16:9 */
   overflow: hidden;
}

.newsVideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: 11;
}

@media only screen and (max-width: 649px) {  
   .newsText h1, .newsText h2,  .newsText h3, .newsText p
   {
      margin-top:0.7em;
      margin-bottom:0.5em;
   }
   .newsCol {
      width: 100%;
   }
   .newsText {
      padding-left:  4%;
      padding-right: 4%;
      font-size:100%;
   }
   .newsDiv {
      padding-left:0px;
      padding-right:0px;
      margin-bottom:30px;
   }
}

@media only screen and (min-width: 650px) {  
  .newsCol {
     width: 50%;
  }
   .newsText {
      font-size:80%;
   }
}

@media only screen and (min-width: 850px) {  
  .newsCol {
     width: 33.33%;
  }
   .newsText {
      font-size:80%;
   }
}

@media only screen and (min-width: 1050px) {  
   .newsText {
      font-size:90%;
   }
}

@media only screen and (min-width: 1200px) {  
   .newsText {
      font-size:100%;
   }
}

@media only screen and (min-width: 1350px) {  
   .newsText {
      font-size:110%;
   }
}


/*------------------- end newslist ------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Filmform ----------------------------------------*/

#film_form .outer{
   width:100%;
   padding:4px;
}
#film_form .inner{
   width:100%;
   border: solid;
   border-color: #CCC;
   border-width:1px;
}

#film_form table {
   width:100%;
   font-size:90%;
}
#film_form table col.li,
#film_form table tr td:first-child
{
   width: 120px;
/*   max-width: 120px;
     min-width: 120px;*/
}
#film_form table input,
#film_form table textarea
 {
   width: 100%;
   font-size:90%;
}

#film_form .colgroup {
   padding-top: 1.5em;
   padding-bottom: 1.5em;
   border-bottom: solid;
   border-bottom-color: #E5E5E5;
   border-bottom-width:1px;
}
#film_form .colgroup:last-of-type {
   border-bottom-color: #FFF;
}

#film_form .col1,
#film_form .col2 {
   padding-left:18px;
   padding-right:18px;
}
#film_form button {
   font-size:120%;
}

/*------------------- end filmform ------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Newsletter --------------------------------------*/

#aboform table col.li,
#aboform table tr td:first-child,
#removeform table col.li,
#removeform table tr td:first-child
{
   width: 5.3em;
}

#aboform .col1,
#removeform .col1
{
   padding-left:8px;
   padding-right:4px;
}

#aboform .col2,
#removeform .col2
{
   padding-left:8px;
   padding-right:4px;
}
#aboform .col4,
#removeform .col4
{
   padding-left:8px;
   padding-right:4px;
}

#aboform .col3l,
#removeform .col3l
{
   float:left;
   padding-left:8px;
   padding-right:4px;
}

#aboform .col3,
#removeform .col3
{
   float:left;
   padding-left:8px;
   padding-right:4px;
}

#removeform button {
   font-size:100%;
}

#aboform_error, #removeform_error {
   color:#b00;
}

@media only screen and (max-width: 599px) {  
   #aboform .col3,
   #removeform .col3,
   #aboform .col3l,
   #removeform .col3l
   {
      width: 100%;
   }
}
@media only screen and (min-width: 600px) {  
   #aboform .col3,
   #removeform .col3
   {
      width: 50%;
   }
   #aboform .col3l,
   #removeform .col3l
   {
      width: 100%;
   }
}
@media only screen and (min-width: 800px) {  
   #aboform .col3,
   #removeform .col3,
   #aboform .col3l,
   #removeform .col3l
   {
      width: 33%;
   }
}

/*------------------- end Newsletter ----------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Partner -----------------------------------------*/

.partnerDiv, .partnerDiv_6, .partnerDiv_4 {
   width: 100%;
   padding:4px;
   display:none;
}

.partnerCol {
  width: 25%;
  float:left;
   padding: 2px;
}

.partnerCol div.partner_16_9 /* fix aspect ratio 16:9 */
 {
   position:relative;
   width:100%;
   border: solid;
   border-color: #CCC;
   border-width:1px;
   padding: 0px;
   padding-top: 56.25%;  /* fix aspect ratio 16:9 */
}

.partnerCol div.partner_square /* fix aspect ratio 1:1 */
 {
   position:relative;
   width:100%;
   border: solid;
   border-color: #CCC;
   border-width:1px;
   padding: 0px;
   padding-top: 100%;  /* fix aspect ratio 1:1 */
}

.partnerCol div.partner_square_borderless /* fix aspect ratio 1:1 */
 {
   position:relative;
   width:100%;
   border: solid;
   border-color: #FFF;
   border-width:1px;
   padding: 0px;
   padding-top: 100%;  /* fix aspect ratio 1:1 */
}

.partnerCol p{
   position:absolute;
   overflow: hidden;
   top: 0px;
   padding: 8px;
   padding-top: 10%;
   margin:0px;
   width: 100%;
   height: 100%;
   color: #777;  /*ex-white*/
   font-weight:normal;
   font-family: 'Brandon Text Light'; 
   
   text-align: center;
   font-size: 110%;
}

.partnerCol img {
   position:absolute;
   padding: 8px;
   top: 0;           /* trick for vertical align */
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: auto;
   margin: auto;   
}

.partnerCol img.wide
{
   width: 100%;
   height: auto;
}

@media only screen and (max-width: 849px) {  
  .partnerDiv_4 {
     display:block;
  }
  .partnerDiv_6 {
     display:none;
  }
  .partnerCol {
    width: 25%;
  }
  .partnerCol p{
     font-size: 120%;
  }
}  

@media only screen and (max-width: 600px) {  
  .partnerCol p
  {
     font-size: 100%;
  }
}
@media only screen and (max-width: 399px) {  
  .partnerCol p
  {
     font-size: 70%;
  }
}


@media only screen and (min-width: 850px) {  
  .partnerDiv_4 {
     display:none;
  }
  .partnerDiv_6 {
     display:block;
  }
  .partnerCol {
    width: 16.66%;
  }
  .partnerCol p{
     font-size: 120%;
  }
}  

/*------------------- end partner -------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Team    -----------------------------------------*/

.teamCol_L {
   width:50%;
   padding-left:15px;
   padding-right:15px;
   float:left;
}
.teamCol_R {
   width:50%;
   padding-left:15px;
   padding-right:15px;
   float:right;
}

.teamDiv, .teamDiv_6, .teamDiv_4, .teamDiv_2{
   width: 100%;
   padding:4px;
   display:none;
}

.teamBlock_2 {
   width:100%;
   border: solid;
   border-color: #CCC;
   border-width:1px;
   margin-bottom:4px;
}

.teamCol {
   width: 50%;
   float:left;
   padding: 2px;
   font-size: 90%;
}

.teamCol div.team_square /* fix aspect ratio 1:1 */
 {
   position:relative;
   width:100%;
   border: solid;
   border-color: #CCC;
   border-width:1px;
   padding: 0px;
   padding-top: 100%;  /* fix aspect ratio 1:1 */
}

.teamCol div.team_square_borderless /* fix aspect ratio 1:1 */
 {
   position:relative;
   width:100%;
   border: solid;
   border-color: #FFF;
   border-width:1px;
   padding: 0px;
   padding-top: 100%;  /* fix aspect ratio 1:1 */
}

.teamCol .teamText{
   position:absolute;
   overflow: hidden;
   top: 0px;
   padding: 0.7em;
   padding-left: 1.5em;
   padding-right: 1.5em;
   
   margin:0px;
   width: 100%;
   height: 100%;
   color: #777;  /*ex-white*/
   font-weight:normal;
   font-family: 'Brandon Text Regular'; 
}

.teamCol .teamText_2{
   padding: 0.7em;
   padding-left: 1.5em;
   padding-right: 1.5em;
   
   margin:0px;
   width: 100%;
   color: #777;  /*ex-white*/
   font-weight:normal;
   font-family: 'Brandon Text Regular'; 
}

.teamCol .teamText p,
.teamCol .teamText_2 p,
{
   padding: 0px;
   margin: 0px;
}

.teamColEmpty {
  display:block;
}

/*-------------*/
.teamDiv_2 {
   display:block;
}
.teamDiv_4 {
   display:none;
}
.teamDiv_6 {
   display:none;
}

.teamCol {
   width: 50%;
}
.teamColEmpty {
   display:none;
}
  
.teamCol {
   font-size: 65%;
}

@media only screen and (max-width: 399px) {  
  .teamCol_L {
     font-size: 85%;
  }
}

@media only screen and (min-width: 400px) {  
  .teamCol {
     font-size: 75%;
  }
}

@media only screen and (min-width: 500px) {  
  .teamCol {
     font-size: 90%;
  }
}

@media only screen and (min-width: 600px) {  
  .teamCol {
     font-size: 100%;
  }
}

@media only screen and (min-width: 700px) {  
  .teamCol {
     font-size: 110%;
  }
}

@media only screen and (min-width: 800px) {  
  .teamDiv_2 {
     display:none;
  }
  .teamDiv_4 {
     display:block;
  }
  .teamCol{
     font-size: 70%;
     width: 25%;
  }
  .teamColEmpty {
    display:block;
  }
}

@media only screen and (min-width: 900px) {  
  .teamCol{
     font-size: 80%;
  }
}

@media only screen and (min-width: 1100px) {  
  .teamDiv_2 {
     display:none;
  }
  .teamDiv_4 {
     display:none;
  }
  .teamDiv_6 {
     display:block;
  }
  .teamCol {
     width: 16.66%;
     font-size: 70%;
  }
}  

@media only screen and (min-width: 1200px) {  
  .teamCol {
     font-size: 75%;
  }
}

@media only screen and (min-width: 1300px) {  
  .teamCol {
     font-size: 85%;
  }
}

/*------------------- end team -------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- general tiles -----------------------------------*/

.tileDiv, .tileDiv_6, .tileDiv_3 {
   margin-top: 70px;
   margin-bottom: 30px;
   width: 100%;
   padding:4px;
   display:none;
}

.tileCol {
   width: 50%;
   float:left;
   padding: 2px;
   font-size: 90%;
}

.tileCol div.tile_square 
 {
   position:relative;
   width:100%;
   border: solid;
   border-color: #CCC;
   border-width:1px;
}

.tileCol div.tile_square_borderless 
 {
   position:relative;
   width:100%;
   border: solid;
   border-color: #FFF;
   border-width:1px;
}

.tileCol div.tile_square,
.tileCol div.tile_square_borderless 
 {
   padding: 0px;
   padding-top: 56.25%;  
}

.tileCol .tileText{
   position:absolute;
   overflow: hidden;
   top: 0px;
   padding: 1.0em;
   
   margin:0px;
   width: 100%;
   height: 100%;
   color: #777;  /*ex-white*/
   font-weight:normal;
   font-family: 'Brandon Text Regular'; 
}

.tileCol .tileText p{
   padding: 0px;
   margin: 0px;
}

.tileColEmpty {
  display:block;
}

/*-------------*/
.tileDiv_3 {
   display:block;
}
.tileDiv_6 {
   display:none;
}

.tileCol {
   width: 100%;
}
.tileColEmpty {
   display:none;
}
  
.tileCol {
   font-size: 90%;
}

@media only screen and (min-width: 400px) {  
  .tileCol {
     font-size: 100%;
  }
}

@media only screen and (max-width: 499px) {  
   /* single col tiles: no fixed height */
  .tileCol div.tile_square {  
     padding-top:0px;
  }
  .tileCol .tileText {
     position: relative;
  } 
}

@media only screen and (min-width: 500px) {  
  .tileCol {
     font-size: 70%;
     width: 50%;
  }
  .tileCol .tileText{
     padding: 0.5em;
  } 
}

@media only screen and (min-width: 600px) {  
  .tileCol {
     font-size: 80%;
  }
  .tileCol .tileText{
     padding: 1.0em;
  } 
}

@media only screen and (min-width: 700px) {  
  .tileCol {
     font-size: 70%;
     width: 33.33%;
  }
  .tileColEmpty {
    display:block;
  }
  .tileCol div.tile_square,
  .tileCol div.tile_square_borderless 
  {
     padding-top: 100%;  
  }
  .tileCol .tileText{
     padding-top: 2.0em;
  } 
}

@media only screen and (min-width: 850px) {  
  .tileCol div.tile_square,
  .tileCol div.tile_square_borderless 
  {
     padding-top: 56.25%;  
  }
  .tileCol .tileText{
     padding-top: 1.0em;
  } 
}

@media only screen and (min-width: 900px) {  
  .tileCol{
     font-size: 80%;
  }
}

@media only screen and (min-width: 1100px) {  
  .tileCol {
     font-size: 90%;
  }
}  

@media only screen and (min-width: 1200px) {  
  .tileCol {
     font-size: 100%;
  }
}

@media only screen and (min-width: 1500px) {  
/*  .tileDiv_3 {
     display:none;
  }
  .tileDiv_6 {
     display:block;
  }
  .tileCol {
     width: 16.66%;
     font-size: 70%;
  }
  .tileCol .tileText{
     padding: 0.7em;
  }*/ 
}

/*------------------- end tile -------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Filmlist -----------------------------------------*/

.filmListDiv {
  margin-left:-0.7%;   /* trick to remove small side paddings */
  margin-right:-0.7%;  
  width: 101.4%;
  position: relative;
  padding-bottom:10px;
}

.filmCol {
  width: 33.33%;
  float:left;
  padding: 2px;
}



@media only screen and (max-width: 549px) {  
  .filmCol {
    width: 100%;
  }
  .filmCol div.roll
  {
     font-size: 100%;
  }
}

@media only screen and (min-width: 550px) {  
  .filmCol {
    width: 50.0%;
  }
  .filmCol div.roll
  {
     font-size: 75%;
  }
}  

@media only screen and (min-width: 700px) {  
  .filmCol {
    width: 50%;
  }
  .filmCol div.roll
  {
     font-size: 90%;
  }
}  

@media only screen and (min-width: 850px) {  
  .filmCol {
    width: 33.33%;
  }
  .filmCol div.roll
  {
     font-size: 75%;
  }
}  

@media only screen and (min-width: 1000px) {  
  .filmCol div.roll
  {
     font-size: 95%;
  }
}  

@media only screen and (min-width: 1200px) {  
  .filmCol div.roll
  {
     font-size: 110%;
  }
}  

/*------------------- end filmlist ------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Film---------------------------------------------*/

/*
.filmCol_2_3 {
  width: 66.6%;
  height: 100%;
  float:left;
  padding: 0px;

  border-right: solid;
  border-right-color: #CCC;
  border-right-width:1px;
}

.filmColRegie {
  width: 64.0%;
  height: 100%;
  float:right;
  padding: 15px;
  margin-right: 2.6%;
  border: solid;
  border-color: #CCC;
  border-width:1px;
}

.filmCol_1_3 {
  width: 33.3%;
  float:left;
  padding: 0px;
  margin-left:-1px;  
  border-left: solid;
  border-left-color: #CCC;
  border-left-width:1px;
}
*/
.filmDiv {
  padding-top:4px;
  width: 100%;
  position: relative;
  padding-bottom:0px;
}

.filmCol_2_3 {
  width: 66.6%;
  height: 100%;
  float:left;
  padding: 0px;
}

.filmColRegie {
  width: 66.66%;
  height: 100%;
  float:right;
  padding: 0px;
  padding-left: 4px;
  padding-right: 4px;
}

.filmCol_1_3 {
  width: 33.3%;
  float:left;
  padding: 0px;
}

.filmCol_2_3 div.slideshow {
   width: 100%;
   padding:0px;
   padding-top: 56.25%;
}

.filmCol_2_3 div.slideshow div.slide{
   position: absolute;
   top: 0px;
   width:  100%;
   height: 100%;
   overflow: hidden;
}

.filmCol_2_3 div.slideshow div.slide img{
   width:  100%;
   height: auto;
}

#trailer {
   display: none;
   position: absolute;
   top: 0px;
   width:  100%;
   height: 100%;
   overflow: hidden;
   z-index: 10;
}

#trailer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: 11;
}

#trailerbutton {
   cursor: pointer;
}

#trailerbutton .show  {
   display: inline;
}
#trailerbutton .hide  {
   display: none;
}

.filmText {
   padding: 30px;
   padding-top:15px;
   padding-bottom:4px;
}

.filmText .datetime {
   font-family: 'Brandon Text Medium';
   font-weight: normal;
   font-size:1.2em;
   color: #000;
}

.filmDataOut {
   width: 100%;
   padding: 4px;
   padding-bottom:0px;
}

#film_data {
   width: 100%;
   padding: 30px;
   padding-top: 0.6em;
   padding-bottom: 10px;

   border: solid;
   border-color: #CCC;
   border-width:1px;

   color: #777;
   font-size:80%;
}

#film_data ul li {
   display:inline;
}

#film_regie {
   padding: 4px;

   border: solid;
   border-color: #CCC;
   border-width:1px;

   color: #777;
}

#film_regie>div.inner {
   width:100%;
   position:relative;
}

#film_regie_bild img {
   position:absolute;
   
   width: 100%;
   height: auto;
   top: -200px;
   bottom: -200px;
   left: 0px;
   right: 0px;
   margin: auto;
   z-index: 2;
}

#film_regie_bild {
   position:absolute;
   overflow: hidden;
   width: 50%;
   height: 100%;
   z-index: 1;
   top:0px;
   left:0px;
   background-color: #000;
}

.regie_space {
   float: left;
   padding-top:20%;
   padding-left:1px;
}

#film_regie_text {
   width: 50%;
   font-size: 70%;
   float: right;
   padding: 4px;
   padding-left: 10px;
}

#film_regie_bild_2 {
   width: 25%;
   float: left;
}

#film_regie_bild_2 img{
   display:block;
}

#film_regie_text_2 {
   width: 75%;
   font-size: 70%;
   float: right;
   padding: 4px;
   padding-left: 10px;
}

/*-----*/
.regieDiv {
   width: 100%;
   padding-top:2px;
}

#film_regie_bild_3 {
   width: 25%;
   float: right;
   padding:2px;
   padding-left:4px;
   padding-right:1px;
}

#film_regie_bild_3 img{
   display:block;
}

.film_regie_tile_3 {
   width: 33.33%;
   float: right;
   padding:2px;
   padding-right:4px;
   padding-left:3px;
}

.film_regie_tile_3>.inner {
   border: solid;
   border-color: #CCC;
   border-width:1px;
}

.film_regie_text_3 {
   padding:10px;
   padding-left:25px;
   padding-right:20px;
}

.regie_space_3 {
   float: left;
   padding-top:100%;
   padding-left:1px;
   padding-bottom:0px;
}
/*-----*/


#filmtitel {
   padding-bottom: 1.0em;
}

#filmtitel div.ib {
   display: inline-block;
}

#film_data span.title {
   font-size:1.2em;
   font-family: 'Brandon Text Medium';
   font-weight: bold;
   color: #000;
}

#film_data span.links {
   font-family: 'Brandon Text Medium';
   font-weight: normal;
   color: #000;
}

@media only screen and (max-width: 549px) {  
  .filmCol_2_3,
  .filmCol_1_3 {
     width:100%;
  }   
  .filmColRegie
  {
     width:100%;
  }   
  .filmDataOut
  {
     width:100%;
     padding-right:4px;
  }   

  #film_regie_bild {
     position: relative;
     width: 100%;
     padding: 0px;
     padding-top: 50%;
  }
  .regie_space {
     float: left;
     padding-top:0%;
     padding-left:0%;
  }

  #film_regie_text {
     width: 100%;
     font-size: 65%;
     float: right;
  }

  #film_regie_bild_2 {
     width: 50%;
  }

  #film_regie_text_2 {
     width: 50%;
     font-size: 75%;
  }

  #film_regie_bild_3 {
     width: 33.33%;
  }

  .film_regie_tile_3 {
     width: 66.67%;
  }

  .regie_space_3 {
     /*=== bild/regie * 4/3 ===*/
     padding-top:65.8%;
     padding-bottom:0px;
  }
  .film_regie_text_3 {
     font-size: 80%;
     padding-left:10px;
  }
}

@media only screen and (min-width: 550px) {  
  .filmCol_2_3,
  .filmCol_1_3 {
     width:100%;
  }   
  .filmColRegie
  {
     width:100%;
  }   
  .filmDataOut
  {
     width:100%;
     padding-right:4px;
  }   
  #film_regie_bild {
     width: 50%;
     height: 100%;
  }
  .regie_space {
     float: left;
     padding-top:20%;
     padding-left:1px;
  }

  #film_regie_text {
     margin: 0px;
     width: 50%;
     font-size: 60%;
     float: right;
  }

  #film_regie_bild_2 {
     width: 33.33%;
  }

  #film_regie_text_2 {
     width: 66.67%;
     font-size: 75%;
  }

  #film_regie_bild_3 {
     width: 33.33%;
  }

  .film_regie_tile_3 {
     width: 66.67%;
  }

  .regie_space_3 {
     /*=== bild/regie * 4/3 ===*/
     padding-top:66%;
     padding-bottom:0px;
  }
  .film_regie_text_3 {
     font-size: 90%;
     padding-left:10px;
  }
}  

@media only screen and (min-width: 700px) {  
    .filmCol_2_3 {
      width: 66.6%;
    }

    .filmCol_1_3 {
      width: 33.3%;
    }
    .filmDataOut
    {
       width:100%;
       padding-right:0px;
    }   
    .filmColRegie
    {
       width:100%;
    }   
   .filmText {
      font-size:75%;
      padding-left:20px;
   } 
   #film_data
   {
      font-size:75%;
   } 
   #film_regie_bild {
      width: 33.33%;
      padding-left:20px;
      left:0px;
      right: auto;
   }
  .regie_space {
     padding-top:16.66%;
  }

   #film_regie_text {
      width: 66.66%;
      font-size: 60%;
      float: right;
   }
   
  #film_regie_bild_2 {
     width: 25%;
  }

  #film_regie_text_2 {
     width: 75%;
     font-size: 75%;
  }

  #film_regie_bild_3 {
     width: 25%;
  }

  .film_regie_tile_3 {
     width: 33.33%;
  }

  .regie_space_3 {
     /*=== bild/regie * 4/3 ===*/
     padding-top:100%;
     padding-bottom:0px;
  }

  .film_regie_text_3 {
     font-size: 75%;
     padding-left:15px;
  }
}  

@media only screen and (min-width: 850px) {  
    .filmColRegie
    {
       width:66.66%;
    }   
   .filmText {
      font-size:80%;
      padding-left:30px;
   } 
   #film_data
   {
      font-size:80%;
   } 
   #film_regie_bild {
      width: 50%;
      left:0px;
      right: auto;
      padding-left:0px;
   }
  .regie_space {
     padding-top:20%;
  }

   #film_regie_text {
      width: 50%;
      font-size: 60%;
      float: right;
   }
  #film_regie_bild_2 {
     width: 33.33%;
  }

  #film_regie_text_2 {
     width: 66.67%;
     font-size: 75%;
  }

  #film_regie_bild_3 {
     width: 16.667%;
  }

  .regie_space_3 {
     /*=== bild/regie * 4/3 ===*/
     padding-top:66%;
     padding-bottom:0px;
  }

  .film_regie_text_3 {
     font-size: 80%;
     padding-left:25px;
  }
}  

@media only screen and (min-width: 1000px) {  
   .filmText {
      font-size:90%;
   } 
   #film_data
   {
      font-size:85%;
   } 
   #film_regie_text {
      font-size: 65%;
   }
  #film_regie_bild_2 {
     width: 25%;
  }

  #film_regie_text_2 {
     width: 75%;
     font-size: 80%;
     padding-left: 15px;
     padding-right: 15px;
  }
  .film_regie_text_3 {
     font-size: 90%;
  }
}  

@media only screen and (min-width: 1100px) {  
  #film_regie_text_2 {
     width: 75%;
     font-size: 85%;
  }
}  

@media only screen and (min-width: 1200px) { 
   .filmText {
      font-size:110%;
   } 
   #film_data
   {
      font-size:90%;
   } 
   #film_regie_text {
      font-size: 70%;
   }

  #film_regie_bild_2 {
     width: 20%;
  }

  #film_regie_text_2 {
     width: 80%;
     font-size: 90%;
     padding-left: 20px;
     padding-right: 20px;
  }
  .film_regie_text_3 {
     font-size: 110%;
  }
} 
 
@media only screen and (min-width: 1350px) { 
   .filmText {
      font-size:110%;
   } 
   #film_data
   {
      font-size:100%;
   } 
  #film_regie_text_2 {
     width: 80%;
     font-size: 100%;
  }
  .film_regie_text_3 {
     font-size: 110%;
  }
}  

/*------------------- end film ----------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Venues -----------------------------------------*/

.venueDiv {
  margin-left:-0.7%;   /* trick to remove small side paddings */
  margin-right:-0.7%;  
  width: 101.4%;
  position: relative;
  padding-bottom:10px;
}

.venueCol {
  width: 33.33%;
  float:left;
  padding: 2px;
}

.venueCol img {
   width: 100%;
   height: auto;
}
.venueCol div.subtext {
   width: 100%;
   padding-left:4%;
   padding-right:4%;
   padding-top: 0.8em;
   padding-bottom: 20px;
   min-height: 10em;
}


@media only screen and (max-width: 549px) {  
  .venueCol {
    width: 100%;
  }
}

@media only screen and (min-width: 550px) {  
  .venueCol {
    width: 50.0%;
  }
}  

@media only screen and (min-width: 700px) {  
  .venueCol {
    width: 50%;
  }
}  

@media only screen and (min-width: 850px) {  
  .venueCol {
    width: 33.33%;
  }
}  

@media only screen and (min-width: 1000px) {  
}  

@media only screen and (min-width: 1200px) {  
}  

/*------------------- end venues   ------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Galerie -----------------------------------------*/

.galDiv {
  margin-left:-0.7%;   /* trick to remove small side paddings */
  margin-right:-0.7%;  
  width: 101.4%;
  position: relative;
  padding-bottom:10px;
  line-height: 0.5em;
  overflow: hidden;
}

.galCol {
  width: 33.33%;
  float:left;
  padding: 2px;
  overflow: hidden;
}

.galCol a {
   display: block;
   margin:0px;
   padding: 0px;
}   



@media only screen and (max-width: 549px) {  
  .galCol {
    width: 50%;
  }
}

@media only screen and (min-width: 550px) {  
  .galCol {
    width: 33.33%;
  }
}  

@media only screen and (min-width: 850px) {  
  .galCol {
    width: 25%;
  }
}  

@media only screen and (min-width: 1000px) {  
  .galCol {
    width: 20%;
  }
}  

@media only screen and (min-width: 1200px) {  
  .galCol {
    width: 16.66%;
  }
}  

/*------------------- end Galerie ------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*------------------- Responsiveness-----------------------------------*/
    
/*--- menu icon switch  ---*/    
@media only screen and (max-width: 699px) {  /* menu switch at 700*/
   #mobilemenu {
      display:block;
   }
   #mobilebottom {
      display:block;
   }
   /* #smallnavi .date {
      display:none;
   }*/
   ul.navi {
      display: none;
      position: fixed;
      top: 60px;
      bottom:0px;
      overflow: auto;
      width:100%;
      background-color:rgba(255,255,255,0.93);
      font-size:100%;
   }
   ul.navi li {
      width: 100%;
   }
   ul.navi>li>div {
     width: 100%;
     overflow:visible;
   }
   ul.navi>li ul {
     width: 100%;
     height: auto !important;
     display:block !important;
     font-size:80%;
   }
   ul.navi>li ul li{
      display:block !important;
      opacity: 1.0 !important;
   }
}
@media only screen and (min-width: 700px) {  /* menu switch at 700*/
   ul.navi {
      display: block !important;
   }   
}
/*---------------- end menu icon switch  ---*/    

@media only screen and (max-width: 399px) {  /* small mobile */
   #logo {
     padding-left:15px;     
     top:8px;
   }
   #logo img {
      height:35px; 
      width:auto;
   }
   #logo .date {
      bottom:3px;
      right:1px;
      font-size: 70%;
   }
   #mobilemenu {
      padding:10px;
      margin-top: 20px;
      margin-right:20px;
      padding-bottom: 8px;
   }
   #smallnavi {
     right:15px; 
     font-size:70%    
   }
   #smallnavi .date {
      font-size: 100%;
   }
   #fixfoot {
      padding-left:53px;     
      font-size:100%;
   }
    
   .col1, .col2, .col4, .col2_o, .col2_4{
      width: 100%;
   }

}
@media only screen and (min-width: 400px) {  /* mobile */
   #logo {
      padding-left:20px;     
      top:3px;
   }
   #logo img {
      height:40px; 
      width:auto;
   }
   #logo .date {
      bottom:2px;
      right:2px;
      font-size: 80%;
   }
   #smallnavi {
      right:20px;     
      font-size:70%    
   }
   #smallnavi .date {
      font-size: 100%;
   }
   #fixfoot {
      padding-left:64px;     
      font-size:100%;
   }
   .col2, .col4, .col2_o, .col2_4 {
      width: 100%;
   }
}

@media only screen and (min-width: 600px) {  /* desktop */
   .colgroup {
      padding-left:6%;
      padding-right:6%;
   }
   .col2, .col2_o{
      width: 100%;
   }
   .col4, .col2_4 {
      width: 50%;
   }
   #fixfoot {
      font-size:130%;
   }
   #the_heading {
      font-size:300%;
   }   
   #smallnavi .date {
      font-size: 120%;
      margin-right: 3em;
   }
}
@media only screen and (min-width: 850px) {  /* desktop */
   #logo {
      padding-left:30px;     
   }
   #logo img {
      height:60px; 
      width:auto;
   }
   #logo .date {
      bottom:5px;
      right:3px;
      font-size: 90%;
   }
   #smallnavi {
      right:30px;     
      font-size:80%    
   }
   #smallnavi .date {
      font-size: 140%;
      margin-right: 4em;
   }
   #fixfoot {
      padding-left:95px;     
      font-size:150%;
   }
   ul.navi {
      padding-top:40px; 
      padding-right:10px;
      font-size:90%;
      width:55%;
   }
   ul.navi li{
      padding-bottom:10px;
      padding-left: 2%;
      padding-right: 2%;
   }
   ul.navi>li ul {
      font-size: 90%;
   }
   ul.navi>li ul li {
      opacity: 0.01;
   }
   .colgroup {
      padding-left:8%;
      padding-right:8%;
   }
   .col2, .col2_o, .col2_4 {
      width: 50%;
   }
   .col4 {
      width: 25%;
   }
   #the_heading {
      font-size:400%;
   }   
}

@media only screen and (min-width: 950px) {  /* desktop */
   #logo .date {
      bottom:3px;
      right:3px;
      font-size: 100%;
   }
   ul.navi {
      padding-top:40px; 
      padding-right:10px;
      font-size:100%;
      width:60%;
   }
   ul.navi li{
      padding-bottom:10px;
      padding-left: 2.5%;
      padding-right: 2.5%;
   }
}

@media only screen and (min-width: 1100px) {  /* large */
   #logo {
     padding-left:35px;     
   }
   #logo img {
      height:70px; 
      width:auto;
   }
   #logo .date {
      bottom:5px;
      right:3px;
      font-size: 110%;
   }
 
   #smallnavi {
     right:35px;     
     font-size:85%    
   }
   #fixfoot {
      padding-left:110px;     
      font-size:170%;
   }
   ul.navi {
      padding-top:45px; 
      padding-right:10px;
      font-size:110%;
   }
   ul.navi>li  {
      padding-left: 2.5%;
      padding-right: 2.5%;
      padding-bottom:12px;
   }
   ul.navi>li ul {
      font-size: 90%;
   }
}

/*----              End Responsiveness                             ----*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/* IMAGE LIGHTBOX SELECTOR */

html
{
   /* killing 300ms touch delay in IE */
   -ms-touch-action: manipulation;
   touch-action: manipulation;
}

#imagelightbox
{
    cursor: pointer;
    position: fixed;
    z-index: 10000;

    -ms-touch-action: none;
    touch-action: none;
}


/* ACTIVITY INDICATION */

#imagelightbox-loading
{
    display: none;

    width: 3.5em; /* 40 */
    height: 3.5em; /* 40 */
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.625em; /* 10 */
    margin: -1.25em 0 0 -1.25em; /* 20 */
    opacity:0.5;
}
#imagelightbox-loading
{
    -webkit-animation: fade-in .25s linear;
    animation: fade-in .25s linear;
}
    @-webkit-keyframes fade-in
    {
        from	{ opacity: 0; }
        to		{ opacity: 1; }
    }
    @keyframes fade-in
    {
        from	{ opacity: 0; }
        to		{ opacity: 1; }
    }
#imagelightbox-overlay
{
    display: none;
    background-color: #fff;
    opacity: 0.8;
    position: fixed;
    top:0px;
    width: 100%;
    height: 100%;
    z-index: 9998;
}

#imagelightbox-caption
{
   display: none;
   text-align: center;
   font-style:italic;
   font-size:80%;
   color: #777;
   background-color: #FFF;
   position: fixed;
   z-index: 10001;
   left: 0;
   right: 0;
   bottom: 0;
   
   padding-top:    1.0em; 
   padding-bottom: 1.5em; 
   padding-left:  10%;
   padding-right: 10%;
   border-top: solid;
   border-top-width: 1px;
   border-top-color: #CCC;
}

#imagelightbox-close
{
   display: none;
   width: 2.5em; /* 40 */
   height: 2.5em; /* 40 */
   text-align: right;
   color:#777;
   position: fixed;
   z-index: 10002;
   top: 0.2em; 
   right: 2%; 
   font-size:300%;
   cursor: pointer;
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*----  tinyMCE  ------------------------------------------------------*/

.tinymcewysiwyg h1 {
}
.tinymcewysiwyg h2 {
   font-size: 1.2em;
   margin-bottom:3px;
}
.tinymcewysiwyg h3 {
   font-size: 1.2em;
   font-weight:normal;
   margin-bottom:3px;
}

.tinymcewysiwyg p {
   margin-top:3px;
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

/**
 * The edit link that appears when you are logged in.
 * It is recommended that you implement an edit button 
 * in your templates to make it easy to switch to and
 * from the admin control panel when editing pages. 
 *
 */
#editpage {
	position: absolute;
	top: 0;
	left: 0; 
	padding: 5px 6px; 
	background: #db1174; 
	color: #fff; 
	display: block;
	font-weight: normal; 
	z-index:11000;
}

#editpage a,
#editpage a:link,
#editpage a:visited
{
	color: #fff; 
}
#editpage a:hover,
#editpage a:active
{
	color: #000; 
}
#debug
{
    margin:0px;
    font-size:80%;
    
	color: #fff; 
}

.editMark {
    display:block;
	padding: 6px; 
	background: #db1174; 
	color: #fff; 
	font-weight: bold; 
}
/*---------------------------------------------------------------------*/
/*----  Pagination  ------------------------------------------------------*/

.MarkupPagerNav {
        clear: both;
        margin: 1em 0; 
        font-family: Arial, sans-serif;
}
.MarkupPagerNav li {
	display: inline;
	list-style: none;
	margin: 0;
}

.MarkupPagerNav li a,
.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: block;
	float: left;
	padding: 2px 9px;                
	color: #fff;
	background: #2f4248;
	margin-right: 3px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}
                
.MarkupPagerNav li.MarkupPagerNavOn a,
.MarkupPagerNav li a:hover {
	color: #fff;
	background: #db1174;
	text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: inline;
	color: #777;
	background: #d2e4ea;
	padding-left: 3px;
	padding-right: 3px;
}

/*---------------------------------------------------------------------*/

/*--------------------*/
/*--- slideshow ------*/

.slideshow {
   position: relative;
   background-color:#FFF;
   width:100%;
}

.slide {
   position: absolute;
   top:0px;
   width: 100%;
   z-index:0;
   display:none;
   background-color:#FFF;
}

.s_next div, .s_next img {
   /* ie opacity problem */
   position:relative;
   filter: inherit;
}

.slideshow div.text {
   background-color:#000; /*fallback for missing rgba*/
}
.slideshow div.text {
   position:absolute;
   bottom:0px;
   z-index:3;
   background-color:#000;
   background-color: rgba(55,55,55,0.7);
   padding: 10px;
   padding-left:50px;
   padding-right:50px;
   color:#FFF;
}

.s_current {
   z-index:1;
   display:block;
}

.s_next {
   z-index:2;
   opacity:0.0;
}

.s_next_halt {
   z-index:2;
   opacity:0.0;
}

/*-------------------------------------------*/

/*--------------------*/
/*--- Rouleau --------*/

.rolltest {
   margin:0px;
   width:100%;
   position: relative;
   background-color:#000;
   z-index:0;
   padding: 0px;
   padding-top: 56.25%;  /* fix aspect ratio 16:9 */
}
.rolltest a {
   display: block;
   position: absolute;
   top: 0px;
   width: 100%;
   height:100%;
   z-index:3;
   opacity: 0.0;
}

.rolltest div.roll {
   background-color: #000; /*fallback for missing rgba*/
}
.rolltest div.roll {
   background-color: rgba(55,55,55,0.7);
   color: #FFF;
   padding:0.5em;
   padding-left: 1.0em;
   padding-right: 1.0em;
   position: absolute;
   bottom: 0px;
   z-index: 1;
   width: 100%;
   height:2.0em;
   overflow: hidden;
}
.rolltest div.roll p,
.rolltest div.roll b,
.rolltest div.roll strong
{
   color: #FFF;
}

.rolltest div.roll p,
{
   padding:0px;
   margin:0px;
   padding-top: 0.6em;
}

.rolltest img {
   position: absolute;
   width:100%;
   height: auto;
   top: 0px;
   z-index:0;
}

/*---------------------------------------------------------------------*/
/*----------------------------- Forms ---------------------------------*/

form.InputfieldForm ul.Inputfields {
  list-style-type: none;
}

form.InputfieldForm ul.Inputfields li.Inputfield label{
    font-weight:bold;
}

form.InputfieldForm ul.Inputfields li.Inputfield {
   margin-right:25px;
   margin-bottom:25px;
}

form.InputfieldForm span.ui-state-error {
   color: #C20000;
}