@charset "utf-8";

.bookshelf-container{
  border: 0px;

  margin: 0 auto;
  margin-bottom: 4px;
  margin-left: 5px;
  margin-right: 5px;

}

.bookshelf-top{

  height: 30px;
  border: 0px;

}

.bookshelf-top-left{
  height: 30px;
  border: 0px;
  margin-right: -4px;
  vertical-align: top;
  width: 50px;
  display: inline-block;

  background-image: url('TopLeft.png');
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: center top;

}

.bookshelf-top-middle{
  height: 30px;
  border: 0px;
  margin-right: -4px;
  vertical-align: top;
  width: -webkit-calc(100% - 100px);
  width: calc(100% - 100px);
  width: -moz-calc(100% - 100px);
  display: inline-block;

  background-image: url('TopMiddle.png');
  background-size: 50px;
  background-position: left top;

}

.bookshelf-top-right{
  height: 30px;
  border: 0px;
  margin-right: -4px;
  vertical-align: top;
  width: 50px;
  display: inline-block;

  background-image: url('TopRight.png');
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: center top;

}



.bookshelf-middle{
  min-height: 100%;
  display: flex;

}



.bookshelf-middle-left-container{
  width: 50px;
  vertical-align: top;
  margin-top: 0px;
  margin-right: -1px;
  margin-left: 0px;

  background-image: url('ColumnLeft.png');
  background-size: contain;
  background-position: center top;
  background-size: 50px;

}


.bookshelf-middle-left1{
  width: 50px;
  height: 110px;
  margin-top: 0px;
  vertical-align: top;
  margin-left: 2px;

  background-image: url('MiddleLeft.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;

}






.bookshelf-middle-right{
  display: inline-block;
  vertical-align: top;
  width: 50px;

  /*
  NOT NECESSARY 
  margin-right: -4px;
  */
}




.bookshelf-middle-right-container{
  width: 50px;
  margin-top: 0px;
  vertical-align: top;
  margin-right: -1px;
  margin-left: 0px;

  background-image: url('ColumnRight.png');
  background-size: contain;
  background-position: left top;
  background-size: 50px;

}

.bookshelf-middle-right1{
  width: 50px;
  height: 110px;
  margin-top: 0px;
  vertical-align: top;

  background-image: url('MiddleRight.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;

}



.bookshelf {
  
  /* width: 80%; */
  /* margin: 0 auto; */

  margin-right: -4px;
  width: -webkit-calc(100% - 96px);
  width: calc(100% - 96px);
  width: -moz-calc(100% - 96px);
  height: 100%;
  white-space:nowrap;
  display: inline-block;
  overflow: hidden;

  background-image: url('BookshelfBackground.jpg');
  background-position: left top;
  
  /* background-color: #603d38; */
  /* border: 10px #A87328 solid; */
  /*
  ORIGINAL BACKGROUND
    background-image: linear-gradient(#241909, #2c1e0b 220px, #b87e2c 220px, #b87e2c 222px, #A87328 222px, #A87328 228px, #986824 228px, #986824 230px);
    background-size: 10px 230px;
  */

}

.book {
  /*
  ORIGINAL
  height: 200px;
  width: 40px;
  */
  /*
  PRUEBA GRANDE
  height: 300px;
  width: 220px;
  */


  height: 192px;
  width: 141px;
  float: left;
  color: white;
  font-size: 0.9em;
  font-family: Verdana, sans-serif;

  /*
  ORIGINAL
  margin-bottom: 10px;
  margin-top: 20px;
  */

  margin-top: 75px;
  margin-bottom: 30px;
  margin-left: 5px;
  margin-right: 5px;
  transition: transform 0.4s ease;
}


.book-imagebackground{
  border-radius: 5px;

  background-repeat: no-repeat;
  background-size: contain; /* scales the image */
  background-position: right bottom;

  -webkit-box-shadow: 0px 31px 22px -24px rgba(143,121,101,0.27); 
  box-shadow: 0px 31px 22px -24px rgba(143,121,101,0.27);

  /* box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
  /*
  BEFORE FINAL
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  */

}


.book-text1{
  width: 130px;
  height: 37px;
  position: absolute;
  z-index: 10;
  margin-top: -40px;
  margin-left: 7px;

  text-align: center;  
  align-content: center;
  border: 0px solid;

  font-size: 11px;
  font-weight: bold;
  white-space: pre-line;
  word-wrap: break-word;
  color: white ;
  line-height: normal;

}


.book-text2{
  width: 130px;
  height: 18px;
  position: absolute;
  z-index: 10;
  margin-top: 193px;
  margin-left: 7px;
  align-content: center;
  border: 0px solid;
  text-align: center;

  Font-size: 10px;
  white-space: pre-line;
  word-wrap: break-word;
  line-height: normal;

  color: #B9B8A4;


}


.bookshelf-bottom{
  height: 35px;
  border: 0px;

}

.bookshelf-bottom-left{
  height: 35px;
  border: 0px;
  margin-right: -4px;
  vertical-align: top;
  width: 50px;
  display: inline-block;

  background-image: url('BottomLeft.png');
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: center top;

}

.bookshelf-bottom-middle{
  height: 35px;
  border: 0px;
  margin-right: -4px;
  margin-left: 0px;
  vertical-align: top;
  width: -webkit-calc(100% - 100px);
  width: calc(100% - 100px);
  width: -moz-calc(100% - 100px);
  display: inline-block;

  background-image: url('BottomMiddle.png');
  background-position: left bottom;

}

.bookshelf-bottom-right{
  height: 35px;
  border: 0px;
  margin-right: 0px;
  vertical-align: top;
  width: 48px;
  display: inline-block;

  background-image: url('BottomRight.png');
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: right top;

}

.sign-container{
  height: 68px;
  width: 200px;
  text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;

  background-image: url(Sign.png);
  background-size: contain;

  box-shadow: 2px 11px 11px -8px rgba(0,0,0,0.76);
  -webkit-box-shadow: 2px 11px 11px -8px rgba(0,0,0,0.76);
  -moz-box-shadow: 2px 11px 11px -8px rgba(0,0,0,0.76);

}

.sign-text{
  flex: 0 0 160px;
  margin-left: 4px;
  font-size: 18px;
  font-weight: bold;
  color: #f1efc7;
  line-height: 120%;

}






.booktest {
  /*
  ORIGINAL
  height: 200px;
  width: 40px;
  */

  float: left;
  color: white;
  font-size: 0.9em;
  font-family: Verdana, sans-serif;
  /*
  ORIGINAL
  margin-bottom: 10px;
  margin-top: 20px;
  */

  margin-top: 100px;
  margin-bottom: 50px;
  margin-left: 15px;
  margin-right: 15px;
  transition: transform 0.4s ease;
}

.book-imagebackgroundtest{
  background-repeat: no-repeat;
  background-size: contain; /* scales the image */
  background-position: center; /* centers the image */
  background-position: center bottom;

}




.book-tilted {
  float: left;
  width: 74px;
}

.book-tilted > .book {
  transform: translateY(-3px) translateX(15px) rotate(9deg);
}

.book:hover {
  transform: scale(1.05);
}

.book-green {
  background-color: darkgreen;
  border-left: 2px solid #007800;
  border-right: 2px solid #005000;
}

.book-blue {
  background-color: #0C347D;
  border-left: 2px solid #0e3c90;
  border-right: 2px solid #0a2c6a;
}

.book-umber {
  background-color: #54290C;
  border-left: 2px solid #66320f;
  border-right: 2px solid #422009;
}

.book-springer {
  background-color: #EDED80;
  border-left: 2px solid #f0f092;
  border-right: 2px solid #eaea6e;
  color: black;
}

.book h2 {
  padding: 0;
  font-size: 1em;
  transform-origin: 0% 0%;
  transform: rotate(0.25turn) translateY(-35px);
  width: 170px;
}

.book h3 {
  padding: 0;
  font-size: 0.7em;
  transform-origin: 0 0;
  transform: rotate(0.25turn) translateY(-15px) translateX(-20px);
  width: 150px;
}