@charset "UTF-8";
/*
DESCRIPTION:Stylesheet for samuelhewitt.com.
AUTHOR:Sam Hewitt
AUTHOR URI:http://samuelhewitt.com/
*/
@import url("http://fonts.googleapis.com/css?family=Cantarell:400,700|Ubuntu+Mono:400,700|Ubuntu:700");
nav input[type=search]:focus, nav input[type=search] { background-color: transparent; border: none; border-radius: 0; box-shadow: none; outline: none; }

h1, h2, h3, h4, h5, h6, label, a, code, i, mark, strong, b, div, p, body, input[type="search"], input[type=number], input[type=text], fieldset, textarea, pre { color: #444; font-family: "soleil", sans-serif; font-kerning: initial; font-size: 15px; font-weight: 400; text-rendering: optimizelegibility; }

input[type="search"]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=text]:-ms-input-placeholder, fieldset:-ms-input-placeholder, textarea:-ms-input-placeholder, pre:-ms-input-placeholder, input[type="search"]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=text]::-moz-placeholder, fieldset::-moz-placeholder, textarea::-moz-placeholder, pre::-moz-placeholder, input[type="search"]:-moz-placeholder, input[type=number]:-moz-placeholder, input[type=text]:-moz-placeholder, fieldset:-moz-placeholder, textarea:-moz-placeholder, pre:-moz-placeholder, input[type="search"]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, fieldset::-webkit-input-placeholder, textarea::-webkit-input-placeholder, pre::-webkit-input-placeholder { color: rgba(68, 68, 68, 0.5); vertical-align: baseline; }

img { max-width: 100%; image-rendering: optimizequality; }

input[type="search"], input[type=number], input[type=text], fieldset, textarea, pre { background-color: #fff; border-radius: 4px; border: 1px solid #e1e1e1; box-shadow: none; line-height: 19px; outline: none; padding: 4px 6px; box-shadow: inset 0 0.5px 1px 0 rgba(0, 0, 0, 0.05); /* Webkit */ /* Firefox <= 18 */ /* Firefox >= 19 */ /* Internet Explorer */ }

input[type="search"]:focus, input[type=number]:focus, input[type=text]:focus, fieldset:focus, textarea:focus, pre:focus { color: #444; border: 1px solid #d4d4d4; box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2); }

html { height: 100%; margin: 0; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; background-color: #fafafa; height: 100%; overflow-x: hidden; overflow-y: scroll; }

p { line-height: 25px; }

div { line-height: 21px; }

strong, b { font-size: 15px; font-weight: 700; }

mark { color: #fff; background-color: rgba(238, 0, 102, 0.5); }

i { font-style: italic; }

abbr[title] { border-bottom: 0 dotted; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -8px; }

sup > sup { top: -4px; }

sub { bottom: -4px; }

cite { font-style: italic; }

dfn { font-style: italic; }

code { font-family: "courier-prime", monospace; font-size: 14px; line-height: 14px; font-weight: 400; }

code { background-color: #fff; padding: 0 2px; border: 1px solid #e1e1e1; border-radius: 4px; }

pre { font-family: "courier-prime", monospace; padding: 8px; margin: 8px 0; overflow: auto; overflow-x: hidden; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; word-break: break-all; }

pre::-webkit-scrollbar { display: none; width: 0 !important; }

pre > code { padding: 0; border: none; }

small { font-size: 13px; }

big { font-size: 23px; }

blockquote > p, blockquote { width: 92%; margin: 1.5em 3%; font-family: "pt-serif", serif; color: #111111; font-size: 17px; line-height: 19px; }

a { background-color: transparent; cursor: pointer; color: #ee0066; outline: none; text-decoration: underline; }

a:active, a:hover, a:focus { outline: none; }

a:focus { color: #8866ff; }

a:hover, a:active { text-decoration: none; }

a:visited { opacity: 0.8; }

caption { margin: 4px 0; font-size: 13px; }

dl, ul, ol { padding: 0; color: inherit; margin: 12px 24px; }

dl > li, ul > li, ol > li { padding: 4px 0; padding-left: 4px; }

dl dt { font-weight: 500; }

dl dd { font-style: italic; margin: 2px 0; margin-left: 32px; counter-increment: li; }

dl dd::before { color: #777777; content: counter(li) "."; display: inline-block; font-size: 15px; line-height: 0; margin-left: -14px; position: relative; text-align: left; vertical-align: baseline; width: 14px; }

hr { box-sizing: content-box; display: block; border: none; width: 100%; height: 1px; margin: 0 auto; margin-top: -1px; border-bottom: 1px solid #e1e1e1; }

img { vertical-align: top; border: none; display: block; }

svg:not(:root) { overflow: hidden; }

video { width: 100%; max-width: 800px; margin: 16px 12px; vertical-align: middle; }

form { background-color: #fff; border: 1px solid #e1e1e1; display: block; font-size: 15px; margin: 0; outline: none; padding: 16px 12px; width: calc(100% - 24px); }

label { vertical-align: baseline; display: block; margin: 4px 0; }

textarea { padding: 2px 4px; margin: 8px 0; resize: vertical; display: block; width: calc(100% - 8px); max-width: 480px; min-height: 96px; }

fieldset { background-color: transparent; margin: 1em auto; }

legend { margin: 0 2px; font-weight: 700; color: #5e5e5e; font-size: 13px; text-transform: uppercase; }

input { font: inherit; line-height: normal; border-radius: 0; box-shadow: none; outline: none; }

input[type=text] { margin: 8px 0; }

input[type=number] { padding-left: 5px; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { box-sizing: content-box; -webkit-appearance: textfield; }

input[type=checkbox], input[type=radio] { margin: 4px; box-sizing: border-box; padding: 0; }

select { display: inline-block; box-shadow: none; border: 1px solid #e1e1e1; background-color: #fff; font-size: 15px; outline: none; margin: 12px 0; }

select option { padding: 4px 6px; }

section { width: 100%; display: inline-block; margin: 12px 0; }

.center { display: block; position: relative; margin-left: auto; margin-right: auto; }

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

.left { float: left; }

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

.right { float: right; }

.text-right { text-align: right; }

article { margin: 2em auto; width: 100%; display: inline-block; }

article .title { font-size: 38px !important; line-height: 1.25 !important; }

article .subtitle { margin: 12px 0; line-height: 1.25 !important; font-style: italic; }

article p:not(.infobar), article p i, article p b, article p strong, article ul:not(.levelbars), article ol, article li a, article p a:not(.button) { font-family: "pt-serif", serif; font-size: 16px; }

article > hr { border: none; display: block; width: 100%; text-align: center; font-size: 80%; color: #e1e1e1; line-height: 36px; height: 36px; }

article > hr:after { content: "✤✤✤"; letter-spacing: 8px; }

article blockquote { box-shadow: inset 5px 0 0 0 #e1e1e1; }

article blockquote > p { margin: 0 2em; font-size: 17px; line-height: 21px; font-family: "soleil", sans-serif !important; }

article blockquote > p:first-letter { text-transform: uppercase; }

article blockquote.block { background-color: white; width: 100%; margin: 2em auto; padding: 1em 0; box-shadow: inset 5px 0 0 0 #ee0066, inset 0 0 0 1px #e1e1e1; border-radius: 0 5px 5px 0; }

article blockquote.block > p { width: calc(100% - 4em) !important; margin: 0 2em; font-family: "soleil", sans-serif !important; }

article blockquote.block > p:before { content: '“'; opacity: 0.5; }

article blockquote.block > p:after { content: '”'; opacity: 0.5; }

article video, article img { margin: 32px auto; border-radius: 7px; }

@-moz-document url-prefix() { article > p:first-of-type:first-letter { margin-top: 10px; } }

.avatar { background: center no-repeat #ee0066; background-image: url(/img/avatar/smirk.svg); background-size: 96px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); display: block; height: 96px; margin: 0 auto; margin-top: 32px; padding: 48px; width: 96px; z-index: 1; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

.avatar:hover { background-image: url(/img/avatar/grin.svg); z-index: 2; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

.avatar:active { background-image: url(/img/avatar/neutral.svg); z-index: 3; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

a.badge { display: inline-block; margin: 12px 16px; -webkit-transition: all 0 ease-out; -moz-transition: all 0 ease-out; -ms-transition: all 0 ease-out; -o-transition: all 0 ease-out; transition: all 0 ease-out; }

a.badge.telegram { width: calc(135px * 1.25); height: calc(40px * 1.25); background-image: url("/img/scalable/Telegram-Badge.svg"); background-size: 100%; background-position: center; background-repeat: no-repeat; -webkit-transition: all 0 ease-out; -moz-transition: all 0 ease-out; -ms-transition: all 0 ease-out; -o-transition: all 0 ease-out; transition: all 0 ease-out; }

a.badge.telegram:active, a.badge.telegram:active:hover { background-image: url("/img/scalable/Telegram-Badge_active.svg"); -webkit-transition: all 0 ease-out; -moz-transition: all 0 ease-out; -ms-transition: all 0 ease-out; -o-transition: all 0 ease-out; transition: all 0 ease-out; }

a.badge.telegram:hover { background-image: url("/img/scalable/Telegram-Badge_hover.svg"); -webkit-transition: all 0 ease-out; -moz-transition: all 0 ease-out; -ms-transition: all 0 ease-out; -o-transition: all 0 ease-out; transition: all 0 ease-out; }

a.badge.appstore { width: calc(135px * 1.25); height: calc(40px * 1.25); background-image: url("/img/scalable/AppStore-Badge.svg"); background-size: 100%; background-position: center; background-repeat: no-repeat; -webkit-transition: all 0 ease-out; -moz-transition: all 0 ease-out; -ms-transition: all 0 ease-out; -o-transition: all 0 ease-out; transition: all 0 ease-out; }

a.badge.appstore:active, a.badge.appstore:active:hover { background-image: url("/img/scalable/AppStore-Badge_active.svg"); -webkit-transition: all 0 ease-out; -moz-transition: all 0 ease-out; -ms-transition: all 0 ease-out; -o-transition: all 0 ease-out; transition: all 0 ease-out; }

a.badge.appstore:hover { background-image: url("/img/scalable/AppStore-Badge_hover.svg"); -webkit-transition: all 0 ease-out; -moz-transition: all 0 ease-out; -ms-transition: all 0 ease-out; -o-transition: all 0 ease-out; transition: all 0 ease-out; }

ul.button-list li > a, input[type=reset], input[type=submit], .suggested, .share, button, .button { color: #919191; font-weight: 500; font-size: 15px; line-height: 33px; text-align: center; text-decoration: none; text-shadow: none; }

ul.button-list li > a, input[type=reset], input[type=submit], .suggested, .share, button, .button { -webkit-border-radius: 17px; -moz-border-radius: 17px; -ms-border-radius: 17px; border-radius: 17px; background: #fff; border: none; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.15); display: inline-block; cursor: pointer; height: 34px; padding: 0 14px; margin: 12px 0; outline: none; overflow: visible; vertical-align: middle; }

ul.button-list li > a.flat, input.flat[type=reset], input.flat[type=submit], .flat.suggested, .flat.share, button.flat, .button.flat { background: transparent; border: none; box-shadow: none; }

ul.button-list li > a.circular, input.circular[type=reset], input.circular[type=submit], .circular.suggested, .circular.share, button.circular, .button.circular { padding: 0; width: 34px; height: 34px; border-radius: 50%; }

ul.button-list li > a.circular > svg, input.circular[type=reset] > svg, input.circular[type=submit] > svg, .circular.suggested > svg, .circular.share > svg, button.circular > svg, .button.circular > svg { margin: 9px; }

ul.button-list li > a > svg, input[type=reset] > svg, input[type=submit] > svg, .suggested > svg, .share > svg, button > svg, .button > svg { height: 16px; width: 16px; display: inline-block; float: left; margin-top: 8px; margin-right: 6px; margin-left: 12px; }

ul.button-list li > a > svg > g, input[type=reset] > svg > g, input[type=submit] > svg > g, .suggested > svg > g, .share > svg > g, button > svg > g, ul.button-list li > a > svg > path, input[type=reset] > svg > path, input[type=submit] > svg > path, .suggested > svg > path, .share > svg > path, button > svg > path, .button > svg > g, .button > svg > path { fill: #919191; }

ul.button-list li > a > i, input[type=reset] > i, input[type=submit] > i, .suggested > i, .share > i, button > i, .button > i { color: inherit; margin-left: 2px; margin-right: 6px; }

ul.button-list li > a:hover, input[type=reset]:hover, input[type=submit]:hover, .suggested:hover, .share:hover, button:hover, .button:hover, .button:focus:hover { background: #ee0066; color: #fff; box-shadow: 0 1px 1px 0 rgba(238, 0, 102, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

ul.button-list li > a:hover svg > g, input[type=reset]:hover svg > g, input[type=submit]:hover svg > g, .suggested:hover svg > g, .share:hover svg > g, button:hover svg > g, ul.button-list li > a:hover svg > path, input[type=reset]:hover svg > path, input[type=submit]:hover svg > path, .suggested:hover svg > path, .share:hover svg > path, button:hover svg > path, .button:hover svg > g, .button:hover svg > path, .button:focus:hover svg > g, .button:focus:hover svg > path { fill: #fff; }

ul.button-list li > a:focus, input[type=reset]:focus, input[type=submit]:focus, .suggested:focus, .share:focus, button:focus, .button:focus { background: #fff; color: #444; text-decoration: underline !important; box-shadow: 0 1px 1px 0 rgba(238, 0, 102, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

ul.button-list li > a:focus svg > g, input[type=reset]:focus svg > g, input[type=submit]:focus svg > g, .suggested:focus svg > g, .share:focus svg > g, button:focus svg > g, ul.button-list li > a:focus svg > path, input[type=reset]:focus svg > path, input[type=submit]:focus svg > path, .suggested:focus svg > path, .share:focus svg > path, button:focus svg > path, .button:focus svg > g, .button:focus svg > path { fill: #444; }

ul.button-list li > a:active, input[type=reset]:active, input[type=submit]:active, .suggested:active, .share:active, button:active, .button:active, .button:active:focus, .button:active:hover { background: #e6e6e6; color: #919191; }

ul.button-list li > a:active svg > g, input[type=reset]:active svg > g, input[type=submit]:active svg > g, .suggested:active svg > g, .share:active svg > g, button:active svg > g, ul.button-list li > a:active svg > path, input[type=reset]:active svg > path, input[type=submit]:active svg > path, .suggested:active svg > path, .share:active svg > path, button:active svg > path, .button:active svg > g, .button:active svg > path, .button:active:focus svg > g, .button:active:focus svg > path, .button:active:hover svg > g, .button:active:hover svg > path { fill: #919191; }

ul.button-list li > a.center, input.center[type=reset], input.center[type=submit], .center.suggested, .center.share, button.center, .button.center { display: block; min-width: 160px; width: auto; max-width: 240px; margin: 12px auto; }

ul.button-list li > a.no-label, input.no-label[type=reset], input.no-label[type=submit], .no-label.suggested, .no-label.share, button.no-label, .button.no-label { padding: 0; }

ul.button-list li > a.no-label > svg, input.no-label[type=reset] > svg, input.no-label[type=submit] > svg, .no-label.suggested > svg, .no-label.share > svg, button.no-label > svg, .button.no-label > svg { margin: 8px; }

ul.button-list li > a.with-icon, input.with-icon[type=reset], input.with-icon[type=submit], .with-icon.suggested, .with-icon.share, button.with-icon, .button.with-icon { padding-left: 0; }

button { display: block; }

input[type=reset], input[type=submit], .suggested, .share { color: #fff; }

input[type=reset]:hover, input[type=submit]:hover, .suggested:hover, .share:hover, input[type=reset]:focus, input[type=submit]:focus, .suggested:focus, .share:focus { opacity: 0.8; }

input[type=reset]:active, input[type=submit]:active, .suggested:active, .share:active { opacity: 0.7; }

.share { text-align: center; padding-right: 18px; }

.share > i { width: 18px; color: inherit; padding-right: 6px; line-height: 34px; }

.share.googleplus { background-color: #DD4B39; }

.share.googleplus:active { background-color: #DD4B39; }

.share.tweet { background-color: #55ACEE; }

.share.tweet:active { background-color: #55ACEE; }

.share.facebook { background-color: #3B5998; }

.share.facebook:active { background-color: #3B5998; }

.suggested { background: #ee0066; color: #fff; }

.suggested:active, .suggested:active:hover { background: #d6005c; color: #fff; }

.suggested:focus { background: #ff0972; color: #fff; }

.suggested:hover { background: #ff0972; color: #fff; }

input[type=submit] { background: #0055bb; color: #fff; display: block; }

input[type=submit]:active, input[type=submit]:active:hover { background: #004da8; color: #fff; }

input[type=submit]:focus { background: #0061d5; color: #fff; }

input[type=submit]:hover { background: #0061d5; color: #fff; }

input[type=reset] { background: #ee1100; color: #fff; display: block; }

input[type=reset]:active, input[type=reset]:active:hover { background: #d60f00; color: #fff; }

input[type=reset]:focus { background: #ff1a09; color: #fff; }

input[type=reset]:hover { background: #ff1a09; color: #fff; }

ul.button-list { display: inline-block; list-style: none; max-width: 100%; margin: 12px 0%; }

ul.button-list li { display: inline-block; }

ul.button-list li > a { display: inline-block; min-width: auto; width: auto; margin: 1px; text-align: left; }

@media only screen and (max-width: 480px) { .button .center, button { display: block; margin: 0; padding: 0; width: 60%; margin: 16px auto; } }

@media only screen and (max-width: 400px) { .button .center, button { display: block; padding: 0; width: 96%; margin: 16px 2%; } }

.carousel { display: block; width: 90%; height: auto; margin: 32px 5%; position: relative; }

.carousel .carousel-inner { display: inline-block; position: relative; width: 100%; height: auto; overflow: hidden; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.carousel .carousel-inner .item { width: 100%; position: relative; display: none; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.carousel .carousel-inner .item.active, .carousel .carousel-inner .item.next, .carousel .carousel-inner .item.prev { display: block; }

.carousel .carousel-inner .item.active.left { transform: translateX(-100%); }

.carousel .carousel-inner .item.active.right { transform: translateX(100%); }

.carousel .carousel-inner .item.next { position: absolute; transform: translateX(100%); }

.carousel .carousel-inner .item.prev { position: absolute; transform: translateX(-100%); }

.carousel-control { position: absolute; top: calc(50% - (96px * 0.5)); opacity: 0.6; display: inline-block; padding: 0.5em; border-radius: 8px; }

.carousel-control > svg { fill: #444; }

.carousel-control:focus, .carousel-control:active { -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.carousel-control:focus > svg, .carousel-control:active > svg { fill: black; }

.carousel-control:hover { -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.carousel-control:hover > svg { fill: #ee0066; }

.carousel-control.left { right: auto; left: calc(32px * -1); float: left; }

.carousel-control.right { left: auto; right: calc(32px * -1); float: right; }

.carousel-caption { display: block; width: 80%; margin: 0 10%; margin-top: 24px; text-transform: uppercase; text-align: center; font-size: 90%; opacity: 0.5; }

.circle { background-color: #ededed; border-radius: 50%; height: 48px; width: 48px; margin: 16px 8px; display: inline-block; text-decoration: none; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

.circle > svg { margin: 12px; fill: #aeaeae; height: 24px; width: 24px; }

.circle:hover { background-color: rgba(238, 0, 102, 0.2); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

.circle:hover > svg { fill: #ee0066; }

.circle:focus { background-color: rgba(136, 102, 255, 0.2); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

.circle:focus > svg { fill: #8866ff; }

.circle:active { background-color: #e1e1e1; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

.circle:active > svg { fill: #7b7b7b; }

.col { vertical-align: top; display: inline-block; height: auto; padding-top: 1em; padding-bottom: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.col.half { width: 47%; display: inline-block; }

.col.half.left { margin-right: 2%; }

.col.half.right { margin-left: 2%; }

.col.third { width: 30%; margin: 0 1%; }

.col.third.left { margin-right: 2%; }

.col.third.right { margin-left: 2%; }

.col.two-thirds { width: 60%; margin: 0 1%; }

.col.two-thirds.left { margin-right: 2%; }

.col.two-thirds.right { margin-left: 2%; }

.col.quarter { float: left; margin: 0 1%; width: 23%; }

@media only screen and (max-width: 1200px) { .col.third:nth-child(1) { width: 60%; margin: 0 auto; float: none; } .col.third:nth-child(2), .col.third:nth-child(3) { width: 48%; margin-left: 0; margin-right: 0; display: inline-block; } }

@media only screen and (max-width: 1024px) { .col.third:nth-child(1), .col.third:nth-child(2), .col.third:nth-child(3), .col.half, .col.two-thirds, .col.third { display: block; width: 100%; float: none; } .col.third.left:nth-child(1), .col.third.right:nth-child(1), .col.third.left:nth-child(2), .col.third.right:nth-child(2), .col.third.left:nth-child(3), .col.third.right:nth-child(3), .col.half.left, .col.half.right, .col.two-thirds.left, .col.two-thirds.right, .col.third.left, .col.third.right { float: none; margin: 1em 0; } }

.dropdown { background-color: #fff; border-radius: 5px; border: 1px solid #e1e1e1; display: inline-block; margin: 12px auto; width: 100%; }

.dropdown > a { color: #444; display: block; font-size: 15px; line-height: 20px; margin: 0; padding: 8px 12px; pointer: hand; text-decoration: none; width: calc(100% - 24px); }

.dropdown > a > i { float: right; -webkit-transition-duration: 100ms; -o-transition-duration: 100ms; transition-duration: 100ms; }

.dropdown > a > i.active { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition-duration: 100ms; -o-transition-duration: 100ms; transition-duration: 100ms; }

.collapse, .collapse.in, .collapsing { background-color: #fff; border-radius: 0 0 5px 5px; margin: 0; padding: 6px; }

.collapse { display: none; }

.collapse.in { display: block; }

.collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: height, visibility; -o-transition-property: height, visibility; transition-property: height, visibility; }

.emote { display: inline-block; }

.emote > svg { fill: #444; }

.emote.small > svg { width: 16px; height: 16px; }

.emote.large > svg { width: 128px; height: 128px; }

.face { display: block; margin: 2em auto; height: 300px; width: 300px; background-image: url(/img/face.jpg); background-position: center; background-repeat: no-repeat; background-size: 100%; border-radius: 50%; box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 #fff; }

@media only screen and (max-width: 848px) { .face { margin: 4em auto; max-width: 95%; display: block; } }

.wrapper { min-height: 100%; margin-bottom: calc((128px + 32px) * -1); }

.push { height: calc(128px + 32px); }

footer { background-color: whitesmoke; padding-top: 32px; min-height: 128px; text-align: center; width: 100%; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1); }

footer span { color: #aaaaaa; }

footer .eh { margin-top: 2em; width: 100%; text-align: center; }

footer .eh:before { content: ""; padding: 0; }

footer .root { color: #aaaaaa; margin-top: 2em; width: 100%; text-align: center; }

footer .root:before { content: ""; padding: 0; }

footer.minimal { min-height: 64px; background-color: transparent; box-shadow: none; }

footer.minimal a, footer.minimal span { color: rgba(0, 0, 0, 0.2); }

footer a, footer span { font-family: "courier-prime", monospace; display: inline-block; }

footer a:before, footer span:before { color: #aaaaaa; content: "•"; padding: 0 1em; }

footer a:nth-child(1):before, footer span:nth-child(1):before { content: ""; }

footer a { display: inline-block; text-decoration: none; }

footer a:hover { color: #aaaaaa; }

@media only screen and (max-width: 848px) { footer a, footer span { width: 100%; text-align: left; margin: 12px auto; display: block; float: left; } footer a:before, footer span:before { content: ""; padding: 0; } footer.minimal a, footer.minimal span { text-align: center; } }

@media print { footer { display: none; } }

ul.grid { margin: 0; list-style: none; }

ul.grid li { background-color: #fff; border-radius: 4px; box-shadow: 0 0 0 1px #e1e1e1; display: inline-block; height: calc(288px + 48px); margin: 12px; padding: 12px; text-decoration: none; text-align: center; width: 344px; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

ul.grid li:focus, ul.grid li:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 0 1px 1px rgba(238, 0, 102, 0.2); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

ul.grid li:active, ul.grid li:active:focus { background-color: #fff; box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(238, 0, 102, 0.2); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }

ul.grid li img { border-radius: 4px; margin-bottom: 12px; }

ul.grid li span { display: inline-block; color: #919191; font-size: 14px; font-weight: 500; letter-spacing: 4px; line-height: 32px; text-transform: uppercase; vertical-align: bottom; }

@media only screen and (max-width: 848px) { ul.grid { text-align: center; } }

@media only screen and (max-width: 440px) { ul.grid { text-align: center; } ul.grid li { background-color: transparent; border-radius: 0; box-shadow: none; height: 288px; margin: 0; margin-bottom: 24px; max-width: 344px; padding-left: 0; padding-right: 0; width: 100%; } ul.grid li:focus, ul.grid li:hover { box-shadow: none; background-color: transparent; } }

header { min-height: 0px; background-color: #fff; padding: 24px 0; width: 100%; border-bottom: 1px solid #e1e1e1; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); z-index: 100; }

header a, header span { line-height: 64px; font-size: 48px; font-weight: bold; display: inline-block; }

header span { color: #2b2b2b; width: 100%; }

header span.subtitle { font-size: 36px; }

header a { line-height: 64px; text-decoration: underline; }

header a.arrow { float: left; font-size: 52px; text-decoration: none; font-weight: 300; padding-right: 12px; opacity: 0.6; }

header a.arrow:hover, header a.arrow:focus { color: rgba(43, 43, 43, 0.5); transform: translateX(-8px); }

@media only screen and (max-width: 848px) { header a, header span { font-size: 40px; } header a.arrow { font-size: 48px; } }

h1, h2, h3, h4, h5, h6 { padding: 8px 0; font-weight: bold; color: #111111; }

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { font: inherit; }

h1, h2 { color: black; }

h3, h4 { color: #2b2b2b; }

h4, h5, h6 { font-weight: normal; color: #5e5e5e; }

h1 { font-size: 31px; line-height: 1.5; margin: 12px 0; }

h2 { font-size: 26px; line-height: 1.5; margin: 12px 0; }

h3 { font-size: 22px; line-height: 1.5; margin: 12px 0; }

h4 { font-size: 22px; line-height: 1.5; margin: 12px 0; }

h5 { font-size: 19px; line-height: 1.5; margin: 12px 0; }

h6 { font-size: 17px; line-height: 1.5; margin: 8px 0; }

.hidden, .invisible { display: none; }

@media only screen and (max-width: 848px) { .extraneous { display: none; } }

.infobar { background-color: #fff; border-radius: 7px; color: #444; display: inline-block; font-size: 14px; font-family: "courier-prime", monospace; margin: 12px auto; padding: 8px 5%; text-align: center; width: 90%; box-shadow: inset 0 0 0 1px #e1e1e1; }

.infobar * { font-family: inherit; font-size: inherit; color: inherit; }

.infobar span { display: block; width: 100%; }

.infobar.small { border-radius: 5px; padding: 6px 3%; font-size: 12px; }

.infobar.row { width: 100%; margin: 0; border-radius: 0; padding: 12px 0; box-shadow: none; border-bottom: 1px solid #e1e1e1; z-index: 20; }

.infobar a { font-family: inherit; font-size: inherit; font-weight: inherit; color: #ee0066; }

.infobar.error { box-shadow: inset 0 0 0 1px rgba(238, 17, 0, 0.4); color: #ee1100; }

.infobar.info { box-shadow: inset 0 0 0 1px rgba(0, 85, 187, 0.4); color: #0055bb; }

.infobar.warning { box-shadow: inset 0 0 0 1px rgba(238, 136, 0, 0.4); color: #ee8800; }

.infobar.coloured { color: #fff; box-shadow: none; border: none; font-weight: bold; }

.infobar.coloured span a { color: inherit; }

.infobar.coloured.error { background-color: #ee1100; }

.infobar.coloured.info { background-color: #0055bb; }

.infobar.coloured.warning { background-color: #ee8800; }

@media only screen and (max-width: 600px) { .infobar.sticky { position: relative; top: 0; } }

ul.levelbars { display: block; padding: 1em; margin: 0; list-style: none; }

ul.levelbars > li { display: inline-block; height: 1em; border-radius: 0.5em; width: 100%; padding: 0; margin: 1.5em auto 0.5em auto; background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8); }

ul.levelbars > li > span { display: inline-block; float: left; line-height: 1.2em; font-size: 1.125em; margin-top: -1.5em; text-transform: uppercase; color: #444; }

ul.levelbars > li > span.right { font-weight: bold; float: right; }

.level { border-top-left-radius: 0.5em; border-bottom-left-radius: 0.5em; box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.1); height: 1em; }

.level.l1 { width: 10%; background-color: #f34235; }

.level.l2 { width: 20%; background-color: #ff5722; }

.level.l3 { width: 30%; background-color: #fe9700; }

.level.l4 { width: 40%; background-color: #fec006; }

.level.l5 { width: 50%; background-color: #feea3a; }

.level.l6 { width: 60%; background-color: #ccdb38; }

.level.l7 { width: 70%; background-color: #8ac249; }

.level.l8 { width: 80%; background-color: #4bae4f; }

.level.l9 { width: 90%; background-color: #1ea362; }

.level.l10 { border-radius: 0.5em; width: 100%; background-color: #009DAF; }

table.listed-posts { background-color: #fff; margin: 24px auto; padding: 12px; width: 100%; }

table.listed-posts > tbody > tr th, table.listed-posts > tbody > tr td { border-top: 1px solid #e1e1e1; border-right: none; vertical-align: top; padding: 8px; }

table.listed-posts > tbody > tr th > a, table.listed-posts > tbody > tr td > a { font: inherit; }

table.listed-posts > tbody > tr th:nth-child(1), table.listed-posts > tbody > tr td:nth-child(1) { width: 75%; text-align: left; }

table.listed-posts > tbody > tr th:nth-child(2), table.listed-posts > tbody > tr td:nth-child(2) { width: 25%; text-align: right; font-family: "courier-prime", monospace; }

@media only screen and (max-width: 520px) { table.listed-posts > tbody > tr th:nth-child(1), table.listed-posts > tbody > tr td:nth-child(1) { width: 100%; } table.listed-posts > tbody > tr th:nth-child(2), table.listed-posts > tbody > tr td:nth-child(2) { display: none; } }

nav { padding: 0; z-index: 10; width: 100%; background: transparent; padding: 12px 0; height: 32px; border-bottom: 1px solid #e1e1e1; }

nav.bottom { padding: 16px 0; border-top: 1px solid #e1e1e1; border-bottom: none; }

nav.bottom > .row { margin: 0 auto; }

nav a, nav span { line-height: 32px; }

nav a.button, nav span.button { margin: 0; }

nav a > svg, nav span > svg { fill: #ee0066; }

nav span.prev, nav span.next { opacity: 0.5; }

nav > svg { margin: calc((64px - 24px) / 2) 12px; margin-right: 0px; fill: #848484; }

nav input[type=search] { color: #515151; display: inline-block; font-family: "soleil", sans-serif; font-size: 19px; line-height: 27px; font-weight: 300; height: 32px; overflow: hidden; padding: calc(64px / 4) 8px; padding-right: 12px; position: absolute; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; width: calc(100% - 54px); }

nav input[type=search]:focus { border: none; }

nav ul, nav ol { list-style: none; list-style-image: none; }

table.notes { background-color: #fff; border-radius: 0 5px 5px 0; border: 1px solid rgba(0, 0, 0, 0.08); border-left-width: 0; box-shadow: -5px 0 0 0 #ee0066, inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.05); display: inline-block; font-family: "courier-prime", monospace; color: #111111; font-size: 15px; margin: 12px 0; max-width: 480px; padding: 0; padding-bottom: 2px; }

table.notes > thead > tr { background-color: transparent; border-bottom: 1px dashed #e6e6e6; }

table.notes > thead > tr > th { border: none; padding: 6px 0 4px 0; vertical-align: top; padding-right: 8px; background-color: transparent; }

table.notes > thead > tr > th > a { font-family: inherit; }

table.notes > thead > tr > th:nth-child(odd) { width: 136px; padding-left: 8px; }

table.notes > thead > tr > th:nth-child(even) { width: 304px; padding-right: 32px; }

table.notes > tbody > tr { background-color: transparent; border-bottom: 1px dashed #e6e6e6; }

table.notes > tbody > tr:first-child { border-top: none; }

table.notes > tbody > tr:last-child { border: none; }

table.notes > tbody > tr > td { border: none; padding: 6px 0 4px 0; vertical-align: top; padding-right: 8px; background-color: #fff !important; }

table.notes > tbody > tr > td > a { font-family: inherit; }

table.notes > tbody > tr > td:nth-child(odd) { width: 144px; color: #919191; text-align: right; }

table.notes > tbody > tr > td:nth-child(odd):after { content: ":"; }

table.notes > tbody > tr > td:nth-child(even) { width: 304px; padding-right: 32px; }

@media only screen and (max-width: 480px) { table.notes { margin-left: calc(-5% + 2px); } }

@media print { article { font-size: 1em; margin: 0 auto; padding: 1em; background-color: transparent; border-radius: 0; border: none; box-shadow: none; } article img, #tags, #recent { display: none; } }

.row { display: table; position: relative; margin: 12px auto; width: 640px; }

.row.wide { width: 840px; }

@media only screen and (max-width: 848px) { .row, .row.wide { width: 90%; margin: 0 5%; } }

::selection { background-color: #ee0066; color: #fff; }

::-moz-selection { background-color: #ee0066; color: #fff; }

::-webkit-selection { background-color: #ee0066; color: #fff; }

.separator { border: none; display: block; width: 100%; text-align: center; font-size: 125%; color: #e1e1e1; line-height: 24px; height: 24px; }

.separator:after { content: "✤"; }

#sharebox { display: block; width: 100%; margin: 2em auto; text-align: center; padding: 0.5em 0; }

.share-button { display: inline-block; height: 26px; width: auto; margin: 2px 3px; border-radius: 13px; color: #fff; padding: 0 8px; background-color: #fff; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.1)); outline: none; box-shadow: none; text-decoration: none; /* border, highlight, inner shadow, drop shadow */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(0, 0, 0, 0.1); }

.share-button > span { font-size: 12px; line-height: 26px; text-transform: uppercase; font-weight: 700; }

.share-button > i { font-size: 13px; margin: 0 4px; }

.share-button > i, .share-button > span { margin: 4px; vertical-align: middle; color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.2); }

.share-button > img, .share-button > svg { display: inline-block; float: left; margin: 4px; }

.share-button:focus { background-image: none; }

.share-button:hover { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0)); }

.share-button:active, .share-button:active:focus { background-image: linear-gradient(to top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.1)); transition: 100ms; -webkit-transition: 100ms; }

.share-button:active > span, .share-button:active:focus > span { color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.2); }

.share-button.email { background-color: #2BA38E; }

.share-button.facebook { background-color: #3B5998; }

.share-button.google-red { background-color: #DD4B39; }

.share-button.instagram { background-color: #316189; }

.share-button.pinterest { background-color: #cb2027; }

.share-button.reddit { background-color: #5C98D1; }

.share-button.tumblr { background-color: #32506D; }

.share-button.twitter { background-color: #55ACEE; }

.share-button.pocket { background-color: #EE4056; }

@media only screen and (max-width: 500px) { .share-button { width: 32px; height: 32px; border-radius: 16px; padding: 0; } .share-button > span { margin: 0; padding: 0; display: none; } .share-button > i { font-size: 16px; vertical-align: middle; text-align: center; line-height: 33px; width: 32px; margin: 0; padding: 0; } }

table { background-color: #fff; border-collapse: collapse; border-spacing: 0; border: 1px solid #e1e1e1; font-size: 15px; font-weight: 400; margin: 1em auto; padding: 1em; text-align: left; width: 100%; }

table > thead { font-weight: bold; border: none; }

table > thead > tr { background-color: #fff; }

table > tbody > tr th, table > tbody > tr td, table > thead > tr th, table > thead > tr td { border-top: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; vertical-align: top; padding: 8px 12px; }

table > tbody > tr th > a, table > tbody > tr td > a, table > thead > tr th > a, table > thead > tr td > a { font: inherit; }

table > tbody > tr:nth-child(even) { background-color: white; }

table > tbody > tr:nth-child(odd) { background-color: #fff; }

.tags { display: block; margin: 8px 0; width: 100%; height: 30px; }

.tag { background-color: #f2f2f2; border-radius: 3px; border: 1px solid #d4d4d4; box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #5e5e5e; display: inline-block; font-size: 12px; font-weight: bold; height: 24px; line-height: 24px; margin-right: 6px; opacity: 1.0; outline: none; padding: 0 6px; position: relative; text-decoration: none; text-shadow: 0 1px rgba(255, 255, 255, 0.4); text-transform: uppercase; vertical-align: top; }

.tag:focus, .tag:hover { box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset 0 -1px 0 1px rgba(255, 255, 255, 0.4); color: #5e5e5e; height: 25px; margin-bottom: 0px; top: -1px; }

.tag:active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); height: 24px; margin-bottom: 1px; top: 0; }

@font-face { font-family: "Deja Vu Sans Mono"; src: local("DejaVuSansMono"), local(DejaVuSansMono), url(/fonts/DejaVuSansMono.ttf); font-weight: 200; }

@font-face { font-family: "Menlo Regular"; src: local("Menlo Regular"), local(MenloRegular), url(/assets/fonts/Menlo-Regular.ttf); font-weight: 200; }

@keyframes cursor { 0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; } }

#terminal span[data-terminal] { height: 0; display: none; }

#terminal .output { padding: 0; margin: 0; overflow: hidden; }

#terminal .output .line { display: block; word-wrap: break-word; margin: 0 auto; }

#terminal .output .line:last-child::after { font-family: "Deja Vu Sans Mono", monospace; font-size: 9pt; content: "█"; animation-name: cursor; animation-iteration-count: infinite; animation-duration: 1s; animation-fill-mode: both; }

#terminal.gnome { width: 768px; max-width: 768px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #282C2C; margin: 2em auto; border-radius: 5px 5px 0 0; }

#terminal.gnome .headerbar { font-family: "Cantarell", sans-serif; font-weight: 700; font-size: 10pt; color: #FFFFFF; display: block; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 0 0 rgba(0, 0, 0, 0.4); text-shadow: 0 -1px rgba(0, 0, 0, 0.4); background-image: linear-gradient(#424B4B, #393F3F); padding: 0; height: 38px; text-align: center; border-radius: 4.5px 4.5px 0 0; }

#terminal.gnome .title { position: relative; line-height: 36px; margin-left: 32px; }

#terminal.gnome .window-control { padding: 7px; width: 16px; height: 16px; display: block; position: relative; float: right; top: 4px; right: 4px; border-radius: 3px; }

#terminal.gnome pre { background-color: #292929; border-radius: 0; box-shadow: none; color: #FFFFFF; font-family: "Deja Vu Sans Mono", monospace; font-size: 10pt; margin: 0; max-width: 768px; min-height: 400px; padding: 1px; text-shadow: none; }

#terminal.gnome .output { margin-top: -63px; }

#terminal.macos { width: 768px; max-width: 768px; box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.1); margin: 2em auto; border-radius: 5px; }

#terminal.macos .headerbar { color: #4C4C4C; font-family: "Helvetica", 'Roboto', sans-serif; font-size: 10pt; font-weight: 400; background-image: linear-gradient(#EBEBEB, #D3D3D3); border-radius: 4.5px 4.5px 0 0; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); height: 24px; padding: 0; text-align: center; }

#terminal.macos .title { line-height: 25px; margin-left: -48px; }

#terminal.macos .window-controls { display: block; position: relative; float: left; top: 2px; left: 0; }

#terminal.macos .window-controls > img { padding: 2px; width: 16px; height: 16px; display: block; position: relative; float: left; top: 0; left: 4px; }

#terminal.macos pre { background-color: #fff; border-radius: 0 0 4.5px 4.5px; box-shadow: none; font-family: "Menlo Regular", monospace; color: #000; font-size: 10pt; margin: 0; max-width: 768px; min-height: 400px; padding: 4px 5px; }

#terminal.macos b { color: #5c9fcf; }

#terminal.macos .output { margin-top: -50px; }

#terminal.ubuntu { width: 768px; max-width: 768px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px #3C3B37; margin: 2em auto; border-radius: 4px 4px 0 0; }

#terminal.ubuntu .headerbar { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); background-image: linear-gradient(#4D4C47, #3C3B37); padding: 0; height: 28px; border-radius: 3.5px 3.5px 0 0; }

#terminal.ubuntu .title { display: block; position: relative; color: #DFDBD2; font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 11pt; line-height: 28px; margin-left: 72px; text-shadow: 0 1px rgba(0, 0, 0, 0.1); text-align: left; }

#terminal.ubuntu .window-controls { padding: 0; display: block; position: relative; top: 4px; left: 6px; border-radius: 10px; background-image: linear-gradient(to bottom, #444440, #454540); }

#terminal.ubuntu .window-controls > img { padding: 0; width: 19px; height: 19px; display: block; position: relative; float: left; left: 0; }

#terminal.ubuntu pre { font-family: "Ubuntu Mono", monospace; font-size: 12pt; border-radius: 0 0 4.5px 4.5px; min-height: 400px; padding: 1px; margin: 0; border-radius: 0; box-shadow: none; max-width: 768px; background-color: #2F0A24; color: #FFFFFF; }

#terminal.ubuntu .output { margin-top: -56px; }

.monospace { font-family: "courier-prime", monospace; }

.serif { font-family: "pt-serif", serif; }

.footnote { display: inline-block; font-family: "courier-prime", monospace; font-size: 12px; margin: 8px auto; width: 100%; opacity: 0.7; }

.footnote > a { font: inherit; }

.published { color: #919191; display: block; font-family: "courier-prime", monospace; margin: 16px auto; opacity: 0.8; text-transform: uppercase; width: 100%; }

.published .date { color: #111111; }

.published .author { font: inherit !important; color: #111111 !important; }

.tile { background-color: #fff; border-radius: 7px; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); color: #444; display: inline-block; font-size: 24px; font-weight: 500; height: 96px; line-height: 96px; margin: 8px; outline: none; text-align: center; text-decoration: none; vertical-align: middle; width: 200px; }

.tile.long { height: 48px; line-height: 48px; width: 46%; font-size: 20px; }

.tile > img { display: block; vertical-align: middle; margin: 0 auto; }

.tile:focus, .tile:hover { color: inherit; border-color: transparent; transform: translateY(-4px); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.tile:hover { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 3px 8px 0 rgba(0, 0, 0, 0.1); }

.tile:focus { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(238, 0, 102, 0.3); }

.tile:active { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); transform: translateY(1px); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.tile.logo > svg { height: 48px; width: 48px; margin-top: calc((96px / 2) - (48px / 2)); }

.tile.logo > svg { fill: #fff; }

@media only screen and (max-width: 600px) { .tile { margin: 4px 2px; width: 45%; } .tile > span { font-size: calc(24px * 0.8); line-height: calc(24px * 0.8); width: 100%; } .tile > svg { height: calc(48px * 0.75); margin-top: calc((96px / 2) - ((48px * 0.75) / 2)); } .tile.long { width: 100%; } .tile.long > span { font-size: 20px; margin-top: 12px; } }

table.timetable { background-color: #fff; border-collapse: collapse; border-spacing: 0; border: 1px solid #e1e1e1; font-family: "courier-prime", monospace; font-size: 15px; font-weight: 400; margin: 12px auto; padding: 12px; text-align: left; width: 100%; }

table.timetable > thead > tr th:nth-child(1), table.timetable > thead > tr td:nth-child(1), table.timetable > tbody > tr th:nth-child(1), table.timetable > tbody > tr td:nth-child(1) { width: 20%; }

table.timetable > thead > tr th:nth-child(2), table.timetable > thead > tr td:nth-child(2), table.timetable > tbody > tr th:nth-child(2), table.timetable > tbody > tr td:nth-child(2) { width: 20%; }

table.timetable > thead > tr th:nth-child(3), table.timetable > thead > tr td:nth-child(3), table.timetable > tbody > tr th:nth-child(3), table.timetable > tbody > tr td:nth-child(3) { width: 60%; }

table.timetable.thirds > thead > tr th:nth-child(1), table.timetable.thirds > thead > tr td:nth-child(1), table.timetable.thirds > tbody > tr th:nth-child(1), table.timetable.thirds > tbody > tr td:nth-child(1) { width: 35%; }

table.timetable.thirds > thead > tr th:nth-child(2), table.timetable.thirds > thead > tr td:nth-child(2), table.timetable.thirds > tbody > tr th:nth-child(2), table.timetable.thirds > tbody > tr td:nth-child(2) { width: 20%; }

table.timetable.thirds > thead > tr th:nth-child(3), table.timetable.thirds > thead > tr td:nth-child(3), table.timetable.thirds > tbody > tr th:nth-child(3), table.timetable.thirds > tbody > tr td:nth-child(3) { width: 45%; }

table.timetable.no-time > thead > tr th:nth-child(1), table.timetable.no-time > thead > tr td:nth-child(1), table.timetable.no-time > tbody > tr th:nth-child(1), table.timetable.no-time > tbody > tr td:nth-child(1) { width: 20%; }

table.timetable.no-time > thead > tr th:nth-child(2), table.timetable.no-time > thead > tr td:nth-child(2), table.timetable.no-time > tbody > tr th:nth-child(2), table.timetable.no-time > tbody > tr td:nth-child(2) { width: 80%; }

.top-arrow { border-radius: 7px; display: block; height: 64px; margin: 24px auto; max-width: 640px; pointer: hand; text-align: center; width: 90%; }

.top-arrow > svg { fill: #c7c7c7; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.top-arrow:focus, .top-arrow:hover { background-color: rgba(238, 0, 102, 0.1); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.top-arrow:focus > svg, .top-arrow:hover > svg { fill: #ee0066; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }

.video-wrapper { margin: 2em auto; float: none; clear: both; width: 100%; padding-bottom: 60%; position: relative; height: 0; }

.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

@media only screen and (max-width: 848px) { .extraneous { display: none; } article > img { width: 100%; } }

@media only screen and (max-width: 480px) { input, input[type=text], textarea { width: calc(100% - 12px); } form { padding: 12px; width: calc(100% - 24px); } }

/*# sourceMappingURL=style.css.map */