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

body {
  margin: 0; }

article,
aside,
footer,
header,
nav,
section {
  display: block; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

figcaption,
figure,
main {
  display: block; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

pre {
  font-family: monospace, monospace;
  font-size: 1em; }

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }

a:active,
a:hover {
  outline-width: 0; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

b,
strong {
  font-weight: inherit; }

b,
strong {
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #ff0;
  color: #000; }

small {
  font-size: 80%; }

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

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

audio,
video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none; }

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

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html [type="button"]
[type="reset"]
[type="submit"] {
  -webkit-appearance: button; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

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

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

details,
menu {
  display: block; }

summary {
  display: list-item; }

canvas {
  display: inline-block; }

template {
  display: none; }

[hidden] {
  display: none; }

/**
 * Set up here the general appearance of the theme.
 */
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

h1, h2, h3, h4 {
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-style: normal; }

.flex-grid article {
  opacity: 0; }

.flex-grid article.shown {
  opacity: 1; }

.flex-grid article.animate {
  animation: moveUp 0.65s;
  opacity: 1; }

@keyframes moveUp {
  from {
    transform: translateY(200px); }
  to {
    transform: translateY(0); } }
@keyframes shake {
  2%,
  18% {
    transform: translate3d(-1px, 0, 0); }
  4%,
  16% {
    transform: translate3d(2px, 0, 0); }
  6%,
  10%,
  14% {
    transform: translate3d(-4px, 0, 0); }
  8%,
  12% {
    transform: translate3d(4px, 0, 0); } }
@keyframes zoomIn {
  50% {
    transform: translate(-50%, -50%) scale(1.1); } }
@keyframes pulse {
  0% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.icons-home {
  text-align: center; }
  .icons-home a {
    display: inline-block;
    padding: 0.9375rem;
    margin: 0.125rem;
    border-radius: 50%;
    border: 0.125rem solid #ffffff;
    line-height: 0;
    transition: all 0.7s; }
    .icons-home a .icon {
      fill: #ffffff;
      width: 18px;
      height: 18px; }
      @media (min-width: 37.5rem) {
        .icons-home a .icon {
          width: 30px;
          height: 30px; } }
    .icons-home a:hover {
      background: #ffffff; }
      .icons-home a:hover .icon {
        fill: #333333; }

.down {
  position: absolute;
  bottom: 50px;
  width: 100%;
  display: block;
  text-align: center; }
  .down .icon {
    position: absolute;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    fill: #ffffff;
    animation: pulse 1.3s infinite; }

*,
*:before,
*:after {
  box-sizing: border-box; }

body.has-push-menu,
body.has-push-menu aside,
body.has-push-menu .progress-bar {
  transition: all 0.3s ease; }

body.has-push-menu {
  overflow-x: hidden;
  position: relative;
  left: 0; }
  body.has-push-menu.push-menu-to-right {
    left: 15rem; }
    body.has-push-menu.push-menu-to-right .progress-bar {
      left: 15rem; }
    body.has-push-menu.push-menu-to-right .bar-header {
      left: 15rem; }

aside.sidebar {
  position: fixed;
  width: 15rem;
  height: 100%;
  top: 0;
  left: -15rem;
  background-color: #ffffff;
  z-index: 20; }
  @media (min-width: 37.5rem) {
    aside.sidebar {
      padding: 0.625rem 0 0; } }
  aside.sidebar.open {
    left: 0; }
  aside.sidebar h2 {
    margin: 0 1.25rem 0;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem;
    color: #141414;
    border-bottom: 1px solid #141414;
    line-height: 50px; }
    @media (min-width: 37.5rem) {
      aside.sidebar h2 {
        font-size: 1.25rem; } }
  aside.sidebar nav ul {
    padding: 0;
    margin: 0.3125rem 0; }
    @media (min-width: 37.5rem) {
      aside.sidebar nav ul {
        margin: 0.625rem 0; } }
    aside.sidebar nav ul li {
      margin: 0;
      list-style-type: none; }
      aside.sidebar nav ul li a {
        width: 100%;
        display: block;
        padding: 0.9375rem 1.25rem;
        text-decoration: none;
        font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
        font-weight: 300;
        font-style: normal;
        color: #141414; }
        aside.sidebar nav ul li a:hover {
          color: #ffffff;
          background: #ff0a16; }

.hero {
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh; }
  .hero + #grid {
    margin-top: -5rem; }
  .hero .gradient,
  .hero .pixels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .hero .pixels {
    opacity: 0.8;
    background-image: url(../../assets/img/pixels.png); }
  .hero .gradient {
    background-image: linear-gradient(0deg, #141414 5%, rgba(0, 0, 0, 0) 30%); }
  .hero .content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    width: 80%;
    height: 100%;
    padding-left: 10%; }
    @media (min-width: 37.5rem) {
      .hero .content {
        width: 50%; } }
    .hero .content .date {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.75); }
    .hero .content .title {
      font-size: 2.5rem;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      margin: 0.625rem 0; }
      @media (min-width: 37.5rem) {
        .hero .content .title {
          font-size: 3.125rem; } }
    .hero .content .description {
      font-size: 1.5rem;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      margin: 0; }
      @media (min-width: 37.5rem) {
        .hero .content .description {
          font-size: 1.625rem; } }
    .hero .content .buttons {
      margin-top: 3.125rem; }
    .hero .content .button {
      display: inline-block;
      font-size: 1.125rem;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 0.3125rem;
      padding: 0.625rem 0.9375rem;
      transition: all 0.3s; }
      @media (min-width: 37.5rem) {
        .hero .content .button {
          font-size: 1.125rem; } }
      .hero .content .button:hover {
        background-color: rgba(255, 255, 255, 0.5);
        box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2); }
      .hero .content .button svg {
        width: 1.5625rem;
        height: 1.5625rem;
        margin-right: 0.625rem;
        vertical-align: middle;
        color: #ff0a16; }
      .hero .content .button span {
        vertical-align: middle; }

.search-wrapper {
  position: fixed;
  top: 30px;
  width: 100%;
  padding-right: 5%;
  padding-left: 5%;
  transform: translateY(-200px);
  z-index: 19; }
  .search-wrapper.active {
    transform: translateY(0); }

.search-form {
  position: relative;
  top: 0;
  width: 100%;
  transform: translateX(-200px);
  transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
  opacity: 0;
  z-index: 19; }
  .search-form .search-field {
    width: 100%;
    height: 2.5rem;
    line-height: 1.875rem;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.25rem;
    color: #141414;
    background-color: #ffffff;
    border: 0;
    border-radius: 1.25rem;
    padding: 0.3125rem 1.5625rem;
    outline: 0; }
  .search-form:focus {
    outline: 0; }
  .search-form.active {
    top: 0;
    transform: translateX(0);
    opacity: 1; }
  .search-form .search-list {
    position: absolute;
    width: 100%;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal;
    display: none;
    padding: 0 1.25rem;
    margin: 1.25rem 0;
    list-style-type: none; }
    @media (max-width: 37.4rem) {
      .search-form .search-list {
        height: 380px;
        overflow: scroll; } }
    .active .search-form .search-list {
      display: block; }
    .search-form .search-list .entry-date {
      float: right;
      display: none;
      font-size: 0.875rem; }
      @media (min-width: 37.5rem) {
        .search-form .search-list .entry-date {
          display: inline; } }
    .search-form .search-list .entry-category {
      text-transform: uppercase;
      background-color: #ff0a16;
      margin-right: 0.3125rem;
      height: 1.25rem;
      border-radius: 0.625rem;
      font-size: 0.75rem;
      padding: 0.125rem 0.5rem;
      color: #ffffff; }
    .search-form .search-list a {
      color: #ffffff;
      text-decoration: none;
      display: block;
      padding: 0.9375rem 0;
      width: 100%;
      border-bottom: 1px solid #333333;
      transition: all 0.3s;
      line-height: 1.5625rem; }
      .search-form .search-list a:hover {
        color: #ff0a16; }
        .search-form .search-list a:hover .entry-category {
          color: #ffffff; }
  .search-form .icon-remove-sign {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0.3125rem;
    fill: #ffffff;
    background-color: #ff0a16;
    border-radius: 13px;
    margin: 0.4375rem;
    cursor: pointer;
    outline: 0;
    z-index: 1; }

.search-overlay {
  overflow: hidden; }
  .search-overlay:after {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: #141414;
    content: "";
    z-index: 18; }

.img-rounded {
  border-radius: 50%; }

html,
body {
  height: 100%; }

.bar-header {
  background-color: #141414;
  padding: 0.625rem 0.9375rem;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: top 0.5s, left 0.3s ease, background-color 0.5s, box-shadow 0.5s; }
  @media (min-width: 37.5rem) {
    .bar-header {
      padding: 0.9375rem 0rem; } }
  .bar-header .logo {
    display: inline-block;
    margin: 0;
    height: 2rem;
    line-height: 2rem; }
    .bar-header .logo a {
      display: block;
      color: #ffffff;
      text-decoration: none;
      font-size: 2rem;
      position: relative;
      outline: 0; }
    .bar-header .logo svg {
      width: 7.5rem;
      height: 1.875rem;
      transition: all .4s; }
      @media (min-width: 37.5rem) {
        .bar-header .logo svg {
          width: 12.8125rem; } }
  .bar-header .version {
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: normal;
    line-height: 1;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    transform: translateX(110%);
    opacity: 0.3; }
  .bar-header .icon-menu {
    float: left;
    cursor: pointer;
    margin: 0.3125rem 1.25rem 0.3125rem 0;
    width: 1.25rem;
    height: 1.25rem;
    fill: #ffffff; }
    @media (min-width: 37.5rem) {
      .bar-header .icon-menu {
        margin: 0.3125rem 1.25rem 0.3125rem 1.5625rem; } }
  .bar-header .dosearch {
    float: right;
    width: 1.875rem;
    height: 1.875rem;
    cursor: pointer;
    margin: 0; }
    @media (min-width: 37.5rem) {
      .bar-header .dosearch {
        margin: 0 1.25rem 0 0; } }
  .bar-header .icon-search {
    width: 1.25rem;
    height: 1.25rem;
    fill: #ffffff;
    margin: 0.3125rem; }
  .bar-header .get-theme {
    display: none;
    font-size: 0.8125rem;
    font-weight: bold;
    text-decoration: none;
    background-color: #ff0a16;
    color: #ffffff;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.3125rem;
    float: right;
    margin: 0.3125rem 0.9375rem 0.3125rem 0.3125rem; }
    @media (min-width: 37.5rem) {
      .bar-header .get-theme {
        display: inline-block; } }

body.main-page {
  background-color: #141414; }
  body.main-page .bar-header {
    background-color: rgba(0, 0, 0, 0.85); }

body.light:not(.main-page) .bar-header {
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95); }
  body.light:not(.main-page) .bar-header .icon-search,
  body.light:not(.main-page) .bar-header .icon-menu {
    fill: #141414; }
  body.light:not(.main-page) .bar-header .logo a,
  body.light:not(.main-page) .bar-header .version {
    color: #141414; }

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  z-index: 17;
  opacity: 0;
  transition: all 0.3s; }
  .overlay.show {
    pointer-events: auto;
    opacity: 1; }

.home {
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 5rem; }
  @media (min-width: 37.5rem) {
    .home {
      padding-top: 6.25rem; } }
  .home.no-padding {
    padding-top: 0; }

.row {
  width: auto;
  max-width: 100%;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  margin: 0px 0.625rem; }
  .row::after {
    content: '';
    display: table;
    clear: both; }

.flex-grid {
  display: flex;
  flex-flow: row wrap; }

.title-category {
  font-size: 2rem;
  margin: 0 0 2.5rem;
  padding: 0 1.4375rem;
  text-transform: lowercase;
  color: #fff; }

.box-item {
  flex: 1 0 300px;
  margin: 0 0 1.875rem;
  display: inline-block;
  min-height: 17.8125rem;
  transition: all 0.3s;
  position: relative;
  z-index: 1; }
  @media (min-width: 37.5rem) {
    .box-item {
      margin: 0 0.9375rem 1.875rem; } }
  @media (min-width: 620px) {
    .box-item {
      max-width: calc(100%/2 - 30px); } }
  @media (min-width: 920px) {
    .box-item {
      max-width: calc(100%/3 - 30px); } }
  @media (min-width: 1220px) {
    .box-item {
      max-width: calc(100%/4 - 30px); } }
  @media (min-width: 1520px) {
    .box-item {
      max-width: calc(100%/5 - 30px); } }
  @media (min-width: 1820px) {
    .box-item {
      max-width: calc(100%/6 - 30px); } }
  @media (min-width: 1820px) {
    .box-item {
      flex: 1 0 calc(100%/6 - 30px); } }
  .box-item:hover {
    z-index: 2;
    transform: scale(1.1); }
    .box-item:hover img {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      transform: scale(1.05); }
    .box-item:hover .box-body time,
    .box-item:hover .box-body p {
      color: #ffffff; }
    .box-item:hover .box-body .cover .new-post-tag {
      background-color: #000; }
    .box-item:hover .box-body .cover .read-icon {
      opacity: 1; }
  .box-item a {
    text-decoration: none;
    display: block; }
  .box-item .category {
    display: block;
    height: 2.25rem;
    line-height: 2.25rem;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.125rem;
    padding: 0 0.9375rem; }
    .box-item .category a {
      color: #ffffff; }
  .box-item .box-body img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    transition: all 0.2s ease-in-out; }
  .box-item .box-body time {
    font-weight: 300;
    font-size: 1rem;
    color: #737373;
    pointer-events: none; }
  .box-item .box-body h2 {
    margin: 0.625rem 0;
    font-size: 1.5rem;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 800;
    font-style: normal;
    color: #ffffff;
    line-height: 1.875rem; }
  .box-item .box-body p {
    margin: 0 0 1.875rem;
    color: #bfbfbf;
    font-size: 1.0625rem;
    line-height: 1.625rem; }
  .box-item .box-body .tags a {
    height: 1.875rem;
    line-height: 1.625rem;
    color: #ffffff;
    padding: 0 0.625rem;
    border: 1px solid #ffffff;
    border-radius: 15px;
    display: inline-block;
    margin: 0 0.625rem 0.625rem 0;
    z-index: 50; }
    .box-item .box-body .tags a:hover {
      color: #141414;
      background: #ffffff;
      border-color: #ffffff; }
  .box-item .box-body .cover {
    position: relative;
    display: block; }
    .box-item .box-body .cover .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      color: #ff0a16;
      z-index: 1; }
    .box-item .box-body .cover img {
      position: relative;
      z-index: 2; }
    .box-item .box-body .cover .new-post-tag {
      text-transform: uppercase;
      display: inline-block;
      background: #ff0a16;
      color: #fff;
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1.5rem;
      padding: 0 0.5rem;
      position: absolute;
      bottom: 0.5rem;
      left: 0;
      z-index: 3; }
    .box-item .box-body .cover .read-icon {
      opacity: 0;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      content: "";
      width: 5rem;
      height: 5rem;
      border-radius: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -2.5rem;
      margin-left: -2.5rem;
      border: 2px solid #fff;
      color: #ff0a16;
      z-index: 4; }
      .box-item .box-body .cover .read-icon svg {
        width: 3rem; }
  .box-item .box-info {
    padding: 0.9375rem; }

.post {
  position: relative;
  top: 1.875rem; }
  @media (min-width: 37.5rem) {
    .post {
      top: 3.125rem; } }

.post.two-columns {
  display: flex;
  flex-direction: column;
  padding-bottom: 2.5rem; }
  @media (min-width: 37.5rem) {
    .post.two-columns {
      max-width: 68.75rem;
      flex-direction: row;
      margin: 0 auto;
      padding: 2.5rem 0; } }
  .post.two-columns .post-content {
    padding-bottom: 0.625rem; }
    @media (min-width: 37.5rem) {
      .post.two-columns .post-content {
        flex-basis: 70%;
        padding: 0 1.875rem 0 0.625rem; } }

.post-content {
  overflow-x: auto;
  padding: 2.5rem 0; }
  .post-content.fullwidth {
    padding: 3.75rem 0.625rem 0; }
  .post-content img {
    max-width: 100%;
    margin: 0rem auto;
    display: block;
    padding: 10px 0; }
  .post-content figure {
    margin: 1.25rem auto 0; }
  .post-content figcaption,
  .post-content img + em {
    display: block;
    color: #a6a6a6;
    text-align: center;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal; }
  .post-content p,
  .post-content h1,
  .post-content h2,
  .post-content h3,
  .post-content h4,
  .post-content h5,
  .post-content h6,
  .post-content ul,
  .post-content ol,
  .post-content iframe {
    width: auto;
    max-width: 50rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.875rem;
    letter-spacing: 0.025rem;
    padding: 0 1.25rem;
    margin: 1.25rem auto 0; }
    .post-content p::after,
    .post-content h1::after,
    .post-content h2::after,
    .post-content h3::after,
    .post-content h4::after,
    .post-content h5::after,
    .post-content h6::after,
    .post-content ul::after,
    .post-content ol::after,
    .post-content iframe::after {
      content: '';
      display: table;
      clear: both; }
    @media (min-width: 37.5rem) {
      .post-content p,
      .post-content h1,
      .post-content h2,
      .post-content h3,
      .post-content h4,
      .post-content h5,
      .post-content h6,
      .post-content ul,
      .post-content ol,
      .post-content iframe {
        font-size: 1.25rem;
        line-height: 2.5rem;
        margin: 1.8125rem auto 0; } }
  .post-content h1.post-title {
    line-height: 1.2;
    margin: 0.3125rem auto 0.625rem;
    padding-top: 0; }
  .post-content p.post-subtitle {
    color: #a6a6a6;
    font-size: 1.0625rem;
    margin: 0.625rem auto;
    line-height: 1.6; }
    @media (min-width: 37.5rem) {
      .post-content p.post-subtitle {
        font-size: 1.25rem; } }
  .post-content img.post-cover {
    padding: 0;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem; }
    @media (min-width: 37.5rem) {
      .post-content img.post-cover {
        margin-top: 1.8125rem;
        margin-bottom: 1.8125rem; } }
  .post-content p.post-info {
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.8125rem;
    letter-spacing: 0;
    color: #a6a6a6;
    margin: 0 auto; }
    @media (min-width: 37.5rem) {
      .post-content p.post-info {
        font-size: 0.9375rem; } }
    .post-content p.post-info span,
    .post-content p.post-info time {
      vertical-align: middle; }
    .post-content p.post-info time {
      margin-right: 0.625rem; }
      @media (min-width: 37.5rem) {
        .post-content p.post-info time {
          margin-right: 1.875rem; } }
  .post-content p,
  .post-content li {
    color: #333333; }
    .post-content p code,
    .post-content li code {
      font-size: 0.9375rem;
      background: #282a36;
      color: #fff;
      word-wrap: break-word;
      padding: 0.1875rem 0.3125rem;
      border-radius: 3px; }
      @media (min-width: 37.5rem) {
        .post-content p code,
        .post-content li code {
          font-size: 1.0625rem; } }
  .post-content li {
    padding: 0.625rem 0; }
    .post-content li ul {
      margin-bottom: 0; }
    .post-content li p {
      margin-bottom: 0;
      margin-top: 0; }
  .post-content a {
    color: #ff0a16;
    text-decoration: none; }
    .post-content a:hover {
      color: #a9a9a9; }
  .post-content iframe {
    margin-top: 1.875rem;
    width: 100%; }
  .post-content h1,
  .post-content h2,
  .post-content h3,
  .post-content h4,
  .post-content h5,
  .post-content h6 {
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-top: 0;
    padding-top: 3.125rem; }
    @media (min-width: 37.5rem) {
      .post-content h1,
      .post-content h2,
      .post-content h3,
      .post-content h4,
      .post-content h5,
      .post-content h6 {
        margin-top: 0;
        padding-top: 3.75rem; } }
  .post-content h1 {
    font-size: 2.25rem;
    line-height: 1.4; }
    @media (min-width: 37.5rem) {
      .post-content h1 {
        font-size: 3.125rem; } }
  .post-content h2 {
    font-size: 1.75rem;
    line-height: 1.4; }
    @media (min-width: 37.5rem) {
      .post-content h2 {
        font-size: 2.3125rem; } }
  .post-content h3 {
    font-size: 1.375rem;
    line-height: 1.4; }
    @media (min-width: 37.5rem) {
      .post-content h3 {
        font-size: 1.6875rem; } }
  .post-content ul,
  .post-content ol {
    padding-left: 3.75rem; }
  .post-content ul.post-list {
    padding: 0 1.25rem; }
    @media (min-width: 37.5rem) {
      .post-content ul.post-list {
        padding: 0; } }
  .post-content blockquote {
    width: auto;
    max-width: 45.625rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    border-left: 0.3125rem solid #333333;
    padding: 0 0.625rem;
    margin: 1.875rem auto;
    width: 90%; }
    .post-content blockquote::after {
      content: '';
      display: table;
      clear: both; }
    @media (min-width: 37.5rem) {
      .post-content blockquote {
        width: 100%;
        margin: 3.125rem auto;
        padding: 0 1.875rem; } }
    .post-content blockquote p {
      font-size: 1.0625rem;
      color: rgba(0, 0, 0, 0.6);
      margin: 0; }
      @media (min-width: 37.5rem) {
        .post-content blockquote p {
          font-size: 1.25rem; } }
  .post-content hr {
    width: auto;
    max-width: 47.5rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    border: 1px solid #f2f2f2;
    margin: 50px auto; }
    .post-content hr::after {
      content: '';
      display: table;
      clear: both; }
  .post-content pre {
    overflow-x: auto; }
  .post-content table {
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 2.1875rem;
    letter-spacing: 0.025rem;
    margin: 3.125rem auto;
    border-collapse: collapse; }
    @media (min-width: 37.5rem) {
      .post-content table {
        font-size: 1.25rem; } }
    .post-content table th,
    .post-content table td {
      border: 0.0625rem solid #ccc;
      padding: 0.3125rem 0.625rem; }
      @media (min-width: 37.5rem) {
        .post-content table th,
        .post-content table td {
          border: 0.125rem solid #ccc;
          padding: 0.625rem 1.25rem; } }
  .post-content td > pre {
    padding: 0;
    margin: 0; }
  .post-content td.gutter.gl {
    padding-right: 1.5625rem;
    line-height: 1.5rem; }
  .post-content h1,
  .post-content h2,
  .post-content h3,
  .post-content h4,
  .post-content h5,
  .post-content h6 {
    position: relative; }
    .post-content h1 .anchor,
    .post-content h2 .anchor,
    .post-content h3 .anchor,
    .post-content h4 .anchor,
    .post-content h5 .anchor,
    .post-content h6 .anchor {
      display: none;
      height: 1rem;
      left: 0;
      margin-top: 1.875rem;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 1rem; }
      @media (min-width: 37.5rem) {
        .post-content h1 .anchor,
        .post-content h2 .anchor,
        .post-content h3 .anchor,
        .post-content h4 .anchor,
        .post-content h5 .anchor,
        .post-content h6 .anchor {
          display: block;
          opacity: 0; } }
      .post-content h1 .anchor img,
      .post-content h2 .anchor img,
      .post-content h3 .anchor img,
      .post-content h4 .anchor img,
      .post-content h5 .anchor img,
      .post-content h6 .anchor img {
        padding: 0; }
    .post-content h1:hover .anchor,
    .post-content h1 .anchor:hover,
    .post-content h2:hover .anchor,
    .post-content h2 .anchor:hover,
    .post-content h3:hover .anchor,
    .post-content h3 .anchor:hover,
    .post-content h4:hover .anchor,
    .post-content h4 .anchor:hover,
    .post-content h5:hover .anchor,
    .post-content h5 .anchor:hover,
    .post-content h6:hover .anchor,
    .post-content h6 .anchor:hover {
      opacity: 1; }

/* See also */
.see-also {
  padding: 0 1.25rem; }
  @media (min-width: 37.5rem) {
    .see-also {
      flex-basis: 30%;
      padding: 0 0.625rem; } }
  .see-also h2 {
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 1px solid #f2f2f2;
    padding: 0.625rem 0; }
    @media (min-width: 37.5rem) {
      .see-also h2 {
        padding: 3rem 0 1.25rem; } }
  .see-also ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    .see-also ul li img {
      display: block;
      max-width: 100%;
      height: auto;
      transition: all 0.2s ease-in-out; }
    .see-also ul li a {
      font-weight: normal;
      color: #141414;
      text-decoration: none;
      transition: all 0.3s; }
      .see-also ul li a:hover {
        color: rgba(0, 0, 0, 0.5); }
        .see-also ul li a:hover img {
          -webkit-filter: grayscale(100%);
          filter: grayscale(100%); }

/* Progress bar */
.progress-bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  padding: 1.875rem 0;
  border-bottom: 1px solid #ff0a16;
  background-color: #fff;
  transition: bottom 0.5s; }
  .progress-bar .bar {
    position: relative;
    flex: 1;
    height: 0.625rem;
    background-color: #ff0a16;
    opacity: 0.2; }
  .progress-bar .completed {
    opacity: 1; }
    .progress-bar .completed:last-child {
      border-right: 1px solid #fff; }
  .progress-bar .star {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    animation: 1s pulse cubic-bezier(0.36, 0.07, 0.19, 0.97) alternate infinite; }
  .progress-bar.finished .star {
    animation: none;
    transform: scale(1.3); }

/* Time bar */
.time-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%;
  display: block;
  width: 100%;
  padding: 0.625rem 1.25rem 0.3125rem;
  transition: bottom 0.5s;
  background-color: rgba(0, 0, 0, 0.85); }
  @media (min-width: 37.5rem) {
    .time-bar {
      padding: 1rem 1.25rem 0.5625rem; } }
  .time-bar .bar {
    display: block;
    width: 100%;
    padding: 0.5rem 3.75rem; }
    .time-bar .bar:after {
      clear: both;
      display: block;
      content: ""; }
  .time-bar .completed {
    float: left;
    display: block;
    height: 0.3125rem;
    background-color: #ff0a16; }
  .time-bar .remaining {
    float: left;
    display: block;
    height: 0.3125rem;
    background-color: #ccc; }
  .time-bar .time-completed,
  .time-bar .time-remaining {
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem;
    color: #fff; }
  .time-bar .time-completed {
    float: left; }
  .time-bar .time-remaining {
    float: right; }

/* Recommendation */
.recommendation {
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%;
  display: block;
  width: 100%;
  padding: 0.625rem;
  transition: bottom 0.5s;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: space-between; }
  @media (min-width: 37.5rem) {
    .recommendation {
      padding: 0.9375rem; } }
  .recommendation .message {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 1rem;
    color: #fff;
    padding-right: 1.25rem; }
    @media (min-width: 37.5rem) {
      .recommendation .message {
        font-size: 1.25rem; } }
    .recommendation .message strong {
      display: block;
      margin: 0.625rem 0; }
    .recommendation .message button {
      background-color: transparent;
      border: 0;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 0.8125rem;
      text-decoration: none;
      outline: 0; }
      @media (min-width: 37.5rem) {
        .recommendation .message button {
          font-size: 0.9375rem; } }
    .recommendation .message svg {
      fill: #fff;
      width: 1.375rem;
      height: 1.375rem;
      transform: rotate(-90deg);
      border: 1px solid #fff;
      border-radius: 50%;
      padding: 5px;
      margin-right: 10px;
      vertical-align: middle; }
      @media (min-width: 37.5rem) {
        .recommendation .message svg {
          width: 1.75rem;
          height: 1.75rem; } }
    .recommendation .message span {
      vertical-align: middle; }
  .recommendation .post-preview {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #000;
    padding: 0.3125rem;
    max-width: 35%;
    text-decoration: none; }
    @media (min-width: 37.5rem) {
      .recommendation .post-preview {
        flex-direction: row;
        padding: 0.3125rem 3.125rem 0.3125rem 0.3125rem;
        max-width: 50%; } }
    .recommendation .post-preview:hover .title {
      color: rgba(255, 255, 255, 0.5); }
    .recommendation .post-preview:hover .image > img {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%); }
    .recommendation .post-preview .image,
    .recommendation .post-preview .image > img {
      display: block;
      width: 100%;
      max-width: 12.5rem;
      transition: all 0.3s; }
    .recommendation .post-preview .title {
      font-size: 1rem;
      color: #fff;
      margin: 0.3125rem 0;
      transition: all 0.3s; }
      @media (min-width: 37.5rem) {
        .recommendation .post-preview .title {
          font-size: 1.4375rem;
          margin: 0 0 0 1.25rem; } }

.icon-clock,
.icon-calendar {
  width: 0.875rem;
  height: 0.875rem;
  fill: #a6a6a6;
  vertical-align: middle;
  margin-right: 0.1875rem; }

/* Tags */
.post-content .tags {
  width: auto;
  max-width: 50rem;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  margin: 0 auto 1.8125rem;
  margin-top: 1.875rem;
  letter-spacing: 0.025rem;
  line-height: 2.5rem;
  padding: 0 0.625rem; }
  .post-content .tags::after {
    content: '';
    display: table;
    clear: both; }
  @media (min-width: 37.5rem) {
    .post-content .tags {
      font-size: 1.25rem;
      padding: 0; } }
  .post-content .tags a {
    font-size: 0.875rem;
    color: #141414;
    display: inline-block;
    border: 1px solid #141414;
    border-radius: 1.25rem;
    padding: 0 0.625rem;
    margin-right: 0.125rem;
    margin-bottom: 0.5rem;
    text-decoration: none; }
    @media (min-width: 37.5rem) {
      .post-content .tags a {
        border-width: 2px; } }
    .post-content .tags a:hover {
      color: #ffffff;
      background-color: #141414; }
.post-content .tag-title {
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  font-style: normal;
  width: auto;
  max-width: 50rem;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.875rem;
  margin-top: 1.25rem;
  padding: 0 0.625rem; }
  .post-content .tag-title::after {
    content: '';
    display: table;
    clear: both; }
  .post-content .tag-title span {
    padding: 0.1875rem 0.625rem;
    background-color: #ff0a16;
    border-radius: 0.3125rem;
    color: #fff; }
  @media (min-width: 37.5rem) {
    .post-content .tag-title {
      font-size: 1.375rem;
      margin-top: 5rem;
      padding: 0; } }
.post-content a.post-anchor {
  display: block;
  height: 2.5rem; }
  @media (min-width: 37.5rem) {
    .post-content a.post-anchor {
      height: 0.625rem; } }
.post-content ul.post-list {
  list-style: none;
  margin: 1.5625rem auto 0;
  padding: 0 0.625rem; }
  @media (min-width: 37.5rem) {
    .post-content ul.post-list {
      padding: 0; } }
  .post-content ul.post-list a {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #d9d9d9;
    padding: 0.625rem 0;
    text-decoration: none;
    font-size: 1.125rem; }
  .post-content ul.post-list .entry-date {
    float: right; }
    @media (max-width: 37.4rem) {
      .post-content ul.post-list .entry-date {
        display: none; } }

.pagination {
  display: flex;
  align-items: center; }
  .pagination.pagination-home {
    justify-content: center;
    width: 100%;
    margin: 0 auto; }
    .pagination.pagination-home a.next,
    .pagination.pagination-home a.previous {
      width: 2.5rem;
      height: 2.5rem; }
      .pagination.pagination-home a.next svg,
      .pagination.pagination-home a.previous svg {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        fill: #fff;
        margin: 10px;
        transition: all 0.3s ease; }
      .pagination.pagination-home a.next:hover > svg,
      .pagination.pagination-home a.previous:hover > svg {
        fill: #ff0a16; }
    .pagination.pagination-home a.previous svg {
      transform: rotate(180deg); }
    .pagination.pagination-home .page_number {
      color: #fff;
      font-size: 1.0625rem;
      line-height: 1.375rem;
      margin: 0 0.625rem; }
  .pagination.pagination-post {
    justify-content: space-between;
    padding: 0.9375rem 1.25rem 1.875rem; }
    @media (min-width: 37.5rem) {
      .pagination.pagination-post {
        width: auto;
        max-width: 50rem;
        float: none;
        display: block;
        margin-right: auto;
        margin-left: auto;
        padding-left: 0;
        padding-right: 0; }
        .pagination.pagination-post::after {
          content: '';
          display: table;
          clear: both; } }
    .pagination.pagination-post a {
      font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
      font-weight: bold;
      font-style: normal;
      font-size: 1rem;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: #fff;
      color: #ff0a16;
      padding: 0 0.9375rem;
      border: 1px solid #ff0a16;
      border-radius: 5px;
      transition: all 0.3s; }
      @media (min-width: 37.5rem) {
        .pagination.pagination-post a {
          font-size: 1.0625rem;
          border: 2px solid #ff0a16; } }
      .pagination.pagination-post a:hover {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%); }
      .pagination.pagination-post a .arrow {
        width: 0.875rem;
        height: 0.875rem;
        fill: #ff0a16;
        margin-right: 0.625rem; }
      .pagination.pagination-post a .text {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9375rem 0; }

.share {
  width: auto;
  max-width: 800px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  border-top: 1px solid #f2f2f2;
  padding-top: 1.25rem;
  margin-top: 0.625rem; }
  .share::after {
    content: '';
    display: table;
    clear: both; }
  @media (min-width: 37.5rem) {
    .share {
      margin-top: 3.125rem; } }
  article .share {
    border-top: none; }
  .share svg {
    margin: 0.9375rem;
    width: 35px;
    height: 35px; }
  .share a {
    text-decoration: none;
    border: none; }
  .share .icon {
    transition: all 0.3s; }
  .share .icon-twitter:hover {
    fill: #1da1f3; }
  .share .icon-facebook:hover {
    fill: #3b5998; }

pre {
  background: #282a36;
  width: 100%;
  padding: 1.25rem 0;
  color: #ffffff;
  margin: 1.875rem 0;
  font-size: 0.875rem; }
  @media (min-width: 37.5rem) {
    pre {
      font-size: 1rem;
      padding: 2.5rem 0;
      margin: 3.125rem 0; } }
  pre code {
    width: auto;
    max-width: 50rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    padding: 0 1.25rem; }
    pre code::after {
      content: '';
      display: table;
      clear: both; }
    @media (max-width: 37.4rem) {
      pre code {
        overflow-x: scroll; } }
  pre span {
    line-height: 1.5rem;
    font-family: "Monaco", "Consolas", "Menlo", monospace; }

.highlight {
  margin: 1.25rem 0; }
  @media (min-width: 37.5rem) {
    .highlight {
      word-wrap: break-word;
      margin: 1.8125rem 0; } }
  .highlight .hll {
    background-color: #282a36; }
  .highlight .c,
  .highlight .cm,
  .highlight .cp,
  .highlight .c1,
  .highlight .cs {
    color: #6272a4; }
  .highlight .err {
    color: #ff5555;
    background-color: #282a36; }
  .highlight .kc,
  .highlight .kp,
  .highlight .kr,
  .highlight .kt,
  .highlight .no {
    color: #66d9ef; }
  .highlight .l,
  .highlight .mf,
  .highlight .mh,
  .highlight .mi,
  .highlight .mo,
  .highlight .se,
  .highlight .il {
    color: #ae81ff; }
  .highlight .p,
  .highlight .nx {
    color: #f7f7f2; }
  .highlight .ni,
  .highlight .nn,
  .highlight .py,
  .highlight .nv,
  .highlight .w,
  .highlight .bp,
  .highlight .vc,
  .highlight .vg,
  .highlight .vi {
    color: #50fa7b; }
  .highlight .nl {
    color: #8be9fd; }
  .highlight .n,
  .highlight .nb,
  .highlight .m {
    color: #bd93f9; }
  .highlight .nt,
  .highlight .k,
  .highlight .kn,
  .highlight .kd,
  .highlight .o,
  .highlight .ow {
    color: #ff79c6; }
  .highlight .ge {
    font-style: italic; }
  .highlight .gs {
    font-weight: bold; }
  .highlight .ld,
  .highlight .s,
  .highlight .sb,
  .highlight .sc,
  .highlight .sd,
  .highlight .s2,
  .highlight .sh,
  .highlight .si,
  .highlight .sx,
  .highlight .sr,
  .highlight .s1,
  .highlight .ss,
  .highlight .vglnk {
    color: #f1fa8c; }
  .highlight .na,
  .highlight .nc,
  .highlight .nd,
  .highlight .ne,
  .highlight .nf {
    color: #50fa7b; }

.contact-form {
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  padding: 0.625rem; }
  .contact-form fieldset {
    border: none;
    font-weight: normal; }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    box-sizing: border-box;
    outline: none;
    display: block;
    color: #333333;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    font-family: inherit;
    font-size: 1.125rem;
    height: 2.8125rem; }
    .contact-form input[type="text"].has-error,
    .contact-form input[type="email"].has-error,
    .contact-form textarea.has-error {
      border-color: #f04242; }
  .contact-form textarea {
    height: 12.5rem; }
  .contact-form span {
    display: block;
    font-size: 0.875rem;
    color: #f04242;
    padding-bottom: 0.625rem; }
  .contact-form button[type="submit"] {
    display: block;
    padding: 0.875rem 2.4375rem 0.875rem 2.4375rem;
    color: #ffffff;
    background: #ff0a16;
    font-size: 1.125rem;
    width: 100%;
    border: 1px solid #700005;
    border-width: 1px 1px 3px;
    margin-top: 3.125rem;
    margin-bottom: 0.625rem;
    cursor: pointer;
    transition: all 0.3s;
    outline: none; }
    .contact-form button[type="submit"]:hover {
      background: #a30008; }
    @media (min-width: 37.5rem) {
      .contact-form button[type="submit"] {
        padding: 1.1875rem 2.4375rem 1.125rem 2.4375rem; } }
  .contact-form [v-cloak] {
    display: none; }

.author {
  background: #f2f2f2;
  display: table;
  width: 100%;
  padding: 2.5rem 0;
  margin: 2.5rem 0; }
  @media (min-width: 37.5rem) {
    .author {
      padding: 3.125rem 0; } }
  .author .details {
    margin: auto;
    max-width: 50rem;
    padding: 0 1.25rem; }
    @media (max-width: 37.4rem) {
      .author .details {
        text-align: center; } }
  .author svg {
    width: 25px;
    height: 25px;
    margin-right: 0.625rem; }
  .author a {
    fill: #a6a6a6;
    text-decoration: none;
    border: none;
    transition: all 0.3s; }
    .author a:hover {
      fill: #ff0a16; }
  .author img {
    width: 9.375rem;
    border-radius: 50%;
    display: block;
    margin: auto; }
    @media (min-width: 37.5rem) {
      .author img {
        width: 11.25rem;
        float: left;
        margin-right: 3.125rem; } }
  .author .def {
    color: gray;
    font-size: 1.125rem;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal;
    margin: 0.625rem; }
    @media (min-width: 37.5rem) {
      .author .def {
        margin: 0; } }
  .author .name {
    margin: 0; }
    .author .name a {
      font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      color: black;
      font-size: 1.875rem; }
      @media (min-width: 37.5rem) {
        .author .name a {
          font-size: 2.8125rem; } }
      .author .name a:hover {
        color: #333333; }
  .author .desc {
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    font-style: normal;
    margin: 0.625rem;
    font-size: 1rem;
    line-height: 1.5625rem; }
    @media (min-width: 37.5rem) {
      .author .desc {
        font-size: 1.125rem; } }

@media (min-width: 37.5rem) {
  .staff {
    width: auto;
    max-width: 50rem;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0; }
    .staff::after {
      content: '';
      display: table;
      clear: both; } }
.staff .item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2; }
.staff img {
  width: 9.375rem;
  margin: 0 1.25rem 1.25rem; }
  @media (min-width: 37.5rem) {
    .staff img {
      width: 12.5rem;
      margin-bottom: 1.875rem; } }
.staff h1,
.staff h2,
.staff h3 {
  margin-bottom: 0.625rem; }
  .staff h1.name,
  .staff h2.name,
  .staff h3.name {
    padding-top: 0.625rem; }
  .staff h1.position,
  .staff h2.position,
  .staff h3.position {
    font-size: 1.1875rem;
    font-weight: normal;
    font-style: italic;
    color: #999;
    padding-top: 0;
    margin-bottom: 1.25rem; }

.modal .mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  animation: 1s fadeIn ease both; }
.modal .window {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  transform: translate(-50%, -50%);
  width: calc(100% - 2.5rem);
  max-width: 50rem;
  background-color: #fff;
  border-radius: 0.625rem;
  padding: 0.3125rem 0;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
  animation: 0.3s fadeIn 0.5s ease both; }
  @media (min-width: 37.5rem) {
    .modal .window {
      min-width: 25rem; } }
  .modal .window .close {
    position: absolute;
    right: -0.625rem;
    top: -0.625rem;
    width: 1.875rem;
    height: 1.875rem;
    fill: #fff;
    background-color: #141414;
    border-radius: 50%;
    border: 2px solid #fff;
    padding: 0.3125rem;
    cursor: pointer; }
  .modal .window .header {
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    padding: 0.9375rem; }
    .modal .window .header h2,
    .modal .window .header p {
      margin: 0;
      font-size: 0.8125rem; }
  .modal .window .content {
    max-height: 90vh;
    overflow: auto;
    padding: 0.625rem; }
    .modal .window .content ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column; }
      @media (min-width: 37.5rem) {
        .modal .window .content ul {
          flex-direction: row; } }
      .modal .window .content ul li {
        flex: 1;
        margin: 0.9375rem; }
        .modal .window .content ul li figure {
          position: relative;
          margin: 0; }
          .modal .window .content ul li figure:after {
            content: "Read now";
            text-transform: uppercase;
            display: inline-block;
            background: #ff0a16;
            color: #fff;
            font-size: 0.8125rem;
            font-weight: 700;
            line-height: 1.5rem;
            padding: 0 0.5rem;
            position: absolute;
            bottom: 10%;
            left: -5px;
            transition: background 0.2s; }
        .modal .window .content ul li img {
          display: block;
          max-width: 100%;
          height: auto;
          transition: all 0.2s ease-in-out;
          position: relative; }
        .modal .window .content ul li a {
          font-weight: normal;
          color: #141414;
          text-decoration: none;
          transition: all 0.3s; }
          .modal .window .content ul li a:hover {
            color: rgba(0, 0, 0, 0.5); }
            .modal .window .content ul li a:hover img {
              -webkit-filter: grayscale(100%);
              filter: grayscale(100%); }
            .modal .window .content ul li a:hover figure:after {
              background: #141414; }
        .modal .window .content ul li h3 {
          font-size: 1.25rem;
          margin-bottom: 0; }
        .modal .window .content ul li p {
          display: none; }
          @media (min-width: 37.5rem) {
            .modal .window .content ul li p {
              display: block;
              font-size: 0.9375rem;
              line-height: 1.25rem; } }
.modal.closed {
  display: none; }
.modal.exit .window {
  animation: 0.5s fadeIn 0.5s both, 0.5s zoomIn 0.5s both; }

.comments {
  width: auto;
  max-width: 50rem;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  padding: 0 1.25rem; }
  .comments::after {
    content: '';
    display: table;
    clear: both; }
  .comments h3 {
    margin: 0 0 1.875rem;
    font-size: 1.875rem; }

footer {
  width: auto;
  max-width: 50rem;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid #e6e6e6;
  background: #ffffff;
  padding: 1.25rem 1.5625rem;
  margin-top: 3.125rem;
  margin-bottom: 7.5rem;
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  font-style: normal; }
  footer::after {
    content: '';
    display: table;
    clear: both; }
  @media (min-width: 37.5rem) {
    footer {
      margin-top: 6.25rem; } }
  footer p {
    text-decoration: none;
    color: #141414;
    font-size: 1rem;
    line-height: 1.5625rem; }
  footer span {
    font-weight: 700; }
  footer svg {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.625rem; }
    @media (min-width: 37.5rem) {
      footer svg {
        margin-right: 1.25rem; } }
    footer svg.love {
      width: 20px;
      height: 20px;
      fill: #ff0a16;
      margin-top: -0.125rem;
      margin-left: 0.1875rem;
      margin-right: 0.1875rem; }
  footer a {
    display: inline-block;
    fill: #808080;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #808080; }
    footer a:hover {
      fill: #ff0a16; }
    footer a.creator:hover {
      text-decoration: underline; }
  footer ul {
    padding: 0;
    list-style-type: none; }
    footer ul li {
      margin-bottom: 0.625rem; }
    footer ul a {
      text-decoration: none;
      font-size: 0.9375rem; }
      footer ul a:hover {
        text-decoration: underline; }

.main-page footer {
  background: #141414;
  border-top: 1px solid #2e2e2e; }
  .main-page footer p {
    color: #ffffff; }

.no-js .flex-grid article {
  opacity: 1; }
.no-js .preload {
  display: none; }