@import url(fundament.css);
@font-face { font-family: 'Fredericka the Great';
             src: url('fonts/FrederickatheGreat-Regular.ttf') format('truetype'); }

/*################## NAVIGATION #####################*/
html, body { font-size: 1em; font-family: Arial, Helvetica, sans-serif; line-height: 1.3; color: #fff; background: #fff; text-align: center; }
#wrapper { margin:0 auto; padding:0; width: 100%; text-align:center; background: #fff; }
#header { margin:0 auto; padding:0; width: 98%; max-width:1100px; height: 80px; position: relative; }

.cc-message { font-size: 91% !important; line-height: 1.3 !important; text-align:left !important;}
.cc-link { display:none; visibility:hidden; }


* html .imieausblenden { display:none; visibility: hidden; }

#logo { position:absolute; top:5px; left: 5px; z-index: 3; width: 30%; height: auto; }

#navi { float:right; height:75px; width:72%; margin:0; padding:0; text-align:right; color:#000; }
#navi ul { float:right; width:100%; margin:34px 0 0 0; height:45px; padding:0; text-align: right;  }
#navi li { display:inline; list-style-type: none; margin:0; padding:0; text-align: left; color:#000; font-size: 96%; font-weight:bold;}
#navi li a { margin:0; padding:0; color:#000; text-decoration:none; height:58px; padding:21px 0 26px 3.5%;  }
#navi li a:hover { color:#000 !important; }
#navi li a:active { color:#000; }
#navi li a:visited { color:#000;  }
#navi li a:focus { background-color: transparent; outline: none; }
#navi .aktiv {  height:75px; color:#000 !important; background: #fff url(../images-design/navi-splash.png) top left no-repeat; background-size: 55px 40px; 
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
* html #navi .aktiv { background: none; color:#76011b !important; }
* + html #navi .aktiv { background: none; color:#76011b !important; }

#navilinks { display:none; visibility: hidden; height:auto; min-height:100px; width:100%; margin:0; margin-bottom:25px; padding:0; text-align:left; color:#fff;  overflow: hidden; }
#navilinks ul { width:100%; margin:25px 0 0 0; padding:0; text-align: left;  }
#navilinks li {  list-style-type: none; margin:0; text-align: left; color:#fff; font-size: 98%; font-weight:bold;}
#navilinks li a { float:left; display:block; width:100%; margin:0; padding:10px 0 13px 5px; color:#fff; text-decoration:none; }
#navilinks li a:hover { color:#fff !important; }
#navilinks li a:active { color:#fff; }
#navilinks li a:visited { color:#fff;  }
#navilinks li a:focus { background-color: transparent; outline: none;  }
#navilinks .aktiv { color:#fff !important; background: url(../images-design/navi-splash.png) top left  no-repeat; 
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
* html #navilinks .aktiv { background: none; color:#76011b !important; }
* html #navilinks li { height: 20px; margin-bottom: 0; margin-top: 0; padding:0; line-height: 1;}
* + html #navilinks .aktiv { background: none; color:#76011b !important; }

#content { margin:0; padding:0; width: 100%; background: #000 url(../images-design/hg.jpg) top left repeat; overflow:hidden; }
#contentinhalt { position:relative; margin:0 auto; padding:30px 10px; width: 98%; max-width:1100px;  overflow:hidden; }

#contentinhalt .fb { position:absolute; top: 15px; right:10px; width: 32px; height:32px; z-index:5; }
#contentinhalt .yt { position:absolute; top: 15px; right:50px; width: 32px; height:32px; z-index:5; }

#contentinhaltlinks { float:left; margin:0; padding:30px 2% 0px 1%; width: 28%; min-height:500px; text-align:left; }
#contentinhaltrechts { float:right; margin:0; padding:10px 0 20px 2%; width: 64%; text-align:left; }

#contentinhalt .dreispaltig { float:left; margin:0; padding:0; width: 32%; overflow:hidden; text-align:left; }
#contentinhalt .dreispaltig.marginright { margin-right: 2%; }

#contentinhalt .kasten, #contentinhaltrechts .kasten { clear:both; margin:22px 0 8px 0; padding:0; width:100%; min-height: 36px; background: #000 url(../images-design/navi-hg.jpg) top left repeat-y; }
#contentinhalt .kasten h3, #contentinhaltrechts .kasten h3 { margin:0; padding: 2% 3%; width: 94%; color:#fff; font-weight:bold; font-size: 100%; }

#contentinhalt .kasten { margin:22px 0 8px 0; padding:0; width:100%; height: 30px; background: #000 url(../images-design/navi-hg.jpg) top left no-repeat; }
#contentinhalt .kasten h3 { margin:0; padding: 6px 0 4px 10px; width: 94%; color:#fff; font-weight:bold; font-size: 100%; }
#contentinhalt .breiter { background-repeat: repeat-x; }

#contentinhalt .gedreht {
  transform:rotate(-2.5deg);
  -ms-transform:rotate(-2.5deg); /* für ältere IE Versionen */
  -moz-transform:rotate(-2.5deg); /* für ältere FireFox Versionen */
  -webkit-transform:rotate(-2.5deg); /*  für ältere Safari und Chrome Versionen */
  -o-transform:rotate(-2.5deg);
  text-align:center;
  margin-bottom:60px;
  width:95%;
}
#contentinhalt .gedreht h2 { margin:0; padding: 0; width: 100%; color:#fff; font-weight:bold; font-size: 150%; }
#contentinhalt .gedreht h3 { margin:0; padding: 0; width: 100%; color:#fff; font-weight:bold; font-size: 115%; }
#header .gedreht { display:none; visibility: hidden; width: 67%; margin-bottom:0px; margin-top: -10px; float:right; color:#000; text-align:center; }
#header .gedreht h2 { margin:0; padding: 0; width: 100%; color:#77031a; font-weight:bold; font-size: 140%; }
#header .gedreht h3 { margin:0; padding: 0; width: 100%; color:#000; font-weight:bold; font-size: 120%; }


#contentinhalt table { width:100%;}
#contentinhalt tr { border-bottom: 1px dashed #76011b; height: 20px; }
#contentinhalt td { padding-right: 20px; font-size: 84%; color:#fff; font-weight:bold; font-family: Arial, Helvetica, sans-serif; }
#contentinhalt td a {  color:#fff; font-weight:normal; }

#contentinhalt h2 { margin:0; padding: 0; width: 100%; color:#fff; font-weight:bold; font-size: 120%; }
#contentinhalt h3 { margin:0; padding: 0; width: 100%; color:#fff; font-weight:bold; font-size: 100%; }
#contentinhalt p { margin:0; padding: 0; width: 100%; color:#fff; font-weight:bold; font-size: 84%; }
#contentinhalt p a { color:#fff !important; }
#contentinhalt p a:hover { color:#fff !important; } 
#contentinhalt p a:active { color:#fff !important; } 
#contentinhalt p a:visited { color:#fff !important; } 
#contentinhalt p a:focus { color:#fff !important; } 

.startseitekopf { text-align:center;  }

#footer { margin:0; padding:0; width: 100%; }
#footerinhalt { margin:0 auto; padding:0; width: 100%; max-width:1100px; }
#footerinhalt p { margin:0; padding: 15px 0; width:98%; color:#000; font-weight:normal; text-align:right; font-size: 84%; }
#footerinhalt p a { color:#000 !important; }

* html #header { width:expression(document.body.clientWidth > 1100? "1100px": "auto" ); }
* html #contentinhalt { width:expression(document.body.clientWidth > 1100? "1100px": "auto" ); }
* html #footerinhalt { width:expression(document.body.clientWidth > 1100? "1100px": "auto" ); }




.button {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  border: none;
font-family: 'Fredericka the Great', cursive;
  font-size:140%;
  color: rgba(255,255,255,1);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #fd1228 , 0 0 70px #fd1228 , 0 0 80px #fd1228 , 0 0 100px #fd1228 ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


#contentinhalt .vierzigjahre {
font-family: 'Fredericka the Great', cursive;
  font-size:140%;
  color: rgba(255,255,255,1);
  margin:0 auto;
  padding:0;
}

#header .vierzigjahren { display:none; visibility: hidden;
float:right; 
width: 67%; margin-bottom:0px; margin-top: 10px; 
  font-family: 'Fredericka the Great', cursive;
  font-size:120%;
  color: #7e7d7d;
  text-decoration: normal;
  text-align: center;
  
}
#header .vierzigjahren  { margin-bottom:0; }
#header .vierzigjahren  h3 { margin:0 auto 15px auto; font-size:120%; }

#header .button { padding-bottom: 15px; }

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.7; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.7; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.7; }
    100% { opacity: 1.0; }
}


/* ########################################################################*/
/* ########################################################################*/
@media all and (min-device-width: 1000px) and (max-device-width: 1080px), all and (min-width: 1000px) and (max-width: 1080px) {
#contentinhalt .gedreht h3 { font-size: 105%; }
#navi li a {  padding:21px 0 26px 2.5%; }
}


/* ########################################################################*/
/* ########################################################################*/
@media all and (min-device-width: 0px) and (max-device-width: 1000px), all and (min-width: 0px) and (max-width: 1000px) {
#header { height: 95px; width:96%; } 
#logo { width: 345px; }

#contentinhalt { width: 94%; padding: 25px 0 } 
#contentinhaltlinks { padding-top: 0px; padding-left: 0%; width: 32%; min-height:400px; margin-bottom:30px; }
#contentinhaltrechts { width: 60%; padding:0; padding-left:0;}
* html #contentinhaltrechts { width: 58%; }
* + html #contentinhaltrechts { width: 58%; }

#navi { width: 60%; padding-right: 30px; }
#navi li { line-height: 26px; display:inline-block; width: 20%; }

#header .gedreht { display:block; visibility: visible; }
#header .vierzigjahren { display:block; visibility: visible; }


.startseitekopf { text-align:center; margin-top:20px; }

#footerinhalt p { width:95%; }
#navi li a {  padding:21px 0 26px 1.5%; } 
 
}
/* ########################################################################*/
/* ########################################################################*/
@media all and (min-device-width: 0px) and (max-device-width: 860px), all and (min-width: 0px) and (max-width: 860px) {
#wrapper { min-width: 800px;}
#navi { width: 55%; }

}

/* ########################################################################*/
/* ########################################################################*/
@media all and (min-device-width: 0px) and (max-device-width: 650px), all and (min-width: 0px) and (max-width: 650px) {

}


/* ########################################################################*/
/* ########################################################################*/
@media print {

}