html {
height: 100vh;
}

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
background-color: black;
text-align: center;
overflow-x: hidden;
overflow-y: scroll;
}

.responsive {
width: inherit;  /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto;    /* Add !important if needed. */ 
}

.startlogo {
position: absolute;
display: block;
width: 60%;
}
.hide {
	display: none;
}
.center {
height: 100vh;
width: 100vw;
top:50%;
position: absolute;
}

.color_01 {
	color: #161617;
}
.color_02 {
	color: #f5f5f8;
}
.color_03 {
	color: black;
}
.color_04 {
	color: white;
}

.white {
	text-decoration: none;
	font-family: "Nunito Sans", sans-serif;
	font-size: bold;
	color: white;
}

.div {
height: 100%;
width: 100%;
overflow:hidden;
}

.wrapper {
margin-left: 3%;
margin-right: 3%;
position: relative;
height: auto;
}

.div_01 {
background-image: url('../img/backgrounds/bg_01.jpg');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}

.div_02 {
color: #f5f5f8;
height: auto;
background: #FF0080;
background: linear-gradient(128deg, rgba(255, 0, 128, 1) 0%, rgba(22, 22, 23, 1) 100%);
display: flex;
justify-content:flex-start;
flex-direction: row;
flex-flow: column;
}

.div_03 {
color: #f5f5f8;
height: auto;
background: #161617;
background: linear-gradient(279deg, rgba(22, 22, 23, 1) 0%, rgba(63, 63, 69, 1) 100%);
}

.div_04 {
color: #f5f5f8;
height: auto;
background: #FF0080;
background: linear-gradient(128deg, rgba(255, 0, 128, 1) 0%, rgba(22, 22, 23, 1) 100%);
}

.div_05 {
color: #f5f5f8;
height: auto;
background: #161617;
background: linear-gradient(279deg, rgba(22, 22, 23, 1) 0%, rgba(63, 63, 69, 1) 100%);
}

.div_06 {
color: #f5f5f8;
height: auto;
background: #FF0080;
background: linear-gradient(128deg, rgba(255, 0, 128, 1) 0%, rgba(22, 22, 23, 1) 100%);
}

.main_menu {
position: fixed;
bottom: 0px;
left: 0px;
height: 80px;
width: 100%;
text-align: center;
z-index:11111;
display: flex;
align-content:space-between;
backdrop-filter: blur(4px);
margin-right: 20px;
}

.menu_punkt {
color: #f5f5f8;
background-color:rgba(0,0,0,0.80);
font-family: "Nunito Sans", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 0.7em;
letter-spacing: .2em;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 400ms cubic-bezier(0.690, 0.010, 0.925, 0.525);
-moz-transition: all 400ms cubic-bezier(0.690, 0.010, 0.925, 0.525);
-o-transition: all 400ms cubic-bezier(0.690, 0.010, 0.925, 0.525);
-ms-transition: all 400ms cubic-bezier(0.690, 0.010, 0.925, 0.525);
transition: all 400ms cubic-bezier(0.690, 0.010, 0.925, 0.525);
}
.menu_punkt:hover {
background-color: #FF0080;
color: #161617;
-webkit-transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
-moz-transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
-o-transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
-ms-transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
transition: all 200ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
}

.menu_punkt:last-child {

}

.greybox {
background-color: rgba(89, 89, 89, 0.5);
padding: 8px;
display: inline-block;
}

.links_instagram {
color: white;
background: #d6249f;
background: radial-gradient(circle at 0% 100%, #fdf497 0%, #fdf497 5%, #fd5949 35%,#d6249f 60%,#285AEB 90%);
padding: 4px;
padding-left: 8px;
padding-right: 8px;
}

.links_whatsapp {
width: auto;
display: inline-block;
color: white;
background-color: #2fa43f;
padding: 8px;
padding-left: 8px;
padding-right: 8px;
}

.headline {
	position: relative;
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 4em;
	color: #f5f5f8;
	font-family: "Nunito Sans", sans-serif;
	font-weight: bolder;
	text-transform: uppercase;
	z-index: 20;
}
.headline_outline {
	position: absolute;
	overflow: visible;
	left: -11vw;
	top: -20vh;
	font-size: 30vw;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -5px;
	font-style: italic;
	-webkit-text-stroke: 1px deeppink;
	font-family: "Nunito Sans", sans-serif;
	color: rgba(0,0,0,0.00);
	z-index: 0;
}

.uppercase {
text-transform: uppercase;
}
.headline_welcome {
color: #f5f5f8;
font-family: "Nunito Sans", sans-serif;
font-size: 3em;
font-weight: bolder;
line-height: 0.9em;
display: block;
margin-top: 20px;
}

.text_normal {
color: #f5f5f8;
font-family: "Nunito Sans", sans-serif;
font-size: 1em;
}

.event_overview {
	position: relative;
	z-index: 11;
}

.event_overview_detail {
position: relative;
text-align: left;
z-index: 11;
}

.event_single {
	display: flex;
	flex-flow: row wrap;
	font-family: "Nunito Sans", sans-serif;
	text-transform: uppercase;
	font-size: calc(2vw + 0.5vmin);
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 20px;
	background-color: #161617;
}

.event_single_img {
	width: 100%;
	height: 333px;
	background-color: tomato;
}

.event_single_date_day {
font-size: calc(5vw + 0.5vmin);
font-family: "Nunito Sans", sans-serif;
margin-top: 8px;
display: inline-block;
width: auto;
}

.event_single_date_date {
font-size: calc(5vw + 0.5vmin);
font-family: "Nunito Sans", sans-serif;
margin-top: 8px;
display: inline-block;
width: auto;
color: #FF0080;
}

.event_single_headline {
	display: flex;
	text-align: left;
	flex-basis: 100%;
	align-self: flex-start;
	font-family: "Nunito Sans", sans-serif;
	font-weight: bolder;
	font-size: calc(6vw + 1vmin);
	text-transform: uppercase;
	color: white;
}

.event_single_texte {
font-size: 3vw;
font-family: "Nunito Sans", sans-serif;
display: inline-block;
width: auto;
color: white;
}

.event_single_heute {
background-color: red;
font-size: 4vw;
font-family: "Nunito Sans", sans-serif;
font-weight: bolder;
display: block;
position: absolute;
width: auto;
height: auto;
padding-left: 33px;
padding-right: 33px;
left:-6px;
top: 6px;
color: white;
transform: rotate(-6deg);
-webkit-box-shadow: 9px 9px 16px -7px #000000; 
box-shadow: 9px 9px 16px -7px #000000;
}

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.5;
  }
}

.fotos_overview {
position: relative;
z-index: 11;
display: flex;
flex-direction: row;
flex-wrap: wrap;
	align-content: center;
	align-self: center;
	justify-content: center;
}

.thumbnail {
width: 108px;
}

.fotos_single {
display: inline-block;
vertical-align:top;
text-align: left;
margin-right: 10px;
margin-bottom: 10px;
padding: 20px;
background-color:rgba(0,0,0,0.11);
}

.fotos_preview_image {
	width: 15em;
	height: auto;
	aspect-ratio: 1 / 1;
	background-color: greenyellow;
}

.areas_container {
	position: relative;
	z-index: 12;
}
.kontakt_container {
	text-align: left;
	position: relative;
	z-index: 223;
}

.kontakt_headline {
color: #f5f5f8;
font-family: "Nunito Sans", sans-serif;
font-size: 3em;
font-weight: bolder;
line-height: 1.1em;
}

#collapsible {
    cursor: pointer;
	position: relative;
	z-index: 22;
	background-color:rgba(28,28,28,0.24);
	padding: 20px;
}

#collapsible:hover {
}

#collapsible div:nth-child(1) {
}

.hidden {
	display: none;
}

/* 800 */ /* 800 */ /* 800 */ /* 800 */ /* 800 */ /* 800 */ /* 800 */ /* 800 */ /* 800 */ /* 800 */ 
@media (max-width: 800px) {
.headline_outline {
	position: absolute;
	overflow: visible;
	left: -10vw;
	top: -8vh;
	font-size: 36vw;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -5px;
	font-style: italic;
-webkit-text-stroke: 1px deeppink;
color: rgba(0,0,0,0.00);
	z-index: 0;
}

}