@font-face {
	font-family: 'Unit';
	src: url('../fonts/UnitWeb-Light.eot');
	src: url('../fonts/UnitWeb-Light.eot?#iefix') format('embedded-opentype'),
			url('../fonts/UnitWeb-Light.woff') format('woff');
	font-weight: lighter;
	font-style: normal;
	}
@font-face {
	font-family: 'Unit';
	src: url('../fonts/UnitWeb.eot');
	src: url('../fonts/UnitWeb.eot?#iefix') format('embedded-opentype'),
			url('../fonts/UnitWeb.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}
@font-face {
	font-family: 'Unit';
	src: url('../fonts/UnitWeb-Bold.eot');
	src: url('../fonts/UnitWeb-Bold.eot?#iefix') format('embedded-opentype'),
			url('../fonts/UnitWeb-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	}


html, body {
	height: 100%; }

html {
	box-sizing: border-box; }

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit; }

html,
body {
	font-size: 100%; }

body {
	background: #fff;
	color: #222;
	cursor: auto;
	font-family: "Unit", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: normal;
	line-height: 1.4em;
	font-size: 16pt;
	margin: 0;
	padding: 0;
	position: relative; }

a:hover {
	cursor: pointer; }

img {
	max-width: 100%;
	height: auto; }

img {
	-ms-interpolation-mode: bicubic; }

#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
	max-width: none !important; }

.left {
	float: left !important; }

.right {
	float: right !important; }

.clearfix:before, .clearfix:after {
	content: " ";
	display: table; }
.clearfix:after {
	clear: both; }

.hide {
	display: none; }

.invisible {
	visibility: hidden; }

.antialiased {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }

img {
	display: inline-block;
	vertical-align: middle; }

textarea {
	height: auto;
	min-height: 50px; }

select {
	width: 100%; }

.row {
	margin: 0 auto;
	width: 100%; 
	min-width: 60rem;
	}
	.row:before, .row:after {
		content: " ";
		display: table; }
	.row:after {
		clear: both; }
	.row.collapse > .column,
	.row.collapse > .columns {
		padding-left: 0;
		padding-right: 0; }
	.row.collapse .row {
		margin-left: 0;
		margin-right: 0; }
	.row .row {
		margin: 0 -0.9375rem;
		max-width: none;
		width: auto; }
		.row .row:before, .row .row:after {
			content: " ";
			display: table; }
		.row .row:after {
			clear: both; }
		.row .row.collapse {
			margin: 0;
			max-width: none;
			width: auto; }
			.row .row.collapse:before, .row .row.collapse:after {
				content: " ";
				display: table; }
			.row .row.collapse:after {
				clear: both; }

.column,
.columns {
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	width: 100%;
	float: left; }

.column + .column:last-child,
.columns + .column:last-child, .column +
.columns:last-child,
.columns +
.columns:last-child {
	float: right; }
.column + .column.end,
.columns + .column.end, .column +
.columns.end,
.columns +
.columns.end {
	float: left; }


/* CUSTOM STYLES */

body {
	}
.row {
	width: 90%;
	}
.row.content {
	margin-top: 6rem;
	margin-bottom: 6rem;
	}
a:link, a:visited {
	text-decoration: none;
	color: black;
	border-bottom: 1px solid black;
	}
a:hover {
	text-decoration: none;
	color: #aaa;
	border-bottom: 1px solid transparent;
	}
h1, h2, h3, h4, h5 {
	line-height: 1.2em;
	margin-top: 0;
	}


/* HEADER */

#logo, #hoverlogo {
	top: 1rem;
	left: 5%;
	position: fixed;
	padding-left: 0.9375rem;
	width: 12rem;
	}
#logo {
	z-index: 101;
	}
#hoverlogo {
	z-index: 1001;
	display: none;
	transition: opacity 0.2s;
	}
#logo svg, #hoverlogo svg {
	width: 100%;
	}
#hoverlogo svg path, #hoverlogo svg polygon{	
	fill: white;
	}
.compname {
	display: block;
	font-weight: bold;
	font-size: 1.3em;
	line-height: 1em;
	margin-top: 0.3rem;
	}
.subcompname{
	display: block;
	font-weight: normal;
	font-size: 0.9rem;
	}
#logo a:link, #hoverlogo a:link,
#logo a:visited, #hoverlogo a:visited {
	color: #2E9AFE;
	border-bottom: none;
	text-decoration: none;
	-webkit-transition: color 1s;
	transition: color 1s;
	}
#logo a:hover {
	color: #FF00FF;
	-webkit-transition: color 1s;
	transition: color 1s;
	}


.header {
	top: 0;
	padding: 2.3rem 5% 2rem 5%;
	margin-bottom: 2rem;
	z-index: 100;
	position: fixed;
	left: 0%;
	background: white;
	width: 100%;
	text-align: right;
	}
.header a:link, .header a:visited {
	border-bottom: none;
	}
.header a:hover {
	border-bottom: none;
	}
.header .headmenu {
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	font-size: 1rem;
	}	
.header .headmenu .languages, .header .headmenu .logout{
	display: inline-block;
	margin-left: 2rem;
	}	

.header .headmenu a{
	margin-left: 0.5rem;
	}
.header .headmenu a.active{
	font-weight: bold;
	}

/* MENUS */

.menu {
	position: fixed;
	top: 0%;
	bottom:0%;
	width: 30%;
	z-index: 200;
	line-height: 2rem;
	transition: all 0.2s ease-out;
	}
.menu a:link, .menu a:visited {
	border-bottom: none;
	color: white;
	transition: all 0.2s ease-out;	
	}
.menu.left {
	left: -29.5%;
	padding-left: 5%;
	padding-top: 6rem;
	z-index: 199;
	}
.menu.left:hover #hoverlogo {
	z-index: 1001;
	opacity: 1;
	display: block;
	color: red;
	transition: opacity 0.6s;
	}
.menu.left:hover #hoverlogo a{
	color: white;
	transition: opacity 0.2s;
	}
.menu a:hover {
	opacity: 0.4;
	transition: all 0.2s ease-out;	
	}	
.menu.left .menubox {
	padding-left: 0.9375rem;
	}
.menu.right {
	right: -29.5%;
	padding-right: 5%;
	padding-left: 2rem;
	padding-top: 6rem;
	}
.menu:after {
	width: 2rem;
	height: 2rem;
	content: "";
	position: absolute;
	top: 50%;
	cursor: pointer;
	}
.menu.left:after {
	right: -2rem;
	background-image: url(../images/menu-w.png);
	background-size: 15px 13px;
	background-repeat: no-repeat;
	background-position: center center;
	}
.menu.right:after {
	left: -2rem;
	background-image: url(../images/menu-w.png);
	background-size: 15px 13px;
	background-repeat: no-repeat;
	background-position: center center;
	}
.menu:hover {
	-webkit-box-shadow: -1px 0px 64px 0px rgba(0,0,0,0.44);
	-moz-box-shadow: -1px 0px 64px 0px rgba(0,0,0,0.44);
	box-shadow: -1px 0px 64px 0px rgba(0,0,0,0.44);	
	}
.menu.left:hover {
	left: 0rem;
	transition: left 0.3s ease-in-out;
	}
.menu.right:hover {
	right: 0rem;
	transition: right 0.3s ease-in-out;
	}

/* H O M E */

.masonry {
	width: 102%;
	margin-left: -1%;
	}
.masonry .part {
	width: 31.33333333%;
	margin: 1%;
	float: left;
	position: relative;
	}
.masonry .part.frontmenu,
.masonry .part.frontproject.small {
	height: 0;
	padding-bottom: 20%;
	border: 2px solid white;
	}
.masonry .part.frontproject.big {
	height: 0;
	padding-bottom: 40%;
	}
.masonry .part.frontmenu {
	border: 2px solid black;
	}
.masonry .part a:link, .masonry .part.frontproject:hover h2{
	color: black;
	}	
.masonry .part.frontproject {
	position: relative;
	}	
.masonry .part.frontmenu .front_overlay,
.masonry .part.frontproject .front_overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 2rem;
	background: white;
	background:rgba(255,255,255,.75);
	opacity: 0;
	transition: opacity 0.2s;
	}
.masonry .part.frontmenu .front_overlay {
	opacity: 1;
	transition: opacity 0.2s;
	}
.masonry .part.frontmenu:hover {
	opacity: 0.5;
	color: black;
	transition: opacity 0.2s;
	}	
.masonry .part.frontproject:hover .front_overlay{
	opacity: 1;
	transition: opacity 0.2s;
	}


.slidelink {
	position: relative;
	z-index: 10;
	}
.slideImage .image {
	position: relative;
	}
.slideImage .image .overlay{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 2rem;
	z-index: 900;
	}
.slideImage .image .overlay p{
	margin: 0;
	line-height: 1.1em;
	}
.slideImage .image .overlay h1,
.slideImage .image .overlay h2,
.slideImage .image .overlay h3  {
	margin: 0;
	line-height: 1.2em;
	}
.slideImage .image .overlay.headlines_bigger h1 {
	font-size: 6rem;
	}
.slideImage .image .overlay a:link,
.slideImage .image .overlay a:visited {
	color: auto;
	}

/* PROJECTS PREVIEWS */

.projects .previews {
	width: 104%;
	margin-left: -2%;
	margin-top:-2%;
	}
.projects .previews .preview{
	width: 21%;
	margin: 2%;
	float: left;
	}
.projects .previews .preview .title{
	height: 3.5rem;
	overflow: hidden;
	margin-top: 0.8rem;
	}

/* PROJECT */

.project {
	}
.wallpaper {
	margin-top: 11vh;
	width: 100%;
	height: 85vh;
	}
.row.module {
	margin-top: 4rem; 
	}
.row.module .images {
	width: 102%;
	margin-left: -1%;
	}
.row.module .images .image {
	float: left;
	display: block;
	margin: 1%;
	}
.row.module .images img {
	width: 100%;
	height: auto;
	}
.row.module .images.row-4 .image {
	width: 23%;
	}
.row.module .images.row-3 .image {
	width: 31.3333333%;
	}
.row.module .images.row-2 .image {
	width: 48%;
	}
.row.module .images.row-1 .image {
	width: 98%;
	}
.row.module .images .image .caption {
	margin-top: 0.5rem;
	display: none;
	}
.row.module .images.row-1 .image .caption {
	display: block;
	}
.row.module .images .image .caption p{
	margin: 0;
	font-size: 0.9rem;
	}

.row.module blockquote{
	font-size: 2rem;
	line-height: 1.2em;
	}


/* D E F A U L T S */

.default .text p{
	width: 60%;	
	margin-top: 0;
	margin-bottom: 1rem;
	}
figure {
	margin-bottom: 2rem;
	width: 100%;
	}
figure img{
	width: 100%;
	}
.text h1, .text h2, .text h3, .text h4 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	}



/* PRE-FOOTER */

.pre_footer {
	margin-bottom: 3rem;
	}
.pre_footer .previews {
	width: 102%;
	margin-left: -1%;
	margin-top: -1%;
	}
.pre_footer .previews .preview{
	width: 23%;
	margin: 1%;
	float: left;
	position: relative;
	overflow: hidden;
	}
.pre_footer .previews .preview a:link{
	text-decoration: none;
	border: none;
	}	
.pre_footer .previews .noimage{
	border: 2px solid black;
	}
.pre_footer .previews .preview .preview_title{
	font-weight: bold;
	line-height: 1.3em;
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 0.9rem;
	padding: 1rem;
	top: 0;
	background:rgba(255,255,255,.75);
	opacity: 0;
	transition: opacity 0.2s;
	}
.pre_footer .previews .preview.noimage .preview_title{
	background: none;
	opacity: 1;
	}
.pre_footer .previews .preview.noimage:hover {
	background: none;
	opacity: 0.5;
	transition: opacity 0.2s;
	}	
.pre_footer .previews .preview:hover .preview_title{
	opacity: 1;
	transition: opacity 0.2s;
	color: black;
	}

a.button:link, a.button:visited, .button {
	background: #2E9AFE;
	padding: 0.5em 1em ;
	color: white;
	border: none;
	transition: opacity 0.3s ease-in-out;
	display: inline-block;
	}
a.button:hover, .button:hover {
	opacity: 0.8;
	transition: opacity 0.3s ease-in-out;
	}

/* FOOTER */

.footer {
	font-size: 1rem;
}

/* UPLOAD */

form .field {
	margin-bottom: 12px; 
	}
form .field label {
	width: 6em;
	display: block;
	float: left;
	}
form .field label[for=name], form .field label[for=email]{
	padding-top: 2px;
	}
form .field label[for=text]{
	padding-top: 5px;
	}
form .field .form-input{
	padding: 0.2em ;
	width: 19em;
	border: 2px solid #bbb;
	}
form .field textarea {
	height: 10rem;
	}
form .field_file, form .field_upload {
	margin-top: 2rem;
	padding-left: 6em;
	}
form .field_file label{
	display: block;
	margin-bottom: 1rem;
	}
#uploadForm input[type=submit]{
	background: #2E9AFE;
	border: 0;
	padding: 10px 15px;
	color: white;
	width: 19em;
	height: 50px;
	line-height: 15px;
	transition: opacity 0.3s ease-in-out;
	}
#uploadForm input[type=submit]:hover {
	opacity: 0.8;
	transition: opacity 0.3s ease-in-out;
	}

#progress-div {
	background: #2E9AFE;
	border: 0;
	padding: 1px;
	color: white;
	width: 19em;
	height: 50px;
	text-align: center;
	display: none;
	}
#progress-bar {
	background-color: white;
	color: #2E9AFE;
	width:0%;
	height: 100%;
	-webkit-transition: width .3s;
	-moz-transition: width .3s;
	transition: width .3s;
	padding-top: 10px;
	overflow: hidden;
	}
#targetLayer{
	border: 0;
	width: 100%;
	display: none;
	text-align: left;
	}
#targetLayer div {
	margin-top: 32px;
	}


/* LOG IN */

#loginform input[type=submit] {
	background: #2E9AFE;
	border: 0;
	padding: 10px 20px;
	color: white;
	height: 50px;
	line-height: 15px;
	transition: opacity 0.3s ease-in-out;
	margin-top: 24px;
	margin-left: 6em;	
	}

a.logoutbutton:link, a.logoutbutton:visited {
	background: #2E9AFE;
	padding: 0.1em 0.8em ;
	color: white;
	border: none;
	transition: opacity 0.3s ease-in-out;
	display: inline-block;
	}
a.logoutbutton:hover {
	opacity: 0.8;
	transition: opacity 0.3s ease-in-out;
	}

/* Uploads-Overview */

table.uploads_overview {
	margin-top: 5rem;
	width: 100%;
	font-family: "Courier New", monospace;
	font-size: 14px;
	border: 2px solid black;
	}
table.uploads_overview td{
	border: 1px solid black;
	padding: 5px 10px;
	}
table.uploads_overview td.date{
	width: 20%;
	}
table.uploads_overview td.filename{
	width: 50%;
	}

	.large-push-0 {
		position: relative;
		left: 0;
		right: auto; }

	.large-pull-0 {
		position: relative;
		right: 0;
		left: auto; }

	.large-push-1 {
		position: relative;
		left: 8.33333%;
		right: auto; }

	.large-pull-1 {
		position: relative;
		right: 8.33333%;
		left: auto; }

	.large-push-2 {
		position: relative;
		left: 16.66667%;
		right: auto; }

	.large-pull-2 {
		position: relative;
		right: 16.66667%;
		left: auto; }

	.large-push-3 {
		position: relative;
		left: 25%;
		right: auto; }

	.large-pull-3 {
		position: relative;
		right: 25%;
		left: auto; }

	.large-push-4 {
		position: relative;
		left: 33.33333%;
		right: auto; }

	.large-pull-4 {
		position: relative;
		right: 33.33333%;
		left: auto; }

	.large-push-5 {
		position: relative;
		left: 41.66667%;
		right: auto; }

	.large-pull-5 {
		position: relative;
		right: 41.66667%;
		left: auto; }

	.large-push-6 {
		position: relative;
		left: 50%;
		right: auto; }

	.large-pull-6 {
		position: relative;
		right: 50%;
		left: auto; }

	.large-push-7 {
		position: relative;
		left: 58.33333%;
		right: auto; }

	.large-pull-7 {
		position: relative;
		right: 58.33333%;
		left: auto; }

	.large-push-8 {
		position: relative;
		left: 66.66667%;
		right: auto; }

	.large-pull-8 {
		position: relative;
		right: 66.66667%;
		left: auto; }

	.large-push-9 {
		position: relative;
		left: 75%;
		right: auto; }

	.large-pull-9 {
		position: relative;
		right: 75%;
		left: auto; }

	.large-push-10 {
		position: relative;
		left: 83.33333%;
		right: auto; }

	.large-pull-10 {
		position: relative;
		right: 83.33333%;
		left: auto; }

	.large-push-11 {
		position: relative;
		left: 91.66667%;
		right: auto; }

	.large-pull-11 {
		position: relative;
		right: 91.66667%;
		left: auto; }

	.column,
	.columns {
		position: relative;
		padding-left: 0.9375rem;
		padding-right: 0.9375rem;
		float: left; }

	.large-1 {
		width: 8.33333%; }

	.large-2 {
		width: 16.66667%; }

	.large-3 {
		width: 25%; }

	.large-4 {
		width: 33.33333%; }

	.large-5 {
		width: 41.66667%; }

	.large-6 {
		width: 50%; }

	.large-7 {
		width: 58.33333%; }

	.large-8 {
		width: 66.66667%; }

	.large-9 {
		width: 75%; }

	.large-10 {
		width: 83.33333%; }

	.large-11 {
		width: 91.66667%; }

	.large-12 {
		width: 100%; }

	.large-offset-0 {
		margin-left: 0 !important; }

	.large-offset-1 {
		margin-left: 8.33333% !important; }

	.large-offset-2 {
		margin-left: 16.66667% !important; }

	.large-offset-3 {
		margin-left: 25% !important; }

	.large-offset-4 {
		margin-left: 33.33333% !important; }

	.large-offset-5 {
		margin-left: 41.66667% !important; }

	.large-offset-6 {
		margin-left: 50% !important; }

	.large-offset-7 {
		margin-left: 58.33333% !important; }

	.large-offset-8 {
		margin-left: 66.66667% !important; }

	.large-offset-9 {
		margin-left: 75% !important; }

	.large-offset-10 {
		margin-left: 83.33333% !important; }

	.large-offset-11 {
		margin-left: 91.66667% !important; }

	.large-reset-order {
		float: left;
		left: auto;
		margin-left: 0;
		margin-right: 0;
		right: auto; }

	.column.large-centered,
	.columns.large-centered {
		margin-left: auto;
		margin-right: auto;
		float: none; }

	.column.large-uncentered,
	.columns.large-uncentered {
		float: left;
		margin-left: 0;
		margin-right: 0; }

	.column.large-centered:last-child,
	.columns.large-centered:last-child {
		float: none; }

	.column.large-uncentered:last-child,
	.columns.large-uncentered:last-child {
		float: left; }

	.column.large-uncentered.opposite,
	.columns.large-uncentered.opposite {
		float: right; }

	.row.large-collapse > .column,
	.row.large-collapse > .columns {
		padding-left: 0;
		padding-right: 0; }
	.row.large-collapse .row {
		margin-left: 0;
		margin-right: 0; }
	.row.large-uncollapse > .column,
	.row.large-uncollapse > .columns {
		padding-left: 0.9375rem;
		padding-right: 0.9375rem;
		float: left; }

	.push-0 {
		position: relative;
		left: 0;
		right: auto; }

	.pull-0 {
		position: relative;
		right: 0;
		left: auto; }

	.push-1 {
		position: relative;
		left: 8.33333%;
		right: auto; }

	.pull-1 {
		position: relative;
		right: 8.33333%;
		left: auto; }

	.push-2 {
		position: relative;
		left: 16.66667%;
		right: auto; }

	.pull-2 {
		position: relative;
		right: 16.66667%;
		left: auto; }

	.push-3 {
		position: relative;
		left: 25%;
		right: auto; }

	.pull-3 {
		position: relative;
		right: 25%;
		left: auto; }

	.push-4 {
		position: relative;
		left: 33.33333%;
		right: auto; }

	.pull-4 {
		position: relative;
		right: 33.33333%;
		left: auto; }

	.push-5 {
		position: relative;
		left: 41.66667%;
		right: auto; }

	.pull-5 {
		position: relative;
		right: 41.66667%;
		left: auto; }

	.push-6 {
		position: relative;
		left: 50%;
		right: auto; }

	.pull-6 {
		position: relative;
		right: 50%;
		left: auto; }

	.push-7 {
		position: relative;
		left: 58.33333%;
		right: auto; }

	.pull-7 {
		position: relative;
		right: 58.33333%;
		left: auto; }

	.push-8 {
		position: relative;
		left: 66.66667%;
		right: auto; }

	.pull-8 {
		position: relative;
		right: 66.66667%;
		left: auto; }

	.push-9 {
		position: relative;
		left: 75%;
		right: auto; }

	.pull-9 {
		position: relative;
		right: 75%;
		left: auto; }

	.push-10 {
		position: relative;
		left: 83.33333%;
		right: auto; }

	.pull-10 {
		position: relative;
		right: 83.33333%;
		left: auto; }

	.push-11 {
		position: relative;
		left: 91.66667%;
		right: auto; }

	.pull-11 {
		position: relative;
		right: 91.66667%;
		left: auto; }