@import url(https://fonts.googleapis.com/css?family=Montserrat);

html, body {
	background-color: #111D0B;
	background-image: url('tetzlaff.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom right;
	background-size: 22vw;
	color: #FFFFFF;
	font-family: "Montserrat";
	font-size: 10px;
	font-weight: lighter;
	height: 100%;
	letter-spacing: -1px;
	opacity: 1;
	overflow: hidden;

	-webkit-animation: bgcolor 20s infinite;
	animation: bgcolor 20s infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}

html {
	display: table;
	margin: auto;
}

body {
	display: table-cell;
	vertical-align: middle;
}

@keyframes bgcolor {
	0% {
		background-color: #111D0B
	}

	35% {
		background-color: #0111D0B /* UPDATE = #111D0B */
	}

	55% {
		background-color: #111D0B
	}

	80% {
		background-color: #111D0B /* UPDATE = #111D0B */
	}

	100% {
		background-color: #111D0B
	}
}

a {
	color: #FFFFFF;
	padding: 6px;
	text-decoration: none;
	text-transform: uppercase;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

a:hover {
	color: #E71818;
	font-size: 35px;
	letter-spacing: -17px;
}

.automatenhalle {
    -webkit-animation: pulse 33s infinite ease-in-out;
    -o-animation: pulse 33s infinite ease-in-out;
    -ms-animation: pulse 33s infinite ease-in-out; 
    -moz-animation: pulse 33s infinite ease-in-out; 
    animation: pulse 33s infinite ease-in-out;
}

.automatenhallelinks {
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, -50%);
    margin: 0 auto;
}

@-webkit-keyframes pulse {
    0% { -webkit-filter: blur(1rem); }
    10% { -webkit-filter: blur(0rem); }
    90% { -webkit-filter: blur(0rem); }
    100% { -webkit-filter: blur(1rem); }
}

@keyframes pulse {
    0% { -webkit-filter: blur(1rem); }
    10% { -webkit-filter: blur(0rem); }
    90% { -webkit-filter: blur(0rem); }
    100% { -webkit-filter: blur(1rem); }
}

.automatenhalle img{
	border: none;
	border-radius: 11px;
	max-height: 100%;
	max-width: 100%;
	opacity: 0.9;
	transform: scale(1);
	transition: 1s ease-in-out;
}

.automatenhalle img:hover {
	opacity: 1.0;
	transform: scale(1);
}

video {
	object-fit: cover;
	opacity: 0.04;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}