html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #31363A; }

.wrapper {
  max-width: 1180px;
  margin: 0 auto; }
  .wrapper .inner-wrapper {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px; }
  .wrapper > * {
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
  .wrapper .header {
    max-width: 580px;
    margin: 0 auto;
    margin: 0px auto 100px auto; }
    .wrapper .header > * {
      color: #8fA5B3; }
    .wrapper .header h1 {
      font-family: "lexia", serif;
      font-weight: 400;
      margin: 0;
      font-size: 50px; }
    .wrapper .header h2 {
      font-weight: 400;
      margin-top: 0px;
      text-transform: uppercase; }
  .wrapper .books {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .wrapper .books a {
      text-decoration: none; }
    .wrapper .books .v1.opaque,
    .wrapper .books .v1:hover ~ .dev {
      opacity: 0.3; }
    .wrapper .books .book {
      display: inline-block;
      width: 49%;
      margin: 0 auto;
      text-align: center; }
      .wrapper .books .book img {
        max-width: 370px;
        width: 100%;
        transition: transform 0.5s ease;
        perspective: 300px;
        transform-style: preserve-3d; }
      .wrapper .books .book .button {
        width: 100%;
        max-width: 150px;
        color: #FFF;
        margin: 0 auto;
        margin-top: 50px;
        padding: 10px;
        font-size: 20px;
        margin-bottom: 30px; }
      .wrapper .books .book .desc {
        display: none;
        color: #FFF;
        width: 100%;
        max-width: 400px;
        text-align: left;
        margin: 0 auto; }
        .wrapper .books .book .desc p {
          font-family: "proxima-nova", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
          font-size: 18px;
          margin: 0; }
    .wrapper .books .v1 {
      transition: .3s; }
      .wrapper .books .v1:hover img {
        transform: perspective(0px) scaleZ(1) rotateY(0deg); }
      .wrapper .books .v1:hover .desc {
        display: block; }
      .wrapper .books .v1 img {
        -webkit-box-shadow: -15px 13px 71px 8px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: -15px 13px 71px 8px rgba(0, 0, 0, 0.75);
        box-shadow: -15px 13px 71px 8px rgba(0, 0, 0, 0.75);
        transform: perspective(767px) scaleZ(1) rotateY(18deg); }
      .wrapper .books .v1 .button {
        background-color: #8C4319; }
    .wrapper .books .dev:hover img {
      transform: rotateY(0deg); }
    .wrapper .books .dev:hover .desc {
      display: block; }
    .wrapper .books .dev img {
      -webkit-box-shadow: 15px 13px 71px 8px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 15px 13px 71px 8px rgba(0, 0, 0, 0.75);
      box-shadow: 15px 13px 71px 8px rgba(0, 0, 0, 0.75);
      transform: perspective(767px) scaleZ(1) rotateY(-18deg); }
    .wrapper .books .dev .button {
      background-color: #005A53; }
    .book.v1:hover ~ .wrapper .books {
      opacity: 0.3; }
    .wrapper .books .book.dev:hover + .book.v1 {
      opacity: 0.3; }

@media screen and (max-width: 668px) {
  .wrapper .header {
    max-width: 400px; }
    .wrapper .header h1 {
      font-size: 36px; }
    .wrapper .header h2 {
      font-size: 20px; }
  .wrapper .books .book {
    width: 100%; }
    .wrapper .books .book img {
      transform: none;
      max-width: 250px; }
    .wrapper .books .book .desc {
      display: block;
      margin-bottom: 50px; }
  .wrapper .books .v1.opaque,
  .wrapper .books .v1:hover ~ .dev {
    opacity: 1; } }

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