html { font-size: 14px; }
body { font-family: 'Nunito', sans-serif; }
html, body { height: 100%; }
.js-example-basic-multiple { width: 100%; }
.row { margin-bottom: 10px; }
h1 { padding: 30px 0; color: #667788 }
h2, h3 { padding: 20px 0; color: #9AB }
h4 { padding: 5px 0; color: #9AB }
h2 { font-weight: 600; }
p { color: #9ab; }
.row > div { margin: 5px 0; }
.alert { cursor: pointer; }
footer, .push { height: 60px; }
body > .container { min-height: 100%; height: auto !important; margin: 0 auto -60px; }
.row:nth-child(3) { opacity: 0.25; transition: opacity 0.5s ease; }
.row:nth-child(3):hover { opacity: 1; }

.ergebnis-content {
	min-height: 500px;
	overflow: hidden;
}

.ergebnis-content img {
	float: left;
	margin-right: 30px;

	width: auto;
	height: calc( 90vh - 200px );
}

.movie {
	font-size: 1.8em;
}

.length {
	margin-top: 50px;
}

.length,
.rating {
	font-weight: 200;
}

.loading {
	background: url('../img/loading.gif') center center no-repeat;
}

.almost-there {
	animation: fade-out 0.5s forwards;
}

.almost-there .movie {
	display: none;
}

.loaded {
	animation: fade-in 1s;
}

@keyframes fade-in {
	0%   {opacity: 0; }
	100% {opacity: 1; }
}

@keyframes fade-out {
	0%   { opacity: 1 }
	100% { opacity: 0 }
}