body {
  background: #05050579;

  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../img/bg.jpg");
  padding-top: 20px;
}

/* Container for BookShelf /*/

.bs-container {
  max-width: 800px;
  margin: 0 auto;
  background: transparent;
  overflow: hidden;
  margin-bottom: 0px;
  text-align: center;
}

/* Description for BookShelf /*/

.bs-description {
  font-family: Tahoma, Helvetica, sans-serif;
  margin-bottom: 18px;
  margin-top: 0px;
  color: #333333;
}

.bs-description h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 14px 0;
    padding-left: 14px;
    color: #1e65a5;
    letter-spacing: 0.5px;

    text-shadow: 0 0 10px rgb(250, 250, 248);
  }

.bs-description p {
  font-family: "Roboto";
  font-size: 14px;
  margin-bottom: 6px;
  margin-top: 0px;
}

/* Shelf /*/

.bs-container .bs-shelf {
  position: relative;
  height: 150px;
  margin-bottom: 10%;
}

/* Shelf - image /*/
.bs-container .bs-shelf-images {
  height: 100%;
}

.bs-container .bs-shelf-image {
  width: 240px;
  height: 100%;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  max-width: 100%;
}
.bs-container .bs-shelf-image:hover {
  border-bottom: 3px solid #007bff;
}

.bs-container .bs-shelf-image img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0px 0px 3px #666666;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  box-shadow: #333333 0px 5px 15px;
}

/* Image - textbox /*/

.bs-container .bs-shelf-image .bs-mask {
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  position: relative;
}

.bs-container .bs-shelf-image .bs-textbox {
  position: absolute;
  background: #ffffff;
  width: 100%;
  bottom: -100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 1;
  padding: 5px 0;
  pointer-events: none;
}

.bs-container .bs-shelf-image .bs-textbox p {
  color: #000000;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}

/* Shelf - background /*/

.bs-container .bs-shelf-background {
  position: absolute;
  border: 0px solid #ff0000;
  left: 0;
  bottom: -15px;
  width: 100%;
  height: 35px;
}

.bs-container .bs-shelf-background .bs-rectangle {
  width: 100%;
  height: 100%;
  border: 0px solid #fff000;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: perspective(100px) rotateX(15deg);
  -webkit-transform-origin: 50% 100% 0;
  -ms-transform: perspective(100px) rotateX(15deg);
  -ms-transform-origin: 50% 100% 0;

  box-shadow: 0px 7px 1px #cccccc;
  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.06) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.06) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.06) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#0f000000',GradientType=0 );
}

.cabinet {
  margin-top: 50px;
}

.bs-footer {
  margin-top: 150px !important;

  font-family: "Roboto";
  font-size: 14px;
  margin-bottom: 20px;
  margin-top: 0px;
  color: #333333;
}




/* Tablet and up */
@media (min-width: 600px) {
  .bs-description h3 {
    font-size: 21px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .bs-description h3 {
    font-size: 24px;
  }

  body {
    padding-top: 100px;
  }
}