body {
  font-family: 'Lato', sans-serif;
  color: #fff;
  background: #000;
}

.black-box {
  background: #333;
  width: 328px;
}

.black-box img,
.black-box > div {
  float: left;
  display: inlne-block;
}

.black-box > div {
  width: 164px;
  height: 164px;
  background: #333;
  vertical alignXXX: middle;
  outlineXXX: 1px solid #fff;
  position: relative;
}

.black-box div div {
  background: #333;
  vertical alignXXX: middle;
  outline: 1px solid #fff
  top: 50%;
}

.black-box p {
  text-transform: uppercase;
  border-bottom: 1px solid #fff;
}

.black-box p:last-of-type {
  border-bottom: none;
}

.toc-block ul li {
  display: block;
  float: left;
  width: 220px;
  margin-bottomXXX: 15px;
  padding: 15px 15px 15px 15px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.toc-block p {
  margin-bottom: 10px;
  color: #999;
}

.toc-block h3 {
  text-transform: uppercase;
}

.toc-block .page-number {
  font-size: 25px;
}

.toc-block p.page-number {
  margin-bottom: 5px;
}

.toc-block .author {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.page-top-accent {
  padding-bottom: 5px;
  border-bottom: 1px solid #fff;
}

.page-top-accent ul {
  list-style: none;
  text-align: right;
}

.page-top-accent ul li {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  padding: 10px 15px;
  border-right: 1px solid #fff;
}

.page-top-accent ul li:last-of-type {
  border-right: none;
}

.page-top-accent ul li:first-of-type ,
.page-top-accent ul li:last-of-type {
  color: #999;
}

.fa-camera:before {
  content: "\f030";
}