/*	This is used when you are making a website with individual css for each page
	NOTE: Use the master css for any items that you want to be constant throughout the website
*/
#contentbox{text-align:center; max-width: 1200px; margin: auto; background: none; border-radius: 0; border:none;}
.bookwrapper{width:46%; text-align: left; background: #d0ebf4; margin: 5px; border-radius: 10px; border: 2px solid #73bdd5; padding: 10px; transition: background-color 0.3s ease-in-out;}
.bookwrapper:hover{ background:#ffffff; border: 2px solid #ffa40b;}
.books{border-bottom:none;border-top:none;}
.bookTitle{width: 60%;}
.bookSec{display: flex; justify-content: space-between; align-items: center;}
.availableWrap{padding: 10px; margin: 15px 5px 0; border-top: 1px solid #003b53;}
.bookButton{display: flex; justify-content: center; margin: 10px; color:#ffffff; background: #fea80a; padding: 10px; border-radius: 5px; text-align: center; font-size: 1.3em; margin: 10px;}
.bookButton a:link, .bookButton a:visited{text-decoration:none; display: block; color:#ffffff; width: 100%; text-align: center; font-size: 1.3em; transition: ease-in;}
.bookButton a:hover, .bookButton a:active{text-decoration:none; display: block; color:#ffffff;}
.bookButton:hover{color:#ffffff; background: #25728b;}
.bookImg{margin: 10px auto;}
h3{ text-align: center;}


@media screen and (max-width:1200px){
    
}

@media screen and (max-width:1100px){
    
}

@media screen and (max-width:1000px){
    
}

@media screen and (max-width:900px){
    .bookwrapper{width:94%; left: 5px !important;}
    
}

@media screen and (max-width:800px){
    .bookButton{font-size: 1.2em;}
    
}

@media screen and (max-width:700px){
    .bookwrapper{width:90%; left: 10px !important;}
    
}

@media screen and (max-width:600px){
    .bookTitle{width: auto;}
    .bookSec{display: block;}
    .bookImg{text-align: center; margin: 10px auto 5px;}
    
}

@media screen and (max-width:500px){
    .bookButton{font-size: 1.1em;}
    
}

@media screen and (max-width:400px){
    
}

@media screen and (max-width:360px){
    .bookwrapper{left: 0 !important;}
    
}