/* @group Overall */
* {
  margin: 0;
  padding: 0;
  }
html {
  height: 100%;
}
body {
  min-height: 100%;
  letter-spacing: 0;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-feature-settings: "ss01" 1, "ss02" 1;
  font-weight: 400;
  background-color: #F8F8F8;
  color: #333333;
  }
h1,
h2,
h3,
.home-title,
.freesouls,
#freesoul-featured .name,
.buy-now .book-price {
  font-family: "Work Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
pre {
  margin-bottom: 1em;
  border-left: 0.3rem solid #FF3F90;
}
a {
  text-decoration: underline;
  font-weight: 700;
  color: #333333;
  }
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0;
  font-size: 1em;
}
ol, ul {
  list-style-position: outside;
  padding-left: 1.2em;
}
ol {
  list-style-type: decimal;
}
ul {
  list-style-type: square;
}
hr {
  border-top: 0.1rem solid #cfcfcf;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: #FF3F90;
  border: 0.1rem solid #FF3F90;
}
.button.button-outline,
button.button-outline,
input.button-outline[type="button"],
input.button-outline[type="reset"],
input.button-outline[type="submit"] {
  color: #FF3F90;
}
.details {
  font-size: 9pt;
  color: #606c76;
}
.details-title {
  text-transform: uppercase;
  font-weight: 700;
}
blockquote.unquote {
  border: none;
  padding: 0;
}
.freesouls {
  text-transform: uppercase;
}

.row .order-row {
  margin-bottom: 1em;
}
.row .column .order-details {
  display: flex;
  flex-direction: column;
}
.order-details .buy-now {
  flex: 1;
}
.book-thumb {
  border: 1px solid #cfcfcf;
  border-radius: .4em;
}

.callout {
  border: 0.1rem solid #ff0088;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 0.4rem;
}
.callout-light {
  border: 0.1rem solid #cfcfcf;
}
.callout form {
  margin-bottom: 1rem;
}
.buy-now form {
  display: inline;
}
.book-price {
  font-size: 1.75em;
  font-weight: 300;
  color: #7D7D7D;
}
.sidebar a {
  text-decoration: none;
}
.sidebar .details {
  color: #FFF;
}
.toc-heading {
  text-transform: uppercase;
}
.read-on:after {
  content: '\00A0\00BB'; /*  » */
}
.team {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.team .person {
  flex: 50%;
  margin-bottom: 1em;
}
.team .person .full-name {
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0;
}
.team .role,
.team .person .surname {
  text-transform: uppercase;
}
/* @end */
/* @group Utility */
.inner {
  padding:15px;
  }
/* @end */
/* @group Structure */
#page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#main {
  display: flex;
  flex: 1 0 auto;
}
#footer {
  display: flex;
}
.content {
  background: #F8F8F8;
  flex: 1;
  }
.sidebar {
  display: none;
  flex: 0 0 330px;
  width: 330px;
  background: #000000;
  color: #fff;
  border-right: 1px solid #000000;
  }
.sidebar-section {
  width: 330px;
}
#sidebar-title {
  position: relative;
  height: 450px;
  background: transparent url('/img/JoiIto.jpg') top left no-repeat;
}
#sidebar-title .logo {
  display: block;
  position: absolute;
  right: 15px;
  height: 101px;
  width: 101px;
  background-image: url('/img/joi-ito-logo-300.png');
  background-size: cover;
}
#sidebar-title h1 {
  font-size: 0;
}
.right {
  width: 100%;
  background: #F8F8F8;
  padding-top: 15px;
  }
.container {
  padding: 0 15px;
}
.home-title .main-title {
  margin-bottom: 1em;
}
.home-title,
.home-title h2,
.home-title h3 {
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.home-title h2 {
  font-size: 2em;
}
.home-title h2,
.home-title h3 {
  color: #000000;
  margin-bottom: 0;
}

.row.row-always {
  flex-direction: row;
  margin-left: -1.0rem;
  width: calc(100% + 2.0rem);
}
.row.row-always .column {
  margin-bottom: inherit;
  padding: 0 1.0rem;
}

.row .column.column-minor {
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}

.row .column.column-major {
  flex: 100%;
  max-width: 100%;
}

/* @end */
/* @group Freesoul Flickr */

#freesouls-flickr {
  margin-bottom: 2em;
}
#freesoul-featured {
  position: relative;
  margin-bottom: 15px;
}
#freesoul-featured a.pic {
  display: block;
  width: 294px;
  overflow: hidden;
  padding: 1px;
  background: #fff;
  border: 1px solid #000;
  line-height: 0;
  }
#freesoul-featured img {
  width: 294px;
  border: none;
  }
#freesoul-featured .name {
  position: absolute;
  max-width: 200px;
  bottom: 8px;
  left: 8px;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  background: #FFF320;
  color: #333;
  }
#freesoul-featured a.name {
  text-decoration: none;
}

#freesouls-grid {
  width:315px;
  overflow: hidden;
  line-height: 0;
  }
#freesouls-grid a {
  display: block;
  float: left;
  margin: 0;
  padding: 1px;
  background: #fff;
  border: 1px solid #000;
  width: 49px;
  height: 49px;
}
#freesouls-grid img {
  border: none;
  width:45px;
  height: 45px;
  }
#freesoulslist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#freesoulslist .list-block {
  flex: 50%;
  margin-bottom: 10px;
}
#freesoulslist .img {
  float: left;
  margin: 0 10px 0 0;
  }
#freesoulslist .img img {
  box-sizing: content-box;
  border-style: solid;
  display: inline;
  width: 24px;
  height: 24px;
  }
#freesoulslist .name {
  margin: 5px 0 0 0;
  }
#freesoulslist .name a {
  font-size: 9pt;
  font-weight: 400;
  }
/* @end */



/* @group Navigation */


.sidebar a,
.page-nav a,
#freesoulslist .name a,
.callout a.toc-heading,
ol a {
  text-decoration: none;
  color: #09c;
}
.sidebar a:hover,
.page-nav a:hover,
#freesoulslist .name a:hover,
.callout a.toc-heading:hover,
.entry h3 a:hover,
.nav a:hover {
  text-decoration: underline;
  color: #606c76;
}
li {
  margin-bottom: 5px;
  line-height:130%;
  }
li .listed-title {
  font-weight: 700;
  }
li .byline {
  display: block;
}
li.on {
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  margin: .5em 0;
  padding: .5em 0;
  }

/* @end */

/* @group Entries */
.entry {
  margin: 0 0 20px 0;
  }
.asset-body h3,
.entry h3 {
  margin-bottom: 1rem;
}
.entry h3 {
  margin-bottom: 0;
}
.entry h3 a {
  line-height: 1;
  text-decoration: none;
}
.asset-body h3,
.entry h3,
.entry h3 a {
  font-weight: 700;
  text-transform: uppercase;
  color: #FF3F90;
}
  .entry a.entry-date {
  	font-weight: 400;
  	text-decoration: none;
    }
  .entry .post {
  	line-height:150%;
    }
.essay-blurb {
  margin-top:2em;
  margin-bottom:2em;
  padding-bottom:2em;
  border-bottom: 1px dotted #d1d1d1;
  }
.essay-blurb blockquote {
  margin-bottom: 0;
}
.essay-blurb .source {
  font-style: italic;
  }
.blockquote-attr {
  text-align: right;
}

/* @end */
/* @group Pages */
.page-nav {
  text-align: left;
  font-size: 10pt;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #d1d1d1;
  }
.page-nav .page-collection {
  font-weight: 700;
}
/* @end */
/* @group Essays */
#page-title {
  font-size: 14pt;
  margin: 0;
  line-height: 110%;
  text-transform: uppercase;
  font-weight: 700;
  }
.page-portrait {
  max-width: 420px;
  max-width: 100%;
  max-height: 420px;
}
.flickr-freesoul-essay-pic {
  margin: .5em 0;
  }
.essay ol:not(.nav) {
  margin: 0 0 1em 2em;
  font-size: 9pt;
  line-height: 140%;
  }

a.fn-it {
  text-decoration: none;
  font-weight: 400;
  }
a.fn-it:hover {
  text-decoration: underline;
  }
a.fn-up {
  text-decoration: none;
  }
a.fn-up:hover {
  text-decoration: underline;
  }

/* @end */

/* @end */
/* @group Footer */
#footer img {
  border: none;
  }
/* @end */

.row {
  flex-direction: column;
}

@media (min-width: 768px) {
  .row {
    flex-direction: row;
  }

  .row .column.column-minor {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  .row .column.column-major {
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
  }
}

@media (max-width: 768px) {
  #freesoulslist .list-block {
    flex: 100%;
  }
}

@media (min-width: 1120px) {
  .flexbox .sidebar {
    display: block;
  }
  .container {
    margin: 0;
  }
  .home-title h2 {
    margin-top: -12px;
    margin-left: -5px;
    font-size: 72px;
    }
  .home-title h3 {
    font-size: 32px;
    letter-spacing: -1px;
  }
  .home-title .author {
    display: none;
  }
  .home-title p {
    font-size: 22px;
  }
}