.dropdown-post-filter-area .post-item {

    border: 1px solid #ddd;

    padding: 10px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.dropdown-post-filter-area .post-content {

    padding-bottom: 10px;

}



.dropdown-post-filter-area .post-item {

    padding: 10px;

    box-sizing: border-box;

}



.dropdown-post-filter-area .post-button {

    max-width: 250px;

    margin-top: auto !important;

}

.dropdown-post-filter-area.columns-1 .post-item { width: calc(100%); }

.dropdown-post-filter-area.columns-2 .post-item { width: calc(50%); }

.dropdown-post-filter-area.columns-3 .post-item { width: calc(33.33%); }

.dropdown-post-filter-area.columns-4 .post-item { width: calc(25%); }



.dropdown-post-filter-area .post-filter-container {

    display: flex;

    margin-bottom: 20px;

}



.dropdown-post-filter-area #subcategory-dropdowns {

    display: flex;

}



.dropdown-post-filter-area select {

    margin-right: 10px;

}





.dropdown-post-filter-area .hover-effect {

    overflow: hidden;

    margin: 0;

    padding: 6px; 

}





.dropdown-post-filter-area .hover-effect .button-icon {

    position: relative;

    display: inline-block;

    vertical-align: middle;

    overflow: hidden;

    line-height: 1px;

    text-align: center;

    height: auto;

}



.dropdown-post-filter-area .hover-effect .button-icon svg {

    width: 12px;

}



.dropdown-post-filter-area .hover-effect .button-icon i {

    width: 12px;

}



.dropdown-post-filter-area .hover-effect .button-text {

    position: relative;

    margin-right: 0;

    display: inline-block;

    vertical-align: middle;

    text-indent: -113px;

    visibility: hidden;

    white-space: nowrap;

    opacity: 0;

    -webkit-transition: visibility .4s ease, margin-right .4s ease-out, text-indent .5s ease-out, opacity .4s ease;

    -ms-transition: visibility .4s ease, margin-right .4s ease-out, text-indent .5s ease-out, opacity .4s ease;

    transition: visibility .4s ease, margin-right .4s ease-out, text-indent .5s ease-out, opacity .4s ease;

    will-change: visibility, margin-right, text-indent, opacity;

}



.dropdown-post-filter-area .post-item:hover .hover-effect .button-text {

    opacity: 1;

    text-indent: 0;

    margin-right: 6px;

    visibility: visible;

    -webkit-transition: visibility .4s ease, margin-right .3s ease-out, text-indent .4s ease-out, opacity .4s ease;

    -ms-transition: visibility .4s ease, margin-right .3s ease-out, text-indent .4s ease-out, opacity .4s ease;

    transition: visibility .4s ease, margin-right .3s ease-out, text-indent .4s ease-out, opacity .4s ease;

}



.dropdown-post-filter-area .modal-widget-modal-btn-hover-icon-left .button-text {

    position: relative;

    margin-left: 0;

    display: inline-block;

    vertical-align: middle;

    text-indent: 71px;

    visibility: hidden;

    white-space: nowrap;

    opacity: 0;

    -webkit-transition: visibility .4s ease, margin-left .4s ease-out, text-indent .5s ease-out, opacity .4s ease;

    -ms-transition: visibility .4s ease, margin-left .4s ease-out, text-indent .5s ease-out, opacity .4s ease;

    transition: visibility .4s ease, margin-left .4s ease-out, text-indent .5s ease-out, opacity .4s ease;

    will-change: visibility, margin-left, text-indent, opacity;

}

  

.dropdown-post-filter-area .modal-widget-modal-btn-hover-icon-left:hover .button-text {

    opacity: 1;

    text-indent: 0;

    margin-left: 6px;

    visibility: visible;

    -webkit-transition: visibility .4s ease, margin-left .3s ease-out, text-indent .4s ease-out, opacity .4s ease;

    -ms-transition: visibility .4s ease, margin-left .3s ease-out, text-indent .4s ease-out, opacity .4s ease;

    transition: visibility .4s ease, margin-left .3s ease-out, text-indent .4s ease-out, opacity .4s ease;

}



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

    .post-filter-container {

        flex-direction: column;

    }



    .dropdown-post-filter-area select {

        height: 42px;

        margin-right: 10px;

        width: 100%;

        margin-bottom: 5px;

    }



    .pwa-post-list {

        grid-template-columns: repeat(1, 1fr) !important;

    }

}