/* CSS - style.css SP 6*/

@font-face { font-family: 'TW Cen MT';
             src: url('Font/tw-cen-mt.ttf') format('truetype'); }

 a.normal:link {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 24px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
  color:#BF0000;
  }
 a.normal:visited {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 24px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #BF0000;
  }
 a.normal:hover {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 24px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #BF0000;
  color:#333;
  }

body {
background: url('IMG/bg_blau.png');
}

* {
padding: 0;
margin: 0;
}

#logo { 
background: url('IMG/logo_sprechplanet.png') no-repeat;
background-color: #fff;
width: 390px;
height: 190px;
margin-left: auto;
margin-bottum: 30px;
box-shadow: 0px 5px 6px #999;
}

#nachricht {
float:center;
margin-top: 20%;
background-color: #fff;
box-shadow: 0px 5px 6px #999;
}

#nachricht img {
max-width: 25px;
}

#star img {
height: auto;
width: 80%;
margin-top: 50px;
margin-left: 10%;
margin-bottom: 2%;
max-width: 400px;
}

#herz img {
float:left;
height: auto;
width: 100%;
max-width: 200px;
border-style:solid;
border-color:white;
border-width:10px;
box-shadow: 0px 5px 6px #999;
margin-right: 2%;
}

#karte img {
float:left;
height: auto;
width: 95%;
max-width: 1200px;
}

#star span {
  position: absolute;
  bottom: -12.5px;
  left: 0;
  width: 90%;
  max-width: 200px;
  margin: 10px;
  color: #fff;
  text-align: center;
  height: 2.5em;
  line-height: 1.5em;
  background: #404040; /* Fallback IE 6-8 */
  background-color: rgba(40, 40, 40, 0.6);
}

#star span2 {
  font-size: 10px;
  position: absolute;
  bottom: -12.5px;
  left: 0;
  width: 90%;
  max-width: 200px;
  margin: 10px;
  color: #fff;
  text-align: center;
  height: 1.0em;
  line-height: 0.75em;
  background: #404040; /* Fallback IE 6-8 */
  background-color: rgba(40, 40, 40, 0.6);
}


@media (min-width: 1024px) {
   /* breite Browserfenster */

#menu { 
background: url('IMG/titel_k.png') no-repeat;
background-color: white;
background-position:30% 0%;
background-size: 100% auto;

width: 60%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#menu { 
background: url('IMG/titel_k.png') no-repeat;
background-color: white;
background-position:30% 0%;
background-size: 100% auto;

width: 100%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#menuintern { 
background-color: white;
background-position:30% 0%;
background-size: 100% auto;

width: 60%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#menuintern { 
background-color: white;
background-position:30% 0%;
background-size: 100% auto;

width: 100%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
height: auto;
box-shadow: 0px 5px 6px #999;
}

}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#header { 
width: 60%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
padding: 0px;
height: 0px;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#header { 
width: 100%;
display:-webkit-flex;
display:flex;
margin-left: auto;
margin-right: auto;
padding: 0px;
height: 0px;
}

}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#wrapper { 
width: 60%;
display:-webkit-flex;
display:flex;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#wrapper { 
width: 100%;
display:-webkit-flex;
display:flex;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}

}


#content { 
margin-left: auto;
background: #fff;
padding: 15px;
width: 100%;
box-shadow: 0px 5px 6px #999;
}

#starbox { 
background: #fff;
padding: 5px;
box-shadow: 0px 5px 6px #999;
}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#sidebar { 
position: fixed; 
right: 1%;
top: 30px;
background: #FFF;
padding: 5px;
width: 15%;
box-shadow: 0px 5px 6px #999;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#sidebar { 
display:none;
}

}

#ex {
width: 78%;
height: auto;
}

#ex img {
float: right;
box-shadow: 0px 5px 6px #999;
margin: 20px 10px -30px 0;
}

@media (min-width: 1024px) {
   /* breite Browserfenster */

#footer {
width: 60%;
display:-webkit-flex;
display:flex;
clear: both;
margin: 0 0 30px 0;
margin-left: auto;
margin-right: auto;
background: #BF0000;
height: 120px;
box-shadow: 0px 5px 6px #999;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

#footer {
width: 100%;
display:-webkit-flex;
display:flex;
clear: both;
margin: 0 0 30px 0;
margin-left: auto;
margin-right: auto;
background: #BF0000;
height: 120px;
box-shadow: 0px 5px 6px #999;
}

}

.Copyright {
color: #FFFFFF;
padding: 15px;
}

body {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 20px;
font-style: normal;
font-weight: normal;
}

p {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 26px;
font-style: normal;
font-weight: normal;
padding: 4px;
}

p.start {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 36px;
font-style: normal;
font-weight: bold;
color: white;
margin: 0 0 0 3px;
}


p.sidebar {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 18px;
font-style: normal;
font-weight: normal;
padding: 15px;
}

h1 {
font-family: TW Cent MT, Arial Narrow, Arial;
font-size: 38px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #000000;
}


h2 {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 32px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #000000;
}


h3 {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 28px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #000000;
}

h4 {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 24px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #BF0000;
}

h5 {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 20px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #BF0000;
}

h6 {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 18px;
font-style: normal;
font-weight: bold;
margin: 5px 5px;
padding: 5px;
color: #BF0000;
}

h7 {
font-family: TW Cen MT, Arial Narrow, Arial;
font-size: 18px;
font-style: normal;
margin: 5px 5px;
padding: 5px;
color: #000000;
}

/* Navigation */

@media (min-width: 1024px) {
   /* breite Browserfenster */

.navbar {
width: auto;
}

.navbar li {
list-style: none;
float:left;
display:block;
}

.navbar li a {
float:right;
padding: 15px 20px;
font: bold 20px TW Cen MT, Arial Narrow, Arial;
background: #BF0000;
color: #FFF;
text-decoration: none;
box-shadow: 0px 5px 6px #999;
}

.navbar li a:hover {
background-color: #FFFFFF;
color: #BF0000;
}

}

@media (max-width: 1024px) {
   /* breite Browserfenster */

.navbar {
display:none;
}

}

.sidebar {
margin-left: 10px;
padding: 15px 0 0 0; 
width: 150px;
}

.sidebar li {
list-style: none;
}

.sidebar li a {
padding: 2px 5px;
font: bold 18px TW Cen MT, Arial Narrow, Arial;
color: #FFFFFF;
background-color: #BF0000;
text-decoration: none;
}

.sidebar li a:hover {
background-color: #BF0000;
color: #FFF;
}

.footer {
padding: 15px 0 0 0; 
width: 250px;
}

.footer li {
list-style: none;
}

.footer li a {
float:left;
padding: 2px 5px;
font: bold 18px TW Cen MT, Arial Narrow, Arial;
color: #FFF;
text-decoration: none;
}

.footer li a:hover {
background-color: #FFFFFF;
color: #BF0000;
}

.img {
float:left;
margin: 0 5px 1px 0;
}

.termine {
padding: 0 0 0 25px; 
width: 80%;
color: #00000;
list-style-type:square;
}

.termine li {
font-weight: bold;
}

.linie {
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 0px 5px 5px silver;
width:98%;
}


#flip1 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip2 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip3 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip4 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip5 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip6 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip7 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}
#flip8 {
    border-bottom:3px solid #CE82B5;
    margin-top: 20px;
    box-shadow: 0px 5px 5px silver;
    width:95%;
}

#panel1 {
    padding: 25px;
    display: none;
}
#panel2 {
    padding: 25px;
    display: none;
}
#panel3 {
    padding: 25px;
    display: none;
}
#panel4 {
    padding: 25px;
    display: none;
}
#panel5 {
    padding: 25px;
    display: none;
}
#panel6 {
    padding: 25px;
    display: none;
}
#panel7 {
    padding: 25px;
    display: none;
}
#panel8 {
    padding: 25px;
    display: none;
}

.form {
    margin-left:5px;
    margin-right:auto;

    max-width: 60%;
    background: #D2E9FF;
    padding: 20px 20px 20px 20px;
    font: 18px TW Cen MT, Arial Narrow, Arial;
    color: #666;
}

/* Popup */

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 60%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: TW Cen MT, Arial Narrow, Arial;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #BF0000;
}

.popup .close:hover {
  color: #333;
}
.popup .content {
  max-height: 60%;
  overflow: auto;
}

@media screen and (max-width: 10240x){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }