@charset "UTF-8";
/*
DESCRIPTION:Stylesheet for snwh.org.
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");
@font-face { font-family: 'overpass-mono'; src: url("/fonts/overpass-mono-light.eot"); src: url("/fonts/overpass-mono-light.eot?#iefix") format("embedded-opentype"), url("/fonts/overpass-mono-light.woff2") format("woff2"), url("/fonts/overpass-mono-light.woff") format("woff"), url("/fonts/overpass-mono-light.ttf") format("truetype"); font-weight: 300; font-style: normal; }

@font-face { font-family: 'overpass-mono'; src: url("/fonts/overpass-mono-regular.eot"); src: url("/fonts/overpass-mono-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/overpass-mono-regular.woff2") format("woff2"), url("/fonts/overpass-mono-regular.woff") format("woff"), url("/fonts/overpass-mono-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; }

@font-face { font-family: 'overpass-mono'; src: url("/fonts/overpass-mono-semibold.eot"); src: url("/fonts/overpass-mono-semibold.eot?#iefix") format("embedded-opentype"), url("/fonts/overpass-mono-semibold.woff2") format("woff2"), url("/fonts/overpass-mono-semibold.woff") format("woff"), url("/fonts/overpass-mono-semibold.ttf") format("truetype"); font-weight: 500; font-style: normal; }

@font-face { font-family: 'overpass-mono'; src: url("/fonts/overpass-mono-bold.eot"); src: url("/fonts/overpass-mono-bold.eot?#iefix") format("embedded-opentype"), url("/fonts/overpass-mono-bold.woff2") format("woff2"), url("/fonts/overpass-mono-bold.woff") format("woff"), url("/fonts/overpass-mono-bold.ttf") format("truetype"); font-weight: 600; font-style: normal; }

nav input[type=search]:focus, nav input[type=search] { background-color: transparent; border: none; border-radius: 0; box-shadow: none; outline: none; }

label, a, code, i, mark, strong, b, h1, h2, h3, h4, h5, h6, div, p, body, input[type="search"], input[type=number], input[type=text], fieldset, textarea, pre { color: #333; font-family: "source-sans-pro", sans-serif; font-kerning: initial; font-size: 16px; 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(51, 51, 51, 0.5); vertical-align: baseline; }

img { image-rendering: optimizequality; }

input[type="search"], input[type=number], input[type=text], fieldset, textarea, pre { background-color: #fff; border-radius: 4px; border: 1px solid #dee2e5; box-shadow: none; line-height: 20px; 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: #333; border: 1px solid #d0d5da; box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2); }

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

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

p { display: block; line-height: 22px; }

div { line-height: 22px; }

h1, h2, h3, h4, h5, h6 { font-family: "overpass-mono", monospace; color: #666666; }

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { font-weight: bold !important; font: inherit; }

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

h1 { font-size: 40px; line-height: 52px; }

h2 { font-size: 32px; line-height: 44px; }

h3 { font-size: 24px; line-height: 36px; }

h4 { font-size: 20px; line-height: 36px; }

h5 { font-size: 18px; line-height: 32px; }

h6 { font-size: 16px; line-height: 24px; }

b { font-size: 16px; font-weight: 700; }

strong { font-style: italic; font-weight: 700; }

mark { color: #fff; background-color: rgba(0, 171, 205, 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: "overpass-mono", monospace; font-size: 15px; line-height: 15px; font-weight: 400; }

code { background-color: #fff; padding: 2px; border: 1px solid #dee2e5; border-radius: 4px; font-size: 14px; }

pre { font-family: "overpass-mono", monospace; font-size: 14px; 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: 14px; }

big { font-size: 24px; }

blockquote > p, blockquote { width: 90%; margin: 0 5%; font-style: italic; color: #666666; font-size: 19px; line-height: 24px; }

blockquote > p a, blockquote a { font: inherit !important; }

blockquote > p:before, blockquote:before { content: '“'; opacity: 0.4; padding-right: 4px; }

blockquote > p:after, blockquote:after { content: '”'; opacity: 0.4; padding-left: 4px; }

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

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

a:focus { color: #ff5432; }

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

a:visited { opacity: 0.8; }

caption { margin: 4px 0; }

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

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

ul { list-style: none; }

ul > li::before { content: "•"; color: #666666; display: inline-block; width: 12px; margin-left: -12px; }

ol { list-style: none; }

ol > li { counter-increment: li; }

ol > li::before { color: #666666; content: counter(li) "."; display: inline-block; font-size: 16px; line-height: 0; margin-left: -16px; position: relative; text-align: left; vertical-align: baseline; width: 16px; }

dl dt { font-weight: 500; }

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

dl dd::before { color: #666666; content: counter(li) "."; display: inline-block; font-size: 16px; 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 #dee2e5; }

img { vertical-align: top; border: none; display: block; max-width: 100%; }

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

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

form { background-color: #fff; border: 1px solid #dee2e5; display: block; font-size: 16px; margin: 0; outline: none; padding: 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: #4d4d4d; font-size: 14px; 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 #dee2e5; background-color: #fff; font-size: 16px; outline: none; margin: 12px 0; }

select option { padding: 4px 6px; }

section { margin: 48px 0; }

article { margin: 12px 0; }

article img { width: 720px; margin: 32px auto; border-radius: 7px; }

input[type=reset], input[type=submit], .suggested, button, .button { color: #fff; font-family: "overpass-mono", monospace; font-size: 14px; font-weight: bold; line-height: 35px; text-align: center; text-decoration: none; text-shadow: none; }

input[type=reset], input[type=submit], .suggested, button, .button { -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; background-color: #00c0e7; border: none; display: inline-block; cursor: pointer; height: 32px; margin: 12px 6px; min-width: 224px; outline: none; overflow: visible; }

input[type=reset] svg, input[type=submit] svg, .suggested svg, button svg, .button svg { display: inline-block; float: left; margin-top: 8px; margin-right: 12px; margin-left: 12px; }

input[type=reset] svg > g, input[type=submit] svg > g, .suggested svg > g, button svg > g, input[type=reset] svg > path, input[type=submit] svg > path, .suggested svg > path, button svg > path, .button svg > g, .button svg > path { fill: #fff; }

input[type=reset]:hover, input[type=submit]:hover, .suggested:hover, button:hover, .button:hover { background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)); background-color: #00c0e7; }

input[type=reset]:focus, input[type=submit]:focus, .suggested:focus, button:focus, .button:focus { background-color: #00c0e7; color: #fff; }

input[type=reset]:active, input[type=submit]:active, .suggested:active, button:active, .button:active, .button:active:hover { background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); background-color: #00adcf; color: #fff; }

input.center[type=reset], input.center[type=submit], .center.suggested, button.center, .button.center { width: 224px; margin: 24px auto; }

button { display: block; }

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

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

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

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

input[type=submit] { background-color: #7d6fff; color: #fff; display: block; }

input[type=submit]:active, input[type=submit]:active:hover { background-color: #7063e6; color: #fff; }

input[type=submit]:focus { background-color: #7d6fff; color: #fff; }

input[type=submit]:hover { background-color: #7d6fff; color: #fff; }

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

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

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

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

@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%; } }

footer { padding-top: 32px; min-height: 96px; text-align: center; width: 100%; border-top: 1px solid #dee2e5; }

footer a, footer span { font-family: "overpass-mono", monospace; font-size: 14px; }

footer span { color: #999999; display: inline-block; }

footer span:before { content: "•"; padding: 0 1em; }

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

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

footer a:hover { color: #999999; }

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

header { max-height: 80px; background-color: #00abcd; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); padding: 32px 0; }

header a, header span { display: inline-block; color: #fff; font-family: "overpass-mono", monospace; vertical-align: middle; white-space: wrap; overflow: hidden; text-overflow: ellipsis; }

header span.title { font-size: 24px; line-height: 28px; }

header span.subtitle { font-size: 16px; width: calc(100% - 24px); display: inline-block; margin-top: 16px; opacity: 0.8; }

header span.subtitle > a { font-size: inherit; }

header a.arrow { font-size: 26px; text-decoration: none; margin-right: 16px; color: inherit; opacity: 0.6; }

header a.arrow:hover, header a.arrow:focus { color: inherit; opacity: 1.0; text-decoration: none; }

header a.arrow:active, header a.arrow:active:hover { color: black; opacity: 0.4; }

header a:active { color: rgba(255, 255, 255, 0.5); }

nav { padding: 0; z-index: 10; width: 100%; background-color: #f5f6f7; height: 48px; border-bottom: 1px dashed #dee2e5; }

nav.bottom { border-top: 1px dashed #dee2e5; border-bottom: none; }

nav svg { fill: #00abcd; height: 16px; width: 16px; padding: 16px 0; }

nav a, nav span { display: inline-block; font-family: "overpass-mono", monospace; font-size: 16px; font-weight: 300; line-height: 48px; max-height: 48px; overflow: hidden; padding: 0 16px; text-decoration: none; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }

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

nav a { text-decoration: 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; }

nav a:focus, nav a:hover { background-color: #e7e9ec; color: #404040; -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; }

nav a:focus > svg, nav a:hover > svg { fill: #404040; -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; }

nav a.prev, nav a.next { opacity: 1; }

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

nav input[type=search] { color: #404040; display: inline-block; font-family: "source-sans-pro", sans-serif; font-size: 20px; line-height: 28px; font-weight: 300; height: 24px; overflow: hidden; padding: calc(48px / 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 { background-color: #fff; border-collapse: collapse; border-spacing: 0; border: 1px solid #dee2e5; font-family: "overpass-mono", monospace; font-size: 16px; 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 #dee2e5; border-right: 1px solid #dee2e5; vertical-align: top; padding: 8px; }

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 th:nth-child(1), table > tbody > tr td:nth-child(1), table > thead > tr th:nth-child(1), table > thead > tr td:nth-child(1) { width: 25%; }

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

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

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

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

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

.left { float: left; }

.right { float: right; }

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

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

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

.cards { display: inline-block; margin: 12px auto; width: 100%; text-align: center; }

.cards a.card { background-color: #fff; border-radius: 5px; color: #333; display: inline-block; font-family: "overpass-mono", monospace; font-size: 18px; font-weight: bold; margin: 4px 0.5%; padding: calc(72px / 2) 0; text-align: center; text-decoration: none; text-shadow: none; width: 23%; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); }

.cards a.card span { width: 100%; height: 100%; text-align: center; }

.cards a.card > svg { display: block; margin: 0 auto; margin-top: 12px; fill: #0070ba; }

.cards a.card > svg > g { fill: #0070ba; }

.cards a.card:active, .cards a.card:active:hover { box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

.cards a.card:focus { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px #00abcd; }

.cards a.card:hover { box-shadow: 0 1px 2px 0 #00abcd, 0 0 0 1px #00abcd; }

@media only screen and (max-width: 1000px) { .cards > a.card { width: calc(72px + 96px); } }

@media only screen and (max-width: 400px) { .cards > a.card { width: calc(72px + 48px); } }

.carousel { width: 100%; height: auto; margin: 2em auto; position: relative; text-align: center; }

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

.carousel .carousel-inner > .item { width: 90%; margin: 0 5%; position: relative; display: none; -webkit-transition: all 400ms ease-out; -moz-transition: all 400ms ease-out; -ms-transition: all 400ms ease-out; -o-transition: all 400ms ease-out; transition: all 400ms ease-out; }

.carousel .carousel-inner > .item > img, .carousel .carousel-inner > .item > a > img { margin: 0 auto; display: block; }

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

.carousel .carousel-inner > .item.active { left: 0; }

.carousel .carousel-inner > .item.active.left { left: -100%; }

.carousel .carousel-inner > .item.active.right { left: 100%; }

.carousel .carousel-inner > .item.next { position: absolute; left: 100%; }

.carousel .carousel-inner > .item.next.left { left: 0; }

.carousel .carousel-inner > .item.prev { position: absolute; left: -100%; }

.carousel .carousel-inner > .item.prev.right { left: 0; }

.carousel .carousel-control { position: absolute; top: 25%; opacity: 0.6; display: inline-block; padding: 0.5em; border-radius: 8px; }

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

.carousel .carousel-control:focus, .carousel .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 .carousel-control:focus > svg, .carousel .carousel-control:active > svg { fill: black; }

.carousel .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 .carousel-control:hover > svg { fill: #00abcd; }

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

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

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

@media only screen and (max-width: 848px) { .carousel { width: 90%; } }

.col { vertical-align: top; display: inline-block; margin: 12px; }

.col.half { width: calc(50% - 12px*2); display: inline-block; }

.col.third { width: calc(33% - 12px*2); }

.col.two-thirds { width: calc(66% - 12px*2); }

.col.quarter { float: left; width: calc(25% - 12px*2); }

@media only screen and (max-width: 720px) { .col.third, .col.half, .col.quarter, .col.two-thirds, .col.third { display: block; width: 100%; float: none; margin: 12px 0; } .col.third.left, .col.third.right, .col.half.left, .col.half.right, .col.quarter.left, .col.quarter.right, .col.two-thirds.left, .col.two-thirds.right, .col.third.left, .col.third.right { float: none; } }

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

.dropdown > a { color: #333; display: block; font-size: 16px; 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; }

.grid-item { background-color: #fff; border-radius: 4px; box-shadow: 0 0 0 1px #dee2e5; display: inline-block; height: calc(288px + 48px); margin: 24px; padding: 12px; text-decoration: none; width: 344px; vertical-align: top; -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; }

.grid-item:focus, .grid-item:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 0 1px 1px rgba(0, 171, 205, 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; }

.grid-item:focus span, .grid-item:hover span { text-decoration: underline; }

.grid-item:active, .grid-item: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(0, 171, 205, 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; }

.grid-item img { border-radius: 4px; }

.grid-item span { display: inline-block; color: gray; font-family: "overpass-mono", monospace; font-size: 14px; font-weight: 500; max-width: 344px; letter-spacing: 4px; text-align: center; text-transform: uppercase; margin-top: 24px; text-overflow: ellipsis; white-space: nowrap; }

.grid-spacer { margin: 36px auto 35px auto; display: none; }

.row.grid-container { padding: 3em 0; width: calc(744px + 96px); }

@media only screen and (max-width: 848px) { .row.grid-container { width: 100%; margin: 0; } }

@media only screen and (max-width: 400px) { .row.grid-container { padding-bottom: 0; } .grid-item { border-radius: 0; box-shadow: none; background-color: #f5f6f7; height: 288px; width: 344px; margin: 0; padding: 0; } .grid-item:focus, .grid-item:hover { box-shadow: none; background-color: #f5f6f7; } .grid-item span { margin-top: 24px; } .grid-spacer { display: inline-block; } }

@media only screen and (max-width: 344px) { .row.grid-container { padding-bottom: 0; } .grid-item { border-radius: 0; box-shadow: none; background-color: #f5f6f7; width: 100%; margin: -1em; padding: 0; } .grid-item:focus, .grid-item:hover { box-shadow: none; background-color: #f5f6f7; } .grid-item span { margin-top: 24px; } .grid-spacer { display: inline-block; } }

.hidden, .invisible { display: none; }

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

.infobar { background-color: #fff; border-radius: 5px; color: #333; display: inline-block; font-family: "overpass-mono", monospace; font-size: 14px; margin: 12px auto; padding: 6px 2%; text-align: center; width: 96%; z-index: 10; box-shadow: inset 0 0 0 1px #dee2e5; }

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

.infobar span { display: block; width: 94%; margin: 0 3%; }

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

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

.infobar.error { color: #ff6655; }

.infobar.info { color: #6655ff; }

.infobar.warning { color: #ffbb55; }

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

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

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

.infobar.coloured.info { background-color: #6655ff; }

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

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

@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: 0 auto; width: 744px; }

.row.wide { width: 944px; }

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

::selection { background-color: #00abcd; color: #fff; }

::-moz-selection { background-color: #00abcd; color: #fff; }

::-webkit-selection { background-color: #00abcd; color: #fff; }

.separator { display: inline-block; width: 100%; text-align: center; font-size: 125%; color: #d9dde0; line-height: 32px; height: 32px; }

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

ul.supporters-list { margin: 12px 0; padding: 0; width: 100%; text-align: center; list-style: none; }

ul.supporters-list .supporter { padding: 4px 0; width: calc(50% - 24px); display: inline-block; background-color: #fff; border: 1px solid #dee2e5; border-radius: 4px; font-family: "overpass-mono", monospace; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.7); font-size: 14px; margin: 4px; text-align: center; }

ul.supporters-list .supporter:before { content: ""; }

ul.supporters-list .supporter.active { border: 1px solid #dee2e5; }

ul.supporters-list .supporter.active:after { content: "♥"; color: #ff2233; margin-left: 6px; }

ul.supporters-list .supporter.former { opacity: 0.7; }

ul.supporters-list .supporter.former:after { content: "♡"; color: #333; margin-left: 6px; }

ul.supporters-list .supporter.follower { display: none; opacity: 0.7; border: 1px solid #fff; }

@media only screen and (max-width: 600px) { ul.supporters-list > li.supporter { width: calc(100% - 24px); } }

.switch .switch-trough { font-weight: 700; font-size: 12px; line-height: 25px; text-transform: uppercase; }

.switch { background-color: transparent; border-radius: 12px; cursor: pointer; display: inline-block; height: 24px; margin: 6px; padding: 3px; position: relative; vertical-align: top; width: 64px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.switch.no-label { width: 44px; }

.switch.no-label > .switch-input:checked ~ .switch-handle { left: 24px; }

.switch.no-label > .switch-trough { font-size: 0; }

.switch .switch-input { position: absolute; top: 0; left: 0; opacity: 0; }

.switch .switch-input:focus ~ .switch-handle { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 0 2px 0 #00abcd; }

.switch .switch-input:checked ~ .switch-trough { background: #00abcd; }

.switch .switch-input:checked ~ .switch-trough:before { opacity: 0; }

.switch .switch-input:checked ~ .switch-trough:after { opacity: 1; }

.switch .switch-input:checked ~ .switch-handle { left: 44px; }

.switch .switch-trough { background: #d9dde0; border-radius: inherit; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); display: block; height: inherit; position: relative; -webkit-transition: 0.15s ease-out; -moz-transition: 0.15s ease-out; -o-transition: 0.15s ease-out; transition: 0.15s ease-out; -webkit-transition-property: opacity background; -moz-transition-property: opacity background; -o-transition-property: opacity background; transition-property: opacity background; }

.switch .switch-trough:before, .switch .switch-trough:after { position: absolute; top: 50%; margin-top: -6px; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit; }

.switch .switch-trough:before { content: attr(data-off); right: 10px; color: #666666; text-shadow: 0 1px rgba(255, 255, 255, 0.5); }

.switch .switch-trough:after { content: attr(data-on); left: 10px; color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.2); opacity: 0; }

.switch .switch-handle { position: absolute; padding: 0; top: 4px; left: 4px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); -webkit-transition: left 0.15s ease-out; -moz-transition: left 0.15s ease-out; -o-transition: left 0.15s ease-out; transition: left 0.15s ease-out; }

ul.switch-group { margin: 0; padding: 0; list-style: none; border: 1px solid #dee2e5; border-radius: 3px; background-color: #fff; }

ul.switch-group > li { width: calc(100% - 12px); display: inline-block; padding: 0 6px; border-bottom: 1px solid #dee2e5; }

ul.switch-group > li:last-child { border: none; }

ul.switch-group > li:before { content: none; }

ul.switch-group > li > label { display: inline-block; line-height: 36px; vertical-align: middle; }

ul.switch-group > li > .switch-label { padding: 0 6px; }

ul.switch-group > li > .switch { float: right; }

label.switch-label { font-family: "overpass-mono", monospace; color: #666666; font-size: 15px; }

@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; }

.footnote { color: #595959; display: block; float: right; font-family: "overpass-mono", monospace; font-size: 12px; margin: 8px auto; text-align: right; width: 100%; }

.published { color: gray; display: block; font-family: "overpass-mono", monospace; margin: 16px auto; opacity: 0.8; text-transform: uppercase; width: 100%; }

.published .date { color: black; }

.published .author { color: black; }

.monospace { font-family: "overpass-mono", monospace; }

pre > span.comment { opacity: 0.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

.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: #333; 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(0, 171, 205, 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; } }

.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) { 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 */