/* bitter-regular - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bitter-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Bitter Regular'), local('Bitter-Regular'),
       url('../fonts/bitter-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bitter-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bitter-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bitter-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bitter-v15-latin-regular.svg#Bitter') format('svg'); /* Legacy iOS */
}
/* bitter-italic - latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/bitter-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Bitter Italic'), local('Bitter-Italic'),
       url('../fonts/bitter-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bitter-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bitter-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bitter-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bitter-v15-latin-italic.svg#Bitter') format('svg'); /* Legacy iOS */
}
/* bitter-700 - latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/bitter-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Bitter Bold'), local('Bitter-Bold'),
       url('../fonts/bitter-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bitter-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bitter-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bitter-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bitter-v15-latin-700.svg#Bitter') format('svg'); /* Legacy iOS */
}


/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}

.lead {
    font-style: italic;
}

/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #9bcad2;
  font-family: 'Bitter',serif;
}

body {
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .3);
  background: linear-gradient(45deg, #118b74, transparent)
}

main {
    max-height: 90%;
    overflow-y: scroll;
}
main.small h2 {
    font-size: 1.3rem;
}
main.small h3 {
    font-size: 1.15rem;
}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */
.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}




/* ************************* 3D BUCH ***************************** */
.book-cover-container {
  z-index: 1;
  perspective:3000px;
}

.book-cover-container .book {
  position: relative;
  display: block;
  width: 260px;
  height: 397px;
  margin: 20px 0;
  border-radius: 2px 4px 4px 2px;
  background: linear-gradient(45deg,  #DAD5DC 0%, #f2ebf4 100%);
  -webkit-box-shadow: 13px 13px 8px 0px rgba(75, 99, 103, 0.63);
  -moz-box-shadow: 13px 13px 8px 0px rgba(75, 99, 103, 0.63);
  box-shadow: 13px 13px 8px 0px rgba(75, 99, 103, 0.63);
  font-weight: 400;
  color: #2b2b2b;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  transition: transform .5s;
}

.book-cover-container .book:hover {
  -webkit-transform: rotate3d(0,1,0,35deg);
  -moz-transform: rotate3d(0,1,0,35deg);
  transform: rotate3d(0,1,0,35deg);
}

.book-cover-container .book > div,
.book-cover-container .front > div {
  display: block;
  position: absolute;
}


.book-cover-container .front {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  transition: transform .5s;
  -webkit-transform: translate3d(0,0,20px);
  -moz-transform: translate3d(0,0,20px);
  transform: translate3d(0,0,20px);
  z-index: 10;
  display: block;
}

.book-cover-container .front > div {
  width: 260px;
  height: 397px;
}

.book-cover-container .left-side{
  width: 40px;
  left: -20px;
  height: 397px;
  background-color: #e9ecef;
  -webkit-transform: rotate3d(0,1,0,-90deg);
  -moz-transform: rotate3d(0,1,0,-90deg);
  transform: rotate3d(0,1,0,-90deg);
}

.book-cover-container .book .cover img{
    position: absolute;
    top: 0;
    left: 0;
    width: 261px;
}

#eye-right {
  padding-left: 185px;
}

.book-cover-container .front > div {
  border-radius: 0 3px 3px 0;
  box-shadow:
    inset 4px 0 10px rgba(0, 0, 0, 0.1);
}

.book-cover-container .front:after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -1px;
  width: 1px;
}

.book-cover-container .cover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 3px;
  background: rgba(0,0,0,0.1);
  box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}


.book-cover-container h2 {
  width: 380px;
  height: 40px;
  color: #2b2b2b;
  font-size: 13px;
  line-height: 40px;
  padding-right: 10px;
  text-align: right;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(90deg) translateY(-40px);
  -moz-transform: rotate(90deg) translateY(-40px);
  transform: rotate(90deg) translateY(-40px);
}

.book-cover-container .cover {
 background: linear-gradient(45deg,  #DAD5DC 0%, #f2ebf4 100%);
}


.left-side h2 span:first-child {
  font-weight: 400;
  font-size: 13px;
  padding-right: 20px;
}

.left-side h2 span:last-child{
  font-family: acumin-pro, sans-serif;
}