/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #434C50;
    text-shadow: none;
    color: #E1E0DC;
}

::selection {
    background: #434C50;
    text-shadow: none;
    color: #E1E0DC;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html, body {
	min-height:100%;
	width:100%;
	min-width:320px;
	margin:0;
	padding:0;
	font-size:16px;
	position:relative;
}

a {
	cursor:pointer;
}



/* 	=======================================================================
		GENERAL 
 		======================================================================= */
ul, li {
	list-style:none;
	margin:0;
	padding:0;
}

header, #middle, #middle #parallax, #middle #content, footer {
	width:100%;
}

header div, footer #form, #middle #content .content {
	width:80%;
	margin:0 auto;
	position:relative;
}

input:focus, a:focus {
	outline:0;
}

form {
	margin:0;
	padding:0;
}

textarea {
  resize: none;
}

.hide {
	display:none;
}

.show {
	display:block;
}


/* 	=======================================================================
		HEADER 
 		======================================================================= */
header {
	position:fixed;
	z-index:99;
	background-color:#fff;
	top:0;
	min-width:320px;
	
	/*border-bottom:1px solid #252b2c!important;*/
}

header div {
	height:87px;
}

header #logo {
	display:block;
	font-family:"Conv_AkzidenzGrotesk-Bold";
	font-size:1.7em;
	position:absolute;
	bottom:15%;
	color:#1f2627;
	text-decoration:none;
}

header nav ul,
header nav .menu {
	position:absolute;
	right:0;
}

header nav ul {
	display:block;
	bottom:18%;
}

header nav ul li {
	display:inline-block;
	margin-left:20px;
}

header nav a {
	text-transform:uppercase;
	font-family:"Conv_DINPro-Medium";
	font-size:1.5em;
	text-decoration:none;
	color:#1f2627;
}

header nav a:hover,
header nav li.rex-current a {
	border-bottom:5px solid #4f5355;
}

header nav .menu {
	display:none;
}

header.gap {
	border-bottom:0.15em solid #252b2c;
}


/* 	=======================================================================
		PARALLAX SLIDER 
 		======================================================================= */
#middle {
	position:relative;
	min-width:320px;
	/*padding-bottom:556px;*/
}

#middle #parallax {
	position:fixed;
	z-index:0;
	top:0;
	padding-top:87px;
	height:556px;
	background-color:#252b2c;
	min-width:320px;
}

#middle #parallax h1, #middle #parallax h2 {
	text-align:center;
	margin:0 auto;
	color:#c3c1ba;
	font-weight:normal;
}
#middle #parallax h1 {	
	font-size:3em;
	font-family:"Conv_AkzidenzGrotesk-Bold";
	text-transform:uppercase;
	padding-top:13%;
	line-height:1em;
	width:75%;
}

#middle #parallax h2 {
	font-family:"Conv_DINPro-Medium";
	font-size:1.5em;
	line-height:1em;
	width:65%;
	margin-top:1%;
}

#middle #parallax.case-parallax {
	height:auto!important;
}

#middle #parallax.case-parallax img {
	width:100%;
}



/* 	=======================================================================
		CONTENT
 		======================================================================= */
#middle #content {
	position:relative;
	/*top:556px;*/
	z-index:3;
	/* margin-top:87px; */
	background-color:#fff;
	padding-bottom:50px;
}

#middle #content .content {
	min-height:800px;
	position:relative;
	margin-top:643px;
}

#content nav {
	position:relative;
	padding:20px 0 40px 0;
	display:block;
	height:77px;
}

#content nav .list-view, #content nav .col-view {
	width:77px;
	height:77px;
	position:absolute;
	cursor:pointer;
	z-index:2;
}

#content nav .list-view {
	right:90px;
}

#content nav .col-view {
	right:0;
}

#content nav .list-view embed, #content nav .col-view embed,
#content nav .list-view a, #content nav .col-view a {
	width:77px;
	height:77px;
}

#content nav .list-view a, #content nav .col-view a {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	cursor:pointer;
}

#content nav .list-view .hover, #content nav .col-view .hover {
	position:absolute;
	top:0;
	left:0;
}


/* CASE LIST & CASE MODULE*/
#content .case-list,
#content .case-module {
	width:100%;
	position:relative;
	display:block;
}

#content .case-list li,
#content .case-module li {
	overflow:hidden;
	margin-bottom:5%;
	position:relative;
}

#content .case-list img,
#content .case-module .media {
	display:inline-block;
	width:70%;
	position:relative;
	float:left;
}

#content .case-list .label,
#content .case-module .text {
	position:relative;
	display:inline-block;
	float:left;
	width:30%;
}

#content .case-list h1,
#content .case-list h2,
#content .case-module .text h1 {
	color:#4f5355;
	font-weight:normal;
}


/* CASE LIST */
#content .case-list li {
	background-color:#ebeae7;
}

#content .case-list li a.case {
	position:absolute;
	width:100%;
	height:100%;
	display:none;
	top:0;
	left:0;
	text-decoration:none;
}

#content .case-list li a.case label {
	position:relative;
	display:block;
	width:70%;
	height:100%;
	cursor:pointer;
}

#content .case-list li a.case div {
	display:block;
	width:240px;
	height:70px;
	position:relative;
	top:50%;
	left:50%;
	margin-top:-35px;
	margin-left:-120px;
	background-color:#fff;
	color:#4f5355;
	font-family:"Conv_DINPro-Regular";
	text-align:center;
	font-size:2.4em;
	line-height:1.6em;
}

#content .case-list li a.case div span {
	border-bottom:1px solid #4f5355;
}

#content .case-list.col .label {
	display:block;
	float:none;
	width:100%;
}

#content .case-list h1,
#content .case-list h2,
#content .case-list .info,
#content .case-list .info span,
#content .case-list .info strong {
	display:block;
	text-align:center;
}

#content .case-list h1 {
	margin-top:10%;
	font-family:"Conv_AkzidenzGrotesk-Bold";
	font-size:1.9em;
	text-transform:uppercase;
	margin-bottom:2px;
	line-height: 1em;
}

#content .case-list h2 {
	font-size:1.3em;
	line-height:1.1em;
	font-family:"Conv_DINPro-Medium";
	margin-top:1%;
	width:60%;
	margin:0 auto;
}

#content .case-list .info {
	margin-top:20%;
}

#content .case-list .info span {
	font-family:"Georgia";
	color:#616e72;
	font-style:italic;
	margin-top:5%;
}

#content .case-list .info strong {
	font-family:"Conv_DINPro-Medium";
	color:#252b2c;
	text-transform:uppercase;
	font-weight:normal;
}

#content .case-list.col {
	overflow:hidden;
	width:102%;
	margin-left:-1%;
}

#content .case-list.col li {
	list-style:inline-block;
	width:48%;
	margin-left:1%;
	margin-right:1%;
	margin-bottom:3%;
	float:left;
}

#content .case-list.col img {
	display:block;
	width:100%;
	float:none;
}

#content .case-list.col .label h1 {
	text-align:left;
	margin:3% 7% 7% 7%;
	font-size:1.5em;
} 

#content .case-list.col h2,
#content .case-list.col .label .info {
	display:none;
}

#content .case-list.col li a.case label {
	width:100%;
}

#content .case-list.col li a.case div {
	width:180px;
	height:50px;
	margin-top:-45px;
	margin-left:-90px;
	font-size:1.8em;
	line-height:1.5em;
}


/* CASE MODULE */
#content .case-module .module {
	width:100%;
	margin:0 auto;
}

#content .case-module .module.module-1,
#content .case-module .module.module-2,
#content .case-module .module.module-3 {
	width:80%;
}

#content .case-module .media {
	text-align:center;
}

#content .case-module .module-4 .callbacks_container img,
#content .case-module .media img,
#content .case-module .media video,
#content .case-module .media embed {
	width:100%;
}

#content .case-module .text h1 {
	margin:-1% 5% 3% 5%;
	font-family:"Conv_AkzidenzGrotesk-Bold";
	font-size:1.6em;
	line-height:1.1em;
	text-transform:uppercase;
}

#content .case-module .text span {
	display:block;
	font-size:1.1em;
	line-height:1.1em;
	font-family:"Conv_DINPro-Regular";
	margin:0 5% 1% 5%;
}

#content .case-module .module-1 .media embed {
	width:auto;
}

#content .case-module .module-3 .media,
#content .case-module .module-3 .text {
	float:right;
}

#content .case-module .module-3 .text h1,
#content .case-module .module-3 .text span {
	margin-left:0;
}

#content .case-module .module-4 .callbacks_container {
	width:80%;
	margin:0 auto;
}

#content .case-module .module-4 .text {
	display:block;
	width:100%;
	background-color:#efeeed;
	position:relative;
	z-index:6;
}

#content .case-module .module-4 .text h1,
#content .case-module .module-4 .text span {
	width:60%;
	margin:0 auto;
	text-align:center;
}

#content .case-module .module-4 .text h1 {
	padding-top:6%;
	padding-bottom:1%;
	margin-top:0;
}

#content .case-module .module-4 .text span {
	padding-bottom:3%;
}

#content .case-module .module-5 .description,
#content .case-module .module-6 .description,
#content .case-module .module-7 .description,
#content .case-module .module-8 .description,
#content .case-module .module-9 .description {
	width:100%;
	float:none;
	display:block;
	background-color:#fff;
}

#content .case-module .module-5 .description span,
#content .case-module .module-6 .description span,
#content .case-module .module-7 .description span,
#content .case-module .module-8 .description span,
#content .case-module .module-9 .description span,
#content .case-module .module-5 .description p,
#content .case-module .module-6 .description p,
#content .case-module .module-7 .description p,
#content .case-module .module-8 .description p,
#content .case-module .module-9 .description p,
#content .case-module .module-5 .description h1,
#content .case-module .module-6 .description h1,
#content .case-module .module-7 .description h1,
#content .case-module .module-8 .description h1,
#content .case-module .module-9 .description h1 {
	width:60%;
	margin:0 auto;
	text-align:center;
	padding:2% 0;
	display:block;
}

#content .case-module .module-5 .description h1,
#content .case-module .module-6 .description h1,
#content .case-module .module-7 .description h1,
#content .case-module .module-8 .description h1,
#content .case-module .module-9 .description h1 {
	font-family: "Conv_AkzidenzGrotesk-Bold";
	font-size: 1.6em;
	line-height: 1.1em;
	text-transform: uppercase;
	padding-bottom: 0;
	font-weight: normal;
	color: #4F5355;
}

#content .case-module .module-5 .media,
#content .case-module .module-6 .media,
#content .case-module .module-9 .media {
	list-style:none;
	width:80%;
	margin:0 auto;
	float:none;
	display:block;
}


#content .case-module .module-7 .media {
	list-style:none;
	width:100%;
	margin:0 auto;
	float:none;
	display:block;
}


#content .case-module .module-5 .media {
	overflow:hidden;
}

#content .case-module .module-5 .media li {
	display:inline-block;
	float:left;
	margin-left:2%;
	margin-bottom:0;
}

#content .case-module .module-5 .media li img {
	width:100%;
}

#content .case-module .module-5 .media li.first {
	margin-left:0;
}

#content .case-module .module-5#mod-1 .media li {
	width:35%;
}

#content .case-module .module-5#mod-1 .media li.first {
	width:63%;
}

#content .case-module .module-5#mod-2 .media li {
	width:49%;
}

#content .case-module .module-8.image img.background {
	width:100%;
	-khtml-opacity:.30; 
	-moz-opacity:.30; 
	-ms-filter:"alpha(opacity=30)";
	filter:alpha(opacity=30);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.3);
	opacity:.30;
	position:relative;
}

#content .case-module .module-8 .media-container {
	width:80%;
	position:absolute;
	top:10%;
	left:10%;
}

#content .case-module .module-8 .media {
	width:70%;
}

#content .case-module .module-8 .media img,
#content .case-module .module-8 .media video,
#content .case-module .module-8 .media embed {
	width:100%;
	z-index:10;
	-khtml-opacity:1.0; 
	-moz-opacity:1.0; 
	-ms-filter:"alpha(opacity=100)";
	filter:alpha(opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1.0);
	opacity:1.0;
}

#content .case-module .grey {
	background-color:#adaba3;
}


/* Mod-9 */
#content .case-module .module-9 .media {
	width:745px;
	height:667px;
	margin:0 auto;
}

#content .case-module .module-9 .carousel.roundabout-holder {
	position:relative;
	left:150px;
  list-style: none;
  padding: 0;
  margin: 0;
  width:450px;
	height:667px;
}

#content .case-module .module-9 .carousel.roundabout-holder .roundabout-moveable-item {
	width:450px;
	height:667px;
	background:url("../img/ipad.png") no-repeat;
	background-size:100% 100%;
  cursor: pointer;
	position:relative;
	margin:0;
	margin-top:3px;
}

#content .case-module .module-9 .carousel.roundabout-holder .roundabout-moveable-item a {
	display:block;
	position:relative;
	top:10%;
}

#content .case-module .module-9 .carousel.roundabout-holder .roundabout-moveable-item img {
	width:89%;
	height:80%;
}

#content .case-module .module-9 .carousel.roundabout-holder .roundabout-in-focus {
  cursor: auto;
}


/* About */
#middle #content-no-par {
	position:relative;
}

#middle #content-no-par .symbol,
#middle #content-no-par .design,
#middle #content-no-par .communication,
#middle #content-no-par .digital,
#middle #content-no-par .brain,
#middle #content-no-par .contact-me,
#middle #content-no-par .contact-method {
	position:relative;
	text-align:center;
}

#middle #content-no-par .symbol div,
#middle #content-no-par .design div,
#middle #content-no-par .communication div,
#middle #content-no-par .digital div,
#middle #content-no-par .brain div,
#middle #content-no-par .contact-me div,
#middle #content-no-par .contact-method div {
	width:70%;
	margin:0 auto;
	padding:6% 0 15% 0;
}

#middle #content-no-par .symbol div {
	padding:5% 0 18% 0;
}

#middle #content-no-par .contact-me div {
	padding:10% 0 18% 0;
}

#middle #content-no-par .design div,
#middle #content-no-par .communication div,
#middle #content-no-par .digital div {
	padding: 10% 0 15% 0; /* 8 */
}

#middle #content-no-par .brain div {
	padding:3% 0 5% 0;
}

#middle #content-no-par .symbol,
#middle #content-no-par .contact-me {
	background-color:#e1e0dc;
	top:56px;
}

#middle #content-no-par .design {
	background-color:#303739;
}

#middle #content-no-par .digital {
	background-color:#4b6f7a;
}

#middle #content-no-par .symbol h1,
#middle #content-no-par .contact-me h1 {
	font-size:3.2em;
	color:#4f5355;
	font-family:"Conv_AkzidenzGrotesk-Bold";
	text-transform:uppercase;
	font-weight:normal;
	line-height:1em;
}

#middle #content-no-par .design h1,
#middle #content-no-par .communication h1,
#middle #content-no-par .digital h1 {
	font-size:2.6em;
	font-family:"Conv_AkzidenzGrotesk-Bold";
	text-transform:uppercase;
	font-weight:normal;
	line-height:1em;
}

#middle #content-no-par .design h1,
#middle #content-no-par .communication h1 {
	color:#9aafb5;
}

#middle #content-no-par .digital h1 {
	color:#cde7ee;
}

#middle #content-no-par .brain h1 {
	font-family:"Georgia";
	font-size:3em;
	color:#616e72;
	font-weight:normal;
	font-style:italic;
	line-height:1em;
	text-transform: none;
}

#middle #content-no-par .design h2,
#middle #content-no-par .communication h2,
#middle #content-no-par .digital h2,
#middle #content-no-par .brain h2 {
	font-size:1.3em;
	font-family:"Conv_DINPro-Regular";
	font-weight:normal;
	width:70%;
	margin:0 auto;
	line-height:1.2em;
}

#middle #content-no-par .symbol h2,
#middle #content-no-par .contact-me h2 {
	font-size:1.9em;
	font-family:"Conv_DINPro-Light";
	font-weight:normal;
	margin:0 auto;
	color:#020202;
}

#middle #content-no-par .symbol h2 {
	line-height:1.2em;
	/* width:60%; */
}

#middle #content-no-par .contact-me h2 {
	line-height:1.1em;
	width:75%;
}

#middle #content-no-par .symbol label,
#middle #content-no-par .contact-me label,
#middle #content-no-par .contact-me p {
	display:block;
	text-align:center;
	font-family:"Georgia";
	font-size:1.5em;
	font-style:italic;
	margin:2% 0;
}

#middle #content-no-par .symbol label {
	color: #4F5355;
}

#middle #content-no-par .contact-me label {
	color:#4f5355
}

#middle #content-no-par .design h2,
#middle #content-no-par .digital h2 {
	color:#f6f4f0;
}

#middle #content-no-par .communication h2 {
	color:#000;
}

#middle #content-no-par .brain h2 {
	color:#404040;
}

#middle #content-no-par .design embed,
#middle #content-no-par .communication embed,
#middle #content-no-par .digital embed,
#middle #content-no-par .design img.icon,
#middle #content-no-par .communication img.icon,
#middle #content-no-par .digital img.icon {
	position:absolute;
	top:-105px;
	left:50%;
	margin-left:-105px;
}

#middle #content-no-par .brain {
	background-color: #FFFFFF;
}

/* #middle #content-no-par .symbol embed {
	margin:5% 0 0 0;
} */


/* Contact*/
#middle #content-no-par .contact-method div {
	padding:10% 0 0 0;
}

#middle #content-no-par .contact-method h1 {
	font-family:"Georgia";
	font-size:1.8em;
	color:#616e72;
	font-weight:normal;
	font-style:italic;
	line-height:1.3em;
}

#middle #content-no-par .contact-method ul {
	list-style:none;
	margin:0 0 10% 0;
	padding:259px 0 0 0;
	position:relative;
}

#middle #content-no-par .contact-method ul li {
	display:inline-block;
	margin:0 3px;
}

#middle #content-no-par .contact-method ul li p {
	margin-top: 0;
}

#middle #content-no-par .contact-method ul li a {
	display:block;
	width:123px;
	height:162px;
	position:relative;
	top:-169px;
	cursor:pointer;
}

#middle #content-no-par .contact-method ul li.current a {
	background:url("../img/contact-bubble-arrow.png") no-repeat top center;
}

#middle #content-no-par .contact-method ul li label {
	position:absolute;
	width:660px;
	height:220px;
	top:0;
	left:50%;
	margin-left:-330px;
	background-color:#4f5355;
	display:none;
}

#middle #content-no-par .contact-method ul li label h1,
#middle #content-no-par .contact-method ul li label h2,
#middle #content-no-par .contact-method ul li label a {
	margin:0;
	padding:0;
	text-align:center;
	color:#fff;
	font-weight:normal;
	line-height:1em;
	background:none;
}


#middle #content-no-par .contact-method ul li label h1 {
	font-family:"Conv_AkzidenzGrotesk-Bold";
	font-style:normal;
	text-transform:uppercase;
	font-size:2.5em;
	margin-top:60px;
}

#middle #content-no-par .contact-method ul li label a,
#middle #content-no-par .contact-method ul li label h2 {
	display:block;
	font-family:"Conv_DINPro-Medium";
	font-size:1.9em;
	top:0;
	width:auto;
	height:auto;
}

#middle #content-no-par .contact-method ul li.current label {
	display:block;
}

#middle #content-no-par .contact-method ul li#vcard label h1,
#middle #content-no-par .contact-method ul li#vcard label a {
	margin-left:150px;
}

#middle #content-no-par .contact-method ul li#vcard .qr-code {
	position:absolute;
	width:128px;
	height:128px;
	background-color:#fff;
	margin:45px 0 0 80px;
	padding:0;
}



/* 	=======================================================================
		FOOTER
 		======================================================================= */
footer {
	background-color:#d9d8d5;
	z-index:4;
	position:relative;
}

footer #form {
	padding-top:5%;
	height:600px;
}

footer #form .left ,
footer #form .right {
	display:inline-block;
	float:left;
}

footer #form .left {
	width:55%;
}

footer #form .right {
	width:40%;
	margin-left:5%;
	text-align:center;
}

footer #form .left input.text,
footer #form .left textarea {
	background-color:#434c50;
	display:block;
	margin-bottom:3%;
	line-height:1em;
	padding:1.5% 3%;
	width:100%;
	border:0;
	color:#9caeb3;
	font-family:"Conv_DINPro-Medium";
	font-size:1.7em;
}

footer #form .left input.error,
footer #form .left textarea.error {
	background-color: #FE5555;
	color: #FFF;
}

footer #form .left textarea {
	height: 150px;
}

footer #form .left input.submit {
	background:url("../img/bt-send.png") no-repeat center bottom;
	border: 0 none;
	width:165px;
	height: 33px;
	text-transform:uppercase;
	color:#fff;
	font-family: 'Conv_DINPro-Regular';
	padding-left: 40px;
	font-size:1.3em;
	float:right;
	margin-right:-5%;
}

footer #form .left input.submit:hover {
	background:url("../img/bt-send-hover.png");
}

html.svg footer #form .left input.submit {
	background: url("../svg/bt-send.svg") no-repeat center bottom;
}

html.svg footer #form .left input.submit:hover {
	background: url("../svg/bt-send-hover.svg") no-repeat center bottom;
}

footer #form .right .search,
footer #form .right h1,
footer #form .right h2,
footer #form .right nav,
footer #form .right span,
footer #form .right a.impressum {
	display:block;
	overflow:hidden;
	float:right;
	clear:both;
}

footer #form .right .search,
footer #form .right h1,
footer #form .right h2,
footer #form .right span,
footer #form .right a.impressum {
	width:290px;
}

footer #form .right .search input {
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

footer #form .right .search input.bt-search {

}

footer #form .right .txt-search,
footer #form .right .bt-search {
	height:55px;
	border:0;
	display:inline-block;
	float:left;
}

footer #form .right .txt-search {
	background:url("../img/txt-search.png") no-repeat left;
	color:#9caeb3;
	font-family:"Conv_DINPro-Medium";
	font-size:1.7em;
	width:230px;
	padding-left:20px;
}

footer #form .right .bt-search {
	background:url("../img/bt-search.png") no-repeat right;
	width:50px;
	margin-top:1px;
}

footer #form .right h1,
footer #form .right h2 {
	font-weight:normal;
}

footer #form .right h1 {
	margin:3% 0 1% 0;
	padding:0;
	color:#4a585c;
	font-family:"Conv_AkzidenzGrotesk-Bold";
	font-size:1.5em;
}

footer a {
	text-decoration:none;
}

footer #form .right nav {
	width:310px;
}

footer #form .right nav .nav a {
	font-family:"Conv_DINPro-Medium";
	color:#666;
	padding-left:11px;
	background:url("../img/footer-gap.png") no-repeat left center;
	text-transform:uppercase;
	font-size:1.22em;
}

footer #form .right nav .nav a.first{
	background:none;
	padding-left:0;
}

footer #form .right h2 {
	font-family:"Conv_DINPro-Bold";
	color:#666;
	margin:1% 0;
	font-size:0.95em;
	line-height:1.2em;
	text-transform:uppercase;
	font-weight:normal;
}

footer #form .right nav.social-network {
	margin:3% 0;
}

footer #form .right nav.social-network div {
	display:inline-block;
	margin:0 1%;
	position:relative;
}

footer #form .right nav.social-network div,
footer #form .right nav.social-network a {
	width:55px;
	height:55px;
}

footer #form .right nav.social-network a,
footer #form .right nav.social-network .hover {
	position:absolute;
	display:block;
	top:0;
	left:0;
	cursor:pointer;
}

footer #form .right .impressum,
footer #form .right span {
	color:#434c50;
	font-family:"Conv_DINPro-Medium";
}

footer #form .right .impressum {
	text-transform:uppercase;
	line-height:1em;
	font-size:1em;
	margin-bottom:1%;
	cursor:pointer;
}

footer #form .right span {
	line-height:1.2em;
	font-size:0.9em;
}

footer .back-to-top {
	width:100%;
	background-color:#fff;
	text-align:center;
	padding:4% 0;
	position:relative;
}

footer .back-to-top embed {
	height:159px;
	width:110px;
}

footer .back-to-top a {
	height:184px;
	width:110px;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-55px;
	margin-top:4%;
	cursor:pointer;
}

footer .back-to-top a span {
	display:block;
	position:absolute;
	bottom:0;
	width:110px;
	font-family:"Conv_DINPro-Regular";
	color:#4f5355;
	text-align:center;
	font-size:1.2em;
}

footer .case-slide {
	width:100%;
	background-color:#727577;
	position:relative;
}

footer .case-slide a.next-case {
	position:relative;
	margin:0 auto;
	width:80%;
	color:#fff;
	display:block;
	overflow: hidden;
	height: 185px;
}

footer .case-slide a.next-case img {
	position:relative;
	width: 100%;
}

footer .case-slide a.next-case img.dim {
	-khtml-opacity:.30; 
	-moz-opacity:.30; 
	-ms-filter:"alpha(opacity=30)";
	filter:alpha(opacity=30);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.3);
	opacity:.30;
}

footer .case-slide a.next-case label {
	display:block;
	width:216px;
	height:66px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-108px;
	margin-top:-33px;
	background-color:#252b2c;
	color:#fff;
	cursor:pointer;
	text-decoration:underline;
	text-align:center;
	font-family: 'Conv_DINPro-Regular';
	font-size:2.1em;
	line-height:1.8em;
}

footer .case-slide a.next-case label.hover {
	background-color:#fff;
	color:#666;
}

footer .case-slide a.prev, footer .case-slide a.next {
	width:32px;
	height:55px;
	position:absolute;
	z-index:5;
	cursor:pointer;
	top:50%;
	margin-top:-27px;
}

footer .case-slide a.prev {
	background:url("../img/footer-prev.png") no-repeat;
	left:5%;
}

footer .case-slide a.next {
	background:url("../img/footer-next.png") no-repeat;
	right:5%;
}

footer .case-slide a.prev:hover {
	background:url("../img/footer-prev-hover.png");
}

footer .case-slide a.next:hover {
	background:url("../img/footer-next-hover.png");
}

footer .thanks-message, footer .copyright {
	display:block;
	width:50%;
	margin:0 auto;
	text-align:center;
}

footer .thanks-message {
	padding:2% 0 4% 0;
	font-family:"Georgia";
	font-style:italic;
	font-size:1.3em;
	color:#4f5355;
	overflow:hidden;
}

footer .thanks-message a {
	text-decoration:underline;
	color:#4f5355;
}

footer .copyright {
	padding:0 0 3% 0;
}

footer .copyright a, footer .copyright span {
	display:block;
	color:#979b9b;
	text-decoration:none;
	font-family:"Conv_DINPro-Medium";
	font-size:1em;
}

footer .copyright a {
	text-transform:uppercase;
	font-size:1em;
	line-height:1.5em;
}

footer .copyright span {
	font-size:0.9em;
	line-height:1.2em;
}

#impressum {
	background-color:#434c50;
	position:relative;
	padding:6% 0 10% 0;
	text-align:center;
	display:none;
	overflow: hidden;
}

#impressum h1,
#impressum h2,
#impressum div {
	width:65%;
	margin:0 auto;
}

#impressum embed {
	margin:0 auto;
}

#impressum h1, #impressum h2, #impressum h3, #impressum strong {
	font-weight:normal;
}

#impressum h1, #impressum h2 {
	color:#c3c1ba;
	font-family:"Conv_AkzidenzGrotesk-Bold";
	text-transform:uppercase;
}

#impressum h1 {
	font-size:3em;
	line-height:1em;
}

#impressum h2 {
	font-size:1.6em;
	margin:2% auto;
	line-height:1em;
}

#impressum div {
	font-family:"Conv_DINPro-Light";
	font-size:1.4em;
	color:#fff;
	line-height:1em;
	margin:2% auto 2% auto;
	background:url("../img/footer-dot.png") no-repeat center top;
	padding-top:2%;
}

#impressum div.first,
#impressum .imp-close {
	background:none;
	padding-top:0;
}

#impressum strong {
	font-family:"Conv_DINPro-Bold";
}

#impressum div h3 {
	color:#a1b2b7;
	font-family:"Georgia";
	font-style:italic;
	margin:0 0 1% 0;
}

#impressum embed {
	margin-top:3%;
}

#impressum label {
	display:block;
	color:#a1b2b7;
	font-size:1.4em;
	font-family:"Georgia";
	font-style:italic;
	margin-top:2%;
}

#impressum .imp-close {
	position:absolute;
	width:77px;
	height:77px;
	top:-38px;
	left:50%;
	margin:0 0 0 -38px;
}

#impressum .imp-close a {
	position:relative;
	z-index:9;
	display:block;
	width:77px;
	height:77px;
	cursor:pointer;
	margin-top:-77px;
}





/* 	=======================================================================
		SLIDER
 		======================================================================= */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.callbacks_container {
	position:relative;
	height:100%!important;
}

.callbacks_container .prev,
.callbacks_container .next {
	display:block;
	position:absolute;
	width:32px;
	height:55px;
	top:50%;
	margin-top:-27px;
	z-index:99;
}

.callbacks_container .prev {
	background:url("../img/slide-prev.png") no-repeat;
	left:5%;
}

.callbacks_container .next {
	background:url("../img/slide-next.png") no-repeat;
	right:5%;
}

.callbacks_container .prev:hover {
	background:url("../img/wslide-prev.png") no-repeat;
}

.callbacks_container .next:hover {
	background:url("../img/wslide-next.png") no-repeat;
}

.callbacks_container .rslides_tabs {
	display:block;
	position:absolute;
	bottom:5%;
	width:100%;
	text-align:center;
}

.callbacks_container .rslides_tabs li {
	display:inline;
	margin:0.6%;
}

.callbacks_container .rslides_tabs li a {
	display:inline-block;
	width:12px;
	height:12px;
	background:url("../img/slide-pagination.png") -26px 0 no-repeat;
}

.callbacks_container .rslides_tabs li.rslides_here a {
	background-position:0 0;
}


#content .case-module .module-4 .callbacks_container .prev {
	background:url("../img/wslide-prev.png") no-repeat;
	left:-10%;
	margin-left:16px;
}

#content .case-module .module-4 .callbacks_container .next {
	background:url("../img/wslide-next.png") no-repeat;
	right:-10%;
	margin-right:16px;
}

#content .case-module .module-4 .callbacks_container .prev:hover {
	background:url("../img/slide-prev-hover.png") no-repeat;
}

#content .case-module .module-4 .callbacks_container .next:hover {
	background:url("../img/slide-next-hover.png") no-repeat;
}

#content .case-module .module-4 .callbacks_container .rslides li {
	margin-bottom:0;
}

#content .case-module .module-4 .callbacks_container .rslides_tabs {
	bottom:-7%;
	z-index:99;
}

#content .case-module .module-4 .callbacks_container .rslides_tabs li a {
	background-position:0 0;
}

#content .case-module .module-4 .callbacks_container .rslides_tabs li.rslides_here a {
	/* background-position:-26px 0; */
}

/* 	=======================================================================
		CASE TITLE
 		======================================================================= */
#middle #content .case-title {
	background-color:#ebeae7;
	position:relative;
	padding:3% 0;
	margin-bottom:10%;
}

#middle #content .case-title h1,
#middle #content .case-title h2 {
	font-weight:normal;
	color:#4f5355;
	text-align:center;
	margin:0;
	padding:0;
	position:relative;
	z-index:3;
}

#middle #content .case-title h1 {
	font-family:"Conv_AkzidenzGrotesk-Bold";
	font-size:3em;
	line-height:1em;
	text-transform:uppercase;
}

#middle #content .case-title h2 {
	font-family:"Conv_DINPro-Medium";
	font-size:1.5em;
}

#middle #content .case-title ul,
#middle #content .case-title ul li {
	list-style:none;
	margin:0;
	padding:0;
}

#middle #content .case-title .bt-info,
#middle #content .case-title .bt-info .ico-info,
#middle #content .case-title .bt-info a {
	width:77px;
	height:77px;
	display:block;
}

#middle #content .case-title .bt-info {
	position:absolute;
	bottom:-38px;
	left:50%;
	margin-left:-38px;
	z-index:2;
}

#middle #content .case-title .bt-info .ico-info {
	position:relative;
	z-index:3;
}

#middle #content .case-title .bt-info .info-hover,
#middle #content .case-title .bt-info .ico-info-close,
#middle #content .case-title .bt-info .close-hover {
	position:absolute;
	top:0;
}

#middle #content .case-title .bt-info .info-hover,
#middle #content .case-title .bt-info .close-hover {
	z-index:3;
}


#middle #content .case-title .bt-info a {
	position:absolute;
	top:0;
	left:0;
	z-index:4;
	cursor:pointer;
}

#middle #content .case-title a.prev,
#middle #content .case-title a.next {
	width:32px;
	height:55px;
	position:absolute;
	z-index:5;
	cursor:pointer;
	top:40px;
}

#middle #content .case-title a.prev {
	background:url("../img/slide-prev.png") no-repeat;
	left:5%;
}

#middle #content .case-title a.next {
	background:url("../img/slide-next.png") no-repeat;
	right:5%;
}

#middle #content .case-title a.prev:hover {
	background:url("../img/slide-prev-hover.png");
}

#middle #content .case-title a.next:hover {
	background:url("../img/slide-next-hover.png");
}

#middle #content .case-title .description,
#middle #content .case-title ul li {
	width:50%;
	text-align:center;
	margin:0 auto;
	position:relative;
	z-index:5;
}

#middle #content .case-title .description,
#middle #content .case-title ul {
	display:none;
}

#middle #content .case-title .description {
	font-family:"Conv_DINPro-Regular";
	color:#000;
	font-size:1.3em;
	line-height:1.2em;
	margin-bottom:2%;
	margin-top:3%;
}

#middle #content .case-title .description a {
	font-family:"Georgia";
	font-style:italic;
	color:#4f5355;
	text-decoration:none;
	/* font-size:1.2em; */
}

#middle #content .case-title .description a:hover {
	text-decoration: underline;
}

#middle #content .case-title ul li {
	margin-bottom:1.2%;
}

#middle #content .case-title ul li span {
	display:inline;
	font-family:"Georgia";
	font-style:italic;
	color:#616e72;
	font-size:1.1em;
	width:auto;
}

#middle #content .case-title ul li strong {
	text-transform:uppercase;
	font-family:"Conv_DINPro-Medium";
	color:#4f5355;
	font-size:1em;
	font-weight:normal;
}


/* 	=======================================================================
		MAX WIDTH 999
 		======================================================================= */
@media only screen and (max-width: 600px) {

}

@media only screen and (max-width: 999px) {
	
	body {
		font-size:13px;
	}
	

	header div, footer #form, #middle #content .content {
		width:90%;
	}
	
	header div {
		height:60px;
	}
	
	header nav ul {
		display:block;
	}
	
	header nav ul li {
		margin-left:15px;
	}
	
	#middle {
		/* top:-60px; */
		/*padding-bottom:420px;*/
	}

	#middle #content {
		/*top:480px;*/
		margin-top:0px;
		padding-bottom:40px;
		/* margin-bottom:-60px; */
	}
	
	#middle #content .content {
		margin-top: 440px; /* 540 */
	}
	
	#middle #parallax {
		height:380px;
		padding-top:60px;
	}

	#middle #parallax h1 {
		width:90%;
		font-size:3.2em;
		padding-top:10%;
	}
	
	#middle #parallax h2 {
		width:80%;
	}
	
	.callbacks_container .prev,
	.callbacks_container .next {
		display:none;
	}
	
	#content nav {
		padding:10px 0;
		height:65px;
	}
	
	#content nav .list-view, #content nav .col-view {
		width:65px;
		height:65px;
		background-size:65px 65px;
	}	
	
	#content nav .list-view embed, #content nav .col-view embed {
		width:100%;
		height:100%;
	}
	
	#content nav .list-view {
		right:75px;
	}
	
	#content .case-list li a.case label {
		width:100%;
	}

	#content .case-list li a.case div {
		font-size:3em;
		line-height:1.6em;
		margin-top:-65px;
	}
	
	#content .case-list.col li a.case div {
		width:150px;
		height:40px;
		margin-top:-35px;
		margin-left:-75px;
		font-size:1.8em;
		line-height:1.5em;
	}
	
	#content .case-list img,
	#content .case-module .media {
		display:block;
		width:100%;
		float:none;
	}

	#content .case-list .label,
	#content .case-module .text {
		display:block;
		float:none;
		width:100%;
	}
	
	#content .case-list h1 {
		margin-top:2%;
		font-size:2.5em;
		line-height:1.2em;
	}

	#content .case-list h2 {
		font-size:1.5em;
		line-height:1.1em;
		margin-top:0;
		margin-bottom:3%;
		width:100%;
	}

	#content .case-list .info {
		display:none;
	}
	
	#content .case-list.col .label h1 {
		margin:3% 5%;
		font-size:1.8em;
		overflow:hidden;
	}
	
	#content .case-list .case {
		/* display:none!important; 
		visibility:hidden;*/
	}
	
	#middle #content .case-title {
		padding-top:3%;
	}
	
	#middle #content .case-title h1 {
		font-size:3.8em;
	}
	
	#middle #content .case-title h2 {
		font-size:2em;
	}
	
	#middle #content .case-title a.prev,
	#middle #content .case-title a.next {
		width:27px;
		height:48px;
		background-size:27px 48px;
	}
	
	#middle #content .case-title a.prev:hover {
		background:url("../img/slide-prev-hover.png");
		background-size:27px 48px;
	}

	#middle #content .case-title a.next:hover {
		background:url("../img/slide-next-hover.png");
		background-size:27px 48px;
	}
	
	#middle #content .case-title .bt-info {
		display:none;
	}
	
	
	#middle #content .case-title a.prev,
	#middle #content .case-title a.next {
		top:10%;
	}
	
	#middle #content .case-title .description,
	#middle #content .case-title ul li {
		width:70%;
		display:block;
	}

	#middle #content .case-title .description {
		font-size:1.5em;
		line-height:1.2em;
		margin-bottom:3%;
	}

	#middle #content .case-title .description a {
		font-size:1.2em;
	}
	
	#middle #content .case-title ul li {
		margin-bottom:1.2%;
	}

	#middle #content .case-title ul li span {
		font-size:1.3em;
	}

	#middle #content .case-title ul li strong {
		font-size:1.2em;
	}
	
	
	/* Case Module */
	#content .case-module .module {
		width:90%!important;
	}
	
	#content .case-module .module.module-4,
	#content .case-module .module.module-7,
	#content .case-module .module.module-8 {
		width:100%!important;
	}
	
	#content .case-module .module-4 .callbacks_container {
		width:100%;
	}
	
	#content .case-module .module-3 .media,
	#content .case-module .module-3 .text {
		float:none;
	}
	
	#content .case-module .text h1 {
		margin:3% 0 1% 0;
	}
	
	#content .case-module .text span {
		margin:1% 0;
		font-size:1.3em;
		line-height:1.3em;
	}
	
	#content .case-module .module .description {
		display:none;
	}
	
	/* #content .case-module .module-1 .media,
	#content .case-module .module-1 .text {
		float:left;
		width:50%;
	} */
	
	#content .case-module .module-1 .media {
		float:left;
		width:70%;
	}
	
	#content .case-module .module-1 .text {
		float:left;
		width:30%;
	}
	
	#content .case-module .module-1 .text h1 {
		margin-top:0;
	}
	
	#content .case-module .module-1 .text h1,
	#content .case-module .module-1 .text span {
		padding-left:8%;
		padding-right:5%;
	}
	
	#content .case-module .module-1 .media embed {
		width:250px;
		height:299px;
	}
	
	#content .case-module .module-4 .text h1,
	#content .case-module .module-4 .text span {
		width:70%;
	}
	
	#content .case-module .module-4 .text span {
		font-size:1.1em;
		line-height:1.1em;
		padding-bottom:5%;
	}
	
	#content .case-module .module-4 .callbacks_container {
		margin-top:3%;
	}
	
	#content .case-module .module-4 .callbacks_container .rslides_tabs li a {
		width:10px;
		height:10px;
		background-size:auto 10px;
	}
	
	#content .case-module .module-4 .callbacks_container .rslides_tabs li.rslides_here a {
		background-position:-21px 0;
	}
	
	#content .case-module .module-5,
	#content .case-module .module-6 {
		background:none!important;
	}
	
	#content .case-module .module-5 .media,
	#content .case-module .module-6 .media {
		width:100%;
	}
	
	#content .case-module .module-8,
	#content .case-module .module-9 {
		padding-bottom:15%;
	}
	
	#content .case-module .module-8 .media-container {
		width:90%;
		left:5%;
		top:5%;
	}
	
	#content .case-module .module-8 .media-container .media,
	#content .case-module .module-8 .media-container .text {
		width:100%;
		float:none;
	}
	
	#content .case-module .module-8.image img.background {
		width:155%;
	}
	
	
	/* Mod-9 */
	#content .case-module .module-9 .media {
		width:500px!important;
		height:444px;
	}

	#content .case-module .module-9 .carousel.roundabout-holder {
			left:102px;
	    width:300px;
			height:444px;
	}

	#content .case-module .module-9 .carousel.roundabout-holder .roundabout-moveable-item {
	    width:300px;
			height:444px;
	}
	
	
	
	
	/* About */
	#middle #content-no-par .symbol div,
	#middle #content-no-par .design div,
	#middle #content-no-par .communication div,
	#middle #content-no-par .digital div,
	#middle #content-no-par .brain div,
	#middle #content-no-par .contact-me div  {
		width:90%;
	}
	
	#middle #content-no-par .symbol div,
	#middle #content-no-par .contact-me div {
		padding:5% 0 18% 0;
	}
	
	#middle #content-no-par .design div,
	#middle #content-no-par .communication div,
	#middle #content-no-par .digital div {
		padding:10% 0 23% 0;
	}
	
	#middle #content-no-par .brain div {
		padding:6% 0 10% 0;
	}
	
	#middle #content-no-par .symbol h1 {
		font-size:3.8em;
	}
	
	#middle #content-no-par .design h1,
	#middle #content-no-par .communication h1,
	#middle #content-no-par .digital h1 {
		font-size:3.4em;
	}
	
	#middle #content-no-par .brain h1 {
		font-size:3.5em;
	}
	
	#middle #content-no-par .symbol h2 {
		font-size:2.1em;
	}
	
	#middle #content-no-par .design h2,
	#middle #content-no-par .communication h2,
	#middle #content-no-par .digital h2 {
		font-size:1.6em;
	}
	
	#middle #content-no-par .symbol embed,
	#middle #content-no-par .symbol img.icon {
		width:96px;
		height:147px;
	}
	
	#middle #content-no-par .design embed,
	#middle #content-no-par .communication embed,
	#middle #content-no-par .digital embed,
	#middle #content-no-par .design img.icon,
	#middle #content-no-par .communication img.icon,
	#middle #content-no-par .digital img.icon {
		width:180px;
		height:180px;
		top:-92px;
		margin-left:-92px;
	}
	
	#middle #content-no-par .brain embed {
		width:211px;
		height:166px;
	}
	
	
	/* Contact*/
	#middle #content-no-par .contact-me div h2 {
		width:100%;
	}
	
	#middle #content-no-par .contact-me div label {
		margin:8% 0 3% 0;
	}
	
	#middle #content-no-par .contact-method div {
		padding:10% 0 0 0;
	}

	#middle #content-no-par .contact-method h1 {
		font-size:1.8em;
		line-height:1.3em;
	}

	#middle #content-no-par .contact-method ul {
		padding:230px 0 0 0;
	}

	#middle #content-no-par .contact-method ul li a {
		width:108px;
		height:148px;
		top:-154px;
	}

	#middle #content-no-par .contact-method ul li label {
		width:575px;
		height:190px;
		margin-left:-287px;
	}
	
	#middle #content-no-par .contact-method embed {
		width:108px;
		height:108px;
	}

	#middle #content-no-par .contact-method ul li label h1,
	#middle #content-no-par .contact-method ul li label h2,
	#middle #content-no-par .contact-method ul li label a {
		line-height:1em;
	}


	#middle #content-no-par .contact-method ul li label h1 {
		font-size:2.5em;
		margin-top:50px;
	}

	#middle #content-no-par .contact-method ul li label a,
	#middle #content-no-par .contact-method ul li label h2 {
		font-size:1.9em;
	}

	#middle #content-no-par .contact-method ul li#vcard .qr-code {
		margin:30px 0 0 80px;
		width: 107px;
		height: 107px;
	}
	
	
	
	
	/* Footer */
	footer  #form {
		height:420px;
	}
	
	footer #form .left {
		display:none;
	}
	
	footer #form .right {
		width:100%;
		margin-left:0;
	}
	
	footer #form .right .search,
	footer #form .right h1,
	footer #form .right h2,
	footer #form .right nav,
	footer #form .right span,
	footer #form .right a.impressum {
		float:none!important;
	}
	
	footer #form .right h1,
	footer #form .right h2,
	footer #form .right nav,
	footer #form .right span,
	footer #form .right a.impressum {
		width:100%;
	}
	
	footer #form .right .search {
		margin:0 auto;
	}
	
	footer .back-to-top embed {
		height:127px;
		width:88px;
	}

	footer .back-to-top a {
		height:127px;
		width:88px;
		margin-left:-44px;
	}
	
	footer .case-slide {
		height: 128px;
		overflow: hidden;
	}
	
	footer .case-slide a.next-case {
		width:100%;
	}
	
	footer .case-slide a.prev, footer .case-slide a.next {
		display:none;
	}
	
	footer .case-slide a.next-case label {
		font-size:2.6em;
		line-height:1.6em;
		width:201px;
		height:62px;
		margin-left:-100px;
		margin-top:-55px;
	}

	footer .thanks-message {
		padding-bottom:7%;
		font-size:1.6em;
		width:70%;
	}
	
	footer .copyright {
		padding-bottom:6%;
	}

	footer .copyright a {
		font-size:1.2em;
	}
	
	footer .copyright span {
		font-size:1.1em;
		line-height:1em;
	}
	
	#impressum {
		padding-top:8%;
	}
	
	#impressum h1 {
		font-size:2.2em;
	}
	
	#impressum h1, #impressum h2 {
		width:70%;
	}
	
	#impressum div {
		width:80%;
	}
	
	#impressum .imp-close,
	#impressum .imp-close embed,
	#impressum .imp-close a {
		width:60px;
		height:60px;
	}
	
	#impressum .imp-close {
		top:-25px;
		left:50%;
		margin:0 0 0 -30px;
		display:block;
	}
	
	#impressum .imp-close a {
		top:18px;
	}

}
		
		
/* 	=======================================================================
		MAX WIDTH 599
 		======================================================================= */
@media only screen and (max-width: 599px) {

	body {
		font-size:10px;
	}
	
	header div {
		width:100%;
		height:56px; /* 50 */
	}
	
	footer #form, #middle #content .content {
		width:95%;
	}
	
	header div #logo {
		margin-left:5%;
	}
	
	header nav .menu {
		height:60px;
		width:50px;
		margin-right:5%;
		display:block;
	}
	
	header nav .menu .ico-menu,
	header nav .menu .ico-menu-close {
		position:relative;
		z-index:2;
		padding-top:14px;
		padding-left:14px;
		height: 30px;
		width: 30px;
	}
	
	header nav .menu a {
		position:absolute;
		z-index:3;
		top:0;
		left:0;
		height:50px;
		width:50px;
		display:block;
		cursor:pointer;
	}
	
	header nav .menu a:hover {
		border:0;
	}
	
	
	header nav .rex-navi1 {
		display:none;
		background-color:#d9d8d5;
		top:56px;
		z-index:3;
		width:100%;
		height:100%;
	}
	
	header nav .rex-navi1 li {
		display:block;
		margin:0;
		text-align:center;
	}
	
	header nav .rex-navi1 li a {
		display:block;
		width:50%;
		text-align:center;
		margin:5% auto;
		padding-bottom:5px;
		font-size:4em; /* 2.5 */
		color:#434c50;
	}
	
	header nav .rex-navi1 li a:hover {
		padding-bottom:0;
	}
	
	header nav li.rex-current a:hover {
		padding-bottom:5px;
	}
	
	#middle {
		/* top:-50px; */
		/*padding-bottom:210px;*/
	}
	
	#middle #parallax {
		height:210px;
		padding-top:50px;
	}
	
	#middle #parallax h1 {
		font-size:3em; /* 2.3*/
		line-height:0.9em;
		padding-top:5%;
		width:90%;
	}
	
	#middle #parallax h2 {
		font-size:1.6em; /* 1.2 */
	}

	#middle #content {
		/*top:260px;*/
		/* margin-top:50px; */
		padding-bottom:20px;
	}
	
	#middle #content .content {
		padding-top:20px;
		margin-top:310px;
	}
	
	.callbacks_container .prev,
	.callbacks_container .next {
		display:none;
	}
	
	.callbacks_container .rslides_tabs li a {
		width:8px;
		height:8px;
		background:url("../img/slide-pagination1.png") -15px 0 no-repeat;
	}

	.callbacks_container .rslides_tabs li.rslides_here a {
		background-position:0 0;
	}
	
	#content nav {
		display:none;
	}
	
	#content .case-list li a.case div {
		width:180px;
		height:50px;
		margin-top:-45px;
		margin-left:-75px;
		font-size:2.8em;
		line-height:1.7em;
	}
	
	#content .case-list img {
		display:block;
		width:100%;
		float:none;
	}

	#content .case-list .label {
		display:block;
		float:none;
		width:100%;
	}
	
	
	#middle #content .case-title a.prev,
	#middle #content .case-title a.next {
		display:none;
	}
	
	#middle #content .case-title {
		padding-top:4%;
		margin-bottom:2%;
	}
	
	#middle #content .case-title h1 {
		font-size:2.8em;
	}
	
	#middle #content .case-title h2 {
		font-size:1.7em;
		margin-bottom:5%;
	}
	
	
	#middle #content .case-title .description,
	#middle #content .case-title ul li {
		width:85%;
	}

	#middle #content .case-title .description {
		font-size:1.8em;
		line-height:1.2em;
		margin-bottom:5%;
	}

	#middle #content .case-title .description a {
		font-size:1em;
	}
	
	#middle #content .case-title ul li {
		margin-bottom:3%;
	}

	#middle #content .case-title ul li span {
		display:block;
		font-size:1.3em;
		margin-bottom:0;
	}

	#middle #content .case-title ul li strong {
		display:block;
		font-size:1.3em;
	}
	
	/* case module */
	#content .case-module .module {
		width:95%!important;
	}
	
	#content .case-module .module.module-4,
	#content .case-module .module.module-7,
	#content .case-module .module.module-8 {
		width:100%!important;
	}
	
	#content .case-module .module-1 .media {
		float:none;
		width:100%;
	}
	
	#content .case-module .module-1 .media embed {
		width:161px;
		height:193px;
	}
	
	#content .case-module li {
		margin-bottom:5%;
	}
	
	#content .case-module .text {
		display:none!important;
	}
	
	#content .case-module .module-4 {
		background-color:#efeeed;
		padding-bottom:8%;
	}
	
	#content .case-module .module-4 .callbacks_container .rslides_tabs {
		bottom:-10%;
	}
	
	#content .case-module .module-4 .callbacks_container .rslides_tabs li a {
		width:8px;
		height:8px;
		background-size:auto 8px;
	}

	#content .case-module .module-4 .callbacks_container .rslides_tabs li.rslides_here a {
		background-position:-15px 0;
	}
	
	#content .case-module .module-8 .media-container {
		width:95%;
		height:100%;
		left:2.5%;
		top:7%;
	}
	
	#content .case-module .module-8.image img.background {
		width:170%;
	}
	
	/* Mod-9 */
	#content .case-module .module-9 .media {
		width:408px!important;
		height:370px;
	}

	#content .case-module .module-9 .carousel.roundabout-holder {
		left:80px;
	  width:250px;
		height:370px;
	}

	#content .case-module .module-9 .carousel.roundabout-holder .roundabout-moveable-item {
  	width:250px;
		height:370px;
	}
	
	
	
	/* About */
	#middle #content-no-par .symbol div,
	#middle #content-no-par .design div,
	#middle #content-no-par .communication div,
	#middle #content-no-par .digital div,
	#middle #content-no-par .brain div,
	#middle #content-no-par .contact-me div {
		width:90%;
	}
	
	#middle #content-no-par .symbol div {
		padding:15% 0 38% 0;
	}
	
	#middle #content-no-par .design div,
	#middle #content-no-par .communication div,
	#middle #content-no-par .digital div {
		padding:18% 0 28% 0;
	}
	
	#middle #content-no-par .brain div {
		padding:6% 0 10% 0;
	}
	
	#middle #content-no-par .symbol h1,
	#middle #content-no-par .contact-me h1 {
		font-size:3.3em; /* 2.3 */
	}
	
	#middle #content-no-par .design h1,
	#middle #content-no-par .communication h1,
	#middle #content-no-par .digital h1 {
		font-size:2.8em;
	}
	
	#middle #content-no-par .brain h1 {
		font-size:2.3em;
	}
	
	#middle #content-no-par .symbol h2,
	#middle #content-no-par .design h2,
	#middle #content-no-par .communication h2,
	#middle #content-no-par .digital h2,
	#middle #content-no-par .brain h2  {
		font-size:2.1em; /* 1.6 */
		width:100%;
	}
	
	#middle #content-no-par .symbol label,
	#middle #content-no-par .contact-me label {
		font-size:1.3em;
	}
	
	#middle #content-no-par .symbol embed,
	#middle #content-no-par .symbol img.icon {
		width:61px;
		height:94px;
	}
	
	#middle #content-no-par .design embed,
	#middle #content-no-par .communication embed,
	#middle #content-no-par .digital embed,
	#middle #content-no-par .design img.icon,
	#middle #content-no-par .communication img.icon,
	#middle #content-no-par .digital img.icon {
		width:120px;
		height:120px;
		top:-60px;
		margin-left:-60px;
	}
	
	#middle #content-no-par .brain embed {
		width:141px;
		height:106px;
	}
	
	
	/* Contact*/
	#middle #content-no-par .contact-me div {
		padding:10% 0 10% 0;
	}
	
	#middle #content-no-par .contact-me h2 {
		font-size:1.6em;
		line-height:1.2em;
		width:100%;
	}
	
	#middle #content-no-par .contact-me label {
		margin:20px 0;
	}
	
	#middle #content-no-par .contact-method div {
		padding:10% 0 0 0;
	}

	#middle #content-no-par .contact-method h1 {
		font-size:1.6em;
		line-height:1.3em;
		margin:50px 0 15px 0;
	}

	#middle #content-no-par .contact-method ul {
		padding:120px 0 0 0;
	}

	#middle #content-no-par .contact-method ul li a {
		width:50px;
		height:85px;
		top:-85px;
	}

	#middle #content-no-par .contact-method ul li label {
		width:270px;
		height:100px;
		margin-left:-135px;
	}
	
	#middle #content-no-par .contact-method embed {
		width:50px;
		height:50px;
	}

	#middle #content-no-par .contact-method ul li label h1,
	#middle #content-no-par .contact-method ul li label h2,
	#middle #content-no-par .contact-method ul li label a {
		line-height:1em;
	}


	#middle #content-no-par .contact-method ul li label h1 {
		font-size:1.8em;
		margin-top:25px;
	}

	#middle #content-no-par .contact-method ul li label a,
	#middle #content-no-par .contact-method ul li label h2 {
		font-size:1.6em;
	}
	
	#middle #content-no-par .contact-method ul li#vcard label h1,
	#middle #content-no-par .contact-method ul li#vcard label a {
		margin-left:0;
	}

	#middle #content-no-par .contact-method ul li#vcard .qr-code {
		display:none;
	}
	
	/* Footer */
	footer #form {
		padding-top:3%;
		height:190px;
	}
	
	footer #form .right .search,
	footer #form .right h2,
	footer #form .right nav {
		display:none;
	}
	
	footer #form .right nav.social-network {
		display:block;
	}
	
	footer #form .right h1 {
		margin:0;
		font-size:2.1em;
	}
	
	footer #form .right  nav.social-network div,
	footer #form .right  nav.social-network div embed,
	footer #form .right  nav.social-network a {
		width:43px;
		height:43px;
	}
	
	footer #form .right .impressum {
		line-height:1.1em;
		font-size:1.3em;
	}

	footer #form .right span {
		line-height:1em;
		font-size:1.2em;
	}
	
	footer .back-to-top embed {
		height:85px;
		width:58px;
	}

	footer .back-to-top a {
		height:85px;
		width:58px;
		margin-left:-29px;
	}
	
	footer .case-slide a.next-case label {
		font-size:3em;
		line-height:1.5em;
		width:166px;
		height:51px;
		margin-left:-83px;
		margin-top: -50px;
	}
	
	footer .thanks-message {
		padding-bottom:20%;
		font-size:1.6em;
		width:80%;
	}
	
	footer .copyright {
		display:none;
	}
	
	#impressum {
		padding-top:10%;
	}
	
	#impressum h2 {
		margin-bottom:3%;
	}
		
	#impressum .imp-symbol {
		width:65px;
		height:101px;
	}
	
	#impressum div {
		width:90%;
		padding-top:4%;
		padding-bottom:2%;
	}
	
	#impressum .imp-close,
	#impressum .imp-close embed,
	#impressum .imp-close a {
		width:50px;
		height:50px;
	}

	#impressum .imp-close {
		top:-25px;
		left:50%;
		margin:0 0 0 -25px;
	}

	#impressum .imp-close a {
		top:28px;
	}
	

}

@media only screen and (min-width: 1400px) {
	#middle #content-no-par .symbol h1,
	#middle #content-no-par .contact-me h1 {
		font-size:7em;
		line-height:0.8em;
		margin:0.4em 0;
	}
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}