@font-face {
  font-family: Muli-Regular;
  src: url(../assets/fonts/Muli-Regular.ttf);
}
@font-face {
  font-family: Muli-Light;
  src: url(../assets/fonts/Muli-Light.ttf);
}
@font-face {
  font-family: Pitch-Display-Regular;
  src: url(../assets/fonts/Pitch-Display-Regular.ttf);
}
@font-face {
  font-family: CC-Wild-Words-Roman;
  src: url(../assets/fonts/CC-Wild-Words-Roman.ttf);
}
html, body{
	font-size:62.5%;
}
body{
	position:relative;
}

.no-scrolling{
 	height:100%;
 	overflow:hidden;
}
#background-box{
	position:absolute;
	left:50%;
	width:137rem;
	height:112.8rem;
	transform:translateX(-50%);
	z-index:-10;
	border:5px solid #F9FAFA;
	border-top:none;
}
/* Navigation */
nav{
	position:fixed;
	width:100%;
	height:0;
	z-index:1;
	font-size:10px;
	transition: height 0.4s, -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s, background-color 0.4s;
}
nav ul{
	display:none;
}
.fullsize #nav-links{
	display:block;
	position:absolute;
	list-style:none;
	margin:0;
	padding:0;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
}
#nav-links a{
	cursor: pointer;
}
#nav-links a:hover{
	color:#FFE200;
}
#nav-links a:active{
	color:#FFE200;
}
.fullsize a{
	font-family:Muli-Light;
	text-decoration:none;
	color:white;
	font-size:2em;
	letter-spacing:0.3em;
	line-height:3.5;
	text-transform:uppercase;
}
.fullsize{
	height:100vh;
	background-color:rgba(0,0,0,0.8);
	backdrop-filter: blur(10px) invert(30%) grayscale(60%); 
    -webkit-backdrop-filter: blur(10px) invert(30%) grayscale(60%); 
}
.fullsize #menu-button{
	backdrop-filter: none; 
    -webkit-backdrop-filter: none;
	width:4.6em;
}
.fullsize #menu-button  div{
	background-color:white;
	margin:0;
}
.fullsize #menu-button:hover  div{
	background-color:#FFE200;
}
.fullsize #menu-button  div:first-of-type{
	transform: translateY(1.1em) rotate(45deg);
}
.fullsize #menu-button  div:nth-of-type(2){
	transform: translateY(0.75em) rotate(-45deg);
}
.fullsize #menu-button  div:last-of-type{
	display:none;
}
.fullsize #home-button{
	background-color:transparent;
}
.fullsize #home-button img{
	width:4.35em;
}
#nav-overlay{
	position:absolute;
	height:25rem;
	width:calc(100% - 42rem);
	margin-left:42rem;
	background-color:#FFE200;
	z-index:-2;
}
#home-button{
	position:relative;
	display:inline-block;
	width:12em;
	height:12em;
	margin-top:4rem;
	margin-left:4rem;
	border-radius:50%;
	background-color:black;
	transition: background-color 0.4s;
}
#home-button img{
	position:absolute;
	width:8.7em;
	height:5.2em;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
#menu-button{
	cursor: pointer;
	display: inline-block;
	margin-top:8.5rem;
	margin-right:8.5rem;
	width:4.6em;
	height:3em;
	float: right;
	padding:1rem;
	background-color:transparent;
	backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(4px);
}
#menu-button div{
	width:100%;
	height:2.5px;
	background-color:black;
	margin-bottom:1.2em;
	transition: all 0.4s;
}
#imprint{
	display:none;
	color:white;
	height:75vh;
	max-width:80rem;
	padding:5rem 25rem;
	overflow:scroll;
	font-size:13px;
	margin:auto;
}
#imprint p{
	font-family:Muli-Light;
	font-size:1.4em;
	margin:0;
	line-height:1.5;
}
#imprint h3{
	font-family:Muli-Regular;
	font-size:1.6em;
}
#imprint h3:first-of-type{
	margin-top:0;
}
.imprint-active #nav-links{
	display:none;
}
.imprint-active #imprint{
	display:block;
	z-index:1;
}
/* Gallery */
#folder-container{
	position:relative;
	display:flex;
	flex-wrap: wrap;
	height:calc(100vh - 20rem);
	width:122.5rem;
	margin:10rem auto;
	font-size:5.5rem;
	align-items:center;
	overflow-y:scroll;
}
#folder-container img{
	width:30rem;
	height:30rem;
	transition: filter 0.5s cubic-bezier(0,1.46,1,.93);
}
#folder-container div{
	height:30rem;
	width:30rem;
}
#folder-container img:hover{
	filter: grayscale(100%);
}
#lightbox-container{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:none;
	margin:0;
}

#lightbox-title{
	position:absolute;
	top:0;
	font-family:Pitch-Display-Regular;
	font-size:5.5rem;
	margin-top:-7rem;
}
#lightbox-top{
	display:flex;
	width:140rem;
	margin:0 auto;
	font-size:5.5rem;
	height:68rem;
	align-items:center;
}
#lightbox-image{
	width:110rem;
	height:100%;
	float:left;
	vertical-align:middle;
	padding:0 4rem;
	object-fit:scale-down;
}
#lightbox-thumbnails{
	display:flex;
	align-items:center;
	justify-content: center;
	width:104rem;
	height:10rem;
	padding:2rem 0rem;
	margin:0 auto;
}
#lightbox-thumbnails img{
	display:none;
	height:10rem;
	width:10rem;
	margin-right:1.5rem;
	object-fit:cover;
	transition: filter 0.5s cubic-bezier(0,1.46,1,.93);
}
#lightbox-thumbnails img:hover{
	filter:grayscale(100%);
}
.gallery-gray{
	filter:grayscale(100%);
}
#lightbox-thumbnails img:last-of-type{
	padding-right:0;
	margin:0;
}
#lightbox-thumbnails .lightbox-button{
	display:none;
	height:6rem;
	width:6rem;
	margin:2rem;
}
.lightbox-button{
	position:relative;
	background-color:#111111;
	border-radius:50%;
	width:10rem;
	height:10rem;
	border:none;
	color:white;
	float:left;
	padding:0;
	line-height:5rem;
}
.lightbox-button-left::before{
	content:"\27F5";
	font-size:2rem;
	vertical-align: middle;
}
.lightbox-button-right::after{
	content:"\27F6";
	font-size:2rem;
	vertical-align: middle;
}
.lightbox-button:hover{
	background-color:#E2E8E8;
}
#gallery{
	display:none;
	position:fixed;
	height:0;
	width:100%;
	z-index:1;
	transition: all 0.2s;
}
#gallery.fullsize-gallery{
	display:inline-block;
	height:100vh;
	background-color:rgba(255,255,255,0.8);
	backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
}
#gallery-container{
	position:fixed;
  	padding-top:10px;
  	left:50%;
  	transform:translateX(-50%);
  	width:100%;
  	overflow:auto;
	display:none;
	z-index:1;
}
#gallery-container.fullsize-gallery{
	display:block;
}
#image-container{
	box-sizing:border-box;
	margin:auto;
	padding:12.5rem 0;
	max-height:70rem;
	width:138rem;
}
#gallery h2{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	font-family:Pitch-Display-Regular;
	font-size:3.5rem;
	text-align:center;

}
#gallery-container img{
	float:left;
  	display:block;
  	margin-left:auto;
  	margin-right:auto;
	width:110rem;
	max-height:70rem;
	object-fit:scale-down;
}
.gallery-button{
	float:left;
 	cursor:pointer;
 	width:14rem;
	height:66rem;
}
.gallery-button a{
	margin:2rem;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	display:inline-block;
	width:10rem;
	height:10rem;
 	background-color:#E2E8E8;
 	color:white;
 	font-weight:bold;
 	font-size:3.5rem;
 	text-align: center;
 	line-height:10rem;
 	text-decoration:none;
 	border-radius:50%;
}
#gallery-close {
	position:absolute;
	right:0%;
	width:5.5rem;
	height:5.5rem;
	margin:3.5rem;
	cursor:pointer;
	z-index:100;
}
#gallery-close div{
	width:5.5rem;
	height:0.4rem;
	background-color:black;
}
#gallery-close:hover div{
	background-color:#FFE200;
}
#gallery-close div:last-of-type{
	transform:translateY(2.4rem) rotate(-45deg);
}
#gallery-close div:first-of-type{
	transform:translateY(2.8rem) rotate(45deg);
}
/* Header */
header{
	font-size:10px;
	position:relative;
	width:100%;
	z-index:-1;
	margin-bottom:6rem;
}
#header-bg-img{
	position:absolute;
	width:42rem;
	height:24.5rem;
	margin-top:7rem;
	margin-left:4rem;
}
#hero{
	padding-top:16rem;
	text-align:center;
	margin:auto;
	max-width:108.8rem;
}
#hero p{
	font-family:Muli-Light;
}
#hero p:first-of-type{
	margin-top:0;
	text-transform:uppercase;
	letter-spacing:0.6em;
	font-size:2em;
}
#hero p:last-of-type{
	font-size:2.5em;
	line-height:1.7;
}
#hero h1{
	margin-top:3rem;
	margin-bottom:3rem;
	font-family:Pitch-Display-Regular;
	text-transform:capitalize;
	font-size:5.5em;
	font-weight:100;
	line-height:1.25;
}
#become-a-member{
	position:relative;
	max-width:128rem;
	height:80rem;
	margin:auto;
}
#become-a-member picture{
	z-index:-1;
}
#become-a-member picture img:first-of-type{
	position:absolute;
	object-fit:cover;
	max-width:128rem;
	left:50%;
	transform:translateX(-50%);
}
#become-a-member-bg{
	z-index:-2;
	position:absolute;
	top:21rem;
	left:-8rem;
	width:128rem;
	height:54rem;
	background-color:#1A1A1D;
	margin:auto;
}
#speech-bubble{
	position:absolute;
	top:-0.5rem;
	left:50%;
	padding-right:16rem;
	width:22rem;
	transform:translateX(-50%) rotate(180deg) scaleX(-1);
}
#speech-bubble-caption{
	position:absolute;
	font-family: CC-Wild-Words-Roman;
	font-size:2.6rem;
	font-weight:100;
	width:18rem;
	top:4rem;
	left:49.3rem;
}
/* About */
#about p{
	font-family:Muli-Light;
	font-size:2.5rem;
	line-height:1.5;
	text-align:justify;
	padding:0 44rem;
	margin:auto;
	max-width: 112.5rem;
}
#about{
	position:relative;
	margin-bottom:4rem;
	margin-top:4rem;
}
/* Contact */
#get-in-touch{
	font-size:10px;
	position:relative;
	margin-top:4rem;
	padding-bottom:12rem;
	text-align:center;
}
#get-in-touch-label p:first-of-type{
	writing-mode:vertical-lr;
	text-orientation:upright;
	font-size:1.6em;
	margin:auto;
}
#get-in-touch-label p:last-of-type{
	font-family:Muli-Light;
	font-size:2.5em;
	line-height:1.5;
	padding:0rem 4rem;
	margin:2.5rem auto;
	margin-bottom:7rem;
	max-width:108.8rem;
	text-align:center;
}
#get-in-touch-label h2{
	font-family:Pitch-Display-Regular;
	font-size:5.5em;
	text-transform:capitalize;
	margin:5rem 0;
}
#get-in-touch a{
	position: absolute;
	display: block;
	width:100%;
	height:100%;
}
.contact-box{
	position:relative;
	height:13.2rem;
	width:44.2rem;
	margin:auto;
	margin-top:2rem;
	display:inline-block;
	margin-right:2rem;
	background-color:#111111;
	color:white;
	font-family:Muli-Light;
	font-size:2rem;
}
.contact-box:hover{
	background-color:#E2E8E8;
}
.contact-box p{
	display:inline-block;
	margin:0;
	margin-left:2rem;
	line-height:13.2rem;
	float:left;
}
.contact-box p span{
	position: absolute;
	right:2rem;
	font-size:3.5rem;
	line-height:13.2rem;
	vertical-align:middle;
	float:right;
}
.contact-circle{
	position: relative;
	display:inline-block;
	float:left;
	width:8.7rem;
	height:8.7rem;
	margin:1.9rem 0;
	margin-left:1.9rem;
	border-radius:50%;
	background-color:white;
}
.contact-box:last-of-type{
	display:inline-block;
	margin-right:0rem;
}
.contact-circle img{
	position:absolute;
	width:5rem;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
/* Events */
#latest-event{
	width:100%;
	height:140vw;
	background-color:#E2E8E8;
}
#upcoming-events{
	width:100%;
	height:140vw;
	background-color:#1A1A1D;
}
/* Make a wish */
#make-a-wish{
	position:relative;
	height:40rem;
	padding-top:25rem;
	margin-bottom:20rem;
	max-width:108.8rem;
	margin:auto;
	text-align:center;
	font-size:10px
}
#make-a-wish h2{
	margin:6rem auto;
	max-width:40rem;
	font-family:Pitch-Display-Regular;
	font-size:5.5rem;
	text-transform:capitalize;
	background: radial-gradient(circle at center, white, transparent);
}
#make-a-wish p{
	font-family:Muli-Light;
	font-size:2.5rem;
    line-height:1.5;
    background: radial-gradient(circle at center, white, transparent);
}

#make-a-wish picture{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:-2;
}
#make-a-wish img{
	max-width:150rem;
	object-fit:contain;
	opacity:85%;
}
.glow{
	position:absolute;
}
/* Footer */
footer{
	position:absolute;
  	left:0;
  	bottom:0;
  	width:100%;
	font-family:Muli-Light;
	font-size:10px;
	background-color:#E2E8E8;
	text-align:center;
}
footer p{
	padding:2rem 0;
	margin:0;
}
@media screen and (max-width: 1680px){
	html,nav,header,#get-in-touch{
		font-size:8px;
	}
	#nav-links{
		font-size:10px;
	}
}
@media screen and (max-width: 1440px){
	html,header,#get-in-touch{
		font-size:7px;
	}
	#nav-links{
		font-size:10px;
	}
}
@media screen and (max-width: 1180px){
	html,header,#get-in-touch{
		font-size:6px;
	}
	#nav-links{
		font-size:10px;
	}
}
@media screen and (max-width: 1024px){
	html,header,#get-in-touch{
		font-size:5px;
	}
	#nav-links{
		font-size:10px;
	}
	#folder-container{
		width:93.5rem;
	}
}
@media screen and (max-width: 850px){
	#background-box{
		width:100rem;
		height:120rem;
	}
	#nav-overlay{
		display:none;
	}
	header{
		font-size:10px;
	}
	nav{
		font-size:6.6px;
	}
	#header-bg-img{
		width:37.3em;
		height:22em;
		margin:auto;
		margin-top:4em;
		left:50%;
		transform:translateX(-50%);
		opacity:25%;
	}
	#imprint{
		padding:5rem 5rem;
	}
	#about{
		font-size:10px;
	}
	#about p{
		margin:auto;
		padding:0 8rem;
		max-width:75rem;
		font-size:1.6em;
	}
	#hero{
		padding-top:40rem;
		text-align:center;
		margin:auto;
		max-width:70rem;
		font-size:10px;
	}
	#hero p:first-of-type{
		font-size:1.6em;
		margin-bottom:2rem;
	}
	#hero p:last-of-type{
		font-size:1.6em;
	}
	#hero h1{
		margin-top:3rem;
		margin-bottom:6rem;
		font-family:Pitch-Display-Regular;
		text-transform:capitalize;
		font-size:2.6em;
		font-weight:100;
		line-height:1.25;
	}
	footer{
		font-size:10px;
	}
	#become-a-member{
		margin:auto;
		margin-bottom:4em;
		font-size:10px;
	}
	#become-a-member-bg{
		display:none;
	}
	#become-a-member picture img:first-of-type{
		position:relative;
		object-fit:cover;
		max-width:42em;
		max-height:39.9em;
		width:100%;
		height:95vw;
		left:50%;
		transform:translateX(-50%);
	}
	#speech-bubble{
		top:4.5em;
		width:12em;
		left:calc(50% - 2.5em);
		padding-right:0;
	}
	#speech-bubble-caption{
	position:absolute;
	top:5.5em;
	left:calc(50% - 1em);
	transform:translateX(-50%);
	}
	#get-in-touch{
		line-height:1.75;
		max-width:72rem;
		margin:auto;
		font-size:10px;
	}
	#get-in-touch-label p:first-of-type{
		font-size:1.6em;
	}
	#get-in-touch-label p:last-of-type{
		font-size:1.6em;
	}
	#get-in-touch-label h2{
		font-size:3.5em;
	}
	.contact-box{
		height:21.6rem;
		width:72rem;
		margin-top:4rem;
		margin-right:0;
		font-size:4rem;
	}
	.contact-box p{
		margin-left:4rem;
		line-height:21.6rem;
	}
	.contact-box p span{
		right:4rem;
		font-size:7rem;
		line-height:21.6rem;
	}
	.contact-circle{
		width:14rem;
		height:14rem;
		margin:3.8rem 0;
		margin-left:3.8rem;
	}
	#make-a-wish{
		font-size:10px;
		height:100rem;
		margin-bottom:10rem;
		margin-top:15rem;
	}
	#make-a-wish img{
		max-width:82.5rem;
	}
	#make-a-wish-text{
		position:absolute;
		width:100%;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
	}
	#make-a-wish p{
		margin:auto;
		max-width:67rem; 
		padding:0 10rem;
		font-size:1.6em;
	}
	#make-a-wish h2{
		font-size:3.5em;
	}

}
@media screen and (max-width: 700px){
	#background-box{
		display:none;
	}
	#lightbox-container{
		width:88rem;
	}
	#lightbox-image{
		width:80rem;
	}
	#lightbox-thumbnails{
		width:100%;
	}
	#lightbox-top .lightbox-button{
		display:none;
	}
	#lightbox-thumbnails .lightbox-button{
		display:inline-block;
	}
	#lightbox-title{
		width:100%;
		margin-top:-4rem;
	}
}
@media screen and (max-width: 500px){
	nav{
		font-size:6px;
	}
	html{
		font-size:5px;
	}
	header{
		font-size:8px;
	}
	#about,#become-a-member,#make-a-wish,#get-in-touch{
		font-size:8.5px;
	}
	#become-a-member{
		height:inherit;
	}
	#become-a-member picture img:first-of-type{
		max-width:none;
		max-height:95vw;
	}
	#about p{
		padding:0 5rem;
	}
	#make-a-wish{
		padding:0 5rem;
	}
	#get-in-touch{
		box-sizing:border-box;
		padding:0 5rem;
		padding-bottom:10rem;
	}
	#make-a-wish img{
		max-width:78.5rem;
	}
	#hero{
		padding-top:35rem;
		max-width:63rem;
		font-size:9px;
	}
	.contact-box{
		height:17rem;
		width:60rem;
		margin-top:4rem;
		margin-right:0;
		font-size:3rem;
	}
	.contact-box p{
		margin-left:4rem;
		line-height:17rem;
	}
	.contact-box p span{
		right:4rem;
		font-size:5rem;
		line-height:17rem;
	}
	.contact-circle{
		width:10rem;
		height:10rem;
		margin:3.6rem 0;
		margin-left:3.8rem;
	}
	#speech-bubble-caption{
		font-size:2.2rem;
		left:calc(50% - 0.65em);
		top:5.5em;
	}
	#folder-container{
		width:63.5rem;
	}
	#lightbox-thumbnails img{
		width:8rem;
		height:8rem;	
	}
	#lightbox-container{
		width:68rem;
	}
	#lightbox-image{
		width:60rem;
	}
}
@media screen and (max-width: 340px){
	html{
		font-size:4.5px;
	}
	#about,#become-a-member,#make-a-wish,#get-in-touch{
		font-size:6.5px;
	}
	#hero{
		max-width:58rem;
		font-size:7px;
	}
	#make-a-wish img{
		max-width:65rem;
	}
	#speech-bubble-caption{
		font-size:1.8rem;
		left:calc(50% + 0.3em);
		top:6.0em;
	}
	.contact-box{
		height:14rem;
		width:55rem;
		margin-top:4rem;
		margin-right:0;
		font-size:2.5rem;
	}
	.contact-box p{
		margin-left:4rem;
		line-height:14rem;
	}
	.contact-box p span{
		right:4rem;
		font-size:4rem;
		line-height:14rem;
	}
	.contact-circle{
		width:8rem;
		height:8rem;
		margin:3.0rem 0;
		margin-left:3.8rem;
	}
}
@media screen and (max-height:500px){
	#lightbox-title{
		margin-top:-5rem;
	}
	#lightbox-container{
		height:48rem;
		top:42%;
	}
	#lightbox-top{
		height:48rem;
	}
}
@media screen and (max-height:400px){
	#lightbox-container{
		height:38rem;
	}
	#lightbox-top{
		height:38rem;
	}
}