.fullscreen, .main-wrapper, .flip-wrapper, .flip-wrapper .book-panel {
  position: absolute;
  width: 100%;
  height: 100%; }

.absolute-center, .flip-wrapper .book-panel .content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.clearfix:after {
  content: "";
  display: table;
  clear: both; }

@font-face {
  font-family: 'latoblack';
  src: url("../fonts/lato-black-webfont.eot");
  src: url("../fonts/lato-black-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-black-webfont.woff2") format("woff2"), url("../fonts/lato-black-webfont.woff") format("woff"), url("../fonts/lato-black-webfont.ttf") format("truetype"), url("../fonts/lato-black-webfont.svg#latoblack") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'latobold';
  src: url("../fonts/lato-bold-webfont.eot");
  src: url("../fonts/lato-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-bold-webfont.woff2") format("woff2"), url("../fonts/lato-bold-webfont.woff") format("woff"), url("../fonts/lato-bold-webfont.ttf") format("truetype"), url("../fonts/lato-bold-webfont.svg#latobold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'latolight';
  src: url("../fonts/lato-light-webfont.eot");
  src: url("../fonts/lato-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-light-webfont.woff2") format("woff2"), url("../fonts/lato-light-webfont.woff") format("woff"), url("../fonts/lato-light-webfont.ttf") format("truetype"), url("../fonts/lato-light-webfont.svg#latolight") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'latoregular';
  src: url("../fonts/lato-regular-webfont.eot");
  src: url("../fonts/lato-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-regular-webfont.woff2") format("woff2"), url("../fonts/lato-regular-webfont.woff") format("woff"), url("../fonts/lato-regular-webfont.ttf") format("truetype"), url("../fonts/lato-regular-webfont.svg#latoregular") format("svg");
  font-weight: normal;
  font-style: normal; }
body, html {
  margin: 0;
  padding: 0; }

body {
  background-color: black;
  min-width: 1024px;
  min-height: 720px;
  font-family: "latoregular", sans-serif; }

* {
  box-sizing: border-box; }

h2 {
  margin: 0;
  font-family: "latolight";
  font-size: 45px;
  font-weight: normal; }

h3 {
  font-family: "latobold";
  font-size: 15px;
  font-weight: normal; }

.sidenote-anchor {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/icon-info.png) no-repeat;
  vertical-align: middle;
  position: relative;
  top: -4px; }

.main-wrapper {
  overflow-x: hidden;
  min-width: 1024px;
  min-height: 720px;
  -webkit-perspective: 2000;
  -moz-perspective: 2000;
  -o-perspective: 2000;
  perspective: 2000; }

.flip-wrapper {
  position: relative;
  -webkit-transition: -webkit-transform 750ms;
  -moz-transition: -moz-transform 750ms;
  -o-transition: -o-transform 750ms;
  transition: transform 750ms;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  min-width: 1024px;
  min-height: 720px; }
  .flip-wrapper.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  .flip-wrapper .book-panel {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden; }
    .flip-wrapper .book-panel .content {
      width: 1024px;
      height: 720px;
      padding: 40px; }
  .flip-wrapper .book-index {
    background-color: #231F20;
    color: #fff;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 2; }
    .flip-wrapper .book-index h3 {
      font-family: "latoregular"; }
    .flip-wrapper .book-index .book-order {
      display: block;
      text-align: left;
      margin: -1px 0 0 8px; }
    .flip-wrapper .book-index .book-acronym {
      display: block;
      font-size: 2.5em;
      text-align: center;
      margin-top: -5px; }
    .flip-wrapper .book-index .book-title {
      display: block;
      text-transform: uppercase;
      text-align: center;
      margin: -2px 0 1px 0; }
    .flip-wrapper .book-index .book-chapters {
      display: block;
      text-align: center; }
    .flip-wrapper .book-index .help {
      position: absolute;
      top: 40px;
      right: 40px;
      width: 105px;
      height: 105px;
      padding: 9px 0;
      border: 1px solid #eee;
      font-size: 11px; }
      .flip-wrapper .book-index .help .book-order {
        margin-left: 10px; }
      .flip-wrapper .book-index .help .book-acronym {
        margin: 0; }
      .flip-wrapper .book-index .help .book-title {
        margin: 2px; }
      .flip-wrapper .book-index .help .book-chapters {
        margin: 0; }
    .flip-wrapper .book-index .book-list {
      position: relative;
      list-style: none;
      padding: 0;
      margin: 0 0 12px 0; }
      .flip-wrapper .book-index .book-list li {
        display: block;
        position: absolute; }
        .flip-wrapper .book-index .book-list li a {
          text-decoration: none;
          color: inherit;
          display: block;
          width: 74px;
          height: 74px;
          padding: 6px 0;
          font-size: 9px;
          background-color: #444;
          background-color: rgba(255, 255, 255, 0.15);
          color: #231F20; }
  .flip-wrapper .book-detail {
    background-color: #777;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }
    .flip-wrapper .book-detail .content {
      padding: 60px; }
    .flip-wrapper .book-detail .close-book {
      position: absolute;
      top: 37px;
      right: 37px;
      width: 22px;
      height: 22px;
      background-image: url(../img/icon-close.png);
      background-repeat: no-repeat;
      background-position: center center; }
    .flip-wrapper .book-detail .subtitle {
      margin: 0;
      font-size: 17px; }
      .flip-wrapper .book-detail .subtitle .subtitle-detail .sidenote-anchor {
        margin: 0;
        top: -6px; }
    .flip-wrapper .book-detail .description {
      margin: 20px 0 50px 0;
      font-size: 14px; }
    .flip-wrapper .book-detail .detail-column {
      float: left;
      padding-right: 20px; }
      .flip-wrapper .book-detail .detail-column.column-order, .flip-wrapper .book-detail .detail-column.column-chapters {
        width: 205px; }
      .flip-wrapper .book-detail .detail-column.column-group {
        width: 494px; }
      .flip-wrapper .book-detail .detail-column .column-title {
        display: block;
        font-size: 55px; }
        .flip-wrapper .book-detail .detail-column .column-title .sidenote-anchor {
          margin-left: -10px;
          top: -20px; }
      .flip-wrapper .book-detail .detail-column .column-subtitle {
        display: block;
        margin-bottom: 25px;
        font-size: 15px;
        padding-left: 0.2em;
        text-transform: uppercase; }
      .flip-wrapper .book-detail .detail-column .book-order-icons {
        width: 120px; }
        .flip-wrapper .book-detail .detail-column .book-order-icons:after {
          content: "";
          display: table;
          clear: both; }
        .flip-wrapper .book-detail .detail-column .book-order-icons span {
          box-sizing: content-box;
          display: block;
          float: left;
          width: 18px;
          height: 22px;
          margin: 0 1px 1px 0;
          background: url(../img/icon-book-order.png) no-repeat; }
          .flip-wrapper .book-detail .detail-column .book-order-icons span.active {
            background-position: -18px 0; }
          .flip-wrapper .book-detail .detail-column .book-order-icons span.border-bottom {
            border-bottom: 1px solid white;
            margin: 0px;
            padding: 0 1px 1px 0; }
          .flip-wrapper .book-detail .detail-column .book-order-icons span.border-right {
            border-right: 1px solid white;
            margin: 0;
            padding: 0 1px 1px 0; }
          .flip-wrapper .book-detail .detail-column .book-order-icons span:nth-child(6n+1) {
            clear: left; }
      .flip-wrapper .book-detail .detail-column .book-chapter-icons {
        width: 120px; }
        .flip-wrapper .book-detail .detail-column .book-chapter-icons:after {
          content: "";
          display: table;
          clear: both; }
        .flip-wrapper .book-detail .detail-column .book-chapter-icons span {
          display: block;
          float: left;
          width: 19px;
          height: 23px;
          background: url(../img/icon-book-chapter.png) no-repeat; }
      .flip-wrapper .book-detail .detail-column .book-group-icons {
        padding: 0;
        margin: 0;
        list-style: none; }
        .flip-wrapper .book-detail .detail-column .book-group-icons:after {
          content: "";
          display: table;
          clear: both; }
        .flip-wrapper .book-detail .detail-column .book-group-icons li {
          display: block;
          float: left;
          margin-right: 5px;
          margin-bottom: 5px; }
          .flip-wrapper .book-detail .detail-column .book-group-icons li a {
            display: block;
            width: 35px;
            height: 35px;
            border: 1px solid #231F20;
            font-size: 14px;
            line-height: 35px;
            text-align: center;
            text-decoration: none;
            background-color: #000;
            color: inherit; }

.side-panel {
  position: absolute;
  top: 0;
  left: calc( 100% - 1px );
  width: 195px;
  height: 100%;
  padding: 35px 20px;
  opacity: 0.05;
  background-color: #FFF;
  color: black;
  -webkit-transition: all 350ms;
  -moz-transition: all 350ms;
  -o-transition: all 350ms;
  transition: all 350ms; }
  .side-panel.open {
    -webkit-transform: translateX(-99%);
    -moz-transform: translateX(-99%);
    -o-transform: translateX(-99%);
    transform: translateX(-99%);
    opacity: 1; }
  .side-panel h3 {
    margin-bottom: 15px; }
  .side-panel .content {
    font-size: 13px; }