@charset "utf-8";

/*******************************************************************************/
/* BASIS LAYOUT   */
/*******************************************************************************/

html {
  height:100%;
  margin:0px;
  padding:0px;
} 

body {
  min-height:100% !important;
  height:100%;
  margin:0;
  padding:0;
  z-index:0;
   overflow-x:hidden !important; 
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;  

    background-attachment: fixed;
    background-image: url("../bilder/main_bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


#wrapper {
  position:relative;
  height:auto;
  min-height:94%;
  width:100%;
  margin-top:0px;
  z-index:8;
  display: block;
  margin:0 auto;
}

#vorhang-top {
  position:fixed;
  /* height:240px; */
  height:125px;
  width:100%;
  margin-top:0px;
  top:0;
  left:0;
  z-index:10;
  display: block;
  
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto; 
}

#vorhang-left {
  position:fixed;
  height:1474px;
  width:344px;
  top:0px;
  left:0;
  z-index:6;
  display: block;
  margin-top:0px;
  margin-left:-15px;
  
  background-image: url("../bilder/vorhang/vorhang_links.png");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: auto; 
}


#vorhang-right {
  position:fixed;
  height:1474px;
  width:344px;
  top:0;
  right:0;
  z-index:6;
  display: block;
  margin-top:0px;
  margin-right:-15px;
  
  background-image: url("../bilder/vorhang/vorhang_rechts.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto; 
}


#person-links {
  position:fixed;
  height:400px;
  width:240px;
  top:0px;
  left:0px;
  z-index:5;
  display: block;
  margin-top:385px;
  margin-left:85px;
  
  background-image: url("../bilder/frau_links.png");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: auto; 

   -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

 

#person-rechts {
  position:fixed;
  height:400px;
  width:230px;
  top:0px;
  right:0px;
  z-index:5;
  display: block;
  margin-top:420px;
  margin-right:55px;
  
  background-image: url("../bilder/mann_rechts.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto; 
  
     -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

#person-rechts-text {
  position:fixed;
  top:450px;
  right:150px;
  width:120px;
  height:100px;  
  z-index:50;
  text-align:center;
   -webkit-transform: rotate(-10deg) translate(0px,-4px);
  -moz-transform: rotate(-10deg) translate(0px,-4px);
  -ms-transform: rotate(-10deg) translate(0px,-4px);
  -o-transform: rotate(-10deg) translate(0px,-4px);
  transform: rotate(-10deg) translate(0px,-4px);

  font-family: 'Pacifico', cursive;
  font-size:16px;
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}



#person-links-text {
  position:fixed;
  top:415px;
  left:190px;
  width:120px;
  height:100px;  
  z-index:50;
  text-align:center;
  -webkit-transform: rotate(8deg) translate(0px,-4px);
  -moz-transform: rotate(8deg) translate(0px,-4px);
  -ms-transform: rotate(8deg) translate(0px,-4px);
  -o-transform: rotate(8deg) translate(0px,-4px);
  transform: rotate(8deg) translate(0px,-4px);

  font-family: 'Pacifico', cursive;
  font-size:16px;

    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}




#rosen1 {
  position:fixed;
  height:200px;
  width:275px;
  top:0px;
  left:0px;
  z-index:20;
  display: block;
  margin-top:650px;
  margin-left:55px;
  
  background-image: url("../bilder/rose_1.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto; 
}

#rosen1:hover {  -webkit-transform: rotate(12deg) translate(0px,-4px);
  -moz-transform: rotate(12deg) translate(0px,-4px);
  -ms-transform: rotate(12deg) translate(0px,-4px);
  -o-transform: rotate(12deg) translate(0px,-4px);
  transform: rotate(12deg) translate(0px,-4px);
  }

#rosen2 {
  position:fixed;
  height:202px;
  width:255px;
  top:0px;
  right:0px;
  z-index:20;
  display: block;
  margin-top:640px;
  margin-right:25px;
  
  background-image: url("../bilder/rose_2.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto; 
}

#rosen2:hover {  -webkit-transform: rotate(-12deg) translate(0px,-4px);
  -moz-transform: rotate(-12deg) translate(0px,-4px);
  -ms-transform: rotate(-12deg) translate(0px,-4px);
  -o-transform: rotate(-12deg) translate(0px,-4px);
  transform: rotate(-12deg) translate(0px,-4px);
  }

#maske {
  position:fixed;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width:108px;
  height:95px;
  z-index:25;
   
  background-image: url("../bilder/theater-maske.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto; 
}

#homelink {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width:330px;
  height:275px;
  z-index:20;
}


.hlink { display:block; width:100%; height:100%;}


.container {
  margin: 0 auto;
  max-width: 770px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position:relative;
  background-color:transparent !important;

}


#header {
  position:relative;
  margin-top:160px;
}

#main-title {  text-align:center; }

#divider {
  width:185px;
  height:106px;
  margin:0 auto;
  margin-top:20px;
 
  background-image: url("../bilder/divider.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto; 
}


#content {
   min-height:500px;
    position:relative;
    z-index:15;
    padding-top:25px;  
    padding-bottom:30px;
 }

#inhalt {
  text-align: center;
}

#page-title {
  margin:0 auto;
  width:100%;
}

#ptitle {
  text-align:center;
  float:left;
  width:66%;
}

.before {
  background: transparent url("../bilder/line.png") repeat-x scroll 0 0;
  background-position:12px left;
  float:left;
  width:17%;
  height:30px;
}

.after {
  background: transparent url("../bilder/line.png") repeat-x scroll 0 0;
  float:left;
  width:17%;
  height:30px;
}

#wrap-footer {
  width:100%;
  display: block;
  position:relative !important;
  height:auto;
  min-height:100px;
  margin-top:0px;
}

#footer-top {
  width:100%;
  height:106px;
  background: url(../bilder/footer_top_bg.png) no-repeat center top; 
}

#footer { position:relative; min-height:85px;   background-color:rgba(0, 0, 0, 0.90);   }
#footer .row { margin-bottom:0px !important; }
#footer .container { padding:5px 15px 0px 15px !important;}
#footer-m1, #footer-m2 {   
  padding:0px !important; 
  width:100%; 
  text-align:center; 
}



#scaramouche {
 position:absolute;
 bottom:160px;
 left:0px;
 width:230px;
 height:287px;
 z-index:-1;
 margin-left:-100px;
 /* display:none; */

 background-image: url("../bilder/scaramouche.png");
 background-position: top left;
 background-repeat: no-repeat;
 background-size: auto; 
}


#columbina {
 position:absolute;
 bottom:150px;
 right:0px;
 width:230px;
 height:307px;
 z-index:-1;
 margin-right:-90px;
 /* display: none; */

 background-image: url("../bilder/colombina.png");
 background-position: -50px right;
 background-repeat: no-repeat;
 background-size: auto; 
}

#fblink {
	position:absolute;
	right:0px;
	bottom:30px;
}

#fblink .fa {
	font-size:2em; 
}


.show-mobile { display:none;  }

#meguralink { max-width:800px; margin:0 auto; text-align:center; padding-bottom:5px;}
.phone { display:none;}



/* Helper Classes */
img {
    width:100%;
    max-width: 100%;
    height: auto;
}

.row {
    margin-left:-15px !important;
    margin-right:-15px !important;
    margin-bottom:20px;    
}


a { outline:none !important; }
a img { outline:none !important; } 

figcaption {
    font-size: 12px !important; 
    line-height: 120% !important;
    padding-top:4px;
}



/* Google Maps Lageplan */
.gm-style-iw {
  color:#333 !important;
}


/* Lightbox */
a.lightbox img {
border:0px solid #E96048 !important;
}

iframe {
    border: medium none;
    width: 100%; 
    background-color:#fff !important;

}


/*******************************************************************************/
/*******************************************************************************/







/*******************************************************************************/
/* NAVIGTION   Desktop */  
/*******************************************************************************/

#navigation { position: relative;  height:80px; background-color:none; z-index:150;    }
#menu {    display: table;    margin: 0 auto;  } 

ul.menu {list-style-type: none; text-decoration: none;  list-style-image: none;  padding-bottom:2px;}
ul.menu ul {   list-style-type: none;   text-decoration: none;  list-style-image: none; background-color:transparent; }

ul.menu li {   
float:left; 
width:auto; 
height:30px; 
padding:0px 6px 0px 6px; 
background:transparent url('../bilder/nav_divider.png') 0px 10px no-repeat;
}


ul.menu li:first-child, ul.menu li:nth-child(2)  {   
 margin-left:0px;
 padding-left:0px;
 background:none;
}

/* ul.menu li:nth-child(2) */


ul.menu li.n5,  ul.menu li:nth-child(5) {   
 margin-right:0px;
 padding-right:0px !important;
}



ul.menu a { 
font-family: 'Droid Serif', serif;
font-size:14px;
font-weight: 400;
line-height: 140%; 
font-style: normal;
color:#000;
-webkit-font-smoothing: subpixel-antialiased;
 -moz-osx-font-smoothing: auto;              

letter-spacing:1px;
display: block; 
text-decoration:none;
text-align:left;  
text-transform:none;
height:100%;
width:100%;
padding:8px 20px 8px 20px; 
}


ul.menu li:hover, ul.menu li a:hover, ul.menu li a.active  {background-color: transparent;   color:#940100 !important; }
ul.menu li.n0, ul.menu li.n6, ul.menu li:first-child { display:none;}
ul.menu li:last-child { display:none;}





/* 2nd Level */
.dropdown {
    position: absolute;
    margin-top:5px;
    display:none;
     left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    border-top: 1px solid #666;
    border-bottom:1px solid #666;

}

.dropdown li {
    display:inline-block !important;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
    /*margin-right:10px;*/
    float:none !important;
}

ul.menu li  .dropdown li:nth-child(2)  {   
width:auto; 
height:30px; 
padding:0px 0px 0px 0px !important; 
background:transparent url('../bilder/nav_divider.png') 0px 10px no-repeat !important;
}


.dropdown li a {  font-size:13px; text-transform:uppercase; color:#666; letter-spacing:0px;}
li.active .dropdown {   display:table; margin:0 auto; margin-top:10px; }








/*fertig nav*/
/*******************************************************************************/
/*******************************************************************************/





/*******************************************************************************/
/* TYPO3 SETTINGS   */
/*******************************************************************************/
/*
.csc-textpic-caption { 
  display:inline-block;
  position: absolute;  
   color:#333; 
  padding-left:10px; 
  padding-top:8px; 
  padding-bottom:8px; 
  
  font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
  font-size:10px; 
  font-weight:700; 

  z-index:200;

  display:table-caption;
  

 background: rgb(255, 255, 255); 
 background: rgba(255, 255, 255, .7);
 height:28px;
 margin-top:-28px !important;
}


div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
    margin-bottom: 10px;
}

.csc-textpic-imagerow { margin-bottom:10px; }


div.csc-textpic-imagecolumn, td.csc-textpic-imagecolumn .csc-textpic-image {
    margin-bottom: 10px;
    margin-right: 10px;
}

div.csc-textpic-imagecolumn.csc-textpic-lastcol, td.csc-textpic-imagecolumn.csc-textpic-lastcol .csc-textpic-image {
    margin-right: 10px;
}


div.csc-textpic, div.csc-textpic div.csc-textpic-imagerow, ul.csc-uploads li {
    overflow: visible;
}*/

/*******************************************************************************/
/*******************************************************************************/





/*******************************************************************************/
/* BOOTSTRAP SETTINGS SETBACK  */
/*******************************************************************************/



/*******************************************************************************/
/*******************************************************************************/





/*******************************************************************************/
/* MAGNIFIC POPUP  */
/*******************************************************************************/

button.mfp-close, button.mfp-arrow {
    cursor: pointer !important;
  }

/*******************************************************************************/
/*******************************************************************************/







/*******************************************************************************/
/* INHALTSSEITEN  */
/*******************************************************************************/

/* Home */
.home #navigation { margin-top:50px; height:60px;  }
.home ul.menu { border-bottom:none !important; }

#button-tickets {
  width:250px;
  height:249px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;

  background-image: url("../bilder/button_tickets.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;

}

#twrapper {
  position: relative;
  width:250px;
  height:249px;
}
#tickets {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: 'Droid Serif', serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing:4px !important;
}

#herein {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: 'Droid Serif', serif;
  font-size: 36px;
	line-height: normal;
  font-weight: 700;
	text-align: center;
  letter-spacing:4px !important;
}

a.ticket-link #tickets, a.ticket-link #herein { 
  color:#fff;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
-ms-transition: color 0.3s;
transition: color 0.3s;
 }

a.ticket-link:hover #tickets, a.ticket-link:hover #herein { color:#000; }
a.ticket-link:hover #button-tickets{  background-image: url("../bilder/button_tickets_hover.png"); }

/*******************************************************************************/
/*******************************************************************************/