/*************************************
*************** Variables ************
**************************************/

:root {
	--black: #000;
	--white: #fff;
	--second-color: #1100f5;

	--first-font-family: 'Moderat-Regular';
	--first-font-size: 1.4rem;
}



@media screen and (max-width: 768px) {
		:root {
		--first-font-size: 1.2rem;
	}
}



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

}

@font-face {
    font-family: 'moderat-mono';
    src: url('../webfonts/Moderat-Mono-Regular.woff'),
		url('../webfonts/Moderat-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}


/*************************************
*************** Basics ***************
**************************************/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q, blockquote p {
	font-family: var(--first-font-family);
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}




body, html 	{
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	font-size: var(--first-font-size);
}

body {
	font-family: var(--first-font-family);
	line-height: 1.2;
	color: var(--black);
	background-color: #000;
	cursor: pointer;
}



a {
	color: var(--black);
	text-decoration: underline;
	text-underline-offset: 5px;
	transition: .5s ease;


}


p 	{
		font-family: 'moderat-mono';
}

		@media screen and (max-width: 520px) {
				p  {
			}
		}

h3 	{
		}

		@media screen and (max-width: 520px) {
				h3  {
			}
		}

h4 	{
}

@media screen and (max-width: 520px) {
		h4  {
	}
}

header {
	position: fixed;
	left: 1.25em;
	top: 1.25em;
	z-index: 5000;
}

header img {
	border-radius: 0;
}

.active img {
	opacity: 0;
	transition: .5s ease;
}

nav {
	position: fixed;
	right: 1em;
	top: 1em;
	z-index: 5000;
}


.mono {
	font-family: 'moderat-mono';
}

img {
	border-radius: 8px;
	max-width: 100%;
}


.btn-secondary {
	background-color: var(--black);
	min-width: 8rem;
	border: none;
	border-radius: 2em;
	text-align: left;
	padding-left: 1rem;

}

.btn-secondary:hover {
	background-color: var(--white);
	color:  var(--black);
}

.btn-check:focus+.btn-secondary, .btn-secondary:focus {
	box-shadow: none;
}

.btn-secondary:active, .btn-secondary:focus, .dropdown-item:active {
	background-color: var(--white);
	color:  var(--black);
}

.dropdown-toggle::before {
	content:'';
	display: inline-block;
	width: 15px;
	height: 15px;
	-moz-border-radius: 7.5px;
	-webkit-border-radius: 7.5px;
	border-radius: 7.5px;
	background-color: #fff;
	margin-right: .25rem;
	margin-left: -.1rem;
}

.dropdown-toggle:hover::before, .dropdown-toggle:focus::before {
	background-color: #000; }


.dropdown-toggle::after {
	display: none;
}

.dropdown-menu {
	background-color: var(--black);
	color: var(--white);
	border: 5px solid black;
	padding: 0;
	border-radius: 30px;
	min-width: 8rem;

}

@media screen and (max-width: 520px) {
		.dropdown-menu  {
			border-radius: 25px;

	}
}

.dropdown-menu li {

}
.dropdown-item {
	color: var(--white);
	padding: .5rem;
	padding-left: 1rem;
	border-radius: 25px;
}



#logo {
	max-width: 100px;
	max-height: 100px;

}

#logo img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	header {
		position: relative;
	}

		#logo  {
			top: .5em;
			left: .5em;
			position: absolute;
			max-width: 60px;
			max-height: 60px;
			z-index: 5000;
	}
}

footer {
	width: 100vw;
	box-sizing: border-box;
	position: fixed;
	z-index: 5000;
	bottom: 1.25em;
	left: 1.25em;
	font-family: var(--first-font-family);
}

@media screen and (max-width: 800px) {
		footer  {
			position: relative;
			padding-top: 1em;
			padding-bottom: 4em!important;
			bottom: 0;
			left: 0;
			padding-left: 1em;
	}
}

.inactive-footer {
		position: relative;
		background-color: #e4e2ce;
		padding-bottom: 1.25em;
		bottom: 0;
		padding-left: 1.25em;
		padding-top: 1.25em;
		left: 0;
		transition: .5s;
}

.mobile-break {
	display: none;
}

@media screen and (max-width: 800px) {
		.mobile-break {display: block;}
		}

#open-button {
	position: fixed;
	bottom: 1em;
	right: 1.5em;
	font-size: 1.2rem;
	font-family: 'moderat-mono';
	text-align: right;
	}


#open-button a {
	text-decoration: none;
	transition: .5s ease;
}

#open-button a:hover{
	color: #fff;
}

.open-times {
	display: none;
}

.open-times:hover {
	color: #fff;
	transition: .5s ease;
}

	@media screen and (max-width: 520px) {
			#open-button  {
				border-radius: 1.25em;
				background-color: #000;
				color: #fff;
				padding:.5em;
				padding-left: .9em;
				padding-right: 1em;
				left: 1em;
				right:auto;
				text-align: left;
		}

		.bar-status {
			color: #fff;
		}
	}



	.open::before {
		content: '';
		display: inline-block;
		width: 15px;
		height: 15px;
		-moz-border-radius: 7.5px;
		-webkit-border-radius: 7.5px;
		border-radius: 7.5px;
		background-color: #12a839;
		margin-right: .5rem;
		margin-left: -.1rem;
		/*animation: opacity 3s ease-in-out infinite;
		opacity: 1;*/
	}

	.closed::before {
		content: '';
		display: inline-block;
		width: 15px;
		height: 15px;
		-moz-border-radius: 7.5px;
		-webkit-border-radius: 7.5px;
		border-radius: 7.5px;
		background-color: red;
		margin-right: .5rem;
		margin-left: -.1rem;
	}


	@keyframes opacity {
	  0% {
	    opacity: 1;
	  }

	  50% {
	    opacity: 0
	  }

	  100% {
	    opacity: 1;
	  }
	}


section {
	box-sizing: border-box;
	width: 100vw;
	padding: 1rem;
}

#main{
	background-color: #6CCCF5;
}


@media screen and (max-width: 768px) {
		#main  {
		padding-top: 130px;
	}
	 #main img {
		 margin-top: 30px;
	 }
}

#imprint p, #imprint ul {
	margin-bottom: 1em;
	font-size: .7rem;
	font-family: var(--first-font-family);
}

#imprint h1, #imprint h2, #imprint h3, #imprint h4, #imprint h5 {
	font-size: .7rem;
	padding-bottom: 1rem;
	font-family: 'moderat-mono';
}

#dates {
	background-color: #f2a2af;
}

#dates-2 {
	background-color: #0054e7;
}

#dates-3 {
	background-color: #f7ea54;
}

#kontakt {
	background-color: #E4E2CE;
	padding-bottom: 7rem;
}

#imprint {
	background-color: #E4E2CE;
}

#about {
	background-color: #12a839;
}

.full-height {
	min-height: 100vh;
}

.col img {
	max-width: 100%;
	max-height: 100vh;
}


/* EVENTS */

.card {
	background-color: transparent;
	border: 0;
	color: var(--black);
	font-family: 'moderat-mono';

}

.card-body {
	padding: 0;

}
.card-title {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.card-text {
	margin-bottom: 1rem;
}


.card-date ::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	-moz-border-radius: 7.5px;
	-webkit-border-radius: 7.5px;
	border-radius: 7.5px;
	background-color: #000;
	margin-right: 1rem;
}



/*ANIMATION*/

.hvr-skew {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

/* Buzz */
@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
  -webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


/* Hang */
@-webkit-keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@-webkit-keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
.hvr-hang {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active {
  -webkit-animation-name: hvr-hang-sink, hvr-hang;
  animation-name: hvr-hang-sink, hvr-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}


@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}