html,
body {
  height: 100%; }

body {
  font-family: "Work Sans", sans-serif;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 16px;
  color: #444;
  text-rendering: optimizeLegibility; }
  @media screen and (max-width: 600px) {
    body {
      max-width: 100%; } }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1.8;
  margin: 0;
  text-transform: capitalize; }

a {
  color: #35C449;
  text-decoration: none; }
  a:hover {
    color: #444; }

/*
p a {
  color: $text-color;
  text-decoration: none;
  background: -webkit-linear-gradient(
    transparent 90%,
    lighten($brand-color, 10%) 10%
  );
  box-shadow: inset 0 0 0 0 lighten($brand-color, 10%);
  -webkit-transition: box-shadow ease 1s;
  -moz-transition: box-shadow ease 1s;
  transition: box-shadow ease 1s;
  &:hover {
    color: lighten($background-color, 50%);
    box-shadow: inset 0 -100px 0 0 lighten($brand-color, 10%);
  }
}
*/
figure {
  margin: 0; }

img {
  max-width: 100%; }

pre,
code {
  overflow: auto;
  font-size: 11.2px;
  border-radius: 3px;
  border: 1px solid #35C449; }
  pre > code,
  code > code {
    border: none; }

pre input {
  font-size: 11.2px; }

pre {
  padding: 1em; }

code {
  padding: 0.1em; }

blockquote {
  border-left: 2px solid #35C449;
  padding-left: 1em;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 14.4px;
  font-style: italic; }

.comma-separated:after {
  content: "\002C" "\00A0"; }

.comma-separated:last-child:after {
  content: ""; }

.posts__item {
  margin-bottom: 90px; }
.posts__date {
  color: #999; }
.posts__tags {
  font-size: 13px;
  font-size: 0.72222rem;
  float: right; }
.posts__tag-list {
  display: inline-block;
  margin: 0;
  padding: 0; }

.post {
  margin-bottom: 90px; }
  .post__footer {
    overflow: hidden; }
  .post__author {
    float: left; }
  .post__tags, .post__date {
    color: #999; }
  .post__tags {
    font-size: 13px;
    font-size: 0.72222rem;
    float: right;
    margin-top: 110px; }
  .post__tag-list {
    display: inline-block;
    margin: 0;
    padding: 0; }
  .post__author-avatar img {
    border-radius: 100px; }
  .post__sharing-buttons {
    float: right;
    clear: right; }
  .post__title {
    font-size: 32px;
    font-size: 1.77778rem;
    line-height: 35px;
    margin: 0 0 10px; }
  .post span[title] {
    border-bottom: 1px dotted #2faf43; }

/* Home Button */
/*
.home {
    background-image: url(../images/left-arrow.svg);
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    opacity: 0.9;
    position: fixed;
    top: 50px;
    left: 50px;
    &:hover{
    opacity: 1;
    }
    @include media-query($on-laptop) {
        top: 90%;
        left: 90%;
        height: 30px;
        width: 30px;
        opacity: 0.6;
    }
}
*/
/* Article list in index/home page */
.article-list {
  margin: 1em 0; }

/* Add video class for iframes to make them responsive */
.video {
  width: 100%;
  height: 360px; }
  @media screen and (max-width: 1000px) {
    .video {
      height: 300px; } }
  @media screen and (max-width: 600px) {
    .video {
      height: 180px; } }

#markdown-toc::before {
  content: "Contents";
  font-weight: bold; }

#markdown-toc ul {
  list-style: decimal; }

#markdown-toc {
  border: 1px solid #35C449;
  padding: 1.5em;
  list-style: decimal;
  display: inline-block; }

/* Theme switch button */
.theme {
  cursor: pointer; }

/* Footer navigation links */
.links a {
  margin-right: 1em; }

/* Footer copyrights */
.copy {
  color: #aaa; }

/* Horizontal Divider */
.divider {
  margin: 1em 0; }

@media all and (max-width: 768px) {
  .sidebar {
    margin-top: 60px;
    display: none; }

  .sidebar .page-avatar,
  .sidebar .page-logo,
  .sidebar .site-desc,
  .sidebar .search-form,
  .sidebar .nav-sidebar {
    display: none; }

  .sidebar .nav-social {
    text-align: center; }

  .sidebar .nav-social li {
    font-size: 25px;
    font-size: 1.38889rem;
    line-height: 1.28;
    width: auto;
    float: none;
    clear: none; }

  .sidebar .nav-social li ~ li {
    margin-left: 10px; } }
@media all and (min-width: 769px) {
  .sidebar {
    width: 191px;
    border-right: 1px solid #eee;
    float: left;
    margin-left: -240px;
    margin-right: 50px;
    height: calc(100vh - 60px); } }
.sidebar {
  font-size: 0.72222rem; }

.wrapper {
  max-width: 960px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  overflow: hidden; }

.content {
  margin: 60px 0;
  position: relative; }

@media all and (min-width: 769px) {
  .content {
    padding-left: 240px; } }
.page-logo {
  background-image: url(/images/bonzai-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 120px;
  display: inline-block;
  position: relative; }

.read-more {
  font-size: 14px;
  font-size: 0.77778rem;
  font-weight: bold;
  line-height: 22px;
  margin-right: 10px;
  color: #fff;
  background: #35C449;
  border-radius: 2em;
  padding: 0.4em 1em; }

.top-bar {
  -webkit-transition: top 0.25s;
  transition: top 0.25s;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  padding: 15px 0;
  position: fixed;
  top: -8em;
  right: 0;
  left: 0;
  z-index: 1000;
  background: #1b2731; }

.top-bar .wrapper {
  max-width: 820px; }

.top-bar.is-visible {
  top: 0; }

.top-bar .nav-primary a {
  color: #fff; }

.top-bar .page-logo {
  background-image: url(/images/bonzai-logo-reverse.png);
  height: 32px;
  background-position: 0 4px; }

@media all and (min-width: 769px) {
  .top-bar {
    text-align: right; }

  .top-bar .page-logo {
    float: left; } }
.hide-top-bar .top-bar {
  display: none; }

@media all and (max-width: 720px) {
  .hide-top-bar .top-bar,
  .top-bar {
    display: block;
    position: relative;
    top: 0; }

  .content {
    margin-top: 20px; } }
.nav,
.post__tag-list,
.posts__tag-list,
.post-exif__content,
.post-popup__content {
  margin-left: 0;
  list-style: none; }

.nav > li,
.post__tag-list > li,
.posts__tag-list > li,
.nav > li > a,
.post__tag-list > li > a,
.posts__tag-list > li > a,
.post-exif__content > li,
.post-popup__content > li,
.post-exif__content > li > a,
.post-popup__content > li > a {
  display: inline-block; }

.nav--stacked > li {
  display: list-item; }

.nav--stacked > li > a {
  display: block; }

.nav--keywords > li:after,
.post-tags__list > li:after {
  content: "\002C" "\00A0"; }

.nav--keywords > li:last-child:after,
.post-tags__list > li:last-child:after {
  display: none; }

.nav-primary {
  font-size: 12px;
  font-size: 0.66667rem;
  line-height: 2.66667;
  padding: 0;
  margin: 0; }

.nav-primary a {
  text-transform: uppercase; }

.nav-primary a:hover,
.nav-primary a:focus {
  text-decoration: none; }

.nav-head {
  margin-bottom: 0;
  display: block; }

.nav-head .search-form {
  margin-left: 20px;
  display: block; }

.nav-head a {
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1; }

@media all and (min-width: 569px) {
  .nav-head a:hover {
    border-bottom: 1px solid; } }
@media all and (max-width: 768px) {
  .nav-head {
    background-color: #1b2731;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0; }

  .nav-head.is-visible {
    display: block; }

  .nav-head .search-form__icon {
    font-size: 18px;
    font-size: 1rem;
    line-height: 1.77778;
    top: 12px;
    left: 0; }

  .nav-head .search-form__input {
    background: none;
    border: none;
    box-shadow: none;
    color: inherit;
    display: block;
    height: 58px;
    line-height: 58px;
    padding-left: 30px;
    width: 100%; }

  .nav-head li {
    display: block;
    text-align: left;
    padding: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); }

  .nav-head li a {
    display: block;
    font-weight: normal;
    line-height: 1.5;
    padding: 20px; }

  .nav-head li a.btn {
    font-weight: normal; } }
@media all and (min-width: 769px) {
  .nav-head .search-form-wrap {
    float: right; }

  .nav-head .search-form-wrap + li {
    margin-left: 0; }

  .nav-head .search-form__icon {
    top: 10px; }

  .nav-head li ~ li {
    margin-left: 10px; } }
.toggle-nav {
  font-size: 24px;
  font-size: 1.33333rem;
  line-height: 1.33333;
  line-height: 32px;
  background: none;
  border: none;
  padding: 0;
  position: absolute;
  cursor: pointer;
  top: 15px;
  right: 20px;
  z-index: 10; }

.toggle-nav .times {
  display: none; }

.toggle-nav.is-expanded .times {
  display: inline-block; }

.toggle-nav.is-expanded .bars {
  display: none; }

@media all and (min-width: 769px) {
  .toggle-nav {
    display: none; } }
.jobs-hero {
  width: 100%;
  height: 200px;
  background: url("/jobs/office.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 30px; }

.jobs-hero::before {
  content: "";
  display: block;
  width: 100%;
  height: 200px;
  background: #35C449;
  opacity: 0.9;
  position: absolute;
  top: 0;
  left: 0; }

.jobs-hero-message {
  position: relative;
  color: white;
  transform: translateY(-50%);
  top: 50%;
  text-align: center; }

.tech {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; }

.job-application {
  padding: 20px;
  background: rgba(53, 196, 73, 0.1);
  border-radius: 10px;
  max-width: 540px; }

.job-application .field {
  margin-bottom: 20px; }

.job-application label {
  display: block; }

.job-application input[type="text"],
.job-application input[type="email"],
.job-application input[type="url"] {
  width: 100%;
  border: solid 1px #DDD;
  height: 45px;
  border-radius: 8px;
  box-sizing: border-box;
  display: block;
  border-color: #bfbfbf;
  padding: 0 10px;
  font-size: 1em; }

.job-application input[type="text"]:focus,
.job-application input[type="url"]:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: none; }

.job-application textarea {
  width: 100%;
  border: solid 1px #DDD;
  height: 150px;
  border-radius: 8px;
  box-sizing: border-box;
  display: block;
  border-color: #bfbfbf;
  padding: 5px;
  font-size: 1em; }

.job-application .upload {
  width: 30%;
  border: 1px solid #404AE4;
  background: #fff;
  color: #404AE4;
  border-radius: 8px;
  outline: none;
  height: 51px;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  pointer-events: none;
  margin-left: -30%;
  min-width: 100px; }

@media all and (max-width: 414px) {
  .job-application .upload {
    margin-left: -100px; } }
.job-application input[type="file"] {
  opacity: 0;
  float: left;
  width: 30%;
  height: 51px;
  cursor: pointer;
  min-width: 100px; }

.job-application .submit {
  width: 100%;
  background: #404AE4;
  color: #fff;
  border-radius: 8px;
  outline: none;
  border: none;
  height: 51px;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer; }

.job-application .file-preview-filled {
  height: 45px;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 16px !important;
  width: 100% !important;
  background: white;
  border: 1px solid #bfbfbf;
  padding: 0 0 0 10px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding: 8px 20px; }

.job-application .file-name {
  padding-left: 5px; }

.job-application .remove-file {
  position: absolute;
  right: 10px; }

.lambda {
  background: #444;
  width: 14px;
  height: 14px;
  display: inline-block;
  color: #fff;
  text-align: right;
  padding: 0 1px 1px 0;
  font-size: 11px; }

.highlight {
  background: #fff; }
  .highlight .c {
    color: #998;
    font-style: italic; }
  .highlight .err {
    color: #a61717;
    background-color: #e3d2d2; }
  .highlight .k {
    font-weight: bold; }
  .highlight .o {
    font-weight: bold; }
  .highlight .cm {
    color: #998;
    font-style: italic; }
  .highlight .cp {
    color: #999;
    font-weight: bold; }
  .highlight .c1 {
    color: #998;
    font-style: italic; }
  .highlight .cs {
    color: #999;
    font-weight: bold;
    font-style: italic; }
  .highlight .gd {
    color: #000;
    background-color: #fdd; }
    .highlight .gd .x {
      color: #000;
      background-color: #faa; }
  .highlight .ge {
    font-style: italic; }
  .highlight .gr {
    color: #a00; }
  .highlight .gh {
    color: #999; }
  .highlight .gi {
    color: #000;
    background-color: #dfd; }
    .highlight .gi .x {
      color: #000;
      background-color: #afa; }
  .highlight .go {
    color: #888; }
  .highlight .gp {
    color: #555; }
  .highlight .gs {
    font-weight: bold; }
  .highlight .gu {
    color: #aaa; }
  .highlight .gt {
    color: #a00; }
  .highlight .kc {
    font-weight: bold; }
  .highlight .kd {
    font-weight: bold; }
  .highlight .kp {
    font-weight: bold; }
  .highlight .kr {
    font-weight: bold; }
  .highlight .kt {
    color: #458;
    font-weight: bold; }
  .highlight .m {
    color: #099; }
  .highlight .s {
    color: #d14; }
  .highlight .na {
    color: #008080; }
  .highlight .nb {
    color: #0086b3; }
  .highlight .nc {
    color: #458;
    font-weight: bold; }
  .highlight .no {
    color: #008080; }
  .highlight .ni {
    color: #800080; }
  .highlight .ne {
    color: #900;
    font-weight: bold; }
  .highlight .nf {
    color: #900;
    font-weight: bold; }
  .highlight .nn {
    color: #555; }
  .highlight .nt {
    color: #000080; }
  .highlight .nv {
    color: #008080; }
  .highlight .ow {
    font-weight: bold; }
  .highlight .w {
    color: #bbb; }
  .highlight .mf {
    color: #099; }
  .highlight .mh {
    color: #099; }
  .highlight .mi {
    color: #099; }
  .highlight .mo {
    color: #099; }
  .highlight .sb {
    color: #d14; }
  .highlight .sc {
    color: #d14; }
  .highlight .sd {
    color: #d14; }
  .highlight .s2 {
    color: #d14; }
  .highlight .se {
    color: #d14; }
  .highlight .sh {
    color: #d14; }
  .highlight .si {
    color: #d14; }
  .highlight .sx {
    color: #d14; }
  .highlight .sr {
    color: #009926; }
  .highlight .s1 {
    color: #d14; }
  .highlight .ss {
    color: #990073; }
  .highlight .bp {
    color: #999; }
  .highlight .vc {
    color: #008080; }
  .highlight .vg {
    color: #008080; }
  .highlight .vi {
    color: #008080; }
  .highlight .il {
    color: #099; }

.highlighter-rouge .highlight {
  background: #eef; }

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local("Lato Black"), local("Lato-Black"), url(fonts/R4a6fty3waPci7C44H8AjvY6323mHUZFJMgTvxaG2iE.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local("Lato Black"), local("Lato-Black"), url(fonts/tI4j516nok_GrVf4dhunkg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Work Sans"), local("WorkSans-Regular"), url(fonts/WB2LNay3rHMH1zU8UJnUHBJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Work Sans"), local("WorkSans-Regular"), url(fonts/ElUAY9q6T0Ayx4zWzW63VFtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }