@font-face{
   font-family: Poppins;
   src: local('Poppins'), local('Poppins-Regular'),
   url(../fonts/Poppins/Poppins-Regular.ttf);
}
@font-face{
   font-family: Allerta;
   src: local('AllertaStencil-Regular'), local('AllertaStencil'),
   url(../fonts/Allerta/AllertaStencil-Regular.ttf);
}
@font-face{
   font-family: Comfortaa;
   src: local('Comfortaa'),
   url(../fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf);
}
html{
	background: url(../pics/background.jpg) no-repeat center center fixed;
	background-size: cover;
	scroll-padding-top: 15vh;
}

body{
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
}

div.navi{
	width: 70vw;
	margin-left: 15vw;
	top: 0px;
	height: 14vh;
	z-index: 1;
	position: fixed;
	background-color: rgba(30, 30, 30, 0.93);
}

div.navirow{
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 50%;
}

a.navi{
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	text-align: center;
	height: 100%;
	width: 25%;
	font-family: Allerta, sans-serif;
	text-decoration: none;
	font-size: 175%;
}

a.navi:link{
	color: #CCC;
}

a.navi:visited{
	color: #CCC;
}

a.navi:active{
	color: #CCC;
}

a.navi:hover{
	color: #000;
	background-color: rgba(255, 255, 255, 0.1)
}

div.social{
	width: 70vw;
	display: flex;
	justify-content: space-between;
	margin-top: 18vh;
	margin-left: 15vw;
	height: 7vh;
}

a.social{
	display: flex;
	height: 100%;
	justify-content: center;
}

img.social{
	display: flex;
	height: 100%;
	justify-content: space-between;
}

div.start{
	width: 70vw;
	height: 75vh;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	text-align: center;
	margin-left: 15vw;
}

div.space{
	display: inline-block;
	height: 9vh;
	width: 100%;
}

div.smallspace{
	display: inline-block;
	height: 3vh;
	width: 100%;
}

div.tinyspace{
	display: inline-block;
	height: 1vh;
	width: 100%;
}

div.videos{
	width: 84%;
	margin-left: auto;
	margin-right: auto;
	height: 33.075vw;
	border-style: solid;
	border-color: #FFF;
	overflow: hidden;
}

a.video{
	text-decoration: none;
}
a.video:link{
	color: #FFF;
}
a.video:visited{
	color: #FFF;
}
a.video:active{
	color: #FFF;
}
a.video:hover{
	color: #FFF;
}

div.videoselector{
	display: flex;
	justify-content: space-between;
	height: 6vh;
	background-color: rgba(0, 0, 0, 0);
}

a.videolink{
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	text-align: center;
	height: 100%;
	font-family: Allerta, sans-serif;
	text-decoration: none;
	font-size: 150%;
}

a.videolink:link{
	color: #CCC;
}

a.videolink:visited{
	color: #CCC;
}

a.videolink:active{
	color: #CCC;
}

a.videolink:hover{
	color: #000;
	background-color: rgba(255, 255, 255, 0.25)
}

div.fotos{
	width: 84%;
	margin-left: auto;
	margin-right: auto;
	height: 33.075vw;
	background-color: rgba(0, 0, 0, 0.65);
	border-style: solid;
	border-color: #FFF;
	overflow: hidden;
}

div.gallery{
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

img.fotos{
	height: 90%;
}

div.fotoauswahl{
	width: 84%;
	display: flex;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	height: 5vw;
}

div.galleryauswahl{
	width: 19.5%;
	height: 100%;
	text-align: center;
}

img.fotoauswahl{
	border-style: solid;
	border-color: #FFF;
	height: 93%;
}

h1{
	font-family: Allerta, sans-serif;
	margin-left: 6%;
	color: #FFF;
}

div.content{
	width: 70vw;
	margin-left: 15vw;
	background-color: rgba(0, 0, 0, 0.8);
	font-size: 130%;
}

p{
	margin-left: 8%;
	width: 84%;
	font-family: Comfortaa, serif;
	line-height: 125%;
	color: #BBB;
}

b{
	font-family: Poppins, sans-serif;
	margin-left: 7%;
	color: #FFF;
}

a.text{
	color: #1AA6EF;
}
a.text:visited{
	color: #FFF;
}

td{
	font-family: Comfortaa, serif;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}


@media all and (orientation: portrait){
	div.navi{
		width: 95vw;
		margin-left: 2.5vw;
	}
	div.social{
		width: 95vw;
		margin-left: 2.5vw;
	}
	div.start{
		width: 95vw;
		margin-left: 2.5vw;
	}
	div.content{
		width: 95vw;
		margin-left: 2.5vw;
	}
	div.videos{
		height: 39.2765625vw;
	}
	div.fotos{
		height: 39.2765625vw;
	}
}