body{
  height: initial;
}
.intro-reading h1{
    font-weight: 900;
    font-size: 2em;
    margin: 25px 0px 5px 0px;
    color: #5CA2B9;
    text-align: center;
}
.intro-reading p {
    font-weight: 400;
    font-size: 1em;
    line-height: 175%;
    margin: 5px 0px 25px 0px;
    text-align: center;

}
#book-icon {
    background: url(../img/book.gif) center no-repeat;
    background-size: cover;
    margin: 2em auto;
}
.item {
    padding: 5px;
    max-width: 550px;
    height: 250px;
}

.book-cover {
    width: 30%;
    height: 100%;
    float: left;
}
.caption{
    float: right;
    width: 70%;
    height: 100%;
    font-size: 80%;
}
.caption h2 {
  margin :25px 0 5px 0;
}
.caption p { font-size: 80%;
    margin: 5px 0;
}
.cover{
  margin: 25px auto;
  width: 100px;
  height: 150px;
  background: url(https://images-na.ssl-images-amazon.com/images/I/41jWdXkLySL._SX324_BO1,204,203,200_.jpg) center no-repeat;
  background-size: cover;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.25);
 -webkit-transform: rotateX(-15deg) rotateY(30deg);
          transform: rotateX(-15deg) rotateY(30deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.cover:before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  width: 20px;
  height: 100%;
  background: #f0c0af;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
}
.cover:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  background: #f5efdc;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.item:hover .cover{
  -webkit-transform: rotateX(0deg) rotateY(0deg);
          transform: rotateX(0deg) rotateY(0deg);
}
#gunsgerms{
  background: url(../img/gunsgerms.jpg) center no-repeat;
  background-size: cover;
}
#gunsgerms:before{
  background: #505050;
}
#mindworks{
  background: url(../img/mindworks.jpg) center no-repeat;
  background-size: cover;
}
#mindworks:before{
  background: lightblue;
} 
#tipping{
  background: url(../img/tipping.jpg) center no-repeat;
  background-size: cover;
}
#tipping:before{
  background: red;
}
#freeculture {
  background: url(../img/freeculture.png) center no-repeat;
  background-size: cover;
}
#freeculture:before{
  background: #bfade6;
}
#quantum{
  background: url(../img/quantum.jpg) center no-repeat;
  background-size: cover;
}
#quantum:before{
  background: #33cccc;
}
#counterculture{
  background: url(../img/counterculture.jpg) center no-repeat;
  background-size: cover;
}
#counterculture:before{
  background: #459ea5;
}
#sapiens{
  background: url(../img/sapiens.jpg) center no-repeat;
  background-size: cover;
}
#sapiens:before{
  background: #f7eebb;
}
#creativity{
  background: url(../img/creativity.jpg) center no-repeat;
  background-size: cover;
}
#creativity:before{
  background: black;
}
#rework{
  background: url(../img/rework.png) center no-repeat;
  background-size: cover;
}
#rework:before{
  background: #b90a0a;
}
#code{
  background: url(../img/code.jpg) center no-repeat;
  background-size: cover;
}
#code:before{
  background: #ef9d69;
}
#stigma{
  background: url(../img/stigma.jpg) center no-repeat;
  background-size: cover;
}
#stigma:before{
  background: blue;
}
#esthetisation{
  background: url(../img/esthetisation.jpg) center no-repeat;
  background-size: cover;
}
#esthetisation:before{
  background: #bb5089;
}
#pasteur{
  background: url(../img/pasteur.jpg) center no-repeat;
  background-size: cover;
}
#pasteur:before{
  background: #c1dbff;
}
#thinkinginsystems{
  background: url(../img/thinkinginsystems.jpeg) center no-repeat;
  background-size: cover;
}
#thinkinginsystems:before{
  background: #b90a0a;
}
#limits{
  background: url(../img/limits.jpeg) center no-repeat;
  background-size: cover;
}
#limits:before{
  background: #bfade6;
}
#uninhabitable{
  background: url(../img/uninhabitable.jpeg) center no-repeat;
  background-size: cover;
}
#uninhabitable:before{
  background: black;
}
#energyhistory{
  background: url(../img/energyhistory.jpeg) center no-repeat;
  background-size: cover;
}
#energyhistory:before{
  background: #459ea5;
}
#everydaydesign{
  background: url(../img/everydaydesign.jpeg) center no-repeat;
  background-size: cover;
}
#everydaydesign:before{
  background: yellow;
}
#escher{
  background: url(../img/escher.jpeg) center no-repeat;
  background-size: cover;
}
#escher:before{
  background: black;
}
 /*==========  Media Quieries ==========*/
 
    /* Very Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }
    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }
 
    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
 
    }
 
    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
        .item {
            max-width: 100%;
        }
    }
 
    /* Extra Small Devices, Phones */
    @media only screen and (max-width : 480px) {
      .book-cover, .caption {
          width: 100%;
          height: initial;
      }
      .item {
        height: 100%;
        max-height: 500px;
      }
    }
 
    /* Custom, iPhone Retina */
    @media only screen and (max-width : 320px) {
       
    }