body::before {
    background-image: url('images/bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    content: '';
    background-color: #6ca7ea;
    will-change: transform;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: fixed;
}

body .ljsc {
  font-family: 'Roboto', 'Helvetica', sans-serif;
}

.ljsc .ljsc__posts {
  max-width: 900px;
  padding: 0;
  display: flex;
  width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
}

.ljsc__posts .mdl-card__supporting-text {
  font-size: 16px;
}

.ljsc.mdl-layout .mdl-layout__content {
  padding-top: 22vh;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.ljsc .mdl-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ljsc .mdl-card.card-full {
  min-height: 360px; /* "forked" from .ljsc .mdl-card */
}
.ljsc .mdl-card.card-short {
  min-height: 280px;
}
.ljsc .mdl-card__title {
  padding: 16px;
  flex-grow: 1;
}
.ljsc .mdl-card__media {
  box-sizing: border-box;
  background-size: cover;
  padding: 24px;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: flex-end;
  cursor: pointer;
}
.ljsc .mdl-card__media a,
.ljsc .mdl-card__title a {
  color: inherit;
}
.ljsc .mdl-card__supporting-text {
  width: 100%;
  padding: 16px;
  min-height: 64px;
  display: flex;
  align-items: center;
}
.ljsc .mdl-card__supporting-text strong {
  font-weight: 400;
}
.ljsc .mdl-card__media ~ .mdl-card__supporting-text {
  min-height: 64px;
}
.ljsc .mdl-card__supporting-text:not(:last-child) {
  box-sizing: border-box;
  min-height: 76px;
}
.ljsc:not(.ljsc--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
  border-top: 1px solid rgba(0,0,0,0.1);
}

.ljsc .mdl-card__actions:first-child {
  margin-left: 0;
}
.ljsc .meta {
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: auto;
}
.ljsc .meta > .meta__favorites{
  flex-direction: row;
  margin: 0 8px;
  font-size: 13px;
  font-weight: 500;
}
.ljsc .meta > .meta__favorites .material-icons {
  font-size: 2em;
  cursor: pointer;
  margin-left: 12px;
}
.ljsc .mdl-card .meta.meta--fill {
  justify-content: space-between;
}
.ljsc .meta > *:first-child {
  margin-right: 16px;
}
.ljsc .meta > * {
  display: flex;
  flex-direction: column;
}

.ljsc .ljs-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  margin: 10px;
  color: white;
  text-shadow: 
  #292724 .01em .01em 0, 
  #292724 .02em .02em 0, 
  #292724 .03em .03em 0, 
  #292724 .04em .04em 0, 
  #292724 .05em .05em 0, 
  #292724 .06em .06em 0, 
  #292724 .07em .07em 0,
  #292724 .08em .08em 0, 
  #292724 .09em .09em 0, 
  #292724 .10em .10em 0,
  #292724 .11em .11em 0, 
  #292724 .12em .12em 0, 
  #292724 .13em .13em 0, 
  #292724 .14em .14em 0, 
  #292724 .15em .15em 0, 
  #292724 .16em .16em 0, 
  #292724 .17em .17em 0,
  #292724 .18em .18em 0, 
  #292724 .19em .19em 0, 
  #292724 .20em .20em 0,
  #292724 .21em .21em 0, 
  #292724 .22em .22em 0, 
  #292724 .23em .23em 0, 
  #292724 .24em .24em 0, 
  #292724 .25em .25em 0, 
  #292724 .26em .26em 0, 
  #292724 .27em .27em 0,
  #292724 .28em .28em 0, 
  #292724 .29em .29em 0,
  #292724 .30em .30em 0,
  #292724 .31em .31em 0, 
  #292724 .32em .32em 0, 
  #292724 .33em .33em 0, 
  #292724 .34em .34em 0, 
  #292724 .35em .35em 0, 
  #292724 .36em .36em 0, 
  #292724 .37em .37em 0,
  #292724 .38em .38em 0, 
  #292724 .39em .39em 0,
  #292724 .40em .40em 0,
  #292724 .41em .41em 0, 
  #292724 .42em .42em 0, 
  #292724 .43em .43em 0, 
  #292724 .44em .44em 0, 
  #292724 .45em .45em 0, 
  #292724 .46em .46em 0, 
  #292724 .47em .47em 0,
  #292724 .48em .48em 0, 
  #292724 .49em .49em 0, 
  #292724 .50em .50em 0,
  #292724 .51em .51em 0, 
  #292724 .52em .52em 0, 
  #292724 .53em .53em 0, 
  #292724 .54em .54em 0, 
  #292724 .55em .55em 0, 
  #292724 .56em .56em 0, 
  #292724 .57em .57em 0,
  #292724 .58em .58em 0, 
  #292724 .59em .59em 0, 
  #292724 .60em .60em 0
/* #29272400 .61em .61em 0, 
  #292724 .62em .62em 0, 
  #292724 .63em .63em 0, 
  #292724 .64em .64em 0, 
  #292724 .65em .65em 0, 
  #292724 .66em .66em 0, 
  #292724 .67em .67em 0,
  #292724 .68em .68em 0, 
  #292724 .69em .69em 0, 
  #292724 .70em .70em 0 */;
}
.ljsc .ljs-header h1 {
  /*color: white;*/
  margin: 24px 16px;
  font-family: "MissionGothic", "Helvetica Neue", sans-serif;
  font-size: 90px;
  line-height: 1;
}

.supporting-text-low-height {
  min-height: 0 !important;
}

/* Bio card*/
.ljsc .mini-bio .mdl-card__media {
  background-image: url('images/ljs-cover.jpg');
}
.ljsc .mini-bio .mdl-card__supporting-text {
  font-size: 16px;
}

/*Work card*/
.ljsc .work-card .mdl-card__media {
  background-image: url('images/171117_LRV4_Launch_181.jpg');
  color: white;
}

/*blog card*/
.ljsc .blog-card .mdl-card__media {
  background-image: url('images/sf_ferry.jpg');
  color: white;
}

/*Transit Lens Card*/
.ljsc .transitlens-card .mdl-card__media {
  background-image: url('images/transitlens-cover.png');
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ljsc .transitlens-card > button {
  position: absolute;
  top: 0;
  right: 28px;
  transform: translate(0px, -28px);
}
.ljsc .transitlens-card .transitlens-logo{
  font-family: "Lato";
  font-size: 40px;
  text-decoration: none;
}
.ljsc .transitlens-card img {
  width: 38px;
  height: 38px;
  transform: translateY(-5px);
  padding-right: 5px;
}
.ljsc .mdl-card__actions a i {
  transform: translateY(3px);
}

/*Photosphere card*/
.ljsc .photospheres-card .mdl-card__media {
  background-image: url('images/photospheres-cover.png');
  color: white;
}

.mdl-card__actions .mdl-button .ljsc-small-mdl-icon {
  font-size: 16px;
}

/*Mind Games Card*/
.ljsc .mind-games-card .mdl-card__media {
  background-image: url('images/mindgames-cover.png');
  color: white;
}
.mindgames-title {
  background-color: rgba(0,0,0,0.2);
}

/*Resume, Contact, Twitter cards*/
.resume-card.mdl-card {
  background: #01579B;
}
.contact-card.mdl-card {
  background: #0288D1;
}
.twitter-card.mdl-card {
  background: #4099FF;
}

.card-short > .mdl-card__actions {
  border-color: rgba(255, 255, 255, 0.2);
}
.card-short > .mdl-card__title {
  align-items: flex-start;
}

.card-short > .mdl-card__actions {
  display: flex;
  box-sizing:border-box;
  align-items: center;
}
.card-short > .mdl-card__title,
.card-short > .mdl-card__actions,
.card-short > .mdl-card__actions > .mdl-button {
  color: #fff;
}

.mdl-card__actions-slimtop {
  padding-top: 0;
}
.mdl-card__actions-slimbottom {
  padding-bottom: 0;
}

.ljsc .mdl-card > a {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.ljsc .mdl-card h3 {
  margin: 0;
}
.ljsc .mdl-card h3 a {
  text-decoration: none;
}
.ljsc .mdl-card h3.quote:before, .ljsc .mdl-card h3.quote:after {
  display: block;
  font-size: 3em;
  margin-top: 0.5em;
}
.ljsc .mdl-card h3.quote:before {
  content: '“';
}
.ljsc .mdl-card h3.quote:after {
  content: '”';
}

/* Fixes for IE 10 */
.mdl-grid {
  display: flex !important;
}

.social-btn {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  margin: 0 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0.46;
  border-radius: 2px;
}
.social-btn img {
  width: 24px;
  height: 24x;
  padding: none;
}
.social-btn__linkedin {
  background-image: url('images/linkedin-box.png')
}
.social-btn__email {
  background-image: url('images/email.png');
}
.social-btn__bits {
  background-image: url('images/more_horiz.png');
}

.ljsc .mdl-mini-footer {
  margin-top: 80px;
  min-height: 120px;
  padding: 40px;
  align-items: center;
  box-sizing: border-box;
}

