/*
Theme Name: Pen
Theme URI: https://www.htmlpie.com/products/pen-multipurpose-wordpress-theme
Author: HTMLPIE
Author URI: https://www.htmlpie.com/about
Description: Pen is a Full Version multipurpose WordPress theme with tons of features, classic and masonry layouts, multiple color schemes and fonts, including dark and flat styles, for your whole site or individual widgets or content. It has over 450 customization options and beautiful animation effects, making it easy to customize every aspect of your website, blog, or WooCommerce shop. Unlike many themes, you can also customize various parts of this theme for individual posts, pages, or WooCommerce products with only a few clicks. Check out the "Pen Options" section under your content editor (either Gutenberg or classic) and you will be surely excited to see the new way of creating and reusing page templates.
Version: 1.4.0
Requires at least: 4.8
Requires PHP: 5.6
Tested up to: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pen
Tags: blog, custom-background, custom-colors, custom-header, custom-logo, custom-menu, e-commerce, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, four-columns, full-width-template, grid-layout, left-sidebar, microformats, one-column, portfolio, post-formats, right-sidebar, sticky-post, theme-options, threaded-comments, three-columns, translation-ready, two-columns, wide-blocks
*/

/*Rating table*/

.posts-list{
    /* display: flex;
    flex-wrap: wrap; */
    margin: 0 -15px;
}
.posts-list.posts-list-2,
.posts-list.posts-list-3,
.posts-list.posts-list-4{

}

.post-item{
    /*background: red;*/
    /*padding: 15px;*/
}

.post-item-inner{
    border-radius: 5px;
    margin: 0 15px 30px;
    padding: 15px;
    box-shadow: 0 0 25px 0 rgb(0 0 0 / 20%);
    transition: all .5s ease-in-out;
}
.post-item-inner:hover{
    box-shadow: 0 0 35px 0 rgb(0 0 0 / 40%);
}

.post-item .casino-logo{

}
.post-item .casino-logo img{
    display: block;
    width: 100%;
    height: auto;
}

.post-title{
    text-align: center;
    padding: 15px 0 5px;
}
.post-title a{
    font-weight: bold;
    text-decoration: none;
}

.casino-bnts{
    display: flex;
    justify-content: space-between;
}

.btn-1,
a.btn-1{
    border: none;
    outline: none;
    text-align: center;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    min-width: 85px;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: .1px;
    text-decoration: none !important;
}

.casino-rating{
    text-align: center;
    padding: 5px 0;
}
.star-icon{
    margin: 0 2px;
    width: 24px !important;
    height: 24px !important;
}

.casino-bonus{
    text-align: center;
    font-size: 12px;
    line-height: 14px;
    color: #7f8c8d;
    padding: 0 0 10px 0;
    min-height: 28px;
    overflow: hidden;
}

.load-more-wrapper{
    text-align: center;
    padding: 0 0 25px 0;
}

@media( min-width:480px){
    .posts-list{
        display: flex;
        flex-wrap: wrap;
    }
    .posts-list.posts-list-2 .post-item,
    .posts-list.posts-list-3 .post-item,
    .posts-list.posts-list-4 .post-item{
        flex: 0 0 50%;
        max-width: 50%;
    }
}



@media( min-width:768px){
    .posts-list.posts-list-3 .post-item,
    .posts-list.posts-list-4 .post-item{
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media( min-width: 992px){
    .posts-list.posts-list-4 .post-item{
        flex: 0 0 25%;
        max-width: 25%;
    }
}



/*Rating table view 2*/

.casino-rating-table-2{
    width: 100%;
}
.casino-rating-table-2 .casino-item{
    margin-top: 30px;
    /*display: flex;*/
    /*flex-direction: row;*/
    /*justify-content: space-between;*/
    /*min-height: 156px;*/
    border-radius: 5px;
    box-shadow: 0 0 25px 0 rgb(0 0 0 / 20%);
    transition: all .5s ease-in-out;
}
.casino-rating-table-2 .casino-item:first-child{
    margin-top: 0;
}
.casino-rating-table-2 .casino-item:hover{
    box-shadow: 0 0 35px 0 rgb(0 0 0 / 40%);
}
.casino-rating-table-2 .casino-item-logo{
    /*width: 156px;*/
    width: 100px;
    border-radius: 5px 0 0 5px;
}
.casino-rating-table-2 .casino-item-logo img{
    border-radius: 5px;
}
.casino-item-title-wrapper{
    display: flex;
    width: 100%;
    padding: 15px;
}
.casino-rating-table-2 .casino-item-rating-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 15px;
}
.casino-rating-table-2 .casino-item-rating-wrapper .post-title{
    padding: 0;
}
.casino-item-rating{
    /*padding: 4px 10px;*/
    /*background: #FFFFFF;*/
    /*border-radius: 25px;*/
    /*line-height: 16px;*/
}
.casino-item-rating .star-icon{
    width: 16px !important;
    height: 16px !important;
}
.casino-rating-table-2 .casino-item-bonus{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    line-height: 16px;
    width: 100%;
    padding: 15px;
}
.casino-rating-table-2 .casino-item-btns{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}
.casino-rating-table-2 .casino-item-btns .btn-1{
    margin: 10px
}

.casino-rating-table-2 + .load-more-wrapper{
    margin-top: 30px;
}

@media  (min-width: 992px) {
    .casino-rating-table-2 .casino-item {
        /*margin-top: 30px;*/
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        min-height: 156px;
    }
    .casino-rating-table-2 .casino-item-logo{
        width: 156px;
        min-width: 156px;
        border-radius: 5px 0 0 5px;
    }
    .casino-rating-table-2 .casino-item-logo img{
        border-radius: 5px 0 0 5px;
    }
    .casino-item-title-wrapper{
        display: flex;
        width: 60%;
        padding: 0 15px 0 0;
    }
    .casino-item-rating{
        padding: 4px 10px;
        background: #FFFFFF;
        border-radius: 25px;
        line-height: 16px;
    }
    .casino-rating-table-2 .casino-item-bonus{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        line-height: 16px;
        width: 20%;
        padding: 15px;
    }
    .casino-rating-table-2 .casino-item-btns{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px;
    }

    .casino-rating-table-2 .casino-item-btns .btn-1{
        margin: 10px 0 0 0
    }
    .casino-rating-table-2 .casino-item-btns .btn-1:first-child{
        margin-top: 0;
    }
}