/* main.css autogenerated from main.scss */
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
html, button, input, select, textarea { color: #222; }

html { font-size: 1em; line-height: 1.65; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

audio, canvas, img, video { vertical-align: middle; }

fieldset { border: 0; margin: 0; padding: 0; }

textarea { resize: vertical; }

.browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ========================================================================== Colours ========================================================================== */
body { background-color: #fff; }

article { color: #333; }
article a { color: #2586d1; text-decoration: none; border-bottom: 1px dotted #b3b3b3; }
article a:hover { text-decoration: none; border-bottom: 1px solid #b3b3b3; }
article a:visited { color: #4a9edf; }
article h2 a, article h2 :hover, article h2 a:visited { color: #333; text-decoration: none; border-bottom: none; }
article h2 a:hover { color: #333; text-decoration: underline; }

/* ========================================================================== Structure ========================================================================== */
.header-container { background: #fff; border-top: 10px solid #5F6977; }

.main-container { width: 90%; margin: 0 5%; }

.shameless-plug-container { width: 100%; margin: 0 0 1em 0; background-color: #f1f2f3; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }

/* ================ Navigation menu ================ */
.site-nav { margin-top: 10px; padding-top: 2em; }

.blog-nav { margin-bottom: 10px; padding-bottom: 2em; }

header.site-nav nav, header.blog-nav nav { margin: auto; text-align: center; width: 100%; }
header.site-nav nav ul li, header.blog-nav nav ul li { display: inline; }
header.site-nav nav ul, header.blog-nav nav ul { margin: 0; padding: 0; }
header.site-nav nav li.nav-separator, header.blog-nav nav li.nav-separator { color: #ccc; }
header.site-nav nav a, header.blog-nav nav a { padding: 0 1em; text-align: center; text-decoration: none; color: #4e4e4e; }
header.site-nav nav a:hover, header.blog-nav nav a:hover { text-decoration: underline; color: #020202; }

/* ============== Main content ============== */
.main { padding: 30px 0; margin: 0 auto 0 auto; width: 100%; }

.site-footer-container { color: #fff; background-color: #5F6977; text-align: center; }
.site-footer-container footer { padding: 1em 0 0.5em 0; font-size: 60%; line-height: 1.15; color: #d9d9d9; }

/* ========================================================================== Custom styles ========================================================================== */
/* ==================== Typography ==================== */
@font-face { font-family: "Charter"; src: local("Charter-Roman"), url("fonts/Charter/regular.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Charter"; src: local("Charter-Bold"), url("fonts/Charter/bold.woff") format("woff"); font-weight: bold; font-style: normal; }
@font-face { font-family: "Charter"; src: local("Charter-Italic"), url("fonts/Charter/italic.woff") format("woff"); font-weight: normal; font-style: italic; }
@font-face { font-family: "Fira Sans"; src: local("Fira Sans OT Light"), url("//brick.a.ssl.fastly.net/fonts/firasans/300.woff") format("woff"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: local("Fira Sans OT"), url("//brick.a.ssl.fastly.net/fonts/firasans/400.woff") format("woff"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Fira Sans"; src: local("Fira Sans OT Medium"), url("//brick.a.ssl.fastly.net/fonts/firasans/500.woff") format("woff"); font-weight: 500; font-style: normal; }
@font-face { font-family: "Inconsolata"; src: local("Inconsolata"), url("//brick.a.ssl.fastly.net/fonts/inconsolata/500.woff") format("woff"); font-weight: 500; font-style: normal; }
body { font-family: "Charter", "Georgia", serif; }

h1, h2, h3, h4, h5, h6 { font-family: "Fira Sans", "Verdana", sans-serif; line-height: 1.25; text-rendering: optimizeLegibility; }

h1 { font-size: 2.2em; font-weight: 400; }

h2 { font-size: 1.33333 em; font-weight: 300; }

h3 { margin-top: 2em; font-size: 1.33333 em; font-weight: 500; }

h4 { margin-top: 1.5em; font-size: 1.15em; font-weight: 300; }

h5, h6 { font-size: 0.9em; font-weight: 300; }

pre, code { font-family: "Inconsolata", "Courier New", monospace; }

nav { font-family: "Fira Sans", "Verdana", sans-serif; }
nav ul li { font-size: 1.0em; font-weight: 400; line-height: 2; }
nav h3 { font-size: 1.0em; font-weight: 300; text-transform: uppercase; }

footer { font-family: "Fira Sans", "Verdana", sans-serif; font-weight: 300; }

/* ==================== Post or Page ==================== */
article h1 { margin-bottom: 0.5rem; }
article h2 { margin-top: 0em; text-transform: uppercase; }

section { margin: 0 0 3em 0; }
section h2 { text-transform: none; font-weight: 300; border-bottom: 1px solid #ccc; }
section h3 { font-weight: 500; }

span.post-date { font-family: "Fira Sans", "Verdana", sans-serif; font-weight: 300; font-size: 110%; color: #979797; margin: 0; }

article img { max-width: 100%; height: auto; border-width: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; }
article figure { text-align: center; margin-bottom: 2.5em; }
article figcaption { display: block; font-family: "Fira Sans", "Verdana", sans-serif; font-weight: 300; font-size: 80%; margin: 1em 0 0 0; border-bottom: 1px dotted #ccc; }
article figcaption a, article figcaption a:hover, article figcaption a:visited { border-bottom: none; }

blockquote { margin-left: 0; padding-left: 1em; border-left: 10px solid #ccc; color: #6e6e6e; }

code, tt { margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px; }

pre { background-color: #f8f8f8; border: 1px solid #cccccc; overflow: auto; padding: 6px 10px; border-radius: 3px; }
pre code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; word-wrap: normal; }

figure pre { background-color: #f8f8f8; border: 1px solid #cccccc; overflow: auto; padding: 6px 10px; border-radius: 3px; text-align: left; /* Undo what figure has done */ width: 83.33%; /* Undo what figure has done */ margin-left: 8.33%; /* Undo what figure has done */ }
figure pre code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; word-wrap: normal; }

.post-postscript, .post-readthisnext, .app-legal-footer { border-top: 1px dotted #ccc; font-family: "Fira Sans", "Verdana", sans-serif; font-weight: 300; font-size: 85%; }

.shameless-plug { font-family: "Fira Sans", "Verdana", sans-serif; font-size: 80%; margin: -0.5em 0; }

.get-notified input { border-color: #000; }
.get-notified button { border-color: #4a9edf; border-width: 1px; background-color: #fff; color: #4a9edf; font-weight: 300; }
.get-notified button:active { color: #e4e4e4; }

.centered-image { margin: 30px 0 10px 0; text-align: center; }

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

.tight-lines { line-height: 110%; }
.tight-lines a { border-bottom: none; }
.tight-lines a:hover { border-bottom: none; }

.column-container-outer { clear: left; float: left; width: 100%; overflow: hidden; }

.column-container-inner { float: left; width: 100%; right: 50%; position: relative; }

.left-column { float: left; width: 50%; left: 50%; position: relative; overflow: hidden; }

.right-column { float: left; width: 50%; left: 50%; position: relative; overflow: hidden; }

.column { margin: 0.5em; }

.end-of-column { clear: both; float: left; width: 100%; }

.productlogo { text-align: center; width: 100%; margin: 20px 0 5px 0; }

.huge { font-size: 300%; }

.center { text-align: center; }

.around-app-store-icon { font-family: "Fira Sans", "Verdana", sans-serif; font-size: 80%; font-weight: 300; line-height: 125%; margin: 0.2em 0 1em 0; }
.around-app-store-icon .app-platform { color: #5F6977; font-size: 105%; font-weight: 400; }

/* ==================== Post index page ==================== */
.post-index-container { margin-bottom: 3em; }

aside.roop-intro { font-family: "Fira Sans", "Verdana", sans-serif; font-weight: 300; font-size: 115%; color: #a1a1a1; margin: 1.5em 0 2em 0; }

.post-index-header h1 { font-size: 1.5em; font-weight: 500; color: #333; margin: 0 0 2em 0; border-bottom: 1px solid #ccc; }
.post-index-header h2 { font-size: 1.8em; font-weight: 300; color: #333; margin: 2em 0 0 0; border-bottom: 1px solid #ccc; }

.post-index { color: #333; }
.post-index h1 { font-size: 1.2em; font-weight: 500; color: #4e4e4e; margin-bottom: 0; }
.post-index a, .post-index a:visited { color: inherit; text-decoration: none; }
.post-index a:hover { color: #2586d1; text-decoration: none; }
.post-index p { margin-top: 0.5em; }

form { margin: 0.5em 0 -1em 0; text-align: center; }
form input { border: 1px solid #ccc; border-radius: 5px; background-color: white; height: 100%; margin-right: 0; outline: none; font-family: "Fira Sans", "Verdana", sans-serif; font-size: 1em; height: 2em; text-align: center; vertical-align: center; min-width: 250px; }
form input:focus { outline: none; }
form button { border: 1px solid #5F6977; border-radius: 5px; background-color: #fff; color: #5F6977; height: 100%; margin-left: 0; outline: none; font-family: "Fira Sans", "Verdana", sans-serif; font-size: 1.1em; padding: 5px 20px 5px 20px; text-align: center; vertical-align: center; font-weight: 300; }
form button:focus { outline: none; }

/* ========================================================================== Media Queries ========================================================================== */
@media only screen and (min-width: 720px) { .main { width: 85%; max-width: 48em; }
  .main article, .post-index-container { margin: 1em auto 0 auto; width: 82%; }
  .shameless-plug { margin: 0 auto 0 auto; width: 82%; }
  .shameless-plug .center { text-align: center; }
  .shameless-plug form p { width: 80%; margin-left: auto; margin-right: auto; }
  html { font-size: 112.5%; }
  figure { width: 120%; margin-left: -10%; }
  figure figcaption { width: 83.3333%; margin: 1em 8.3333% 0 8.3333%; } }
/* ========================================================================== Helper classes ========================================================================== */
.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }

.ir:before { content: ""; display: block; width: 0; height: 150%; }

.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

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

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

.oldie nav a { margin: 0 0.7%; }

.ie7 .title { padding-top: 20px; }

/* ========================================================================== Print styles ========================================================================== */
@media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }