.ff_ajax {
    transition: opacity .6s ease;
    position: relative;
}
.ff_ajax.filter_loading,
.ff_ajax.loading {
    opacity: 1;
}
.ff_ajax.filter_loading .loop:after,
.ff_ajax.loading .loop:after {
    content: '\e90f';
    font-family: 'icomoon';
    position: absolute;
    color: #000;
    font-weight: 400;
    animation: fa-spin 1.5s linear infinite;
    left: 50%;
    translate: -50% -50%;
    top: 50%;
    font-size: 30px;
    opacity: 0.5;
}
.ff_ajax.filter_loading .loop {
    opacity: .7;
}
.ff_ajax.filter_loading .loop:after {
    opacity: 1;
	top: 0;
}

.load-more-btn {
    margin-top: 40px;
}
.load_more_loading .load-more-btn {
    position: relative;
    pointer-events: none;
}
.load_more_loading .load-more-btn:after {
    content: '\e90f';
    font-family: 'icomoon';
    position: absolute;
    right: -25px;
    color: #000;
    font-weight: 400;
    animation: fa-spin 1.5s linear infinite;
}

.filter-con {
    position: relative;
}
.filter-con .label {
    display: block;
}

.search-con input,
.filter-date input {
    padding-right: 20px;
}
.filter-con .field_clear {
    position: absolute;
    right: 4px;
    top: 50%;
    cursor: pointer;
    line-height: 1;
    translate: 0 -50%;
}
.filter-con .field_clear:after {
    content: '\e9df';
    font-family: 'icomoon';
    font-size: 16px;
    color: inherit;
}
.filter-con .field_clear:hover {
    color: #ef3434;
}

.filter_indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    line-height: 1;
    margin-top: 10px;
}
.filter_indicators .indicator {
    line-height: 1;
    border: 1px solid #e0e1e4;
    padding: 6px 8px 6px 12px;
    display: inline-flex;
    gap: 8px;
    background: #fbfbfb;
    color: inherit;
    font-size: 12px;
    align-items: center;
}
.filter_indicators .indicator .remove {
    cursor: pointer;
    transition: color .3s ease;
}
.filter_indicators .indicator .remove:before {
    content: '\e9df';
    font-family: 'icomoon';
    font-size: 16px;
    color: inherit;
}
.filter_indicators .indicator .remove:hover {
    color: #ef3434;
}

.ff_ajax_filter_buttons {
    display: flex;
    gap: 20px;
    align-items: center;
}
.ff_ajax_filter_buttons button {
    padding: 7px 14px;
    min-height: initial;
    border-radius: 4px;
    border: 2px solid #eee;
    background: #eee;
    color: #495056;
}
.ff_ajax_filter_buttons button.selected {
    border-color: #495056;
}

.ff_ajax .intro-animate {
    animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.ff_ajax .loop {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 40px;
    row-gap: 45px;
}

.flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.grid {
    display: grid;
}
.grid.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.grid.cols-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.gap-20 {
    gap: 20px;
}

.mt-30 {
    margin-top: 30px;
}


.ff_ajax .loop {
    margin-top: 40px;
    position: relative;
}
.ff_ajax .item {

}
.ff_ajax .item .s1{
    /* aspect-ratio: 302 / 196; has an issue like this https://prnt.sc/OcSJzXpIF8S7 */
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    max-height: 166px;
}
.ff_ajax .item .s1:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f0f0f0;
    opacity: 1;
    transition: opacity 0.5s;
    pointer-events: none;
}
.ff_ajax .item .s1:after {
    content: '';
    height: 74px;
    width: 74px;
    background: url('https://nextlevelracing.com/wp-content/uploads/2024/02/video-icon-002.svg') no-repeat center;
    background-size: 74px;
    transition: scale 0.3s, opacity 0.3s;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    pointer-events: none;
}
.ff_ajax .item .s1:hover:after {
    scale: 1.05;
    opacity: 0.8;
}
.ff_ajax .item .s1:hover:before {
    opacity: 0.8;
}
.ff_ajax .item .s1 img {
    position: relative;
    aspect-ratio: 350 / 195;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
}
.ff_ajax .item .s2 {
    padding: 20px 0 0;
}
.ff_ajax .item .title {
    font-weight: 800;
    font-size: 18px;
    line-height: 24px;
    color: #000;
    font-family: 'Exo';
    margin-bottom: 6px;
}
.ff_ajax .item .text {
    font-weight: 300;
    font-size: 14px;
    line-break: 17px;
    color: #000;
}

.fancybox-button:after {
    content: none !important;
}

@media (max-width: 1366px) {
    .ff_ajax .loop {
        grid-template-columns: 1fr 1fr;
    }    
}
@media (max-width: 767px) {
    .ff_ajax .loop {
        grid-template-columns: 1fr;
    }    
}