/*
 * General
 */
.container {
  max-width: 700px;
  margin: auto;
}
.blog-main,
.home {
  max-width: 700px;
  margin: auto;
}

/*
 * Homepage
 */
.home {
  text-align: center;
}
.home .blog-avatar {
  height: 140px;
  width: 140px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  margin: 1em auto;
}
.home .blog-description {
  font-size: 18px;
  color: #9a9a9a;
  line-height: 30px;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  font-family: "Lato", sans-serif;
  border-bottom: 1px solid #dadada;
}
.blog-main h1,
.blog-main h2 {
  color: #353535;
  text-align: left;
}

/*
 * Blog post
 */
.outer-container {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}
.back {
  color: #9a9a9a;
  display: block;
  max-width: 700px;
  margin: 0 auto 2em auto;
  font-family: "Lato", sans-serif;
  font-size: 16px;
}
.back:before {
  content: "←";
  display: inline-block;
  position: relative;
  margin-right: 8px;
}
.back a {
  color: #9a9a9a;
}
.back a:hover {
  text-decoration: underline;
}
.blog-post {
  margin-bottom: 3rem;
}
.blog-post h2 {
  margin: 0;
}
.blog-post-meta {
  color: #9a9a9a;
  font-family: "Lato", sans-serif;
  margin-bottom: 8px;
}
.post-part.single img {
  width: 100%;
  height: auto;
}

/**
 * Text Slice
 */
.post-part.single a {
  text-decoration: none;
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.8) 75%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.8) 75%
  );
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0 23px;
}
.post-part li {
  list-style-type: initial;
  margin-left: 1em;
}
@media (max-width: 767px) {
  .post-part.single a {
    background-position: 0 21px;
  }
}

/**
 * Image Slice
 */
.full-width-image {
  height: 400px;
  position: relative;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  background-color: white;
  background-size: cover;
  color: white;
  margin-bottom: 3rem;
}
.full-width-image::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
}
.full-width-image::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: -moz-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0) 1%,
    rgba(0, 0, 0, 0.05) 80%,
    rgba(0, 0, 0, 0.1) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
  background: -webkit-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0) 1%,
    rgba(0, 0, 0, 0.05) 80%,
    rgba(0, 0, 0, 0.1) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
  background: -o-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0) 1%,
    rgba(0, 0, 0, 0.05) 80%,
    rgba(0, 0, 0, 0.1) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
  background: -ms-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0) 1%,
    rgba(0, 0, 0, 0.05) 80%,
    rgba(0, 0, 0, 0.1) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0) 1%,
    rgba(0, 0, 0, 0.05) 80%,
    rgba(0, 0, 0, 0.1) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
}
.full-width-image .wrapper {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.full-width-image .image-label {
  margin-bottom: 1rem;
  font-size: 50px;
  font-weight: 900;
  line-height: 60px;
  font-style: normal;
  color: #ffffff;
}
.post-part.single .image-full-width + .image-label {
  width: 100%;
}
.post-part.single .image-label {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: #949494;
}
.block-img {
  margin-bottom: 24px;
}
.image-label {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: #949494;
}
@media (max-width: 767px) {
  .full-width-image .image-label {
    font-size: 36px;
    line-height: 45px;
  }
  .full-width-image {
    padding: 5px;
    height: 240px;
  }
  .full-width-image .wrapper {
    width: 80%;
  }
}
@media screen and (min-width: 768px) {
  /* Blog post images */
  .block-img.emphasized {
    width: 130%;
    margin: 0 -15% 2rem -15%;
  }
}

/*
 * Quote slice
 */
.block-quotation {
  margin-bottom: 2rem;
  display: inline-block;
  font-style: italic;
  font-size: 24px;
}
.block-quotation:before {
  content: "« ";
}
.block-quotation:after {
  content: " »";
}
.block-citation {
  display: inline-block;
  font-style: italic;
  border-left: solid #b4b4b4 4px;
  padding-left: 10px;
}
@media screen and (min-width: 920px) {
  .post-part.single .block-quotation {
    width: 130%;
    margin: 0 -15% 2rem -15%;
    font-size: 30px;
    padding: 0;
  }
}

/*
 * Loader animation
 */
#loader {
  position: fixed;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.lds-ripple {
  width: 64px;
  height: 64px;
}
.lds-ripple:before,
.lds-ripple:after {
  content: "";
  position: absolute;
  border: 4px solid #333;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple:after {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

/*
 * 404 error page
 */
.not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 50vw;
  align-items: center;
}
.not-found a {
  text-decoration: underline;
}

/*
 * Footer
 */
footer {
  max-width: 700px;
  margin: 0 auto;
  color: #9a9a9a;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-style: italic;
  text-align: center;
}
footer p {
  border-top: 1px solid #dadada;
  padding: 2rem 0;
  margin-bottom: 0;
}
footer a {
  font-weight: bold;
}
.footer-logo {
  width: 30px;
  margin-top: 10px;
}

/*
 * Media Queries
 */
@media (max-width: 767px) {
  .home,
  .blog-main,
  .container,
  footer {
    padding: 0 20px;
  }
  .post-part,
  .blog-main {
    font-size: 18px;
  }
  .post-part pre {
    font-size: 14px;
  }
  h1 {
    font-size: 36px;
    line-height: 45px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 18px;
  }
  .blog-post-meta,
  .blog-post-meta {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  /* Blog post images */
  .post-part.single .block-citation {
    margin: 20px 0;
  }
  .blog-post-meta {
    font-size: 16px;
  }
}

/* vh vw fallback for ios7 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .main .full-width-image.single {
    height: 1024px;
  }
  .main .post-part.single .image-full-width {
    width: 768px;
  }
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  .main .full-width-image.single {
    height: 768px;
  }
  .main .post-part.single .image-full-width {
    width: 768px;
  }
}

@media screen and (device-aspect-ratio: 40/71) {
  .main .full-width-image.single {
    height: 530px;
  }
  .main .post-part.single .image-full-width {
    width: 530px;
  }
}