.wbg-main-wrapper .wbg-item {

    border: 1px solid #DDD;

    padding: 5px!important;

    min-height: 305px;

    margin-right: 5px;

    margin-bottom: 5px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

    transition: box-shadow 0.3s ease-in-out;

    text-align: center;

}



.wbg-main-wrapper .wbg-item:hover {

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



.wbg-main-wrapper .wbg-item.w3-quarter {

    width: 24.35%;

}



.wbg-main-wrapper .wbg-item img {

    border: 0px solid #FF0000;

    height: 150px;

    width: auto;

    margin-bottom: 5px;

}



.wbg-main-wrapper .wbg-item a {

    font-size: 16px;

    font-weight: 400;

    display: inline-block;

    border: 0px solid #000;

    width: 100%;

    outline: none;

    line-height: 22px;

    color: #242424;

    text-align: center;

    min-height: 50px;

    margin: 0;

    padding: 0;

}



.wbg-main-wrapper .wbg-item a:hover {

    color: #999;

}



.wbg-main-wrapper .wbg-item a.active {

    color: #242424;

}



.wbg-main-wrapper .wbg-item a:active {

    outline: none;

    text-decoration: none!important;

}



.wbg-main-wrapper .wbg-item a:active {

    outline: none;

    text-decoration: none!important;

}



.wbg-main-wrapper .wbg-item span {

    font-size: 12px;

    display: inline-block;

    border: 0px solid #000;

    width: 100%;

    margin: 0px!important;

    padding: 0px!important;

    line-height: 20px;

    text-align: center;

    background: #F8F8F8;

}





/* Pagination */



.wbg-pagination {

    width: 100%;

    text-align: center;

}



.wbg-pagination .page-numbers {

    display: inline-block;

    padding: 5px 10px;

    margin: 0 2px 0 0;

    border: 1px solid #eee;

    line-height: 1;

    text-decoration: none;

    border-radius: 2px;

    font-weight: 600;

}



.wbg-pagination .page-numbers.current,

a.page-numbers:hover {

    background: #f9f9f9;

}





/* Details Page css */



.wbg-details-wrapper {

    width: 1000px;

    margin: 150px auto;

    display: flex;

    flex-wrap: wrap;

    min-height: 100px;

}



.wbg-details-wrapper .wbg-details-image {

    min-height: 100px;

    padding: 5px;

    margin-right: 20px;

    border: 0px solid #000;

    width: 350px;

}



.wbg-details-wrapper .wbg-details-image img {

    width: 100%;

    height: auto;

    border: none;

}



.wbg-details-wrapper .wbg-details-description {

    flex: 1;

}



.wbg-details-wrapper .wbg-details-description h5.wbg-details-book-title {

    margin-bottom: 10px;

    color: #242424;

    font-size: 24px;

}



.wbg-details-wrapper .wbg-details-description span {

    font-size: 14px;

    display: inline-block;

    border: 0px solid #000;

    width: 100%;

    margin: 0px!important;

    padding: 0px!important;

    margin-bottom: 10px!important;

}



.wbg-details-wrapper .wbg-details-description span b {

    color: #242424;

    width: 100px;

    border: 0px solid #FF0000;

    display: inline-block;

}



.wbg-details-wrapper .wbg-details-description-full {

    border: 0px solid #000;

    margin-top: 20px;

    font-size: 14px;

}



.wbg-details-wrapper .wbg-details-description-full .wbg-details-description-title {

    border: 0px solid #009900;

    padding: 0 8px;

}



.wbg-details-wrapper .wbg-details-description-full .wbg-details-description-title hr {

    margin-bottom: 10px;

}



.wbg-details-wrapper .wbg-details-description-full .wbg-details-description-content {

    padding: 0 8px;

}





/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */



@media(max-width:500px) {

    .wbg-main-wrapper .wbg-item {

        width: 100%;

        margin-right: 0;

    }

    .wbg-main-wrapper .wbg-item.w3-quarter {

        width: 100%;

    }

    .wbg-main-wrapper .wbg-item img {

        width: 100%;

        height: auto;

        margin-bottom: 15px;

    }

    .wbg-details-wrapper {

        display: block;

        width: 100%;

    }

    .wbg-details-wrapper .wbg-details-image {

        width: 100%;

        display: inline-block;

        padding: 10px;

        margin-bottom: 30px;

    }

    .wbg-details-wrapper .wbg-details-description {

        padding: 10px;

    }

}



@media only screen and (max-width: 800px) and (min-width: 501px) {

    .wbg-main-wrapper .wbg-item {

        min-height: 305px;

    }

    .wbg-main-wrapper .wbg-item.w3-quarter {

        width: 48.46%;

    }

    .wbg-details-wrapper {

        display: block;

        width: 100%;

    }

    .wbg-details-wrapper .wbg-details-image {

        width: 100%;

        display: inline-block;

        padding: 10px;

        margin-bottom: 30px;

        text-align: center;

    }

    .wbg-details-wrapper .wbg-details-image img {

        width: 300px;

        margin: 0 auto;

    }

    .wbg-details-wrapper .wbg-details-description {

        padding: 10px;

    }

}



@media only screen and (max-width: 1200px) and (min-width: 801px) {

    .wbg-main-wrapper .wbg-item {

        min-height: 305px;

    }

    .wbg-main-wrapper .wbg-item.w3-quarter {

        width: 32.50%;

    }

    .wbg-details-wrapper {

        display: flex;

        width: 100%;

    }

    .wbg-details-wrapper .wbg-details-image {

        width: 300px;

        display: inline-block;

        padding: 10px;

        margin-bottom: 30px;

        text-align: center;

        margin-right: 0px;

    }

    .wbg-details-wrapper .wbg-details-description {

        flex: 1;

        padding: 10px;

    }

}