@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

@font-face { font-family: 'fontello'; src: url("http://a.germanforblack.com/fonts/fontello.eot"); src: url("http://a.germanforblack.com/fonts/fontello.eot?#iefix") format("embedded-opentype"), url("http://a.germanforblack.com/fonts/fontello.woff") format("woff"), url("http://a.germanforblack.com/fonts/fontello.ttf") format("truetype"), url("http://a.germanforblack.com/fonts/fontello.svg#fontello") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'fontello'; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; line-height: 1em; }

.icon-link:before, .icon-infinity:before { content: '\221e'; }

/* '∞' */
.icon-location:before { content: '\e724'; }

/* '' */
.icon-twitter:before { content: '\f309'; }

/* '' */
.icon-book:before { content: '📕'; }

/* '\1f4d5' */
@-webkit-keyframes loader { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); }
  25%, 50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  60% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } }
@keyframes loader { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); }
  25%, 50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  60% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } }
.loader-wrapper { text-align: center; }

.loader { font: 3em Futura, 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); display: inline-block; vertical-align: middle; }
.loader span { float: left; opacity: 0; -webkit-animation: loader 4s cubic-bezier(0.5, -0.5, 0.25, 1.5) infinite; animation: loader 4s cubic-bezier(0.5, -0.5, 0.25, 1.5) infinite; }

span:nth-child(2) { -webkit-animation-delay: .5s; animation-delay: .5s; }

span:nth-child(3) { -webkit-animation-delay: 1s; animation-delay: 1s; }

@font-face { font-family: "Layout"; src: url("http://a.germanforblack.com/fonts/layout-webfont.eot?") format("eot"), url("http://a.germanforblack.com/fonts/layout-webfont.woff") format("woff"), url("http://a.germanforblack.com/fonts/layout-webfont.ttf") format("truetype"); }
html { font-size: 100%; line-height: 1.5em; }

.wf-loading body { opacity: 0; }

body { font-family: "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; opacity: 1; border-top: 5px solid #ff3333; margin-bottom: 5em; }

a { -webkit-transition: all 0.25s; transition: all 0.25s; color: inherit; }

[role='banner'] { padding-top: 1.5em; -webkit-animation-direction: forwards; animation-direction: forwards; -webkit-animation: fadeInDown 0.5s 0.2 ease-in-out; animation: fadeInDown 0.5s 0.2 ease-in-out; }
[role='banner'] p strong { font-family: "Proxima Nova", proxima-nova, Helvetica, Arial, sans-serif; display: none; }
.internal [role='banner'] p strong { display: block; }
[role='banner'] p strong a { color: #000; text-decoration: none; }
[role='banner'] p strong a:hover { color: #ff3333; }

[role='navigation'] { font-size: 0.8em; letter-spacing: 1px; }
[role='navigation'] a { font-family: "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #000; font-size: 1.1em; padding-bottom: .2em; }
[role='navigation'] a span { padding-bottom: .1em; }
[role='navigation'] a.current { color: #ff3333; }
[role='navigation'] a.current span { border-bottom: 1px solid #ff3333; }
[role='navigation'] a:hover { color: #ff3333; }

[role="main"] header { margin-bottom: 1.5em; }
[role="main"] header a { color: inherit; text-decoration: none; }
[role="main"] .internal header h1, [role="main"] .photoset header h1 { font-family: "Proxima Nova", proxima-nova, Helvetica, Arial, sans-serif; margin-bottom: 0.15em; }
[role="main"] .internal header h2, [role="main"] .photoset header h2 { font: 1.3em/1.2em "Proxima Nova", proxima-nova, Helvetica, Arial, sans-serif; margin-bottom: 3em; }
[role="main"] .internal header p, [role="main"] .photoset header p { font: 1em/1.5em "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4d4d4d; }

.post .fluid-width-video-wrapper + header, .post .fluid-width-video-wrapper + .body, .post img + header, .post img + .body { margin-top: 3em; }
.post .tumblr_video_container { margin: 0 auto; }
.post.link h1 span { margin-left: .4em; font-size: .6em; }
.post img { margin-bottom: 1.5em; max-width: 100%; margin-left: auto; margin-right: auto; display: block; }
.post ol, .post ul { font-size: 1.1em; list-style-type: disc; margin: 2em 0; }
.post ol li, .post ul li { margin: .5em 0; }
.post .gist { margin: 1em 0; }
.post .gist .gist-meta { display: none; }
.post code { font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: .9em; background-color: #f8f8ff; padding: .2em .3em; }
.post .body { font-family: "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 1em; color: #4d4d4d; }
.post .body h1, .post .body h2, .post .body h3, .post .body h4, .post .body h5, .post .body h6 { margin-bottom: 0.375em; }
.post .body * + h2, .post .body * + h3, .post .body * + h4, .post .body * + h5, .post .body * + h6 { margin-top: 3em; margin-bottom: 1.5em; }
.post .body h2 { font-weight: 600; font-size: 1.6em; }
.post .body h3 { font-weight: 600; font-size: 1.2em; }
.post .body a { color: #262626; }
.post .body a:hover { color: #ff3333; }
.post .body small { font-size: 0.8rem; }
.post .caption { margin-top: 1.5em; margin-bottom: 3em; font-style: italic; color: #999999; }
.post blockquote { margin-bottom: 1.5em; color: #666666; padding-left: 3.8%; border-left: 7px solid #ff9999; }
.post blockquote p { margin-bottom: 1.5em; }
.post p + blockquote { margin-top: 1.5em; }
.post hr { border: 0; }
.post hr:before { font-family: "Hoefler Text", "Times New Roman", Times, serif; font-weight: bold; content: "***"; letter-spacing: 1em; text-align: center; font-size: 1.5em; display: block; height: 1em; width: 100%; margin: 2em 0; color: #ff3333; }
.internal .post footer { margin-bottom: 3em; }
.post footer time { color: #000; font: 0.7em "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; margin-left: 0.1em; }
.post footer time a { -webkit-transition: all 0.25s; transition: all 0.25s; text-decoration: none; color: #666666; }
.post footer time a span { -webkit-transition: all 0.25s; transition: all 0.25s; opacity: 0; margin-left: -5px; }
.post footer time a:hover { color: black; }
.post footer time a:hover span { margin-left: 0; opacity: 1; }
.post footer cite { font: 0.7em "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; color: #999999; }
.post::after { background-image: -webkit-linear-gradient(left top, #e6e6e6 0%, #e6e6e6 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #e6e6e6 50%, #e6e6e6 75%, rgba(0, 0, 0, 0) 75%); background-image: linear-gradient(to right bottom, #e6e6e6 0%, #e6e6e6 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #e6e6e6 50%, #e6e6e6 75%, rgba(0, 0, 0, 0) 75%); background-size: 7px 7px; clear: both; display: block; content: ""; height: 7px; }
.post:last-child::after { display: none; }
.internal .post:last-child::after { margin-bottom: 1.5em; display: block; }

.post blockquote { font-size: 1.5em; line-height: 1.5em; font-weight: 300; }

header.bio h1 { padding-top: 1.5em; max-width: 80em; font: 2.8em/1.3em "Proxima Nova", proxima-nova, Helvetica, Arial, sans-serif; color: white; }
header.bio h1 strong { font-family: "Proxima Nova", proxima-nova, Helvetica, Arial, sans-serif; }

.bio .loader-wrapper { z-index: -2; position: absolute; top: 4.5em; left: 50%; margin-left: -150px; width: 300px; }

.bio .loader { -webkit-transform: none; -ms-transform: none; transform: none; }

.bio .loader span { color: #666; }

.personal-info { font-family: "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; color: white; }
.personal-info a { text-decoration: none; }
.personal-info [class*="icon-"] { margin-right: 0.5em; }

.secondary { float: left; color: gray; }
.secondary header { margin-top: 1.5em; margin-bottom: 0.375em; height: 3.25em; }
.secondary a { text-decoration: none; display: inline-block; color: #5a5a5a; }

.no-canvas .starfield { background-size: cover; background-image: url("http://a.germanforblack.com/images/aurora.jpg"); background-repeat: no-repeat; background-position: 50% 0; }

.starfield { width: 100%; height: 500px; position: absolute; top: 0; z-index: -1; }

.starfield canvas { width: 100%; }

.articles-introduction { max-width: 500px; margin: 5.5em auto 0 auto; text-align: center; }
.internal .articles-introduction { display: none; }
.articles-introduction h1 { line-height: 1.5em; color: #6b6b6b; }
.articles-introduction a { font-weight: 600; text-decoration: none; color: #333; }
.articles-introduction a:hover { color: #ff3333; }
.articles-introduction::after { content: '...................................'; display: block; height: 10px; margin: .2em auto 0 auto; letter-spacing: 2px; text-align: center; color: #ff3333; }

.pagination { display: none; }
.infinite-loading .pagination { display: block; }

.about-the-author { margin-top: -.7em; }
.about-the-author .module { padding: 0 .3em; color: #6b6b6b; margin: 0 auto; max-width: 700px; }
.about-the-author .module h1, .about-the-author .module p { font-weight: normal; font-family: "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.about-the-author .module h1 a { color: #333; text-decoration: none; font-weight: 600; line-height: 1.5; }
.about-the-author .module p { color: #808080; margin: .5em 0; }
.about-the-author .module p a { color: #ff3333; }
.about-the-author .module p a span { bottom-border: 1px solid #ff3333; padding-bottom: .2em; }

.share { display: inline-block; line-height: 1; margin: 0 2em; vertical-align: bottom; }

.peepcode { content: url("/images/logos/peepcode.jpg"); }

.smashing-mag { content: url("/images/logos/smashing-mag.jpg"); }

.dot-net { content: url("/images/logos/dotnet.jpg"); }