/* scroll bar */
html {
    overflow-y: overlay;
}

body {
    background-color: #111;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    position: absolute;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--gray);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* end scroll bar */

::selection {
    background-color: var(--primary-color);
    color: var(--dark);
}

.darkmode {
    color: #eee;
    background-color: #111;
}

#content {
    position: relative;
}

/***************** ****************************** *****************/
/***************** Default template & header-side *****************/
/***************** ****************************** *****************/

.default-template {
    display: flex;
    width: 100vw;
}

.default-template .side-header {
    width: 215px;
    height: 100vh;
    background-color: var(--black);
    color: var(--light);
    position: fixed;
    z-index: 9;
}


.default-template .side-header .select-province-section {
    font-size: 18px;
    cursor: pointer;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    transition: all 0.3s ease-in-out;
}

.default-template .side-header .select-province-section:hover {
    background-color: var(--gray);
}

.default-template .content {
    width: 100%;
}

[dir=rtl] .default-template .content {
    margin-right: 215px;
}

[dir=ltr] .default-template .content {
    margin-left: 215px;
}

.lang-switcher {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.default-template .side-header .btn-search {
    color: var(--light);
}

.default-template .side-header .btn-search:hover {
    color: var(--white);
}

.search-form {
    /* right: 215px; */
    right: 0;
}

.search-form {
    /* left: 215px; */
    left: 0;
}

.search-form {
    display: none;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 999;
}

.search-form .form button {
    color: var(--light);
    font-size: 20px;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

.search-form .form button:hover {
    color: var(--primary-color);
}

.search-form .form input {
    width: 100%;
    height: 60px;
    border: none;
    outline: none;
    background-color: transparent;
    padding: 0 20px;
    font-size: 25px;
    color: var(--light);
    transition: all 0.3s ease-in-out;
}

.search-form .form {
    width: 100%;
    max-width: 700px;
    border-bottom: 3px solid var(--light);
    display: flex;
}

.search-form .form:hover {
    border-color: var(--primary-color);
}

.search-form .filters {
    max-width: 95vw;
}

.search-form .filters ul {
    list-style: none;
    display: flex;
    margin-top: 20px;
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding: 5px;
    border-radius: 5px;
    background-color: #505050;
    max-width: fit-content;
}

.search-form .filters ul::-webkit-scrollbar {
    display: none;
}

.search-form .filters ul li {
    margin: 0px 5px;
    padding: 2px 10px;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: flex;
}

.search-form .filters ul li:hover,
.search-form .filters ul li.active {
    background-color: var(--primary-color);
    color: var(--dark);
}

.lang-dropdown .dropdown-toggle {
    background-color: transparent;
    color: var(--light);
    border: none;
}

.lang-dropdown .dropdown-toggle::after {
    display: none;
}

.default-template .side-header.collapsed .search-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.default-template .side-header section {
    /* padding: 25px 32px; */
    padding: 23px 32px;
}

.default-template .side-header section:not(:first-child),
.default-template .side-header section:last-child {
    padding-top: 0px;
}

.default-template .menu-section .container-fluid,
.default-template .menu-section .collapse {
    width: 100%;
    padding: 0px;
}

.default-template .menu-section {
    width: 100%;
}

.default-template .menu-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
}

.default-template .menu-section ul li {
    width: 100%;
}

.default-template .menu-section ul li a {
    color: var(--light);
    text-decoration: none;
    padding: 11.5px 32px;
    display: flex;
    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
}

.default-template .menu-section ul li.menu-item-has-children ul a {
    display: block;
}

.default-template .menu-section ul li>ul {
    overflow: visible;
    position: absolute;
    background: var(--white);
    color: var(--dark);
    box-shadow: 0px 4px 20px -10px rgba(0, 0, 0, 0.25);
    width: 350px;
    padding: 20px 10px;
}

.default-template .menu-section ul li>ul li {
    width: 155px;
    display: inline-block;
}

/* underline animation */
.default-template .menu-section ul li>ul li a {
    width: fit-content;
}

.default-template .menu-section ul li>ul li a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    /* background: var(--primary-color); */
    background: var(--dark);
    transition: width 0.3s;
}

.default-template .menu-section ul li>ul li a:hover::after {
    width: 100%;
    transition: width 0.3s;
}

.default-template .menu-section ul li>ul li.active a::after {
    width: 100%;
    transition: width 0.3s;
}

.default-template .menu-section ul li>ul li:hover a {
    background-color: transparent;
}

[dir=rtl] .default-template .menu-section ul li>ul li {
    float: right;
}

[dir=ltr] .default-template .menu-section ul li>ul li {
    float: left;
}

[dir=rtl] .default-template .menu-section ul li>ul {
    transform: translate(-215px, -45px);
}

[dir=ltr] .default-template .menu-section ul li>ul {
    transform: translate(215px, -45px);
}

.default-template .menu-section ul li:hover>ul li a {
    color: var(--dark);
}

.default-template .menu-section ul li:hover>ul {
    display: block;
}

[dir=rtl] .default-template .menu-section ul li:hover .dropdown-arrow {
    transform: rotate(90deg);
}

[dir=ltr] .default-template .menu-section ul li:hover .dropdown-arrow {
    transform: rotate(-90deg);
}

.search-form>div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.dropdown-arrow {
    display: inline-block;
    transition: transform 0.3s;
    transform: rotate(0deg);
}

.dropdown-arrow.rotate {
    transform: rotate(180deg) !important;
}

.default-template .menu-section ul li a:hover {
    background-color: var(--primary-color);
    color: var(--dark);
}

/* .default-template .menu-section ul li a:hover {
    background-color: var(--dark);
    color: var(--light);
} */

/* .navbar>li {
    overflow: hidden;
}

.navbar>li>a::before {
    content: '+';
    font-size: 30px;
    line-height: 0;
    display: inline-block;
    padding-left: 10px;
    transform: translate(0px, 5px);
    transition: .3s;
    margin-right: -30px;
    opacity: 0;
}

.navbar>li>a:hover::before {
    margin-right: -5px;
    opacity: 1;
} */

.default-template .menu-section li ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: none;
}


.default-template .secondary-menu-section .container-fluid,
.default-template .secondary-menu-section .collapse {
    width: 100%;
    padding: 0px;
}

.default-template .secondary-menu-section {
    width: 100%;
}

.default-template .secondary-menu-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
}

.default-template .secondary-menu-section ul li {
    width: 100%;
}

.default-template .secondary-menu-section ul li a {
    color: var(--light);
    text-decoration: none;
    padding: 11.5px 32px;
    display: block;
    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
}

.default-template .secondary-menu-section ul li a:hover {
    background-color: var(--primary-color);
    color: var(--dark);
}

.default-template .secondary-menu-section li ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: none;
}

.default-template .side-header .select-province-box {
    display: none;
    width: 250px;
    height: 155px;
    background: var(--white);
    border: 1px solid var(--light);
    position: absolute;
    left: -250px;
    margin-top: -135px;
    padding: 20px;
    cursor: auto;
}

.default-template .side-header .select-province-section:hover .select-province-box {
    display: block;
}

/* modern select dropddown */
.default-template .side-header .select-province-box select {
    width: 100%;
    height: 40px;
    border: 1px solid var(--gray);
    border-radius: 5px;
    padding: 0 10px;
    font-size: 16px;
    color: var(--dark);
    background: var(--white);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
    direction: ltr;
}

.default-template .side-header .select-province-box select::-ms-expand {
    display: none;
}

.default-template .side-header .select-province-box select:hover {
    outline: none;
    border-color: var(--gray);
}

.default-template .side-header .select-province-box select:focus {
    outline: none;
    border-color: var(--gray);
}

.default-template .side-header .select-province-box select option {
    color: var(--dark);
}

.default-template .side-header .select-province-box select option:hover {
    background-color: var(--primary-color);
    color: var(--dark);
}

.default-template .side-header .select-province-box .province-select-description {
    font-size: 14px;
    color: var(--dark);
    padding: 20px 0;
}

.sperator {
    width: 100%;
    height: 1px;
}

.sperator.light {
    background-color: var(--light);
}

.sperator.dark {
    background-color: var(--dark);
}

.sperator.gray {
    background-color: var(--gray);
}

.chips-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -0.25rem;
}

.chip {
    width: fit-content;
    padding: 5px 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    color: var(--dark);
    border-radius: 20px;
    margin: 1rem .5rem;
}

/* .chip.chip-small > * {
    height: 15px;
} */

.chips-list a {
    text-decoration: none !important;
}

.chip.chip-small {
    padding: 5px 10px;
    font-size: 12px;
}

.chip.border {
    border: 1px solid #111a !important;
}

.chip.hover-effect {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.scale-effect {
    transition: transform 0.2s ease-in-out;
    transform: scale(1);
}

.scale-effect:hover {
    transform: scale(1.05);
}

.chip.hover-effect:hover {
    background-color: var(--primary-color);
    color: var(--dark) !important;
}

.langs-list li a {
    color: var(--light);
    transition: all 0.3s ease-in-out;
}

.langs-list li:hover a {
    color: var(--primary-color);
}

body[dir=rtl] .chip-icon {
    margin-left: 10px;
}

body[dir=ltr] .chip-icon {
    margin-right: 10px;
}

.menu-section {
    padding-top: 0px !important;
}

.hero-main {
    position: relative;
    /* max-height: 100vh; */
}

.hero-main .slide h3 {
    font-size: 30px;
    font-weight: bold;
}

.slide .overlay {
    pointer-events: none;
}

/* .slide .embed-responsive {
    pointer-events: none;
} */

.hero-main>div:first-child,
.hero-main .slider,
.hero-main .slide {
    height: calc((100vw - 215px) * (1080 / 1920));
    max-height: calc(100vh);
    /* max-height: calc(100vh - 166px); */
}

.hero-main video {
    width: calc(100vw - 215px);
}

.breaking-news-slider {
    display: flex;
    height: 50px;
    width: 100%;
    background-color: var(--primary-color);
    position: absolute;
    bottom: 0;
    /* display: none; */
}

.breaking-news-slider-single {
    position: relative;
    /* top: -50px; */
    z-index: 90;
}

.breaking-news-slider h2 {
    background-color: var(--white);
    color: var(--dark);
    width: fit-content;
}

.hero-slide-subtitle {
    font-size: 20px !important;
    color: var(--dark);
    background-color: var(--primary-color);
    display: inline-block;
    margin-bottom: 10px;
    width: fit-content;
    padding: 5px 10px;
}

/* body[dir=rtl] .breaking-news-slider h2 {
    margin-right: 30px !important;
}

body[dir=ltr] .breaking-news-slider h2 {
    margin-left: 30px !important;
} */



body[dir=rtl] .breaking-news-slider::after {
    left: 0;
}

body[dir=ltr] .breaking-news-slider::after {
    right: 0;
}

.hero-main {
    width: calc(100vw - 215px);
    overflow: hidden;
    z-index: 0;
}

.hero-main .slider .slide {
    width: 100%;
    position: relative;
    /* height: calc(100vh - 165px); */
    background-color: var(--dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* .hero-main .slider .slick-dots {
    display: none !important;
} */

.hero-main .slider ul.slick-dots {
    opacity: 0;
    list-style: none;
    z-index: 99000;
    transform: translate(-18px, -29px);
    position: absolute;
}

.hero-main .slider ul.slick-dots li {
    display: inline-block;
    margin: 0 2px;
}

.hero-main .slider ul.slick-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 5px;
    border: none;
    background-color: #666;
    color: transparent;
    transition: all 0.3s ease-in-out;
}

.hero-main .slider ul.slick-dots .slick-active button {
    background-color: #fff;
    width: 15px;
}

.hero-main .slider .slide-inner {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 80%);
}

.hero-main .slider a {
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
}

.hero-main .slider-posts {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    display: flex;
    height: 140px;
    margin-top: -140px;
    border-top: 1px solid #fff4;
    justify-content: space-around;
    /* display: none; */
}

.hero-main .slider-posts>div {
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slider-posts-single::before {
    content: '';
    transition: all 0.05s ease-in-out;
    width: 0%;
    height: 3px;
    background-color: #fff;
    display: block;
    position: absolute;
    top: 0;
}

.hero-main .progress-bar {
    width: 0%;
    height: 3px;
    background-color: #fff;
    display: block;
    position: absolute;
    top: 0;
    transition: all 0.05s ease-in-out;
}

.slider-posts-single:not(.active) .progress-bar {
    width: 0% !important;
}

.hero-main .slide>.progress-bar {
    display: none;
    background-color: #000;
}

[dir=rtl] .hero-main .progress-bar {
    right: 0;
}

[dir=ltr] .hero-main .progress-bar {
    left: 0;
}

[dir=rtl] .slider-posts-single::before {
    right: 0;
}

[dir=ltr] .slider-posts-single::before {
    left: 0;
}

[dir=rtl] .hero-main .slider-posts>div:not(:last-child) {
    border-left: 1px solid #fff4;
}

[dir=ltr] .hero-main .slider-posts>div:not(:last-child) {
    border-right: 1px solid #fff4;
}

.hero-main .slider-posts a {
    color: var(--light);
    text-decoration: none;
}

.hero-main .slider-posts h3 {
    font-size: 17px;
    font-weight: 400;
}

.hero-main .post-time-ago {
    font-size: 13px;
    color: var(--light);
}

.hero-main .slide {
    position: relative;
}

.hero-main h3 {
    line-height: 1.6;
    /* font-size: 40px; */
}

.hero-main .slide .slide-title {
    position: absolute;
    bottom: 190px;
    width: 60%;
}

.breaking-news-slider h2 {
    font-size: 1.2rem;
    padding: 13px;
    font-weight: bold;
}


.breaking-news-slider a {
    text-decoration: none;
    color: var(--dark);
}

.breaking-news-slider h3 {
    font-size: 1.2rem;
    height: 34px;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.breaking-news-slider-single {
    width: 100%;
    padding-top: 10px;
    /* padding: 20px 0; */
}

.breaking-news-slider ul.slick-dots {
    list-style: none;
    z-index: 99000;
    position: absolute;
    top: 12px;
    padding: 0;
}

body[dir=ltr] .breaking-news-slider ul.slick-dots {
    right: 0px;
}

body[dir=rtl] .breaking-news-slider ul.slick-dots {
    left: 0px;
}

.breaking-news-slider.breaking-news-slider-no-title ul.slick-dots {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin: 10px 42px;
}

.breaking-news-slider.breaking-news-slider-no-title {
    padding: 27px 0;
}

.breaking-news-slider ul.slick-dots li {
    display: inline-block;
    margin: 0 2px;
}

.breaking-news-slider ul.slick-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 5px;
    border: none;
    background-color: #999;
    color: transparent;
    transition: all 0.3s ease-in-out;
}

.breaking-news-slider ul.slick-dots .slick-active button {
    background-color: var(--dark);
    width: 15px;
}

.breaking-news-slider ul.slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
}

.breaking-news-slider ul.slick-dots li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.breaking-news-slick {
    width: calc(100%);
}

.breaking-news-slick>.breaking-news-slider-single:not(:first-child) {
    display: none;
}


/* .breaking-news-slider {
    padding-bottom: 5px;
    position: fixed!important;
    bottom: 0;
}

.post-template-card__image {
    z-index: -1;
} */

.breaking-news-slider .arrow {
    cursor: pointer;
    border: 1px solid var(--dark);
    width: 25px;
    height: 25px;
    ;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.breaking-news-slider .arrow:hover {
    background-color: var(--dark);
    color: var(--white);
}

.breaking-news-slick .post-time-ago {
    color: var(--dark);
}

.postcard {
    background-color: transparent;
    border: none;
}

.postcard.postcard-title-inside {
    overflow: hidden;
    /* padding: 10px; */
    /* box-shadow: 0;
    transition: all 0.3s ease-in-out; */
}

/* .postcard.postcard-title-inside:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
} */

.postcard.postcard-title-inside .card-body {
    border-radius: 8px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: all 0.3s ease-in-out;
}

/* .postcard.postcard-title-inside:hover .card-body {
    background-size: 105%;
} */

.postcard.postcard-title-inside .card-body {
    height: 100%;
}

.postcard.postcard-title-inside a {
    text-decoration: none;
    color: var(--dark);
}

.postcard.postcard-title-inside .post-time-ago {
    color: var(--light);
}

.postcard.postcard-title-inside h3 {
    color: var(--light);
    font-size: 18px;
}

.postcard.postcard-title-inside .card-title {
    position: absolute;
    bottom: 10px;
    /* padding: 0 20px; */
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 80%);
}

body[dir=rtl] .postcard.postcard-title-inside .postcard.postcard-title-inside-categories {
    margin-right: -5px;
}

body[dir=ltr] .postcard.postcard-title-inside .postcard.postcard-title-inside-categories {
    margin-left: -5px;
}

.postcard.postcard-title-outside h3 {
    font-size: 16px;
    color: var(--dark);
    font-weight: 400;
}

.postcard.postcard-title-outside img {
    border-radius: 8px;
}

.postcard.postcard-title-outside .post-title {
    margin-top: 5px;
    max-height: 52px;
    line-height: 27px;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.slider-posts-single h3 {
    max-height: 70px;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    position: relative;
    top: 4px;
    font-size: .9rem !important;
}

.slider-posts-single {
    transition: border-top .1s ease-in-out;
}

/* .slider-posts-single.active {
    border-top: 3px solid var(--white)!important;
} */

.postcard.postcard-title-outside .post-time-ago {
    color: var(--gray);
}

.postcard.postcard-title-outside .card,
.postcard.postcard-title-outside .card-body {
    padding: 0;
    margin: 0;
}

.postcard.postcard-title-outside a {
    text-decoration: none;
}

.postcard-title-outside .chips-list {
    flex-wrap: nowrap;
    width: max-content;
}

.postcard-title-outside .postcard-categories {
    position: relative;
}

.postcard-title-outside .postcard-categories-scroll::-webkit-scrollbar {
    display: none;
}

.postcard-title-outside .postcard-categories-scroll::after {
    content: '';
    position: absolute;
    bottom: -12px;
    width: 100%;
    height: 70px;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 20%);
    z-index: 1;
    pointer-events: none;
    display: block;
}

.postcard-title-outside .postcard-categories-scroll.flip-overlay::after {
    content: '';
    transform: rotate(180deg);
}

.postcard-title-outside .postcard-categories-scroll.hide-overlay::after {
    display: none !important;
}

body[dir=rtl] .posts-cards-block,
body[dir=rtl] .posts-cards-block .card {
    float: right;
}

body[dir=ltr] .posts-cards-block,
body[dir=ltr] .posts-cards-block .card {
    float: left;
}

.posts-cards-block .card {
    width: calc(25% - 15px);
    margin: 0 7.5px 35px 7.5px;
    display: inline-block;
    border: none;
    height: 320px;
}

.posts-cards-block .card:first-child {
    width: calc(50% - 15px);
    /* height: 675px; */
}

.button {
    display: inline-block;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 10px 20px;
    background-color: #222;
    border: 1px solid #333;
    color: var(--primary-color);
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

.darkmode .button {
    border: 1px solid var(--light-gray);
    color: var(--light-gray);
}

.button:hover {
    background-color: var(--primary-color);
    color: var(--dark);
}

.button:hover .icon {
    background-color: var(--dark);
}

.darkmode .button:hover {
    background-color: var(--primary-color) !important;
    color: var(--dark) !important;
    border-color: var(--dark) !important;
}

.darkmode .button:hover .icon {
    background-color: var(--primary-color) !important;
}

.news-section {
    background-color: var(--light-gray);
}

.postcard-title-side img {
    border-radius: 8px;
}

.postcard.postcard-title-side a {
    text-decoration: none;
    display: flex;
}

.postcard.postcard-title-side h3 {
    font-size: 16px;
    color: var(--dark);
    font-weight: 400;
}

.darkmode .postcard.postcard-title-side h3 {
    color: var(--light);
}

.postcard.postcard-title-side .post-title {
    /* max-height: 52px; */
    max-height: 82px;
    line-height: 27px;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 2; */
    -webkit-line-clamp: 3;
    color: var(--dark-light);
}

.darkmode .postcard.postcard-title-side .post-time-ago {
    color: var(--dark-light);
}

.postcard.postcard-title-side .post-time-ago {
    color: var(--gray);
    font-size: 13px !important;
    padding-top: 5px;
    display: none;
}

.news-section .postcard-title-inside.card {
    min-height: 340px !important;
}

.bg-dark {
    background-color: var(--dark) !important;
}

.darkbox-post-container {
    background-color: var(--dark);
    padding: 20px;
    border-radius: 8px;
    overflow: hidden;
    height: 600px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
}

.darkbox-post-container a {
    text-decoration: none;
}

.darkbox-post-container .post-time-ago {
    color: var(--light);
}

.darkbox-post-content {
    width: 50%;
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 100px;
}

.darkbox-post-title {
    color: var(--dark);
    font-size: 25px;
    background-color: var(--primary-color) !important;
    padding: 0 8px;
    font-weight: 400;
    line-height: 1.87;
    margin-bottom: 10px;
}

.darkbox-post-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 50%, #111 95%);
}

.darkbox-post-section .postcard-title-side img {
    width: 100px;
}

.darkbox-post-section .postcard-title-side a {
    color: var(--light);
}

.darkbox-post-section .postcard-title-side h3 {
    font-size: 15px;
    color: var(--light);
    font-weight: normal;
}

.darkbox-post-section .postcard-title-side .post-time-ago,
.darkbox-post-section .postcard-title-side .chips-list {
    display: none;
}

.darkbox-post-sub-container {
    position: relative;
    z-index: 2;
    margin-top: -75px;
    padding: 0 20px;
}

.hr {
    border-bottom: 1px solid #eee3;
}

.footer-menu a {
    color: var(--light);
    font-size: 14px;
    text-decoration: none;
}

.footer-menu li .arrow {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    position: absolute;
    transform: translateX(10px);
}

.footer-menu li:hover .arrow {
    opacity: 1;
    color: var(--primary-color);
    transform: translateX(20px);
}

.footer-menu li {
    color: var(--light);
    transition: all 0.3s ease-in-out;
    padding: 7px 0;
}

.footer-menu li:hover * {
    color: var(--primary-color) !important;
}

.slider::before {
    position: absolute;
    background-color: var(--white);
    color: var(--dark);
    z-index: 999;
    top: 51px;
    font-size: 40px;
    font-weight: bold;
    padding: 5px 20px;
}

body[dir=rtl] .slider::before {
    right: 50px;
    border-right: 5px solid var(--dark);
}

body[dir=ltr] .slider::before {
    left: 50px;
    border-left: 5px solid var(--dark);
}

.plust964-pagination {
    margin: 0 auto;
    text-align: center;
}

.plust964-pagination a {
    text-decoration: none;
    color: var(--light);
}

.plust964-pagination .page-numbers:not(.dots) {
    background-color: #222d;
    border-radius: 50%;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    transition: all 0.3s ease-in-out;
}

.plust964-pagination .next,
.plust964-pagination .prev {
    font-size: 18px;
}

.plust964-pagination .page-numbers:not(.dots):hover {
    background-color: var(--primary-color);
    color: var(--dark);
}

.plust964-pagination .page-numbers.current {
    background-color: var(--primary-color);
}

article.single {
    width: 100%;
    /* box-shadow: 0 -4px 34px 0px #000a; */
}

/* article.single:not(:first-child) .single-post-content {
    border-top: 10px solid #000;
    padding-top: 125px;
} */

article.single header video {
    /* height: calc((65vw - 215px) * (900/1600)); */
    max-height: 60vh;
}

article.single h1 {
    font-size: 24px;
}

/* article.single.youtube header {
    height: calc(100vw * (900/1600));
} */
article.single header {
    width: 100%;
    /* height: calc((65vw - 215px) * (900/1600)); */
    background-color: var(--dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

article.single.video header {
    background-blend-mode: lighten;
}

article.single header .header-content {
    z-index: 1;
    position: relative;
    height: inherit;
    width: 100%;
}

article.single header .header-content-inner {
    position: absolute;
    bottom: 40px;
    padding: 0 40px;
    width: inherit;
}

/* body[dir=rtl] article.single header .header-content-inner {
    right: 40px;
}

body[dir=ltr] article.single header .header-content-inner {
    left: 40px;
} */

article.single header h1 {
    /* font-size: 35px;
    width: 50%; */
    font-size: 40px;
    width: 80%;
    line-height: 1.8;
}

article.single header .overlay {
    width: 100%;
    /* height: 100%; */
    height: inherit;
    position: absolute;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, #111 100%);
    z-index: 0;
}

article.single header .chips-list {
    width: fit-content;
}

article.single header .subtitle {
    color: var(--primary-color);
}

article.single header .subtitle:after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--primary-color);
    margin-top: 10px;
}


/* article.single .single-content {
    max-width: 700px!important;
} */

article .post-content>div {
    max-width: 700px;
}

article .post-content p {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px !important;
}

article .post-content li {
    font-size: 20px;
}

article .post-content h1,
article .post-content h2,
article .post-content h3,
article .post-content h4,
article .post-content h5,
article .post-content h6 {
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 30px;
}

article .post-content h2 {
    font-size: 25px;
}

article .post-content h3 {
    font-size: 22px;
}

article .post-content h4 {
    font-size: 20px;
}

article .related-posts img {
    width: 140px;
}

article .related-posts .chips-list {
    display: none;
}

.share-icons a {
    text-decoration: none;
    color: var(--dark);
    background-color: var(--white);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    transition: all 0.3s ease-in-out;
    font-size: 18px;
    padding: 0 10px;
    border: 1px solid #4442;
}

.share-icons a:hover {
    color: var(--primary-color);
    background-color: var(--dark);
}

.darkmode .share-icons a {
    color: var(--light);
    background-color: var(--dark);
    border: 1px solid #ffffff2b;
}

.darkmode .share-icons a:hover {
    background-color: var(--primary-color);
    color: var(--dark-gray);
}

article .post-content-warper>*>img {
    max-width: 700px;
    width: 100%;
    margin: auto;
}

article .gallery .gallery-slider {
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: transparent;
    margin-top: 15px;
}

article .gallery .gallery-slider::-webkit-scrollbar {
    display: none;
}

article .gallery .gallery-item img {
    cursor: pointer !important;
    margin: 0;
    transition: all 0.3s ease-in-out;
    /* border-bottom: 5px solid transparent; */
    opacity: .3;
}

article .gallery .gallery-item img:hover,
article .gallery .gallery-item.active img {
    /* border-bottom: 5px solid var(--primary-color); */
    opacity: 1;
}

.not-found {
    background-color: var(--dark);
    color: var(--light);
    border-left: 1px solid #eee2;
    border-right: 1px solid #eee2;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.not-found .container {
    max-width: 600px;
}

.not-found img {
    mix-blend-mode: luminosity;
    opacity: 0.7;
}


.wp-block-table tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.wp-block-table td,
.wp-block-table th {
    border: 1px solid #eee;
}

.postcard-video-badge {
    position: absolute;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    color: #fff;
    font-size: 40px;
}

.darkbox-post-section .postcard-video-badge {
    display: none;
}

/* .card-img-top {
    height: 170px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
} */

article summary {
    display: list-item;
    cursor: pointer;
    background-color: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #0001;
}

article details[open] summary {
    background-color: var(--primary-color);
}

article summary:hover {
    background-color: #f5f5f5;
}

article summary::-webkit-details-marker {
    display: none;
}

details[open]>div {
    padding: 20px;
    border: 1px solid #eee;
    border-top: none;
}

details[open]>div>*:last-child {
    margin-bottom: 0;
}



.timeline {
    max-width: 800px;
}

.timeline h2 {
    font-size: 18px;
}

.timeline h2 a {
    color: var(--dark);
}

.timeline .timeline__time {
    width: 80px;
    display: flex;
    justify-content: flex-end;
}

.timeline .timeline__image {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    transition: .3s;
}

.timeline .timeline__item:hover .timeline__image {
    transform: scale(1.1);
}

.timeline .timeline__categories {
    opacity: 0.3;
    transition: .3s;
}

.timeline .timeline__item:hover .timeline__categories {
    opacity: 1;
}

.timeline .timeline__image-container {
    position: relative;
}

.timeline .timeline__item:not(:last-child) .timeline__image-container::before {
    content: '';
    display: block;
    width: 3px;
    height: 250px;
    background-color: var(--primary-color);
    z-index: -1;
    position: absolute;
    margin: 0 calc(50% - 1.5px);
    top: 50%;
}

.timeline-date-selector select {
    outline: none;
    border: none;
    width: fit-content;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    cursor: pointer;
}

/* hide arrows */
.timeline-date-selector select::-ms-expand {
    display: none;
}

.timeline-date-selector__item {
    font-size: 40px;
    font-weight: 200;
    color: gray;
    outline: none;
}

.timeline-date-selector__item.separator {
    display: inline-block;
    margin: 0 10px;
}

.header-chips {
    overflow-x: auto;
    width: 100vw;
    border-top: 1px solid #fff1;
}

.header-chips .chip {
    color: #dbdbdb;
    background-color: #1c1c1c;
    border: 1px solid #fff2;
    font-weight: 200;
}

body[dir=rtl] .header-chips {
    margin-right: calc(-50vw + 50%);
}

body[dir=ltr] .header-chips {
    margin-left: calc(-50vw + 50%);
}

.header-chips::-webkit-scrollbar {
    display: none;
}

.gallery-preview-item {
    cursor: pointer;
}

article .header-mobile h1 {
    display: inline;
    /* background-color: var(--primary-color); */
    line-height: 1.4;
    position: relative;
    /* top: -5px; */
}

/* .darkmode .header-mobile h1 {
    color: var(--primary-color);
    background-color: var(--dark-gray);
} */

.post-template-card {
    border: 1px solid #333d;
    position: relative;
}

.post-template-card .subtitle {
    margin-top: -31px;
}

.post-template-card .subtitle .card-subtitle {
    /* crop text to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-template-card .card-subtitle {
    font-size: 16px;
    color: var(--dark);
    background-color: var(--primary-color);
    display: inline-block;
    margin-bottom: 10px;
    width: fit-content;
    padding: 5px 10px;
}

.post-template-card .date {
    position: absolute;
    font-size: .8rem;
    background-color: var(--primary-color);
    color: #000000;
    border-radius: 5px;
    padding: 2px 5px;
    margin: -25px 10px 10px 10px;
    transition: .3s;
}

.post-template-card:hover .date {
    margin: 10px;
}

.post-template-card__content {
    height: 105px;
    background-color: #222d;
    transition: .3s;
    background-repeat: no-repeat !important;
}

.post-template-card.variant-title-inside .post-template-card__content {
    pointer-events: none;
    background: linear-gradient(0deg, #000000, transparent) !important;
    color: #fff;
    position: absolute;
    bottom: 0;
    border: none !important;
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.post-template-card.variant-title-inside .post-template-card__content h3 {
    color: #fff;
}

.post-template-card__content h3 {
    transition: .3s;
}

.post-template-card__title {
    color: #bbb;
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-template-card__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


.colorful-underline {
    width: fit-content;
    position: relative;
    display: inline-block;
    z-index: 1;
}

.colorful-underline::after {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    z-index: 0;
    margin-top: 10px;
}

.post-template-card .play-icon {
    font-size: 60px;
    pointer-events: none;
}

.hero-main-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    z-index: 99;
}

/* mnake animation of another circle around .hero-main-circle that scale and fade */
.hero-main-circle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0;
    animation: circle-animation 2s infinite;
    z-index: 1;
}

@keyframes circle-animation {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(5);
        opacity: 0;
    }
}

.hero-main-title {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 25px;
    padding: 20px 40px;
    background-color: #000;
    color: #fff;
    margin: 0;
    font-weight: bold;
    position: relative;
}

[dir=rtl] .hero-main-title {
    direction: rtl;
}

.hero-main-icon {
    max-height: 30px;
}

.categories-split>a:not(:last-child)::after {
    content: '•';
    margin: 0 5px;
    display: inline-block;
}

.categories-split a {
    display: flex;
    color: var(--gray);
    text-decoration: none;
    font-size: 16px;
}

.darkmode .categories-split a {
    color: var(--dark-light);
}

.single .sidebar {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
    min-height: 100px;
}


blockquote:not([class]) {
    color: var(--dark);
    padding: 20px 20px 20px 20px;
    position: relative;
    border: 4px solid var(--black);
    margin: 35px 0;
    display: block;
    background-color: #00000005;
}

blockquote:not([class])::before {
    color: #000;
    position: absolute;
    width: 60px;
    height: 40px;
    font-size: 40px;
    background-color: #fff;
    top: -20px;
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PCEtLSEgRm9udCBBd2Vzb21lIEZyZWUgNi40LjIgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjMgRm9udGljb25zLCBJbmMuIC0tPjxwYXRoIGQ9Ik00NjQgMzJIMzM2Yy0yNi41IDAtNDggMjEuNS00OCA0OHYxMjhjMCAyNi41IDIxLjUgNDggNDggNDhoODB2NjRjMCAzNS4zLTI4LjcgNjQtNjQgNjRoLThjLTEzLjMgMC0yNCAxMC43LTI0IDI0djQ4YzAgMTMuMyAxMC43IDI0IDI0IDI0aDhjODguNCAwIDE2MC03MS42IDE2MC0xNjBWODBjMC0yNi41LTIxLjUtNDgtNDgtNDh6bS0yODggMEg0OEMyMS41IDMyIDAgNTMuNSAwIDgwdjEyOGMwIDI2LjUgMjEuNSA0OCA0OCA0OGg4MHY2NGMwIDM1LjMtMjguNyA2NC02NCA2NGgtOGMtMTMuMyAwLTI0IDEwLjctMjQgMjR2NDhjMCAxMy4zIDEwLjcgMjQgMjQgMjRoOGM4OC40IDAgMTYwLTcxLjYgMTYwLTE2MFY4MGMwLTI2LjUtMjEuNS00OC00OC00OHoiLz48L3N2Zz4=), linear-gradient(0deg, #00000005 0%, #00000005 50%, #fff 50%, #fff 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

html:not([dir=rtl]) blockquote:not([class])::before {
    transform: rotateY(180deg);
}

blockquote:not([class])::after {
    color: #000;
    position: absolute;
    width: 60px;
    height: 40px;
    font-size: 40px;
    background-color: #fff;
    bottom: -20px;
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PCEtLSEgRm9udCBBd2Vzb21lIEZyZWUgNi40LjIgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjMgRm9udGljb25zLCBJbmMuIC0tPjxwYXRoIGQ9Ik00NjQgMjU2aC04MHYtNjRjMC0zNS4zIDI4LjctNjQgNjQtNjRoOGMxMy4zIDAgMjQtMTAuNyAyNC0yNFY1NmMwLTEzLjMtMTAuNy0yNC0yNC0yNGgtOGMtODguNCAwLTE2MCA3MS42LTE2MCAxNjB2MjQwYzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDEyOGMyNi41IDAgNDgtMjEuNSA0OC00OFYzMDRjMC0yNi41LTIxLjUtNDgtNDgtNDh6bS0yODggMEg5NnYtNjRjMC0zNS4zIDI4LjctNjQgNjQtNjRoOGMxMy4zIDAgMjQtMTAuNyAyNC0yNFY1NmMwLTEzLjMtMTAuNy0yNC0yNC0yNGgtOEM3MS42IDMyIDAgMTAzLjYgMCAxOTJ2MjQwYzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDEyOGMyNi41IDAgNDgtMjEuNSA0OC00OFYzMDRjMC0yNi41LTIxLjUtNDgtNDgtNDh6Ii8+PC9zdmc+), linear-gradient(180deg, #00000005 0%, #00000005 50%, #fff 50%, #fff 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

html:not([dir=rtl]) blockquote:not([class])::after {
    transform: rotateX(180deg);
}

.darkmode blockquote::before {
    background-color: var(--white);
}

.darkmode blockquote::after {
    background-color: var(--dark);
}

[dir=rtl] blockquote::before {
    right: 20px;
}

[dir=ltr] blockquote::before {
    left: 20px;
}

[dir=rtl] blockquote::after {
    left: 10px;
}

[dir=ltr] blockquote::after {
    right: 10px;
}

blockquote>*:last-child {
    margin-bottom: 0 !important;
}

.nav-link:hover {
    color: var(--primary-color);
}

.show_post {
    background-color: #efefef;
    transition: .3s;
    padding: 20px;
    margin-bottom: 10px;
}

[dir=rtl] .show_post {
    border-right: 5px solid var(--dark);
}

[dir=ltr] .show_post {
    border-left: 5px solid var(--dark);
}

.show_post:hover {
    background-color: var(--primary-color)
}

.show_post>a {
    color: var(--dark);
    display: block;
}

.show-post h3 {
    font-size: 17px !important;
    line-height: 23px;
}

.show-post span {
    font-size: 15px;
}

@media screen and (max-width: 767px) {
    .show-post h3 {
        font-size: 13px !important;
        line-height: 20px;
    }
}


article .post-content h3 {
    margin: 0 !important;
    font-size: 22px;
}

.gallery-grid {
    opacity: 0;
    border: 1px solid #000;
}

.gallery-grid-close-preview {
    position: absolute;
    top: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: var(--dark);
    border: 2px solid var(--dark);
    font-size: 25px;
    margin: 5px;
    padding: 10px;
    cursor: pointer;
}

[dir=rtl] .gallery-grid-close-preview {
    right: 0;
}

[dir=ltr] .gallery-grid-close-preview {
    left: 0;
}

.gallery-grid .gallery-item {
    background-size: cover;
    border: 2px solid var(--dark);
    opacity: 0;
    height: 14rem;
    transition: .3s;
    cursor: pointer;
}

/* hide all gallery items after item number 4 */
.gallery-grid .gallery-item:nth-child(n+5) {
    display: none;
}

.gallery-grid .gallery-plus {
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background-color: #161616b5;
    color: #fff;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.gallery-grid-rtl .gallery-plus {
    right: 0;
}

.gallery-grid-ltr .gallery-plus {
    left: 0;
}

.post-content-warper h1,
.post-content-warper h2,
.post-content-warper h3,
.post-content-warper h4,
.post-content-warper h5 {
    margin-bottom: 0px !important;
}







/* default underline */
body[dir=rtl] .underline-animation {
    background: linear-gradient(to left, currentColor 0%, currentColor 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 2px;
    background-position: 100% 100%;
}

body[dir=ltr] .underline-animation {
    background: linear-gradient(to right, currentColor 0%, currentColor 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 2px;
    background-position: 0% 100%;
}

.underline-animation:hover {
    background-size: 100% 2px !important;
}

/* target headline underline */
body[dir=rtl] .underline-animation-h h1,
body[dir=rtl] .underline-animation-h h2,
body[dir=rtl] .underline-animation-h h3,
body[dir=rtl] .underline-animation-h h4,
body[dir=rtl] .underline-animation-h h5,
body[dir=rtl] .underline-animation-h h6 {
    background: linear-gradient(to left, currentColor 0%, currentColor 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 2px;
    background-position: 100% 100%;
}

body[dir=ltr] .underline-animation-h h1,
body[dir=ltr] .underline-animation-h h2,
body[dir=ltr] .underline-animation-h h3,
body[dir=ltr] .underline-animation-h h4,
body[dir=ltr] .underline-animation-h h5,
body[dir=ltr] .underline-animation-h h6 {
    background: linear-gradient(to right, currentColor 0%, currentColor 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 2px;
    background-position: 0% 100%;
}

.underline-animation-h:hover h1,
.underline-animation-h:hover h2,
.underline-animation-h:hover h3,
.underline-animation-h:hover h4,
.underline-animation-h:hover h5,
.underline-animation-h:hover h6 {
    background-size: 100% 2px !important;
}

/* target anchor underline */
body[dir=rtl] .underline-animation-a {
    background: linear-gradient(to left, currentColor 0%, currentColor 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 2px;
    background-position: 100% 100%;
}

body[dir=ltr] .underline-animation-a {
    background: linear-gradient(to right, currentColor 0%, currentColor 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 2px;
    background-position: 0% 100%;
}

.underline-animation-a:hover {
    background-size: 100% 2px !important;
}

/* primary underline */
body[dir=rtl] .underline-primary-animation {
    background: linear-gradient(to left, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 2px;
    background-position: 100% 100%;
}

body[dir=ltr] .underline-primary-animation {
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 2px;
    background-position: 0% 100%;
}

.underline-primary-animation:hover {
    background-size: 100% 2px !important;
}

/* end underline */

/* default background animatino */
body[dir=rtl] .background-animation {
    background: linear-gradient(to left, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 100% 100%;
}

body[dir=ltr] .background-animation {
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 0% 100%;
}

.background-animation:hover {
    background-size: 100% 100% !important;
    color: var(--dark);
}

/* target headline background animation */
/* body[dir=rtl] .background-animation-h h1,
body[dir=rtl] .background-animation-h h2,
body[dir=rtl] .background-animation-h h3,
body[dir=rtl] .background-animation-h h4,
body[dir=rtl] .background-animation-h h5,
body[dir=rtl] .background-animation-h h6 {
    background: linear-gradient(to left, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 100% 100%;
}

body[dir=ltr] .background-animation-h h1,
body[dir=ltr] .background-animation-h h2,
body[dir=ltr] .background-animation-h h3,
body[dir=ltr] .background-animation-h h4,
body[dir=ltr] .background-animation-h h5,
body[dir=ltr] .background-animation-h h6 {
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 0% 100%;
}

.background-animation-h:hover h1,
.background-animation-h:hover h2,
.background-animation-h:hover h3,
.background-animation-h:hover h4,
.background-animation-h:hover h5,
.background-animation-h:hover h6 {
    background-size: 100% 100% !important;
    color: var(--dark);
} */

/* target anchor background animation */
body[dir=rtl] .background-animation-a {
    background: linear-gradient(to left, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 100% 100%;
}

body[dir=ltr] .background-animation-a {
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 0% 100%;
}

.background-animation-a:hover {
    background-size: 100% 100% !important;
    color: var(--dark);
}

/* primary background */
body[dir=rtl] .background-primary-animation {
    background: linear-gradient(to left, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 100% 100%;
}

body[dir=ltr] .background-primary-animation {
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 0% 100%;
}

.background-primary-animation:hover {
    background-size: 100% 100% !important;
    color: var(--dark);
}

/* target headline background animation */
body[dir=rtl] .background-primary-animation-h h1,
body[dir=rtl] .background-primary-animation-h h2,
body[dir=rtl] .background-primary-animation-h h3,
body[dir=rtl] .background-primary-animation-h h4,
body[dir=rtl] .background-primary-animation-h h5,
body[dir=rtl] .background-primary-animation-h h6 {
    background: linear-gradient(to left, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 100% 100%;
}

body[dir=ltr] .background-primary-animation-h h1,
body[dir=ltr] .background-primary-animation-h h2,
body[dir=ltr] .background-primary-animation-h h3,
body[dir=ltr] .background-primary-animation-h h4,
body[dir=ltr] .background-primary-animation-h h5,
body[dir=ltr] .background-primary-animation-h h6 {
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 100%);
    transition: 0.3s;
    background-repeat: no-repeat;
    display: inline;
    background-size: 0px 100%;
    background-position: 0% 100%;
}

.background-primary-animation-h:hover h1,
.background-primary-animation-h:hover h2,
.background-primary-animation-h:hover h3,
.background-primary-animation-h:hover h4,
.background-primary-animation-h:hover h5,
.background-primary-animation-h:hover h6 {
    background-size: 100% 100% !important;
    color: var(--dark) !important;
}

/* end background animation */



article .header-mobile .subtitle {
    width: fit-content;
    color: #fff !important;
    background-color: #000 !important;
    margin-bottom: 0 !important;
    font-weight: bold;
}

article.darkmode .header-mobile .subtitle {
    color: #000 !important;
    background-color: #fff !important;
}

article .header-mobile .headline {
    position: relative;
    background-color: #e7e7e7;
    color: #000;
}

article.single .headline>div {
    padding: 3.15px 50px 3.15px 50px;
}

article .header-mobile .headline::before {
    content: '';
    width: 40px;
    height: 40px;
    max-height: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
}

[dir=rtl] article .header-mobile .headline::before {
    left: auto;
    right: 0;
}

article .header-mobile .headline::after {
    content: '';
    width: 40px;
    height: 40px;
    max-height: 100%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
}

[dir=rtl] article .header-mobile .headline::after {
    left: 0;
    right: auto;
}

article.darkmode .header-mobile .headline::before {
    background-color: var(--white);
}

article.darkmode .header-mobile .headline::after {
    background-color: var(--dark);
}

#mobile-header {
    position: relative;
    z-index: 999;
    width: 0vw;
    transition: .5s;
    overflow: hidden;
    float: left;
}

[dir=rtl] #mobile-header {
    float: right;
}

#mobile-header>div {
    position: fixed;
    padding-bottom: 50px;
    top: 0;
    /* left: 0; */
    right: 0;
    width: inherit;
    height: 100%;
    z-index: 999;
    overflow: hidden;
    overflow-y: auto;
    white-space: nowrap;
    background-color: #222;
    box-shadow: inset 0px 0px 20px 0 #000;
}

[dir=rtl] #mobile-header>div {
    left: auto;
    right: 0;
}

#mobile-header>div::-webkit-scrollbar {
    display: none;
}

#mobile-header {
    height: 100%;
    overflow: auto;
}

#mobile-header ul.navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobile-header ul.navbar>li {
    width: 100%;
}

#mobile-header ul.navbar>li>a {
    width: 100%;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#mobile-header ul.navbar a {
    text-decoration: none;
    color: var(--white);
}

#mobile-header .sub-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    margin-top: 1px;
    overflow-y: hidden;
    height: 0;
    transition: .5s;
    display: block !important;
}

#mobile-header .sub-menu>li {
    position: relative;
    padding: 5px 10px;
}

#mobile-header .sub-menu>li::before {
    content: '';
    width: 1px;
    height: 35px;
    background-color: #787878;
    position: absolute;
    display: inline-block;
    top: 0px;
    right: -6px;
}

.section-title {
    background-color: var(--primary-color);
    padding: 10px;
    width: fit-content;
    color: var(--dark);
    box-shadow: 5px 5px 0 0 var(--white);
    font-size: 25px;
    font-weight: bold;
}

.hero-main .embed-responsive iframe {
    width: 100%;
    height: calc((100vw - 215px) * 9 / 16);
    pointer-events: none;
    /* opacity: 0; */
    /* transition: .3s; */
}

.breaking {
    background: var(--primary-color);
    border-bottom: 1px solid #eee;
    position: fixed;
    bottom: 0;
    width: calc(100% - 215px);
    z-index: 8;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.breaking-title {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
    margin: 10px;
    height: 100%;
    background-color: #222;
    color: #fff;
    display: flex;
    align-items: center;
}

.breaking-tiny-slider {
    overflow: hidden;
    height: 100%;
    width: 100% !important;
    margin: 0;
}

.breaking-tiny-slider-inner {
    transition: .3s;
}

.breaking-tiny-slider-item {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
}

.breaking-tiny-slider-item a {
    color: var(--dark);
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    /* height: 100%; */
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.socialmedia-section .social-media-icon {
    color: var(--primary-color);
}

.socialmedia-section .social-media-icon:hover {
    color: var(--white);
}

/* article.single:not(:first-child)>div>div {
    padding-top: 60px;
    border-top: 5px dashed #0006;
} */

article.single>div>div {
    padding-bottom: 50px;
}

.post-template-card__title,
.section-title {
    font-weight: bold !important;
}

.timeline-item h3 {
    font-size: 17px;
    line-height: 1.6;
    font-weight: bold;
    color: #fff;
}

.timeline-item a {
    text-decoration: none;
}

.timeline-item .subtitle {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 5px;
}

.timeline-date:before {
    content: '';
    position: absolute;
    top: 60px;
    left: 50%;
    width: 0.5px;
    height: 100%;
    background: #444;
    z-index: 1;
}

.timeline-date .current-date {
    top: 20px;
    padding: 10px;
    background-color: #fcd903;
    color: #000;
    z-index: 2;
    text-align: center;
    border: 1px solid #000;
    margin-top: 10px;
}

#timeline-date {
    background-color: #fcd903;
    border: none;
    border-radius: 5px;
}

#timeline-date:focus {
    box-shadow: 0 0 0 0.25rem rgb(252 217 3 / 20%);
}

section.timeline-section {
    /* background-image: radial-gradient(at top right, #ffe0000d 0%, #6464c62b 100%), radial-gradient(at bottom right, #ffe0000d 0%, #6464c62b 100%); */
    background-image: linear-gradient(to left, #ffe0000d 0%, #6464c62b 100%);
}

.post-warper {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background-color: #000000;
    overflow: hidden;
    overflow-y: auto;
}

.notification-settings {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999999;
    background-color: #000;
    width: 100%;
    height: 100%;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--dark) !important;
}

.btn-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--dark) !important;
}

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

.bg-primary {
    background-color: var(--primary-color) !important;
}

.related-posts-footer {
    margin: 0;
    margin-top: 100px;
    background-color: #eee;
}

.related-posts-footer .card.postcard.classic-postcard {
    border-bottom: 1px solid #0002;
    border-radius: 0;
}

.card.postcard.classic-postcard a {
    text-decoration: none;
}

.card.postcard.classic-postcard h3 {
    color: var(--dark);
    line-height: 1.6;
    font-size: 16px;
}

.related-posts-footer {
    border: 1px solid #0002;
    border-bottom: 0;
}

.related-posts-footer h2 {
    border-bottom: 1px solid #0002;
    margin: 0 !important;
    padding: 20px;
    font-weight: lighter !important;
}

.sticky-header {
    position: fixed;
    z-index: 99999999;
    background: #000;
    width: 100%;
    padding: 10px 15px;
    top: -150px;
}

.sticky-header .burger-btn {
    color: #fff;
}

.about-us-content {
    max-width: 700px;
    transform: translateY(-100px);
    box-shadow: 0 0 30px #0003;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgb(252 217 3 / 20%);
    border-color: #fcd903;
}

.page h2 {
    font-size: 1.2rem;
    font-weight: bold;
}

.page h1 {
    font-size: 1.9rem;
    font-weight: bold;
}

.caption {
    font-size: 12px !important;
}

.social_embed {
    margin: 20px 0;
}

.social-embed.youtube {
    height: 400px;
}

[dir=rtl] .breaking {
    margin-right: 215px;
}

.breaking {
    margin-left: 215px;
}

.breaking.variant-auto {
    background-color: #fff;
    border: none;
    box-shadow: 0 0 20px -1px #0002;
}

.breaking.variant-auto .breaking-tiny-slider-item a {
    color: #111;
}

/* .breaking.variant-auto .breaking-title {
    background-color: var(--primary-color);
    color: var(--dark);
} */





.breaking.variant-auto .breaking-title {
    background-color: transparent;
    color: var(--dark);
    border-right: 2px solid #fff;
}

*:not([dir=rtl]) .breaking.variant-auto .breaking-title {
    border-right: none;
    border-left: 2px solid #fff;
}

.breaking.variant-auto .breaking-tiny-slider-item a {
    color: #fff;
}

.breaking.variant-auto {
    background-color: #000;
    background: linear-gradient(-30deg, black, #1a170c);
    border-top: 1px solid var(--primary-color);
}

.timeline-image {
    border-radius: 5px;
}

.timeline-day-end {
    display: none;
}

img.size-full[decoding="async"],
img.size-large[decoding="async"] {
    width: 100%;
    height: auto;
}

body {
    width: 100vw;
    /* overflow-x: hidden; */
}

.icon {
    transition: .3s;
}

.tags-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: 0.3s;
    width: calc(100vw - 215px);
    overflow: scroll;
    padding: 0 10px;
    scroll-behavior: smooth;
}

.tags-slider-container {
    position: relative;
}

.tags-slider-container .arrow:hover {
    /* same arrow but yellow color */
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="%23fcd903"/></svg>'), linear-gradient(to left, #00000000, #000000)!important;
}

.tags-slider-container .arrow:first-child {
    content: '';
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    max-width: 15%;
    /* pointer-events: none; */
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="%23aaaaaa"/></svg>'), linear-gradient(to left, #00000000, #000000);
    background-size: 50px, 100px;
    background-repeat: no-repeat;
    background-position: left;
    z-index: 9;
    opacity: .9;
    transition: .3s;
}

.tags-slider-container:not(.hovered) .arrow:first-child {
    opacity: 0;
    pointer-events: none;
}

.tags-slider-container .arrow:last-child {
    content: '';
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    max-width: 15%;
    /* pointer-events: none; */
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="%23aaaaaa"/></svg>'), linear-gradient(to left, #00000000, #000000);
    background-size: 50px, 100px;
    background-repeat: no-repeat;
    background-position: left;
    transform: rotateY(180deg);
    z-index: 9;
    opacity: .9;
    transition: .3s;
}

.tags-slider-container:not(.hovered) .arrow:last-child {
    opacity: 0;
    pointer-events: none;
}

.tags-slider-container.hide-left-arrow .arrow:last-child {
    opacity: 0;
    pointer-events: none;
}

.tags-slider-container.hide-right-arrow .arrow:first-child {
    opacity: 0;
    pointer-events: none;
}

/* hide arrow always if width mobile */
@media (max-width: 767px) {
    .tags-slider-container .arrow,
    .tags-slider-container .arrow {
        display: none;
    }
}

@media (max-height: 800px) {
    .tags-slider {
        width: calc(100vw - 180px);
    }
}

@media (max-width: 992px) {
    .tags-slider {
        width: 100vw;
    }
}

.tag-button {
    white-space: nowrap;
    padding: 5px 20px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #555;
    text-decoration: none;
    color: #aaa;
    transition: 0.3s;
    cursor: pointer;
}

.tag-button:hover {
    background-color: #fff;
    color: #000;
}

.tag-button.active {
    background-color: #fff;
    color: #000;
}

.block-post-card {
    overflow: hidden;
    cursor: pointer;
}

.block-post-card-image {
    object-fit: cover;
    pointer-events: none;
    transition: 0.3s;
    transform: scale(1);
}

.block-post-card:hover .block-post-card-image {
    transform: scale(1.1);
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    --_c: no-repeat radial-gradient(farthest-side, var(--primary-color) 92%, #0000);
    background:
        var(--_c) top,
        var(--_c) left,
        var(--_c) right,
        var(--_c) bottom;
    background-size: 12px 12px;
    animation: l7 1s infinite;
}

@keyframes l7 {
    to {
        transform: rotate(.5turn)
    }
}

.lines-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lines-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lines-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad {
    position: relative;
}

.ad::before {
    content: 'Ad';
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--primary-color) !important;
    color: #000 !important;
    padding: 0 10px !important;
    z-index: 1;
    border-radius: 0 0 10px;
}

.article-tag:hover {
    background-color: #000!important;
    color: #fff!important;
}