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

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

body {
  line-height: 1; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

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

img {
  max-width: 100%;
  display: block; }

svg {
  max-width: 100%; }

@font-face {
  font-family: 'FuturaBT-Bold';
  src: url("../fonts/20F162_0_0.eot");
  src: url("../fonts/20F162_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/20F162_0_0.woff") format("woff"), url("../fonts/20F162_0_0.ttf") format("truetype"); }
@font-face {
  font-family: 'AvenirNextPro';
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/268FFD_1_0.eot");
  src: url("../fonts/268FFD_1_0.eot?#iefix") format("embedded-opentype"), url("../fonts/268FFD_1_0.woff") format("woff"), url("../fonts/268FFD_1_0.ttf") format("truetype"); }
@font-face {
  font-family: 'AvenirNextPro';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/268FFD_2_0.eot");
  src: url("../fonts/268FFD_2_0.eot?#iefix") format("embedded-opentype"), url("../fonts/268FFD_2_0.woff") format("woff"), url("../fonts/268FFD_2_0.ttf") format("truetype"); }
@font-face {
  font-family: 'AvenirNextPro';
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/268FFD_3_0.eot");
  src: url("../fonts/268FFD_3_0.eot?#iefix") format("embedded-opentype"), url("../fonts/268FFD_3_0.woff") format("woff"), url("../fonts/268FFD_3_0.ttf") format("truetype"); }
@font-face {
  font-family: 'AvenirNextPro';
  font-weight: 600;
  font-style: normal;
  src: url("268FFD_4_0.eot");
  src: url("../fonts/268FFD_4_0.eot?#iefix") format("embedded-opentype"), url("../fonts/268FFD_4_0.woff") format("woff"), url("../fonts/268FFD_4_0.ttf") format("truetype"); }
html {
  font-size: 62.5%; }

body {
  font-family: AvenirNextPro, serif;
  font-size: 1.9rem;
  line-height: 1.2em;
  color: #323333;
  background-color: #ffffff; }

.kg-embed-card {
  width: 100%;
  display: flex; }

::-moz-selection {
  color: #323333;
  background: #dde0e0;
  text-shadow: none; }

::selection {
  color: #323333;
  background: #dde0e0;
  text-shadow: none; }

h1,
h2,
h3,
h4 {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0;
  font-weight: 700; }
  h1 + p,
  h2 + p,
  h3 + p,
  h4 + p {
    margin-top: 1rem; }

h2 {
  line-height: 1.2em;
  font-size: 2.3rem; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    h2 {
      font-size: 3rem; } }

h3 {
  font-size: 1.9rem; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    h3 {
      font-size: 2.3rem; } }

h4 {
  font-size: 1.9rem; }

a {
  color: #323333; }

p a:hover {
  color: #56768F; }

p + h2, p + h3, p + h4 {
  margin-top: 4rem; }

em, i {
  font-style: italic; }

strong, b {
  font-weight: 700; }

h1 a,
h2 a,
h3 a,
h4 a {
  color: #323333; }

p,
ul,
ol,
dl {
  margin: 2.8rem 0 3.2rem; }

ul, ol {
  padding-left: 2rem; }
  ul li + li, ol li + li {
    margin-top: 1rem; }

ol ol,
ul ul,
ul ol,
ol ul {
  margin: 0.4em 0; }

dl dt {
  float: left;
  width: 180px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  margin-bottom: 1em; }

dl dd {
  margin-left: 200px;
  margin-bottom: 1em; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 0.1rem solid #dde0e0;
  margin: 3.2em 0;
  padding: 0; }

blockquote {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 3rem 0 4.5rem 0;
  padding: .5rem 0 0 1.6em;
  border-left: #b1b3b3 0.2em solid; }

blockquote p {
  margin: 0.8em 0;
  font-style: italic; }

blockquote small {
  display: inline-block;
  margin: 0.8em 0 0.8em 1.5em;
  font-size: 0.9em;
  color: #ccc; }

blockquote small:before {
  content: '\2014 \00A0'; }

blockquote cite {
  font-weight: bold; }

blockquote cite a {
  font-weight: normal; }

mark {
  background-color: #ffc336; }

figcaption {
  font-size: 1.4rem;
  color: #717272;
  text-align: center; }

figure {
  margin-bottom: 3rem; }

pre {
  margin: 2.8rem 0 3.2rem; }

code,
tt {
  padding: 1px 3px;
  font-family: Inconsolata, monospace, sans-serif;
  font-size: 0.85em;
  border: 1px solid #E3EDF3;
  background: #F7FAFB;
  border-radius: 2px;
  position: relative;
  top: -.1rem; }

kbd {
  display: inline-block;
  margin-bottom: 0.4em;
  padding: 1px 8px;
  border: #ccc 1px solid;
  color: #666;
  text-shadow: #fff 0 1px 0;
  font-size: 0.9em;
  font-weight: bold;
  background: #f4f4f4;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset; }

table {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1.6em 0;
  width: 100%;
  max-width: 100%;
  background-color: transparent; }

table th,
table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #efefef; }

table th {
  color: #000; }

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
  border-top: 0; }

table tbody + tbody {
  border-top: 2px solid #efefef; }

table table table {
  background-color: #fff; }

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
  background-color: #f6f6f6; }

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
  background: transparent; }

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

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

.kg-width-wide img {
  max-width: 90rem;
  width: 100%; }

.kg-width-full img {
  max-width: 100vw; }

.kg-width-wide {
  position: relative;
  width: 100vw;
  min-width: 100%;
  margin: 2.8rem calc(50% - 50vw) 3.2rem;
  transform: translateX(calc(50vw - 50%)); }

.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw; }

.kg-bookmark-thumbnail img {
  vertical-align: bottom;
  object-fit: cover;
  width: 100%; }

.kg-bookmark-icon {
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: bottom; }

.kg-bookmark-content {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 50%;
  padding: 20px; }

.kg-bookmark-title {
  font-weight: 600; }

.kg-bookmark-description,
.kg-bookmark-metadata {
  margin-top: 12px; }

.kg-bookmark-container {
  display: flex;
  flex-wrap: wrap;
  color: black;
  text-decoration: none;
  border: 2px solid blue; }

.kg-bookmark-thumbnail {
  flex-basis: 15rem;
  flex-grow: 1; }

.kg-bookmark-author:after {
  content: "•";
  margin: 0 6px; }

.kg-gallery-container {
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  width: 100vw; }

.kg-gallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center; }

.kg-gallery-image img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%; }

.kg-bookmark-publisher {
  overflow: hidden;
  max-width: 240px;
  line-height: 1.5em;
  text-overflow: ellipsis;
  white-space: nowrap; }

.kg-bookmark-card {
  width: 100%;
  background: #ffffff; }

.site-banner {
  padding: 3rem 0 9.5rem;
  text-align: center; }

.banner-subhead {
  font-size: 1.9rem;
  margin: .5rem 0 0;
  padding: 0 2.5rem;
  color: #545D62; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    .banner-subhead {
      font-size: 2.3rem;
      margin: 1rem 0 0; } }

.logo {
  text-decoration: none; }
  .logo::before {
    right: 13%; }
  .logo img {
    width: 3.5rem;
    height: auto;
    margin: 0 auto; }
    @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
      .logo img {
        width: 5rem; } }

.banner-headline {
  font-size: 3rem;
  line-height: 1.1em;
  letter-spacing: -.0085em;
  font-kerning: normal;
  margin-top: 1.5rem;
  font-family: 'FuturaBT-Bold', serif;
  text-transform: uppercase; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    .banner-headline {
      font-size: 4.2rem; } }

.default .site-banner {
  position: relative;
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #E5F6F9, #ffffff);
  color: #323333;
  border-bottom: 0.1rem solid #3D95B2;
  overflow: hidden; }
  .default .site-banner::before, .default .site-banner::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: repeat-x; }
  .default .site-banner::before {
    top: -6rem;
    left: 0;
    background-image: url("../images/clouds.svg");
    background-position: bottom center; }
  .default .site-banner::after {
    background-image: url("../images/skylight-graphs.svg");
    top: 0;
    left: 0;
    background-position: bottom center; }
  .default .site-banner .nameplate::before,
  .default .site-banner .nameplate::after,
  .default .site-banner .logo::before {
    content: '';
    display: block;
    width: 1.4rem;
    height: 16.5rem;
    background-image: url("../images/rocket-ship.svg");
    background-repeat: no-repeat;
    position: absolute;
    bottom: calc(-9.5rem - 4rem); }
    @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
      .default .site-banner .nameplate::before,
      .default .site-banner .nameplate::after,
      .default .site-banner .logo::before {
        bottom: -9.5rem; } }
  .default .site-banner .nameplate {
    position: relative;
    z-index: 2; }
    .default .site-banner .nameplate::before {
      left: 12%; }
      @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
        .default .site-banner .nameplate::before {
          left: 15%; } }
    .default .site-banner .nameplate::after {
      left: calc(12% - 3rem); }
      @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
        .default .site-banner .nameplate::after {
          left: calc(15% - 4rem); } }
  .default .site-banner .button {
    margin-top: 1.5rem; }
  .default .site-banner .secondary-cta {
    display: block;
    font-size: 1.4rem;
    color: #717272;
    margin-top: 2rem; }
    .default .site-banner .secondary-cta a {
      color: #56768F; }
      .default .site-banner .secondary-cta a:hover {
        color: #323333; }

.changelog .site-banner {
  padding-top: 4rem;
  padding-bottom: 4rem; }
.changelog .banner-headline {
  margin-top: 3rem; }
.changelog .logo {
  display: block;
  vertical-align: middle; }
  .changelog .logo img {
    height: 1.6em;
    width: auto; }

.post-template .content {
  overflow: hidden; }
.post-template .learn-more {
  font-size: 1.4rem;
  color: #717272;
  text-decoration: none; }
  .post-template .learn-more::after {
    content: '';
    display: inline-block;
    width: 1.4rem;
    height: 1.2rem;
    background-image: url("../images/stroked-arrow-black.svg");
    background-size: contain;
    margin-left: .7rem;
    position: relative;
    opacity: .5;
    top: .1rem; }
  .post-template .learn-more:hover {
    color: #323333; }
    .post-template .learn-more:hover::after {
      opacity: 1; }
.post-template .post-content {
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto; }
  .post-template .post-content a {
    color: #00ADC4;
    text-decoration: none; }
    .post-template .post-content a:hover {
      text-decoration: underline; }
  .post-template .post-content .post-footer {
    border-top: 0.1rem solid #dde0e0;
    padding-top: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem; }
.post-template .post-header {
  padding: 1.5rem 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    .post-template .post-header {
      padding: 1.5rem 3rem 0; } }
  .post-template .post-header .back-link {
    font-size: 1.4rem;
    text-decoration: none;
    color: #717272; }
    .post-template .post-header .back-link::before {
      content: '';
      display: inline-block;
      width: 1.4rem;
      height: 1.2rem;
      background-image: url("../images/stroked-arrow-black.svg");
      background-size: contain;
      transform: scale(-1);
      margin-right: 1rem;
      position: relative;
      opacity: .5;
      top: .1rem; }
    .post-template .post-header .back-link:hover {
      color: #323333; }
      .post-template .post-header .back-link:hover::before {
        opacity: .8; }
      .post-template .post-header .back-link:hover .back-link-description::after {
        opacity: .7; }
    @media screen and (min-width: 0) and (max-width: 37.9375em) {
      .post-template .post-header .back-link .back-link-description {
        display: none; } }
    .post-template .post-header .back-link .back-link-description::after {
      content: '';
      display: inline-block;
      width: .1rem;
      height: 1.2em;
      background: #717272;
      top: .3rem;
      opacity: .5;
      position: relative;
      margin: 0 1rem; }
    @media screen and (min-width: 0) and (max-width: 27.9375em) {
      .post-template .post-header .back-link .blog-title {
        display: none; } }
  .post-template .post-header .blog-logo {
    position: absolute;
    left: 4rem; }
    @media screen and (min-width: 28em) and (max-width: 99998.9375em) {
      .post-template .post-header .blog-logo {
        left: 50%;
        transform: translateX(-50%); } }
    .post-template .post-header .blog-logo img {
      height: 3rem;
      width: auto; }
.post-template .post-body {
  margin-top: 3rem; }
  @media screen and (min-width: 28em) and (max-width: 99998.9375em) {
    .post-template .post-body {
      margin-top: 5rem; } }
.post-template .post-meta {
  font-size: 1.4rem;
  color: #717272; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    .post-template .post-meta {
      text-align: center; } }
.post-template .post-title {
  font-size: 3rem;
  margin-top: 2rem;
  line-height: 1.3em; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    .post-template .post-title {
      font-size: 4.2rem;
      margin-top: 3rem;
      text-align: center; } }
.post-template .gist table {
  margin: 0;
  font-size: 1.4rem; }
.post-template .gist .line-number {
  min-width: 25px;
  font-size: 1.1rem; }
.post-template .post-content {
  margin-top: 2.5rem;
  line-height: 1.6em; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    .post-template .post-content {
      margin-top: 3.4rem; } }
  .post-template .post-content img {
    height: auto;
    margin: 0 auto;
    padding: 1rem 0 1.5rem; }
  .post-template .post-content .full-img {
    width: 126%;
    max-width: none;
    margin: 0 -13%; }
  .post-template .post-content .tags {
    color: #323333; }
    .post-template .post-content .tags a {
      color: #56768F; }
      .post-template .post-content .tags a:hover {
        color: currentColor;
        text-decoration: none; }
      .post-template .post-content .tags a + a::before {
        content: '|';
        color: #b1b3b3;
        position: relative;
        top: -.1rem;
        margin: 0 .8rem; }
.post-template .author + .author::before {
  content: ' + '; }
.post-template .site-footer {
  border: none; }
.post-template .site-banner {
  background-image: linear-gradient(to top, #E5F6F9, #ffffff);
  margin-top: 2rem; }
  @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
    .post-template .site-banner {
      margin-top: 4rem; } }
  .post-template .site-banner::before {
    top: 0; }
  .post-template .site-banner .secondary-cta {
    padding-bottom: 5rem; }
    @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
      .post-template .site-banner .secondary-cta {
        padding-bottom: 2rem; } }

.home-template .post,
.paged .post,
.tag-template .post,
.changelog .post {
  border-bottom: 0.1rem solid #dde0e0; }
.home-template .post-title,
.paged .post-title,
.tag-template .post-title,
.changelog .post-title {
  font-weight: 700;
  font-size: 2.3rem; }
.home-template .post-text,
.paged .post-text,
.tag-template .post-text,
.changelog .post-text {
  flex-basis: 100%;
  margin-top: 1rem; }
  @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
    .home-template .post-text,
    .paged .post-text,
    .tag-template .post-text,
    .changelog .post-text {
      margin-top: 0;
      flex-basis: calc(100% - 10rem - 4.5rem); } }
.home-template .feature-image,
.paged .feature-image,
.tag-template .feature-image,
.changelog .feature-image {
  margin: 1rem 0 1.5rem;
  position: relative;
  display: inline-block; }
  .home-template .feature-image::after,
  .paged .feature-image::after,
  .tag-template .feature-image::after,
  .changelog .feature-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0.1rem solid #323333;
    opacity: .2;
    box-sizing: border-box; }
  .home-template .feature-image img,
  .paged .feature-image img,
  .tag-template .feature-image img,
  .changelog .feature-image img {
    max-height: 40rem; }
.home-template main,
.paged main,
.tag-template main,
.changelog main {
  margin-top: .5rem; }
  @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
    .home-template main,
    .paged main,
    .tag-template main,
    .changelog main {
      margin-top: 2rem; } }
.home-template time,
.paged time,
.tag-template time,
.changelog time {
  font-size: 1.4rem;
  color: #9EABB3;
  flex-basis: 100%;
  text-align: left; }
  @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
    .home-template time,
    .paged time,
    .tag-template time,
    .changelog time {
      flex-basis: 10rem;
      text-align: right; } }
.home-template article a,
.paged article a,
.tag-template article a,
.changelog article a {
  position: relative;
  text-decoration: none;
  padding: 2.4rem .5rem 2.5rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
    .home-template article a,
    .paged article a,
    .tag-template article a,
    .changelog article a {
      padding: 3.4rem 8.5rem 3.5rem 2rem; } }
  .home-template article a::after,
  .paged article a::after,
  .tag-template article a::after,
  .changelog article a::after {
    opacity: 0;
    position: absolute;
    right: 3.7rem;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    display: none;
    width: 2.2rem;
    height: 1.9rem;
    background: url("../images/stroked-arrow-black.svg") no-repeat;
    transition: opacity 80ms ease-in-out, transform 100ms ease-in-out; }
    @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
      .home-template article a::after,
      .paged article a::after,
      .tag-template article a::after,
      .changelog article a::after {
        display: block; } }
  .home-template article a:hover,
  .paged article a:hover,
  .tag-template article a:hover,
  .changelog article a:hover {
    background-color: #f4f7fa; }
    .home-template article a:hover::after,
    .paged article a:hover::after,
    .tag-template article a:hover::after,
    .changelog article a:hover::after {
      opacity: .85;
      transform: translateX(0.3rem) translateY(-50%); }
.home-template article .post-excerpt,
.paged article .post-excerpt,
.tag-template article .post-excerpt,
.changelog article .post-excerpt {
  margin: .2rem 0 0;
  font-size: 1.9rem;
  line-height: 2.9rem;
  color: #545D62; }
.home-template .post,
.paged .post,
.tag-template .post,
.changelog .post {
  position: relative;
  margin: 0;
  word-break: break-word;
  hyphens: auto;
  width: 100%; }
.home-template .post pre,
.paged .post pre,
.tag-template .post pre,
.changelog .post pre {
  word-break: normal; }

.pagination {
  font-size: 1.4rem;
  padding: 3rem 3rem 4rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
  @media screen and (min-width: 28em) and (max-width: 99998.9375em) {
    .pagination {
      padding: 3rem 3rem 8rem; } }

@media screen and (min-width: 0) and (max-width: 27.9375em) {
  .older-posts,
  .newer-posts {
    flex-basis: 46%;
    margin: 3rem 1% 0; } }

@media screen and (min-width: 28em) and (max-width: 99998.9375em) {
  .older-posts {
    margin-left: auto; } }

.page-number {
  display: inline-block;
  flex-basis: 100%;
  color: #b1b3b3;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); }
  @media screen and (min-width: 0) and (max-width: 27.9375em) {
    .page-number {
      transform: translateX(-50%) translateY(-3.4rem); } }

.newer-posts {
  margin-right: 1%; }
  @media screen and (min-width: 28em) and (max-width: 99998.9375em) {
    .newer-posts {
      margin-right: auto; } }

.tag-header {
  text-align: center;
  margin-top: 5rem; }
  .tag-header span {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: #b1b3b3; }
  .tag-header h1 {
    margin-top: 1rem;
    font-size: 3rem; }
    @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
      .tag-header h1 {
        font-size: 4.2rem; } }

.changelog {
  background-image: linear-gradient(to bottom, #E5F6F9, #ffffff 35rem);
  background-repeat: repeat-x; }
  .changelog .container {
    padding: 0 1rem; }
  .changelog main {
    margin-top: .4rem; }
  .changelog .read-more-link {
    margin-top: 1rem; }
@keyframes spin {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(360deg); } }
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1); }
  50% {
    transform: translate(-50%, -50%) scale(0.5); }
  100% {
    transform: translate(-50%, -50%) scale(1); } }
  .changelog #loading-spinner {
    width: 100%;
    text-align: center; }
    .changelog #loading-spinner span {
      border: 0.1rem dashed #00ADC4;
      display: inline-block;
      width: 5rem;
      height: 5rem;
      position: relative;
      border-radius: 100%;
      animation: spin 4000ms linear infinite; }
      .changelog #loading-spinner span::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.5rem;
        height: 2.5rem;
        display: block;
        border-radius: 100%;
        background: #E5F6F9;
        border: 0.1rem solid #00ADC4;
        content: '';
        transform: translate(-50%, -50%);
        animation: pulse 1500ms infinite; }
  .changelog #load-more-button {
    cursor: pointer;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    display: block;
    text-align: center;
    margin-bottom: 7rem; }
    @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
      .changelog #load-more-button {
        margin-bottom: 10rem; } }
  .changelog #changes {
    list-style: none;
    margin-top: 0;
    padding: 0 .5rem; }
  .changelog .change {
    border-radius: .5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1.5rem 2rem;
    position: relative;
    border: 0.1rem solid #dde0e0;
    background: #ffffff; }
    @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
      .changelog .change {
        padding: 3rem; } }
    @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
      .changelog .change {
        padding: 3rem; } }
    .changelog .change .post-title {
      font-size: 1.9rem; }
      @media screen and (min-width: 38em) and (max-width: 99998.9375em) {
        .changelog .change .post-title {
          font-size: 2.3rem; } }
    .changelog .change + .change {
      margin-top: 1.5rem; }
    .changelog .change figure {
      max-width: 56rem;
      position: relative; }
      .changelog .change figure::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0.1rem solid #323333;
        opacity: .2;
        box-sizing: border-box; }
  .changelog .permalink {
    text-decoration: none; }
    .changelog .permalink:hover {
      color: #545D62; }
  .changelog .post-text {
    padding-right: 2rem; }
    .changelog .post-text p {
      margin: 0;
      line-height: 1.5; }
      .changelog .post-text p a {
        color: #00ADC4; }
  .changelog .post-body {
    margin-top: .5rem; }
  .changelog figure {
    margin-top: 1.5rem;
    margin-bottom: 2rem; }

.changelog .site-footer,
.changelog-post .site-footer {
  background: none;
  border: none;
  padding: 1rem 0 3rem; }

.changelog-post .post-header .back-link .back-link-description::after {
  display: none; }
.changelog-post .site-footer {
  padding-top: 5rem; }

.site-footer {
  position: relative;
  padding: 3rem 0;
  border-top: #dde0e0 1px solid;
  font-size: 1.4rem;
  line-height: 1.4em;
  text-align: center;
  background: #f4f7fa; }
  .site-footer a {
    color: currentColor;
    text-decoration: none; }
  .site-footer .copyright {
    margin: 0;
    font-weight: 700;
    color: #545D62; }
    .site-footer .copyright a:hover {
      color: #56768F; }
  .site-footer .powered-by {
    margin: .3rem 0 0;
    color: #b1b3b3; }
    .site-footer .powered-by a:hover {
      color: #717272; }
  .site-footer .subscribe {
    display: inline-block;
    margin-top: 1rem; }
    .site-footer .subscribe path {
      fill: #b1b3b3; }
    .site-footer .subscribe:hover path {
      fill: #717272; }

.pagination, .container {
  width: 100%;
  max-width: 92rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin: 0 auto;
  position: relative; }
  @media screen and (min-width: 50em) and (max-width: 99998.9375em) {
    .pagination, .container {
      padding-left: 3rem;
      padding-right: 3rem; } }

.older-posts,
.newer-posts, .button {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.4rem;
  border-radius: .4rem;
  padding: .9rem 1.5rem;
  display: inline-block; }

.older-posts,
.newer-posts, .button.secondary {
  border: solid 0.1rem #dde0e0;
  color: #323333; }
  .older-posts:hover,
  .newer-posts:hover, .button.secondary:hover {
    border-color: #b1b3b3; }

.button.primary {
  background-color: #56768F;
  color: #ffffff; }
  .button.primary:hover {
    background-color: #00ADC4; }

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