/* CSS RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Base styles */

*, *:after, *:before {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	line-height: 1.5;
	height: 100%;
}

body {
	position: relative;
	margin: 0;
	font-family: 'Work Sans', Arial, Helvetica, sans-serif;
	min-height: 100%;
	/* background: url("http://ikarus-glds.de/ikarus-backend/img/bg_schwerlast.jpg") no-repeat;*/
	background-size: 100% auto;
	color: #777;
}

img {
	vertical-align: middle;
	max-width: 100%;
}

button {
	cursor: pointer;
	border: 0;
	padding: 0;
	background-color: transparent;
}

a {
	text-decoration: none;
	color: #000;
}
/* Container */

.container {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -40%);
	animation: intro .7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
/* Profile Card */

.profile {
	position: relative;
}

.profile--open {
	visibility: visible;
}

.profile--open .profile__form {
	visibility: visible;
	height: auto;
	opacity: 1;
	transform: translateY(-6em);
	padding-top: 12em;
}

.profile--open .profile__fields {
	opacity: 1;
	visibility: visible;
}

.profile--open .profile__avatar {
	transform: translate(-50%, -1.5em);
	border-radius: 50%;
}

.profile__form {
	border: 1px #000;
	position: relative;
	background: transparent;
	visibility: hidden;
	opacity: 0;
	height: 0;
	padding-top: 3em;
	border-radius: .25em;
	-webkit-filter: drop-shadow(0 0 2em rgba(0, 0, 0, 0.2));
	transition: opacity .4s ease-in-out, height .4s ease-in-out, transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.profile__fields {
	opacity: 0;
	visibility: visible;
	transition: opacity .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.profile__avatar {
	position: absolute;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 1.25em;
	overflow: hidden;
	width: 4.5em;
	height: 4.5em;
	display: block;
	transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	will-change: transform;
}

.profile__avatar:focus {
	outline: 0;
}

.profile__footer {
	padding-top: 1em;
}
/* Form */

.field {
	position: relative;
	margin-bottom: 2em;
}

.field_bottom {
	position: relative;
}

.label {
	position: absolute;
	height: 2rem;
	line-height: 2rem;
	bottom: 0;
	color: #000;
	transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.input {
	width: 100%;
	font-size: 100%;
	border: 0;
	border-radius: .25em;
	padding: 0;
	background-color: #ccc;
	height: 2rem;
	line-height: 2rem;
	border-bottom: 1px solid #eee;
	color: #000;
	transition: all .2s ease-in;
}

.input:focus {
	outline: 0;
	border-color: transparent;
	width: 100%;
}
/* Using required and a faux pattern to see if input has text from http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css */

.input:focus + .label, input:valid + .label {
	transform: translateY(-100%);
	font-size: 0.75 rem;
	color: #777;
}

.input_ {
	width: 100%;
	font-size: 100%;
	border: 0;
	border-radius: .25em;
	padding: 0;
	background-color: #ccc;
	height: 2rem;
	line-height: 2rem;
	border-bottom: 1px solid #eee;
	color: #000;
	transition: all .2s ease-in;
}

.input_:focus {
	outline: 0;
	border-color: transparent;
}
/* Using required and a faux pattern to see if input has text from http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css */

.input_:focus + .label, input_:valid + .label {
	transform: translateY(-100%);
	font-size: 0.75 rem;
	color: #777;
}
/* Button */

/* Button */

.btn {
	border: 0;
	font-size: 12px;
	height: 40px;
	line-height: 3;
	padding-left: 10px;
	padding-right: 10px;
	color: white;
	background: #777;
	text-transform: uppercase;
	border-radius: .25rem;
	letter-spacing: .2em;
	transition: background .2s;
	float: left;
	visibility: visible;
	text-align: center;
}

.right {
	float: right;
}

.btn:hover, .btn:focus {
	background: #E3D05D;
	border: 1px solid #000;
	border-radius: 8px;
}

.active .btn {
	background: #E3D05D;
	visibility: visible;
}

.invis {
	display: none;
	opacity: 0;
}

.text {
	color: #999;
	font-family: 'Work Sans', Arial, Helvetica, sans-serif;
	font-weight: bold;
}

/* Firefox Label Input reset */
@-moz-document url-prefix() {
.label {
position: absolute;
height: 2rem;
line-height: 2rem;
bottom: 0;
color: #000;
transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.input:focus + .label, input:valid + .label {
transform: translateY(-100%);
font-size: 0.75 rem;
color: #777;
}
}

.button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	padding: 12px 24px;
	border: 1px solid #777;
	border-radius: 8px;
	background: #777;
	text-shadow: #72682f 1px 1px 1px;
	font: normal normal bold 20px arial;
	color: #ffffff;
	text-decoration: none;
}
.button:hover, .button:focus {
	border: 1px solid #000;
	background: #E3D05D;
	color: #ffffff;
	text-decoration: none;
}
.button:active {
	background: #E3D05D;
}
.csv:before {
	content: "\0000a0";
	display: inline-block;
	height: 16px;
	width: 16px;
	line-height: 16px;
	margin: 0 4px -6px -4px;
	position: relative;
	top: 0px;
	left: 0px;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACf0lEQVRIia2WsWsUQRTGf9+6ZA+RYBHsbMQqQog26uYP0MLCxqRTAoIICppNCkWxSgrNHYrERsROkIiFhaSwktxBtE9hLSKWQSR7hPssdm9vk7tNIvFVb+a9+Wa+b+bNjGqzsTEgMuv6g/oKE9h53+5+kA1WNTg7wfNE7c8PKbC1gFgbDPiPZp8V3EcizKgAYi1dbH44IDQAtSQOUIYblGh1/gf4NpMJi4Z7/dHMRCCYRA6zkADep/XmH4ChJB4RuqicunHbCt+1Fz+XFpnFwkJwEXRDaaPZiZL4hNA8yvfdPsXc+XtDJpBZkpgsTg3c3g6eAQIEeQL0S/TY+FMWN8CdqKNxWZOgSWywMbyR9aJPnjwe9DpKPpDWW1uGacMvEBI14BXwXBgkDOuYm5uN5uD9kwiKGhhwNNv11nfgmu1ONonOSBpBwvZv0JW00dqoAt9Loi6TFaABLmhjd4Abab25PhAc9pZoh30tVpVJswl82SW/YBEU0lRUb5TEo8BLeiWPpMPAcpTEtd3A80IrGPRJNJTER4FlwTAY2z+ArXz8OPAsvHtuFwZlWbRdoqGZOBC8ljSab1gbMWW8ULoNrx8KgquD0d0PuoPhA0mXu7k2D9PF1irWvE0ru2EUAEtREo8NQKiWKEriS4hH2SqM8UdBAyBtNNvAtPEGMpKOgN5Gs/HwIIl6d1HOJpqLA8xJYCE/wB3M0majtdVNTeutb1EST9lMFJelGQNWd0rUm6A7+EmrAzytkq40yQqwUp2xj1N0YCtLJLhQSyaO/R9kn+6XSNzqxal+NsvvNlV+ryhDzM/+kfkzWvXdcAl1Dz/EOl7M2rfq8hej7Ff9afr9v/woFe1jjgqxAAAAAElFTkSuQmCC") no-repeat left center transparent;
	background-size: 100% 100%;
}

.pdf:before {
	content: "\0000a0";
	display: inline-block;
	height: 24px;
	width: 24px;
	line-height: 24px;
	margin: 0 4px -6px -4px;
	position: relative;
	top: 0px;
	left: 0px;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADTUlEQVRIiZ2WS2hcZRTHf/8vt6WGQEVhEiFUCehCpYpIdSrN2Bm0hUm7sYyrouLCheDGR1cS0EXVhdKdG63iokIRF6ZKMRnTIBkoPhDEF4W21EVnKJJIqTGZuX8X984r82jw29x7v/Odx/9/znfOFX1WvpB7CPgA2A0KAAKcPjcv4xXgsfLCuV82y3rO7y/kIsGvgimj84JryNhCAmNovtsxsEvSgzYXwPvKC+euDnWQL0xPgi4DHwXp+fn5xX4gO9E+K+kkgO1lpCfK84s3mvLQA9dE6f5PNzO+eUnai/3x/nyuZTeqzTwymZCbsHx6ozHxTSPidvnWT4uPTiKnnkXzPcmFMOaZfwgbrehA0hHw8ekD08eWzi4R2eFywm2idCSKeSraQHjW0qxSFq1E3uEBLKaCZ393D9OvRHVdBN6PJAWbRcQXzfgkEgv2uKU1YLVpl5bIOaTDt4haS6AWVcH2iXwhdymyjdAPmbnldztDqBazY8An2CvjZyrPbQ6xWszG4MOlqFH+8V+dF9rTXcbaDj4RDcnYBPb3wB0DzxjuDF4HHzC8JLiPduHcD+yI1ExAj7JrwD7g7JAgACgvLK0Ab3SK8oXH3waXgt3POoD+BsaApYEO+kbWkgXocw/aqjHADeDe/2UfIoAg9esuIPQw8DWQqxazdw04dFMHkd177mIuB6y/CMwCu4HT1WL2FPAX8J3i8LOJwcIaCCOkCLp3azPZ0dGx9deAPcDLQAZ4HTgEXANmHOI3t4yg+fXHwYPsHFkt2byAiIUeyMwt15vyajH7G3Ac+AooAhVw+3YPQtAsop0jq08CWaAGHO00DjB+pnLJ5ijwJ/AqkFA0ONMJgrTHIdhuGAWOjc9VrvbTmPiyUgfKKaKtU2SYBF0HTgFT1eLeqaGqSfh3b4WipIpEyXYJ1J6NXQOy37BMOsCQKkoRiGKSh8T4hZjM5/Xo5C75w6e3NT5rzwro6pqtlk1tmIPemZzPZSSuAMtCh6R4rY4AoYaQjBSnjkQcAjSAGKQG4BiFSaACut7TTUfCtlrsjW9BefAVW2shCSMmtCZGKzLFKaz03yOV3Ga0A/mdvhkqFHIThvck7iGdVmk5xt0nO3PU3jHUSe7LW/8BccdCZzfuEZcAAAAASUVORK5CYII=") no-repeat left center transparent;
	background-size: 100% 100%;
}

.logout:before {
	content: "\0000a0";
	display: inline-block;
	height: 24px;
	width: 24px;
	line-height: 24px;
	margin: 0 4px -6px -4px;
	position: relative;
	top: 0px;
	left: 0px;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADxElEQVRIiZWVz4scRRTHP11d3dOZ/ZXdxGxWF3Rj1gTjQRQ8eVAvOYgHD5Jc1FMEyT+Qs4IYjBeFKEhAEAUjRCQeFOMhBw9BCUQCUROzZMls1uyS2ZlkZ7qrXlV5mOnJ7GQWsg++vNdQvO973/e6KmJrtvPAgX3vj45UEStYEUQEsUJ9rcHK6p3B8+ejLRLs+eXn0/8+/9yzNNaaNNYaNBoNGmsNznx/li+/PjN4/nO9RQLECt55QgiEAASADXX6fq8eIueuKuwvP6yxiLguSUkU+pN7QLZCkL0MP0zB0wDGGqy1OCd477tweB/6CXp4GAJe3bn9iXfHs7NV2G+NxRqDiODEkedtVm8vY01BX+UleKgZVKoJh+Z27eHawleNeh1jLNYKeZHTWLuDtRYfNnRQxmgFo3vgcDoglwIiBQLbKwmqsk3z9vz01E+nPuPaY7NMz0xzt1FHrOCcI3jvhxB4rWH8yNjYpy8dPJgFEXxREIqc2BXELkf7gkx7ktgRpxGvh7v8+MExmkePkaYx1trOZnk/OAN6EiVxzMiOHQRr8XlOZNrE0iYWTSwxWlpol6Mjg86EQ/zHd1+8R+u1I1RHqlgRnBtK0Bly8B5pNpFmE9+6B8U6kWmhpE3s2mifk4ScVBdUKgXZOLw1WzBy/luWarc6M/BukEB6HQTnsCsrBLEob1EUEAqikBNTEIccrQuSJCepRkQT0zA2xZuPT3Dy7wsszT6Dcw8Q3N8it77O6rlzqAiyCmQZUIG49FVIxiHJNNHkbqLJGZh4hJpNuaruMpkkiPQI5AGJepujQMUQK4jjDrQGXQG9DaKx7TCxCyZnqKkJPv6nzfT8fOfHExkqUY8gAlTUheogVqA0xCmoLIWRCaKxKWou48TlOrv37sUYizGmf4s2EGkP/hLcXIVUB0gFEgNpgKQTq1dGeXQurSgqI9zMFR8t1JmZf4qiMBRFgTFmmP6dGQgsfwMHAHBd5P3CMXtumitzKk5rLc/xRcPuffs7ibsE3nla7YLB6ntDBgybmwAstZx/57eF07MvPnk4z3NEBGsMt5ZX+OPSX63F2nJzWBeb3UX9w1c31vGf/H7vxK/L4dQbrdbhdjtjZbXOhYuXzcLiUqtboB/I8cBlp7rQA370w+ucvJqH48Ds0vJtLv55xV+/UTMhhGGJN5CUT5EC0j5kfXG1K5MBdAQvhE5cYsPdM9DBYkmg+5KVyLooOxE64291kfd52ayFUqKyCsN9/XtV950x3YR5N940cWn9r/Uw/UuUVl4Dg35T+x8GxiBEY1xOwgAAAABJRU5ErkJggg==") no-repeat left center transparent;
	background-size: 100% 100%;
}

/* Intro animation */

@keyframes intro {
	from {
		opacity: 0;
		top: 0;
	}
	to {
		opacity: 1;
		top: 50%;
	}

@-o-viewport {
	width: device-width;
	height: device-height;
	zoom: 2;
}
}