:root {
    --brand-1: #F96913;
    --brand-2: #FFB400;
    --brand-3: #000000;
    --brand-4: #FFBC94;
    --brand-5: #95190C;
    --teks-1: #333333;
    --teks-2: #454545;
    --teks-3: #757575;
    --teks-4: #E2E2E2;
    --teks-5: #9A9A9A;
    --teks-6: #FFFFFF;
    --bg-1: #FFFFFF;
    --bg-2: #FAFAFA;
    --bg-3: #F8F8F8;
    --bg-4: #F1F1F1;
    --bg-5: #333333;
    --aksen-1: #ED543A;
    --aksen-2: #F37C20;
    --aksen-3: #FBAB18;
    --aksen-4: #7BBC49;
    --aksen-5: #00786A;
    --aksen-6: #4C387C;
    --aksen-7: #C9452E
}

#main-wrapper.rev-2022 .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0
}

#main-wrapper.rev-2022 .container.container-full {
    width: 100%;
    padding-left: 0;
    padding-right: 0
}

#main-wrapper.rev-2022 .container-sm,
#main-wrapper.rev-2022 .container-md {
    max-width: 100%;
    width: 100%;
    padding: 0
}

@media (min-width: 992px) {
    #main-wrapper.rev-2022 .container {
        max-width: 1070px
    }

    #main-wrapper.rev-2022 .container.container-md {
        max-width: 800px
    }
}

@media (max-width: 991px) {
    #main-wrapper.rev-2022 .container {
        max-width: 330px
    }

    #main-wrapper.rev-2022 .container-sm {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px
    }

    #main-wrapper.rev-2022 .container.container-full-sm {
        width: 100%;
        padding-left: 0;
        padding-right: 0
    }
}

@media (max-width: 767px) {
    #main-wrapper.rev-2022 .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px
    }
}

.rev-2022 .archive-post a {
    color: inherit
}

.rev-2022 .archive-post a:hover {
    color: var(--brand-1)
}

.rev-2022 .section-title,
.rev-2022 .section-title a {
    color: var(--brand-1)
}

.rev-2022 .breadcrumb ul li a,
.rev-2022 .article-header .post-meta a,
.rev-2022 .read-other a,
.rev-2022 .featured-img__credit a,
.rev-2022 .archive-post .post-info .post-cat a,
.rev-2022 .article-tag__item a {
    color: var(--brand-1)
}

.rev-2022 .post-content blockquote,
.rev-2022 .article-tag__item a {
    border-color: var(--brand-1)
}

.rev-2022 .content-pagination .post-page-numbers.active,
.rev-2022 .content-pagination .post-page-numbers.current,
.rev-2022 .content-pagination .pagination-prev a,
.rev-2022 .content-pagination .pagination-next a {
    background: unset !important;
    background-color: var(--brand-1) !important
}

.rev-2022 .swiper-listicle .swiper-button>[class*=swiper-button] {
    transition: all 0.2s ease-in-out;
    background: unset !important
}

.rev-2022 .swiper-listicle .swiper-button>[class*=swiper-button],
.rev-2022 .swiper-listicle .swiper-button>[class*=swiper-button]:focus {
    background-color: var(--brand-1) !important
}

.rev-2022 .swiper-listicle .swiper-button>[class*=swiper-button]:hover,
.rev-2022 .swiper-listicle .swiper-button>[class*=swiper-button]:active {
    background-color: var(--brand-2) !important
}

.rev-2022 .product-rank {
    background: var(--brand-1)
}

.rev-2022 .section-title~.js-slides-post,
.rev-2022 .section-title~.clean-slider {
    margin-top: 15px
}

.rev-2022 .section-magezine .archive-post:first-child {
    padding-left: 0
}

.rev-2022 .section-magezine .archive-post:last-child {
    padding-right: 0
}

body:not(.home):not(.single-post) .section-wrapper .section-title {
    margin-bottom: 15px !important
}

body:not(.home):not(.single-post) .section-wrapper .section-title,
body:not(.home):not(.single-post) .section-wrapper .section-title .align-items-center {
    width: 100%
}

.popup-wrap .button.b-close {
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important
}

#main-wrapper.rev-2022 .header-brand img {
    height: 45px
}

#main-wrapper.rev-2022 header {
    margin-bottom: 20px
}

#main-wrapper.rev-2022 header.scroll {
    transition: all 0.2s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999
}

#main-wrapper.rev-2022 .header-top ul,
#main-wrapper.rev-2022 .header-bottom ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    margin-left: -15px;
    margin-right: -15px
}

#main-wrapper.rev-2022 .header-top ul li,
#main-wrapper.rev-2022 .header-bottom ul li {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center
}

#main-wrapper.rev-2022 .header-top ul li a,
#main-wrapper.rev-2022 .header-bottom ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.5;
    transition: all 0.2s ease-in-out
}

#main-wrapper.rev-2022 .header-top ul li a span,
#main-wrapper.rev-2022 .header-bottom ul li a span {
    display: inline-block
}

#main-wrapper.rev-2022 .header-top ul li a .icon,
#main-wrapper.rev-2022 .header-bottom ul li a .icon {
    font-size: 24px;
    display: inline-block
}

#main-wrapper.rev-2022 .header-top ul li a .icon~span,
#main-wrapper.rev-2022 .header-bottom ul li a .icon~span {
    margin-left: 10px;
    margin-right: 0
}

#main-wrapper.rev-2022 .header-top ul li a .icon>svg,
#main-wrapper.rev-2022 .header-bottom ul li a .icon>svg {
    height: 24px;
    width: 24px
}

#main-wrapper.rev-2022 .header-top ul li a span:not(.icon)~.icon,
#main-wrapper.rev-2022 .header-bottom ul li a span:not(.icon)~.icon {
    margin-right: 0;
    margin-left: 10px
}

#main-wrapper.rev-2022 .header-top {
    background-color: var(--brand-1);
    position: relative;
    padding: 0
}

#main-wrapper.rev-2022 .header-top ul.main-menu,
#main-wrapper.rev-2022 .header-top ul#main-menu {
    justify-content: center
}

#main-wrapper.rev-2022 .header-top ul.main-menu li,
#main-wrapper.rev-2022 .header-top ul#main-menu li {
    margin-right: 0;
    padding-top: 27px;
    padding-bottom: 27px
}

#main-wrapper.rev-2022 .header-top ul.main-menu li a,
#main-wrapper.rev-2022 .header-top ul#main-menu li a {
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative
}

#main-wrapper.rev-2022 .header-top ul.main-menu li a .button,
#main-wrapper.rev-2022 .header-top ul#main-menu li a .button {
    font-weight: 600
}

#main-wrapper.rev-2022 .header-top ul.main-menu li a:hover,
#main-wrapper.rev-2022 .header-top ul#main-menu li a:hover {
    opacity: 0.8
}

#main-wrapper.rev-2022 .header-top ul.main-menu li a .icon-svg,
#main-wrapper.rev-2022 .header-top ul#main-menu li a .icon-svg {
    font-size: unset;
    line-height: 1
}

#main-wrapper.rev-2022 .header-top ul.main-menu li a .hot,
#main-wrapper.rev-2022 .header-top ul#main-menu li a .hot {
    font-family: "Roboto", sans-serif
}

#main-wrapper.rev-2022 .header-top a:not(.button) {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg {
    width: 24px;
    height: 24px
}

#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg>* {
    transition: all 0.2s ease-in-out
}

#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg rect[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg polyline[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg path[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg line[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--teks-6)
}

#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg rect[fill]:not([fill=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg polyline[fill]:not([fill=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg path[fill]:not([fill=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg line[fill]:not([fill=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg circle[fill]:not([fill=none]) {
    fill: var(--teks-6)
}

#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg rect[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg polyline[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg path[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg line[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .header-top a:not(.button) .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--teks-6)
}

#main-wrapper.rev-2022 .header-top #search-mobile {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--brand-1)
}

#main-wrapper.rev-2022 .header-top #search-mobile .icon {
    font-size: 24px;
    color: var(--teks-6) !important
}

#main-wrapper.rev-2022 .header-top #search-mobile .button {
    font-size: 24px;
    color: var(--teks-6) !important;
    background-color: var(--brand-1)
}

#main-wrapper.rev-2022 .header-top #search-mobile form button[type=submit] {
    padding-top: 2px
}

#main-wrapper.rev-2022 .header-top #search-mobile .form-control {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .header-top #search-mobile .form-control::placeholder {
    color: var(--teks-6);
    opacity: 1
}

#main-wrapper.rev-2022 .header-top #search-mobile .form-control:-ms-input-placeholder {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .header-top #search-mobile .form-control::-ms-input-placeholder {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .header-top #search-mobile .container {
    display: flex;
    align-items: center
}

#main-wrapper.rev-2022 .header-top #search-mobile.active {
    display: block
}

#main-wrapper.rev-2022 .header-top .header-btn .user-toggle__dropdown {
    flex-wrap: wrap
}

#main-wrapper.rev-2022 .header-top .header-btn .user-toggle__dropdown li {
    width: 100%;
    padding: 0;
    justify-content: flex-start
}

#main-wrapper.rev-2022 .header-top .header-btn .user-toggle__dropdown li>* {
    width: 100%
}

#main-wrapper.rev-2022 .header-top .header-btn .user-toggle__dropdown li a {
    color: var(--teks-1);
    font-size: 12px;
    line-height: 1.33;
    font-weight: 400;
    text-transform: unset;
    justify-content: flex-start
}

#main-wrapper.rev-2022 .header-top .header-btn .user-toggle__dropdown li a:hover {
    color: var(--brand-1)
}

#main-wrapper.rev-2022 .header-bottom {
    background-color: var(--bg-2);
    position: relative
}

#main-wrapper.rev-2022 .header-bottom .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between
}

#main-wrapper.rev-2022 .header-bottom .container>* {
    flex: 0 1 auto
}

#main-wrapper.rev-2022 .header-bottom .container .secondary-menu-wrap {
    margin: 0
}

#main-wrapper.rev-2022 .header-bottom ul.secondary-menu {
    margin: 0
}

#main-wrapper.rev-2022 .header-bottom ul.secondary-menu li {
    padding-left: 0;
    padding-right: 0;
    padding-top: 18px;
    padding-bottom: 18px
}

#main-wrapper.rev-2022 .header-bottom ul.secondary-menu li a {
    color: var(--teks-1);
    font-family: "Inter", sans-serif
}

#main-wrapper.rev-2022 .header-bottom ul.secondary-menu .swiper-slide {
    width: auto
}

#main-wrapper.rev-2022 .header-bottom a:not(.button) {
    font-weight: 700;
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .header-bottom a:not(.button):hover {
    color: var(--brand-1) !important
}

#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg {
    width: 24px;
    height: 24px
}

#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg>* {
    transition: all 0.2s ease-in-out
}

#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg rect[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg polyline[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg path[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg line[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--teks-6)
}

#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg rect[fill]:not([fill=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg polyline[fill]:not([fill=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg path[fill]:not([fill=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg line[fill]:not([fill=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg circle[fill]:not([fill=none]) {
    fill: var(--teks-6)
}

#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg rect[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg polyline[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg path[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg line[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .header-bottom a:not(.button) .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--teks-6)
}

#main-wrapper.rev-2022 .header-bottom .search-toggle {
    padding-left: 15px;
    margin-left: 15px;
    position: relative
}

#main-wrapper.rev-2022 .header-bottom .search-toggle:before {
    content: '';
    height: calc(100% - 15px);
    width: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--teks-4)
}

#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-button-next,
#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-button-prev {
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    margin-top: 0;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--brand-1)
}

#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-button-next:after,
#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-button-prev:after {
    font-size: 18px
}

#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-button-next.swiper-button-disabled,
#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-button-prev.swiper-button-disabled {
    display: none
}

#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-button-next,
#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-rtl .swiper-button-prev {
    right: -1px;
    left: auto;
    background: linear-gradient(270deg, #fafafa 57.5%, rgba(250, 250, 250, 0.6) 100%);
    justify-content: flex-end
}

#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-button-prev,
#main-wrapper.rev-2022 .header-bottom .js-swiper .swiper-rtl .swiper-button-next {
    right: auto;
    left: -1px;
    background: linear-gradient(90deg, #fafafa -57.5%, rgba(250, 250, 250, 0.6) 100%);
    justify-content: flex-start
}

#main-wrapper.rev-2022 .search-toggle-wrap {
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    left: 0;
    background-color: var(--bg-2);
    z-index: 2
}

#main-wrapper.rev-2022 .search-toggle-wrap.active {
    display: block
}

#main-wrapper.rev-2022 .search-toggle-wrap .container {
    height: 100%
}

#main-wrapper.rev-2022 .search-toggle-wrap .container form {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 0;
    margin: 0
}

#main-wrapper.rev-2022 .search-toggle-wrap .container form .form-control {
    border: 0;
    width: 100%;
    outline: 0;
    background-color: transparent
}

#main-wrapper.rev-2022 .search-toggle-wrap .container form button[type=submit] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: var(--bg-2);
    padding: 0 0 0 15px
}

#main-wrapper.rev-2022 .search-toggle-wrap .container .button-close {
    font-size: 28px;
    padding-left: 15px;
    margin-left: 15px;
    position: relative
}

#main-wrapper.rev-2022 .search-toggle-wrap .container .button-close:before {
    content: '';
    height: calc(100% - 15px);
    width: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--teks-4)
}

#main-wrapper.rev-2022 .menu-mobile {
    position: fixed;
    top: 0;
    left: -100%;
    background-color: var(--bg-1);
    width: 100%;
    max-width: 280px;
    height: 100vh;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    transition: all 0.2s ease-in-out
}

#main-wrapper.rev-2022 .menu-mobile.active {
    left: 0%
}

#main-wrapper.rev-2022 .menu-mobile>* {
    width: 100%
}

#main-wrapper.rev-2022 .menu-mobile .header {
    background-color: var(--bg-5);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .menu-mobile .header .img-logo {
    height: 24px
}

#main-wrapper.rev-2022 .menu-mobile #close-menu {
    width: 24px;
    height: 24px
}

#main-wrapper.rev-2022 .menu-mobile #close-menu .icon {
    color: var(--teks-6);
    font-size: 24px
}

#main-wrapper.rev-2022 .menu-mobile #close-menu .icon,
#main-wrapper.rev-2022 .menu-mobile #close-menu .icon i {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .menu-mobile .main {
    padding-left: 20px;
    padding-right: 20px;
    overflow: auto;
    max-height: calc(100vh - 220px)
}

#main-wrapper.rev-2022 .menu-mobile .main-menu {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 20px
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li.account {
    padding: 15px 0;
    text-align: center;
    color: var(--teks-3);
    border-bottom: 1px solid var(--teks-4)
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li.account p {
    margin-bottom: 0;
    padding: 5px 0
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li:not(.account) a {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 0;
    border-bottom: 1px solid var(--teks-4)
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 16px;
    line-height: 1.5;
    transition: all 0.2s ease-in-out;
    color: var(--teks-2);
    font-weight: 600;
    font-family: "Roboto Slab", serif
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) span {
    display: inline-block
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon {
    font-size: 24px;
    display: inline-block;
    margin-right: 0;
    margin-left: 0
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg {
    width: 24px;
    height: 24px
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg>* {
    transition: all 0.2s ease-in-out
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg rect[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg polyline[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg path[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg line[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg rect[fill]:not([fill=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg polyline[fill]:not([fill=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg path[fill]:not([fill=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg line[fill]:not([fill=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg rect[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg polyline[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg path[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg line[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon~span {
    margin-left: 10px;
    margin-right: 0
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) .icon>svg {
    height: 24px;
    width: 24px
}

#main-wrapper.rev-2022 .menu-mobile .main-menu li a:not(.button) span:not(.icon)~.icon {
    margin-right: 0;
    margin-left: 10px
}

#main-wrapper.rev-2022 .menu-mobile .footer {
    border-top: 1px solid var(--teks-4);
    padding: 20px
}

#main-wrapper.rev-2022 .menu-mobile .footer .social {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding-left: 0;
    margin: -10px
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li {
    flex: 1 1 50%
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    color: var(--teks-2)
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a span {
    display: inline-block
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon {
    font-size: 20px;
    display: inline-block;
    margin-right: 0;
    margin-left: 0
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg {
    width: 24px;
    height: 24px
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg>* {
    transition: all 0.2s ease-in-out
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg rect[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg polyline[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg path[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg line[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg rect[fill]:not([fill=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg polyline[fill]:not([fill=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg path[fill]:not([fill=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg line[fill]:not([fill=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg rect[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg polyline[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg path[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg line[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon~span {
    margin-left: 10px;
    margin-right: 0
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a .icon>svg {
    height: 20px;
    width: 20px;
    fill: var(--brand-1)
}

#main-wrapper.rev-2022 .menu-mobile .footer .social li a span:not(.icon)~.icon {
    margin-right: 0;
    margin-left: 10px
}

#main-wrapper.rev-2022 .header-search .form-control {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .header-search .form-control::placeholder {
    color: var(--teks-6);
    opacity: 1
}

#main-wrapper.rev-2022 .header-search .form-control:-ms-input-placeholder {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .header-search .form-control::-ms-input-placeholder {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .section-sidebar {
    padding-left: 0;
    width: 100%
}

#main-wrapper.rev-2022 .section-sidebar>*:not(:last-child) {
    margin-bottom: 30px
}

#main-wrapper.rev-2022 .col-md-auto .section-sidebar {
    padding-left: 30px;
    width: 300px
}

@media (min-width: 992px) {
    #main-wrapper.rev-2022 .col-md-auto .section-sidebar {
        width: 330px
    }
}

#main-wrapper.rev-2022 .col-md-auto .section-sidebar section:not(.section-wrapper) .section-title {
    font-size: 18px;
    line-height: 1.33;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 500;
    font-family: "Merriweather Sans", sans-serif;
    display: flex;
    color: var(--brand-1);
    letter-spacing: normal;
    margin-bottom: 20px;
    border-bottom: 1px solid #e4e6e7;
    position: relative
}

#main-wrapper.rev-2022 .col-md-auto .section-sidebar section:not(.section-wrapper) .section-title>* {
    width: 100%
}

#main-wrapper.rev-2022 .col-md-auto .section-sidebar section:not(.section-wrapper) .section-title::before {
    content: '';
    width: 76px;
    height: 2px;
    background-color: var(--brand-1);
    position: absolute;
    bottom: -1px;
    left: 0
}

#main-wrapper.rev-2022 .section-wrapper .section-head {
    margin-bottom: 15px;
    color: var(--brand-1)
}

#main-wrapper.rev-2022 .section-wrapper .section-head .row {
    display: flex;
    align-items: center
}

#main-wrapper.rev-2022 .section-wrapper .section-head .row [class*=col] {
    display: flex;
    flex-wrap: wrap
}

#main-wrapper.rev-2022 .section-wrapper .section-head .row [class*=col]:last-child {
    justify-content: flex-end
}

@media (max-width: 991px) {
    #main-wrapper.rev-2022 .section-wrapper .section-head>.container {
        padding-left: 0;
        padding-right: 0
    }

    #main-wrapper.rev-2022 .section-wrapper .section-head>.container>.row {
        padding-left: 15px;
        padding-right: 15px
    }
}

#main-wrapper.rev-2022 .section-wrapper .section-head.bottomline {
    border-bottom: 1px solid #e4e6e7;
    position: relative
}

#main-wrapper.rev-2022 .section-wrapper .section-head.bottomline:before {
    content: '';
    width: 23%;
    height: 2px;
    background-color: var(--brand-1);
    position: absolute;
    bottom: -1px;
    left: 0
}

#main-wrapper.rev-2022 .section-wrapper .section-body .row>[class*=col]>.card-post,
#main-wrapper.rev-2022 .section-wrapper .section-body .row>[class*=col]>.card-post a {
    height: 100%
}

#main-wrapper.rev-2022 .section-wrapper .section-title {
    display: flex;
    align-items: center;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0
}

#main-wrapper.rev-2022 .section-wrapper .section-title:before {
    display: none
}

#main-wrapper.rev-2022 .section-wrapper .section-title>* {
    height: 100%;
    align-items: center
}

#main-wrapper.rev-2022 .section-wrapper .section-title .title {
    font-size: 18px;
    line-height: 1.33;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 500;
    font-family: "Merriweather Sans", sans-serif;
    margin-bottom: 0;
    display: inline-flex;
    color: var(--brand-1);
    letter-spacing: normal
}

#main-wrapper.rev-2022 .section-wrapper .section-title .icon {
    margin-right: 0;
    margin-left: 0;
    font-size: 24px;
    display: inline-flex;
    color: var(--brand-1);
    line-height: 1
}

#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg {
    width: 24px;
    height: 24px
}

#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg>* {
    transition: all 0.2s ease-in-out
}

#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg rect[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg polyline[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg path[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg line[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg rect[fill]:not([fill=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg polyline[fill]:not([fill=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg path[fill]:not([fill=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg line[fill]:not([fill=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg rect[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg polyline[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg path[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg line[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .section-wrapper .section-title .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

#main-wrapper.rev-2022 .section-wrapper .section-title .icon~span,
#main-wrapper.rev-2022 .section-wrapper .section-title .icon~.title {
    margin-left: 8px;
    margin-right: 0
}

#main-wrapper.rev-2022 .section-wrapper .section-title .icon>svg {
    height: 24px;
    width: 24px
}

#main-wrapper.rev-2022 .section-wrapper .section-title span:not(.icon)~.icon,
#main-wrapper.rev-2022 .section-wrapper .section-title .title~.icon {
    margin-right: 0;
    margin-left: 8px
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight {
    background-color: var(--brand-1);
    padding: 20px 0;
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight a:not(.button),
#main-wrapper.rev-2022 .section-wrapper.section-highlight a:not(.button) span {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-head {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .title {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon {
    color: var(--teks-6)
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg {
    width: 24px;
    height: 24px
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg>* {
    transition: all 0.2s ease-in-out
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg rect[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg polyline[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg path[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg line[stroke]:not([stroke=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--teks-6)
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg rect[fill]:not([fill=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg polyline[fill]:not([fill=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg path[fill]:not([fill=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg line[fill]:not([fill=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg circle[fill]:not([fill=none]) {
    fill: var(--teks-6)
}

#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg rect[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg polyline[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg path[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg line[opacity]:not([opacity=none]),
#main-wrapper.rev-2022 .section-wrapper.section-highlight .section-title .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--teks-6)
}

.card-post {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    outline: 2px solid transparent
}

.card-post a {
    display: block;
    color: var(--teks-6);
    position: relative
}

.card-post a span {
    color: var(--teks-6)
}

.card-post a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, #333 100%);
    background-color: transparent;
    z-index: 1;
    transition: all 0.2s ease-in-out
}

.card-post a:hover::before {
    background-color: rgba(51, 51, 51, 0.4)
}

.card-post a .inner {
    z-index: 2
}

.card-post .post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01)
}

.card-post .post-title {
    font-size: 16px;
    line-height: 1.33;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin-bottom: 0
}

.card-post .cat-wrap {
    list-style-type: none;
    padding-left: 0;
    display: none;
    flex-wrap: wrap;
    margin: -3px -3px 5px
}

section.headline .card-post .cat-wrap {
    display: flex
}

.card-post .cat-wrap .cat-item {
    flex: 0 1 auto;
    padding: 3px;
    font-size: 14px;
    line-height: 1.28;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 400;
    text-transform: unset;
    display: flex;
    align-items: center
}

.card-post .cat-wrap .cat-item .icon {
    color: var(--brand-1);
    font-size: 14px
}

.card-post .cat-wrap .cat-item .icon svg {
    width: 14px;
    height: 14px
}

.card-post .cat-wrap .cat-item .icon svg>* {
    transition: all 0.2s ease-in-out
}

.card-post .cat-wrap .cat-item .icon svg rect[stroke]:not([stroke=none]),
.card-post .cat-wrap .cat-item .icon svg polyline[stroke]:not([stroke=none]),
.card-post .cat-wrap .cat-item .icon svg path[stroke]:not([stroke=none]),
.card-post .cat-wrap .cat-item .icon svg line[stroke]:not([stroke=none]),
.card-post .cat-wrap .cat-item .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.card-post .cat-wrap .cat-item .icon svg rect[fill]:not([fill=none]),
.card-post .cat-wrap .cat-item .icon svg polyline[fill]:not([fill=none]),
.card-post .cat-wrap .cat-item .icon svg path[fill]:not([fill=none]),
.card-post .cat-wrap .cat-item .icon svg line[fill]:not([fill=none]),
.card-post .cat-wrap .cat-item .icon svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.card-post .cat-wrap .cat-item .icon svg rect[opacity]:not([opacity=none]),
.card-post .cat-wrap .cat-item .icon svg polyline[opacity]:not([opacity=none]),
.card-post .cat-wrap .cat-item .icon svg path[opacity]:not([opacity=none]),
.card-post .cat-wrap .cat-item .icon svg line[opacity]:not([opacity=none]),
.card-post .cat-wrap .cat-item .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.card-post .cat-wrap .cat-item .icon~span {
    margin-left: 6px
}

.card-post .cat-wrap .cat-item span:not(.icon) {
    line-height: 1
}

.card-post .cat-wrap .cat-item span:not(.icon)~.icon {
    margin-left: 6px
}

.card-post .post-meta {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 1px -4px -4px
}

.card-post .post-meta li {
    flex: 0 1 auto;
    padding: 4px;
    display: flex;
    align-items: flex-start
}

.card-post .post-meta li a {
    color: var(--teks-1)
}

.card-post .post-meta li a:hover {
    color: var(--brand-1)
}

.card-post .post-meta li span {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.33;
    font-weight: 400
}

.card-post .post-meta li span.photo {
    flex: 1 0 auto
}

.card-post .post-meta li span.photo img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    object-position: center;
    margin-top: -2px;
    border-radius: 50%
}

.card-post .post-meta li span.photo~span {
    margin-left: 8px
}

.card-post .post-meta li span.icon {
    color: var(--brand-1);
    padding-top: 1px
}

.card-post .post-meta li span.icon svg {
    width: 12px;
    height: 12px
}

.card-post .post-meta li span.icon svg>* {
    transition: all 0.2s ease-in-out
}

.card-post .post-meta li span.icon svg rect[stroke]:not([stroke=none]),
.card-post .post-meta li span.icon svg polyline[stroke]:not([stroke=none]),
.card-post .post-meta li span.icon svg path[stroke]:not([stroke=none]),
.card-post .post-meta li span.icon svg line[stroke]:not([stroke=none]),
.card-post .post-meta li span.icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.card-post .post-meta li span.icon svg rect[fill]:not([fill=none]),
.card-post .post-meta li span.icon svg polyline[fill]:not([fill=none]),
.card-post .post-meta li span.icon svg path[fill]:not([fill=none]),
.card-post .post-meta li span.icon svg line[fill]:not([fill=none]),
.card-post .post-meta li span.icon svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.card-post .post-meta li span.icon svg rect[opacity]:not([opacity=none]),
.card-post .post-meta li span.icon svg polyline[opacity]:not([opacity=none]),
.card-post .post-meta li span.icon svg path[opacity]:not([opacity=none]),
.card-post .post-meta li span.icon svg line[opacity]:not([opacity=none]),
.card-post .post-meta li span.icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.card-post .post-meta li span.icon~span {
    margin-left: 3px
}

.card-post .post-meta li.post-author a::before {
    content: ''
}

.card-post .inner {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 20px;
    padding-bottom: 10px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-post:hover {
    outline-color: var(--brand-1)
}

.card-post .inner > *{
    z-index: 6;
    position: relative;
}
.card-post .inner:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 45px 20px 20px;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        transparent 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
}

.card-post:hover .inner {
    padding-bottom: 20px;

}
.card-post:hover .inner:after {
    backdrop-filter: blur(20px);
}

.card-post:hover .post-title {
    color: var(--brand-1)
}

.card-post.card-premium {
    box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.05)
}

.card-post.card-premium::before {
    display: none
}

.card-post.card-premium .post-img {
    position: relative;
    z-index: 2
}

.card-post.card-premium .serial {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3
}

.card-post.card-premium.serial .serial {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border-radius: 3px;
    background-color: var(--bg-1);
    font-size: 14px;
    color: var(--brand-1);
    box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.05)
}

.swiper-slide .card-post:not(.card-premium) a {
    height: 208px
}

@media (max-width: 767px) {
    .swiper-slide .card-post:not(.card-premium) a {
        height: 190px
    }
}

.swiper-slide .card-post.card-premium a {
    height: 278px
}

@media (max-width: 767px) {
    .swiper-slide .card-post.card-premium a {
        height: 218px
    }
}

.list-posts {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0
}

.list-posts.list-border-bottom .item-post {
    position: relative
}

.list-posts.list-border-bottom .item-post:not(:last-child):after {
    content: '';
    height: 1px;
    width: calc(100% - 20px);
    background-color: var(--teks-4);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

.list-posts.side {
    counter-reset: post-number
}

.list-posts.side .item-post {
    padding-bottom: 15px;
    margin-bottom: 15px
}

.list-posts.side .item-post:before {
    flex: 0 0 auto;
    counter-increment: post-number;
    content: counter(post-number);
    position: relative;
    width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1.28;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 500;
    color: var(--brand-1)
}

.list-posts.side .item-post:not(:last-child):after {
    content: '';
    height: 1px;
    width: calc(100% - 20px);
    background-color: var(--teks-4);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

.list-posts.side .item-post:last-child {
    padding-bottom: 0;
    margin-bottom: 0
}

.list-posts.middle .item-post {
    align-items: center
}

.list-posts.thumb-sm .item-post .img-wrap .post-img {
    width: 56px;
    height: 56px;
    border-radius: 10px
}

.list-posts.thumb-sm .item-post .content-wrap .post-meta li {
    padding: 0 4px;
    line-height: 1
}

.list-posts.thumb-sm.thumb-circle .item-post .img-wrap .post-img {
    border-radius: 50%
}

.list-posts.widget .item-post .content-wrap .post-meta {
    margin-top: 5px
}

.list-posts .item-post {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -10px;
    position: relative
}

.list-posts .item-post:not(:last-child) {
    margin-bottom: 10px;
    padding-bottom: 10px
}

.list-posts .item-post>* {
    padding: 0 10px
}

.list-posts .item-post .img-wrap {
    flex: 0 0 auto
}

.list-posts .item-post .img-wrap .post-img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    object-fit: cover;
    object-position: center
}

.list-posts .item-post .content-wrap {
    flex: 1 1 100%
}

.list-posts .item-post .content-wrap .post-title {
    font-size: 16px;
    line-height: 1.33;
    font-family: "Merriweather Sans", sans-serif;
    font-weight: 500;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    margin-bottom: 0
}

.list-posts .item-post .content-wrap .post-title a {
    color: var(--teks-1);
    transition: all 0.2s ease-in-out
}

.list-posts .item-post .content-wrap .post-title a:hover {
    color: var(--brand-1)
}

.list-posts .item-post .content-wrap .post-meta {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 1px -4px -4px
}

.list-posts .item-post .content-wrap .post-meta li {
    flex: 0 1 auto;
    padding: 4px;
    display: flex;
    align-items: flex-start
}

.list-posts .item-post .content-wrap .post-meta li a {
    color: var(--teks-1)
}

.list-posts .item-post .content-wrap .post-meta li a:hover {
    color: var(--brand-1)
}

.list-posts .item-post .content-wrap .post-meta li span {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.33;
    font-weight: 400
}

.list-posts .item-post .content-wrap .post-meta li span.photo {
    flex: 1 0 auto
}

.list-posts .item-post .content-wrap .post-meta li span.photo img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    object-position: center;
    margin-top: -2px;
    border-radius: 50%
}

.list-posts .item-post .content-wrap .post-meta li span.photo~span {
    margin-left: 8px
}

.list-posts .item-post .content-wrap .post-meta li span.icon {
    color: var(--brand-1);
    padding-top: 1px
}

.list-posts .item-post .content-wrap .post-meta li span.icon svg {
    width: 12px;
    height: 12px
}

.list-posts .item-post .content-wrap .post-meta li span.icon svg>* {
    transition: all 0.2s ease-in-out
}

.list-posts .item-post .content-wrap .post-meta li span.icon svg rect[stroke]:not([stroke=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg polyline[stroke]:not([stroke=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg path[stroke]:not([stroke=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg line[stroke]:not([stroke=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.list-posts .item-post .content-wrap .post-meta li span.icon svg rect[fill]:not([fill=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg polyline[fill]:not([fill=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg path[fill]:not([fill=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg line[fill]:not([fill=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.list-posts .item-post .content-wrap .post-meta li span.icon svg rect[opacity]:not([opacity=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg polyline[opacity]:not([opacity=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg path[opacity]:not([opacity=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg line[opacity]:not([opacity=none]),
.list-posts .item-post .content-wrap .post-meta li span.icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.list-posts .item-post .content-wrap .post-meta li span.icon~span {
    margin-left: 3px
}

.list-posts .item-post .content-wrap .post-meta li.post-author a::before {
    content: ''
}

.list-posts .item-post .content-wrap .post-meta .icon {
    line-height: 0
}

.list-posts .item-post .content-wrap .post-meta span {
    color: var(--teks-1)
}

.keyword-search {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400
}

.keyword-search .text {
    color: var(--teks-3);
    font-size: 14px;
    line-height: 1.42;
    font-weight: 500;
    font-weight: 400;
    padding-right: 10px
}

.tabs-search {
    list-style-type: none;
    padding-left: 0;
    margin-top: 15px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid var(--teks-4);
    border-radius: 5px
}

.tabs-search li {
    padding: 0 10px;
    flex: 1 1 100%
}

.tabs-search li.active a {
    border-color: var(--brand-1);
    color: var(--brand-1)
}

.tabs-search li.active a .icon {
    color: var(--brand-1)
}

.tabs-search li.active a .icon svg {
    width: 24px;
    height: 24px
}

.tabs-search li.active a .icon svg>* {
    transition: all 0.2s ease-in-out
}

.tabs-search li.active a .icon svg rect[stroke]:not([stroke=none]),
.tabs-search li.active a .icon svg polyline[stroke]:not([stroke=none]),
.tabs-search li.active a .icon svg path[stroke]:not([stroke=none]),
.tabs-search li.active a .icon svg line[stroke]:not([stroke=none]),
.tabs-search li.active a .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.tabs-search li.active a .icon svg rect[fill]:not([fill=none]),
.tabs-search li.active a .icon svg polyline[fill]:not([fill=none]),
.tabs-search li.active a .icon svg path[fill]:not([fill=none]),
.tabs-search li.active a .icon svg line[fill]:not([fill=none]),
.tabs-search li.active a .icon svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.tabs-search li.active a .icon svg rect[opacity]:not([opacity=none]),
.tabs-search li.active a .icon svg polyline[opacity]:not([opacity=none]),
.tabs-search li.active a .icon svg path[opacity]:not([opacity=none]),
.tabs-search li.active a .icon svg line[opacity]:not([opacity=none]),
.tabs-search li.active a .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.tabs-item-search {
    color: var(--teks-3);
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 2px solid transparent
}

.tabs-item-search .icon {
    margin-right: 0;
    margin-left: 0;
    font-size: 24px;
    display: inline-block;
    color: var(--teks-3);
    line-height: 1
}

.tabs-item-search .icon svg {
    width: 24px;
    height: 24px
}

.tabs-item-search .icon svg>* {
    transition: all 0.2s ease-in-out
}

.tabs-item-search .icon svg rect[stroke]:not([stroke=none]),
.tabs-item-search .icon svg polyline[stroke]:not([stroke=none]),
.tabs-item-search .icon svg path[stroke]:not([stroke=none]),
.tabs-item-search .icon svg line[stroke]:not([stroke=none]),
.tabs-item-search .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--teks-3)
}

.tabs-item-search .icon svg rect[fill]:not([fill=none]),
.tabs-item-search .icon svg polyline[fill]:not([fill=none]),
.tabs-item-search .icon svg path[fill]:not([fill=none]),
.tabs-item-search .icon svg line[fill]:not([fill=none]),
.tabs-item-search .icon svg circle[fill]:not([fill=none]) {
    fill: var(--teks-3)
}

.tabs-item-search .icon svg rect[opacity]:not([opacity=none]),
.tabs-item-search .icon svg polyline[opacity]:not([opacity=none]),
.tabs-item-search .icon svg path[opacity]:not([opacity=none]),
.tabs-item-search .icon svg line[opacity]:not([opacity=none]),
.tabs-item-search .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--teks-3)
}

.tabs-item-search .icon~span {
    margin-left: 12.5px;
    margin-right: 0
}

.tabs-item-search .icon>svg {
    height: 24px;
    width: 24px
}

.tabs-item-search span:not(.icon)~.icon {
    margin-right: 0;
    margin-left: 12.5px
}

.tabs-item-search[aria-selected=true],
.tabs-item-search:hover {
    border-color: var(--brand-1);
    color: var(--brand-1)
}

.tabs-item-search[aria-selected=true] .icon,
.tabs-item-search:hover .icon {
    color: var(--brand-1)
}

.tabs-item-search[aria-selected=true] .icon svg,
.tabs-item-search:hover .icon svg {
    width: 24px;
    height: 24px
}

.tabs-item-search[aria-selected=true] .icon svg>*,
.tabs-item-search:hover .icon svg>* {
    transition: all 0.2s ease-in-out
}

.tabs-item-search[aria-selected=true] .icon svg rect[stroke]:not([stroke=none]),
.tabs-item-search[aria-selected=true] .icon svg polyline[stroke]:not([stroke=none]),
.tabs-item-search[aria-selected=true] .icon svg path[stroke]:not([stroke=none]),
.tabs-item-search[aria-selected=true] .icon svg line[stroke]:not([stroke=none]),
.tabs-item-search[aria-selected=true] .icon svg circle[stroke]:not([stroke=none]),
.tabs-item-search:hover .icon svg rect[stroke]:not([stroke=none]),
.tabs-item-search:hover .icon svg polyline[stroke]:not([stroke=none]),
.tabs-item-search:hover .icon svg path[stroke]:not([stroke=none]),
.tabs-item-search:hover .icon svg line[stroke]:not([stroke=none]),
.tabs-item-search:hover .icon svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.tabs-item-search[aria-selected=true] .icon svg rect[fill]:not([fill=none]),
.tabs-item-search[aria-selected=true] .icon svg polyline[fill]:not([fill=none]),
.tabs-item-search[aria-selected=true] .icon svg path[fill]:not([fill=none]),
.tabs-item-search[aria-selected=true] .icon svg line[fill]:not([fill=none]),
.tabs-item-search[aria-selected=true] .icon svg circle[fill]:not([fill=none]),
.tabs-item-search:hover .icon svg rect[fill]:not([fill=none]),
.tabs-item-search:hover .icon svg polyline[fill]:not([fill=none]),
.tabs-item-search:hover .icon svg path[fill]:not([fill=none]),
.tabs-item-search:hover .icon svg line[fill]:not([fill=none]),
.tabs-item-search:hover .icon svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.tabs-item-search[aria-selected=true] .icon svg rect[opacity]:not([opacity=none]),
.tabs-item-search[aria-selected=true] .icon svg polyline[opacity]:not([opacity=none]),
.tabs-item-search[aria-selected=true] .icon svg path[opacity]:not([opacity=none]),
.tabs-item-search[aria-selected=true] .icon svg line[opacity]:not([opacity=none]),
.tabs-item-search[aria-selected=true] .icon svg circle[opacity]:not([opacity=none]),
.tabs-item-search:hover .icon svg rect[opacity]:not([opacity=none]),
.tabs-item-search:hover .icon svg polyline[opacity]:not([opacity=none]),
.tabs-item-search:hover .icon svg path[opacity]:not([opacity=none]),
.tabs-item-search:hover .icon svg line[opacity]:not([opacity=none]),
.tabs-item-search:hover .icon svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.button {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    height: 40px;
    padding: 11px 20px;
    border-radius: 5px;
    background: var(--bg-1);
    border: 1px solid var(--brand-1);
    color: var(--brand-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.28;
    font-weight: 500
}

.button svg {
    width: 24px;
    height: 24px
}

.button svg>* {
    transition: all 0.2s ease-in-out
}

.button svg rect[stroke]:not([stroke=none]),
.button svg polyline[stroke]:not([stroke=none]),
.button svg path[stroke]:not([stroke=none]),
.button svg line[stroke]:not([stroke=none]),
.button svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.button svg rect[fill]:not([fill=none]),
.button svg polyline[fill]:not([fill=none]),
.button svg path[fill]:not([fill=none]),
.button svg line[fill]:not([fill=none]),
.button svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.button svg rect[opacity]:not([opacity=none]),
.button svg polyline[opacity]:not([opacity=none]),
.button svg path[opacity]:not([opacity=none]),
.button svg line[opacity]:not([opacity=none]),
.button svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.button-md {
    padding: 8px 12px !important
}

.button-sm {
    padding: 8px 12px !important
}

.button-block {
    width: 100% !important;
    display: block !important
}

.button-wide {
    width: 100% !important;
    display: flex !important
}

.button .icon {
    margin-right: 0;
    margin-left: 0;
    font-size: 24px;
    display: inline-block;
    color: var(--brand-1);
    line-height: 1
}

.button .icon~span {
    margin-left: 12.5px;
    margin-right: 0
}

.button .icon>svg {
    height: 24px;
    width: 24px
}

.button .icon.icon-left {
    margin-right: 10px;
    margin-left: unset
}

.button span:not(.icon)~.icon {
    margin-right: 0;
    margin-left: 12.5px
}

.button:disabled,
.button.disabled {
    background-color: var(--bg-4) !important;
    border-color: var(--bg-4) !important;
    color: var(--teks-5) !important;
    cursor: no-drop;
    pointer-events: none
}

.button:disabled svg,
.button.disabled svg {
    width: 24px;
    height: 24px
}

.button:disabled svg>*,
.button.disabled svg>* {
    transition: all 0.2s ease-in-out
}

.button:disabled svg rect[stroke]:not([stroke=none]),
.button:disabled svg polyline[stroke]:not([stroke=none]),
.button:disabled svg path[stroke]:not([stroke=none]),
.button:disabled svg line[stroke]:not([stroke=none]),
.button:disabled svg circle[stroke]:not([stroke=none]),
.button.disabled svg rect[stroke]:not([stroke=none]),
.button.disabled svg polyline[stroke]:not([stroke=none]),
.button.disabled svg path[stroke]:not([stroke=none]),
.button.disabled svg line[stroke]:not([stroke=none]),
.button.disabled svg circle[stroke]:not([stroke=none]) {
    stroke: var(--text-5)
}

.button:disabled svg rect[fill]:not([fill=none]),
.button:disabled svg polyline[fill]:not([fill=none]),
.button:disabled svg path[fill]:not([fill=none]),
.button:disabled svg line[fill]:not([fill=none]),
.button:disabled svg circle[fill]:not([fill=none]),
.button.disabled svg rect[fill]:not([fill=none]),
.button.disabled svg polyline[fill]:not([fill=none]),
.button.disabled svg path[fill]:not([fill=none]),
.button.disabled svg line[fill]:not([fill=none]),
.button.disabled svg circle[fill]:not([fill=none]) {
    fill: var(--text-5)
}

.button:disabled svg rect[opacity]:not([opacity=none]),
.button:disabled svg polyline[opacity]:not([opacity=none]),
.button:disabled svg path[opacity]:not([opacity=none]),
.button:disabled svg line[opacity]:not([opacity=none]),
.button:disabled svg circle[opacity]:not([opacity=none]),
.button.disabled svg rect[opacity]:not([opacity=none]),
.button.disabled svg polyline[opacity]:not([opacity=none]),
.button.disabled svg path[opacity]:not([opacity=none]),
.button.disabled svg line[opacity]:not([opacity=none]),
.button.disabled svg circle[opacity]:not([opacity=none]) {
    fill: var(--text-5)
}

.button:disabled .icon,
.button.disabled .icon {
    color: var(--teks-5) !important
}

.button:disabled .spinner-loader,
.button.disabled .spinner-loader {
    color: var(--brand-2)
}

.button-primary {
    background-color: var(--brand-1);
    color: var(--teks-6) !important
}

.button-primary svg {
    width: 24px;
    height: 24px
}

.button-primary svg>* {
    transition: all 0.2s ease-in-out
}

.button-primary svg rect[stroke]:not([stroke=none]),
.button-primary svg polyline[stroke]:not([stroke=none]),
.button-primary svg path[stroke]:not([stroke=none]),
.button-primary svg line[stroke]:not([stroke=none]),
.button-primary svg circle[stroke]:not([stroke=none]) {
    stroke: var(--teks-6)
}

.button-primary svg rect[fill]:not([fill=none]),
.button-primary svg polyline[fill]:not([fill=none]),
.button-primary svg path[fill]:not([fill=none]),
.button-primary svg line[fill]:not([fill=none]),
.button-primary svg circle[fill]:not([fill=none]) {
    fill: var(--teks-6)
}

.button-primary svg rect[opacity]:not([opacity=none]),
.button-primary svg polyline[opacity]:not([opacity=none]),
.button-primary svg path[opacity]:not([opacity=none]),
.button-primary svg line[opacity]:not([opacity=none]),
.button-primary svg circle[opacity]:not([opacity=none]) {
    fill: var(--teks-6)
}

.button-primary .icon {
    color: var(--teks-6) !important
}

.button-primary:hover {
    background-color: var(--brand-2);
    border-color: transparent;
    color: var(--teks-6)
}

.button-primary:hover svg {
    width: 24px;
    height: 24px
}

.button-primary:hover svg>* {
    transition: all 0.2s ease-in-out
}

.button-primary:hover svg rect[stroke]:not([stroke=none]),
.button-primary:hover svg polyline[stroke]:not([stroke=none]),
.button-primary:hover svg path[stroke]:not([stroke=none]),
.button-primary:hover svg line[stroke]:not([stroke=none]),
.button-primary:hover svg circle[stroke]:not([stroke=none]) {
    stroke: var(--teks-6)
}

.button-primary:hover svg rect[fill]:not([fill=none]),
.button-primary:hover svg polyline[fill]:not([fill=none]),
.button-primary:hover svg path[fill]:not([fill=none]),
.button-primary:hover svg line[fill]:not([fill=none]),
.button-primary:hover svg circle[fill]:not([fill=none]) {
    fill: var(--teks-6)
}

.button-primary:hover svg rect[opacity]:not([opacity=none]),
.button-primary:hover svg polyline[opacity]:not([opacity=none]),
.button-primary:hover svg path[opacity]:not([opacity=none]),
.button-primary:hover svg line[opacity]:not([opacity=none]),
.button-primary:hover svg circle[opacity]:not([opacity=none]) {
    fill: var(--teks-6)
}

.button-primary:hover .icon {
    color: var(--teks-6) !important
}

.button-primary:focus {
    background-color: var(--brand-4);
    color: var(--teks-6)
}

.button-primary:focus svg {
    width: 24px;
    height: 24px
}

.button-primary:focus svg>* {
    transition: all 0.2s ease-in-out
}

.button-primary:focus svg rect[stroke]:not([stroke=none]),
.button-primary:focus svg polyline[stroke]:not([stroke=none]),
.button-primary:focus svg path[stroke]:not([stroke=none]),
.button-primary:focus svg line[stroke]:not([stroke=none]),
.button-primary:focus svg circle[stroke]:not([stroke=none]) {
    stroke: var(--teks-6)
}

.button-primary:focus svg rect[fill]:not([fill=none]),
.button-primary:focus svg polyline[fill]:not([fill=none]),
.button-primary:focus svg path[fill]:not([fill=none]),
.button-primary:focus svg line[fill]:not([fill=none]),
.button-primary:focus svg circle[fill]:not([fill=none]) {
    fill: var(--teks-6)
}

.button-primary:focus svg rect[opacity]:not([opacity=none]),
.button-primary:focus svg polyline[opacity]:not([opacity=none]),
.button-primary:focus svg path[opacity]:not([opacity=none]),
.button-primary:focus svg line[opacity]:not([opacity=none]),
.button-primary:focus svg circle[opacity]:not([opacity=none]) {
    fill: var(--teks-6)
}

.button-primary:focus .icon {
    color: var(--teks-6) !important
}

.button-secondary {
    background: var(--bg-2);
    border-color: var(--brand-1)
}

.button-secondary svg {
    width: 24px;
    height: 24px
}

.button-secondary svg>* {
    transition: all 0.2s ease-in-out
}

.button-secondary svg rect[stroke]:not([stroke=none]),
.button-secondary svg polyline[stroke]:not([stroke=none]),
.button-secondary svg path[stroke]:not([stroke=none]),
.button-secondary svg line[stroke]:not([stroke=none]),
.button-secondary svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.button-secondary svg rect[fill]:not([fill=none]),
.button-secondary svg polyline[fill]:not([fill=none]),
.button-secondary svg path[fill]:not([fill=none]),
.button-secondary svg line[fill]:not([fill=none]),
.button-secondary svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.button-secondary svg rect[opacity]:not([opacity=none]),
.button-secondary svg polyline[opacity]:not([opacity=none]),
.button-secondary svg path[opacity]:not([opacity=none]),
.button-secondary svg line[opacity]:not([opacity=none]),
.button-secondary svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.button-secondary .icon-svg svg {
    width: 24px;
    height: 24px
}

.button-secondary .icon-svg svg>* {
    transition: all 0.2s ease-in-out
}

.button-secondary .icon-svg svg rect[stroke]:not([stroke=none]),
.button-secondary .icon-svg svg polyline[stroke]:not([stroke=none]),
.button-secondary .icon-svg svg path[stroke]:not([stroke=none]),
.button-secondary .icon-svg svg line[stroke]:not([stroke=none]),
.button-secondary .icon-svg svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.button-secondary .icon-svg svg rect[fill]:not([fill=none]),
.button-secondary .icon-svg svg polyline[fill]:not([fill=none]),
.button-secondary .icon-svg svg path[fill]:not([fill=none]),
.button-secondary .icon-svg svg line[fill]:not([fill=none]),
.button-secondary .icon-svg svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.button-secondary .icon-svg svg rect[opacity]:not([opacity=none]),
.button-secondary .icon-svg svg polyline[opacity]:not([opacity=none]),
.button-secondary .icon-svg svg path[opacity]:not([opacity=none]),
.button-secondary .icon-svg svg line[opacity]:not([opacity=none]),
.button-secondary .icon-svg svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.button-secondary .icon {
    color: var(--brand-1) !important
}

.button-secondary:hover {
    background-color: var(--bg-2);
    border-color: var(--brand-2);
    color: var(--brand-2)
}

.button-secondary:hover svg {
    width: 24px;
    height: 24px
}

.button-secondary:hover svg>* {
    transition: all 0.2s ease-in-out
}

.button-secondary:hover svg rect[stroke]:not([stroke=none]),
.button-secondary:hover svg polyline[stroke]:not([stroke=none]),
.button-secondary:hover svg path[stroke]:not([stroke=none]),
.button-secondary:hover svg line[stroke]:not([stroke=none]),
.button-secondary:hover svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-2)
}

.button-secondary:hover svg rect[fill]:not([fill=none]),
.button-secondary:hover svg polyline[fill]:not([fill=none]),
.button-secondary:hover svg path[fill]:not([fill=none]),
.button-secondary:hover svg line[fill]:not([fill=none]),
.button-secondary:hover svg circle[fill]:not([fill=none]) {
    fill: var(--brand-2)
}

.button-secondary:hover svg rect[opacity]:not([opacity=none]),
.button-secondary:hover svg polyline[opacity]:not([opacity=none]),
.button-secondary:hover svg path[opacity]:not([opacity=none]),
.button-secondary:hover svg line[opacity]:not([opacity=none]),
.button-secondary:hover svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-2)
}

.button-secondary:hover .icon {
    color: var(--brand-2) !important
}

.button-secondary:focus {
    background-color: var(--bg-4);
    border-color: var(--brand-4);
    color: var(--brand-4)
}

.button-secondary:focus svg {
    width: 24px;
    height: 24px
}

.button-secondary:focus svg>* {
    transition: all 0.2s ease-in-out
}

.button-secondary:focus svg rect[stroke]:not([stroke=none]),
.button-secondary:focus svg polyline[stroke]:not([stroke=none]),
.button-secondary:focus svg path[stroke]:not([stroke=none]),
.button-secondary:focus svg line[stroke]:not([stroke=none]),
.button-secondary:focus svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-4)
}

.button-secondary:focus svg rect[fill]:not([fill=none]),
.button-secondary:focus svg polyline[fill]:not([fill=none]),
.button-secondary:focus svg path[fill]:not([fill=none]),
.button-secondary:focus svg line[fill]:not([fill=none]),
.button-secondary:focus svg circle[fill]:not([fill=none]) {
    fill: var(--brand-4)
}

.button-secondary:focus svg rect[opacity]:not([opacity=none]),
.button-secondary:focus svg polyline[opacity]:not([opacity=none]),
.button-secondary:focus svg path[opacity]:not([opacity=none]),
.button-secondary:focus svg line[opacity]:not([opacity=none]),
.button-secondary:focus svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-4)
}

.button-secondary:focus .icon {
    color: var(--brand-4) !important
}

.button-tertiary {
    background: var(--bg-1);
    border-color: var(--bg-1)
}

.button-tertiary svg {
    width: 24px;
    height: 24px
}

.button-tertiary svg>* {
    transition: all 0.2s ease-in-out
}

.button-tertiary svg rect[stroke]:not([stroke=none]),
.button-tertiary svg polyline[stroke]:not([stroke=none]),
.button-tertiary svg path[stroke]:not([stroke=none]),
.button-tertiary svg line[stroke]:not([stroke=none]),
.button-tertiary svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.button-tertiary svg rect[fill]:not([fill=none]),
.button-tertiary svg polyline[fill]:not([fill=none]),
.button-tertiary svg path[fill]:not([fill=none]),
.button-tertiary svg line[fill]:not([fill=none]),
.button-tertiary svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.button-tertiary svg rect[opacity]:not([opacity=none]),
.button-tertiary svg polyline[opacity]:not([opacity=none]),
.button-tertiary svg path[opacity]:not([opacity=none]),
.button-tertiary svg line[opacity]:not([opacity=none]),
.button-tertiary svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.button-tertiary .icon {
    color: var(--brand-1) !important
}

.button-tertiary:hover {
    background-color: var(--bg-1);
    border-color: var(--bg-1);
    color: var(--brand-2)
}

.button-tertiary:hover svg {
    width: 24px;
    height: 24px
}

.button-tertiary:hover svg>* {
    transition: all 0.2s ease-in-out
}

.button-tertiary:hover svg rect[stroke]:not([stroke=none]),
.button-tertiary:hover svg polyline[stroke]:not([stroke=none]),
.button-tertiary:hover svg path[stroke]:not([stroke=none]),
.button-tertiary:hover svg line[stroke]:not([stroke=none]),
.button-tertiary:hover svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-2)
}

.button-tertiary:hover svg rect[fill]:not([fill=none]),
.button-tertiary:hover svg polyline[fill]:not([fill=none]),
.button-tertiary:hover svg path[fill]:not([fill=none]),
.button-tertiary:hover svg line[fill]:not([fill=none]),
.button-tertiary:hover svg circle[fill]:not([fill=none]) {
    fill: var(--brand-2)
}

.button-tertiary:hover svg rect[opacity]:not([opacity=none]),
.button-tertiary:hover svg polyline[opacity]:not([opacity=none]),
.button-tertiary:hover svg path[opacity]:not([opacity=none]),
.button-tertiary:hover svg line[opacity]:not([opacity=none]),
.button-tertiary:hover svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-2)
}

.button-tertiary:hover .icon {
    color: var(--brand-2) !important
}

.button-tertiary:focus {
    background-color: var(--bg-4);
    border-color: var(--brand-4);
    color: var(--brand-4)
}

.button-tertiary:focus svg {
    width: 24px;
    height: 24px
}

.button-tertiary:focus svg>* {
    transition: all 0.2s ease-in-out
}

.button-tertiary:focus svg rect[stroke]:not([stroke=none]),
.button-tertiary:focus svg polyline[stroke]:not([stroke=none]),
.button-tertiary:focus svg path[stroke]:not([stroke=none]),
.button-tertiary:focus svg line[stroke]:not([stroke=none]),
.button-tertiary:focus svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-4)
}

.button-tertiary:focus svg rect[fill]:not([fill=none]),
.button-tertiary:focus svg polyline[fill]:not([fill=none]),
.button-tertiary:focus svg path[fill]:not([fill=none]),
.button-tertiary:focus svg line[fill]:not([fill=none]),
.button-tertiary:focus svg circle[fill]:not([fill=none]) {
    fill: var(--brand-4)
}

.button-tertiary:focus svg rect[opacity]:not([opacity=none]),
.button-tertiary:focus svg polyline[opacity]:not([opacity=none]),
.button-tertiary:focus svg path[opacity]:not([opacity=none]),
.button-tertiary:focus svg line[opacity]:not([opacity=none]),
.button-tertiary:focus svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-4)
}

.button-tertiary:focus .icon {
    color: var(--brand-4) !important
}

.button-unstyled {
    background-color: transparent;
    border-color: transparent;
    padding: 0
}

.button-unstyled svg {
    width: 24px;
    height: 24px
}

.button-unstyled svg>* {
    transition: all 0.2s ease-in-out
}

.button-unstyled svg rect[stroke]:not([stroke=none]),
.button-unstyled svg polyline[stroke]:not([stroke=none]),
.button-unstyled svg path[stroke]:not([stroke=none]),
.button-unstyled svg line[stroke]:not([stroke=none]),
.button-unstyled svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.button-unstyled svg rect[fill]:not([fill=none]),
.button-unstyled svg polyline[fill]:not([fill=none]),
.button-unstyled svg path[fill]:not([fill=none]),
.button-unstyled svg line[fill]:not([fill=none]),
.button-unstyled svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.button-unstyled svg rect[opacity]:not([opacity=none]),
.button-unstyled svg polyline[opacity]:not([opacity=none]),
.button-unstyled svg path[opacity]:not([opacity=none]),
.button-unstyled svg line[opacity]:not([opacity=none]),
.button-unstyled svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.button-unstyled .icon {
    color: var(--brand-1) !important
}

.button-unstyled:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--brand-1)
}

.button-unstyled:hover svg {
    width: 24px;
    height: 24px
}

.button-unstyled:hover svg>* {
    transition: all 0.2s ease-in-out
}

.button-unstyled:hover svg rect[stroke]:not([stroke=none]),
.button-unstyled:hover svg polyline[stroke]:not([stroke=none]),
.button-unstyled:hover svg path[stroke]:not([stroke=none]),
.button-unstyled:hover svg line[stroke]:not([stroke=none]),
.button-unstyled:hover svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.button-unstyled:hover svg rect[fill]:not([fill=none]),
.button-unstyled:hover svg polyline[fill]:not([fill=none]),
.button-unstyled:hover svg path[fill]:not([fill=none]),
.button-unstyled:hover svg line[fill]:not([fill=none]),
.button-unstyled:hover svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.button-unstyled:hover svg rect[opacity]:not([opacity=none]),
.button-unstyled:hover svg polyline[opacity]:not([opacity=none]),
.button-unstyled:hover svg path[opacity]:not([opacity=none]),
.button-unstyled:hover svg line[opacity]:not([opacity=none]),
.button-unstyled:hover svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.button-unstyled:hover .icon {
    color: var(--brand-1) !important
}

.button-unstyled:focus {
    outline: 0;
    background-color: transparent;
    border-color: transparent;
    color: var(--brand-1)
}

.button-unstyled:focus svg {
    width: 24px;
    height: 24px
}

.button-unstyled:focus svg>* {
    transition: all 0.2s ease-in-out
}

.button-unstyled:focus svg rect[stroke]:not([stroke=none]),
.button-unstyled:focus svg polyline[stroke]:not([stroke=none]),
.button-unstyled:focus svg path[stroke]:not([stroke=none]),
.button-unstyled:focus svg line[stroke]:not([stroke=none]),
.button-unstyled:focus svg circle[stroke]:not([stroke=none]) {
    stroke: var(--brand-1)
}

.button-unstyled:focus svg rect[fill]:not([fill=none]),
.button-unstyled:focus svg polyline[fill]:not([fill=none]),
.button-unstyled:focus svg path[fill]:not([fill=none]),
.button-unstyled:focus svg line[fill]:not([fill=none]),
.button-unstyled:focus svg circle[fill]:not([fill=none]) {
    fill: var(--brand-1)
}

.button-unstyled:focus svg rect[opacity]:not([opacity=none]),
.button-unstyled:focus svg polyline[opacity]:not([opacity=none]),
.button-unstyled:focus svg path[opacity]:not([opacity=none]),
.button-unstyled:focus svg line[opacity]:not([opacity=none]),
.button-unstyled:focus svg circle[opacity]:not([opacity=none]) {
    fill: var(--brand-1)
}

.button-unstyled:focus .icon {
    color: var(--brand-1) !important
}

.form-group .form-control {
    padding: 8px 10px;
    background: var(--bg-1);
    border: 1px solid var(--teks-4);
    box-sizing: border-box;
    border-radius: 5px;
    color: var(--teks-2);
    display: block;
    transition: all 0.2s ease-in-out;
    width: 100%
}

.form-group .form-control:disabled,
.form-group .form-control.disabled {
    background: var(--bg-3);
    border: 1px solid var(--teks-4)
}

.form-group .form-control:focus {
    outline: 2px solid var(--brand-4);
    border-color: var(--brand-1)
}

.form-group .form-control:hover {
    border-color: var(--brand-1)
}

.form-group .form-control::placeholder {
    color: var(--teks-5);
    opacity: 1
}

.form-group .form-control:-ms-input-placeholder {
    color: var(--teks-5)
}

.form-group .form-control::-ms-input-placeholder {
    color: var(--teks-5)
}

.js-select.nice-select {
    background: var(--bg-1);
    border: 1px solid var(--teks-4);
    box-sizing: border-box;
    border-radius: 5px;
    padding: 8px 10px;
    display: block;
    outline: 2px solid transparent;
    height: 40px;
    line-height: 40px
}

.js-select.nice-select:hover {
    border-color: var(--brand-1)
}

.js-select.nice-select:after {
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23333333' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='208 96 128 176 48 96' fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform-origin: unset;
    width: 20px;
    height: 20px;
    color: var(--teks-5);
    transform: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) rotate(0deg);
    margin: 0;
    right: 10px
}

.js-select.nice-select.open {
    border-color: var(--brand-1);
    outline-color: var(--brand-4)
}

.js-select.nice-select.open:after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--brand-1)
}

.js-select.nice-select .current {
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 1
}

.js-select.nice-select.disabled {
    border-color: var(--teks-4);
    background-color: var(--bg-3)
}

.js-select.nice-select.disabled,
.js-select.nice-select.disabled .current,
.js-select.nice-select.disabled:after {
    color: var(--teks-4)
}

.js-select.wide {
    width: 100%
}

.js-select.wide .nice-select-dropdown {
    width: 100%
}

footer.main-footer.rev-22 {
    white-space: unset;
    background-color: var(--bg-5);
    color: var(--teks-6);
    padding: 30px 0;
    border-top: 0;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: normal
}

footer.main-footer.rev-22 a {
    transition: all 0.2s ease-in-out
}

footer.main-footer.rev-22 a:not(.button) {
    color: var(--brand-2)
}

footer.main-footer.rev-22 a:hover:not(.button) {
    color: var(--brand-4)
}

footer.main-footer.rev-22>.container {
    flex-wrap: wrap
}

footer.main-footer.rev-22>.container>.row {
    width: 100%
}

footer.main-footer.rev-22>.container>.row:not(:last-child) {
    margin-bottom: 20px
}

footer.main-footer.rev-22 .row.credit {
    font-size: 14px;
    line-height: 1.42;
    font-weight: 500;
    margin-top: 20px;
}

footer.main-footer.rev-22 .row.credit .footer-menu {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
    margin: -7.5px
}

footer.main-footer.rev-22 .row.credit .footer-menu li {
    flex: 0 1 auto;
    border: 0;
    padding: 0
}

footer.main-footer.rev-22 .row.credit .footer-menu li a {
    font-size: 14px;
    line-height: 1.42;
    font-weight: 500;
    color: var(--teks-6);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7.5px
}

footer.main-footer.rev-22 .row.credit .footer-menu li a:hover {
    color: var(--brand-4)
}

footer .widget-head {
    margin-bottom: 20px
}

footer .widget .title-widget {
    font-size: 18px;
    line-height: 1.33;
    font-weight: 500;
    font-family: "Merriweather Sans", sans-serif;
    text-align: center
}

footer .widget:not(:first-child) {
    margin-top: 30px
}

footer .widget.widget-banner .widget-body{
    text-align: center;
}

footer .widget-social.align-left{
    text-align: left;
    justify-content: flex-start;
}
footer .widget-social.align-left .title-widget{
    text-align: left;
}

footer .widget-social.align-left ul.social{
    justify-content: flex-start;
}

footer .widget-social ul.social {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    margin: -7.5px
}

footer .widget-social ul.social li {
    flex: 0 1 auto;
    padding: 7.5px
}

footer .widget-social ul.social li a {
    display: flex;
    align-items: center;
    justify-content: center
}

footer .widget-social ul.social li a span {
    display: inline-block
}

footer .widget-social ul.social li a .icon {
    width: 24px;
    height: 24px
}

footer .widget-social ul.social li a .icon svg {
    width: 100%;
    height: 100%
}

footer .widget-social ul.social li a .icon svg path {
    fill: var(--brand-2)
}

footer .widget-social ul.social li a:hover svg {
    width: 100%;
    height: 100%
}

footer .widget-social ul.social li a:hover svg path {
    fill: var(--brand-4)
}

footer .widget.widget-link ul li{
    border-right: 0;
    text-transform: uppercase;
}

footer .widget.widget-link ul li a{
    font-size: 14px;
    line-height: 1.42;
    font-weight: 600;
    color: var(--teks-6) !important;
}

footer .widget-text .logo-footer {
    height: 60px;
    margin-bottom: 20px
}

footer .widget-text p {
    margin-bottom: 20px
}

footer .widget-text p:last-child {
    margin-bottom: 0
}

footer .widget-subscribe .form-group:not(:last-child) {
    margin-bottom: 10px
}

#main-wrapper.rev-2022 .pagination {
    position: relative;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 500;
    color: var(--teks-3);
    text-align: center;
    margin: 20px 0 0
}

#main-wrapper.rev-2022 .pagination>ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent !important;
    background: transparent !important;
    color: #fff;
    border-color: transparent !important;
    min-width: unset;
    height: unset
}

#main-wrapper.rev-2022 .pagination>ul>li {
    margin-right: 10px
}

#main-wrapper.rev-2022 .pagination>ul>li:first-child {
    margin-right: auto
}

#main-wrapper.rev-2022 .pagination>ul>li:last-child {
    margin-left: auto;
    margin-right: 0
}

#main-wrapper.rev-2022 .pagination .displaying-num {
    color: #302b40
}

#main-wrapper.rev-2022 .pagination span.page-numbers,
#main-wrapper.rev-2022 .pagination a.page-numbers {
    border: 1px solid transparent;
    background-color: transparent;
    background: transparent;
    padding: 0 10px;
    width: auto;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teks-3);
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    text-transform: none
}

#main-wrapper.rev-2022 .pagination span.page-numbers.current,
#main-wrapper.rev-2022 .pagination a.page-numbers.current {
    border-color: var(--brand-1);
    color: var(--brand-1)
}

#main-wrapper.rev-2022 .pagination span.page-numbers:hover,
#main-wrapper.rev-2022 .pagination a.page-numbers:hover {
    color: var(--brand-1)
}

#main-wrapper.rev-2022 .pagination span.page-numbers.disabled,
#main-wrapper.rev-2022 .pagination a.page-numbers.disabled {
    pointer-events: none;
    background-color: var(--bg-4);
    background-image: unset
}

#main-wrapper.rev-2022 .pagination span.page-numbers.disabled,
#main-wrapper.rev-2022 .pagination span.page-numbers.disabled .icon,
#main-wrapper.rev-2022 .pagination a.page-numbers.disabled,
#main-wrapper.rev-2022 .pagination a.page-numbers.disabled .icon {
    color: var(--teks-5)
}

#main-wrapper.rev-2022 .pagination span.page-numbers.dots,
#main-wrapper.rev-2022 .pagination a.page-numbers.dots {
    pointer-events: none
}

#main-wrapper.rev-2022 .pagination span.prev,
#main-wrapper.rev-2022 .pagination span.next,
#main-wrapper.rev-2022 .pagination a.prev,
#main-wrapper.rev-2022 .pagination a.next {
    padding: 10px 14px;
    color: var(--teks-6);
    font-size: 15px;
    border: 0;
    background-color: var(--brand-1);
    width: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    border-radius: 5px;
    text-transform: none
}

#main-wrapper.rev-2022 .pagination span.prev .icon,
#main-wrapper.rev-2022 .pagination span.next .icon,
#main-wrapper.rev-2022 .pagination a.prev .icon,
#main-wrapper.rev-2022 .pagination a.next .icon {
    margin-right: 0;
    margin-left: 0;
    font-size: 20px;
    display: inline-block;
    color: var(--teks-6);
    line-height: 1
}

#main-wrapper.rev-2022 .pagination span.prev .icon~span,
#main-wrapper.rev-2022 .pagination span.next .icon~span,
#main-wrapper.rev-2022 .pagination a.prev .icon~span,
#main-wrapper.rev-2022 .pagination a.next .icon~span {
    margin-left: 10px;
    margin-right: 0
}

#main-wrapper.rev-2022 .pagination span.prev .icon>svg,
#main-wrapper.rev-2022 .pagination span.next .icon>svg,
#main-wrapper.rev-2022 .pagination a.prev .icon>svg,
#main-wrapper.rev-2022 .pagination a.next .icon>svg {
    height: 20px;
    width: 20px
}

#main-wrapper.rev-2022 .pagination span.prev span:not(.icon)~.icon,
#main-wrapper.rev-2022 .pagination span.next span:not(.icon)~.icon,
#main-wrapper.rev-2022 .pagination a.prev span:not(.icon)~.icon,
#main-wrapper.rev-2022 .pagination a.next span:not(.icon)~.icon {
    margin-right: 0;
    margin-left: 10px
}

#main-wrapper.rev-2022 .pagination span.prev:hover,
#main-wrapper.rev-2022 .pagination span.next:hover,
#main-wrapper.rev-2022 .pagination a.prev:hover,
#main-wrapper.rev-2022 .pagination a.next:hover {
    color: var(--teks-6);
    background-color: var(--brand-2)
}

.js-swiper .swiper-slide {
    padding: 2px
}

.js-swiper.swiper-width-padding {
    padding-left: 12%;
    padding-right: 12%
}

.js-swiper .swiper-slide {
    opacity: 0.7
}

.js-swiper .swiper-slide.swiper-slide-visible {
    opacity: 1
}

.js-swiper .swiper-button-next:after,
.js-swiper .swiper-button-prev:after {
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%
}

.js-swiper .swiper-button-next:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23F96913' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='96 48 176 128 96 208' fill='none' stroke='%23F96913' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E")
}

.js-swiper .swiper-button-prev:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23f96913' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='160 208 80 128 160 48' fill='none' stroke='%23f96913' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E")
}

.mt-0 {
    margin-top: 0px !important
}

.mb-0 {
    margin-bottom: 0px !important
}

.mt-10 {
    margin-top: 10px !important
}

.mb-10 {
    margin-bottom: 10px !important
}

.mt-15 {
    margin-top: 15px !important
}

.mb-15 {
    margin-bottom: 15px !important
}

.mt-20 {
    margin-top: 20px !important
}

.mb-20 {
    margin-bottom: 20px !important
}

.mt-25 {
    margin-top: 25px !important
}

.mb-25 {
    margin-bottom: 25px !important
}

.pt-25 {
    padding-top: 25px !important
}

.pb-25 {
    padding-bottom: 25px !important
}

.pt-20 {
    padding-top: 20px !important
}

.pb-20 {
    padding-bottom: 20px !important
}

.pt-30 {
    padding-top: 30px !important
}

.pb-30 {
    padding-bottom: 30px !important
}

.gap-50 {
    margin-left: -25px !important;
    margin-right: -25px !important
}

.gap-50>[class|="col"] {
    padding-left: 25px !important;
    padding-right: 25px !important
}

.gap-40-all {
    margin: -20px !important
}

.gap-40-all>[class|="col"] {
    padding: 20px !important
}

.gap-20-all {
    margin: -10px !important
}

.gap-20-all>[class|="col"],
.gap-20-all>li {
    padding: 10px !important
}

.gap-20 {
    margin: 0 -10px !important
}

.gap-20>[class|="col"],
.gap-20>li {
    padding: 0 10px !important
}

.gap-15 {
    margin: 0 -7.5px !important
}

.gap-15>[class|="col"],
.gap-15>li {
    padding: 0 7.5px !important
}

.gap-15-all {
    margin: -7.5px !important
}

.gap-15-all>[class|="col"],
.gap-15-all>li {
    padding: 7.5px !important
}

.gap-10 {
    margin: 0 -5px !important
}

.gap-10>[class|="col"] {
    padding: 0 5px !important
}

.gap-bottom>[class|="col"] {
    padding-bottom: 30px !important
}

@media (max-width: 991px) {
    .mt-10-sm {
        margin-top: 10px !important
    }

    .mb-10-sm {
        margin-bottom: 10px !important
    }

    .mt-15-sm {
        margin-top: 15px !important
    }

    .mb-15-sm {
        margin-bottom: 15px !important
    }

    .mt-10-minus-sm {
        margin-top: -10px !important
    }

    .mb-10-minus-sm {
        margin-bottom: -10px !important
    }

    .mt-5-minus-sm {
        margin-top: -5px !important
    }

    .mb-5-minus-sm {
        margin-bottom: -5px !important
    }

    .gap-15-all-sm {
        margin: -7.5px !important
    }

    .gap-15-all-sm>[class|="col"],
    .gap-15-all-sm>li {
        padding: 7.5px !important
    }
}

.fx-nowrap-100 {
    flex-wrap: nowrap
}

.fx-nowrap-100>[class|="col"],
.fx-nowrap-100>li {
    flex: 1 1 100%;
    max-width: 100%
}

@media (max-width: 991px) {
    .fx-nowrap-100 {
        flex-wrap: wrap
    }
}

.fx-direction-column {
    flex-direction: column !important
}

.fx-grow-1 {
    flex-grow: 1 !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-between {
    justify-content: space-between !important
}

.justify-content-around {
    justify-content: space-between !important
}

.align-items-center {
    align-items: center !important
}

.align-items-start {
    align-items: flex-start !important
}

.align-self-end {
    align-self: flex-end !important
}

.text-uppercase {
    text-transform: uppercase !important
}

.text-center {
    text-align: center !important
}

.text-italic {
    font-style: italic !important
}

.text-primary {
    color: var(--teks-1) !important
}

.excerpt-2-line,
.card-post .post-title,
.excerpt-3-line,
.list-posts .item-post .content-wrap .post-title,
.excerpt-4-line {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.excerpt-2-line,
.card-post .post-title {
    max-height: 3em;
    -webkit-line-clamp: 2
}

.excerpt-3-line,
.list-posts .item-post .content-wrap .post-title {
    max-height: 4.5em;
    -webkit-line-clamp: 3
}

.excerpt-4-line {
    max-height: 6em;
    -webkit-line-clamp: 4
}

.d-none-important {
    display: none !important
}

.d-none {
    display: none
}

.d-block {
    display: block
}

.d-flex {
    display: flex
}

.flex-wrap {
    flex-wrap: wrap
}

.billboard {
    text-align: center
}

.billboard--top {
    padding-top: 30px;
    padding-bottom: 30px
}

.billboard--mid {
    padding-bottom: 20px
}

#main-wrapper.rev-2022 .archive-page .section-head {
    margin-top: 0 !important
}

body.home .main-content.home-page > section{
    margin-top: 45px;
    margin-bottom: 45px;
}