.blog-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-xl);
} .blog-search {
position: relative;
display: flex;
align-items: center;
margin-left: auto;
}
.blog-search-input {
padding: 6px 32px 6px 14px;
border: 1px solid var(--color-hard);
border-radius: var(--border-radius);
font-size: var(--font-size-sm);
background-color: transparent;
color: var(--color-text);
outline: none;
width: 200px;
transition: border-color 0.25s ease, width 0.25s ease;
}
.blog-search-input:focus {
border-color: var(--color-primary);
width: 260px;
}
.blog-search-input::placeholder {
color: var(--color-hard);
}
.blog-search-clear {
position: absolute;
right: 8px;
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: var(--color-hard);
padding: 0;
line-height: 1;
transition: color 0.2s ease;
}
.blog-search-clear:hover {
color: var(--color-primary);
}
.overlap .blog-search-input {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
}
.overlap .blog-search-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.overlap .blog-search-clear {
color: rgba(255, 255, 255, 0.7);
}
.blog-filters .filter-item {
display: inline-block;
cursor: pointer;
transition: all 0.3s ease;
font-size: var(--font-size-sm);
padding: 6px 18px;
border-radius: var(--border-radius);
border: 1px solid var(--color-hard);
}
.overlap .blog-filters .filter-item {
color: #fff;
border: 1px solid #fff;
}
.blog-filters .filter-item:hover {
color: #fff;
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.blog-filters .filter-item.active {
color: #fff;
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.blog-cat-list {
transition: opacity 0.3s ease;
}
.blog-filters label {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-xs);
margin-bottom: var(--space-3xl);
}
.blog-filters label {
display: block;
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-md);
color: var(--color-text);
}
.blog-filters select {
padding: 10px 20px;
padding-right: 25px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
background-color: #fff;
color: var(--color-text);
font-size: var(--font-size-xs);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
}
.blog-filters .filter-group {
position: relative;
} .ias-blog,
.load-more-blog {
text-align: center;
}
.ias-blog .loader {
width: 50px;
height: 50px;
border-radius: 100%;
position: relative;
margin: 0 auto;
}
.ias-blog .loader:before,
.ias-blog .loader:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: 100%;
border: 5px solid transparent;
border-top-color: var(--color-secondary);
}
.ias-blog .loader:before {
z-index: 100;
animation: spin 1s infinite;
}
.ias-blog .loader:after {
border: 5px solid #eeeeee;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.load-more-blog .btn {
position: relative;
}
.load-more-blog .btn .text {
transition: 0.3s;
}
.load-more-blog .btn svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
visibility: hidden;
}
.load-more-blog .btn.loading svg {
opacity: 1;
visibility: visible;
}
.load-more-blog .btn.loading .text {
opacity: 0;
visibility: hidden;
}  @media screen and (max-width: 768px) {
.blog-filters {
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.blog-filters .filter-item {
padding: 5px 14px;
font-size: var(--font-size-sm);
}
.blog-filters label {
margin-bottom: var(--space-2xl);
}
.blog-filters select {
padding: 8px 16px;
padding-right: 20px;
}
} @media screen and (max-width: 480px) {
.blog-filters {
gap: var(--space-xs);
flex-direction: column;
align-items: stretch;
}
.blog-filters .filter-item {
padding: 8px 16px;
text-align: center;
}
.ias-blog .loader {
width: 40px;
height: 40px;
}
.ias-blog .loader:before,
.ias-blog .loader:after {
border-width: 4px;
}
}