@font-face {
  font-family:                           "PP Neue Machina";
  src:                                   url(/media/resources/PPNeueMachina/PPNeueMachina-Regular.otf) format('opentype');
  font-weight:                           normal;
}
@font-face {
  font-family:                           "PP Neue Machina";
  src:                                   url(/media/resources/PPNeueMachina/PPNeueMachina-Light.otf) format('opentype');
  font-weight:                           lighter;
}
@font-face {
  font-family:                           "PP Neue Machina";
  src:                                   url(/media/resources/PPNeueMachina/PPNeueMachina-Ultrabold.otf) format('opentype');
  font-weight:                           bold;
}
@font-face {
  font-family:                           "PP Editorial New";
  src:                                   url(/media/resources/PPEditorialNew/PPEditorialNew-Regular.otf) format('opentype');
  font-weight:                           normal;
}
@font-face {
  font-family:                           "PP Editorial New";
  src:                                   url(/media/resources/PPEditorialNew/PPEditorialNew-Italic.otf) format('opentype');
  font-weight:                           normal;
	font-style:                            italic;
}
@font-face {
	font-family:                           "PP Editorial New";
  src:                                   url(/media/resources/PPEditorialNew/PPEditorialNew-UltraboldItalic.otf) format('opentype');
  font-weight:                           normal;
	font-style:                            italic;
}
@font-face {
	font-family:                           "PP Editorial New";
  src:                                   url(/media/resources/PPEditorialNew/PPEditorialNew-Ultrabold.otf) format('opentype');
  font-weight:                           normal;
}
@font-face {
	font-family:                           "PP Editorial New";
  src:                                   url(/media/resources/PPEditorialNew/PPEditorialNew-UltralightItalic.otf) format('opentype');
  font-weight:                           normal;
	font-style:                            italic;
}
@font-face {
	font-family:                           "PP Editorial New";
	src:                                   url(/media/resources/PPEditorialNew/PPEditorialNew-Ultralight.otf) format('opentype');
	font-weight:                           normal;
}
@font-face {
	font-family:                           "PP Eiko";
	src:                                   url(/media/resources/PPEiko/PPEiko-Heavy.otf) format('opentype');
	font-weight:                           bold;
}
@font-face {
	font-family:                           "PP Eiko";
	src:                                   url(/media/resources/PPEiko/PPEiko-Medium.otf) format('opentype');
	font-weight:                           normal;
}
@font-face {
	font-family:                           "PP Eiko";
	src:                                   url(/media/resources/PPEiko/PPEiko-Thin.otf) format('opentype');
	font-weight:                           lighter;
}
@font-face {
  font-family:                           "DINOffcPro";
  src:                                   url(/media/resources/DINOffcPro.ttf) format('truetype');
  font-weight:                           normal;
}
@font-face {
  font-family:                           "DINOffcPro";
  src:                                   url(/media/resources/DINOffcPro-Medi.ttf) format('truetype');
  font-weight:                           bold;
}
@font-face {
  font-family:                           "NotoSerif";
  src:                                   url(/media/resources/NotoSerif-Regular.ttf) format('truetype');
  font-weight:                           normal;
}
body {
	font-family:                'DINOffcPro', "arial";
	font-size:                  19px;
	font-style:                 normal;
	color:                      #3a3a3a;
	background-color:           #f1f1f1;
	position:                   relative;
	word-break:                            keep-all;
	padding-top:                           80px;
}
.impressum-datenschutz {
	font-size: 91%;
}
.impressum-datenschutz h1 {
	font-size: 100%;
	margin-top: 20px;
	font-weight: bold;
}
.impressum-datenschutz h2 {
	font-size: 100%;
	margin-top: 40px;
	margin-bottom: 0px;
	font-weight: bold;
}
.impressum-datenschutz h3 {
	font-size: 100%;
	margin-top: 20px;
	margin-bottom: 0px;
	font-weight: bold;
}
.leftHeader {
	padding-top: 3px;;
}
.noto {
	font-family: NotoSerif, arial;
}
.machina {
	font-family: 'PP Neue Machina';
}
.editorial {
	font-family: 'PP Editorial New';
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
a {
	text-decoration:            none;
	color:                                 black;
}
a:hover, a:focus {
	color:                                 black;
	text-decoration:                       none;
}
.bsSizes {
	display:                               none;
	position:                              fixed;
	top:                                   0px;
	right:                                 0px;
	z-index:                               10000;
	background-color:                      rgba(200, 200, 0, 0.5);
	font-weight:                           bold;
	padding:                               5px 10px;
}
.debug .bsSizes {
	display:                               block;
}
.bsSizes .size {
	display:                               none;
}
.xs-dashes {
	display: none;
}
.container {
	position:                              relative;
	max-width:                             1006px;
	overflow:                              hidden;
}
.videoContainer {
	position: relative;
	margin-bottom: 120px;
}
.video {
	width: 100%;
	margin-top: 70px;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}
.youtubeLink {
	font-size: 12pt;
}
.container-fluid {
	z-index: 1;
	position: relative;
	padding: 0px 70px;
}
.bg_gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity:  0.8;
}
.bg_gradientA {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
.fco {
	width:                                 100%;
	overflow:                              hidden;
}
.fc:after {
	content:                               '.';
	display:                               block;
	height:                                0px;
	visibility:                            hidden;
	clear:                                 both;
}
.homeFirstLine {
	margin-top: 1rem;
	margin-bottom: 2rem;
	font-size: 72%;
}
.bigLineHeight {
	line-height: 210%;
	font-size: 97%;
}
.text_cloud {
	font-size: 43pt;
	line-height: 1.3;
}
.text_cloud .user-interface {
	font-family: 'PP Neue Machina';
	font-size: 80.4%;
}
.text_cloud .u-ex-design {
	font-family: 'PP Neue Machina';
	font-weight: bold;
	font-size: 89%;
	margin-left: 86px;
}
.text_cloud .design-thinking {
	font-family: 'DINOffcPro';
	font-style: italic;
	font-size: 60.8%;
	margin-left: 415px;
}
.text_cloud .screendesign {
	font-family: 'DINOffcPro';
	font-size: 90%;
	margin-bottom: -5px;
}
.text_cloud .webdesign {
	font-family: 'DINOffcPro';
	font-style: italic;
	font-size: 60.8%;
}
.text_cloud .motion-design {
	font-family: 'PP Neue Machina';
	font-size: 60.8%;
	margin-left: 200px;
	margin-bottom: 25px;
}
.text_cloud .print-und-editorial {
	font-family: 'PP Eiko';
	font-weight: bold;
	font-size: 70.59%;
	margin-bottom: 11px;
}
.text_cloud .corporate-brand {
	font-family: 'PP Editorial New';
	font-style: italic;
	font-size: 95.2%;
	margin-left: 157px;
	margin-bottom: 8px;
}
.text_cloud .illustration {
	font-family: 'PP Neue Machina';
	font-size: 80.4%;
	margin-bottom: -20px;
}
.text_cloud .generative-design {
	font-family: 'PP Neue Machina';
	font-weight: bold;
	font-size: 60.8%;
	margin-left: 366px;
	margin-bottom: 87px;
}
.textLink {
	color: #3a3a3a;
	border-bottom: 1px solid #c0c0c0;
	padding-bottom: 3px;
}
.textLink:hover {
	border-bottom: 1px solid black;
}
.logo {
	position: relative;
	width: 45px;
	top: -12px;
}
.pdfLink img {
	width: 40px;
}
.pdfLink .hover {
	display: none;;
}
.pdfLink:hover .hover {
	display: inline;
}
.pdfLink:hover .normal {
	display: none;
}
.payload {
	position: relative;
	z-index: 1;
}
.three_grid {
	margin-top: 1rem;
	padding-top: 9px;
	position: relative;
	margin-bottom: 83px;
}
.three_grid .grid {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 0;
}
.referenzen {
	margin-top: 30px;;
	margin-bottom: 103px;;
}
.two_grid {
	margin-top: 43px;
	padding-top: 30px;
	position: relative;
}
.videoContainer .grid,
.two_grid .grid {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 0;
}
.portfolio {
	font-size: 273%;
	line-height: 124%;
}
.refAdapt {
	margin-top: 4px;
}
.portAdapt {
	margin-top: 11px;
}
.home-ux-design-strategy {
	font-size: 66%;
	font-weight: normal;
}
.home-als-pdf {
	font-size: 33%;
}
.buch {
	display: inline-block;
	width: 464px;
	padding-left: 0px;
	margin-top: -20px;
	position: relative;
	left: -4px;
	z-index: 0;
}
.buch_yeply, .buch_real_love {
	display: inline-block;
	width: 470px;
	padding-left: 10px;
}
.buch-container {
	position: relative;
	margin-top: 20px;
	padding-top: 30px;
	margin-bottom: 46px;
}
.buch-container .linkContainer {
	position: absolute;
	top: 58px;
	left: 0px;
	z-index: 1;
}
.buch-container.buch2-container .linkContainer {
	top: 0px;
}

/*
	Navi Styles
*/
.navbarContainer {
	width:                                 100%;
	height:                                80px;
	background-color:                      white;
	position:                              fixed;
	top:                                   0px;
	left:                                  0px;
	z-index:                               1030;
	font-size: 110%;
	font-weight: bold;
	opacity: 0.98;
}
.navbar-brand {
	color: #2d2d2d;
}
.navbar .navbar-collapse {
	top: 10px;
	background-color:                      rgba(241, 241, 241, 0.95);
}
.navbar-toggler {
	border: none;
	cursor: pointer;
}
.navbar .noto {
	position: relative;
	padding-top: 24px;
	padding-bottom: 20px;
}
.logoLink {
	position: relative;
}
.siteName {
	font-size: 82%;
	font-family: 'DINOffcPro', "arial";
	font-weight: normal;
	position: absolute;
	width: 270px;;
	left: 45px;
	top: -7px;
	display: none;
}

.year {
	float:                      left;
	width:               45px;
	font-weight:                bold;
}
.descr {
	float:                      left;
	width: calc(100% - 45px);
}
img {
	border:                     none;
}
.c {
	clear:                      both;
}

.border_top {
	border-top:              1px solid #dbdddd;
	padding-top:             5px;
	margin-top: 12px;
}
#content {
	margin-top:                 125px;
}
a.ext:hover {
	color:                      #ff3333;
}
#footer {
	font-size: 91%;
	margin-top: 40px;
}
#footer .topContainer {
	text-align: right;
}
#footer .toTop {
	display: inline-block;
}
#footer .toTop img {
	width: 30px;
}
#footer .copyright {
	font-size:                80%;
	position: relative;
	margin-top: 10px;
}
.footerLinks a:hover {
	font-weight: bold;
}
.contactIcon {
	width: 24px;
	height: 10px;
	display: inline-block;
	margin-left: 8px;
	margin-right: -1px;
	position: relative;
}
.contactIcon img {
	width: 24px;
	position: absolute;
	bottom: -8px;
}
.contactIcon.mail img {
	width: 24px;
	height: 23px;
}
.copyright a {
	position: relative;
	z-index: 1;
}
.topContainer {
	margin-top: 40px;
	margin-bottom: 36px;
}
.title {
	font-weight:                bold;
	color:                      #2e2e2e;
}
.lineBox {
	padding-bottom:             30px;
	margin-bottom:              30px;
	border-bottom:              1px solid #dbdddd;
}
.lineBox.noLine {
	border-bottom:              none;
}
.hover_enabled {
	font-weight: bold;
}
.hover_enabled .imgContainer {
	display: block;
	position: relative;
}
.hover_enabled:hover .imgContainer:after {
	content:                    '';
	display:                    block;
	width:                      100%;
	position:                   absolute;
	top:                        0px;
	left:                       0px;
	bottom:                     0px;
	right:                      0px;
	background-color:           #ff3333;
	opacity:                    0.25;
	filter:                     alpha(opacity=25);
}
.hover_enabled:hover span {
	color:                      #2d2d2d;
}