@font-face {
	font-family: soureCode;
	src: url(/fonts/SourceSansPro-Regular.woff);
}

@font-face {
	font-family: soureCodeBold;
	src: url(/fonts/source-sans-pro-bold.woff);
}


@font-face {
	font-family: sourceCodeLight;
	src: url(/fonts/source-sans-pro-light.woff);
}


@font-face {
	font-family: buttler;
	src: url(/fonts/Buttler_Regular.woff);
}

@font-face {
	font-family: firaCode_Semi_Bold;
	src: url(/fonts/FiraCode-SemiBold.woff2);
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: 
		url('/fonts/MaterialIcons-Regular.ttf') format('truetype'),
		url('/fonts/MaterialIcons-Regular.woff') format('woff');
}


@font-face {
  font-family: 'RobotoLight';
  font-style: normal;
  font-weight: 100;
  src: url('/fonts/roboto/roboto-v27-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto/roboto-v27-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto/roboto-v27-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto/roboto-v27-latin-100.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto/roboto-v27-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto/roboto-v27-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
  font-family: 'RobotoBold';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/roboto/roboto-v27-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto/roboto-v27-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto/roboto-v27-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto/roboto-v27-latin-900.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto/roboto-v27-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto/roboto-v27-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}


.material-icon {
	font-family: 'Material Icons';
	font-size: 2em;
	line-height: 1em;
	font-style: normal;
}



/* 


red rgb(191, 42, 42)




blues 



 rgb(0, 136, 206) // former #0082d0

	dark	2D4059
	middle	478295
	light	6BA8BC
	red		C5654D
	lachs	 #eea2a2
*/

body {
	background: rgba(251, 251, 251, 0.5);
	color: #2d4059;
	margin: 0;
	padding: 0;
	font-family: Roboto, soureCode, Sans-Serif;
	font-size: 1.1em;
	line-height: 2em;
	font-weight: normal;
	letter-spacing: 1px; /** CAUSES STRANGE BUG - elements are suddenly not applying the correct width attribute- but increases readability -_- **/
}

h1, h2, h3, h4, h5 {
	padding: 0.5em 0;
	margin: 0;
	font-weight: normal;
	font-family: RobotoBold, soureCodeBold;
}

h4,  h5 {
	font-size: 1em;
}

a {
	color: #2d4059;
}

a:hover {
	text-decoration: underline;
	color: rgba(42, 121, 191, 1);
}

p {
	padding: 1em;
}

label.checkbox {
	cursor: pointer;
}

div, form {
	box-sizing: border-box;
}

input.readonly {
	background: #ddd;
}

strong {
	font-weight: normal;
	font-family: soureCodeBold;
}

input[type=text] {
	border: 1px solid #eee;
}

.highlight {
/* 	font-style: italic; */
	font-family: soureCodeBold;
	color: rgb(77, 145, 76);/*rgb(191, 42, 42);*/
}

.black {
	color: #333;
}

.clear {
	clear: both;
}

.page {
	position: relative;
	margin-top: 2em; 
}

.page.impressum .section, .page.impressum .section a {
	color: #2d4059;
}

.header {
	/*border-bottom: 1px solid #e1e4f2;*/
	border-top: 1px solid #333;
	padding: 0 0.9em 0 0.9em;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	font-family: soureCodeBold;
	font-size: 1em;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3rem;
	background: white;
	/*background: #2d4059;*/
	z-index: 2;
}

.header .navigation {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.header .navigation div {
	background: rgb(53, 53, 53);
	padding: 0 0.6em;
	margin: 0 1em 0 0;
	height: 2em;
	line-height: 2em;
}

.header .navigation div a {
	color: #e1e4f2;
	padding: 0 0.3em;
	text-decoration: none;
}
.header .navigation div a:hover {
	text-decoration: none;
}

.header .brand {
	line-height: 4em;
	padding: 0 0 0 2em;
}

.header .brand .app-name {
	position: relative;
	top: -0.5em;
	left: -0.1em;
	color: #0b2200;
}

.header .brand a, .header .brand a:hover {
	text-decoration: none;
}

.header .brand .logo {
	height: 2em;
}

.header .back {
	position: absolute;
	top: 0;
	left: 0;
}



.quote {
	position: relative;
	width: 90%;
}

.quote .text {
	position: relative;
	color: #2d4059;
	background: #fbfbfb;
	border-radius: 4px;
	padding: 0.9em;
}

.quote .text:after {
	position: absolute;
	bottom: -24px;
	display: block;
	content: "";
	width: 42px;
	height: 42px;
	left: 100px;
	background: transparent url('/img/icon/quote.png') no-repeat;
}

.quote .author {
	font-style: italic;
	font-family: buttler;
	margin: 1em 0 0 0;
	font-size: 0.9em;
}

.alpha {
	position: fixed;
	z-index: 9;
	width: 650px;
	top: 111px;
	right: -169px;
	padding: 0.5em 0;
	text-align: center;
	background: rgba(144, 180, 213, 0.7);
	transform:rotate(45deg);
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform:rotate(45deg); 
	/*border-top: 1px solid #f9f9f9;
	border-bottom: 1px solid #f9f9f9;*/
	-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
	line-height: 1.2em;
}


.section {
	position: relative;
	width: 100%;
	padding: 3em 5em;
	box-sizing: border-box;
	/*min-height: 100vh;*/
	/*background: #2D4059;rgb(94, 136, 174);*/
	border-bottom: 1px solid #f9f9f9;
	font-size: 1.1em;
}

.section .element {
	position: relative;
	width: 88%;
	min-height: 10em;
	margin-left: -44%;
	top: 50%;
	left: 50%;
}



.section .element p {
	padding: 1em 0;
	line-height: 2em;
}

.section .element .image {
	width: 80%;
	padding: 1em 0;
}

.section.info {
	background: rgba(251, 251, 251, 0.5);
	color: #2d4059;
}
.section .element .row {
	display: flex;
	flex-direction: row;
	margin: 1em 0;
}

.page.footer .section .element .row .tile.highligted {
	height: 6em;
}

.section .element .row .tile {
	font-weight: normal;
	font-size: 0.99em;
	font-family:sourceCodeLight;
	line-height: 2em;
	padding: 1.9em 1em 0 1em;
}

.section .element .row .tile a {
	font-weight: bold;
	color: #2d4059;
	cursor: pointer;
}

.section .element .row .tile.highligted {
	width: 33%;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(69,69,69,1);
	-moz-box-shadow: 0px 0px 15px 0px rgba(69,69,69,1);
	box-shadow: 0px 0px 15px 0px rgba(96,96,96,0.3);
	margin: 1em;
	background: rgb(42, 121, 191);
	color: #fbfbfb;
	text-align: center;
	text-decoration: none;
	display: block;
}
.section .element .row .tile.highligted a {
	text-decoration: none;
	color: #fbfbfb;
}
	

.section .element .row .tile.highligted .phone, .section .element .row .tile.highligted .mail h3{
	line-height: 2em;
	font-size: 1.5em;
	position: relative;
	top: -0.3em;
	display: inline;
	font-family: sourceCodeLight;
	font-weight: normal;
	margin: 0 0 0 0.3em;
	color: #fbfbfb;
}
.section .element .row.text {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}


.section .element .row.text .left img {
	width: 100%;
}

.section .element .row.text .right {
	width: 80%;
}

.reset-password .owl {
	position: absolute;
	top: 2em;
	left: 65em;
	width: 8em;
}

.section button.login-button.resent-password {
	line-height: 1em;
}

.reset-password form {
	width: 50%
}

.section button {
	background: #5b8c49;/*#d58640 #333 rgb(31, 176, 19);/*rgb(95, 174, 94);*/
	padding: 0.5em;
	border: none;
	color: white;
	font-weight: normal;
	cursor: pointer;
/* 	border-radius: 4px; */
	font-family: soureCodeBold;
	font-size: 1em;
	letter-spacing: 0.01em;
	float: right;
}

.section button:hover {
	background: rgba(42, 121, 191, 1);
}

.section .form-wrapper form {
	margin: 0.5em 0;
}

.section .form-wrapper form .form-group {
	padding: 0.5em 0;
	position: relative;
}

.section .form-wrapper form .form-group .input-group.auto-width input {
	width: auto;
}

.section .form-wrapper form .form-group input {
	padding: 0.5em;
	border: 1px solid #c2ccdc;
/* 	border-radius: 4px; */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 1em;
	line-height: 1.5em;
	color: #333;
	outline: none !important;
	width: 100%;
	background: #f7f7f7;
}

.section .form-wrapper form .form-group .parsley-error {
	border: 1px solid red;
}

.section.footer {
	background: rgb(53, 53, 53);
	color: #fbfbfb;
	letter-spacing: 0px;
}

.section.footer h3 {
	padding: 0em 0 0 0;
}

.section.footer h6 {
	margin: 0;
	padding: 0;
}

.section.footer a {
	color: #fbfbfb;
}


.section.footer .subheader {
	text-align: center;
}

.register.section {
	padding: 4em 5em 1em 10em;
	background: rgb(42, 121, 191); /*rgb(128, 177, 222);*/
	margin: 6em 0;
}

.register.section .element {
	display: flex; 
	flex-direction: row;
	position: relative;
}

.register.section .element .left {
	color: white;
	padding: 1em;
	position: relative;
	width: 40%;
}


.register form {
	width: 50%;
	position: relative;
}

.register form .bg {
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.register .owl {
	position: absolute;
	top: 10em;
	left: 5em;
	width: 10em;
	z-index: 1;
}
#registration-form {
	margin-bottom: 2em;
	padding: 3em;
	width: 40%;
	background: #ffffff66;
}


.parsley-errors-list {
	margin: 0.5em 0 0 0;
	padding: 0;
}

.parsley-errors-list li {
	list-style-type: none;
}


.header-text {
	font-size: 2em;
	padding: 0.5em 0;
	margin: 0;
	line-height: 1.5em;
}

.intro-text {
	font-size: 1.4em;	
	line-height: 2em;
	font-family: sourceCodeLight;
	margin: 0;
	padding: 0;
	width: 100%;
	padding: 0.5em 0;
	font-weight: normal;
}


.form-header {
	font-family: soureCodeBold;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

.antispam {
	display: none;
}


.privacy-policy .element p {
	margin: 0;
	padding: 0.3em 0;
}


@media only screen and (max-width: 1200px) {
	.section {
		padding: 1em;
	}
	
	.section .form-wrapper {
		width: 80%;
		margin-left: -40%;
	}
	
	.page .section .owl {
		width: 10em;
	}
	
	.section .element .row {
		flex-direction: column;
	}
	
	.section.footer .element .row {
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.section .element .row .tile {
		width: 100%;
	}
}

@media only screen and (max-width: 1400px) {
	.page .section .owl {
		width: 8em;
		left: 33em;
	}	
	
	.register.section .element {
		flex-direction: column;
	}
	
	.register.section .element .left, .register.section .element #registration-form {
		width: 100%;
	}
}

@media only screen and (max-width: 1200px) {
	.intro-text {
		width: 95%;
	}

	.section .element .row.text .right, .section .element .row.text .left {
		width: 100%;
	}
	
}

@media only screen and (max-width: 800px) {
	
	.alpha {
		position: fixed;
		z-index: 99;
		width: 650px;
		top: 49px;
		left: auto;
		right: -239px;
		font-size: 12px !important;
		transform:rotate(45deg);
		-webkit-transform: rotate(45deg); 
		-moz-transform: rotate(45deg); 
		-ms-transform:rotate(45deg); 
	}
	
	.alpha span {
		font-size: 10px !important;
	}
	
	.header-text {
		font-size: 1.5em;
	}
	
	.owl {
		display: none;
	}
	
	.section.login {
		padding-top: 0;
	}
	
	.login .login-header {
		flex-direction: column;
	}
	
	.login .login-header > div {
		width: 100%;
	}
	
	.intro-text {
		width: 100%;
		font-size: 1em;
	}

	.section {
		padding: 1em 2em;
	}
	
	.section .element {
		position: relative;
		width: 100%;
		height: auto;
		margin-left: 0;
		top: 0;
		left: 0;
	}
	
	.section .element .row .tile.highligted {
		width: 100%;
		padding: 2em 1em 1em 1em;
	}
	
	.section .element .right #login {
		margin-top: 5em;
	}
}