body{
font-size: 15px;
line-height: 1.6;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none; 
}

selector { cursor: none; }

#screensaver {
	/* Set rules to fill background */
	height: 100vh;
	/* Set up proportionate scaling */
	min-width: 100vw;
	width: auto;
	background-image: url("../img/BILDSCHIRMSCHONER_istockphoto_000001754848_L © matejmm.jpg");
	background-repeat: no-repeat;
	background-position:bottom;
	background-size: cover;
	z-index: 500;
	bottom:100vh;
	position:fixed;
	transition-duration: 1.0s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

#screensaver svg{
position: absolute;
bottom: 0;
left: calc(50vw - 15%);
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
-webkit-animation-name: hvr-wobble-vertical;
animation-name: hvr-wobble-vertical;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

/* Wobble Vertical */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
	-webkit-transform: translateY(16px);
	transform: translateY(16px);
  }
  33.3% {
	-webkit-transform: translateY(-12px);
	transform: translateY(-12px);
  }
  49.95% {
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
  }
  66.6% {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
  }
  83.25% {
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
}
@keyframes hvr-wobble-vertical {
  16.65% {
	-webkit-transform: translateY(16px);
	transform: translateY(16px);
  }
  33.3% {
	-webkit-transform: translateY(-12px);
	transform: translateY(-12px);
  }
  49.95% {
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
  }
  66.6% {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
  }
  83.25% {
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
}


:root{
	--content-ratio: 90vh;
	--grau: rgb(117,117,117);
	--dunkelgrau: rgb(63,63,63);
	--hellgrau: rgb(225,225,225);
	--gruen: #113e2f;
	--gruen-hover: #0c2e23;
	--gelb: #f5be00;
	--gelb-hover: #e2b002;
	--weiss: #fff;
	--milchglass: #ffffffdd;
	--schwarz: #000;
}

.rowIcon{

}
.rowIcon img{
  max-height: 100%;
  vertical-align: bottom;
}

#content{
	height: var(--content-ratio);
	background-color: var(--hellgrau);
	overflow: hidden;
}

header{
	height: calc(100vh - var(--content-ratio));
	background-color: var(--gruen);
	display: flex;
	flex-direction:row;

}
header div a{
	height: 100%;
}
header div.title{
	height: 100%;
	align-items: center;
	display: flex;
	gap: 5%;
	order:1;
}
header div.title span{
	margin-top: 0px;
	margin-left: 0px;
	white-space:nowrap;
	font-size: 25px;
}

header div.control{
	order:2;
}
.contentContainer{
height: 100%; 
width:100%;
overflow: hidden;
position: absolute;
margin: 0;
}

.navbar{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 5%;
	padding: 3% 10%;
	height:100%;
}

.navelement{
	max-height: 400px;
	height: 40%;
	max-width: 500px;
	width: 28%; /*35 für 4*/
	box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	position: relative;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	display: flex;
	flex-flow: column;
}

.navelement:hover, .navelement:focus, .navelement:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.navelement a.navelementOverlay { 
	width: 100%;
	height:100%;
	position: absolute;
}
	
.navelement img {
	width: 100%;
	height: 80%;
	object-fit: cover;
}

.navelement p {
	margin: 0px;
	padding: 10px 20px;
	font-size: 25px;
	text-align: center;
}

	
	
.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}
	
	
	
	
	
	
	
@keyframes screensaverOn {
  0% {
	transform: translateY(0px);
  }
  100% {
	transform: translateY(100vh);
  }
}
.screensaveractive {  
  animation: 1s ease-out 0s 1 screensaverOn;
}

	
	
@keyframes slideInFromLeft {
  0% {
	transform: translateX(-100%);
  }
  100% {
	transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
	transform: translateX(100%);
  }
  100% {
	transform: translateX(0);
  }
}

@keyframes slideInFromTop {
  0% {
	transform: translateY(-100%);
  }
  100% {
	transform: translateY(0);
  }
}

@keyframes slideInFromBottom {
  0% {
	transform: translateY(100%);
  }
  100% {
	transform: translateY(0);
  }
}

.slideFromLeft {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

.slideFromRight {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromRight;
}

.slideFromTop {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromTop;
}

.slideFromBottom {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromBottom;
}

#languageButton{
	display: none;
}