@keyframes spin { 0% { transform: rotate(0deg); }   100% { transform: rotate(360deg); } } .blog-listing { position: relative; overflow-x: hidden; } .blog-listing__filters .filters__multiselect { width: 100%; max-width: calc(33.33333333% - 14px); position: relative; border-radius: 5px; } @media (max-width: 768px) { .blog-listing__filters .filters__multiselect { max-width: 100%; } } .blog-listing__filters .filters__select-box { width: 100%; position: relative; border-radius: 5px; padding: 14px 22px; cursor: pointer; } .blog-listing__filters .filters__select-box.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .blog-listing__filters .filters__select-box.active .filters__label:before { transform: translateY(50%) rotate(-135deg); } .blog-listing__filters .filters__label { width: 100%; } .blog-listing__filters .filters__label:before { content: ''; position: absolute; top: 28%; right: 38px; width: 15px; height: 15px; transform: rotate(45deg); transition: all .2s; } .blog-listing__filters .filters__label-default { margin: 0; } .blog-listing__filters .filters__label-over-select { margin: 0; display: flex; flex-wrap: wrap; align-items: center; } .blog-listing__filters .filters__label-over-select span:not(:last-of-type):after { content: ','; margin-right: 5px; } .blog-listing__filters .filters__label-over-select .count { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 10px; border-radius: 100px; font: normal normal 400 14px/14px 'TheSans'; background-color: #ffffff; } .blog-listing__filters .filters__checkboxes { position: absolute; top: 100%; left: 0; right: 0; z-index: 9; display: none; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } .blog-listing__filters .filters__checkboxes label { display: flex; align-items: center; padding: 13px 22px; margin: 0; cursor: pointer; transition: .2s ease-in-out; } .blog-listing__filters .filters__checkboxes label:last-child { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } .blog-listing__filters .filters__checkboxes label input { display: none; } .blog-listing__filters .filters__checkboxes label span { height: 22px; width: 22px; display: block; position: relative; margin-right: 10px; transition: .2s ease-in-out; } .blog-listing__filters .filters__checkboxes label p { margin: 0; } .blog-listing__filters .filters__checkboxes label [type=checkbox]:checked + span:before { content: ''; position: absolute; top: 2px; left: 6px; width: 8px; height: 12px; transform: rotate(35deg); } .blog-listing__grid { display: flex; flex-wrap: wrap; width: calc(100% + 24px); margin: 22px -12px 0; } .blog-listing__grid .item { display: block; width: calc(33.33333333% - 24px); margin: 0 12px 24px 12px; text-decoration: none !important; border-radius: 16px; overflow: hidden; transition: 0s; } @media (max-width: 992px) { .blog-listing__grid .item { width: calc(50% - 24px); } } @media (max-width: 568px) { .blog-listing__grid .item { width: calc(100% - 24px); } } .blog-listing__grid .item:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .blog-listing__grid .item__image { display: block; height: 220px; background-position: center; background-size: cover; background-repeat: no-repeat; } .blog-listing__grid .item__grid { padding: 20px 25px; min-height: calc(100% - 220px); } @media (max-width: 992px) { .blog-listing__grid .item__grid { flex-direction: column; align-items: flex-start; justify-content: flex-start; } } .blog-listing__grid .item__grid .title { display: block; padding-top: 5px; margin-bottom: 0; } @media (max-width: 1200px) { .blog-listing__grid .item__grid .title { order: 2; } } @media (max-width: 992px) { .blog-listing__grid .item__grid .title { width: 100%; } } .blog-listing__grid .item__grid .date { display: block; width: 30%; } @media (max-width: 1200px) { .blog-listing__grid .item__grid .date { width: 100%; order: 1; } } @media (max-width: 568px) { .blog-listing__grid .item__grid .date { text-align: left; } } .blog-listing__grid .item__grid .item__btn { display: block; width: 100%; white-space: nowrap; } .blog-listing__grid .item__grid .item__btn span { padding-top: 10px; padding-left: 0px; font-weight: 600; transition: all .3s; } @media (max-width: 1200px) { .blog-listing__grid .item__grid .item__btn { width: 100%; order: 3; } } @media (max-width: 992px) { .blog-listing__grid .item__grid .item__btn { padding-left: 0; margin-top: 10px; } } .blog-listing__grid .item.large { width: calc(50% - 24px); } @media (max-width: 568px) { .blog-listing__grid .item.large { width: calc(100% - 24px); } } .blog-listing__grid .item.large .item__image { height: 250px; } @media (max-width: 1200px) { .blog-listing__grid .item.large .item__image { height: 170px; } } .blog-listing .isotope-pager { text-align: center; padding-top: 45px; display: flex; align-items: center; justify-content: center; } .blog-listing .isotope-pager .pager { display: none; border-radius: 8px; cursor: pointer; height: 45px; width: 45px; justify-content: center; align-items: center; text-decoration: none; } .blog-listing .isotope-pager .pager:first-child, .blog-listing .isotope-pager .pager:nth-child(2), .blog-listing .isotope-pager .pager:nth-child(3), .blog-listing .isotope-pager .pager:nth-child(4), .blog-listing .isotope-pager .pager:nth-child(5), .blog-listing .isotope-pager .pager:nth-child(6), .blog-listing .isotope-pager .pager:last-child { display: flex; } .blog-listing .isotope-pager .pager--more { cursor: inherit; pointer-events: none; } .blog-listing .isotope-pager .pager.previous_btn:before { content: ''; display: block; width: 12px; height: 12px; transform: rotate(45deg); } .blog-listing .isotope-pager .pager.next_btn:before { content: ''; display: block; width: 12px; height: 12px; transform: rotate(-45deg); } .blog-listing .isotope-pager .pager.active { display: flex; color: #ffffff; } .blog-listing .no-results { display: flex; justify-content: center; margin: 100px 0 150px; } .blog-listing.theme-dark .filters__select-box.active .filters__label p, .blog-listing.theme-dark .filters__checkboxes label p, .blog-listing.theme-dark .blog-listing__filters .filters__label-over-select, .blog-listing.theme-dark .item .main *, .blog-listing.theme-dark .item .item__btn *, .blog-listing.theme-dark .isotope-pager .pager, .blog-listing.theme-dark .isotope-pager .pager.active, .blog-listing.theme-dark .filters__label-default { color: #ffffff; } .blog-listing.theme-dark .filters__checkboxes label span, .blog-listing.theme-dark .filters__checkboxes label [type=checkbox]:checked + span, .blog-listing.theme-dark .filters__checkboxes label [type=checkbox]:checked + span:before, .blog-listing.theme-dark .filters__label:before, .blog-listing.theme-dark .isotope-pager .pager.previous_btn:before, .blog-listing.theme-dark .isotope-pager .pager.next_btn:before { border-color: #ffffff; }