/* Bentoism */
/* Written in Sass. run `make sass` to compile ~ */
* {
  box-sizing: border-box; }

html {
  height: 100%; }

body {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  font-family: sans-serif;
  line-height: 1.3;
  font-size: 1.06em;
  padding: 44px;
  min-height: 100vh; }
  body[data-template="home"], body[data-template="error"], body[data-template="section"] {
    height: 100%;
    min-height: auto; }

img {
  max-width: 100%; }

figure {
  margin-left: 0;
  margin-right: 0;
}

.frame {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none; }
  .frame .corner {
    position: absolute;
    width: 44px;
    height: 44px;
    box-sizing: content-box; }
    .frame .corner.top {
      top: 0;
      border-bottom: 1px solid black; }
    .frame .corner.left {
      left: 0;
      border-right: 1px solid black; }
    .frame .corner.right {
      right: 0;
      border-left: 1px solid black; }
    .frame .corner.bottom {
      bottom: 0;
      border-top: 1px solid black; }
  .frame .center {
    position: absolute;
    top: 44px;
    left: 44px;
    right: 44px;
    bottom: 44px;
    border: 1px solid black; }

#background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  transition: opacity 2s;
  display: block;
  visibility: visible; }
  #background-image.shown {
    opacity: 1; }
  #background-image img {
    max-width: none;
    min-width: 100%;
    width: auto;
    height: 150vh;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
  #background-image #background-image-cover {
    opacity: 0;
    transition: opacity 2s; }

div.content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; }

nav.site-nav, nav.section-nav, nav.about-nav {
  position: relative;
  width: 100%;
  font-size: 0.9em;
  z-index: 1; }
  nav.site-nav button.mobile-nav-button, nav.section-nav button.mobile-nav-button, nav.about-nav button.mobile-nav-button {
    display: none; }
  nav.site-nav #future-us, nav.section-nav #future-us, nav.about-nav #future-us {
    background: url("../future-us.png");
    background-size: 65px auto;
    background-repeat: no-repeat;
    background-position: center center;
    height: 46px;
    max-width: 65px;
    margin: 0.45em auto 0.25em; }
  nav.site-nav ul, nav.section-nav ul, nav.about-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%; }
    nav.site-nav ul li, nav.section-nav ul li, nav.about-nav ul li {
      list-style-type: none;
      margin: 0;
      flex: 1 0 12.5%;
      border: 1px solid black;
      margin-left: -1px;
      position: relative; }
      nav.site-nav ul li:first-child, nav.section-nav ul li:first-child, nav.about-nav ul li:first-child {
        margin-left: 0; }
      nav.site-nav ul li.title, nav.section-nav ul li.title, nav.about-nav ul li.title {
        text-align: center; }
      nav.site-nav ul li a, nav.section-nav ul li a, nav.about-nav ul li a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1.1em 1.25em 1.15em;
        color: inherit;
        text-decoration: none;
        background-color: transparent;
        transition: 2s background-color; }
        nav.site-nav ul li a.current, nav.site-nav ul li a.clicked, nav.site-nav ul li a:hover, nav.section-nav ul li a.current, nav.section-nav ul li a.clicked, nav.section-nav ul li a:hover, nav.about-nav ul li a.current, nav.about-nav ul li a.clicked, nav.about-nav ul li a:hover {
          background-color: white; }
        @media (hover: none) {
          nav.site-nav ul li a:hover, nav.section-nav ul li a:hover, nav.about-nav ul li a:hover {
            background-color: transparent; }
          nav.site-nav ul li a:active, nav.section-nav ul li a:active, nav.about-nav ul li a:active {
            background-color: white; } }
        nav.site-nav ul li a span.number, nav.section-nav ul li a span.number, nav.about-nav ul li a span.number {
          display: block;
          margin-bottom: 1em; }
        nav.site-nav ul li a h1, nav.section-nav ul li a h1, nav.about-nav ul li a h1 {
          font-size: 1em;
          margin-top: 0; }
      nav.site-nav ul li ul.subpage-links, nav.section-nav ul li ul.subpage-links, nav.about-nav ul li ul.subpage-links {
        display: none; }

nav.site-nav {
  z-index: 2; }

nav.section-nav {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0; }
  nav.section-nav ul li {
    flex: 1 1 25%;
    border-top: none; }
    nav.section-nav ul li a {
      padding: 0.75em;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center; }
      nav.section-nav ul li a.current, nav.section-nav ul li a.clicked {
        background-color: rgba(255, 255, 255, 0.4); }
      nav.section-nav ul li a:hover {
        background-color: white; }

main {
  position: relative;
  flex: 1 1 100%;
  opacity: 1;
  transition: background 2s; }
  main.home {
    border: none; }
  main section {
    font-size: 1.35em; }
    main section a {
      color: black;
      transition: background 2s; }
    main section a:hover {
      background: white; }
  main section.title, main section.slide {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 56px 12.5% 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: opacity;
    overflow: hidden; }
    main section.title > *, main section.slide > * {
      z-index: 1; }
    main section.title > nav.side-nav, main section.slide > nav.side-nav {
      position: absolute;
      z-index: 0; }
  main section.title {
    flex-flow: column nowrap; }
    main section.title .title-text {
      text-align: center; }
      main section.title .title-text p {
        margin: 1em 0; }
    main section.title .intro {
      text-align: center; }
      main section.title .intro a.start-button {
        border-radius: 50%;
        border: 1px solid black;
        transition: 2s background-color;
        color: inherit;
        text-decoration: none;
        width: 150px;
        height: 150px;
        line-height: 150px;
        display: inline-block;
        margin-top: 2.6em; }
        main section.title .intro a.start-button:hover {
          background-color: white; }
        @media (hover: none) {
          main section.title .intro a.start-button:hover {
            background-color: transparent; }
          main section.title .intro a.start-button:active {
            background-color: white; } }
    main section.title a#community-link {
      margin-top: 150px;
      text-decoration: none;
      font-size: 14px;
      display: inline-block !important;
      text-align: center; }
      main section.title a#community-link:hover {
        background: transparent; }
    main section.title h2 {
      margin-top: 0;
      font-size: 2em;
      font-weight: 300;
      text-align: center; }
    main section.title h3 {
      font-size: 1.5em;
      font-weight: 400;
      text-align: center; }
  main section.slide .slide-image {
    flex: 1 0 50%;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 24px; }
    main section.slide .slide-image img {
      max-width: 100%;
      max-height: 100%; }
  main section.slide .slide-text {
    flex: 1 0 50%;
    font-weight: 400;
    line-height: 1.4;
    padding-right: 1.5em; }
    main section.slide .slide-text .slide-text-inner {
      white-space: pre-line; }
    main section.slide .slide-text span.highlight {
      position: relative;
      background: white;
      outline: 1px solid white; }
    main section.slide .slide-text .small-text {
      font-size: 15px;
      line-height: 20px; }
      main section.slide .slide-text .small-text a {
        color: black; }
    main section.slide .slide-text button {
      background-color: transparent;
      font-family: sans-serif;
      font-size: 1em;
      border: 1px solid black;
      color: black;
      cursor: pointer;
      padding: 0.4em 0.55em;
      transition: background-color 2s; }
      main section.slide .slide-text button:hover {
        background: white; }
    main section.slide .slide-text .mini-bento {
      position: absolute;
      bottom: 28px;
      left: calc(6.25% - 27.5px);
      width: 55px;
      height: 55px; }
      main section.slide .slide-text .mini-bento.now-me {
        background: url("../mini-bento/now_me.svg"); }
      main section.slide .slide-text .mini-bento.now-us {
        background: url("../mini-bento/now_us.svg"); }
      main section.slide .slide-text .mini-bento.future-me {
        background: url("../mini-bento/future_me.svg"); }
      main section.slide .slide-text .mini-bento.future-us {
        background: url("../mini-bento/future_us.svg"); }
  main section.byob {
    display: none;
    position: absolute;
    top: -126px;
    left: 0;
    bottom: 0;
    right: 0;
    background: white;
    z-index: 2; }
    main section.byob .byob-back, main section.byob .byob-open {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0.75em;
      border: 1px solid black;
      color: black;
      text-decoration: none;
      font-size: 15.25px;
      background: white; }
    main section.byob .byob-open {
      right: 0;
      left: auto; }
    main section.byob iframe {
      border: 1px solid black;
      width: 100%;
      height: 100%; }
  main section.longform-text {
    position: relative;
    overflow-y: auto;
    height: 100%; }
    main section.longform-text .longform-text-content {
      padding: 88px 0;
      margin: 0 auto;
      width: 75%; }
      main section.longform-text .longform-text-content h2 {
        display: none; }
      main section.longform-text .longform-text-content h3 {
        font-size: 1em;
        background: white;
        display: inline-block;
        font-weight: normal;
        margin-top: 2em; }
      main section.longform-text .longform-text-content .medium {
        max-width: 425px; }
      main section.longform-text .longform-text-content .medium-large {
        max-width: 550px; }
      main section.longform-text .longform-text-content blockquote {
        padding: 2em 12.5% 0; }
      main section.longform-text .longform-text-content .highlight {
        background: white; }
      main section.longform-text .longform-text-content form {
        opacity: 1;
        transition: 2s opacity; }
      main section.longform-text .longform-text-content .message {
        opacity: 1;
        transition: 2s opacity; }
      main section.longform-text .longform-text-content .form-zone {
        margin-top: 2em; }
        main section.longform-text .longform-text-content .form-zone form {
          display: flex;
          align-items: flex-end;
          flex-wrap: wrap; }
          main section.longform-text .longform-text-content .form-zone form .email {
            flex: 1 1 100%; }
          main section.longform-text .longform-text-content .form-zone form label {
            font-size: 15px;
            margin-bottom: 0.5em;
            margin-top: 1em;
            display: block; }
        main section.longform-text .longform-text-content .form-zone input {
          width: 100%;
          background-color: transparent;
          font-family: sans-serif;
          font-size: 1em;
          border: 1px solid black;
          color: black;
          padding: 0.4em 0.55em; }
          main section.longform-text .longform-text-content .form-zone input::placeholder {
            color: black; }
        main section.longform-text .longform-text-content .form-zone button {
          background-color: transparent;
          font-family: sans-serif;
          font-size: 1em;
          border: 1px solid black;
          color: black;
          cursor: pointer;
          padding: 0.4em 0.55em;
          margin-top: 1em;
          transition: 2s background-color; }
          main section.longform-text .longform-text-content .form-zone button:hover {
            background-color: white; }
      main section.longform-text .longform-text-content a.button {
        padding: 0.4em 0.55em;
        border: 1px solid black;
        color: black;
        text-decoration: none;
        display: inline-block;
        transition: 2s background-color; }
        main section.longform-text .longform-text-content a.button:hover {
          background-color: white; }
      main section.longform-text .longform-text-content .thank-you {
        display: none; }

.slide-counter {
  position: absolute;
  bottom: 2em;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.05em; }
  .slide-counter.persistent {
    opacity: 0; }

nav.side-nav {
  position: absolute;
  width: 100%;
  height: 100%;
  height: calc(100% - 28px);
  z-index: 0; }
  nav.side-nav .prev-button-aligner, nav.side-nav .next-button-aligner {
    position: absolute;
    top: 0;
    width: 12.5%;
    height: 100%;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center; }
  nav.side-nav .prev-button-aligner {
    left: 0; }
  nav.side-nav .next-button-aligner {
    right: 0; }
  nav.side-nav .prev-button-container, nav.side-nav .next-button-container {
    display: block;
    width: 100%;
    max-width: 100px; }
  nav.side-nav a.prev-button, nav.side-nav a.next-button {
    display: block;
    position: relative;
    border-radius: 50%;
    border: 1px solid black;
    transition: 2s background-color;
    color: inherit;
    text-decoration: none;
    width: 100%;
    padding-bottom: 100%;
    background: url("../arrow.svg");
    background-size: cover; }
    nav.side-nav a.prev-button:hover, nav.side-nav a.next-button:hover {
      background-color: white; }
    @media (hover: none) {
      nav.side-nav a.prev-button:hover, nav.side-nav a.next-button:hover {
        background-color: transparent; }
      nav.side-nav a.prev-button:active, nav.side-nav a.next-button:active {
        background-color: white; } }
  nav.side-nav a.next-button {
    transform: rotate(180deg); }
  nav.side-nav.persistent {
    position: static;
    display: none;
    width: auto;
    height: auto; }
    nav.side-nav.persistent .prev-button-aligner {
      top: auto;
      bottom: 28px;
      height: calc(100% - 120px);
      z-index: 2; }
    nav.side-nav.persistent .next-button-aligner {
      top: auto;
      bottom: 28px;
      height: calc(100% - 120px);
      z-index: 2; }

@media screen and (max-width: 948px) {
  body {
    padding: 0; }

  .frame {
    display: none !important; }

  .slide-counter {
    display: none !important; }

  nav.section-nav {
    display: none; }

  nav.site-nav {
    position: absolute;
    top: 0;
    left: 0;
    top: 18px;
    left: 18px;
    width: 55px;
    height: 55px;
    z-index: 10;
    overflow: hidden; }
    nav.site-nav.active {
      width: calc(100% - 36px);
      height: calc(100vh - 18px);
      overflow: scroll; }
      nav.site-nav.active button.mobile-nav-button {
        background-color: white;
        margin-bottom: 18px; }
    nav.site-nav button.mobile-nav-button {
      border-radius: 50%;
      border: 1px solid black;
      transition: 2s background-color;
      color: inherit;
      text-decoration: none;
      display: block;
      width: 55px;
      height: 55px;
      padding: 0;
      background: url("../menu.svg");
      background-size: contain;
      cursor: pointer; }
      nav.site-nav button.mobile-nav-button:hover {
        background-color: white; } }
    @media screen and (max-width: 948px) and (hover: none) {
      nav.site-nav button.mobile-nav-button:hover {
        background-color: transparent; }
      nav.site-nav button.mobile-nav-button:active {
        background-color: white; } }
@media screen and (max-width: 948px) {
      nav.site-nav button.mobile-nav-button:focus {
        outline: none; }
      nav.site-nav button.mobile-nav-button.active {
        background-color: white; }
    nav.site-nav .ul-container {
      display: none; }
    nav.site-nav ul {
      flex-wrap: wrap;
      margin-bottom: 18px; }
      nav.site-nav ul li {
        flex: 1 0 100%;
        margin-left: 0;
        margin-top: -1px;
        text-align: center; }
        nav.site-nav ul li:first-child {
          margin-top: 0; }
        nav.site-nav ul li.half-size {
          flex: 1 1 50%; }
          nav.site-nav ul li.half-size:last-child {
            margin-left: -1px;
            flex: 1 1 calc(50% + 1px); }
        nav.site-nav ul li a {
          height: auto; }
          nav.site-nav ul li a span.number {
            display: inline;
            margin-right: 0.25em;
            margin-bottom: 0; }
        nav.site-nav ul li ul.subpage-links {
          margin-bottom: 0;
          display: none; }
          nav.site-nav ul li ul.subpage-links li {
            border: none;
            border-top: 1px dotted black; }
            nav.site-nav ul li ul.subpage-links li a:hover, nav.site-nav ul li ul.subpage-links li a.current, nav.site-nav ul li ul.subpage-links li a.clicked {
              background-color: rgba(255, 255, 255, 0.4); }
        nav.site-nav ul li a.current + ul.subpage-links {
          display: block; }
      nav.site-nav ul .about-subpage-links li {
        background-color: transparent !important; }
      nav.site-nav ul .about-subpage-links li a {
        border-bottom: 1px solid #000;
        background-color: transparent !important;
        transition: 2s background-color !important; }
        nav.site-nav ul .about-subpage-links li a:hover {
          background-color: rgba(70, 121, 203, 0.2) !important; }
      nav.site-nav ul .about-subpage-links li:last-child a {
        border-bottom: 0; }
      nav.site-nav ul .about-subpage-links li a.current {
        background-color: rgba(70, 121, 203, 0.2) !important; }

  main {
    border: none; }
    main section {
      font-size: 1.15em; }
    main section.title {
      align-items: normal;
      padding: 18px;
      padding-top: 73px;
      overflow-y: auto; }
      main section.title .title-text {
        padding-top: 1em; }
    main section.slide {
      padding: 0;
      padding-top: 73px;
      overflow-y: auto;
      flex-wrap: wrap;
      align-items: normal; }
      main section.slide .slide-image {
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        padding: 18px;
        align-items: normal; }
        main section.slide .slide-image img {
          max-width: 100%;
          max-height: 50vh; }
      main section.slide .slide-text {
        flex: 1 0 100%;
        padding: 18px;
        padding-bottom: 54px; }
        main section.slide .slide-text .mini-bento {
          position: relative;
          left: auto;
          bottom: auto;
          margin-bottom: 18px; }
    main section.longform-text .longform-text-content {
      padding-top: 91px;
      padding-left: 18px;
      padding-right: 18px;
      padding-bottom: 18px;
      width: 100%; }
      main section.longform-text .longform-text-content h2 {
        display: block;
        margin-top: 0;
        font-size: inherit;
        font-weight: inherit;
        text-decoration: underline; }

  nav.side-nav, nav.persistent.side-nav {
    position: absolute;
    top: 18px;
    left: auto;
    right: 18px;
    bottom: auto;
    width: 0;
    height: 0;
    z-index: 1; }
    nav.side-nav .next-button-aligner, nav.side-nav .prev-button-aligner, nav.persistent.side-nav .next-button-aligner, nav.persistent.side-nav .prev-button-aligner {
      left: auto;
      bottom: auto;
      width: auto;
      height: auto;
      padding: 0; }
    nav.side-nav .prev-button-aligner, nav.persistent.side-nav .prev-button-aligner {
      right: 68px; }
    nav.side-nav .next-button-container, nav.side-nav .prev-button-container, nav.persistent.side-nav .next-button-container, nav.persistent.side-nav .prev-button-container {
      width: 55px;
      max-width: none; }
    nav.side-nav a.prev-button, nav.side-nav a.next-button, nav.persistent.side-nav a.prev-button, nav.persistent.side-nav a.next-button {
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      width: 55px;
      height: 55px; } }
.about-nav-item {
  z-index: 1000; }

.about-dropdown {
  position: absolute;
  left: -1px;
  width: calc(100% + 2px);
  display: none;
  border: 1px solid black;
  border-bottom: 0; }
  .about-dropdown a {
    border-bottom: 1px solid black; }

.blog-header {
  padding: 8.333% 4% !important; }

.blog-header a {
  color: #4679cb;
  text-decoration: none; }

.blog-header h2 {
  text-align: center; }

.blog-header-description {
  margin-bottom: 60px;
  text-align: center;
  line-height: 27px; }

.continue-reading-button {
  display: inline-block;
  color: white;
  font-size: 14px;
  text-decoration: none;
  opacity: 1;
  background: #4679cb;
  padding: 10px;
  margin-top: 30px; }
  .continue-reading-button:hover {
    background: #4679cb;
    opacity: 0.7;
    transition: opacity 1s; }

.featured-tags {
  display: flex;
  flex-flow: row wrap;
  justify-content: center; }
  .featured-tags a {
    text-decoration: none;
    max-width: 200px;
    min-height: 200px;
    color: #4679cb;
    text-align: left;
    margin: 10px;
    padding: 18px;
    border: 1px solid rgba(70, 121, 203, 0.2); }
    .featured-tags a:hover {
      border: 1px solid #4679cb; }
    .featured-tags a:last-child {
      margin-right: 0; }
    .featured-tags a .description {
      font-size: 14px; }
    .featured-tags a h3 {
      margin-top: 0;
      text-align: left;
      margin-bottom: 12px; }

.tag-description {
  font-size: 14px;
  text-align: center;
  display: block;
  margin-bottom: 10px; }

.tag-count {
  font-size: 14px;
  text-align: center; }

body[data-template="videos"] .persistent.side-nav, body[data-template="video"] .persistent.side-nav {
  visibility: hidden;
  pointer-events: none; }

body[data-template="video"] {
  height: 100%;
  min-height: auto; }
  body[data-template="video"] .content {
    overflow: scroll; }

main section.videos h2, main section.video h2 {
  margin: 0.666em 0 0.333em;
  font-size: 1em; }
main section.videos div.videos__subtitle, main section.videos div.video__subtitle, main section.video div.videos__subtitle, main section.video div.video__subtitle {
  font-size: 1em; }
main section.videos {
  position: relative;
  width: calc(100% + 1em);
  overflow-y: auto;
  height: 100%;
  padding: 4em 0;
  display: flex;
  flex-wrap: wrap; }
  @media screen and (max-width: 948px) {
    main section.videos {
      width: 100%;
      display: block;
      padding-left: 18px;
      padding-right: 18px; } }
  main section.videos article.videos__video {
    flex: 0 0 33.33%;
    margin-bottom: 1em;
    height: 13.5em;
    position: relative; }
    @media screen and (max-width: 948px) {
      main section.videos article.videos__video {
        height: 10em; } }
    main section.videos article.videos__video .video-link-container {
      position: relative;
      width: calc(100% - 1em);
      height: 100%;
      border: 1px solid black; }
      @media screen and (max-width: 948px) {
        main section.videos article.videos__video .video-link-container {
          width: 100%; } }
      main section.videos article.videos__video .video-link-container h2 {
        margin-top: 0; }
      main section.videos article.videos__video .video-link-container a {
        height: 100%;
        display: block;
        text-decoration: none;
        color: inherit;
        padding: 1.25em;
        padding-bottom: 0.75em;
        transition: 2s background-color; }
        main section.videos article.videos__video .video-link-container a:hover {
          background-color: white; }
      main section.videos article.videos__video .video-link-container::before {
        content: "";
        width: 1px;
        height: 52px;
        right: 43px;
        bottom: 22px;
        position: absolute;
        border-right: 1px solid black;
        pointer-events: none; }
      main section.videos article.videos__video .video-link-container::after {
        content: "";
        width: 35px;
        height: 35px;
        right: 25px;
        bottom: 30px;
        position: absolute;
        transform: rotate(45deg);
        border-top: 1px solid black;
        border-right: 1px solid black;
        pointer-events: none; }
main section.video {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 1em 16.667%;
  font-size: 0.9em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  @media screen and (max-width: 948px) {
    main section.video {
      font-size: 1em;
      padding-left: 18px;
      padding-right: 18px; } }
  main section.video .video__container {
    width: 100%;
    max-width: 85vh;
    margin: 0 auto; }
    main section.video .video__container h2 {
      text-align: center; }
    main section.video .video__container .video__subtitle {
      text-align: center; }
    main section.video .video__container .video__embed {
      position: relative;
      width: 100%;
      padding-top: 56.25%; }
      main section.video .video__container .video__embed iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none; }
  main section.video > nav.side-nav {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; }
    @media screen and (max-width: 948px) {
      main section.video > nav.side-nav {
        top: 18px;
        left: auto;
        right: 18px;
        width: 100%; } }
    main section.video > nav.side-nav .prev-button-aligner, main section.video > nav.side-nav .next-button-aligner {
      pointer-events: all; }

nav.site-nav ul li.about-description, nav.site-nav ul li.section-link.about-sky-link {
  display: none; }

div#about-white-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: white;
  opacity: 0;
  transition: opacity 2s; }

body[data-template="about"] #background-image, body[data-template="softdoc"] #background-image, body[data-template="blog"] #background-image, body[data-template="blogpost"] #background-image, body[data-template="join"] #background-image {
  opacity: 0;
  transition: opacity 2s, visibility 0s 2s;
  visibility: hidden; }
body[data-template="about"] #about-white-mask, body[data-template="softdoc"] #about-white-mask, body[data-template="blog"] #about-white-mask, body[data-template="blogpost"] #about-white-mask, body[data-template="join"] #about-white-mask {
  opacity: 1; }
body[data-template="about"] .frame, body[data-template="softdoc"] .frame, body[data-template="blog"] .frame, body[data-template="blogpost"] .frame, body[data-template="join"] .frame {
  pointer-events: none;
  border-color: #b4ccfe; }
  body[data-template="about"] .frame .corner, body[data-template="softdoc"] .frame .corner, body[data-template="blog"] .frame .corner, body[data-template="blogpost"] .frame .corner, body[data-template="join"] .frame .corner {
    border-color: #b4ccfe; }
  body[data-template="about"] .frame .center, body[data-template="softdoc"] .frame .center, body[data-template="blog"] .frame .center, body[data-template="blogpost"] .frame .center, body[data-template="join"] .frame .center {
    border-color: #b4ccfe; }
body[data-template="about"] nav.site-nav ul li, body[data-template="softdoc"] nav.site-nav ul li, body[data-template="blog"] nav.site-nav ul li, body[data-template="blogpost"] nav.site-nav ul li, body[data-template="join"] nav.site-nav ul li {
  border-color: #b4ccfe;
  color: #4679cb; }
  body[data-template="about"] nav.site-nav ul li.title #future-us, body[data-template="softdoc"] nav.site-nav ul li.title #future-us, body[data-template="blog"] nav.site-nav ul li.title #future-us, body[data-template="blogpost"] nav.site-nav ul li.title #future-us, body[data-template="join"] nav.site-nav ul li.title #future-us {
    background-image: url("../future-us-blue.png");
    mix-blend-mode: multiply; }
  body[data-template="about"] nav.site-nav ul li a.current, body[data-template="about"] nav.site-nav ul li a.clicked, body[data-template="about"] nav.site-nav ul li a:hover, body[data-template="softdoc"] nav.site-nav ul li a.current, body[data-template="softdoc"] nav.site-nav ul li a.clicked, body[data-template="softdoc"] nav.site-nav ul li a:hover, body[data-template="blog"] nav.site-nav ul li a.current, body[data-template="blog"] nav.site-nav ul li a.clicked, body[data-template="blog"] nav.site-nav ul li a:hover, body[data-template="blogpost"] nav.site-nav ul li a.current, body[data-template="blogpost"] nav.site-nav ul li a.clicked, body[data-template="blogpost"] nav.site-nav ul li a:hover, body[data-template="join"] nav.site-nav ul li a.current, body[data-template="join"] nav.site-nav ul li a.clicked, body[data-template="join"] nav.site-nav ul li a:hover {
    background-color: rgba(70, 121, 203, 0.2); }
  @media (hover: none) {
    body[data-template="about"] nav.site-nav ul li a:hover, body[data-template="softdoc"] nav.site-nav ul li a:hover, body[data-template="blog"] nav.site-nav ul li a:hover, body[data-template="blogpost"] nav.site-nav ul li a:hover, body[data-template="join"] nav.site-nav ul li a:hover {
      background-color: transparent; }
    body[data-template="about"] nav.site-nav ul li a:active, body[data-template="softdoc"] nav.site-nav ul li a:active, body[data-template="blog"] nav.site-nav ul li a:active, body[data-template="blogpost"] nav.site-nav ul li a:active, body[data-template="join"] nav.site-nav ul li a:active {
      background-color: rgba(70, 121, 203, 0.2); } }
  body[data-template="about"] nav.site-nav ul li.section-link.about-sky-link, body[data-template="softdoc"] nav.site-nav ul li.section-link.about-sky-link, body[data-template="blog"] nav.site-nav ul li.section-link.about-sky-link, body[data-template="blogpost"] nav.site-nav ul li.section-link.about-sky-link, body[data-template="join"] nav.site-nav ul li.section-link.about-sky-link {
    display: block;
    color: transparent;
    background: none; }
    body[data-template="about"] nav.site-nav ul li.section-link.about-sky-link a.clicked, body[data-template="about"] nav.site-nav ul li.section-link.about-sky-link a:hover, body[data-template="softdoc"] nav.site-nav ul li.section-link.about-sky-link a.clicked, body[data-template="softdoc"] nav.site-nav ul li.section-link.about-sky-link a:hover, body[data-template="blog"] nav.site-nav ul li.section-link.about-sky-link a.clicked, body[data-template="blog"] nav.site-nav ul li.section-link.about-sky-link a:hover, body[data-template="blogpost"] nav.site-nav ul li.section-link.about-sky-link a.clicked, body[data-template="blogpost"] nav.site-nav ul li.section-link.about-sky-link a:hover, body[data-template="join"] nav.site-nav ul li.section-link.about-sky-link a.clicked, body[data-template="join"] nav.site-nav ul li.section-link.about-sky-link a:hover {
      background: none !important; }
  body[data-template="about"] nav.site-nav ul li.about-description, body[data-template="softdoc"] nav.site-nav ul li.about-description, body[data-template="blog"] nav.site-nav ul li.about-description, body[data-template="blogpost"] nav.site-nav ul li.about-description, body[data-template="join"] nav.site-nav ul li.about-description {
    flex: 0 0 66.667%;
    display: flex;
    align-items: center;
    padding: 1.25em 2.5em;
    line-height: 1.66; }
    body[data-template="about"] nav.site-nav ul li.about-description p, body[data-template="softdoc"] nav.site-nav ul li.about-description p, body[data-template="blog"] nav.site-nav ul li.about-description p, body[data-template="blogpost"] nav.site-nav ul li.about-description p, body[data-template="join"] nav.site-nav ul li.about-description p {
      margin: 0; }
  body[data-template="about"] nav.site-nav ul li a.current, body[data-template="softdoc"] nav.site-nav ul li a.current, body[data-template="blog"] nav.site-nav ul li a.current, body[data-template="blogpost"] nav.site-nav ul li a.current, body[data-template="join"] nav.site-nav ul li a.current {
    background: rgba(70, 121, 203, 0.2); }
body[data-template="about"] nav.site-nav .about-dropdown, body[data-template="softdoc"] nav.site-nav .about-dropdown, body[data-template="blog"] nav.site-nav .about-dropdown, body[data-template="blogpost"] nav.site-nav .about-dropdown, body[data-template="join"] nav.site-nav .about-dropdown {
  border: 1px solid #b4ccfe;
  border-bottom: 0; }
  body[data-template="about"] nav.site-nav .about-dropdown a, body[data-template="softdoc"] nav.site-nav .about-dropdown a, body[data-template="blog"] nav.site-nav .about-dropdown a, body[data-template="blogpost"] nav.site-nav .about-dropdown a, body[data-template="join"] nav.site-nav .about-dropdown a {
    border-bottom: 1px solid #b4ccfe; }
body[data-template="about"] nav.about-nav, body[data-template="softdoc"] nav.about-nav, body[data-template="blog"] nav.about-nav, body[data-template="blogpost"] nav.about-nav, body[data-template="join"] nav.about-nav {
  display: block; }
@media screen and (max-width: 948px) {
  body[data-template="about"] #background-image, body[data-template="softdoc"] #background-image, body[data-template="blog"] #background-image, body[data-template="blogpost"] #background-image, body[data-template="join"] #background-image {
    opacity: 0;
    transition: opacity 2s, visibility 0s 2s;
    visibility: hidden; }
  body[data-template="about"] #about-white-mask, body[data-template="softdoc"] #about-white-mask, body[data-template="blog"] #about-white-mask, body[data-template="blogpost"] #about-white-mask, body[data-template="join"] #about-white-mask {
    opacity: 0;
    display: none; }
  body[data-template="about"] nav.about-nav, body[data-template="softdoc"] nav.about-nav, body[data-template="blog"] nav.about-nav, body[data-template="blogpost"] nav.about-nav, body[data-template="join"] nav.about-nav {
    display: none; }
  body[data-template="about"] main section.softdoc, body[data-template="softdoc"] main section.softdoc, body[data-template="blog"] main section.softdoc, body[data-template="blogpost"] main section.softdoc, body[data-template="join"] main section.softdoc {
    font-size: 1em;
    line-height: 1.35; }
    body[data-template="about"] main section.softdoc .softdoc-contents, body[data-template="softdoc"] main section.softdoc .softdoc-contents, body[data-template="blog"] main section.softdoc .softdoc-contents, body[data-template="blogpost"] main section.softdoc .softdoc-contents, body[data-template="join"] main section.softdoc .softdoc-contents {
      margin: 5em 1.25em 1.25em;
      width: auto; }
      body[data-template="about"] main section.softdoc .softdoc-contents blockquote, body[data-template="softdoc"] main section.softdoc .softdoc-contents blockquote, body[data-template="blog"] main section.softdoc .softdoc-contents blockquote, body[data-template="blogpost"] main section.softdoc .softdoc-contents blockquote, body[data-template="join"] main section.softdoc .softdoc-contents blockquote {
        padding-right: 0; }
  body[data-template="about"] main .signup-form, body[data-template="softdoc"] main .signup-form, body[data-template="blog"] main .signup-form, body[data-template="blogpost"] main .signup-form, body[data-template="join"] main .signup-form {
    width: auto;
    margin: 1.25em;
    padding: 1.5em; }
    body[data-template="about"] main .signup-form form, body[data-template="softdoc"] main .signup-form form, body[data-template="blog"] main .signup-form form, body[data-template="blogpost"] main .signup-form form, body[data-template="join"] main .signup-form form {
      display: flex;
      justify-content: center;
      flex-wrap: wrap; }
      body[data-template="about"] main .signup-form form .email, body[data-template="softdoc"] main .signup-form form .email, body[data-template="blog"] main .signup-form form .email, body[data-template="blogpost"] main .signup-form form .email, body[data-template="join"] main .signup-form form .email {
        flex: 1 0 100%;
        margin-right: 0; }
    body[data-template="about"] main .signup-form #mce-responses, body[data-template="softdoc"] main .signup-form #mce-responses, body[data-template="blog"] main .signup-form #mce-responses, body[data-template="blogpost"] main .signup-form #mce-responses, body[data-template="join"] main .signup-form #mce-responses {
      margin-top: 20px;
      text-align: center; }
  body[data-template="about"] main .about-footer, body[data-template="softdoc"] main .about-footer, body[data-template="blog"] main .about-footer, body[data-template="blogpost"] main .about-footer, body[data-template="join"] main .about-footer {
    width: auto;
    margin-top: 7.5em; }
  body[data-template="about"] main .about-footer-text, body[data-template="softdoc"] main .about-footer-text, body[data-template="blog"] main .about-footer-text, body[data-template="blogpost"] main .about-footer-text, body[data-template="join"] main .about-footer-text {
    flex: 1 1 100%;
    padding: 0 1.25em; }
  body[data-template="about"] main .about-footer-logo, body[data-template="softdoc"] main .about-footer-logo, body[data-template="blog"] main .about-footer-logo, body[data-template="blogpost"] main .about-footer-logo, body[data-template="join"] main .about-footer-logo {
    top: -70px;
    left: 1.25em; } }

@media screen and (max-width: 948px) {
  body section.blog, body[data-template="about"] section.blog, body[data-template="softdoc"] section.blog, body[data-template="blog"] section.blog, body[data-template="blogpost"] section.blog {
    font-size: 17px; }
    body section.blog .blog-header, body[data-template="about"] section.blog .blog-header, body[data-template="softdoc"] section.blog .blog-header, body[data-template="blog"] section.blog .blog-header, body[data-template="blogpost"] section.blog .blog-header {
      padding: 0 1.25em;
      box-sizing: border-box;
      margin: 5em 0 1.25em; }
      body section.blog .blog-header h2, body[data-template="about"] section.blog .blog-header h2, body[data-template="softdoc"] section.blog .blog-header h2, body[data-template="blog"] section.blog .blog-header h2, body[data-template="blogpost"] section.blog .blog-header h2 {
        font-size: 26px; }
    body section.blog article.blog-post, body[data-template="about"] section.blog article.blog-post, body[data-template="softdoc"] section.blog article.blog-post, body[data-template="blog"] section.blog article.blog-post, body[data-template="blogpost"] section.blog article.blog-post {
      margin: 0 1.25em; }
      body section.blog article.blog-post h3, body[data-template="about"] section.blog article.blog-post h3, body[data-template="softdoc"] section.blog article.blog-post h3, body[data-template="blog"] section.blog article.blog-post h3, body[data-template="blogpost"] section.blog article.blog-post h3 {
        padding: 0;
        font-size: 24px; }
      body section.blog article.blog-post .blog-post-metadata, body[data-template="about"] section.blog article.blog-post .blog-post-metadata, body[data-template="softdoc"] section.blog article.blog-post .blog-post-metadata, body[data-template="blog"] section.blog article.blog-post .blog-post-metadata, body[data-template="blogpost"] section.blog article.blog-post .blog-post-metadata {
        float: none;
        margin-left: 0;
        margin-bottom: 1.5em;
        padding-left: 0;
        width: auto; }
        body section.blog article.blog-post .blog-post-metadata .blog-post-tags, body[data-template="about"] section.blog article.blog-post .blog-post-metadata .blog-post-tags, body[data-template="softdoc"] section.blog article.blog-post .blog-post-metadata .blog-post-tags, body[data-template="blog"] section.blog article.blog-post .blog-post-metadata .blog-post-tags, body[data-template="blogpost"] section.blog article.blog-post .blog-post-metadata .blog-post-tags {
          display: inline-block;
          margin: 0; }
          body section.blog article.blog-post .blog-post-metadata .blog-post-tags li, body[data-template="about"] section.blog article.blog-post .blog-post-metadata .blog-post-tags li, body[data-template="softdoc"] section.blog article.blog-post .blog-post-metadata .blog-post-tags li, body[data-template="blog"] section.blog article.blog-post .blog-post-metadata .blog-post-tags li, body[data-template="blogpost"] section.blog article.blog-post .blog-post-metadata .blog-post-tags li {
            display: inline-block;
            margin-right: 0.75em; }
      body section.blog article.blog-post .blog-post-text, body[data-template="about"] section.blog article.blog-post .blog-post-text, body[data-template="softdoc"] section.blog article.blog-post .blog-post-text, body[data-template="blog"] section.blog article.blog-post .blog-post-text, body[data-template="blogpost"] section.blog article.blog-post .blog-post-text {
        margin-left: 0;
        width: auto; }
  body .signup-form .form-fields, body[data-template="about"] .signup-form .form-fields, body[data-template="softdoc"] .signup-form .form-fields, body[data-template="blog"] .signup-form .form-fields, body[data-template="blogpost"] .signup-form .form-fields {
    flex-flow: column nowrap;
    align-items: initial; }
    body .signup-form .form-fields .email, body[data-template="about"] .signup-form .form-fields .email, body[data-template="softdoc"] .signup-form .form-fields .email, body[data-template="blog"] .signup-form .form-fields .email, body[data-template="blogpost"] .signup-form .form-fields .email {
      margin-bottom: 5px; }
    body .signup-form .form-fields .submit, body[data-template="about"] .signup-form .form-fields .submit, body[data-template="softdoc"] .signup-form .form-fields .submit, body[data-template="blog"] .signup-form .form-fields .submit, body[data-template="blogpost"] .signup-form .form-fields .submit {
      width: 100%; }
  body nav.site-nav ul li, body[data-template="about"] nav.site-nav ul li, body[data-template="softdoc"] nav.site-nav ul li, body[data-template="blog"] nav.site-nav ul li, body[data-template="blogpost"] nav.site-nav ul li {
    border-color: black;
    color: black; }
    body nav.site-nav ul li.title #future-us, body[data-template="about"] nav.site-nav ul li.title #future-us, body[data-template="softdoc"] nav.site-nav ul li.title #future-us, body[data-template="blog"] nav.site-nav ul li.title #future-us, body[data-template="blogpost"] nav.site-nav ul li.title #future-us {
      background-image: url("../future-us.png"); }
    body nav.site-nav ul li a, body[data-template="about"] nav.site-nav ul li a, body[data-template="softdoc"] nav.site-nav ul li a, body[data-template="blog"] nav.site-nav ul li a, body[data-template="blogpost"] nav.site-nav ul li a {
      color: black; }
    body nav.site-nav ul li.section-link, body nav.site-nav ul li.section-link[data-page-id="about"], body[data-template="about"] nav.site-nav ul li.section-link, body[data-template="about"] nav.site-nav ul li.section-link[data-page-id="about"], body[data-template="softdoc"] nav.site-nav ul li.section-link, body[data-template="softdoc"] nav.site-nav ul li.section-link[data-page-id="about"], body[data-template="blog"] nav.site-nav ul li.section-link, body[data-template="blog"] nav.site-nav ul li.section-link[data-page-id="about"], body[data-template="blogpost"] nav.site-nav ul li.section-link, body[data-template="blogpost"] nav.site-nav ul li.section-link[data-page-id="about"] {
      display: block;
      color: #4679cb;
      transition: 2s border-color; }
    body nav.site-nav ul li.section-link[data-page-id="about"] > a, body[data-template="about"] nav.site-nav ul li.section-link[data-page-id="about"] > a, body[data-template="softdoc"] nav.site-nav ul li.section-link[data-page-id="about"] > a, body[data-template="blog"] nav.site-nav ul li.section-link[data-page-id="about"] > a, body[data-template="blogpost"] nav.site-nav ul li.section-link[data-page-id="about"] > a {
      display: none; }
    body nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links, body[data-template="about"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links, body[data-template="softdoc"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links, body[data-template="blog"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links, body[data-template="blogpost"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links {
      display: block; }
      body nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li, body[data-template="about"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li, body[data-template="softdoc"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li, body[data-template="blog"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li, body[data-template="blogpost"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li {
        border-top: 1px dotted black; }
        body nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li.clicked, body nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:hover, body[data-template="about"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li.clicked, body[data-template="about"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:hover, body[data-template="softdoc"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li.clicked, body[data-template="softdoc"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:hover, body[data-template="blog"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li.clicked, body[data-template="blog"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:hover, body[data-template="blogpost"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li.clicked, body[data-template="blogpost"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:hover {
          border-color: black;
          background: rgba(70, 121, 203, 0.2); }
        body nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li a.current, body[data-template="about"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li a.current, body[data-template="softdoc"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li a.current, body[data-template="blog"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li a.current, body[data-template="blogpost"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li a.current {
          background: rgba(70, 121, 203, 0.2); }
      body nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:first-child, body[data-template="about"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:first-child, body[data-template="softdoc"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:first-child, body[data-template="blog"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:first-child, body[data-template="blogpost"] nav.site-nav ul li.section-link[data-page-id="about"] ul.subpage-links li:first-child {
        border: none; }
    body nav.site-nav ul li.section-link.about-sky-link, body nav.site-nav ul li.about-description, body[data-template="about"] nav.site-nav ul li.section-link.about-sky-link, body[data-template="about"] nav.site-nav ul li.about-description, body[data-template="softdoc"] nav.site-nav ul li.section-link.about-sky-link, body[data-template="softdoc"] nav.site-nav ul li.about-description, body[data-template="blog"] nav.site-nav ul li.section-link.about-sky-link, body[data-template="blog"] nav.site-nav ul li.about-description, body[data-template="blogpost"] nav.site-nav ul li.section-link.about-sky-link, body[data-template="blogpost"] nav.site-nav ul li.about-description {
      display: none; } }

nav.about-nav {
  margin-top: -1px;
  color: #4679cb;
  display: none; }
  nav.about-nav ul li {
    border: none; }
    nav.about-nav ul li a {
      border: 1px solid #b4ccfe;
      padding: 0.75em;
      text-align: center;
      transition: 2s all; }
      nav.about-nav ul li a.current {
        position: relative;
        z-index: 2;
        border-color: #4679cb;
        background: rgba(70, 121, 203, 0.2); }
      nav.about-nav ul li a.clicked, nav.about-nav ul li a:hover {
        position: relative;
        z-index: 2;
        border-color: #4679cb;
        background: rgba(70, 121, 203, 0.2); }

main section.softdoc {
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  font-size: 1.25em;
  line-height: 1.45; }
  main section.softdoc .softdoc-contents {
    margin: 8.333% auto;
    width: 66.667%; }
    main section.softdoc .softdoc-contents h2 {
      padding-top: 2em;
      clear: both; }
      main section.softdoc .softdoc-contents h2:first-of-type {
        padding-top: 0; }
    main section.softdoc .softdoc-contents h3 {
      clear: both;
      font-size: 1.15em;
      border-bottom: 1px solid rgba(70, 121, 203, 0.2);
      font-weight: bold;
      padding-top: 2em;
      margin-bottom: 1.25em; }
    main section.softdoc .softdoc-contents ul, main section.softdoc .softdoc-contents ol {
      padding-left: 1.25em; }
      main section.softdoc .softdoc-contents ul li, main section.softdoc .softdoc-contents ol li {
        margin-bottom: 0.3em;
        padding-left: 0.25em; }
    main section.softdoc .softdoc-contents hr {
      margin: 3.25em 0;
      border: 0;
      border-bottom: 1px solid #b4ccfe; }
    main section.softdoc .softdoc-contents .medium {
      max-width: 425px; }
    main section.softdoc .softdoc-contents .medium-large {
      max-width: 550px; }
    main section.softdoc .softdoc-contents blockquote {
      margin: 1.5em 0;
      padding: 0 2em;
      border-left: 1px solid #b4ccfe; }
    main section.softdoc .softdoc-contents .highlight {
      background: rgba(70, 121, 203, 0.2); }
    main section.softdoc .softdoc-contents .highlight-blue {
      color: #4679cb; }
    main section.softdoc .softdoc-contents form {
      opacity: 1;
      transition: 2s opacity; }
    main section.softdoc .softdoc-contents .message {
      opacity: 1;
      transition: 2s opacity; }
    main section.softdoc .softdoc-contents pre {
      white-space: pre-line;
      width: 100%;
      overflow-x: scroll; }
main section.blog {
  font-size: 18px; }
  main section.blog figure {
    margin: 2em 0; }
  main section.blog .blog-header {
    width: 100%;
    padding: 8.333% 16.667%;
    color: #4679cb; }
    main section.blog .blog-header h2 {
      font-size: 36px; }
      main section.blog .blog-header h2:first-of-type {
        margin-top: 0; }
    main section.blog .blog-header .blog-header-description {
      font-weight: bold; }
      main section.blog .blog-header .blog-header-description p {
        margin: 0; }
  main section.blog .tag-header {
    border-top: 1px solid #b4ccfe;
    padding: 1em;
    text-align: center;
    color: #4679cb; }
  main section.blog article.blog-post {
    padding-bottom: 8.333%;
    border-top: 1px solid #b4ccfe; }
    main section.blog article.blog-post h3 {
      font-size: 36px;
      width: 100%;
      padding: 0 16.667%; }
      main section.blog article.blog-post h3 a {
        color: inherit;
        text-decoration: none; }
        main section.blog article.blog-post h3 a:hover {
          text-decoration: underline; }
    main section.blog article.blog-post .blog-post-metadata {
      float: left;
      width: 16.667%;
      font-size: 14px;
      padding: 0 1em; }
      main section.blog article.blog-post .blog-post-metadata time {
        font-weight: bold;
        display: inline-block;
        margin-bottom: 1em;
        margin-right: 1.25em; }
      main section.blog article.blog-post .blog-post-metadata ul.blog-post-tags {
        list-style-type: none;
        margin-top: 1.5em;
        padding: 0; }
        main section.blog article.blog-post .blog-post-metadata ul.blog-post-tags li.blog-post-tag {
          margin-bottom: 0.333em; }
          main section.blog article.blog-post .blog-post-metadata ul.blog-post-tags li.blog-post-tag a {
            color: inherit;
            text-decoration: none; }
            main section.blog article.blog-post .blog-post-metadata ul.blog-post-tags li.blog-post-tag a:hover {
              text-decoration: underline; }
    main section.blog article.blog-post .blog-post-text {
      margin-left: 16.667%;
      width: 66.667%;
      line-height: 1.5; }
      main section.blog article.blog-post .blog-post-text p:first-child {
        margin-top: 0; }
      main section.blog article.blog-post .blog-post-text pre {
        white-space: pre-line;
        width: 100%;
        overflow-x: scroll; }

.small-image.float-left {
  float: left; }
.small-image.float-right {
  float: right; }
.small-image figure {
  margin: 0;
  width: 100%; }
  .small-image figure img {
    width: 100%; }

.about-footer {
  font-size: 15.25px;
  position: relative;
  border-top: 1px solid #b4ccfe;
  margin: 8.333% auto;
  width: 66.667%;
  display: flex;
  flex-wrap: wrap; }

.about-footer-logo {
  position: absolute;
  left: -120px;
  top: 0;
  width: 80px; }

.about-footer-text {
  flex: 1 1 50%;
  line-height: 1.5; }
  .about-footer-text:first-child {
    padding-right: 1em; }
  .about-footer-text:nth-child(2) {
    padding-left: 1em; }
  .about-footer-text ul {
    padding: 0;
    padding-left: 1em; }
    .about-footer-text ul a {
      color: inherit; }

.signup-form {
  text-align: center;
  margin: 4% auto 8.333%;
  width: 66.667%;
  background: rgba(70, 121, 203, 0.2);
  padding: 3em 4em; }
  .signup-form form {
    opacity: 1;
    transition: 2s opacity; }
  .signup-form .message {
    opacity: 1;
    transition: 2s opacity;
    text-align: center;
    margin-bottom: 1em; }
  .signup-form .form-zone {
    font-size: 15.25px; }
    .signup-form .form-zone .form-fields {
      display: flex;
      align-items: flex-end; }
      .signup-form .form-zone .form-fields label {
        visibility: hidden; }
    .signup-form .form-zone .email {
      flex: 1 1 100%;
      margin-right: 0.75em; }
    .signup-form .form-zone input {
      width: 100%;
      background-color: transparent;
      font-family: sans-serif;
      font-size: 15.25px;
      border: 1px solid black;
      color: black;
      padding: 0.75em 0.75em 0.6em; }
      .signup-form .form-zone input::placeholder {
        color: black; }
    .signup-form .form-zone button {
      flex: 1 0 200px;
      background-color: transparent;
      font-family: sans-serif;
      font-size: 15.25px;
      border: 1px solid black;
      color: black;
      cursor: pointer;
      padding: 0.75em 0.75em 0.6em;
      margin-top: 1em;
      transition: 2s background-color; }
      .signup-form .form-zone button:hover {
        background-color: white; }
  .signup-form a.button {
    padding: 0.4em 0.55em;
    border: 1px solid black;
    color: black;
    text-decoration: none;
    display: inline-block;
    transition: 2s background-color; }
    .signup-form a.button:hover {
      background-color: white; }
  .signup-form .thank-you {
    display: none; }

div#about-white-mask {
  position: absolute;
  display: block !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: white;
  opacity: 0;
  transition: opacity 2s; }

main.join {
  padding: 30px; }
  main.join h1, main.join h2, main.join h3, main.join h4 {
    font-weight: normal;
    text-align: center; }
  main.join h1 {
    font-size: 1.7em;
    font-weight: bold; }
  main.join #join-intro #join-intro-inner {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 10px; }
    main.join #join-intro #join-intro-inner img#members {
      max-width: 300px; }
  main.join section {
    margin-bottom: 120px !important; }
    main.join section:last-child {
      margin: 0; }
    main.join section h2 {
      text-align: center; }
    main.join section .join-contents {
      margin: 1.333% auto;
      width: 66.667%; }
      main.join section .join-contents figure {
        text-align: center;
        margin: 40px 0; }
        main.join section .join-contents figure img {
          width: 100%; }
  main.join #become-a-member {
    display: flex;
    flex-flow: column nowrap;
    align-items: center; }
    main.join #become-a-member #tiers {
      display: grid;
      grid-template-columns: repeat(2, 400px);
      gap: 10px; }
      main.join #become-a-member #tiers article {
        border: 1px solid rgba(70, 121, 203, 0.2);
        max-width: 400px;
        font-size: 0.9em; }
        main.join #become-a-member #tiers article .tier-info {
          padding: 20px; }
        main.join #become-a-member #tiers article .tier-title {
          display: flex;
          flex-flow: row nowrap;
          margin-bottom: 20px; }
          main.join #become-a-member #tiers article .tier-title figure {
            margin: 0;
            max-width: 60px;
            margin-left: auto; }
        main.join #become-a-member #tiers article h2 {
          font-weight: bold;
          color: #4679cb;
          text-align: left !important;
          margin-top: 0; }
        main.join #become-a-member #tiers article form {
          border-top: 1px solid rgba(70, 121, 203, 0.2);
          font-size: 0.9em;
          padding: 20px; }
          main.join #become-a-member #tiers article form .form-group label {
            display: block;
            margin-bottom: 1em; }
          main.join #become-a-member #tiers article form .form-group label.suggested {
            font-size: 0.8em; }
          main.join #become-a-member #tiers article form .form-group .contribution-field-group {
            display: grid;
            grid-template-columns: 0.2fr 1fr;
            align-items: center;
            outline: 0;
            border: 1px solid #000;
            background: transparent;
            margin-bottom: 1em;
            max-width: 180px; }
            main.join #become-a-member #tiers article form .form-group .contribution-field-group input[type="text"] {
              outline: 0;
              background: transparent;
              padding: 0;
              border: 0;
              padding: 14px 14px 14px 5px;
              font-size: 0.9em;
              width: 100%; }
            main.join #become-a-member #tiers article form .form-group .contribution-field-group label.dollar-sign {
              font-size: 0.9em;
              padding-left: 14px;
              margin: 0; }
          main.join #become-a-member #tiers article form input[type="submit"] {
            appearance: none;
            -webkit-appearance: none;
            font-size: 0.9em;
            color: white;
            background: #4679cb;
            margin-top: auto;
            padding: 14px;
            border: 0;
            cursor: pointer; }
            main.join #become-a-member #tiers article form input[type="submit"]:hover {
              background: #4679cb;
              opacity: 0.7;
              transition: opacity 1s; }
        main.join #become-a-member #tiers article ul {
          padding: 0;
          margin: 0;
          margin-left: 1em; }
          main.join #become-a-member #tiers article ul li {
            margin-bottom: 20px; }
  main.join #testimonials {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    justify-content: center;
    font-size: 0.9em;
    position: relative;
    margin-bottom: 100px; }
    main.join #testimonials figure {
      position: relative;
      margin: 0 20px 20px 0;
      max-width: 300px;
      padding: 20px;
      border: 1px solid rgba(70, 121, 203, 0.2);
      break-inside: avoid; }
      main.join #testimonials figure figcaption {
        margin-top: 40px; }
        main.join #testimonials figure figcaption img {
          width: 60px;
          height: 60px;
          object-fit: cover;
          border-radius: 100%;
          margin-right: 10px; }
        main.join #testimonials figure figcaption b {
          display: block; }
      main.join #testimonials figure blockquote {
        margin: 0;
        padding: 0;
        font-size: 0.9em; }
        main.join #testimonials figure blockquote p:first-child {
          margin-top: 0; }
        main.join #testimonials figure blockquote p:last-child {
          margin-bottom: 0; }
      main.join #testimonials figure figcaption {
        display: grid;
        grid-template-columns: max-content 1fr;
        font-size: 0.7em; }

@media (max-width: 948px) {
  main.join {
    margin-top: 30px; }
    main.join section {
      margin-bottom: 50 !important; }
      main.join section .join-contents {
        margin: 0;
        width: 100%; }

  #tiers {
    grid-template-columns: 1fr !important; }

  #testimonials {
    display: block; }
    #testimonials figure {
      max-width: 100%;
      margin-right: 0; }

  input {
    font-size: 100% !important; }

  input[type="submit"]:hover {
    background: transparent !important; } }
@media (max-width: 535px) {
  #join-intro {
    grid-template-columns: 1fr !important; }

  #become-a-member iframe {
    max-width: 100%; } }

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