/**
 * Front page styles.
 */

/**
 * Variables.
 */

:root {
  --header-height-mobile: 52px;
  --header-height-desktop: 64px;
  --header-side-margin: 24px;
  --top-bar-spacer: 46px;
}


html,
body {
  margin: 0;
  padding: 0;
}

/**
 * No foucing way.
 */

.no-js {
  visibility: hidden;
  opacity: 0;
}

.js {
  visibility: visible;
  opacity: 1;
}

.header {
  position: fixed;
  width: 100%;
  z-index: 10;
  background: var(--primary-light);
  border-bottom: 1px solid var(--primary-neutral);
}

.header-spacer {
  height: var(--header-height-mobile);
}

.has-top-bar .header-spacer {
  height: calc(var(--header-height-mobile) + var(--top-bar-spacer));
}

.header .nav {
  height: var(--header-height-mobile);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

.sidebar-host .sidebar-item.close-btn-row {
  align-items: center;
  display: flex;
  height: var(--header-height-mobile);
  justify-content: flex-start;
}

/* Left third of header */
.header .nav-menu {
  display: flex;
  flex: 0;
  justify-content: flex-start;
}

/* Middle third of header */
.header .nav-logo {
  display: flex;
  flex: 0;
  justify-content: center;
  align-items: stretch;
}

/* Logo styles (in either left and middle, depending on width) */
.header .nav-logo-icon.mobile,
.header .nav-logo-icon.desktop {
  flex-direction: column;
  justify-content: center;
}

.header .nav-logo-icon.mobile {
  display: flex;
  /* Padding for usability, margin so its clear where hamburger/logo separate */
  margin: 0 16px;
  padding: 0 8px;
}

.header .nav-logo-icon.mobile img {
  height: 24px;
}

@media (min-width: 1000px) {
  .header .nav-logo-icon.mobile img {
    height: 46px;
    margin: 0 24px;
    padding: 0 16px;
    /* Center the letter 'Y' */
    transform: translate(0, 4px);
  }
}

.header .nav-logo-icon.desktop {
  display: none;
  padding: 0 24px;
}

.header .nav-logo-icon.desktop img {
  height: 46px;
  /* Center the letter 'Y' */
  transform: translate(0, 4px);
}

@media (min-width: 1300px) {
  .header .nav-logo-icon.mobile {
    display: none;
  }

  .header .nav-menu {
    /* Match .nav-links so .nav-logo stays centered */
    flex: 1;
  }

  .header .nav-logo-icon.desktop {
    display: flex;
  }
}

/* Right third of header */
.header .nav .nav-links {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}

.header .nav .nav-links .link-default,
.header .nav .nav-links .button {
  margin-right: var(--header-side-margin);
}

.sidebar-host .close-btn,
.header .nav .hamburger {
  cursor: pointer;
  display: inline-flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--header-side-margin);
  padding-right: 8px;
  text-decoration: none;
}

.header .nav .hamburger:after,
.header .nav .hamburger:before,
.header .nav .hamburger .hamburger-icon {
  background-color: var(--primary-dark);
  content: '';
  display: block;
  height: 3px;
  margin: 3.5px 0;
  cursor: pointer;
  border-radius: 3px;
}

.header .nav .hamburger:before {
  width: 18px;
  transition: width 0.1s ease-in;
}

.header .nav .hamburger .hamburger-icon {
  width: 24px;
  border-radius: 10px;
}

.header .nav .hamburger:after {
  width: 12px;
  transition: width 0.1s ease-in;
}

.header .nav .hamburger:hover:before {
  width: 12px;
  transition: width 0.1s ease-in;
}

.header .nav .hamburger:hover:after {
  width: 18px;
  transition: width 0.1s ease-in;
}

.header .nav .nav-links .link-default,
.header .nav .nav-links .button-neutral {
  display: none;
}

/**
 * Sections.
 */

.section {
  position: relative;
  padding: 60px 34px;
  box-sizing: border-box;
}

.section.fit-to-viewport {
  /* Note: Modules should set their own minimum functional height */
  height: calc(100vh - var(--header-height-mobile));
  max-height: 1080px;
  /* For portrait orientation */
}

.has-top-bar .section.fit-to-viewport {
  /* Note: Modules should set their own minimum functional height */
  height: calc(100vh - var(--header-height-mobile) - var(--top-bar-spacer));
}

.section .section-anchor {
  position: absolute;
  top: 0px;
}

.section .input-text,
.footer .input-text {
  margin: 6px 0;
}

/**
 * Sidebar.
 */

.sidebar-host {
  position: fixed;
  z-index: 100;
}

.sidebar-host .sidebar-overlay {
  display: none;
}

.sidebar-host.open .sidebar-overlay {
  cursor: pointer;
  display: block;
  height: 100vh;
  position: absolute;
  width: 100vw;
}

.sidebar-host .sidebar-container {
  background: var(--primary-dark);
  height: 100vh;
  left: -100vw;
  position: absolute;
  transition: left 0.3s ease-out;
  width: 304px;
}

@media (min-width: 700px) {
  .sidebar-host .sidebar-container {
    width: 454px;
  }
}

@media (min-width: 1400px) {
  .sidebar-host .sidebar-container {
    width: 576px;
  }
}

.sidebar-host.open .sidebar-container {
  left: 0;
}

.sidebar-host .sidebar-items {
  display: none;
}

.sidebar-host.open .sidebar-items {
  display: block;
  height: 100%;
  overflow-y: auto;
}

.sidebar-host .sidebar-item {
  display: block;
}

.sidebar-host .last-link-item::after {
  content: "";
  display: block;
  height: 24px;
}

.sidebar-host .sidebar-item.link-title {
  padding: 16px 0 16px 64px;
  text-decoration: none;
}

.sidebar-host .sidebar-item.button-row {
  margin: 16px 0 16px 64px;
}

.sidebar-host .button-row .button {
  width: 192px;
}

.sidebar-host .close-btn {
  color: white;
}

.sidebar-host .close-btn:hover {
  color: var(--primary-light-active);
}

.sidebar-host .link-title,
.sidebar-host .button {
  font-size: 18px;
}

@media (min-width: 700px) {

  .sidebar-host .link-title,
  .sidebar-host .button {
    font-size: 28px;
  }

  .sidebar-host .sidebar-item.link-title {
    padding: 20px 0 20px 112px;
  }

  .sidebar-host .sidebar-item.button-row {
    margin: 20px 0 20px 112px;
  }

  .sidebar-host .button-row .button {
    width: 256px;
  }
}

/**
 * 404
 */

.error-404 {
  width: 100%;
  background: var(--white);
}

.error-404 .page-header {
  margin: 1em 0;
  font-size: 4em;
  line-height: 0.9;
}

.error-404 .page-content {
  width: 100%;
  margin: 0 auto;
  padding: 4em 0;
  text-align: center;
}

.error-404 .page-content img {
  width: auto;
}

.error-404 h1 {
  color: var(--primary-dark);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.error-404 span.oops {
  padding-right: 0.2em;
}

.error-404 .accent {
  color: var(--primary-accent);
}

.error-404 p {
  padding: 1em 0 3em;
  color: var(--primary-dark);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.error-404 a,
.error-404 a:visited {
  text-decoration: none;
  color: var(--primary-dark);
}

/**
 * Footer.
 */

.footer {
  text-align: center;
  padding: 38px 34px 72px 34px;
}

.footer .subheadline {
  margin-bottom: 10px;
}

.footer .form {
  padding: 34px 24px;
}

.footer .button {
  max-width: 300px;
  width: 100%;
}

.footer-nav {
  margin-bottom: 18px;
}

.footer-nav-item {
  display: inline-block;
  margin: 0px 8px;
}

.footer li:first-child {
  margin-left: 0px;
}

.footer li:last-child {
  margin-right: 0px;
}

.footer .link-footer {
  color: var(--primary-neutral);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
}

.footer .link-footer:hover {
  color: var(--primary-dark);
}

.footer .social-icons-icon {
  display: inline-block;
  height: 36px;
  width: 36px;
  color: var(--primary-neutral);
  margin: 12px 20px;
}

.footer .social-icons-icon:hover {
  color: var(--primary-dark);
}

.footer .paid-for-by {
  color: var(--primary-dark);
  font-size: .5rem;
  font-weight: 500;
  border: 1px solid var(--primary-dark);
  max-width: 204px;
  margin: 14px auto;
  padding: 6px 19px;
}

.footer .all-rights-reserved {
  font-size: 0.5rem;
  color: var(--primary-dark);
  font-weight: 400;
}

.footer .all-rights-reserved .link-footer {
  font-size: 0.5rem;
  font-weight: 400;
  color: var(--primary-dark);
}

/**
 * Sidebar animation.
 */

.outer-container {
  position: absolute;
  overflow: hidden;
  display: flex;
  width: 100%;
  flex-direction: column;
  top: var(--header-height-mobile);
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--primary-dark);
  transition: transform 0.3s;
  transform: translate3d(0, 0, 0);
  -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
}

.outer-container-overlay {
  cursor: pointer;
  height: 100%;
  position: absolute;
  width: 100%;
}

.viewport:not(.is-sidebar-open) .outer-container-overlay,
.viewport:not(.is-sidebar-open) .sidebar-inner {
  display: none;
}

.inner-container {
  overflow-y: auto;
  pointer-events: all;
}

.viewport.is-sidebar-open .outer-container {
  transform: translate3d(70%, calc(var(--header-height-mobile) * -1 / 2), 0) scale(.75);
}

.viewport.is-sidebar-open .outer-container .inner-container {
  overflow-y: hidden;
  pointer-events: none;
}

.viewport.is-sidebar-open .header {
  transform: translate3d(0, calc(var(--header-height-mobile) * -1), 0);
}

/* Loop */
.loop-item {
  border-bottom: 1px solid var(--primary-dark);
  margin: 28px 0;
}

.loop-item .subheadline,
.loop-item .copy4 {
  padding-bottom: 8px;
}

.loop-item-wrapper {
  padding: 0 24px;
}

.loop-featured-image {
  height: 375px;
  background-size: cover;
  background-position: center;
  margin-bottom: 18px;
  width: calc(100% + 76px);
  margin-left: calc(-38px);
  margin-right: calc(-38px);
}

.loop-readmore {
  margin: 20px 0 28px;
}

.load-more {
  text-align: center;
  margin: 24px 0;
}

/* Blog loop */
.blog-list-container {
  margin: 0 auto;
  max-width: 800px;
}

.archive-list .headline2 {
  padding-top: 60px;
  padding-left: 24px;
}

/* Blog post */
.post-section .post-inner {
  margin: 0 auto;
  max-width: 800px;
  padding-left: 38px;
  padding-right: 38px;
}

.post-content a {
  color: var(--primary-light-active);
}

.post-content a:hover {
  text-decoration: underline;
}

.post-content p {
  margin-bottom: 20px;
  word-wrap: break-word;
}

.post-content ul,
.post-content ol {
  margin-bottom: 18px;
  margin-left: 20px;
}

.post-content ul li,
.post-content ol li {
  padding-bottom: 8px;
}

.post-content ol li {
  padding-left: 8px;
}

.post-content img {
  height: auto;
  width: calc(100% + 48px);
  margin-left: calc(-24px);
  margin-right: calc(-24px);
}

.post-content img[width="136"] {
  width: 136px;
}

.post-content hr {
  margin-bottom: 20px;
}

.post-featured-image {
  height: 375px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 18px;
}

blockquote {
  font-size: 20px;
  color: var(--primary-neutral);
}

blockquote div {
  margin-bottom: 20px;
}

/**
 * Page styles
 */
.page-section .page-inner {
  margin: 0 auto;
  max-width: 800px;
  padding-left: 32px;
  padding-right: 32px;
}

.page-content a {
  color: var(--primary-light-active);
}

.page-content a:hover {
  text-decoration: underline;
}

.page-content p {
  margin-bottom: 20px;
  word-wrap: break-word;
}

.page-content ul,
.page-content ol {
  margin-bottom: 18px;
  margin-left: 20px;
}

.page-content ul li,
.page-content ol li {
  padding-bottom: 8px;
}

.page-content ol li {
  padding-left: 8px;
}

.page-content img {
  height: auto;
  width: calc(100% + 48px);
  margin-left: calc(-24px);
  margin-right: calc(-24px);
}

.page-content img[width="136"] {
  width: 136px;
}

.page-content hr {
  margin-bottom: 20px;
}

.page-featured-image {
  height: 375px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 18px;
}

/**
 * But make it responsive.
 */

/**
 * Tablet.
 */

@media (min-width: 700px) {

  .header .nav .nav-links .link-default,
  .header .nav .nav-links .button-neutral {
    display: inline-block;
  }

  .header .nav .nav-links .link-default {
    color: var(--primary-dark);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 10px 0;
    letter-spacing: 0.88px;
    line-height: 22px;
  }

  .header .nav .nav-links .link-default:hover {
    color: var(--primary-light-active);
  }

  .header .nav .button {
    width: 160px;
  }

  .loop-item .subheadline,
  .loop-item .copy4 {
    padding-bottom: 12px;
  }

  .footer .copy {
    max-width: 35ch;
    margin: 0 auto;
  }

  .sidebar .button {
    width: 250px;
    max-width: 40%;
  }
}

/**
 * Min desktop.
 */

@media (min-width: 1000px) {

  /**
   * Top nav.
   */

  .header-spacer,
  .header .nav,
  .sidebar-host .sidebar-item.close-btn-row {
    height: var(--header-height-desktop);
  }

  .has-top-bar .header-spacer {
    height: calc(var(--header-height-desktop) + var(--top-bar-spacer));
  }

  /**
   * Sections.
   */

  .section {
    padding: 80px;
  }

  .section.fit-to-viewport {
    /* Note: Modules should set their own minimum functional height */
    height: calc(100vh - var(--header-height-desktop));
  }

  .has-top-bar .section.fit-to-viewport {
    /* Note: Modules should set their own minimum functional height */
    height: calc(100vh - var(--header-height-desktop) - var(--top-bar-spacer));
  }

  .section .subheadline {
    margin: 20px 0 20px 0;
    font-size: 32px;
    line-height: 1;
  }

  .section .copy {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
  }

  .section .label-tag {
    padding: 8px 13px 8px 12px;
    font-size: 18px;
  }

  .section .link-cta {
    font-size: 18px;
    letter-spacing: normal;
    line-height: 2;
  }

  .loop-item-wrapper {
    padding: 0;
  }

  .loop-item .subheadline,
  .loop-item .copy4 {
    padding-bottom: 16px;
  }

  .post-content,
  .post-inner .post-date,
  .post-inner .headline3 {
    padding-left: 0;
    padding-right: 0;
  }

  .post-content img {
    height: auto;
    width: 100%;
    margin: 0;
  }

  .post-featured-image {
    height: 800px;
  }

  .single-post .page-header-inner {
    max-width: 800px;
  }

  .page-content,
  .page-inner .page-date,
  .page-inner .headline3 {
    padding-left: 0;
    padding-right: 0;
  }

  .page-content img {
    height: auto;
    width: 100%;
    margin: 0;
  }

  .page-featured-image {
    height: 800px;
  }

  .loop-featured-image {
    height: 375px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .archive-list .headline2 {
    padding-left: 0;
  }

  .blog-list-container {
    max-width: 800px;
  }

  /**
   * Footer.
   */

  .footer {
    padding: 100px 100px 22px;
  }

  .footer .subheadline {
    margin-bottom: 24px;
    font-size: 40px;
  }

  .footer .form {
    padding: 44px 46px;
  }

  .footer .paid-for-by {
    margin: 19px auto;
  }
}

/**
 * Regular desktop.
 */

@media (min-width: 1300px) {
  .section.fit-to-viewport {
    /* Limit height in portrait orientation while being sensible for large monitor */
    max-height: 1440px;
  }

  /**
   * Padding.
   */

  .section {
    padding: 100px;
  }

  .section .subheadline {
    margin: 34px 0 24px 0;
    font-size: 34px;
    line-height: 1;
  }

  .section .copy {
    font-size: 20px;
    line-height: 1.8;
    font-weight: 500;
  }

  .section .label-tag {
    padding: 8px 13px 8px 12px;
    font-size: 22px;
  }

  .section .link-cta {
    font-size: 22px;
  }

  /**
   * Max widths.
   */

  .section .section-inner {
    max-width: 1440px;
    margin: 0 auto;
  }

}

/* Material Icon rules. Consider moving these into base.css */

.material-icons {
  vertical-align: bottom;
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}