:root {
    --blog-light-gray: #828180;
    --blog-gold: #87702F;
    --blog-gold-light-0: #AF934900;
    --blog-gold-light-1: #AF9349ff;
    --blog-load-border: #DEDBD1;
    --blog-search-border-0: #B3A28C00;
    --blog-search-border-1: #B3A28Cff;
}

@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('../assets/fonts/CabinetGrotesk-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.blog-container {
    max-width: 1080px;
}
.btn-load {
    border: 1px solid var(--blog-load-border);
    border-radius: 50px;
    padding: 11px 23px;
    font-weight: 500;
}

.btn-load:focus,
.btn-load:active,
.btn-load:hover {
    background-color: var(--white);
    color: inherit;
    outline: none;
}

.blog-h1 {
    font-family: 'Cabinet Grotesk';
    font-size: 56px;
    line-height: 56px;
    margin: 0 0 16px;
    letter-spacing: -1.75px;
}
.blog-h2 {
    font-family: 'Cabinet Grotesk';
    font-size: 32px;
    line-height: 40px;
    margin: 0 0 16px;
}
.blog-h3 {
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 16px;
}

footer {
    margin-top: 100px;
}

.blog-tab-wrap {
    display: none;
}

.blog-tab-wrap.active-view,
.blog-tab-wrap.active {
    display: block;
}
.blog-title-wrap {
    max-width: 400px;
}
.blog-title-desc {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.blog-filter-list {
    list-style: none;
    display: flex;
    column-gap: 22px;
    padding: 0;
    margin: 0;
}

.blog-btn {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    background-color: var(--white);
    padding: 12px 32px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 0px 0px 2px var(--blog-gold-light-0);
    -webkit-box-shadow: 0px 0px 0px 2px var(--blog-gold-light-0);
    -moz-box-shadow: 0px 0px 0px 2px var(--blog-gold-light-0);
    transition: box-shadow .3s;
}
.blog-btn.active {
    box-shadow: 0px 0px 0px 2px var(--blog-gold-light-1);
    -webkit-box-shadow: 0px 0px 0px 2px var(--blog-gold-light-1);
    -moz-box-shadow: 0px 0px 0px 2px var(--blog-gold-light-1);
}

.blog-filter-wrap {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-top: 39px;
}
.blog-search-wrap {
    box-shadow: 0px 0px 0px 1px var(--blog-search-border-0);
    -webkit-box-shadow: 0px 0px 0px 1px  var(--blog-search-border-0);
    -moz-box-shadow: 0px 0px 0px 1px  var(--blog-search-border-0);
    background-color: var(--white);
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    max-width: 48px;
    transition: padding .3s, background-color .3s, box-shadow .3s, max-width .5s;
}
.blog-search-wrap.active {
    box-shadow: 0px 0px 0px 1px var(--blog-search-border-1);
    -webkit-box-shadow: 0px 0px 0px 1px  var(--blog-search-border-1);
    -moz-box-shadow: 0px 0px 0px 1px  var(--blog-search-border-1);
    background-color: var(--white);
    padding: 0 24px;
    max-width: 280px;
}
.blog-search-wrap.search {
	background-color: #EFECE3;
    box-shadow: 0px 0px 0px 1px #B3A28C;
    -webkit-box-shadow: 0px 0px 0px 1px #B3A28C;
    -moz-box-shadow: 0px 0px 0px 1px #B3A28C;
}

.blog-search-wrap .asl_w_container {
	min-width: 0px;
    transition: min-width .5s;
}
.blog-search-wrap.active .asl_w_container {
	min-width: 200px;
}
.blog-search-wrap.active .search-input {
    display: block;
    width: calc(100% - 64px);
    margin: 0 8px;
}
.blog-search-wrap.active .search-cancel {
    display: block;
    opacity: 1;
}
#blog-all-results {
	display: none;
}
div.asl_r .results {
	position: relative;
}
.resdrg:has(.item) {
    padding-bottom: 66px;
}
.resdrg:has(.item) ~ #blog-all-results {
  display: block;
}

#blog-all-results {
	position: fixed;
    bottom: 13px;
    left: 16px;
    right: 16px;
    background: var(--white);
    padding: 7px 16px;
    border: 1px solid var(--blog-load-border);
    border-radius: 20px;
    text-align: center;
    z-index: 4;
    cursor: pointer;
    transition: border-color .3s;
}
#blog-all-results:hover {
	
    border: 1px solid var(--blog-gold-light-1);
}

.blog .search-input {
    width: 0px;
    margin: 0;
    display: none;
    transition: width .3s, margin .3s;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
}
.search-cancel {
    display: none;
    opacity: 0;
    transition: opacity .5s;
}

.blog-wrap {
    margin: 40px 0 0;
}
.blog-list {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}
.bi-wrapper {
    display: flex;
    padding: 25px 24px;
    background-color: var(--white);
    border-radius: 24px;
    column-gap: 24px;
}
.bi-info-wrapper {
    display: flex;
    margin: 0 0 8px;
}
.bi-separator {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
}
.bi-separator:before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--blog-light-gray);

}
.bi-info {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--blog-light-gray);
}
.bi-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: 0.25px;
    margin: 0 0 7px;
    color: #4E4E4D;
}
.bi-content {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
}

.bi-img-wrapper {
    min-width: 210px;
    max-width: 32%;
    height: auto;
    margin-left: auto;
}

.bi-img-wrapper img {
    display: block;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    object-position: center;
    height: 215px;
}
.blog-list-btn-wrap {
    margin-top: 15px;
}

.blog-category-wrapper {
    margin-top: 44px;
}
.bc-list {
    display: flex;
    flex-wrap: wrap;
    margin: 24px 0 0;
    row-gap: 8px;
    column-gap: 9px;
}
.bc-item.blog-btn {
    background-color: var(--white);
    color: var(--light-gray);
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.blog .bi-link {
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5V12.5ZM18.3536 11.6464C18.5488 11.8417 18.5488 12.1583 18.3536 12.3536L15.1716 15.5355C14.9763 15.7308 14.6597 15.7308 14.4645 15.5355C14.2692 15.3403 14.2692 15.0237 14.4645 14.8284L17.2929 12L14.4645 9.17157C14.2692 8.97631 14.2692 8.65973 14.4645 8.46447C14.6597 8.2692 14.9763 8.2692 15.1716 8.46447L18.3536 11.6464ZM6 12V11.5L18 11.5V12V12.5L6 12.5V12Z' fill='%2387702F'/%3E%3C/svg%3E%0A");
    background-position: center right;
    background-repeat: no-repeat;
    color: var(--blog-gold);
    font-size: 16px;
    line-height: 24px;
}
.search-icon {
    display: block;
    min-width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9704 16.6775C16.1654 16.8729 16.482 16.8732 16.6775 16.6781C16.8729 16.483 16.8732 16.1664 16.6781 15.971L15.9704 16.6775ZM1.29199 8.01694H0.791992H1.29199ZM8.01694 1.29199V0.791992V1.29199ZM16.3242 16.3242L16.6781 15.971L13.1289 12.4155L12.775 12.7687L12.4212 13.1219L15.9704 16.6775L16.3242 16.3242ZM14.7419 8.01694H14.2419C14.2419 9.66789 13.586 11.2512 12.4186 12.4186L12.7722 12.7722L13.1257 13.1257C14.4807 11.7708 15.2419 9.93311 15.2419 8.01694H14.7419ZM12.7722 12.7722L12.4186 12.4186C11.2512 13.586 9.66789 14.2419 8.01694 14.2419V14.7419V15.2419C9.93311 15.2419 11.7708 14.4807 13.1257 13.1257L12.7722 12.7722ZM8.01694 14.7419V14.2419C6.36598 14.2419 4.78264 13.586 3.61524 12.4186L3.26168 12.7722L2.90813 13.1257C4.26307 14.4807 6.10076 15.2419 8.01694 15.2419V14.7419ZM3.26168 12.7722L3.61524 12.4186C2.44783 11.2512 1.79199 9.66789 1.79199 8.01694H1.29199H0.791992C0.791992 9.93311 1.55319 11.7708 2.90813 13.1257L3.26168 12.7722ZM1.29199 8.01694H1.79199C1.79199 6.36598 2.44783 4.78264 3.61524 3.61524L3.26168 3.26168L2.90813 2.90813C1.55319 4.26307 0.791992 6.10076 0.791992 8.01694H1.29199ZM3.26168 3.26168L3.61524 3.61524C4.78264 2.44783 6.36598 1.79199 8.01694 1.79199V1.29199V0.791992C6.10076 0.791992 4.26307 1.55319 2.90813 2.90813L3.26168 3.26168ZM8.01694 1.29199V1.79199C9.66789 1.79199 11.2512 2.44783 12.4186 3.61524L12.7722 3.26168L13.1257 2.90813C11.7708 1.55319 9.93311 0.791992 8.01694 0.791992V1.29199ZM12.7722 3.26168L12.4186 3.61524C13.586 4.78264 14.2419 6.36598 14.2419 8.01694H14.7419H15.2419C15.2419 6.10076 14.4807 4.26307 13.1257 2.90813L12.7722 3.26168Z' fill='%234E4E4D'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
}
.search-cancel {
    min-width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 7.99902L8 16.0005' stroke='%23828180' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7.99902L16 16.0005' stroke='%23828180' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center center;
}
.blog-search-wrap.active + .blog-filter-list > .blog-btn.active {
    box-shadow: 0px 0px 0px 2px var(--blog-gold-light-0);
    -webkit-box-shadow: 0px 0px 0px 2px var(--blog-gold-light-0);
    -moz-box-shadow: 0px 0px 0px 2px var(--blog-gold-light-0);
}
@media screen and (max-width: 991px) {
    .blog-title-wrap {
        max-width: 100%;
    }
    .btn-load {
        width: 100%;
    }
    .blog-h1 {
        font-size: 40px;
        line-height: 36px;
        margin-bottom: 20px;
        letter-spacing: -0.25px;
    }
    .blog-h3 {
        font-size: 20px;
        line-height: 24px;
    }
    .blog-filter-wrap {
        flex-direction: row;
        overflow: scroll;
        column-gap: 12px;
        padding: 4px 4px 8px;
        margin: 18px 0 0;
    }
    .blog-filter-item.blog-btn {
        white-space: nowrap;
    }
    .search-input {
        min-width: 100px
    }
    .blog-search-wrap {
        margin-left: 16px;
        padding: 0 10px;
    }
    .blog-search-wrap.active {
        padding: 0 8px;
    }
    .bi-wrapper {
        flex-direction: column-reverse;
    }
    .blog-btn {
        font-size: 14px;
        line-height: 20px;
    }
    .blog-filter-list {
        column-gap: 13px;
    }
    .blog-h2 {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 1px;
    }
    .blog-wrap {
        margin: 43px 0 0;
    }
    .bi-wrapper {
        padding: 15px;
        row-gap: 19px;
    }
    .bi-info-wrapper {
        margin: 0 0 12px;
    }
    .bi-info {
        font-size: 12px;
        line-height: 16px;
    }
    .bi-separator {
        width: 25px;
        height: 16px;
    }
    .bi-title {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0;
    }
    .bi-content {
        font-size: 14px;
        line-height: 20px;
    }
    .blog .bi-link {
        font-size: 14px;
        line-height: 20px;
    }
    .blog-category-wrapper {
        margin-top: 40px;
    }
    .bc-item.blog-btn {
        font-size: 14px;
        line-height: 20px;
        padding: 4px 12px;
        letter-spacing: -0.2px;
    }
    .bc-list {
        margin: 20px 0 0;
        row-gap: 12px;
    }
    .blog-list-btn-wrap {
        margin-top: 32px;
    }
    .bi-img-wrapper {
        max-width: 100%;
    }
    .bi-img-wrapper img {
    	height: auto;
        min-height: 215px;
        width: 100%;
    }
}
@media screen and (max-width: 475px) {
    .blog-filter-wrap {
        margin: 18px -20px 0;
    }
    .blog {
    	max-width: 100vw;
        overflow-x: hidden;
    }
}