/* doc

Styles for books.

*/
/* doc
## respond-to

The respond-to allows you to quickly define media queries. We design using the
_mobile first_ methodology, so all the mobile styles should be in the base
css-class, and enhance larger screens it via media-queries.

The mixin accepts two arguments: `$min-width` and `$max-width`. The `$min-width`
argument is required and should normally be sufficient. Use the `$max-width`
only when it results in significantly cleaner code.
*/
/* doc
## v-respond-to

The v-respond-to allow you to qucikly define vertical media queries. Workd the
same as the `respond-to` mixin, only verticaly.
*/
/* doc
## size-with-background

Sets three properties together: `width`, `height` and `background-size`.
*/
/* doc
## background-2x
*/
/* doc
## clearfix
Add clearfix so the floating children don't overflow the element.
*/
/* doc
## font-loader
*/
/* doc
## aspect-radio
Make sure the div has a height relative to it's width.
*/
/* doc
## hw-acceleration
Enables GPU hw acceleration on mobile devices
*/
/* doc
## full
Adds position absolute with maximum available space.
*/
/* line 11, app/assets/stylesheets/book.scss */
.book__wrapper {
  margin: auto;
  top: 0;
  padding-bottom: 66%;
  position: relative;
  max-width: 900px;
  width: 100%;
}

@media only screen and (min-width: 1020px) {
  /* line 11, app/assets/stylesheets/book.scss */
  .book__wrapper {
    width: 85%;
  }
}

/* line 23, app/assets/stylesheets/book.scss */
.book__page {
  position: absolute;
  left: 50%;
  cursor: pointer;
  height: 100%;
  transition: transform 1s;
}

/* line 29, app/assets/stylesheets/book.scss */
.book__page.flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

/* line 34, app/assets/stylesheets/book.scss */
.book-page__front {
  position: absolute;
}

/* line 38, app/assets/stylesheets/book.scss */
.book-page__back {
  z-index: 1;
  position: absolute;
  transform: rotateY(180deg);
}

/* line 44, app/assets/stylesheets/book.scss */
.book {
  position: relative;
}

/* line 48, app/assets/stylesheets/book.scss */
.book__btn {
  display: none;
  border: 0;
  cursor: pointer;
}

@media only screen and (min-width: 1020px) {
  /* line 48, app/assets/stylesheets/book.scss */
  .book__btn {
    display: inline-block;
    height: 70px;
    width: 45px;
  }
}

/* line 57, app/assets/stylesheets/book.scss */
.book__btn:focus {
  outline: none;
}

/* line 60, app/assets/stylesheets/book.scss */
.book__btn-left {
  position: absolute;
  top: 200px;
  left: 8px;
  background: url(/assets/btn_terug-e1020328920f0c6eeca3545a77cc75d759b6679631c009858a22d43df68c938a.png);
}

/* line 66, app/assets/stylesheets/book.scss */
.book__btn-right {
  position: absolute;
  top: 200px;
  right: 8px;
  background: url(/assets/btn_vooruit-28d175bf7cb466ca472bfc4882fcb8ac319c343efa71c21c4126cd034e28e5d8.png);
}