@keyframes kenburns-right {
	0% {
		transform: scale(1) translate(0, 0);
		transform-origin: 84% 50%;
	}
	50% {
		transform: scale(1.25) translateX(20px);
		transform-origin: right;
	}
	100% {
		transform: scale(1) translate(0, 0);
		transform-origin: 84% 50%;
	}
}

@keyframes pulsate-fwd {
	0% {
		transform: scale(1.0);
	}
	50% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}

b {
	font-weight: bold;
}

body {
	background-image: linear-gradient(to bottom, var(--login-background), var(--paper));
	color: var(--ink);
	font-family: var(--font);
	font-size: 12px;
	overflow: hidden;
}

button {
	background-image: linear-gradient(to bottom, var(--brand), var(--brand-gradient-end));
	border: 1px solid var(--ink);
	border-radius: 15px;
	color: var(--paper);
	font-family: var(--font);
	font-size: 12px;
	font-weight: bold;
	height: 35px;
	margin: 15px 0 0 150px;
	padding: 5px 5px 5px 5px;
}

button:hover {
	background-image: linear-gradient(to bottom, var(--brand-hover), var(--brand-hover-gradient-end));
}

button.submit {
	width: 150px;
}

div#cookie_notice {
	background-color: var(--grey-light);
	bottom: 0;
	color: var(--grey-darkest);
	font-size: 14px;
	left: 0;
	line-height: 21px;
	min-height: 21px;
	padding: 8px 18px 8px 18px;
	position: fixed;
	right: 0;
	text-align: left;
}

div#cookie_notice span {
	display: block;
	padding: 5px 0 5px 0;
}

div#cookie_notice_close {
	background-color: var(--brand);
	border-radius: 5px;
	color: var(--paper);
	cursor: pointer;
	display: block;
	float: right;
	margin: 0 0 0 5px;
	min-width: 100px;
	padding: 5px 8px 5px 8px;
	position: absolute;
	right: 18px;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}

div#leftcontainer {
	height: 100%;
	left: 0%;
	overflow: hidden;
	position: absolute;
	text-align: center;
	width: 75%;
}

div#leftcontainer div#background {
	animation: kenburns-right 20s ease-out infinite both;
	background-image: linear-gradient(to bottom, var(--login-background), var(--paper));
	background-position: center;
	background-size: cover;
	display: none;
	height: 100%;
	transition: background 1.5s linear;
	width: 100%;
}

div#leftcontainer div#overlay {
	background-image: linear-gradient(var(--overlay), var(--overlay-gradient-end));
	bottom: 0;
	display: none;
	height: 100%;
	position: absolute;
	width: 100%;
}

div#login_menu {
	min-width: 1400px;
}

div#message {
	width: 350px;
}

div#rightcontainer {
	background-image: linear-gradient(to bottom, var(--paper), var(--panel));
	display: none;
	height: 100%;
	position: absolute;
	right: 0%;
	text-align: center;
	width: 25%;
}

div#rightcontainer h1 {
	font-size: 48px;
	font-weight: bold;
	margin: 10px 0 10px 40px;
	text-align: left;
}

div#rightcontainer h2 {
	font-size: 20px;
	font-weight: bold;
	margin: 10px 0 50px 70px;
	text-align: left;
}

div#rightcontainer img#cyclists {
	bottom: -30px;
	height: 200px;
	position: absolute;
	right: 0;
}

div#rightcontainer img#logo {
	height: 200px;
	margin: 60px auto 50px auto;
}

div.blocker {
	background-color: var(--blocker) !important;
}

div.modal {
	background-image: linear-gradient(to bottom, var(--brand-dark), var(--brand)) !important;
	color: var(--ink) !important;
	font-weight: bold !important;
	line-height: 20px !important;
	opacity: 0.9 !important;
	padding: 30px 30px 30px 30px !important;
	text-align: center !important;
}

input::placeholder {
	color: var(--grey-light);
}

input:hover {
	background-image: linear-gradient(to bottom, var(--brand-hover), var(--brand-hover-gradient-end));
}

input.field {
	width: 300px;
}

input[type="password"], input[type="text"] {
	background-image: linear-gradient(to bottom, var(--brand), var(--brand-gradient-end));
	border: 1px solid var(--ink);
	border-radius: 15px;
	color: var(--paper);
	font-family: var(--font);
	font-size: 12px;
	height: 35px;
	margin: 20px 0 0 0;
	padding: 5px 20px 5px 20px;
	text-align: left;
}

table#modal_content a {
	color: var(--paper);
	text-decoration: none;
}

table#modal_content a:hover {
	text-decoration: none;
}

table#modal_content td {
	text-align: center;
	vertical-align: bottom;
}

table#modal_content td div {
	background-image: linear-gradient(to bottom, var(--brand), var(--brand-gradient-end));
	border-radius: 20px;
	margin: 0 auto 0 auto;
	padding: 10px 10px 10px 10px;
	text-align: center;
	width: 70%;
}

table#modal_content td div:hover {
	background-image: linear-gradient(to bottom, var(--brand-hover), var(--brand-hover-gradient-end));
}

table#modal_content td div img {
	width: 100%;
}

table#modal_content td div p {
	color: var(--ink);
	font-size: 20px;
	font-weight: bold;
	margin: 20px auto 10px auto;
}