html {

}

body {
margin: 0;
padding: 0;
top:0;
left:0;
width: 100%;
height: 100%;
position: absolute;
display: block;
background: black;
}

/* Style fuer vergangene Auftritte */
.vorbei {
	color: gray !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin Sans', sans-serif;

}

a {
  color: rgba(255,255,255,1);
    text-decoration: none;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    
}

b, strong {

}

#background {
  z-index: -1;
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

#background img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  }

#logo {
    position: fixed;
    display: block;
    top:20px;
    left:20px;
    width: 30%;
    height:100px;
}




#shadow {
    position: fixed;
    width: 100%;
    height: 100%;
}
#shadow img {
    width:100%;
    height:30%;
}

@keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}







/* SSSSSSSSSSSS */
@media screen and (min-width: 0px) and (max-width: 812px) {
.sidenav a, .dropdown {
    font-size: 14vw;
    line-height: 17vw;
    -webkit-text-stroke-width: 2px;
  }
    
.dropdown-container a {
    font-size:6vw;
    line-height: 7vw;
}
#logo a {
    font-size: 8vw;
}
}

/* MMMMMMMMMMMMM */
@media screen and (min-width: 813px) and (max-width: 1200px) {
.sidenav a, .dropdown {
    font-size: 11vw;
    line-height: 13vw;
    -webkit-text-stroke-width: 2px;
}
.dropdown-container a {
    font-size:4vw;
    line-height: 5vw;
}
#logo a {
    font-size: 7vw;
}
}

/* LLLLLLLLLLLL */
@media screen and (min-width: 1201px) and (max-width: 1920px) {
.sidenav a, .dropdown {
    font-size: 9vw;
    line-height: 10vw;
    -webkit-text-stroke-width: 3px;
}
    
.dropdown-container a {
    font-size:3vw;
    line-height: 3.5vw;
}
#logo a {
    font-size: 5vw;
}
}

/* XXXXXXXXXLLLLLLLLL */
@media screen and (min-width: 1921px) and (max-width: 9999px) {
.sidenav a, .dropdown {
    font-size: 7vw;
    line-height: 8vw;
    -webkit-text-stroke-width: 3px;
}
    
.dropdown-container a {
    font-size:2vw;
    line-height: 2.5vw;
}
#logo a {
    font-size: 5vw;
}
}



/* Fixed sidenav, full height */
.sidenav {
    width: 95%;
    height:auto;
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 20px;
    overflow:auto;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown {
    color: transparent;
    -webkit-text-stroke-color: white;
    text-align: right;
    text-decoration: none;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    width:100%;
    cursor: pointer;
    outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown:hover {
  color: white;

}

/* Main content */
.main {

}

/* Add an active class to the active dropdown button */
.active {
  border-bottom: 4px solid white;
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    padding-top:1vw;
    padding-bottom: 2vw;
    color:green;
    width:100%;
    display: none;
}

.dropdown-container a {
    color:white;
    text-align: right;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: white;
    
}

.dropdown-container a:hover {
    color:transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
}


/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}