.bookshelf{
height:200px;
}

.bookshelf-arrow-left{
width:10%;
background: url('../images/5l.png') no-repeat center center transparent;
height:200px;
background-size: 100% auto;
float:left;
}

.bookshelf-arrow-right{
width:10%;
background: url('../images/5r.png') no-repeat center center transparent;
height:200px;
background-size: 100% auto;
float:left;
}

.bookshelf-arrow-left:hover,.bookshelf-arrow-right:hover{
opacity:0.9;
}

.bookshelf-arrow-left img,.bookshelf-arrow-right img{
width: 22px;
}



.shelf{
width:80%;
height:200px;
float:left;
position:relative;
overflow:hidden;
}

.book{
width:20%;
margin: 0% 2.5%;
height:200px;
position:absolute;
top:0px;
left:0px;

}

.book-inner{

height:200px;
text-align:center;
width: 100%;
display:table-cell;
vertical-align:middle;
}

.book img, .book h5{
max-width:100%;
text-align:center;
max-height:100px;
}

.book h5{
margin:10px 0px;
border: 2px solid #C4094B;
color: #C4094B;
font-size: 16px;
padding: 5px 0px;
}

@media only screen and (min-width: 767px) and (max-width: 940px) {

.shelf{
width:70%;
}

}

@media only screen and (min-width: 480px) and (max-width: 767px) {

.shelf{
width:70%;
}

.book{
width:45%;
margin: 0% 2.5%;
height:200px;
position:absolute;
top:0px;
left:0px;

}
}

@media only screen  and (max-width: 479px) {

.shelf{
width:60%;
}

.book{
width:95%;
margin: 0% 2.5%;
height:200px;
position:absolute;
top:0px;
left:0px;

}
}