@import url('https://fonts.googleapis.com/css?family=Istok+Web|Lora');

html, body {
	padding: 0;
	margin: 0;
}

#loader {
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background-color: rgba(255,255,255,1.00);
}

#loading-quadrat {
	height: 70vh;
	overflow: hidden;
	animation: 4s ease-in-out 0s 1 grow-q;
}

#content {
	/* https://www.shutterstock.com/de/image-photo/two-male-employees-consulting-laptop-cafe-1011371083 */
	background-image: url(../images/bg-0.jpg);
	min-height: 100vh;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: repeat-y;
	padding-left: 0;
	padding-right: 0;
}

.name {
	font-family: 'Istok Web', sans-serif;
	color: rgba(0,172,229,1.00);
}

#kontakt {
	font-size: 1.1em;
}

h5 {
	font-family: 'Lora', serif;
	color: rgba(88,88,90,1.00);
}

#peter {
	line-height: 1.5;
}

a:hover {
	text-decoration: none;
	color: rgba(0,172,229,1.00);
}

a {
	color: rgba(88,88,90,1.00);
}

li, p {
	color: rgba(88,88,90,1.00);
	font-family: 'Lora', serif;
	font-size: 1.15em;
}

p {
	line-height: 1.3;
}

li:first-child {
	border-top: 0px;
}

.list-group-item {
	background-color: rgba(0,0,0,0.00);
}

#logo {
	max-width: 400px;
}

#bg-white {
	min-height: 100vh;
}

.fadeout {
	animation: 1s ease-in-out 0s 1 fadeOut;
	opacity: 0;
}

.fadein {
	animation: 1s ease-in-out 0s 1 fadeIn;
	opacity: 1;
}

.none {
	display: none;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes grow-q {
  0% {
	-webkit-transform: scale(0.1);
			transform: scale(0.1);
  }
	60% {
	-webkit-transform: scale(1.0);
			transform: scale(1.0);
	}
  100% {
	-webkit-transform: scale(1.0);
			transform: scale(1.0);
  }
}
@keyframes grow-q {
	0% {
	-webkit-transform: scale(0.1);
			transform: scale(0.1);
	}
	60% {
	-webkit-transform: scale(1.0);
			transform: scale(1.0);
	}
	100% {
	-webkit-transform: scale(1.0);
			transform: scale(1.0);
	}
}