html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color: #dedede;
	background-image: url("/img/bg.png");
	background-size: 50%;
}

nav {
	font-size: 0.9rem;
	font-family: Arial;
	color:white;
}

nav.loud {
	background-color: #555;
	padding: 3px;
	text-align: right;
	position:absolute;
	width: calc(100vw - 6px);
}

#login {
	transition: opacity .5s;
}

nav.silent #login {
	padding: 5px;
	top: 0;
	right: 0;
	position: absolute;
	opacity: 0;
}


nav.silent #login:hover {
	opacity: .5;
}

#login>div {
	display: none;
}

section {
	display: none;
	width: 100vw;
	height: 100vh;
	flex-direction: column;
}

section#rekni {
	align-items: center;
	justify-content: center;
	font-family: Oswald, Arial;
	font-size: 5em;
	font-weight: 200;
}
section#rekni p {
	margin: 0;
	padding: 0 15px;
	text-align: center;
}

#youtubePlayer {
	display: none;
}

section.koldagroup {
	justify-content: space-between;
	align-items: center;
}

.logobox {
	position: relative;
	width: 400px;
	height: 195px;
	margin-top: 20px;
	flex-shrink: 0;
}

@media (max-width: 400px) {
	.logobox {
		zoom: 80%
	}
}

.logobox .text {
	color: #333;
	display: inline-block;
	position: absolute;
	z-index: 100;
}

.logobox .name {
	font-family: 'Roboto Condensed';
	font-wieght: 400;
	font-size: 3rem;
	animation: .6s cubic-bezier(0.895, 0.03, 0.685, 0.22) .6s normal running backwards bounce-to, .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s normal running forwards bounce-from;
}

.logobox .jiri {
	top: 20px;
	left: 20px;
}

.logobox .lilly {
	top: 40px;
	left: 130px;
	animation-delay: .8s, 1.4s;
}

.logobox .denisa {
	top: 60px;
	left: 250px;
	animation-delay: 1s, 1.6s;
}

.logobox .kolarikovi {
	font-family: 'Roboto';
	font-weight: 500;
	font-size: 4.2rem;
	animation: .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s normal running both rebound1, .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s normal running none rebound2, .2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s normal running forwards rebound3;
	top: 68px;
	left: 51px;
	transform-origin: top left;
}

.logobox .amp {
	display: inline-block;
	font-family: 'Roboto';
	font-weight: 100;
	font-size: 5.2rem;
	position: absolute;
	color: #bbb;
	z-index: 50;
	animation: 5s linear 1s both fadein;
}

.logobox .amp.first {
	top: 3px;
	left: 83px;
}

.logobox .amp.second {
	top: 18px;
	left: 205px;
	animation-delay: 2s;
}

section.koldagroup .logobox {
	order: 1;
}
section.koldagroup p {
	flex-shrink: 0;
	order:4;
	margin: 1em 50px;
	text-align: center;
	font-family: 'Roboto Condensed';
	font-wieght: 400;
	font-size: 1.2rem;
}
section.koldagroup p a {
	color: #265774;
}
section.koldagroup .picture {
	margin: 0 50px;
	order:3;
}
@media (max-width: 1000px) {
	section.koldagroup .logobox {
	}
	section.koldagroup p {
		margin: 1em 15px;
	}
	section.koldagroup .picture {
		margin: 0 15px;
	}
}

section.koldagroup img {
	max-width: 100%;
	max-height: calc(100vh - 285px);
}

@media (max-height: 450px) {
	section.koldagroup {
		justify-content: flex-start;
	}
	.logobox {
		zoom:70%
	}
	section.koldagroup p {
		order:2;
	}
	section.koldagroup img {
		max-height: calc(100vh - 220px);
	}
}


@-webkit-keyframes bounce-to {
	0% {
		transform: translateY(-150px) rotate(-8deg);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}

@-webkit-keyframes bounce-from {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translate(4px, -8px) rotate(3deg);
	}
}

@-webkit-keyframes rebound1 {
	100% {
		transform: rotate(2.2deg);
	}
}

@-webkit-keyframes rebound2 {
	0% {
		transform: rotate(2.2deg);
	}
	100% {
		transform: rotate(4.4deg);
	}
}

@-webkit-keyframes rebound3 {
	0% {
		transform: rotate(4.4deg);
	}
	100% {
		transform: rotate(6.6deg);
	}
}

@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}