@charset "UTF-8";
/******************************/
section.about ol { list-style: none; padding-left: 0; margin-bottom: 0; }

section.about li { margin-bottom: 0; }

section.about figure { position: relative; width: 100%; height: 0; padding-bottom: 135%; margin-bottom: 0; background-color: #e38a18; }

section.about figure img { display: block; width: 100%; height: auto; }

section.about figcaption { display: block; box-sizing: border-box; padding: 0.75em 1em; background-color: #e38a18; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

section.about figcaption > *:last-child { margin-bottom: 0; }

section.about figcaption h3:first-child { padding-top: 0; }

section.about figcaption > *:last-child:after { content: "Next →"; font-size: 0.85em; display: block; margin-top: 0.94em; margin-bottom: -0.47em; }

@media (max-width: 640px) { .parallaxing { position: static !important; } }

@media (min-width: 641px) { section.about figure { position: relative; height: 0; padding-bottom: 50%; margin-bottom: 0; background-color: transparent; } section.about figure img { display: block; width: 100%; height: auto; position: absolute; top: 0; left: 0; } section.about figure.word-2 figcaption { left: auto; right: 2em; } section.about figure.word-3 figcaption, section.about figure.word-5 figcaption { bottom: auto; top: 2em; } section.about figcaption { position: absolute; bottom: 2em; left: 2em; box-sizing: border-box; width: 33.33%; padding: 1.5em 2em; background-color: rgba(227, 138, 24, 0.85); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } section.about figcaption h3 { font-family: "Roboto Slab", Georgia, Times, "Times New Roman", serif; font-weight: 100; text-transform: lowercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; position: relative; margin-top: -.3em; margin-right: -1.6em; } section.about figcaption h3:first-child { padding-top: 0; } .csstransforms section.about figure img { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } }

@media (min-width: 641px) and (min-height: 1000px) { section.about figure { padding-bottom: 56.2%; } .csstransforms section.about figure img { top: 0; -webkit-transform: none; transform: none; } }

.srzsd-slider-nav { font-family: "Roboto Slab", Georgia, Times, "Times New Roman", serif; text-transform: lowercase; width: 100%; position: relative; }

.srzsd-slider-nav:after { content: ""; display: block; width: 100%; height: 4px; position: absolute; left: 0; top: 0; z-index: 1; background-color: transparent; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); }

.srzsd-slider-nav ol { width: 100%; background-color: #24252e; /* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ }

.srzsd-slider-nav ol:before, .srzsd-slider-nav ol:after { content: " "; display: table; }

.srzsd-slider-nav ol:after { clear: both; }

.srzsd-slider-nav li { float: left; font-family: "Roboto Slab", Georgia, Times, "Times New Roman", serif; font-weight: 300; text-align: center; display: block; width: 20%; box-sizing: border-box; padding: 0.5em 0; background-color: #24252e; color: #66665d; border-right: 1px solid rgba(255, 255, 255, 0.2); }

.srzsd-slider-nav li:last-child { border-right: none; }

.srzsd-slider-nav li:before { content: "#"; }

.srzsd-slider-nav li.current { color: white; transition: color .3s; }

@media (min-width: 641px) { .srzsd-slider-nav li:hover { background-color: #e38a18; color: white; } .srzsd-slider-nav li:active { background-color: #845823; color: #f1c58c; } }

section.scopes strong { font-weight: 400; }

.at-a-glance { padding: 0.75em 1em 1em; margin-top: -0.5em; background-color: #304f92; color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }

.at-a-glance > *:last-child { margin-bottom: 0; }

.at-a-glance h3 { font-family: "Roboto Slab", Georgia, Times, "Times New Roman", serif; text-transform: lowercase; font-weight: 100; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.at-a-glance h5 { margin-bottom: 0.8em; }

.at-a-glance + .textblock { margin-top: 2em; }

@media (min-width: 641px) { section.scopes strong { font-size: 1.33em; font-weight: 300; } }

@media (min-width: 641px) { .at-a-glance { padding: 1.5em 2em; } .at-a-glance h3 { margin-top: -.3em; } }

ul.projects { list-style: none; padding-left: 0; }

ul.projects > li:before { display: none; }

.projects { margin-bottom: 2em; }

.project { padding: 1em 1em 0; margin-bottom: 2em; overflow: hidden; position: relative; background-color: #687e48; color: white; border-bottom: 1em solid #687e48; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transition: all 0.4s; }

.project:before { display: none; }

.project:after { content: ""; display: block; clear: both; }

.project:last-child { margin-bottom: 0; }

.project > *:last-child { margin-bottom: 0; }

.project h3:first-child { padding-top: 0; }

.project h3, .project h4 { -webkit-font-smoothing: antialiased; }

.project .span-6 { margin-bottom: 0; padding-bottom: 0; }

.project .span-6 > *:last-child { margin-bottom: 0; }

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

.project .images { margin-bottom: 1em; }

.project .images figure { width: 100%; height: 0; padding: 0 0 56%; margin: 0; overflow: hidden; position: relative; }

.project .images figure img { position: absolute; top: 0; left: 0; }

.project header { text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.project header > *:last-child { margin-bottom: 0; }

.project header h3 { padding-top: 0; }

.project header p { font-weight: 400; }

.project header:first-child + .details .columns { margin-top: 0.8em; }

.project header:first-child h3 { font-size: 1.33em; padding-bottom: 0.4em; margin-bottom: 0.4em; border-bottom: 1px solid white; }

.project header:first-child h4 { font-size: 2.33em; line-height: 1.2em; margin-top: 0; }

.project .images + header, .project .images + header + .details { text-align: left; }

.project .details { width: 100%; box-sizing: border-box; }

.project blockquote p:before, .project blockquote p:after { padding-right: .05em; color: rgba(255, 255, 255, 0.8); }

.project blockquote em { font-style: normal; border-bottom: 1px solid white; }

.project.srzsd-drawer-open, .project.srzsd-drawer-open:hover { background-color: #24252e; border-bottom-color: transparent; transition: background-color 0.4s, border-bottom-color 0.4s; }

.project.srzsd-drawer-open .images { opacity: 1; }

@media (min-width: 641px) { .project { padding: 1.5em 2em 0; border-bottom-width: 1.5em; } .project:before { content: ""; display: block !important; width: 1px; height: 0; padding: 0 0 19%; float: left; position: static; display: none !important; } .project .images { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; box-sizing: border-box; padding: 1.6em 2em; margin-bottom: 1em; opacity: .5; transition: opacity 0.1s; } .project .images figure { width: 33.33%; height: 0; padding: 0 0 19%; overflow: visible; margin: 0; position: relative; } .project .images figure img { position: absolute; top: 0; left: 0; } .project header { padding: 0 1px; } .project header > p { font-size: 1.33em; font-weight: 300; } .project header:first-child + .details .columns { margin-top: 2em; } .project header:first-child h3 { display: inline-block; padding-left: 1em; padding-right: 1em; } .project .images + header, .project .images + header + .details { padding-left: 33.33%; padding-right: 2em; position: relative; left: 2em; z-index: 1; } .project:nth-child(2n) .images figure { margin: 0 0 0 auto; } .project:nth-child(2n) .images + header, .project:nth-child(2n) .images + header + .details { padding-right: 33.33%; padding-left: 2em; left: -2em; } .project:nth-child(2n) .images + header + .details { float: left; margin-left: -2em; padding-left: 0; left: 1em; } .project blockquote p { font-size: 2.33em; } .project.srzsd-drawer-expandable { transition: background-color 0.3s, border-bottom-color 0.3s; } .project.srzsd-drawer-expandable:not(.srzsd-drawer-open):hover { background-color: #46523b; border-bottom-color: #46523b; transition: background-color 0.1s, border-bottom-color 0.1s; } .project.srzsd-drawer-expandable:not(.srzsd-drawer-open):hover .images { opacity: 1; transition: opacity 0.1s; } }

@media (min-width: 641px) { ul.projects .details.row { left: 2em; padding-right: 0; margin-top: 0; } }

ul.passion { list-style: none; margin: -0.5em; /* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ }

ul.passion:before, ul.passion:after { content: " "; display: table; }

ul.passion:after { clear: both; }

ul.passion li { box-sizing: border-box; padding: 0.5em; margin: 0; }

ul.passion li:before { display: none; }

ul.passion figure { margin: 0; }

ul.passion figcaption { background-color: #bc0a5f; color: white; padding: 0.75em 1em 1em; }

ul.passion figcaption h3 { padding-top: 0; margin-bottom: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

ul.passion figcaption > *:last-child { margin-bottom: 0; }

ul.passion li > a { display: block; padding: 0; margin: 0; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }

ul.passion li > a:after { display: none; }

ul.passion li > a cite { font-style: normal; padding: 0 .3em; margin: 0 -0.3em; border-radius: 2px; }

ul.passion li > a cite:after { content: " →"; position: relative; left: 0; transition: left 0.3s; }

ul.passion li > a:hover cite { color: white; background-color: #db000d; transition: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

ul.passion li > a:hover cite:after { transition: left 0.1s; left: .15em; }

ul.passion li > a:active cite { background-color: rgba(219, 0, 13, 0.6); }

ul.passion .image-wrapper { position: relative; width: 100%; padding-bottom: 66.67%; overflow: hidden; }

ul.passion .image-wrapper img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.csstransforms ul.passion .image-wrapper img { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.passion-sneaker .instagram-shots { /* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ }

.passion-sneaker .instagram-shots:before, .passion-sneaker .instagram-shots:after { content: " "; display: table; }

.passion-sneaker .instagram-shots:after { clear: both; }

.passion-sneaker .instagram-shots img { display: block; width: 33.33%; height: auto; float: left; }

.passion-sneaker .instagram-shots .image-wrapper { background: url(/images/passion/instagram.jpg) 50% 50% no-repeat; background-size: cover; }

.passion-sneaker .instagram-shots .meldung { display: none; }

@media (min-width: 641px) { ul.passion li { width: 50%; float: left; } ul.passion li:nth-child(odd) { clear: both; } ul.passion li figure { background-color: #bc0a5f; } ul.passion li img, ul.passion li .image-wrapper { opacity: .5; transition: opacity 0.3s; } ul.passion li img img, ul.passion li .image-wrapper img { opacity: 1; } ul.passion li:hover img, ul.passion li:hover .image-wrapper { opacity: 1; transition: opacity .05s; } ul.passion li li > a cite { font-size: 0.85em; } ul.passion figure { position: relative; } ul.passion figcaption { text-align: center; width: 100%; padding: 0; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent; text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3); } ul.passion figcaption h3 { color: white; font-size: 3.495em; } ul.passion figcaption p { position: absolute; bottom: -1.6em; width: 100%; } }

.twitter-feed { text-align: left; }

.twitter-feed a[href^=http]:after { display: none; }

.twitter-tweet { margin-bottom: 1em; }

.twitter-tweet > .wrapper { background-color: #e9e9e5; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); position: relative; }

.twitter-user, .twitter-timestamp { line-height: 1.25; }

.twitter-user { background-color: #1b8292; }

.twitter-user a { padding: 1em; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.twitter-user a:hover { background-color: #205460; box-shadow: none; transition: none; }

.twitter-user a .twitter-screen-name { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

.twitter-user .twitter-screen-name { font-size: 0.85em; }

.twitter-user img { margin-bottom: 1em; }

.twitter-user[data-user="Stahler80"] img { display: none; }

.twitter-timestamp { padding: 1em; color: white; pointer-events: none; }

.twitter-timestamp time { font-size: 0.85em; }

.twitter-timestamp:before { content: "\00a0"; font-size: 1em; display: block; }

.twitter-status { padding: 1em; }

.twitter-status ul { color: #999990; }

.twitter-status a { color: #db000d; }

.twitter-status p a { color: inherit; }

.twitter-status p a:hover { color: white; }

.twitter-retweeted, .twitter-entities { font-size: 0.85em; }

.twitter-retweeted a, .twitter-entities a { color: #999990; }

.twitter-retweeted a:hover, .twitter-entities a:hover { color: #24252e; background-color: transparent; box-shadow: none; transition: none; }

.twitter-entities { margin-bottom: 0; }

.twitter-entities li { margin-right: .7em; }

.twitter-feed nav { clear: both; text-align: center; }

.twitter-feed nav button { background-color: #1b8292; border-color: #1b8292; display: block; width: 100%; }

.twitter-feed nav button:hover { background-color: #205460; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.twitter-feed nav button:active { background-color: #205460; color: white; opacity: .6; }

.twitter-feed nav button:disabled, .twitter-feed nav button.disabled { background-color: transparent !important; color: rgba(15, 15, 0, 0.4) !important; border-color: rgba(15, 15, 0, 0.4) !important; cursor: default; }

.error { clear: both; text-align: center; }

@media (max-width: 640px) { .twitter-status img { display: none; } }

@media (min-width: 641px) { .twitter-feed { /* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ margin: -1em; } .twitter-feed:before, .twitter-feed:after { content: " "; display: table; } .twitter-feed:after { clear: both; } .twitter-feed nav { padding: 1em; } .twitter-tweet { float: left; box-sizing: border-box; width: 33.33%; padding: 1em; margin-bottom: 0; } .twitter-tweet:nth-child(3n + 1) { clear: both; } }

.soundcloud-player { margin-top: 3.2em; }

.soundcloud-player iframe { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: block; }

.content-footer { text-align: center; }

.twitter-feed + .content-footer { margin-top: 2em; }

.content .button { background-color: #1b8292; border-color: #1b8292; }

.content .button:hover { background-color: #205460; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.content .button:active { background-color: #205460; color: white; opacity: .6; }

.content .button:disabled, .content .button.disabled { background-color: transparent !important; color: rgba(15, 15, 0, 0.4) !important; border-color: rgba(15, 15, 0, 0.4) !important; cursor: default; }

section.contact { text-align: center; padding-bottom: 6.4em; position: relative; }

section.contact .portrait { display: inline-block; margin: 0 auto 1.6em; padding: 16px 16px 40px; background-color: #e9e9e5; border: 1px solid; border-color: rgba(255, 255, 255, 0.5) rgba(36, 37, 46, 0.1) rgba(36, 37, 46, 0.1) rgba(255, 255, 255, 0.5); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

section.contact .portrait:after { content: ""; display: block; width: 200px; height: 200px; background: #24252e url(/images/contact/portrait-2021.jpg) 50% 50% no-repeat; background-size: cover; }

section.contact address { display: block; margin-bottom: 1.6em; }

section.contact .links { position: absolute; bottom: 0; left: 0; width: 100%; padding-bottom: 2em; }

ul.social-links { list-style: none; padding: 0; display: inline-block; margin: 0 auto 0.8em; /* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ }

ul.social-links:before, ul.social-links:after { content: " "; display: table; }

ul.social-links:after { clear: both; }

ul.social-links li { float: left; margin: 0 0.5em; height: 2em; width: 2em; padding: 0; position: relative; }

ul.social-links li:before { display: none; }

ul.social-links a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-indent: 200%; white-space: nowrap; overflow: hidden; box-shadow: none; }

ul.social-links a:after { display: none; }

ul.social-links li.linkedin { width: 2em; }

ul.social-links li.linkedin a { display: block; background: #24252e url(/images/contact/icons/linkedin.svg) 50% 50% no-repeat; background-size: 102%; }

ul.social-links li.linkedin a:hover { background-color: #24252e; background-color: #db000d; }

ul.social-links li.linkedin a:active { background-color: rgba(36, 37, 46, 0.6); background-color: rgba(219, 0, 13, 0.6); }

ul.social-links li.xing { width: 2em; }

ul.social-links li.xing a { display: block; background: #24252e url(/images/contact/icons/xing.svg) 50% 50% no-repeat; background-size: 102%; }

ul.social-links li.xing a:hover { background-color: #24252e; background-color: #db000d; }

ul.social-links li.xing a:active { background-color: rgba(36, 37, 46, 0.6); background-color: rgba(219, 0, 13, 0.6); }

ul.social-links li.instagram { width: 2em; }

ul.social-links li.instagram a { display: block; background: #24252e url(/images/contact/icons/instagram.svg) 50% 50% no-repeat; background-size: 102%; }

ul.social-links li.instagram a:hover { background-color: #24252e; background-color: #db000d; }

ul.social-links li.instagram a:active { background-color: rgba(36, 37, 46, 0.6); background-color: rgba(219, 0, 13, 0.6); }

ul.social-links li.soundcloud { width: 3em; }

ul.social-links li.soundcloud a { display: block; background: #24252e url(/images/contact/icons/soundcloud.svg) 50% 50% no-repeat; background-size: 102%; }

ul.social-links li.soundcloud a:hover { background-color: #24252e; background-color: #db000d; }

ul.social-links li.soundcloud a:active { background-color: rgba(36, 37, 46, 0.6); background-color: rgba(219, 0, 13, 0.6); }

ul.social-links li.flickr { width: 2em; }

ul.social-links li.flickr a { display: block; background: #24252e url(/images/contact/icons/flickr.svg) 50% 50% no-repeat; background-size: 102%; }

ul.social-links li.flickr a:hover { background-color: #24252e; background-color: #db000d; }

ul.social-links li.flickr a:active { background-color: rgba(36, 37, 46, 0.6); background-color: rgba(219, 0, 13, 0.6); }

ul.social-links li.twitter { width: 2em; }

ul.social-links li.twitter a { display: block; background: #24252e url(/images/contact/icons/twitter.svg) 50% 50% no-repeat; background-size: 102%; }

ul.social-links li.twitter a:hover { background-color: #24252e; background-color: #db000d; }

ul.social-links li.twitter a:active { background-color: rgba(36, 37, 46, 0.6); background-color: rgba(219, 0, 13, 0.6); }

ul.social-links li.spotify { width: 2em; }

ul.social-links li.spotify a { display: block; background: #24252e url(/images/contact/icons/spotify.svg) 50% 50% no-repeat; background-size: 102%; }

ul.social-links li.spotify a:hover { background-color: #24252e; background-color: #db000d; }

ul.social-links li.spotify a:active { background-color: rgba(36, 37, 46, 0.6); background-color: rgba(219, 0, 13, 0.6); }

.footer-nav { text-align: center; color: #999990; }

.footer-nav ul { list-style: none; padding: 0; display: inline-block; margin: 0 auto; /* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ }

.footer-nav ul:before, .footer-nav ul:after { content: " "; display: table; }

.footer-nav ul:after { clear: both; }

.footer-nav li { float: left; line-height: 1em; padding: 0 1em; border-right: 1px solid #999990; }

.footer-nav li:before { display: none; }

.footer-nav li:last-child { border-right: none; }

.footer-nav li a { font-size: 0.85em; color: #999990; }

.footer-nav li a:hover, .footer-nav li a:active { color: white; }

.footer-nav li a:after { display: none; }

@media (min-width: 641px) { ul.social-links li { height: 2.6667em; width: 2.6667em; margin-left: 1em; margin-right: 1em; } ul.social-links li.linkedin { width: 3em; height: 2.6667em; } ul.social-links li.xing { width: 3em; height: 2.6667em; } ul.social-links li.instagram { width: 3em; height: 2.6667em; } ul.social-links li.soundcloud { width: 4em; height: 2.6667em; } ul.social-links li.flickr { width: 3em; height: 2.6667em; } ul.social-links li.twitter { width: 3em; height: 2.6667em; } ul.social-links li.spotify { width: 3em; height: 2.6667em; } }

.module-clients { margin-bottom: 2em; }

.module-clients a { display: block; }

.module-clients a:hover { background-color: transparent; box-shadow: none; }

.module-clients a[href^=http]:after { display: none; }

.module-clients + * { clear: both; }

ul.clients { list-style: none; padding-left: 0; }

ul.clients > li:before { content: ""; }

.clients { margin: -0.5em; /* The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ */ }

.clients:before, .clients:after { content: " "; display: table; }

.clients:after { clear: both; }

.client { padding: 0.5em; box-sizing: border-box; width: 50%; float: left; }

.client > .wrapper { position: relative; padding-bottom: 100%; background-repeat: no-repeat; background-position: 50% 0; background-size: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }

.client > .wrapper .logo, .client > .wrapper > a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; }

.client > .wrapper .logo { background-color: rgba(0, 0, 4, 0.09); }

@media (max-width: 640px) { .client > .wrapper .logo { background-image: none !important; } }

@media (min-width: 415px) { .clients { margin: -1em; } .client { padding: 1em; box-sizing: border-box; width: 33.33%; } }

@media (min-width: 641px) { .client { box-sizing: border-box; width: 20%; } .client > .wrapper { background-color: #687e48; background-position: 50% 100%; } .client > .wrapper .logo { background-repeat: no-repeat; background-position: 50% 0; background-size: 100%; opacity: 0; transition: opacity 0.3s; } .client > .wrapper > a .logo { background-color: white; } .client > .wrapper > a:hover .logo { opacity: 1; transition: opacity 0.1s; } }

.srzsd-slider { position: relative; }

.srzsd-slider.aktiv { cursor: pointer; }
/*# sourceMappingURL=page.css.map */