@charset "utf-8";
/* CSS Document */

html {
	scroll-behavior: smooth;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: rgba(0,0,0,1);
	background-image: url('../img/wall5.jpg');
	background-size: cover;
	background-color: whitesmoke;
	height: 100%;
}

header {
	display: flex;
	justify-content: space-between;
}

.centered {
	display: flex;
    justify-content: center;
    align-items: center;
}

.liane {
	display: flex;
	flex-direction: column;
	font-family: 'Gloock', serif;
	color: rgba(70, 65, 55, 1);
}

.liane a {
	color: inherit;
	text-decoration: none;
}

.liane span {
	font-family: 'Roboto', sans-serif;
	font-size: .8rem;
	opacity: .8;
	margin: 0 0 0 1rem;
}

nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav a {
	color: rgba(219, 219, 219, 1);
	text-decoration: none;
	font-family: 'Gloock', sans-serif;
	font-size: 1.6rem;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	margin-bottom: 2rem;
	transition: all .5s ease-in-out;
}

nav a:hover {
	border-bottom: 1px solid rgba(219, 219, 219, .5);	
}

.wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: rgba(245, 245, 245, .5);
}

#about {
	flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	opacity: .8;
	line-height: 1.5;
}

#gallery {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	overflow-x: scroll;
	width: 100%;
	white-space: nowrap;
}

.picture {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto;
}

.picture img {
	height: 100%;
	border-radius: .3rem;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	z-index: 2;
}

.picture span {
	color: rgba(70, 65, 55, 1);
	position: relative;
	font-size: .8rem;
	left: 1rem;
	padding: .75rem 1rem;
	background: white;
	width: fit-content;
	z-index: 1;
	line-height: 1.4;
}

.picture span a {
	color: rgba(70, 65, 55, 1);
	text-decoration: none;
	border-bottom: 2px solid rgba(70, 65, 55, .2);
	transition: all .25s ease-in-out;
}

.picture span a:hover {
	border-bottom: 2px solid rgba(70, 65, 55, 1);
}

.home > .picture.l {
	height: 75%;
}

.impressum {
    font-family: 'Roboto', serif;
    font-size: .875rem;
}

.home {
	overflow-x: auto !important;
}

.home > .picture.l.centered > span {
	left: 0;
}

#nav {
	position: absolute;
	background-image: url('../img/nav.svg');
	background-size: cover;
	cursor: pointer;
}

.nav-modal {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(70,65,55,.9);
	opacity: 0;
	visibility: hidden;
	transform: scale(1.1);
	transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.close-nav-modal {
	position: absolute;
	background-image: url(../img/close.svg);
	background-size: cover;
	cursor: pointer;
}

.show-nav-modal {
	opacity: 1;
	visibility: visible;
	transform: scale(1.0);
	transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
	z-index: 100;
}

.close-nav-modal p {
	font-family:'Roboto Condensed Light Italic';
	font-weight: 100;
}

.white .show-nav-modal a,
.white .show-nav-modal a:hover {
	color: rgba(255,255,255,1);
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav ul li {
	display: flex;
    flex-direction: column;
    align-items: center;
	margin: 0 0 2rem 0;
	font-family: 'Roboto Condensed Bold';
	font-weight: 500;
}

@media (min-width: 0px) {

	header {
		height: 112px;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.liane {
		padding: 1.875rem 2rem;
		font-size: 2rem;
	}
	
	nav {
		padding: 0 2rem;
		font-size: .8rem;
	}
	
	#about {
		padding: 0 3rem;
	}
	
	#gallery {
		max-height: calc(100% - 112px);
		align-items: center;
	}
	
	.picture {
		margin: 0 3rem;
		height: auto;
		object-fit: cover;
	}
	
	.picture.l {
		width: calc(100% - 4rem);
	}
	
	.picture.p {
		height: calc(100% - 12.4rem);
	}
	
	.picture:first-child {
		margin-left: 2.2rem;
	}

	.picture:last-child {
		margin-right: 2.2rem;
	}
	
	#nav {
		top: 2rem;
		right: 2rem;
		width: 2.4rem;
		height: 2.4rem;
	}
	
	.close-nav-modal {
		top: 2rem;
		right: 2rem;
		width: 2.4rem;
		height: 2.4rem;
	}
	
}

@media (min-width: 768px) { }

@media (min-width: 992px) {
	
}

@media (min-width: 1200px) { 

	header {
		height: 90px;
		padding: 0 4rem;
		flex-direction: row;
		align-items: flex-end;
	}
	
	.liane {
		padding: 0;
		font-size: 2.8rem;
	}
	
	nav {
		padding: 0 1rem 1.25rem 0;
		font-size: .875rem;
	}
	
	#about {
		padding: 0 12vw;
	}
	
	#gallery {
		max-height: calc(100% - 90px);
		align-items: center;
	}
	
	.picture {
		width: auto;
		margin: 0 8rem;
	}
	
	.picture.l {
		height: 60%;
	}
	
	.picture.p {
		height: 60%;
	}
	
	.picture:first-child {
		margin-left: 12vw;
	}

	.picture:last-child {
		margin-right: 12vw;
	}
	
	#nav {
		top: 2.4rem;
		right: 4rem;
		width: 2.4rem;
		height: 2.4rem;
	}
	
	.close-nav-modal {
		top: 2.4rem;
		right: 4rem;
		width: 2.4rem;
		height: 2.4rem;
	}
	
}

/*
.picture-navigation {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 4rem;
	width: auto;
	opacity: .25;
	transition: all .25s ease-in-out;
}

.picture-navigation:hover {
	opacity: 1;
}

.picture-navigation img {
	height: 360px;
}
*/