/* global settings */
* { font-family: "Lato", "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: inherit; font-size: inherit; color: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { height: 100%; font-weight: normal; font-size: 14px; color: black; }
body { background-color: white; min-height: 100%; }
select::-ms-expand { display: none; }

a:active, a:focus { outline: none; text-decoration: none; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* background-video */
.background-video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: -2; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.background-image { position: fixed; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 100%; z-index: -1; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 0.75; }
.intro-background-image { position: fixed; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 100%; z-index: -1; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: none; }

/* background images */
.bg { z-index: 1; }
.bg-atwork { background-image: url(../img/atwork_bg1.png),url(../img/atwork_bg2.png); background-repeat: no-repeat,no-repeat; background-position: right 60px,100px bottom; }
.bg-inhouse { background-image: url(../img/inhouse_bg_image2.png); background-repeat: no-repeat; background-position: 450px 350px; }
.bg-links { background-image: url(../img/links_bg1.png),url(../img/links_bg2.png); background-repeat: no-repeat,no-repeat; background-position: 650px bottom,200px -150px; }
.bg-press { background-image: url(../img/presse_bg2.png); background-repeat: no-repeat; background-position: 105% 50%; }
.bg-reference { background-image: url(../img/referenz_bg1.png); background-repeat: no-repeat; background-position: 450px 150px; }
.bg-about { background-image: url(../img/ueberuns_bg1.png); background-repeat: no-repeat; background-position: 400px bottom; }
.bg-lotus { background-image: url(../img/lotusbluete_bg.png); background-repeat: no-repeat; background-position: 0 0; }
.bg-imprint { background-image: url(../img/inhouse_bg_image2.png); background-repeat: no-repeat; background-position: 500px 350px; }
.bg-intro { background-image: url(../img/inhouse_bg_image1.png); background-repeat: no-repeat,no-repeat; background-position: 0 0;
	-webkit-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
}

.outer-container {}
.body-inner { overflow: hidden; }

/* navigation */
header  {}
nav { margin-top: -353px; }
nav.animate { transition: margin-top 0.6s ease-in-out; opacity: 0.9; }
nav.open { margin-top: 0!important; transition: margin-top 0.8s ease-in-out; }
nav { background-color: #e30a89; color: white; padding: 50px 70px 55px 70px; }
nav ul { list-style-type: none; font-size: 22px; text-transform: uppercase; padding: 0; margin: 0; }
nav a { color: white; }
nav a:hover { color: #6f7073; text-decoration: none; cursor: pointer; }
nav .active a { color: #6f7073; padding-left: 8px; }

/* contact */
.contact { float: right; }
.contact-title { text-transform: uppercase; font-size: 22px; text-align: right; }
.contact em { font-style: normal; color: #6f7073; }
.contact address { margin-top: 55px; }
.contact address > span { display: block; text-align: right; font-size: 18px; }

/* logo, menu button */
.menu-btn-container { padding: 45px 70px 45px 70px; }
.logo { float: right; padding-top: 20px; max-width: 50vw; }
.menu-title { font-size: 22px; color: #6f7073; text-transform: uppercase; }
a:hover.menu-title { cursor: pointer; text-decoration: none; color: #e30a89; }

/* page */
.content { padding: 0 70px 45px 70px; position: relative; }
.content-inner { max-width: 760px; }
.content-inner ul { padding-left: 0; }
h1 { font-size: 22px; color: #e30a89!important; padding-left: 15px; text-transform: uppercase; }
h2 { font-size: 18px; color: #e30a89!important; padding-left: 15px; text-transform: uppercase; }
h3 { font-size: 16px; color: #848587; text-transform: none; margin: 0 0 10px 0; padding: 0; }
p { font-size: 16px; color: #848587; margin-bottom: 20px; }
p:last-child { margin-bottom: 40px; }
.top-section p, .top-section div { color: #e30a89; }

.download { display: block; background-image: url(../img/angebot_download_btn.png); background-repeat: no-repeat; background-position: top right; min-height: 165px; margin-top: 16px; }
.download:hover { background-image: url(../img/angebot_download_btn_over.png); text-decoration: none; background-position: top right; }
.download-info { color: #848587; font-size: 18px; text-transform: uppercase; display: block; line-height: 16px; }
.download-title { color: #e30a89; font-size: 18px; text-transform: uppercase; display: block; line-height: 16px; }
.download-subtitle { color: #e30a89; font-size: 18px; text-transform: uppercase; display: block; }

/* links */
.link { }
.link h3 { margin-bottom: 15px; }
.link a { display: block; color: #e30a89; text-transform: uppercase; font-size: 16px; }
.link a:hover { display: block; text-decoration: none; color: #848587; }
.link p { color: #848587; font-size: 14px; margin-bottom: 15px; }

/* references */
.reference { margin-bottom: 20px; }
.reference h3 { text-transform: uppercase; font-size: 20px; color: #e30a89; }

.ref-img-list { margin-top: 15px; }
.ref-img { position: relative; display: inline-block; margin-right: 7px; margin-bottom: 7px; }
.ref-img img { display: block; }
.ref-img:hover .hover-background { display: block; }
.ref-img-title { display: table; width: 100%; margin-bottom: 7px; }
.ref-img-title span { color: #e30a89; font-size: 20px; display: table-cell; vertical-align: baseline; text-transform: uppercase; }
.ref-img-close { color: #e30a89; font-size: 30px; font-weight: 100; display: table-cell; text-align: right; vertical-align: baseline;}
a:hover.ref-img-close { color: #848587; text-decoration: none; cursor: pointer; }
.ref-img-img { width: 100%; }

/* staff */
.staff { display: block; margin-bottom: 30px; }
.staff:hover { text-decoration: none; cursor: pointer; }
.staff > span, .staff img { display: block; }
.staff > span { color: #e30a89; text-transform: uppercase; font-size: 18px; }
.staff-img { position: relative; }
.hover-background { background-color: #e30a89; position: absolute; left: 0; top: 0; width: 95px; height: 100%; z-index: 2; opacity: 0.4; display: none; }
.staff:hover .hover-background { display: block; }

.member-title { display: table; padding-right: 10px; width: 100%; margin-bottom: 7px; }
.member-title > span { color: #e30a89; font-size: 20px; display: table-cell; vertical-align: baseline; text-transform: uppercase; }
.member-close { color: #e30a89; font-size: 30px; font-weight: 100; display: table-cell; text-align: right; vertical-align: baseline;}
a:hover.member-close { color: #848587; text-decoration: none; cursor: pointer; }
.member-img { width: 100%; }

/* mini-pager */
.mini-pager { position: absolute; left: 20px; }
.mini-pager span { display: block; text-transform: uppercase; font-size: 14px; color: #e30a89; }
.mini-pager a { display: block; font-size: 14px; color: #e30a89; padding-left: 10px; }
.mini-pager a:hover { color: #848587; text-decoration: none; cursor: pointer; }
.mini-pager a.active { color: #848587; }

/* start page / intro */
.intro { margin-top: 200px; }
.start-page { }
.content-intro p, .content-intro .editor-paragraph { text-transform: uppercase; color: #e30a89; font-size: 20px; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* phone optimizations */
@media only screen and (max-width: 600px)
{
	.contact { display: none; }
	.content { padding: 0 35px 45px 35px; }
	nav { padding: 50px 35px 55px 35px; }
	.menu-btn-container { padding: 35px 20px 35px 35px; }
	.mini-pager > span { display: none; }
	.mini-pager { left: 0px; }
	.mini-pager a { font-size: 18px; }
}

@media only screen and (max-width: 667px)
{
	.bg-atwork    { background-image: none; }
	.bg-inhouse   { background-image: none; }
	.bg-links     { background-image: none; }
	.bg-press     { background-image: none; }
	.bg-reference { background-image: none; }
	.bg-about     { background-image: none; }
	.bg-imprint   { background-image: none; }
}

/* tablet optimizations */
@media only screen and (max-width: 1024px)
{
	.bg-atwork    { background-size: 173px,337px; 	background-position: right 60px,100px bottom; }  	/* 346 × 566, 675 × 292 */
	.bg-inhouse   { background-size: 314px; 		background-position: 450px 350px; }					/* 683 × 657 */
	.bg-links     { background-size: 351px,191px; 	background-position: 550px bottom,100px -75px; }	/* 702 × 492, 382 × 492 */
	.bg-press     { background-size: 427px; 		background-position: 105% 60%; }					/* 855 × 374 */
	.bg-reference { background-size: 388px; 		background-position: 450px 150px; }					/* 777 × 612 */
	.bg-about     { background-size: 226px; 		background-position: 400px bottom; }				/* 452 × 828 */
	.bg-lotus     { background-size: 149px; 		background-position: 0 0; }							/* 299 × 292 */
	.bg-imprint   { background-size: 341px; 		background-position: 500px 350px; }					/* 683 × 657 */
	.bg-intro     { background-size: 347px; 		background-position: 0 0; }							/* 695 × 618 */
}

/* tablet optimizations */
@media only screen and (max-width: 768px)
{
	.bg-imprint   { background-size: 341px; 		background-position: 400px 350px; }					/* 683 × 657 */
}