/* _______________________________________________ALLGEMEIN____________ */


@font-face {
    
font-family: 'Average';
    
src:url('font/Average-Regular.woff') format('woff'),
        
url('font/Average-Regular.svg#Average-Regular') format('svg'),
        
url('font/Average-Regular.eot'),
        
url('font/Average-Regular.eot?#iefix') format('embedded-opentype'); 
    
font-weight: normal;
    
font-style: normal;

}

html,body{
width:95vw;
height:101vh;
margin:0;
padding:0;
font-family:"Average", "Modern No. 20", "Times New Roman", "Times", "Georgia", serif; 
font-size:1.5vw;
-webkit-text-size-adjust: 100%;
}

/* _______________________________________________VERLAUF____________ */

#background{
background-image:url("img/Verlauf.png");
background-repeat:repeat-x;
background-position:top 0 left 0;
background-size:5px 100vh;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
}

/* _______________________________________________LOGO_________________ */

#logo{
background-image:url("img/Logo.png");
background-repeat:no-repeat;
background-size:17vh;
position:fixed;
width:13vw;
height:7.5vw;
left:3vw;
top:0.5vw;
}

/* _______________________________________________ANREISSER___________ */

#anreisser{
background-image:url("img/Anreisser.png");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:75vw;
background-position-x:18vw;
position:fixed;
width:100vw;
height:12vh;
}

/* _______________________________________________BACKBUTTON__________ */

#back{
background-color: black;
border-radius: 15px;    
position:fixed;
width:6vw;
height:3vw;
left:91vw;
top:17vh;
display: flex;
justify-content: center;
align-items: center;
font-size:1.3vw;
z-index: 9999;
box-shadow: 0 10px 25px rgba(0,0,0,1);
}


/* _______________________________________________Trennlinie___________ */

#trennung{
position:fixed;
top:13vh;
width:100vw;
height:0.5vw;
border-top:0.15vw solid white;
border-bottom:0.05vw solid white;
}

/* _____________________________________________NAV 1_________________ */

#navigation1{
position:fixed;
top:16vh;
right:23vw;
height:6vh;
}

#navigation1 *{
width:7.3vh;
height:7.3vh;
margin-right:4vw;
float:left;
background-repeat:no-repeat;
text-indent:-9999px;
}

#start{
background-image:url("img/Start.png");
background-size:7vh;
}

#termine{
background-image:url("img/Termine.png");
background-size:7vh;
}

#galerie{
background-image:url("img/Galerie.png");
background-size:7vh;
}


#chronik{
background-image:url("img/Chronik.png");
background-size:7vh;
}

#downloads{
background-image:url("img/Downloads.png");
background-size:7vh;
}

#infos{
background-image:url("img/Info.png");
background-size:7vh;
}

#facebook{
background-image:url("img/Facebook.png");
background-size:7vh;
}

#navigation1 a:hover, #navigation1 a:focus {
border-bottom:0.15vw solid white;
}
/* _____________________________________________NAV 2________________ */

#navigation2{
position:fixed;
top:6vh;
left:0;
}

#navigation2 ul{
padding-left:0;
list-style:none;
width:12vw;
height:22vh;
margin-top:10vh;
}

#navigation2 ul li{
margin-bottom:0.08vw;
height:8vh;
width:12vw;
}

#navigation2 ul li a{
display:block;
color:white;
text-decoration:none;
padding-right:2vw;
padding-top:1vw;
padding-bottom:1vw;
background:black;
border-top-right-radius:2vw;
border-bottom-right-radius:2vw;
font-size:1.5vw;
text-align:right;
height:3.85vh;
width:12vw;
}

#navigation2 a:hover, #navigation a:focus{
width:110%;
}

/* _____________________________________________KATZE________________ */

#katze{
position:fixed;
width:10vw;
height:10vw;
top:80vh;
left:3vw;
background-image:url("img/Katze.png");
background-repeat:no-repeat;
background-size:20vh;
}

/* _____________________________________________CONTENT HEADLINE______ */

#content_headline{
position:fixed;
top:25vh;
left:17vw;
width:60vw;
height:7vh;
font-size:5vh;
display:block;
background-color:FireBrick;
text-align:center;
border-top-left-radius:2vw;
border-top-right-radius:2vw;
color:white;
opacity:0.8;
border-top:0.05vw solid pink;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#content_headline_figures{
position:fixed;
top:15vh;
left:0vw;
width:99vw;
height:7vh;
font-size:5vh;
display:block;
background-color:FireBrick;
text-align:center;
border-top-left-radius:2vw;
border-top-right-radius:2vw;
color:white;
opacity:0.8;
border-top:0.05vw solid pink;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}


/* _____________________________________________CONTENT________________ */

#content{
position:fixed;
top:32vh;
left:17vw;
width:60vw;
height:67vh;
border-bottom:0.05vw solid FireBrick;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#content_bottom{
position:absolute;
width:60vw;
height:67vh;
background-color:darkred;
opacity:0.1;
}

#content_top{
position:absolute;
left:0vw;
top:0vw;
width:56vw;
height:58vh;
background-color:transparent;
font-size:1.7vw;
overflow-y:auto;
color:black;
white-space:pre-wrap;
padding:2vw;
}

#content_figures{
position:fixed;
top:22vh;
left:0vw;
width:99vw;
height:77vh;
border-bottom:0.05vw solid FireBrick;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#content_bottom_figures{
position:absolute;
width:99vw;
height:77vh;
background-color:darkred;
opacity:0.1;
}

#content_top_figures{
position:absolute;
left:0vw;
top:0vw;
width:99vw;
height:74vh;
background-color:transparent;
font-size:1.7vw;
overflow-y:auto;
color:black;
white-space:pre-wrap;
padding:0.5vw;
}

#figure_list_1{
position:absolute;
left:0.3vw;
top:0vw;
width: 23.5vw;
}

#figure_list_2{
position:absolute;
left:25vw;
top:0vw;
width: 23.5vw;
}

#figure_list_3{
position:absolute;
left:50vw;
top:0vw;
width: 23.5vw;
}

#figure_list_4{
position:absolute;
left:75vw;
top:0vw;
width: 23.5vw;
}

.figure:first-of-type {
  margin-top: 0;
}

.figure:not(:first-of-type) {
  margin-top: 1vh;
}

.figure{
font-size:1.5vw;
}

.figure-link{
position: relative;
display:block;
left:0.5vw;
font-size:1vw;
text-indent: -0.5vw;
}

#content_top h1{
font-size:2vw;
margin:0;
}

a {
text-decoration:none;
color:white;
}

.download{
background-image:url("img/pdf.png");
background-size:7vw;
background-repeat:no-repeat;
background-position:center;
display:block;
margin:1vw;
width:10vw;
color:white;
text-decoration:none;
text-align:center;
padding-top:9vw;
font-size:1.5vw;
float:left;
}

#zitat{
font-style:italic;
width:18vw;
color:white;
font-size:2.5vw;
float:left;
margin-right:2vw;
}

.start{
max-width:10vw;
max-height:15vw
min-width:10vw;
}

#salsa_img{
margin-top:3vw;
margin-left:9vw;
margin-right:5vw;
}


#content_top iframe{
width:11vw;
height:10vw;
border:none;
}

#content_top .termine{
width:16vw;
height:12vw;
float:left;
margin:1.1vw;
}

#content_top .termine div{
text-align:center;
width:13vw;
color:white;
margin-left:-2vw;
}

#kontakt{
position:absolute;
font-size:1.5vw;
left:2vw;
top:0vw;
}

#impressum{
position:absolute;
font-size:1.5vw;
margin-left:22vw;
top:0vw;
}

#website{
position:absolute;
font-size:1.5vw;
left:44vw;
top:0vw;
}

#ort{
position:absolute;
font-size:1.5vw;
left:2vw;
top:17vw;
}

.video-box{
float:left;
padding-left:1vw;
padding-bottom:1.5vw;
}

.video{
width:25vw;
height:13vw;
}

.galerie img{
margin:1vw;
max-height:11vw;
max-width:15vw;
float:left;
padding-left:1vw;
}

.galerie img:active, .galerie img:focus{
position:fixed;
top:-9999vw !important;
left:-9999vw !important;
bottom:-9999vw !important;
right:-9999vw !important;
max-width:96.5vw;
max-height:50vw;
width:auto;
height:auto;
padding:0;
margin:auto !important;
border: 1000px solid black;
}

.center-img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* _____________________________________________SIDEBAR HEADLINE______ */

#sidebar_headline{
position:fixed;
top:25vh;
left:77.6vw;
width:20vw;
height:7vh;
font-size:4.5vh;
display:block;
background-color:FireBrick;
text-align:center;
border-top-left-radius:2vw;
border-top-right-radius:2vw;
color:white;
opacity:0.8;
border-top:0.05vw solid pink;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#sidebar_headline *{
margin:0.5vw;
}      

/* _____________________________________________SIDEBAR________________ */

#sidebar{
position:fixed;
top:32vh;
left:77.6vw;
width:20vw;
height:67vh;
border-bottom:0.05vw solid FireBrick;
border-left:0.05vw solid pink;
border-right:0.05vw solid firebrick;
}

#sidebar_bottom{
position:absolute;
width:20vw;
height:67vh;
background-color:darkred;
opacity:0.1;
}

#sidebar_top{
position:absolute;
width:16vw;
height:58vh;
background-color:transparent;
color:black;
font-size:1.5vw;
overflow-y:auto;
white-space:pre-wrap;
padding:2vw;
}

#sidebar_top ul{
white-space:normal;
list-style:none;
padding:0;
margin-top:0;
}

#sidebar_top ul li a{
text-decoration:none;
color:black;
margin-left:2vw;
}


#sidebar_top ul li a:hover{
text-decoration:underline;
color:white;
}

#sidebar_top iframe{
border:none;
white-space:pre-line;
width:13vw;
height:18vw;
margin-left:1vw;
}


#sidebar_top img{
max-width:15vw;
display:block;
margin:0 auto;
}

#figuren {
  background-color: black;
  border-radius: 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5vw;
  padding: 0.2em 0.8em;
  color: white;
  text-decoration: none;
  height: 1.3vw;
  width: 2.6vw;
}

/* _____________________________________________MELDUNG________________ */


#notice {
  display: flex;              
  position: fixed;
  width:100vw;
  height:100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  top:0;
}

#notice > div {
  background-image: url("img/Verlauf.png");
  background-repeat: repeat-x;
  background-size: 5px 100%;
  background-position: top left;
  padding: 20px;
  height: 15vw;
  width: 25vw;
  flex-direction: column;
  align-items: center;   /* horizontal zentrieren */
  text-align: center; 
  border-radius: 12px;
  color: black;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: fadeIn 0.3s ease;
  font-size:2vw;
}

#notice button {
  padding: 8px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 3vh;
  width:8vw;
  height:6vh;
}

/* OK Button */
#notice button:first-of-type {
  background: red;
  color: white;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}