@font-face {
     font-family: 'NaNSpaceland';
    src: url('../fonts/NaNSpaceland-Light.woff2') format('woff2'),
		
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
   font-family: 'Agipo';
    src: url('../fonts/Agipo-Regular.woff2') format('woff2'),
        url('../fonts/Agipo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/*
FARBEN

Orange		#FBBB21
	
*/


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
	padding-left:20px;
	padding-right:20px;
}


html{
	scroll-behavior: smooth;
}


body {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-size:calc(12px + 0.5vw);
	background-color:#000000;
	color:#FFFFFF;
	
	
	/*
	background: rgb(251,187,33);
	background: linear-gradient(180deg, rgba(251,187,33,1) 0%, rgba(218,190,124,1) 100%);
	*/
	
	
}

.container-md{
	max-width:1600px;
	padding-left:50px;
	padding-right:50px;
}


h1,h2,h3,h4,h5,h6{
	font-size:50%;
	margin:0;
}
h1{
	margin-bottom:calc(30px + 3vh);
}
h2{
	margin-bottom:calc(20px + 2vh);
	/*display:table;
	margin-bottom:40px;
	border-bottom:1px solid black;*/
}


h3{
	display:table;
	border-bottom:1px solid black;
	/*margin-bottom:10px;*/
}



a{
	color:#FFFFFF;
	transition:color 0.1s ease-out;
}
a:hover{
	text-decoration: none;
	color:inherit;
}

a:hover{
	color:#f8f9fa;
}



.container-md{
	max-width:1500px;
}

section{
	padding-top:calc(60px + 4vh + 5vw);
	padding-bottom:calc(60px + 4vh + 5vw);
	
	border-bottom:20px solid black;
}
section#vorhang,section#schwarz{
	border-bottom:0px;
}





/* --------------------------------- 
	
	TYPOGRAFIE
	 
----------------------------------*/


/* SCHRIFT: NaNSpaceland */
h1,h2,header,.text-gross,#intro-logo{
	font-family:'NaNSpaceland', serif;
}

/* SCHRIFT: AGIPO */
body,h3{
	/*font-family:'Agipo',sans-serif;
	font-family: 'Roboto', sans-serif;
	font-family: 'Rubik', sans-serif;
	font-family: 'Inter', sans-serif;*/
	font-family: 'Poppins', sans-serif;
}



body,a.button.button-small{
	font-size:calc(10px + 0.5vw);
}

.text-mittel{
	font-size:130%;
}

h1{
	font-size:calc(30px + 2vw);
}

/* Grösser 1 */
h2,.text-gross,header,.t-tickets tbody tr td,a.button,#vorhang div{
	font-size:200%;
	line-height:1.3;
}
/* Grösser 2 */
#intro-logo{
	font-size:750%;
}

/* Kleiner */
h3,thead td,.text-klein,q span{
	font-size:80%;
}


/* ---------------------------------
	
	HEADER
	
-----------------------------------*/

header{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	z-index:2;
	left:0;
	width:100%;
	height:80px;
	background-color:#000000;
	line-height:80px;
}
header .row{
	justify-content: space-between;
}
header a{
	color:#FFFFFF;
}
header a:hover{
	color:#9FBFF4;
}


nav{
	text-align:right;
}
nav ul{
	list-style:none;
	margin:0;
	padding:0;
}
nav li{
	display:inline-block;
	
}
nav a{
	color:#FFFFFF;
	padding-right:2vw;
}

nav a:hover,nav li.act a{
	color:#9FBFF4;
}


/* MOBILE NAV */

#mobile-nav{
	position:absolute;
	right:0;
	display:none;
}
.hamburger{
	padding:12px 15px 6px 15px;
}
button.hamburger:focus{
	outline:none;
}

.hamburger.is-active:hover, .hamburger:hover{
	opacity:1;
}
.hamburger-inner,
.hamburger-inner:before,
.hamburger-inner:after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before{
	height:2px;
	background-color:#EBECE8;
}
.hamburger-box{
	height:36px;
}


.stickybutton {
  position: sticky;
  top: 100px;
margin-right: -20px;
}



/* ---------------------------------
	
	SECTION: VORHANG
	
-----------------------------------*/

section#vorhang{
	
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:calc(100vh - (80px));
	z-index:3;
	background:url('../bilder/vorhang.png') no-repeat scroll center bottom;

}
#vorhang div{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) rotate(2deg);
	transform-origin: center center;
	display:inline-block;
	padding:20px;
	animation: stoerer 1s ease 0s infinite backwards;
	animation-direction: alternate;
	width:270px;
	height:270px;
	max-width:50vw;
	max-height:50vw;
}
#vorhang div img{
	width:100%;	
}
@keyframes stoerer{
	from{
		transform:translate(-50%,-50%) rotate(2deg) scale(1);
	}
	to{
		transform:translate(-50%,-50%) rotate(0deg) scale(1.1);
	}
}

section#schwarz{
	position:absolute;
	z-index:4;
	left:0;
	top:calc(80px);
	width:100%;
	height:calc(100vh - (80px));
	z-index:1;
	background-color:black;
}

.arrow{
	position:absolute;
	z-index:4;
	left:50%;
	top:93vh;
	color:#9FBFF4;
	display:inline-block;
	transform:translateX(-50%);
}
.arrow span{
	display:inline-block;
	width:20px;
	height:20px;
	border-right:2px solid #9FBFF4;
	border-bottom:2px solid #9FBFF4;
	transform:rotate(45deg);
	transform-origin: center;
	margin-left:20px;
	position:relative;
	top:-3px;
	animation: arrow 1s ease 0s infinite backwards;
	animation-direction: alternate;
	transition:border-color 0.1s ease-out;
}
.arrow:hover span{
	border-color:#f8f9fa;
}
@keyframes arrow{
	from{
		transform:translateY(0) rotate(45deg);
	}
	to{
		transform:translateY(-50%) rotate(45deg);
	}
}




/* ---------------------------------
	
	SECTION: PROJEKT
	
-----------------------------------*/

section#projekt{
	    margin-top: 0px;
		    margin-bottom: 0px;

	padding-top:calc(60px + 4vh + 5vw);
}
div.bereich{
	padding-bottom:10px;
}
.bild-zwei{
	margin-top:10vh;
	margin-top:40px;
}
.bereich-mitwirkende h3{
	/*display:table;*/
	margin-top:30px;
}

.text-gross a{
	border-bottom: 1px solid #f8f9fa;
}
.info-spalte{
	margin-top:30px;
}
/*img.umschlag{
	max-height:90vh;
	width:auto;
}
*/

/* ---------------------------------
	
	SECTION: TICKETS
	
-----------------------------------*/


.t-tickets{
	width:100%;
}
.t-tickets tr td{
	border-bottom:1px solid black;
}
.t-tickets tbody tr td,#vorhang div{
	font-family:'NaNSpaceland',serif;
}
.t-tickets tr td:last-child{
	text-align:right;
}


a.button{
	display:inline-block;
	padding:20px 50px;
	border:2px solid #FFFFFF;
	color:#FFFFFF;
	border-radius:100px;
	margin-top:calc(30px + 5vh);
}
a.button:hover{
	background-color:#FFFFFF;
	color:#000000;
}
a.button-small{
	margin-top:calc(10px + 2vh);
}



.vorverkauf{
	display:inline-block;
	border:1px solid #FFFFFF;
	color:#FFFFFF;
	padding:10px 20px;
	
	/*transform: rotate(-2deg);*/
}


/* ---------------------------------
	
	SECTION: PRESSE
	
-----------------------------------*/

q{
	display:block;
	padding-bottom:30px;	
}
q::before,q::after{
	content:'';
}
q span{
	display:block;
}

#presse strong{
	font-weight:700;
}


/* ---------------------------------
	
	SECTION: SPONSOREN
	
-----------------------------------*/

.bereich-hauptsponsoren img{
	width:80%;
	min-width:170px;
}
.bereich-hauptsponsoren h3{
	display:block;
}
.bereich-sponsoren ul{
	list-style:none;
	padding:0;
	margin:0;
}

.hauptsponsoren-container{
	padding:25px 0;
	border-bottom:1px solid #FFFFFF;
}
.bereich-sponsoren ul li.text-klein{
	padding-top:10px;
}


/* ---------------------------------
	
	SECTION: SPONSORING
	
-----------------------------------*/

section#sponsoring{
	padding-top:0px;
}



/* ---------------------------------
	
	FOOTER
	
-----------------------------------*/



section.footer{
	color:#75796E;
	padding-bottom:30px;
	margin-top:30px;
	

}
section.footer .container-md{
	padding-top:20px;
	border-top:1px solid #A2A799;
}
section.footer a{
	color:#75796E;
}
section.footer a:hover{
	color:#14291A;
}



/* ---------------------------------
	
	SEITE: IMPRESSUM & DATENSCHUTZ
	
-----------------------------------*/


section.impressum h3,
section.datenschutz h3{
	/*margin-bottom:10px;*/
}

section.impressum h3:not(:first-of-type),
section.datenschutz h3:not(:first-of-type){
	margin-top:50px;
}
















/* ---------------------------------
	
	RESPONSIVE
	
-----------------------------------*/





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

@media screen and (max-width: 991px) {
	h3{
		display:table;
	}
	.bereich-mitwirkende h3{
		display:block;
	}
	#sponsoren h3{
		display:block;
	}
	div[class^='col'], div[class*=' col']{
	    margin-bottom:0px;
	    margin-bottom: calc(0px + 2vh);
	}
	div.bereich{
		padding-bottom:0px;
	}
	
	
	section#vorhang{
		background-size:cover;
		background-position:center -80px;
	}


}



@media screen and (max-width: 795px) {

	/* MOBILE NAV */
	#mobile-nav{
		display:block;
		right:0;
	}
	
	#hauptnav{
		display:none;
		position:fixed;
		background-color:black;
		left:0;
		top:0;
		width:100vw;
		height:auto;
		padding-bottom:calc(60px + 4vh);
	}
	#hauptnav.is-active{
		display:block;
	}
	
	#hauptnav ul{
		margin-top:calc(60px + 4vh);
	
		
	}
	
	#hauptnav ul li{
		display:block;
		font-size:150%;
		text-align:center;
	}
	
		
	
	

}


@media screen and (max-width: 575px) {
	
	.text-gross{
		font-size:150%;
	}
	.text-mittel{
		font-size:110%;
	}
	.gutschein {
  width: 50%;
  height: auto;
			}

	.container-md{
	    padding-left: 25px;
		padding-right: 25px;
	}
	
	/*.row{
		margin-left:0px;
		margin-right:0px;
	}*/
	header .col-sm-3,header .col-sm-8{
		width:50%;
	}
	
	.bild-zwei{
		margin-top: 0;
	}
	div[class^='col'], div[class*=' col'] {
	    margin-bottom:0px;
    }
    .bereich-mitwirkende div[class^='col'], .bereich-mitwirkende div[class*=' col']{
		margin-bottom:0;
	}
	
	.arrow{
		top:auto;
		bottom:0px;
	}	
	
	#projekt h1,#projekt .text-gross{
		margin-bottom:30px;
	}
	

	
}