@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto+Condensed:400,700);

* {margin: 0; padding: 0;}

body {
background-image: url(../img/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
font-size: 15px;
overflow-x: hidden;
}
#container {background-color: #DFD6C6;
width: 980px;
margin: 0 auto 0 auto;
box-shadow: rgba(0, 0, 0, 0.40) 0 0 30px 20px;
}
#header {
width: 980px;
}
#headerlinks {background-color:#CDC0A9;
width: 242px;
height:130px;
float: left;
border-bottom: 3px solid white;
}
#start {
padding: 10px 0 0 75px;
float: left;
}
#start a {
color: #A7977A;
text-decoration: none;
display: block;
text-align: center;
border: 1px solid #A7977A;
border-radius:10px;
width: 125px;
}
#start a:hover,  
#start a:focus,
#start #active {
background-color:rgba(255,255,255,0.3);
color: #8C6E39;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
}  
#logo {
display: block;
clear:both;
width: 125px;
padding: 18px 0 0 77px;
}
#headerrechts {background-color:#CDC0A9;
width: 738px;
height: 130px;
float: left;
border-bottom: 3px solid white;
}
#kontakt {
padding-top: 10px;
float: left;
}
ul#kontakt2 li {
padding-right: 10px;
width: 125px;
float: left;
list-style: none;
}
ul#kontakt2 li a {
color: #A7977A;
text-decoration: none;
display: block;
text-align: center;
border: 1px solid #A7977A;
border-radius:10px;
}
ul#kontakt2 li a:hover,  
ul#kontakt2 li a:focus,
ul#kontakt2 #active {
background-color:rgba(255,255,255,0.3);
color: #8C6E39;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
}  
#titel h1 {
font-family: 'Playfair Display';
clear: both;
display: block;
color:white;
font-weight: 700;
font-size: 48px;
text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.30);
}
.stadt {
padding-left: 5px;
font-family: 'Roboto Condensed';
color:white;
font-size: 20px;
letter-spacing: 11px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.30);
}
#banner {
height: 350px;
clear: both;
border-bottom: 3px solid white;
}
#navi {
text-align: center;
clear:both;
width: 980px;
min-height: 30px;
border-bottom: 3px solid white;
}
ul#mainnav{
min-width: 980px;
position: absolute;
}
ul#mainnav li {
width: 245px;
float: left;
list-style: none;
}
ul#mainnav li:first-child {
border-left:none;
}
@-webkit-keyframes startfarbwechsel {
0% {background-color: #D03434;}
50%  {background-color: #8E0000;}
100%  {background-color: #D03434;}
}
@keyframes startfarbwechsel {
0% {background-color: #D03434;}
50%  {background-color: #8E0000;}
100%  {background-color: #D03434;}
}
@-moz-keyframes startfarbwechsel {
0% {background-color: #D03434;}
50%  {background-color: #8E0000;}
100%  {background-color: #D03434;}
}
@-o-keyframes startfarbwechsel {
0% {background-color: #D03434;}
50%  {background-color: #8E0000;}
100%  {background-color: #D03434;}
}
.startfarbwechsel {
-webkit-animation: startfarbwechsel 2s infinite;  
-moz-animation: startfarbwechsel 2s infinite;
-o-animation: startfarbwechsel 2s infinite;      
animation: startfarbwechsel 2s infinite;        
} 
ul#mainnav li:nth-child(1) a {background-color: #8E0000;}
ul#mainnav li:nth-child(2) a {background-color: #560202;}
ul#mainnav li:nth-child(3) a {background-color: #460D0D;}
ul#mainnav li:nth-child(4) a {background-color: #300D0D;
}
ul#mainnav li a {
padding: 6px 0 6px 0;
color: white;
text-decoration: none;
display: block;
text-align: center;
font-size: 15px;
letter-spacing: 1px;
font-weight: 400;
}
ul#mainnav li a:hover,  
ul#mainnav li a:focus, 
ul#mainnav #active {
font-weight: 700;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.30);
outline:none;
}
ul#subnav li {
width: 245px;
float: left;
list-style: none;
border-left: none;
}
ul#subnav li:nth-child(1) a {background-color: #CDC0A9; border-top:3px solid white;}
ul#subnav li:nth-child(2) a {background-color: #CDC0A9; border-top:1px solid white;}
ul#subnav li:nth-child(3) a {background-color: #CDC0A9; border-top:1px solid white;border-radius:0 0 10px 10px;
}
ul#subnav li:last-child {
border-right: none;
}
ul#subnav li a:hover,  
ul#subnav li a:focus, 
ul#subnav #active 
{background: #A7977A;
color: white;
font-weight: 700;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
}
ul#subnav li:last-child:hover {
border-right: none;
} 
ul#subnav2 li {
list-style: none;
border-left: none;
}
ul#subnav2 li:first-child {
border-left:none;
}
ul#subnav2 li a {
color: #765C2D;
border-left:none;
}
ul#subnav2 li {
list-style: none;
border-left: none;
}
ul#subnav2 li:nth-child(1) a {background-color: #CDC0A9; border-top:3px solid white;}
ul#subnav2 li:nth-child(2) a {background-color: #CDC0A9; border-top:1px solid white;}
ul#subnav2 li:nth-child(3) a {background-color: #CDC0A9; border-top:1px solid white;border-radius:0 0 10px 10px;
}
ul#subnav2 li:last-child {
border-right: none;
}
ul#subnav2 li a:hover,  
ul#subnav2 li a:focus, 
ul#subnav2 #active 
{background: #A7977A;
color: white;
font-weight: 700;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear; 
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
}
ul#subnav2 li:last-child:hover {
border-right: none;
}
ul#subnav3 li {
list-style: none;
border-left: none;
}
ul#subnav3 li:first-child {
border-left:none;
}
ul#subnav3 li a {
color: #765C2D;
border-left:none;
}
ul#subnav3 li {
list-style: none;
border-left: none;
}
ul#subnav3 li:nth-child(1) a {background-color: #CDC0A9; border-top:3px solid white;}
ul#subnav3 li:nth-child(2) a {background-color: #CDC0A9; border-top:1px solid white;border-radius:0 0 10px 10px;
}
ul#subnav3 li:last-child {
border-right: none;
}
ul#subnav3 li a:hover,  
ul#subnav3 li a:focus, 
ul#subnav3 #active 
{background: #A7977A;
color: white;
font-weight: 700;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
}
ul#subnav3 li:last-child:hover {
border-right: none;
}
ul#mainnav li ul {display: none;}
ul#mainnav li:hover ul {display: block;}
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
#flex {
display:flex;
}
#mitte {background-color: #DFD6C6;
clear: both;
min-height:400px;
}
#links {background-color: #DFD6C6;
float: left;
width: 242px;
min-height: 400px;
}
#boxlinks {
padding: 110px 35px 0 20px;
text-align: right;
}
#boxlinks ul li {
width: 187px;
list-style: none;
}
#boxlinks ul li a {
color: #8C6E39;
text-decoration: none;
}
#boxlinks ul li ul li {
padding-bottom: 1px;
}
#boxlinks ul li ul li a:hover,
#boxlinks ul li ul li a:focus {
color:#8E0000;
text-decoration: none;
}
#boxlinks ul li a:hover,
#boxlinks ul li a:focus {
color:#8E0000;
font-weight: 700;
}
#boxlinks ul li ul {display:none;}
#boxlinks ul li:hover ul,
#boxlinks ul li:active ul
{display:block;}
#boxlinks li {padding-bottom: 2px;}
#boxlinks li:first-child  {padding-bottom: 20px;}

/*@-webkit-keyframes farbwechsel {
0% {color: #DFD6C6;}
50%  {color: #8C6E39;}
100%  {color: #DFD6C6;}
}
@keyframes farbwechsel {
0% {color: #DFD6C6;}
50%  {color: #8C6E39;}
100%  {color: #DFD6C6;}
}
@-moz-keyframes farbwechsel {
0% {color: #DFD6C6;}
50%  {color: #8C6E39;}
100%  {color: #DFD6C6;}
}
@-o-keyframes farbwechsel {
0% {color: #DFD6C6;}
50%  {color: #8C6E39;}
100%  {color: #DFD6C6;}
}
#boxlinks li:first-child a  {
-webkit-animation: farbwechsel 5s infinite;  
-moz-animation: farbwechsel 5s infinite;
-o-animation: farbwechsel 5s infinite;      
animation: farbwechsel 5s infinite;        
} 
#boxlinks li a:hover,  
#boxlinks li a:focus 
#boxlinks #active {
color:#8E0000;
outline:none;
-webkit-animation: none;  
-moz-animation: none; 
-o-animation: none;      
animation: none; 
}*/
#boxlinks2 img {
padding: 20px 0 20px 0;
}
#boxlinks2 {
padding: 0 35px 0 20px;
text-align: right;
position: absolute;
}
#boxlinks2 ul li {
width: 187px;
list-style: none;
}
#boxlinks2 ul li a {
color: #8C6E39;
text-decoration: none;
}
#boxlinks2 ul li a:hover,
#boxlinks2 ul li a:focus {
color:#8E0000;
}
#boxlinks2 li:last-child a {padding: 5px;
margin-top: 10px;
background-color: #8E0000;
border-radius: 0 10px;
border: 1px solid #8E0000;
text-align: center;
float: right;}
#boxlinks2 li a:hover,  
#boxlinks2 li a:focus,
#boxlinks2 #active {
color: #8E0000;
}
#boxlinks2 li:last-child a {color: white;}
#boxlinks2 li:last-child a:hover,  
#boxlinks2 li:last-child a:focus,
#boxlinks2 #active {
background-color: rgba(255,255,255,0.5);
border: 1px solid white;
color: #8C6E39;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear; 
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
} 
#steg {background-color: #DFD6C6;
float: left;
width: 48px;
min-height: 400px;
}
#rotation{
transform:rotate(-90deg);
}
#rotation p {
color: #8C6E39;
display: block;
min-width: 300px;
margin: 427px 0 0 0;
text-align: right;
font-size: 30px;
}
#rechts {background-color: #DFD6C6;
float: left;
width: 690px;
min-height: 400px;
padding-top: 100px;
}
#programm {
padding: 0 90px 90px 40px;
}
#monate {
padding: 10px 0 10px 0;
clear:right;
width: 650px;
height: 33px;
}
ul#monate2 li {
padding-right: 6px;
float: left;
list-style: none;
}
ul#monate2 li a {
color: #8C6E39;
font-size: 13px;
text-decoration: none;
display: block;
text-align: center;
padding: 5px 2px;
width: 45px;
background-color: rgba(255,255,255,0.5);
border: 1px solid white;
border-radius: 0 10px;
}
ul#monate2 li:nth-child(5) a {background-color: #DFD6C6; color: #fff;
}
ul#monate2 li:nth-child(6) a {background-color: #DFD6C6; color: #fff;
}
ul#monate2 li:nth-child(8) a {background-color: #DFD6C6; color: #fff;
}
ul#monate2 li:nth-child(9) a {background-color: #DFD6C6; color: #fff;
}
ul#monate2 li:nth-child(10) a {background-color: #DFD6C6; color: #fff;
}
ul#monate2 li:nth-child(1) a:hover,  
ul#monate2 li:nth-child(1) a:focus,
ul#monate2 li:nth-child(2) a:hover,  
ul#monate2 li:nth-child(2) a:focus,
ul#monate2 li:nth-child(3) a:hover,  
ul#monate2 li:nth-child(3) a:focus,
ul#monate2 li:nth-child(4) a:hover,  
ul#monate2 li:nth-child(4) a:focus,
ul#monate2 li:nth-child(7) a:hover,  
ul#monate2 li:nth-child(7) a:focus,
ul#monate2 #active {
background-color: #8C6E39;
border: 1px solid #8C6E39;
color: #fff;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear; 
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
} 
.ilink {
padding: 10px 0 10px 5px;
clear:right;
width: 560px;
border-bottom: 1px dotted #8C6E39;
font-size: 30px;
}
#text {
padding: 10px 0 0 5px;
}
#veranstaltungen {
padding: 10px 0 10px 5px;
clear:right;
width: 560px;
border-bottom: 1px dotted #8C6E39;
}
#veranstaltungen a {
text-decoration: none;
}
#veranstaltungen:hover,  
#veranstaltungen:focus, 
#veranstaltungen #active 
{background-color:rgba(255,255,255,0.3);
outline:none;
}
#veranstaltungen a:hover,  
#veranstaltungen a:focus, 
#veranstaltungen #active 
{outline:none;}
#abo {
padding: 10px 0 10px 5px;
clear:right;
width: 560px;
}
.karte {
margin-bottom: 5px;
height: 261px;
width: 555px;
background: url(../img/images/karte.png) no-repeat center center;
background-size: 555px 261px;
-webkit-transition: background-size 2s;
-moz-transition: background-size 2s;
-ms-transition: background-size 2s;
-o-transition: background-size 2s;
transition: background-size 2s;
}
.karte:hover {
background-size: 770px 366px;
}  
.abstand {
text-align: right;
padding-bottom: 25px;
}
.lbox {
padding-right: 50px;
width: 200px;
height: 250px;
float:left;
}
.asu {
padding-bottom: 35px;
}
.aso {
padding-top: 55px;
}
#seitenanfang, #buchen {
padding-top: 20px;
}
#seitenanfang a,
#buchen a {
padding: 3px 0;
width: 150px;
color:#8C6E39;
background-color: rgba(255,255,255,0.5);
font-size: 13px;
text-decoration: none;
text-align: center;
display: block;
border: 1px solid white;
border-radius:10px;
}
#buchen a:hover,  
#buchen a:focus, 
#buchen #active, 
#seitenanfang a:hover,  
#seitenanfang a:focus, 
#seitenanfang #active 
{background-color: #8C6E39;
color: white;
border: 1px solid #8C6E39;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
}
#footer {background-color: #A7977A;
clear: both;
width: 980px;
height: 80px;
border-top: 3px solid white;
}
#adresse {
width: 760px;
float: left;
font-size: 15px;
text-align: right;
}
#adresse p {
display: block;
height: 40px;
padding-top: 22px;   
}
#social {
width: 220px;
float: left;   
}
.social {
float: right;
padding: 10px 90px 0 0;
height: 50px;
overflow: hidden;
}
.social a {
position: relative;
float: left;
width: 50px;
height: 50px;
list-style: none;
text-decoration: none;
}
.social a .image {
position: absolute;
padding: 10px;
width: 30px;
height: 30px;
}
.social a:hover .image {
opacity: 0.0;
outline:none;
}
.social a span {
position: absolute;
width: 50px;
padding: 0;
left: 0;
bottom: -13px;
font-family: 'Roboto Condensed';
font-weight: 700;
font-size: 10px;
text-align: center;
color: white;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.social a:hover span {
bottom: 20px;
outline:none;
}
.social a.facebook {
background-color: rgba(255,255,255,0.5);
border-radius: 10px 0;
}
.social a.youtube {
background-color: rgba(255,255,255,0.5);
margin-left: 5px;
border-radius: 10px 0;
}
.social a.facebook:hover,
.social a.facebook:focus {
background: #1e5799;
border-radius: 10px 0;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear; 
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
}
.social a.youtube:hover,
.social a.youtube:focus {
background: #8E0000;
margin-left: 5px;
border-radius: 10px 0;
outline:none;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;
}
.white {color: #fff;}
.bg {color: #DFD6C6;}
.bgdark {color: #8C6E39;}
.dred {color: #560202;}
.black {color: #000;}
.link {list-style: none;}
.serif {
font-family: 'Playfair Display', serif;
}
.sansserif {
font-family: 'Roboto Condensed', sans-serif;   
}
.text {
font-size: 14px;}
.ts {
font-family: 'Playfair Display', serif;
font-size: 18px;
letter-spacing: 0.5px;
}
.kb {
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
letter-spacing: 0.5px;
}
.datum {
font-family: 'Roboto Condensed';
font-size: 15px;
letter-spacing: 0.5px;
}
.tssl {
font-family: 'Playfair Display', serif;
font-size: 22px;
letter-spacing: 0.5px;
}
.kbsl {
font-family: 'Roboto Condensed', sans-serif;
font-size: 22px;
letter-spacing: 0.5px;
}
.datumsl {
font-family: 'Roboto Condensed', sans-serif;
font-size: 22px;
letter-spacing: 0.5px;
}
.bs {text-align: justify;}
.vs {text-transform: uppercase;}
.cap {text-transform: capitalize;}
.kl {font-size: 12px;}
.bold {font-weight: 700;}
.bgtt {background-color: #000;}
.bgm{background-color: #CDC0A9;}
.sf{color: #8E0000;}
.hr{
padding: 10px 0 10px 5px;
clear:right;
width: 560px;
border-bottom: 1px dotted #8C6E39;}
.hrtop{border-top: 1px dotted #8C6E39;}
.trennung {
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
      }
.dinnerticket {
margin: 10px 0 0 0;
font-size: 10pt;
}
.dinnerticket:last-child {
margin: 10px 0 30px 0;
}